feat: cv styling changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "www-aaronjy-me",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "private": true,
   "type": "module",
   "lint-staged": {

src/components/Resume/Resume.jsx

@@ -51,15 +51,10 @@ function Resume({
                 position={exp.position}
                 start={exp.start}
                 end={exp.end}
+                skills={exp.skills}
               >
                 {markdownToHtml(exp.description)}
               </WorkExperience>
-              {!!exp.skills?.length && (
-                <details className="hide-print">
-                  <summary>Competencies</summary>
-                  <>{exp.skills.sort().join(", ")}</>
-                </details>
-              )}
             </div>
           ))}
         </div>
@@ -107,25 +102,9 @@ function Resume({
 
 export default Resume;
 
-function WorkExperience({ position, employer, start, end, children }) {
+function WorkExperience({ position, employer, start, end, skills, children }) {
   return (
-    // <div className={style["work-experience"]}>
-    //   <div>
-    //     <h3 id={position}>
-    //       {position}
-    //       <br />
-    //       <small>{employer}</small>
-    //     </h3>
-    //     <small>
-    //       <time>{start}</time> - <time>{end}</time>
-    //     </small>
-    //   </div>
-    //   <div
-    //     data-test="children"
-    //     dangerouslySetInnerHTML={{ __html: children }}
-    //   />
-    // </div>
-
+    <>
       <table className={style.experienceTable}>
         <tbody>
           <tr>
@@ -137,9 +116,7 @@ function WorkExperience({ position, employer, start, end, children }) {
               <span className={style.employer}>{employer}</span>
             </td>
             <td className="text-right">
-            {/* <small> */}
               <time>{start}</time> - <time>{end}</time>
-            {/* </small> */}
             </td>
           </tr>
           <tr>
@@ -147,10 +124,21 @@ function WorkExperience({ position, employer, start, end, children }) {
               <div
                 data-test="children"
                 dangerouslySetInnerHTML={{ __html: children }}
+                className={style.experienceContent}
               />
+
+              {!!skills?.length && (
+                <div className={style.skillList}>
+                  {skills.sort().map((skill) => (
+                    <span key={skill}>{skill}</span>
+                  ))}
+                </div>
+              )}
             </td>
           </tr>
         </tbody>
       </table>
+      <hr />
+    </>
   );
 }

src/components/Resume/Resume.module.css

@@ -9,7 +9,7 @@
 .cvContent {
   display: flex;
   flex-direction: row-reverse;
-  gap: 3rem;
+  gap: 0.5em;
   position: relative;
 }
 
@@ -30,11 +30,28 @@
   margin-bottom: 0;
 }
 
-.cv ol,
-.cv ul {
+.cvContent ol,
+.cvContent ul {
   padding: 0 1rem;
 }
 
+.skillList {
+  font-size: 0.8em;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.2em;
+}
+
+.skillList span {
+  background-color: var(--dark);
+  color: var(--light);
+  padding: 0 0.5em;
+}
+
+.experienceContent > p {
+  margin-bottom: 0;
+}
+
 @media screen and (max-width: 768px) {
   .cvContent {
     display: block;
@@ -47,10 +64,6 @@
 }
 
 @media print {
-  .cvContent {
-    gap: 1rem;
-  }
-
   .cvContent .experience {
     flex-basis: 80%;
   }

src/styles/globals.css

@@ -37,7 +37,7 @@ td:first-child {
   }
 
   body {
-    font-size: 12px;
+    font-size: 11.5px;
     line-height: 1.3;
     padding: 0;
   }