feat: translate Curriculum Vitae in both English and French

packages/ui/src/Home/Skills/SkillItem.tsx

@@ -5,7 +5,7 @@ import { useMemo } from "react"
 import { Link } from "../../Design/Link/Link"
 import { useTheme } from "../../Layout/Header/SwitchTheme"
 import type { SkillName } from "./skills"
-import { skills } from "./skills"
+import { SKILLS } from "./skills"
 
 export interface SkillItemProps {
   skillName: SkillName
@@ -14,7 +14,7 @@ export interface SkillItemProps {
 export const SkillItem: React.FC<SkillItemProps> = (props) => {
   const { skillName } = props
 
-  const skill = skills[skillName]
+  const skill = SKILLS[skillName]
 
   const { theme } = useTheme()
 

packages/ui/src/Home/Skills/Skills.tsx

@@ -2,6 +2,7 @@ import { useTranslations } from "next-intl"
 import { Section, SectionTitle } from "../../Layout/Section/Section"
 import { SkillItem } from "./SkillItem"
 import { SkillsSection } from "./SkillsSection"
+import { SKILL_CATEGORIES, SKILL_NAMES_BY_CATEGORY } from "./skills"
 
 export interface SkillsProps {}
 
@@ -12,34 +13,17 @@ export const Skills: React.FC<SkillsProps> = () => {
     <Section verticalSpacing horizontalSpacing id="skills">
       <SectionTitle>{t("home.skills.title")}</SectionTitle>
 
-      <SkillsSection title={t("home.skills.programming-languages")}>
-        <SkillItem skillName="TypeScript" />
-        <SkillItem skillName="Python" />
-        <SkillItem skillName="C/C++" />
-        <SkillItem skillName="PHP" />
-      </SkillsSection>
+      {SKILL_CATEGORIES.map((category) => {
+        const skillNames = SKILL_NAMES_BY_CATEGORY[category]
 
-      <SkillsSection title={t("home.skills.frontend")}>
-        <SkillItem skillName="HTML" />
-        <SkillItem skillName="CSS" />
-        <SkillItem skillName="Tailwind CSS" />
-        <SkillItem skillName="React.js (+ Next.js)" />
-      </SkillsSection>
-
-      <SkillsSection title={t("home.skills.backend")}>
-        <SkillItem skillName="Laravel" />
-        <SkillItem skillName="Node.js" />
-        <SkillItem skillName="Fastify" />
-        <SkillItem skillName="PostgreSQL" />
-      </SkillsSection>
-
-      <SkillsSection title={t("home.skills.software-tools")}>
-        <SkillItem skillName="GNU/Linux" />
-        <SkillItem skillName="Arch Linux" />
-        <SkillItem skillName="Visual Studio Code" />
-        <SkillItem skillName="Git" />
-        <SkillItem skillName="Docker" />
-      </SkillsSection>
+        return (
+          <SkillsSection key={category} title={t(`home.skills.${category}`)}>
+            {skillNames.map((skillName) => {
+              return <SkillItem key={skillName} skillName={skillName} />
+            })}
+          </SkillsSection>
+        )
+      })}
     </Section>
   )
 }

packages/ui/src/Home/Skills/skills.ts

@@ -3,7 +3,7 @@ export interface Skill {
   image: string | { [key: string]: string }
 }
 
-export const skills = {
+export const SKILLS = {
   JavaScript: {
     link: "https://developer.mozilla.org/docs/Web/JavaScript",
     image: "/images/skills/JavaScript.webp",
@@ -112,4 +112,27 @@ export const skills = {
   },
 } as const
 
-export type SkillName = keyof typeof skills
+export type SkillName = keyof typeof SKILLS
+
+export const SKILL_CATEGORIES = [
+  "programming-languages",
+  "frontend",
+  "backend",
+  "software-tools",
+] as const
+export type SkillCategory = (typeof SKILL_CATEGORIES)[number]
+
+export const SKILL_NAMES_BY_CATEGORY = {
+  "programming-languages": ["TypeScript", "Python", "C/C++", "PHP"],
+  frontend: ["HTML", "CSS", "Tailwind CSS", "React.js (+ Next.js)"],
+  backend: ["Laravel", "Node.js", "Fastify", "PostgreSQL"],
+  "software-tools": [
+    "GNU/Linux",
+    "Arch Linux",
+    "Visual Studio Code",
+    "Git",
+    "Docker",
+  ],
+} as const satisfies {
+  [key in SkillCategory]: SkillName[]
+}