feat(#48): add annexes

.devcontainer/devcontainer.json

@@ -10,6 +10,7 @@
         "github.vscode-github-actions",
         "ms-azuretools.vscode-docker",
         "redhat.vscode-yaml",
+        "streetsidesoftware.code-spell-checker",
         "task.vscode-task",
         "yzhang.markdown-all-in-one"
       ]

src/app/cv/page.tsx

@@ -4,6 +4,7 @@ import Identity from '@/components/cv/identity';
 import Section from '@/components/cv/section';
 
 import styles from './page.module.css';
+import Annexes from '@/components/cv/annexes';
 
 export const metadata: Metadata = {
   title: "Hello, I'm Damien",
@@ -12,7 +13,6 @@ export const metadata: Metadata = {
 
 /**
  * TODO:
- * - Add annexe sections (simpler than regular sections)
  * - Add my photo to the CV
  * - Compute my age instead of hardcoding it
  * - Add phone and email icons right before their values
@@ -24,7 +24,7 @@ export default function About() {
   return (
     <div className={styles.main}>
       <div className={styles.container}>
-        <Identity name="Damien Carcel" profession="Sofware engineer" />
+        <Identity name="Damien Carcel" profession="Software engineer" />
         <Section
           title="Contact"
           subSections={[
@@ -108,14 +108,44 @@ export default function About() {
             {
               title: 'Development tools',
               value: {
-                main: 'Jetbrains IDEs, VS Code, Git, Docker, Kubernetes, Terraform, CircleCI, GitHub Actions',
+                main: 'JetBrains IDEs, VS Code, Git, Docker, Kubernetes, Terraform, CircleCI, GitHub Actions',
                 important: true,
               },
             },
             { title: 'Operating systems', value: { main: 'GNU/Linux, Windows, macOS', important: true } },
             { title: 'Design', value: { main: 'GIMP, Inkscape, Adobe Illustrator', important: true } },
           ]}
         />
+        <Annexes
+          annexes={[
+            {
+              title: 'Professional highlights',
+              content: [
+                {
+                  key: '1',
+                  text: 'I enjoy coaching and bringing new knowledge when I can while learning new things from new people.',
+                },
+                {
+                  key: '2',
+                  text: 'My main thrill is trying to understand what are users problems and to bring solutions to those.',
+                },
+              ],
+            },
+            {
+              title: 'Other skills and hobbies',
+              content: [
+                {
+                  key: '1',
+                  text: 'Reading (mainly fantasy, science fiction and manga)',
+                },
+                {
+                  key: '2',
+                  text: 'Fishing',
+                },
+              ],
+            },
+          ]}
+        />
       </div>
     </div>
   );

src/components/cv/annex.tsx

@@ -0,0 +1,19 @@
+import styles from './style.module.css';
+
+export type AnnexProps = {
+  title: string;
+  content: { key: string; text: string }[];
+};
+
+export default function Annex(props: AnnexProps) {
+  return (
+    <div className={styles.annex}>
+      <div className={styles['section-title']}>{props.title}</div>
+      <div className={styles['annex-content']}>
+        {props.content.map((paragraph) => (
+          <p key={paragraph.key}>{paragraph.text}</p>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/cv/annexes.tsx

@@ -0,0 +1,17 @@
+import Annex, { AnnexProps } from '@/components/cv/annex';
+
+import styles from './style.module.css';
+
+type AnnexesProps = {
+  annexes: AnnexProps[];
+};
+
+export default function Annexes(props: AnnexesProps) {
+  return (
+    <div className={styles.annexes}>
+      {props.annexes.map((annex) => (
+        <Annex key={annex.title} title={annex.title} content={annex.content} />
+      ))}
+    </div>
+  );
+}

src/components/cv/section.tsx

@@ -9,11 +9,11 @@ type SectionProps = {
 
 export default function Section(props: SectionProps) {
   return (
-    <section className={styles.section}>
+    <div className={styles.section}>
       <div className={styles['section-title']}>{props.title}</div>
       {props.subSections.map((subsection) => (
         <SubSection key={subsection.title} title={subsection.title} value={subsection.value} />
       ))}
-    </section>
+    </div>
   );
 }

src/components/cv/style.module.css

@@ -1,10 +1,45 @@
+.annexes {
+  display: flex;
+  flex-direction: row;
+  padding: 5px 0;
+}
+
+.annexes > :first-child {
+  padding-right: 15px;
+  padding-left: 0;
+}
+
+.annex {
+  width: 50%;
+  padding-left: 15px;
+}
+
+.annex-content > p {
+  text-align: justify;
+}
+
+.name {
+  font-size: xxx-large;
+  font-weight: bold;
+  padding: 5px 0;
+  text-transform: capitalize;
+}
+
+.profession {
+  color: rgb(90 90 90);
+  font-size: x-large;
+  font-weight: bold;
+  padding: 5px 0;
+  text-transform: uppercase;
+}
+
 .section {
   padding: 10px 0;
 }
 
 .section-title {
   border-bottom: 1px solid #888;
-  color: dimgrey;
+  color: rgb(90 90 90);
   font-size: large;
   padding: 5px 0;
   margin-bottom: 10px;
@@ -18,7 +53,7 @@
 }
 
 .subsection-title {
-  color: grey;
+  color: rgb(140 140 140);
   padding-right: 15px;
   text-align: right;
   width: 25%;
@@ -31,18 +66,3 @@
 .subsection-value > ul {
   margin: inherit;
 }
-
-.name {
-  font-size: xxx-large;
-  font-weight: bold;
-  padding: 5px 0;
-  text-transform: capitalize;
-}
-
-.profession {
-  color: dimgrey;
-  font-size: x-large;
-  font-weight: bold;
-  padding: 5px 0;
-  text-transform: uppercase;
-}