Work

bun.lock

@@ -64,6 +64,7 @@
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-i18next": "^16.0.1",
+        "react-icons": "^5.5.0",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.13",
       },
@@ -846,6 +847,8 @@
 
     "react-i18next": ["react-i18next@16.0.1", "", { "dependencies": { "@babel/runtime": "^7.27.6", "html-parse-stringify": "^3.0.1" }, "peerDependencies": { "i18next": ">= 25.5.2", "react": ">= 16.8.0", "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-0S//bpYEkCPjzuVmxDf9Z6+Y+ArNvpAUk7eDL4qNCZXjDh6Z9j6MZ+NThU7kMCOsmYmDCun3GYEwkiOjjZo9Ug=="],
 
+    "react-icons": ["react-icons@5.5.0", "", { "peerDependencies": { "react": "*" } }, "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw=="],
+
     "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],

packages/webapp/package.json

@@ -31,6 +31,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-i18next": "^16.0.1",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13"
   },

packages/webapp/src/i18n/en.ts

@@ -1,5 +1,6 @@
 export const en = {
     nav: {
         gitRepos: "Git repositories",
-    }
+        sourceCode: "Source code",
+    },
 }

packages/webapp/src/i18n/fr.ts

@@ -4,5 +4,6 @@ import type { en } from "./en"
 export const fr = {
     nav: {
         gitRepos: "Dépôts Git",
-    }
+        sourceCode: "Code source",
+    },
 } satisfies typeof en

packages/webapp/src/routes/__root.tsx

@@ -1,6 +1,8 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
 import { useTranslation } from "react-i18next"
+import { DiGit } from "react-icons/di"
+import { FaCode } from "react-icons/fa"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 
@@ -10,17 +12,28 @@ export const Route = createRootRoute({
 })
 
 function RootComponent() {
-    const { t } = useTranslation()
+    const { t, i18n } = useTranslation()
 
     return <>
-        <div className="container mt-10 mr-auto ml-auto flex flex-row items-center justify-between">
-            <div className="flex grow-1 flex-row items-center justify-center gap-2">
+        <div className="container mt-10 mr-auto ml-auto flex flex-row items-center justify-center gap-20">
+            <div className="flex flex-row items-center justify-center gap-2">
                 <Button asChild>
-                    <a href="https://git.valverde.cloud">{t("nav.gitRepos")}</a>
+                    <a href="https://git.valverde.cloud"><DiGit /> {t("nav:gitRepos")}</a>
+                </Button>
+
+                <Button asChild>
+                    <a href="https://git.valverde.cloud/thilawyn/website"><FaCode /> {t("nav:sourceCode")}</a>
                 </Button>
 
                 <Button>Resumé</Button>
             </div>
+
+            <div className="flex flex-row items-center justify-center gap-4">
+                <div>
+                    <a href="#" onClick={() => i18n.changeLanguage("en")}>English</a> /&nbsp;
+                    <a href="#" onClick={() => i18n.changeLanguage("fr")}>Français</a>
+                </div>
+            </div>
         </div>
 
         <div className="mx-auto w-[750px] max-w-full px-5 pt-28 pb-10 text-foreground">