feat: Rename i18n.js to i18n.ts and update language handling in translations

src/App.tsx

@@ -16,7 +16,7 @@ import ContactSection from "./components/ContactSection";
 import TimelineSection from "./components/TimelineSection";
 import data from "./assets/DATA";
 import { useTranslation } from "react-i18next";
-import i18n from './i18n.js';
+import i18n from './i18n';
 import {createRoot} from "react-dom/client";
 import GitHubStatsSection from 'components/GitHubStatsSection';
 

src/components/ProjectCard.tsx

@@ -22,7 +22,7 @@ const ProjectCard = ({ project }: ProjectCardProps) => {
         <div className="group w-full sm:w-5/12 m-4 mx-auto p-6 rounded-xl border-2 border-gray-300 dark:border-gray-700">
             <a href={link}>
                 <h1 className="text-xl text-center font-bold dark:text-gray-200">
-                    {title}{" "}
+                    {t(`projects.${project.title}.title`)}{" "}
                     <FaExternalLinkAlt className="inline align-baseline" />
                 </h1>
             </a>

src/i18n.ts

@@ -2,11 +2,14 @@ import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import HttpBackend from "i18next-http-backend";
 
+const savedLang = localStorage.getItem('lang');
+const browserLang = navigator.language.startsWith('fr') ? 'fr' : 'en';
+
 i18n
   .use(HttpBackend)
   .use(initReactI18next)
   .init({
-    lng: navigator.language.startsWith('fr') ? 'fr' : 'en',
+    lng: savedLang || browserLang,
     fallbackLng: "en",
     interpolation: {
       escapeValue: false