fix: design regressions

levino · Apr 29, 2023 · f2c783e · f2c783e
1 parent b7efae9
commit f2c783e
Show file tree

Hide file tree

Showing 13 changed files with 88 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "jsonresume-theme-stackoverflow": "^2.0.1",
     "markdown-it": "^13.0.1",
     "moment": "^2.29.4",
+    "ramda": "^0.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -38,6 +39,7 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
+    "@types/ramda": "^0.29.1",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "babel-plugin-named-exports-order": "^0.0.2",

diff --git a/public/profile.jpeg b/public/profile.jpeg
diff --git a/src/Basics.tsx b/src/Basics.tsx
@@ -4,6 +4,7 @@ import type {
   Basics as BasicsProps,
   Profile as ProfileProps,
 } from "./types";
+import * as R from "ramda";
 
 const Location: React.FC<LocationProps> = ({
   address,
@@ -13,11 +14,11 @@ const Location: React.FC<LocationProps> = ({
   countryCode,
 }) => (
   <span className="location">
-    {address && <span className="address">{address},</span>}
-    {postalCode && <span className="postalCode">{postalCode},</span>}
-    {city && <span className="city">{city},</span>}
-    {region && <span className="region">{region},</span>}
-    {countryCode && <span className="countryCode">{countryCode},</span>}
+    {address && <span className="address">{address}, </span>}
+    {postalCode && <span className="postalCode">{postalCode}, </span>}
+    {city && <span className="city">{city}, </span>}
+    {region && <span className="region">{region} </span>}
+    {countryCode && <span className="countryCode">{countryCode}</span>}
   </span>
 );
 
@@ -27,6 +28,7 @@ export const Contact: React.FC<BasicsProps> = ({ email, url, phone }) => (
       <div className="website">
         <span className="fas fa-external-link-alt"></span>
         <a className="hide-href-print" target="_blank" href={url}>
+          {"\u00A0"}
           {url}
         </a>
       </div>
@@ -35,6 +37,7 @@ export const Contact: React.FC<BasicsProps> = ({ email, url, phone }) => (
       <div className="email">
         <span className="far fa-envelope"></span>
         <a className="hide-href-print" href={`mailto:${email}`}>
+          {"\u00A0"}
           {email}
         </a>
       </div>
@@ -43,6 +46,7 @@ export const Contact: React.FC<BasicsProps> = ({ email, url, phone }) => (
       <div className="phone">
         <span className="fas fa-mobile-alt"></span>
         <a className="hide-href-print" href="tel:{{phone}}">
+          {"\u00A0"}
           {phone}
         </a>
       </div>
@@ -54,15 +58,23 @@ const Profile: React.FC<ProfileProps> = ({ network, username, url }) => (
   <div className="item">
     {network && (
       <div className="username">
-        <span className="fab fa-{{spaceToDash network}} {{spaceToDash network}} social"></span>
+        <span
+          className={`fab fa-${R.toLower(network)} ${R.toLower(
+            network
+          )} social`}
+        ></span>
         {url ? (
           <span className="url">
             <a target="_blank" href="{{url}}">
+              {"\u00A0"}
               {username}
             </a>
           </span>
         ) : (
-          <span>{username}</span>
+          <span>
+            {"\u00A0"}
+            {username}
+          </span>
         )}
       </div>
     )}
@@ -79,16 +91,16 @@ export const Basics: React.FC<BasicsProps> = (props) => {
           <h1 className="name">{name}</h1>
           <h2 className="label">{label}</h2>
         </div>
+        {location && <Location {...location} />}
+        <Contact {...props} />
+        {profiles && (
+          <div id="profiles">
+            {profiles.map((profile, index) => (
+              <Profile {...profile} key={index} />
+            ))}
+          </div>
+        )}
       </header>
-      {location && <Location {...location} />}
-      <Contact {...props} />
-      {profiles && (
-        <div id="profiles">
-          {profiles.map((profile, index) => (
-            <Profile {...profile} key={index} />
-          ))}
-        </div>
-      )}
       {summary && (
         <section className="section">
           <section className="main-summary">

diff --git a/src/Certificates.tsx b/src/Certificates.tsx
@@ -35,6 +35,7 @@ export const Certificates: React.FC<{ certificates: Certificate[] }> = ({
                       rel="noopener noreferrer"
                       href={certificate.url}
                     >
+                      {"\u00A0"}
                       {certificate.url}
                     </a>
                   </span>

diff --git a/src/Education.tsx b/src/Education.tsx
@@ -36,7 +36,12 @@ export const Education: React.FC<{ education: EducationProps[] }> = ({
                 {edu.studyType && (
                   <div className="studyType">{edu.studyType}</div>
                 )}
-                {edu.area && <div className="area">{edu.area}</div>}
+                {edu.area && (
+                  <div className="area">
+                    {"\u00A0"}
+                    {edu.area}
+                  </div>
+                )}
                 {edu.institution && (
                   <div className="institution">{edu.institution}</div>
                 )}

diff --git a/src/Projects.tsx b/src/Projects.tsx
@@ -24,7 +24,10 @@ export const Projects: React.FC<{ projects: Project[] }> = ({ projects }) => (
                   )}
                   {project.startDate && (
                     <div className="date">
-                      <span className="startDate">{MY(project.startDate)}</span>
+                      <span className="startDate">
+                        {MY(project.startDate)}
+                        {"\u00A0"}
+                      </span>
                       {project.endDate ? (
                         <span className="endDate">- {MY(project.endDate)}</span>
                       ) : (
@@ -39,6 +42,7 @@ export const Projects: React.FC<{ projects: Project[] }> = ({ projects }) => (
                 <span className="website">
                   <span className="fas fa-external-link-alt"></span>
                   <a target="_blank" href={project.url}>
+                    {"\u00A0"}
                     {project.url}
                   </a>
                 </span>

diff --git a/src/Publications.tsx b/src/Publications.tsx
@@ -27,6 +27,7 @@ export const Publications: React.FC<{ publications: Publication[] }> = ({
                       <span className="website">
                         <span className="fas fa-external-link-alt"></span>
                         <a target="_blank" href={publication.url}>
+                          {"\u00A0"}
                           {publication.name}
                         </a>
                       </span>
@@ -36,7 +37,7 @@ export const Publications: React.FC<{ publications: Publication[] }> = ({
                   </span>
                 )}
                 {publication.publisher && (
-                  <span className="publisher">in {publication.publisher}</span>
+                  <span className="publisher"> in {publication.publisher}</span>
                 )}
               </div>
             </header>

diff --git a/src/References.tsx b/src/References.tsx
@@ -14,10 +14,10 @@ export const References: React.FC<{ references: Reference[] }> = ({
           <div className="item" key={index}>
             {reference.reference && (
               <blockquote className="reference">
-                &#8220;&#32;{reference.reference}&#32;&#8221;
+                &#8220;{reference.reference}&#8221;
+                {reference.name && <div className="name">{reference.name}</div>}
               </blockquote>
             )}
-            {reference.name && <div className="name">{reference.name}</div>}
           </div>
         ))}
       </section>

diff --git a/src/Volunteer.tsx b/src/Volunteer.tsx
@@ -28,11 +28,11 @@ export const Volunteer: React.FC<VolunteerProps> = ({ volunteer }) => {
                     {item.startDate && (
                       <span className="startDate">
                         {new Date(item.startDate).toLocaleDateString()}
+                        {"\u00A0"}
                       </span>
                     )}
                     {item.endDate ? (
                       <span className="endDate">
-                        {" "}
                         - {new Date(item.endDate).toLocaleDateString()}
                       </span>
                     ) : (
@@ -52,6 +52,7 @@ export const Volunteer: React.FC<VolunteerProps> = ({ volunteer }) => {
               <div className="website">
                 <span className="fas fa-external-link-alt"></span>
                 <a target="_blank" href={item.url}>
+                  {"\u00A0"}
                   {item.url}
                 </a>
               </div>

diff --git a/src/Work.tsx b/src/Work.tsx
@@ -22,6 +22,7 @@ export const Work: React.FC<{ work: WorkItem[] }> = ({ work }) =>
                     {workItem.startDate && (
                       <span className="startDate">
                         {MY(workItem.startDate)}
+                        {"\u00A0"}
                       </span>
                     )}
                     {workItem.endDate ? (

diff --git a/src/storyResume.json b/src/storyResume.json
@@ -5,7 +5,7 @@
     "image": "profile.jpeg",
     "email": "[email protected]",
     "phone": "(555) 555-5555",
-    "website": "https://www.samanthajones.com",
+    "url": "https://www.samanthajones.com",
     "summary": "Experienced software developer with a passion for developing innovative solutions that improve user experiences.",
     "location": {
       "address": "123 Main St.",
@@ -60,7 +60,7 @@
       "endDate": "2019-07",
       "url": "https://example.com/cat-chat",
       "keywords": ["chat", "cats", "humor"],
-      "summary": "A chat application for cats, complete with emojis of mice, birds, and fish. Meow-sages never looked so cute!",
+      "description": "A chat application for cats, complete with emojis of mice, birds, and fish. Meow-sages never looked so cute!",
       "highlights": [
         "Implemented realtime chat using WebSocket technology",
         "Created custom cat-themed emojis using Adobe Illustrator"
@@ -72,7 +72,7 @@
       "endDate": "2020-07",
       "url": "https://example.com/nacho-tracker",
       "keywords": ["nachos", "tracking", "snacks"],
-      "summary": "An app for tracking the location of your nachos. Never lose sight of your favorite snack again!",
+      "description": "An app for tracking the location of your nachos. Never lose sight of your favorite snack again!",
       "highlights": [
         "Built a RESTful API using Node.js and Express",
         "Designed a responsive UI with Bootstrap"
@@ -84,7 +84,7 @@
       "endDate": "2021-02",
       "url": "https://example.com/reverse-alarm-clock",
       "keywords": ["clock", "time", "reverse"],
-      "summary": "An alarm clock that wakes you up by setting the time to the moment you fell asleep. Who needs a snooze button?",
+      "description": "An alarm clock that wakes you up by setting the time to the moment you fell asleep. Who needs a snooze button?",
       "highlights": [
         "Developed the algorithm for calculating sleep time using JavaScript",
         "Integrated with Google Calendar API for scheduling"
@@ -96,7 +96,7 @@
       "name": "The Ultimate Guide to Becoming a Cat Lady",
       "publisher": "Cat Fancy Magazine",
       "releaseDate": "2022-01-01",
-      "keywords": ["cats", "cat lady", "cat ownership"],
+      "url": "https://example.com/cat-lady-book",
       "summary": "This comprehensive guide provides everything you need to know about becoming a cat lady, from selecting the perfect feline companion to building a cat-friendly home."
     },
     {
@@ -189,7 +189,7 @@
     {
       "organization": "Local Animal Shelter",
       "position": "Volunteer",
-      "website": "https://www.localanimalshelter.com",
+      "url": "https://www.localanimalshelter.com",
       "startDate": "2019-01-01",
       "endDate": "2020-12-31",
       "summary": "Assisted with daily operations of the shelter, including feeding and caring for animals, cleaning cages and kennels, and providing customer service to visitors.",
@@ -201,7 +201,7 @@
     {
       "organization": "City Soup Kitchen",
       "position": "Soup Kitchen Volunteer",
-      "website": "https://www.citysoupkitchen.com",
+      "url": "https://www.citysoupkitchen.com",
       "startDate": "2018-03-01",
       "endDate": "2018-06-30",
       "summary": "Assisted with preparing and serving meals to homeless and low-income individuals in the community.",
@@ -213,7 +213,7 @@
     {
       "organization": "Global Health Corps",
       "position": "Fellow",
-      "website": "https://www.globalhealthcorps.org",
+      "url": "https://www.globalhealthcorps.org",
       "startDate": "2016-07-01",
       "endDate": "2017-06-30",
       "summary": "Collaborated with local health organizations in Malawi to develop and implement community health programs focused on maternal and child health.",

diff --git a/style.css b/style.css
@@ -182,10 +182,6 @@ em {
   color: #757575;
 }
 
-blockquote {
-  margin-bottom: 1em;
-}
-
 strong {
   font-weight: 700;
 }
@@ -347,7 +343,7 @@ section .location {
 .institution::before,
 .organization::before,
 .awarder::before {
-  content: "at ";
+  content: " at ";
 }
 
 .company,
@@ -561,6 +557,12 @@ section .location {
 
 #references .item {
   padding-left: 0.5em;
+}
+
+#references {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1em;
   border-left: 5px solid #ff6d1f;
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -3242,6 +3242,13 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
   integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
 
+"@types/ramda@^0.29.1":
+  version "0.29.1"
+  resolved "https://registry.yarnpkg.com/@types/ramda/-/ramda-0.29.1.tgz#c3d3842b9bc4aa5fbe03e90faa0c3eff9ba0f9f4"
+  integrity sha512-Ff5RRG9YRqMgWOqZVVavSjGEvYHUnXnGF0YPGbzIWhB3o8qiccSJZlFX2z8qm3G1H/IC5w0ozHmlezUeQCtGfQ==
+  dependencies:
+    types-ramda "^0.29.2"
+
 "@types/range-parser@*":
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
@@ -10903,6 +10910,11 @@ ramda@^0.28.0:
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.28.0.tgz#acd785690100337e8b063cab3470019be427cc97"
   integrity sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA==
 
+ramda@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.29.0.tgz#fbbb67a740a754c8a4cbb41e2a6e0eb8507f55fb"
+  integrity sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -12758,6 +12770,11 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+ts-toolbelt@^9.6.0:
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz#50a25426cfed500d4a09bd1b3afb6f28879edfd5"
+  integrity sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==
+
 tsconfig-paths@^3.14.1:
   version "3.14.2"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
@@ -12863,6 +12880,13 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
+types-ramda@^0.29.2:
+  version "0.29.2"
+  resolved "https://registry.yarnpkg.com/types-ramda/-/types-ramda-0.29.2.tgz#2bf33863a51498b43f616cd8cd98227efe9109eb"
+  integrity sha512-HpLcR0ly2EfXQwG8VSI5ov6ml7PvtT+u+cp+7lZLu7q4nhnPDVW+rUTC1uy/SNs4aAyTUXri5M/LyhgvjEXJDg==
+  dependencies:
+    ts-toolbelt "^9.6.0"
+
 typescript@^5.0.4:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"