feat: translate Curriculum Vitae in both English and French

packages/ui/src/CurriculumVitae/CurriculumVitaeSkills.tsx

@@ -1,5 +1,9 @@
 import { useTranslations } from "next-intl"
 import { FaToolbox } from "react-icons/fa"
+import {
+  SKILL_CATEGORIES,
+  SKILL_NAMES_BY_CATEGORY,
+} from "../Home/Skills/skills"
 import { CurriculumVitaeSection } from "./CurriculumVitaeSection"
 
 export interface CurriculumVitaeSkillsProps {}
@@ -9,13 +13,47 @@ export const CurriculumVitaeSkills: React.FC<
 > = () => {
   const t = useTranslations()
 
+  const skills = [
+    ...SKILL_CATEGORIES.map((category) => {
+      const skillNames = SKILL_NAMES_BY_CATEGORY[category]
+      return {
+        category,
+        skillNames,
+      }
+    }),
+    {
+      category: "others",
+      skillNames: [t("locales.en-US"), t("home.skills.driving-license")],
+    },
+  ] as const
+
   return (
     <CurriculumVitaeSection
       id="skills"
       title={t("home.skills.title")}
       icon={<FaToolbox size={24} />}
     >
-      <p>Test</p>
+      <ul className="list-unstyled m-0">
+        {skills.map(({ category, skillNames }) => {
+          return (
+            <li key={category} className="card card-nested relative">
+              <div className="skill-info">
+                <strong>{t(`home.skills.${category}`)}</strong>
+
+                <div className="labels mt-2">
+                  {skillNames.map((skillName) => {
+                    return (
+                      <p key={skillName} className="label label-keyword">
+                        {skillName}
+                      </p>
+                    )
+                  })}
+                </div>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
     </CurriculumVitaeSection>
   )
 }