feat(#48): improve subsection formatting

damien-carcel · Dec 28, 2023 · 8d6f2a1 · 8d6f2a1
1 parent d5e9436
commit 8d6f2a1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git a/src/app/cv/page.tsx b/src/app/cv/page.tsx
@@ -12,7 +12,6 @@ export const metadata: Metadata = {
 
 /**
  * TODO:
- * - Correctly format my last experience (Akeneo XP on several lines)
  * - Add annexe sections (simpler than regular sections)
  * - Add my photo to the CV
  * - Compute my age instead of hardcoding it
@@ -29,7 +28,7 @@ export default function About() {
         <Section
           title="Contact"
           subSections={[
-            { title: 'Address', value: { main: '12 rue Pitre de Lisle du Dreneuc 44200 Nantes, France' } },
+            { title: 'Address', value: { main: '12 rue Pitre de Lisle du Dreneuc, 44200 Nantes, France' } },
             { title: 'Phone', value: { main: '+33 6 20 45 25 55' } },
             { title: 'Email', value: { main: '[email protected]' } },
             { title: 'Nationality', value: { main: 'French' } },
@@ -42,9 +41,12 @@ export default function About() {
             {
               title: '2014 - Today',
               value: {
-                main: `Software Engineer at Akeneo. Including}:
-- Lead Software Engineer from January 2020 to June 2023
-- Senior Software Engineer since July 2023`,
+                main: 'Software Engineer at Akeneo. Including}:',
+                isList: true,
+                sub: [
+                  { key: '1', text: 'Lead Software Engineer from January 2020 to June 2023' },
+                  { key: '2', text: 'Senior Software Engineer since July 2023' },
+                ],
               },
             },
             { title: '2010 - 2013', value: { main: 'Earth-Sciences contractual teacher in middle and high school' } },
@@ -58,23 +60,23 @@ export default function About() {
               title: '2009',
               value: {
                 main: 'PHD in Earth Sciences',
-                sub: ' Claude Bernard Lyon 1 University, Lyon, France',
+                sub: [{ key: '1', text: 'Claude Bernard Lyon 1 University, Lyon, France' }],
                 important: true,
               },
             },
             {
               title: '2006',
               value: {
                 main: 'Master in Earth Sciences',
-                sub: ' Claude Bernard Lyon 1 University, Lyon, France',
+                sub: [{ key: '1', text: 'Claude Bernard Lyon 1 University, Lyon, France' }],
                 important: true,
               },
             },
             {
               title: '2004',
               value: {
                 main: 'License in Earth Sciences',
-                sub: ' Claude Bernard Lyon 1 University, Lyon, France',
+                sub: [{ key: '1', text: 'Claude Bernard Lyon 1 University, Lyon, France' }],
                 important: true,
               },
             },
@@ -86,7 +88,11 @@ export default function About() {
             { title: 'Mother tongue', value: { main: 'French', important: true } },
             {
               title: 'Foreign languages',
-              value: { main: 'English', important: true, sub: 'Good command of both written and spoken language' },
+              value: {
+                main: 'English',
+                important: true,
+                sub: [{ key: '1', text: 'Good command of both written and spoken language' }],
+              },
             },
           ]}
         />

diff --git a/src/components/cv/style.module.css b/src/components/cv/style.module.css
@@ -24,10 +24,14 @@
   width: 25%;
 }
 
-.subsection-content {
+.subsection-value {
   width: 75%;
 }
 
+.subsection-value > ul {
+  margin: inherit;
+}
+
 .name {
   font-size: xxx-large;
   font-weight: bold;

diff --git a/src/components/cv/subsection.tsx b/src/components/cv/subsection.tsx
@@ -2,18 +2,35 @@ import styles from './style.module.css';
 
 export type SubSectionProps = {
   title: string;
-  value: { main: string; sub?: string; important?: boolean };
+  // TODO: Use a better pattern than those optional keys
+  value: { main: string; sub?: { key: string; text: string }[]; important?: boolean; isList?: boolean };
 };
 
 export default function SubSection(props: SubSectionProps) {
   return (
     <div className={styles.subsection}>
       <div className={styles['subsection-title']}>{props.title}</div>
-      <div className={styles['subsection-content']}>
+      <div className={styles['subsection-value']}>
         <div style={{ fontWeight: props.value.important ? 'bold' : 'normal' }} className={styles.subsection_value}>
           {props.value.main}
         </div>
-        {props.value.sub ? <div className={styles['subsection-value']}>{props.value.sub}</div> : ''}
+        {props.value.sub ? (
+          props.value.isList ? (
+            <ul>
+              {props.value.sub.map((subValue) => (
+                <li key={subValue.key}>{subValue.text}</li>
+              ))}
+            </ul>
+          ) : (
+            <div>
+              {props.value.sub.map((subValue) => (
+                <div key={subValue.key}>{subValue.text}</div>
+              ))}
+            </div>
+          )
+        ) : (
+          ''
+        )}
       </div>
     </div>
   );