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,50 +102,43 @@ 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>
+            <td>
+              <span id={position} className={style.position}>
+                {position}
+              </span>
+              <br />
+              <span className={style.employer}>{employer}</span>
+            </td>
+            <td className="text-right">
+              <time>{start}</time> - <time>{end}</time>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={2}>
+              <div
+                data-test="children"
+                dangerouslySetInnerHTML={{ __html: children }}
+                className={style.experienceContent}
+              />
 
-    <table className={style.experienceTable}>
-      <tbody>
-        <tr>
-          <td>
-            <span id={position} className={style.position}>
-              {position}
-            </span>
-            <br />
-            <span className={style.employer}>{employer}</span>
-          </td>
-          <td className="text-right">
-            {/* <small> */}
-            <time>{start}</time> - <time>{end}</time>
-            {/* </small> */}
-          </td>
-        </tr>
-        <tr>
-          <td colSpan={2}>
-            <div
-              data-test="children"
-              dangerouslySetInnerHTML={{ __html: children }}
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
+              {!!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;
   }