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; -}