diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index bc75f2a..d593d4e 100644
--- a/.devcontainer/devcontainer.json
+++ b/.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"
]
diff --git a/src/app/cv/page.tsx b/src/app/cv/page.tsx
index b7d4ea0..a618c39 100644
--- a/src/app/cv/page.tsx
+++ b/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 (
);
diff --git a/src/components/cv/annex.tsx b/src/components/cv/annex.tsx
new file mode 100644
index 0000000..a3e1b44
--- /dev/null
+++ b/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 (
+
+
{props.title}
+
+ {props.content.map((paragraph) => (
+
{paragraph.text}
+ ))}
+
+
+ );
+}
diff --git a/src/components/cv/annexes.tsx b/src/components/cv/annexes.tsx
new file mode 100644
index 0000000..f00e96b
--- /dev/null
+++ b/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 (
+
+ {props.annexes.map((annex) => (
+
+ ))}
+
+ );
+}
diff --git a/src/components/cv/section.tsx b/src/components/cv/section.tsx
index eccfc08..3032f06 100644
--- a/src/components/cv/section.tsx
+++ b/src/components/cv/section.tsx
@@ -9,11 +9,11 @@ type SectionProps = {
export default function Section(props: SectionProps) {
return (
-
+
{props.title}
{props.subSections.map((subsection) => (
))}
-
+
);
}
diff --git a/src/components/cv/style.module.css b/src/components/cv/style.module.css
index 8314c11..bca20e6 100644
--- a/src/components/cv/style.module.css
+++ b/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;
-}