diff --git a/.devcontainer/README.md b/.devcontainer/README.md
new file mode 100644
index 0000000..f4559d1
--- /dev/null
+++ b/.devcontainer/README.md
@@ -0,0 +1,43 @@
+# Dev Container Configuration
+
+Ce dossier contient la configuration du Dev Container pour le projet Portfolio.
+
+## 🚀 Fonctionnalités
+
+- **Node.js 20** avec TypeScript pré-installé
+- **Extensions VS Code** automatiquement installées :
+  - ESLint
+  - Prettier
+  - Tailwind CSS IntelliSense
+  - React snippets
+  - Path IntelliSense
+  - Auto Rename Tag
+
+- **Configuration automatique** :
+  - Format à la sauvegarde avec Prettier
+  - Correction ESLint automatique
+  - Support TypeScript complet
+  - Support Tailwind CSS
+
+- **Port forwarding** :
+  - Port 5173 (Vite dev server) automatiquement exposé
+
+## 📋 Prérequis
+
+- Docker installé et en cours d'exécution
+- VS Code avec l'extension "Dev Containers" installée
+
+## 🏃 Utilisation
+
+1. Ouvrir le projet dans VS Code
+2. Cliquer sur le popup "Reopen in Container" ou utiliser la commande :
+   - `Cmd+Shift+P` → "Dev Containers: Reopen in Container"
+3. Attendre que le container se construise (première fois seulement)
+4. Les dépendances npm seront installées automatiquement
+5. Lancer le serveur de dev avec `npm run dev`
+
+## 🔧 Personnalisation
+
+Pour modifier la configuration :
+- Éditer `.devcontainer/devcontainer.json`
+- Reconstruire le container : `Cmd+Shift+P` → "Dev Containers: Rebuild Container"
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 0000000..366b31d
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,57 @@
+{
+  "name": "Portfolio Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
+  
+  // Configure tool-specific properties
+  "customizations": {
+    "vscode": {
+      // Extensions to install in the container
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "bradlc.vscode-tailwindcss",
+        "dsznajder.es7-react-js-snippets",
+        "christian-kohler.path-intellisense",
+        "formulahendry.auto-rename-tag",
+        "ms-vscode.vscode-typescript-next"
+      ],
+      // Settings to apply in the container
+      "settings": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.codeActionsOnSave": {
+          "source.fixAll.eslint": "explicit"
+        },
+        "typescript.tsdk": "node_modules/typescript/lib",
+        "tailwindCSS.experimental.classRegex": [
+          ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+        ]
+      }
+    }
+  },
+
+  // Forward ports for Vite dev server
+  "forwardPorts": [5173],
+  "portsAttributes": {
+    "5173": {
+      "label": "Vite Dev Server",
+      "onAutoForward": "notify"
+    }
+  },
+
+  // Use 'postCreateCommand' to run commands after the container is created
+  "postCreateCommand": "npm install",
+
+  // Use 'postStartCommand' to run commands each time the container starts
+  // "postStartCommand": "npm run dev",
+
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root
+  "remoteUser": "node",
+
+  // Features to add to the dev container
+  "features": {
+    "ghcr.io/devcontainers/features/git:1": {
+      "version": "latest"
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 0491347..0adeeb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,13 @@
       "name": "test-portfolio",
       "version": "0.0.0",
       "dependencies": {
+        "clsx": "^2.1.1",
+        "i18next": "^25.6.0",
+        "motion": "^12.23.24",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-i18next": "^16.0.0",
+        "react-router": "^7.9.4"
       },
       "devDependencies": {
         "@types/react": "^18.2.37",
@@ -62,13 +67,15 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
-      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.22.13",
-        "chalk": "^2.4.2"
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -276,19 +283,21 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -303,38 +312,28 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.2.tgz",
-      "integrity": "sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.2",
-        "@babel/types": "^7.23.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/highlight": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
-      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0"
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.3.tgz",
-      "integrity": "sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
+      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.4"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -372,15 +371,25 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
-      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/parser": "^7.22.15",
-        "@babel/types": "^7.22.15"
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -408,27 +417,45 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.3.tgz",
-      "integrity": "sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
+      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.5.tgz",
-      "integrity": "sha512-bhvbzWFF3CwMs5tbjf3ObfGqbl/17ict2/uwOSfr3wmxDE6VdS2GqY/FuzIPe0q0bdhj65zQsvqfArI9MY6+AA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -438,13 +465,14 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.5.tgz",
-      "integrity": "sha512-5d1OkoJxnYQfmC+Zd8NBFjkhyCNYwM4n9ODrycTFY6Jk1IGiZ+tjVJDDSwDt77nK+tfpGP4T50iMtVi4dEGzhQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -454,13 +482,14 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.5.tgz",
-      "integrity": "sha512-9t+28jHGL7uBdkBjL90QFxe7DVA+KGqWlHCF8ChTKyaKO//VLuoBricQCgwhOjA1/qOczsw843Fy4cbs4H3DVA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -470,13 +499,14 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.5.tgz",
-      "integrity": "sha512-mvXGcKqqIqyKoxq26qEDPHJuBYUA5KizJncKOAf9eJQez+L9O+KfvNFu6nl7SCZ/gFb2QPaRqqmG0doSWlgkqw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -486,13 +516,14 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.5.tgz",
-      "integrity": "sha512-Ly8cn6fGLNet19s0X4unjcniX24I0RqjPv+kurpXabZYSXGM4Pwpmf85WHJN3lAgB8GSth7s5A0r856S+4DyiA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -502,13 +533,14 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.5.tgz",
-      "integrity": "sha512-GGDNnPWTmWE+DMchq1W8Sd0mUkL+APvJg3b11klSGUDvRXh70JqLAO56tubmq1s2cgpVCSKYywEiKBfju8JztQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
@@ -518,13 +550,14 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.5.tgz",
-      "integrity": "sha512-1CCwDHnSSoA0HNwdfoNY0jLfJpd7ygaLAp5EHFos3VWJCRX9DMwWODf96s9TSse39Br7oOTLryRVmBoFwXbuuQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
@@ -534,13 +567,14 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.5.tgz",
-      "integrity": "sha512-lrWXLY/vJBzCPC51QN0HM71uWgIEpGSjSZZADQhq7DKhPcI6NH1IdzjfHkDQws2oNpJKpR13kv7/pFHBbDQDwQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -550,13 +584,14 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.5.tgz",
-      "integrity": "sha512-o3vYippBmSrjjQUCEEiTZ2l+4yC0pVJD/Dl57WfPwwlvFkrxoSO7rmBZFii6kQB3Wrn/6GwJUPLU5t52eq2meA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -566,13 +601,14 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.5.tgz",
-      "integrity": "sha512-MkjHXS03AXAkNp1KKkhSKPOCYztRtK+KXDNkBa6P78F8Bw0ynknCSClO/ztGszILZtyO/lVKpa7MolbBZ6oJtQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
       "cpu": [
         "ia32"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -582,13 +618,14 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.5.tgz",
-      "integrity": "sha512-42GwZMm5oYOD/JHqHska3Jg0r+XFb/fdZRX+WjADm3nLWLcIsN27YKtqxzQmGNJgu0AyXg4HtcSK9HuOk3v1Dw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
       "cpu": [
         "loong64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -598,13 +635,14 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.5.tgz",
-      "integrity": "sha512-kcjndCSMitUuPJobWCnwQ9lLjiLZUR3QLQmlgaBfMX23UEa7ZOrtufnRds+6WZtIS9HdTXqND4yH8NLoVVIkcg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
       "cpu": [
         "mips64el"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -614,13 +652,14 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.5.tgz",
-      "integrity": "sha512-yJAxJfHVm0ZbsiljbtFFP1BQKLc8kUF6+17tjQ78QjqjAQDnhULWiTA6u0FCDmYT1oOKS9PzZ2z0aBI+Mcyj7Q==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
       "cpu": [
         "ppc64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -630,13 +669,14 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.5.tgz",
-      "integrity": "sha512-5u8cIR/t3gaD6ad3wNt1MNRstAZO+aNyBxu2We8X31bA8XUNyamTVQwLDA1SLoPCUehNCymhBhK3Qim1433Zag==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
       "cpu": [
         "riscv64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -646,13 +686,14 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.5.tgz",
-      "integrity": "sha512-Z6JrMyEw/EmZBD/OFEFpb+gao9xJ59ATsoTNlj39jVBbXqoZm4Xntu6wVmGPB/OATi1uk/DB+yeDPv2E8PqZGw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
       "cpu": [
         "s390x"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -662,13 +703,14 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.5.tgz",
-      "integrity": "sha512-psagl+2RlK1z8zWZOmVdImisMtrUxvwereIdyJTmtmHahJTKb64pAcqoPlx6CewPdvGvUKe2Jw+0Z/0qhSbG1A==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -678,13 +720,14 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.5.tgz",
-      "integrity": "sha512-kL2l+xScnAy/E/3119OggX8SrWyBEcqAh8aOY1gr4gPvw76la2GlD4Ymf832UCVbmuWeTf2adkZDK+h0Z/fB4g==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "netbsd"
@@ -694,13 +737,14 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.5.tgz",
-      "integrity": "sha512-sPOfhtzFufQfTBgRnE1DIJjzsXukKSvZxloZbkJDG383q0awVAq600pc1nfqBcl0ice/WN9p4qLc39WhBShRTA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "openbsd"
@@ -710,13 +754,14 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.5.tgz",
-      "integrity": "sha512-dGZkBXaafuKLpDSjKcB0ax0FL36YXCvJNnztjKV+6CO82tTYVDSH2lifitJ29jxRMoUhgkg9a+VA/B03WK5lcg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "sunos"
@@ -726,13 +771,14 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.5.tgz",
-      "integrity": "sha512-dWVjD9y03ilhdRQ6Xig1NWNgfLtf2o/STKTS+eZuF90fI2BhbwD6WlaiCGKptlqXlURVB5AUOxUj09LuwKGDTg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -742,13 +788,14 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.5.tgz",
-      "integrity": "sha512-4liggWIA4oDgUxqpZwrDhmEfAH4d0iljanDOK7AnVU89T6CzHon/ony8C5LeOdfgx60x5cnQJFZwEydVlYx4iw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
       "cpu": [
         "ia32"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -758,13 +805,14 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.5.tgz",
-      "integrity": "sha512-czTrygUsB/jlM8qEW5MD8bgYU2Xg14lo6kBDXW6HdxKjh8M5PzETGiSHaz9MtbXBYDloHNUAUW2tMiKW4KM9Mw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -961,156 +1009,308 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.4.1.tgz",
-      "integrity": "sha512-Ss4suS/sd+6xLRu+MLCkED2mUrAyqHmmvZB+zpzZ9Znn9S8wCkTQCJaQ8P8aHofnvG5L16u9MVnJjCqioPErwQ==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.4.tgz",
+      "integrity": "sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.4.1.tgz",
-      "integrity": "sha512-sRSkGTvGsARwWd7TzC8LKRf8FiPn7257vd/edzmvG4RIr9x68KBN0/Ek48CkuUJ5Pj/Dp9vKWv6PEupjKWjTYA==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.4.tgz",
+      "integrity": "sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.4.1.tgz",
-      "integrity": "sha512-nz0AiGrrXyaWpsmBXUGOBiRDU0wyfSXbFuF98pPvIO8O6auQsPG6riWsfQqmCCC5FNd8zKQ4JhgugRNAkBJ8mQ==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.4.tgz",
+      "integrity": "sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.4.1.tgz",
-      "integrity": "sha512-Ogqvf4/Ve/faMaiPRvzsJEqajbqs00LO+8vtrPBVvLgdw4wBg6ZDXdkDAZO+4MLnrc8mhGV6VJAzYScZdPLtJg==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.4.tgz",
+      "integrity": "sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ]
     },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.4.tgz",
+      "integrity": "sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.4.tgz",
+      "integrity": "sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.4.1.tgz",
-      "integrity": "sha512-9zc2tqlr6HfO+hx9+wktUlWTRdje7Ub15iJqKcqg5uJZ+iKqmd2CMxlgPpXi7+bU7bjfDIuvCvnGk7wewFEhCg==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.4.tgz",
+      "integrity": "sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.4.tgz",
+      "integrity": "sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.4.1.tgz",
-      "integrity": "sha512-phLb1fN3rq2o1j1v+nKxXUTSJnAhzhU0hLrl7Qzb0fLpwkGMHDem+o6d+ZI8+/BlTXfMU4kVWGvy6g9k/B8L6Q==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.4.tgz",
+      "integrity": "sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.4.1.tgz",
-      "integrity": "sha512-M2sDtw4tf57VPSjbTAN/lz1doWUqO2CbQuX3L9K6GWIR5uw9j+ROKCvvUNBY8WUbMxwaoc8mH9HmmBKsLht7+w==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.4.tgz",
+      "integrity": "sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.4.tgz",
+      "integrity": "sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.4.tgz",
+      "integrity": "sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.4.tgz",
+      "integrity": "sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.4.tgz",
+      "integrity": "sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.4.tgz",
+      "integrity": "sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.4.1.tgz",
-      "integrity": "sha512-mHIlRLX+hx+30cD6c4BaBOsSqdnCE4ok7/KDvjHYAHoSuveoMMxIisZFvcLhUnyZcPBXDGZTuBoalcuh43UfQQ==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.4.tgz",
+      "integrity": "sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.4.1.tgz",
-      "integrity": "sha512-tB+RZuDi3zxFx7vDrjTNGVLu2KNyzYv+UY8jz7e4TMEoAj7iEt8Qk6xVu6mo3pgjnsHj6jnq3uuRsHp97DLwOA==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.4.tgz",
+      "integrity": "sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.4.1.tgz",
-      "integrity": "sha512-Hdn39PzOQowK/HZzYpCuZdJC91PE6EaGbTe2VCA9oq2u18evkisQfws0Smh9QQGNNRa/T7MOuGNQoLeXhhE3PQ==",
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.4.tgz",
+      "integrity": "sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.4.tgz",
+      "integrity": "sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.4.1.tgz",
-      "integrity": "sha512-tLpKb1Elm9fM8c5w3nl4N1eLTP4bCqTYw9tqUBxX8/hsxqHO3dxc2qPbZ9PNkdK4tg4iLEYn0pOUnVByRd2CbA==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.4.tgz",
+      "integrity": "sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==",
       "cpu": [
         "ia32"
       ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.4.tgz",
+      "integrity": "sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.4.1.tgz",
-      "integrity": "sha512-eAhItDX9yQtZVM3yvXS/VR3qPqcnXvnLyx1pLXl4JzyNMBNO3KC986t/iAg2zcMzpAp9JSvxB5VZGnBiNoA98w==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.4.tgz",
+      "integrity": "sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -1157,6 +1357,13 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1461,18 +1668,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -1566,22 +1761,24 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -1657,20 +1854,6 @@
         }
       ]
     },
-    "node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1698,21 +1881,15 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "1.1.3"
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
-    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1734,11 +1911,21 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -1832,11 +2019,12 @@
       "dev": true
     },
     "node_modules/esbuild": {
-      "version": "0.19.5",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.5.tgz",
-      "integrity": "sha512-bUxalY7b1g8vNhQKdB24QDmHeY4V4tw/s6Ak5z+jJX9laP5MoQseTOMemAr0gxssjNcH0MCViG8ONI2kksvfFQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -1844,28 +2032,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.19.5",
-        "@esbuild/android-arm64": "0.19.5",
-        "@esbuild/android-x64": "0.19.5",
-        "@esbuild/darwin-arm64": "0.19.5",
-        "@esbuild/darwin-x64": "0.19.5",
-        "@esbuild/freebsd-arm64": "0.19.5",
-        "@esbuild/freebsd-x64": "0.19.5",
-        "@esbuild/linux-arm": "0.19.5",
-        "@esbuild/linux-arm64": "0.19.5",
-        "@esbuild/linux-ia32": "0.19.5",
-        "@esbuild/linux-loong64": "0.19.5",
-        "@esbuild/linux-mips64el": "0.19.5",
-        "@esbuild/linux-ppc64": "0.19.5",
-        "@esbuild/linux-riscv64": "0.19.5",
-        "@esbuild/linux-s390x": "0.19.5",
-        "@esbuild/linux-x64": "0.19.5",
-        "@esbuild/netbsd-x64": "0.19.5",
-        "@esbuild/openbsd-x64": "0.19.5",
-        "@esbuild/sunos-x64": "0.19.5",
-        "@esbuild/win32-arm64": "0.19.5",
-        "@esbuild/win32-ia32": "0.19.5",
-        "@esbuild/win32-x64": "0.19.5"
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
       }
     },
     "node_modules/escalade": {
@@ -1877,15 +2066,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/eslint": {
       "version": "8.53.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.53.0.tgz",
@@ -2214,10 +2394,11 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2274,6 +2455,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2379,15 +2587,6 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
-    "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/hasown": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
@@ -2400,6 +2599,46 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "25.6.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.6.0.tgz",
+      "integrity": "sha512-tTn8fLrwBYtnclpL5aPXK/tAYBLWVvoHM1zdfXoRNLcI+RvtMsoZRV98ePlaW3khHYKuNh/Q65W/+NVFUeIwVw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
@@ -2500,6 +2739,7 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -2678,12 +2918,13 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -2702,6 +2943,47 @@
         "node": "*"
       }
     },
+    "node_modules/motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.24.tgz",
+      "integrity": "sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.24",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -2720,9 +3002,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "dev": true,
       "funding": [
         {
@@ -2730,6 +3012,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -2896,10 +3179,11 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -2932,9 +3216,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
       "funding": [
         {
@@ -2950,10 +3234,11 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -3123,6 +3408,32 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.0.0.tgz",
+      "integrity": "sha512-JQ+dFfLnFSKJQt7W01lJHWRC0SX7eDPobI+MSTJ3/gP39xH2g33AuTE7iddAfXYHamJdAeMGM0VFboPaD3G68Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.5.2",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -3132,6 +3443,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
+      "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -3205,10 +3538,14 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.4.1.tgz",
-      "integrity": "sha512-idZzrUpWSblPJX66i+GzrpjKE3vbYrlWirUHteoAbjKReZwa0cohAErOYA5efoMmNCdvG9yrJS+w9Kl6csaH4w==",
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz",
+      "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -3217,18 +3554,28 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.4.1",
-        "@rollup/rollup-android-arm64": "4.4.1",
-        "@rollup/rollup-darwin-arm64": "4.4.1",
-        "@rollup/rollup-darwin-x64": "4.4.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.4.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.4.1",
-        "@rollup/rollup-linux-arm64-musl": "4.4.1",
-        "@rollup/rollup-linux-x64-gnu": "4.4.1",
-        "@rollup/rollup-linux-x64-musl": "4.4.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.4.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.4.1",
-        "@rollup/rollup-win32-x64-msvc": "4.4.1",
+        "@rollup/rollup-android-arm-eabi": "4.52.4",
+        "@rollup/rollup-android-arm64": "4.52.4",
+        "@rollup/rollup-darwin-arm64": "4.52.4",
+        "@rollup/rollup-darwin-x64": "4.52.4",
+        "@rollup/rollup-freebsd-arm64": "4.52.4",
+        "@rollup/rollup-freebsd-x64": "4.52.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.52.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.52.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.52.4",
+        "@rollup/rollup-linux-arm64-musl": "4.52.4",
+        "@rollup/rollup-linux-loong64-gnu": "4.52.4",
+        "@rollup/rollup-linux-ppc64-gnu": "4.52.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.52.4",
+        "@rollup/rollup-linux-riscv64-musl": "4.52.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.52.4",
+        "@rollup/rollup-linux-x64-gnu": "4.52.4",
+        "@rollup/rollup-linux-x64-musl": "4.52.4",
+        "@rollup/rollup-openharmony-arm64": "4.52.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.52.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.52.4",
+        "@rollup/rollup-win32-x64-gnu": "4.52.4",
+        "@rollup/rollup-win32-x64-msvc": "4.52.4",
         "fsevents": "~2.3.2"
       }
     },
@@ -3278,6 +3625,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3309,10 +3662,11 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3383,18 +3737,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -3483,20 +3825,12 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -3522,6 +3856,12 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3550,7 +3890,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
       "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3605,14 +3945,15 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.0.tgz",
-      "integrity": "sha512-ESJVM59mdyGpsiNAeHQOR/0fqNoOyWPYesFto8FFZugfmhdHx8Fzd8sF3Q/xkVhZsyOxHfdM7ieiVAorI9RjFw==",
+      "version": "5.4.20",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.20.tgz",
+      "integrity": "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.19.3",
-        "postcss": "^8.4.31",
-        "rollup": "^4.2.0"
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -3631,6 +3972,7 @@
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -3648,6 +3990,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
@@ -3659,6 +4004,15 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index c7e9615..83d1038 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "i18next": "^25.6.0",
+    "motion": "^12.23.24",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-i18next": "^16.0.0",
+    "react-router": "^7.9.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index 9de6919..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useState, useEffect } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App() {
-    const [count, setCount] = useState(0)
-
-    useEffect(() => {
-        console.log("fire")
-    }, [])
-
-    return (
-        <>
-            <div>
-                <a href="https://vitejs.dev" target="_blank">
-                    <img src={viteLogo} className="logo" alt="Vite logo" />
-                </a>
-                <a href="https://react.dev" target="_blank">
-                    <img src={reactLogo} className="logo react" alt="React logo" />
-                </a>
-            </div>
-            <h1>Vite + React</h1>
-            <div className="card">
-                <button onClick={() => setCount((count) => count + 1)}>
-                    count is {count}
-                </button>
-                <p>
-                    Edit <code>src/App.tsx</code> and save to test HMR
-                </p>
-            </div>
-            <p className="read-the-docs">
-                Click on the Vite and React logos to learn more
-            </p>
-        </>
-    )
-}
-
-export default App
diff --git a/src/components/About.tsx b/src/components/About.tsx
new file mode 100644
index 0000000..ebf562e
--- /dev/null
+++ b/src/components/About.tsx
@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next';
+
+const About = () => {
+    const { t } = useTranslation();
+
+    return (
+        <section id="about" className="py-20 px-8">
+            <div className="max-w-4xl mx-auto">
+                <h2 className="text-4xl font-bold mb-8 text-accent">{t('about.title')}</h2>
+                <div className="space-y-6 text-secondary/80">
+                    <p className="text-lg leading-relaxed">
+                        {t('about.description')}
+                    </p>
+                    <div className="grid md:grid-cols-2 gap-6 mt-8">
+                        <div className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
+                            <h3 className="text-xl font-semibold mb-3 text-accent">{t('about.experience_title')}</h3>
+                            <p className="text-secondary/70">{t('about.experience_desc')}</p>
+                        </div>
+                        <div className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
+                            <h3 className="text-xl font-semibold mb-3 text-accent">{t('about.passion_title')}</h3>
+                            <p className="text-secondary/70">{t('about.passion_desc')}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default About;
diff --git a/src/components/App.tsx b/src/components/App.tsx
new file mode 100644
index 0000000..e57ab10
--- /dev/null
+++ b/src/components/App.tsx
@@ -0,0 +1,110 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next';
+import Hero from './Hero';
+import About from './About';
+import Experience from './Experience/Experience';
+import Skills from './Skills';
+import Education from './Education';
+import Contact from './Contact';
+import { ThemeMenu, ThemeType, ThemeSelected } from './ThemeMenu';
+
+function App() {
+    const { t, i18n } = useTranslation();
+    const [theme, setTheme] = useState<ThemeType>('dark');
+    const [themeSelected, setThemeSelected] = useState<ThemeSelected>('system');
+
+    useEffect(() => {
+        if (themeSelected === 'system') {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            const handleChange = () => {
+                const systemTheme = mediaQuery.matches ? 'dark' : 'light';
+                setTheme(systemTheme);
+                document.documentElement.className = `theme-${systemTheme}`;
+            };
+            
+            handleChange();
+            mediaQuery.addEventListener('change', handleChange);
+            
+            return () => mediaQuery.removeEventListener('change', handleChange);
+        } else {
+            setTheme(themeSelected);
+            document.documentElement.className = `theme-${themeSelected}`;
+        }
+    }, [themeSelected]);
+
+    const toggleLanguage = () => {
+        const newLang = i18n.language === 'fr' ? 'en' : 'fr';
+        i18n.changeLanguage(newLang);
+    };
+
+    const handleThemeChange = (newTheme: ThemeSelected) => {
+        setThemeSelected(newTheme);
+    };
+
+
+    return (
+        <div className="min-h-screen text-secondary bg-primary transition-colors duration-300">
+            {/* Header */}
+            <header className='fixed top-0 left-0 right-0 z-50 flex justify-between items-center gap-4 text-sm w-full px-8 py-6 bg-primary/80 backdrop-blur-md border-b border-secondary/10'>
+                <h1 className='text-2xl font-bold'>
+                    <span className='text-accent'>L</span>ouis <span className='text-accent'>E</span>MARD
+                </h1>
+                <nav className='flex gap-6 h-full justify-center items-center'>
+                    <a href='#about' className='hover:text-accent transition-colors'>{t('nav.about')}</a>
+                    <a href='#experience' className='hover:text-accent transition-colors'>{t('nav.experience')}</a>
+                    <a href='#skills' className='hover:text-accent transition-colors'>{t('nav.skills')}</a>
+                    <a href='#education' className='hover:text-accent transition-colors'>{t('nav.education')}</a>
+                    <a href='#contact' className='hover:text-accent transition-colors'>{t('nav.contact')}</a>
+                    
+                    {/* Language Toggle */}
+                    <button 
+                        onClick={toggleLanguage}
+                        className='px-3 py-1 border border-secondary/20 rounded hover:border-accent hover:text-accent transition-all'
+                    >
+                        {i18n.language.toUpperCase()}
+                    </button>
+                    
+                    {/* Theme Menu */}
+                    <ThemeMenu 
+                        theme={theme}
+                        themeSelected={themeSelected}
+                        onThemeChange={handleThemeChange}
+                    />
+                </nav>
+            </header>
+
+            {/* Main Content */}
+            <main>
+                <Hero />
+                <About />
+                <Experience />
+                <Skills />
+                <Education />
+                <Contact />
+            </main>
+
+            {/* Footer */}
+            <footer className='py-8 border-t border-secondary/10 bg-secondary/5'>
+                <div className='flex flex-col md:flex-row gap-6 justify-center items-center text-sm'>
+                    <a href='https://git.louisemard.dev' target='_blank' rel='noopener noreferrer' className='hover:text-accent transition-colors'>
+                        Gitea
+                    </a>
+                    <a href='https://github.com/LouisDrame' target='_blank' rel='noopener noreferrer' className='hover:text-accent transition-colors'>
+                        GitHub
+                    </a>
+                    <a href='https://www.linkedin.com/in/louis-emard-9b6a931a2/' target='_blank' rel='noopener noreferrer' className='hover:text-accent transition-colors'>
+                        LinkedIn
+                    </a> 
+                    <a href='https://www.collective.work/profile/louis-emard' target='_blank' rel='noopener noreferrer' className='hover:text-accent transition-colors'>
+                        Collective
+                    </a>
+                </div>
+                <p className='text-center mt-4 text-secondary/50 text-xs'>
+                    © {new Date().getFullYear()} Louis EMARD. All rights reserved.
+                </p>
+            </footer>
+        </div>
+    )
+}
+
+export default App
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
new file mode 100644
index 0000000..1f313d1
--- /dev/null
+++ b/src/components/Contact.tsx
@@ -0,0 +1,42 @@
+import { useTranslation } from 'react-i18next';
+
+const Contact = () => {
+    const { t } = useTranslation();
+
+    return (
+        <section id="contact" className="py-20 px-8">
+            <div className="max-w-4xl mx-auto text-center">
+                <h2 className="text-4xl font-bold mb-8 text-accent">{t('contact.title')}</h2>
+                <p className="text-lg text-secondary/70 mb-12">
+                    {t('contact.description')}
+                </p>
+                <div className="flex flex-col md:flex-row gap-4 justify-center items-center">
+                    <a 
+                        href="mailto:louis.emard@example.com" 
+                        className="px-8 py-3 bg-accent text-white rounded-lg hover:bg-accent/90 transition-all hover:shadow-lg w-full md:w-auto"
+                    >
+                        📧 {t('contact.email')}
+                    </a>
+                    <a 
+                        href="https://www.linkedin.com/in/louis-emard-9b6a931a2/" 
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="px-8 py-3 border-2 border-accent text-accent rounded-lg hover:bg-accent hover:text-white transition-all w-full md:w-auto"
+                    >
+                        💼 LinkedIn
+                    </a>
+                    <a 
+                        href="https://github.com/LouisDrame" 
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="px-8 py-3 border-2 border-accent text-accent rounded-lg hover:bg-accent hover:text-white transition-all w-full md:w-auto"
+                    >
+                        💻 GitHub
+                    </a>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Contact;
diff --git a/src/components/Education.tsx b/src/components/Education.tsx
new file mode 100644
index 0000000..1c25e03
--- /dev/null
+++ b/src/components/Education.tsx
@@ -0,0 +1,44 @@
+import { useTranslation } from 'react-i18next';
+
+const Education = () => {
+    const { t } = useTranslation();
+
+    const educations = [
+        {
+            period: '2020 - 2023',
+            title: 'education.degree1.title',
+            school: 'education.degree1.school',
+            description: 'education.degree1.description'
+        },
+        {
+            period: '2018 - 2020',
+            title: 'education.degree2.title',
+            school: 'education.degree2.school',
+            description: 'education.degree2.description'
+        }
+    ];
+
+    return (
+        <section id="education" className="py-20 px-8 bg-secondary/5">
+            <div className="max-w-4xl mx-auto">
+                <h2 className="text-4xl font-bold mb-12 text-accent">{t('education.title')}</h2>
+                <div className="space-y-6">
+                    {educations.map((edu, index) => (
+                        <div key={index} className="bg-primary p-6 rounded-lg border border-secondary/10 hover:border-accent/50 transition-all">
+                            <div className="flex flex-col md:flex-row md:justify-between md:items-start mb-3">
+                                <div>
+                                    <h3 className="text-xl font-semibold text-secondary mb-1">{t(edu.title)}</h3>
+                                    <p className="text-accent font-medium">{t(edu.school)}</p>
+                                </div>
+                                <span className="text-secondary/60 text-sm md:text-base mt-2 md:mt-0">{edu.period}</span>
+                            </div>
+                            <p className="text-secondary/70">{t(edu.description)}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Education;
diff --git a/src/components/Experience/Experience.tsx b/src/components/Experience/Experience.tsx
new file mode 100644
index 0000000..75ec7e8
--- /dev/null
+++ b/src/components/Experience/Experience.tsx
@@ -0,0 +1,159 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Routes, Route, useRoutes, Link, useParams, useNavigate } from 'react-router';
+import { AnimatePresence, motion } from 'framer-motion';
+
+const Experience = () => {
+    const { t } = useTranslation();
+    const experiences = [
+        {
+            period: '2023 - 2024',
+            title: 'experience.job1.title',
+            company: 'experience.job1.company',
+            description: 'experience.job1.description',
+            tasks: ['experience.job1.task1', 'experience.job1.task2', 'experience.job1.task3']
+        },
+        {
+            period: '2022',
+            title: 'experience.job2.title',
+            company: 'experience.job2.company',
+            description: 'experience.job2.description',
+            tasks: ['experience.job2.task1', 'experience.job2.task2']
+        },
+        {
+            period: '2018 - 2025',
+            title: 'experience.job3.title',
+            company: 'experience.job3.company',
+            description: 'experience.job3.description',
+            tasks: ['experience.job3.task1', 'experience.job3.task2']
+        }
+    ];
+
+    const routes = useRoutes(['/', '/experiences/:xpId'].map((path, id) => ({
+        path,
+        element: (
+            <>
+                <Link to={"/"}>
+                    <p>Exit</p>
+                </Link>
+                <div className="max-w-4xl mx-auto">
+                    <h2 className="text-4xl font-bold mb-12 text-accent">{t('experience.title')}</h2>
+                    <div className="space-y-8">
+                        <ExperiencesList experiences={experiences} t={t} />
+                    </div>
+                </div>
+            </>
+        )
+    })));
+
+    return (
+        <>
+            {routes}
+        </>
+    );
+};
+
+interface Experience {
+    period: string;
+    title: string;
+    company: string;
+    description: string;
+    tasks: string[];
+}
+
+interface ExperiencesListProps {
+    experiences: Experience[];
+    t: (key: string) => string
+}
+
+const ExperiencesList = ({ experiences, t }: ExperiencesListProps) => {
+    const { xpId } = useParams();
+    return <div className=' flex  flex-col space-y-8'>
+        {experiences.map((exp, index) => <ExperienceSummary key={index} index={index} exp={exp} t={t} />)}
+        <AnimatePresence>
+            {xpId !== undefined && <DetailedExperience t={t} />}
+        </AnimatePresence>
+    </div>
+}
+
+interface ExperienceSummaryProps {
+    index: number;
+    exp: {
+        period: string;
+        title: string;
+        company: string;
+        description: string;
+        tasks: string[];
+    };
+    t: (key: string) => string;
+}
+
+const ExperienceSummary = ({ index, exp, t }: ExperienceSummaryProps) => {
+
+    return <Link to={`/experiences/${index}`}>
+        <motion.div layoutId={`experience-${index}`} key={index} className="bg-primary p-6 rounded-lg border border-secondary/10 hover:border-accent/50 transition-all">
+            <div className="flex flex-col md:flex-row md:justify-between md:items-start mb-4">
+                <motion.div layoutId={`experience-header-${index}`}>
+                    <h3 className="text-2xl font-semibold text-secondary mb-1">{t(exp.title)}</h3>
+                    <p className="text-accent font-medium">{t(exp.company)}</p>
+                </motion.div>
+                <span className="text-secondary/60 text-sm md:text-base mt-2 md:mt-0">{exp.period}</span>
+            </div>
+            <p className="text-secondary/70 mb-4">{t(exp.description)}</p>
+            <ul className="list-disc list-inside space-y-2 text-secondary/60">
+                {exp.tasks.map((task, taskIndex) => (
+                    <li key={taskIndex}>{t(task)}</li>
+                ))}
+            </ul>
+        </motion.div>
+    </Link>
+};
+
+interface DetailedExperienceProps {
+    t: (key: string) => string;
+}
+
+const DetailedExperience = ({ t }: DetailedExperienceProps) => {
+    const { xpId } = useParams();
+    const navigate = useNavigate();
+    useEffect(() => {
+        // Prevent background scrolling when detailed view is open
+        document.body.style.overflow = 'hidden';
+
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                navigate('/');
+            }
+        };
+
+        document.addEventListener('keydown', handleEscape);
+
+        return () => {
+            document.body.style.overflow = 'auto';
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, []);
+
+    const handleBackgroundClick = (e: React.MouseEvent) => {
+        if(e.target === e.currentTarget) {
+            navigate('/');
+        }
+    }
+    return <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className='fixed top-0 left-0 w-full h-full bg-black bg-opacity-80 flex flex-col items-center justify-center z-0 backdrop-blur-sm'
+        onClick={handleBackgroundClick}
+        
+    >
+        <motion.div layoutId={`experience-${xpId}`} className="bg-primary p-8 rounded-lg border border-accent max-w-3xl w-full h-1/2" onClick={(e) => e.stopPropagation()}>
+            <motion.div layoutId={`experience-header-${xpId}`}>
+                <h3 className="text-2xl font-semibold text-secondary mb-1">Dev full stack</h3>
+                    <p className="text-accent font-medium">Meta Video</p>
+            </motion.div>
+        </motion.div>
+    </motion.div>;
+};
+
+export default Experience;
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 0000000..4d6a339
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next';
+
+const Hero = () => {
+    const { t } = useTranslation();
+
+    return (
+        <section className="min-h-screen flex items-center justify-center px-8 py-20">
+            <div className="max-w-4xl mx-auto text-center">
+                <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-accent to-secondary bg-clip-text text-transparent">
+                    Louis EMARD
+                </h1>
+                <h2 className="text-2xl md:text-3xl text-secondary/80 mb-8">
+                    {t('hero.title')}
+                </h2>
+                <p className="text-lg md:text-xl text-secondary/60 mb-12 max-w-2xl mx-auto">
+                    {t('hero.subtitle')}
+                </p>
+                <div className="flex gap-4 justify-center flex-wrap">
+                    <a 
+                        href="#contact" 
+                        className="px-8 py-3 bg-accent text-white rounded-lg hover:bg-accent/90 transition-all hover:shadow-lg"
+                    >
+                        {t('hero.cta')}
+                    </a>
+                    <a 
+                        href="#projects" 
+                        className="px-8 py-3 border-2 border-accent text-accent rounded-lg hover:bg-accent hover:text-white transition-all"
+                    >
+                        {t('hero.projects')}
+                    </a>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Hero;
diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx
new file mode 100644
index 0000000..d6dd2a0
--- /dev/null
+++ b/src/components/Skills.tsx
@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next';
+
+const Skills = () => {
+    const { t } = useTranslation();
+
+    const skillCategories = [
+        {
+            title: 'skills.languages.title',
+            skills: ['Python', 'JavaScript/TypeScript', 'Java', 'C', 'SQL', 'HTML/CSS', 'Bash']
+        },
+        {
+            title: 'skills.frameworks.title',
+            skills: ['React', 'Node.js', 'Django', 'FastAPI', 'TailwindCSS', 'Bootstrap']
+        },
+        {
+            title: 'skills.tools.title',
+            skills: ['Git', 'Docker', 'Linux', 'PostgreSQL', 'MongoDB', 'REST API']
+        },
+        {
+            title: 'skills.other.title',
+            skills: ['Agile/Scrum', 'CI/CD', 'Test unitaires', 'Architecture logicielle']
+        }
+    ];
+
+    return (
+        <section id="skills" className="py-20 px-8">
+            <div className="max-w-4xl mx-auto">
+                <h2 className="text-4xl font-bold mb-12 text-accent">{t('skills.title')}</h2>
+                <div className="grid md:grid-cols-2 gap-8">
+                    {skillCategories.map((category, index) => (
+                        <div key={index} className="bg-secondary/5 p-6 rounded-lg border border-secondary/10">
+                            <h3 className="text-xl font-semibold mb-4 text-secondary">{t(category.title)}</h3>
+                            <div className="flex flex-wrap gap-2">
+                                {category.skills.map((skill, skillIndex) => (
+                                    <span 
+                                        key={skillIndex}
+                                        className="px-4 py-2 bg-accent/10 text-accent border border-accent/20 rounded-full text-sm font-medium hover:bg-accent/20 transition-all"
+                                    >
+                                        {skill}
+                                    </span>
+                                ))}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Skills;
diff --git a/src/components/ThemeMenu.tsx b/src/components/ThemeMenu.tsx
new file mode 100644
index 0000000..2d704b1
--- /dev/null
+++ b/src/components/ThemeMenu.tsx
@@ -0,0 +1,143 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import Moon from '../icons/Moon';
+import Sun from '../icons/Sun';
+import SystemIcon from '../icons/System';
+
+export type CustomThemeColor = 'purple' | 'teal' | 'sunset' | 'forest' | 'ocean' | 'rose' | 'amber';
+export type ThemeType = 'light' | 'dark' | `custom-${CustomThemeColor}`;
+export type ThemeSelected = 'light' | 'dark' | `custom-${CustomThemeColor}` | 'system';
+
+interface ThemeMenuProps {
+    theme: ThemeType;
+    themeSelected: ThemeSelected;
+    onThemeChange: (theme: ThemeSelected) => void;
+}
+
+const customThemes: CustomThemeColor[] = ['purple', 'teal', 'sunset', 'forest', 'ocean', 'rose', 'amber'];
+
+const getThemeEmoji = (color: CustomThemeColor): string => {
+    const emojis: Record<CustomThemeColor, string> = {
+        purple: '💜',
+        teal: '🩵',
+        sunset: '🌅',
+        forest: '🌲',
+        ocean: '🌊',
+        rose: '🌹',
+        amber: '⚡'
+    };
+    return emojis[color];
+};
+
+export const ThemeMenu = ({ theme, themeSelected, onThemeChange }: ThemeMenuProps) => {
+    const { t } = useTranslation();
+    const [showThemeMenu, setShowThemeMenu] = useState(false);
+    const [showCustomSubmenu, setShowCustomSubmenu] = useState(true);
+
+    const getThemeIcon = () => {
+        if (themeSelected === 'system') {
+            return <SystemIcon className='text-secondary'/>;
+        }
+        if (theme === 'light') {
+            return <Sun className='text-secondary'/>;
+        }
+        if (theme.startsWith('custom-')) {
+            const color = theme.split('-')[1] as CustomThemeColor;
+            return <span className='text-accent text-xl'>{getThemeEmoji(color)}</span>;
+        }
+        return <Moon className='text-secondary'/>;
+    };
+
+    const handleThemeSelect = (selectedTheme: ThemeSelected) => {
+        onThemeChange(selectedTheme);
+        setShowThemeMenu(false);
+        setShowCustomSubmenu(false);
+    };
+
+    return (
+        <div className="relative">
+            <button 
+                onClick={() => setShowThemeMenu(!showThemeMenu)} 
+                className="hover:drop-shadow-[0_0_8px_currentColor] transition-all flex flex-row p-2 hover:bg-secondary/10 rounded"
+            >
+                {getThemeIcon()}
+            </button>
+            
+            {showThemeMenu && (
+                <div className="absolute right-0 top-12 bg-primary border border-secondary/20 rounded-lg shadow-xl z-50 min-w-[180px] overflow-hidden">
+                    {/* Light Theme */}
+                    <button 
+                        onClick={() => handleThemeSelect('light')} 
+                        className={clsx(
+                            "w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
+                            themeSelected === 'light' && "bg-accent/20 text-accent"
+                        )}
+                    >
+                        <Sun height={16} width={16} /> {t('theme.light')}
+                    </button>
+                    
+                    {/* Dark Theme */}
+                    <button 
+                        onClick={() => handleThemeSelect('dark')} 
+                        className={clsx(
+                            "w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
+                            themeSelected === 'dark' && "bg-accent/20 text-accent"
+                        )}
+                    >
+                        <Moon height={16} width={16} /> {t('theme.dark')}
+                    </button>
+                    
+                    {/* Custom Themes - with submenu */}
+                    <div 
+                        className="relative"
+                    >
+                        <button 
+                            className={clsx(
+                                "w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center justify-between gap-3",
+                                themeSelected.startsWith('custom-') && "bg-accent/20 text-accent"
+                            )}
+                            onClick={() => setShowCustomSubmenu(true)}
+                        onBlur={() => setShowCustomSubmenu(false)}  
+                        >
+                            <span className="flex items-center gap-3">
+                                <span className='text-lg'>✨</span> {t('theme.custom')}
+                            </span>
+                            <span className="text-xs">▶</span>
+                        </button>
+                        
+                        {/* Custom Submenu */}
+                        {/* {showCustomSubmenu && ( */}
+                            <div className=" top-0 ml-1 bg-primary border border-secondary/20 rounded-lg shadow-xl min-w-[160px] overflow-hidden">
+                                {customThemes.map((color) => (
+                                    <button
+                                        key={color}
+                                        onClick={() => handleThemeSelect(`custom-${color}`)}
+                                        className={clsx(
+                                            "w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
+                                            themeSelected === `custom-${color}` && "bg-accent/20 text-accent"
+                                        )}
+                                    >
+                                        <span className='text-lg'>{getThemeEmoji(color)}</span>
+                                        {t(`theme.custom_${color}`)}
+                                    </button>
+                                ))}
+                            </div>
+                        {/* )} */}
+                    </div>
+                    
+                    {/* System Theme */}
+                    <button 
+                        onClick={() => handleThemeSelect('system')} 
+                        className={clsx(
+                            "w-full px-4 py-3 text-left hover:bg-accent/10 hover:text-accent transition-colors flex items-center gap-3",
+                            themeSelected === 'system' && "bg-accent/20 text-accent"
+                        )}
+                    >
+                        <SystemIcon height={16} width={16} /> {t('theme.system')}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
new file mode 100644
index 0000000..a4be480
--- /dev/null
+++ b/src/i18n/i18n.ts
@@ -0,0 +1,240 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+const resources = {
+    en: {
+        translation: {
+            // Navigation
+            nav: {
+                about: "About",
+                experience: "Experience",
+                skills: "Skills",
+                education: "Education",
+                projects: "Projects",
+                contact: "Contact"
+            },
+            
+            // Theme
+            theme: {
+                light: "Light",
+                dark: "Dark",
+                custom: "Custom",
+                custom_purple: "Purple Haze",
+                custom_teal: "Teal Dream",
+                custom_sunset: "Sunset",
+                custom_forest: "Forest",
+                custom_ocean: "Ocean",
+                custom_rose: "Rose",
+                custom_amber: "Amber",
+                system: "System"
+            },
+            
+            // Hero Section
+            hero: {
+                title: "Full Stack Developer & Software Engineer",
+                subtitle: "Passionate about creating innovative web solutions and building scalable applications with modern technologies.",
+                cta: "Get in Touch",
+                projects: "View Projects"
+            },
+            
+            // About Section
+            about: {
+                title: "About Me",
+                description: "I'm a full-stack developer with a strong focus on creating efficient, scalable, and user-friendly applications. With expertise in modern web technologies and a passion for clean code, I bring ideas to life through thoughtful design and robust engineering.",
+                experience_title: "Experience",
+                experience_desc: "3+ years of experience in web development, working with cutting-edge technologies and agile methodologies.",
+                passion_title: "Passion",
+                passion_desc: "Dedicated to continuous learning and staying up-to-date with the latest trends in software development."
+            },
+            
+            // Experience Section
+            experience: {
+                title: "Recent projects",
+                job1: {
+                    title: "Full Stack Developer",
+                    company: "Meta Video",
+                    description: "Led development of modern web applications using React and Node.js",
+                    task1: "Developed and maintained full-stack web applications",
+                    task2: "Implemented RESTful APIs and microservices architecture",
+                    task3: "Collaborated with cross-functional teams in an Agile environment"
+                },
+                job2: {
+                    title: "Junior Developer",
+                    company: "Startup Inc.",
+                    description: "Contributed to various web development projects",
+                    task1: "Built responsive user interfaces with React and TailwindCSS",
+                    task2: "Optimized database queries and improved application performance"
+                },
+                job3: {
+                    title: "Intern Developer",
+                    company: "Software Solutions",
+                    description: "Learned foundational software development practices",
+                    task1: "Assisted in development of internal tools and applications",
+                    task2: "Participated in code reviews and team meetings"
+                }
+            },
+            
+            // Skills Section
+            skills: {
+                title: "Skills & Technologies",
+                languages: {
+                    title: "Programming Languages"
+                },
+                frameworks: {
+                    title: "Frameworks & Libraries"
+                },
+                tools: {
+                    title: "Tools & Platforms"
+                },
+                other: {
+                    title: "Other Skills"
+                }
+            },
+            
+            // Education Section
+            education: {
+                title: "Education",
+                degree1: {
+                    title: "Bachelor's Degree in Computer Science",
+                    school: "University Name",
+                    description: "Specialized in software engineering and web development"
+                },
+                degree2: {
+                    title: "Technical Diploma",
+                    school: "Technical Institute",
+                    description: "Foundation in computer science and programming"
+                }
+            },
+            
+            // Contact Section
+            contact: {
+                title: "Let's Work Together",
+                description: "I'm always interested in hearing about new projects and opportunities. Feel free to reach out!",
+                email: "Send Email"
+            }
+        }
+    },
+    fr: {
+        translation: {
+            // Navigation
+            nav: {
+                about: "À propos",
+                experience: "Expérience",
+                skills: "Compétences",
+                education: "Formation",
+                projects: "Projets",
+                contact: "Contact"
+            },
+            
+            // Theme
+            theme: {
+                light: "Clair",
+                dark: "Sombre",
+                custom: "Personnalisé",
+                custom_purple: "Violet Brumeux",
+                custom_teal: "Turquoise Rêveur",
+                custom_sunset: "Coucher de Soleil",
+                custom_forest: "Forêt",
+                custom_ocean: "Océan",
+                custom_rose: "Rose",
+                custom_amber: "Ambre",
+                system: "Système"
+            },
+            
+            // Hero Section
+            hero: {
+                title: "Développeur Full Stack & Ingénieur Logiciel",
+                subtitle: "Passionné par la création de solutions web innovantes et le développement d'applications évolutives avec des technologies modernes.",
+                cta: "Me Contacter",
+                projects: "Voir les Projets"
+            },
+            
+            // About Section
+            about: {
+                title: "À Propos",
+                description: "Je suis un développeur full-stack passionné par la création d'applications efficaces, évolutives et conviviales. Avec une expertise en technologies web modernes et un souci du code propre, je donne vie aux idées à travers une conception réfléchie et une ingénierie robuste.",
+                experience_title: "Expérience",
+                experience_desc: "Plus de 3 ans d'expérience en développement web, travaillant avec des technologies de pointe et des méthodologies agiles.",
+                passion_title: "Passion",
+                passion_desc: "Dédié à l'apprentissage continu et à rester à jour avec les dernières tendances en développement logiciel."
+            },
+            
+            // Experience Section
+            experience: {
+                title: "Projets récents",
+                job1: {
+                    title: "Développeur Full Stack",
+                    company: "Meta Video",
+                    description: "Direction du développement d'applications web modernes avec React et Node.js",
+                    task1: "Développement et maintenance d'applications web full-stack",
+                    task2: "Implémentation d'APIs RESTful et architecture microservices",
+                    task3: "Collaboration avec des équipes pluridisciplinaires en environnement Agile"
+                },
+                job2: {
+                    title: "Développeur Junior",
+                    company: "Startup Inc.",
+                    description: "Contribution à divers projets de développement web",
+                    task1: "Construction d'interfaces utilisateur responsive avec React et TailwindCSS",
+                    task2: "Optimisation des requêtes base de données et amélioration des performances"
+                },
+                job3: {
+                    title: "Développeur Stagiaire",
+                    company: "Solutions Logicielles",
+                    description: "Apprentissage des pratiques fondamentales du développement logiciel",
+                    task1: "Assistance au développement d'outils et applications internes",
+                    task2: "Participation aux revues de code et réunions d'équipe"
+                }
+            },
+            
+            // Skills Section
+            skills: {
+                title: "Compétences & Technologies",
+                languages: {
+                    title: "Langages de Programmation"
+                },
+                frameworks: {
+                    title: "Frameworks & Bibliothèques"
+                },
+                tools: {
+                    title: "Outils & Plateformes"
+                },
+                other: {
+                    title: "Autres Compétences"
+                }
+            },
+            
+            // Education Section
+            education: {
+                title: "Formation",
+                degree1: {
+                    title: "Licence en Informatique",
+                    school: "Nom de l'Université",
+                    description: "Spécialisé en génie logiciel et développement web"
+                },
+                degree2: {
+                    title: "Diplôme Technique",
+                    school: "Institut Technique",
+                    description: "Fondations en informatique et programmation"
+                }
+            },
+            
+            // Contact Section
+            contact: {
+                title: "Travaillons Ensemble",
+                description: "Je suis toujours intéressé par de nouveaux projets et opportunités. N'hésitez pas à me contacter !",
+                email: "Envoyer un Email"
+            }
+        }
+    }
+};
+
+i18n.use(initReactI18next).init({
+    resources,
+    lng: 'fr', // langue par défaut    
+    fallbackLng: 'fr', // langue de secours
+    interpolation: {
+        escapeValue: false // react déjà sécurisé contre les attaques XSS
+    }
+});
+
+export default i18n;
\ No newline at end of file
diff --git a/src/icons/Moon.tsx b/src/icons/Moon.tsx
new file mode 100644
index 0000000..4e8edf5
--- /dev/null
+++ b/src/icons/Moon.tsx
@@ -0,0 +1,19 @@
+import { IconProps } from './types';
+
+const Moon = ({ className = '', height = 24, width = 24 }: IconProps) => {
+    return <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        fill="none" 
+        viewBox="0 0 24 24" 
+        strokeWidth={1.5} 
+        stroke='currentColor'
+        height={height}
+        width={width}
+        className={className}
+        // filter='drop-shadow(0 0 2px)'
+    >
+        <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+    </svg>
+}
+
+export default Moon
\ No newline at end of file
diff --git a/src/icons/Sun.tsx b/src/icons/Sun.tsx
new file mode 100644
index 0000000..1ca9940
--- /dev/null
+++ b/src/icons/Sun.tsx
@@ -0,0 +1,20 @@
+import { IconProps } from './types';
+
+const Sun = ({ className = '', height = 24, width = 24 }: IconProps) => {
+    return <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        fill="none" 
+        viewBox="0 0 24 24" 
+        strokeWidth={1.5} 
+        stroke='currentColor'
+        height={height}
+        width={width}
+        className={className}
+    >
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+    </svg>
+}
+
+
+
+export default Sun
diff --git a/src/icons/System.tsx b/src/icons/System.tsx
new file mode 100644
index 0000000..f91c986
--- /dev/null
+++ b/src/icons/System.tsx
@@ -0,0 +1,24 @@
+import { IconProps } from './types';
+
+const SystemIcon = ({
+    height = 24,
+    width = 24,
+    className = '',
+    color = 'currentColor'
+}: IconProps) => {
+    return (
+        <svg
+            width={width}
+            height={height}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+            stroke={color}
+        >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
+        </svg>
+    );
+};
+
+export default SystemIcon;
\ No newline at end of file
diff --git a/src/icons/types.ts b/src/icons/types.ts
new file mode 100644
index 0000000..4d99835
--- /dev/null
+++ b/src/icons/types.ts
@@ -0,0 +1,6 @@
+export interface IconProps {
+  className?: string;
+  height?: number;
+  width?: number;
+  color?: string;
+}
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index c647e28..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,72 +0,0 @@
-/* @tailwind base;
-@tailwind components;
-@tailwind utilities; */
-
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/src/main.tsx b/src/main.tsx
index 3d7150d..d214471 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import App from './components/App.tsx'
+import './styles/index.css'
+import './i18n/i18n.ts';
+import { BrowserRouter } from 'react-router';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 )
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000..ba4276c
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,80 @@
+/* @tailwind base;
+@tailwind components;
+@tailwind utilities; */
+/* @import './reset.css'; */
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+:root {
+  --color-primary: 232 232 227;
+  --color-secondary: 23 23 23;
+  --color-accent: 59 130 246; /* Bleu par défaut */
+  font-family: 'Open Sans', sans-serif;
+}
+
+.theme-dark {
+  --color-primary: 23 23 23;
+  --color-secondary: 232 232 227;
+  --color-accent: 96 165 250; /* Bleu clair pour dark mode */
+}
+
+.theme-light {
+  --color-primary: 232 232 227;
+  --color-secondary: 23 23 23;
+  --color-accent: 37 99 235; /* Bleu foncé pour light mode */
+}
+
+/* Custom Themes - Purple Haze */
+.theme-custom-purple {
+  --color-primary: 15 23 42; /* Slate foncé */
+  --color-secondary: 226 232 240; /* Slate clair */
+  --color-accent: 168 85 247; /* Violet/Purple */
+}
+
+/* Custom Themes - Teal Dream */
+.theme-custom-teal {
+  --color-primary: 17 24 39; /* Gray foncé */
+  --color-secondary: 229 231 235; /* Gray clair */
+  --color-accent: 20 184 166; /* Teal */
+}
+
+/* Custom Themes - Sunset Orange */
+.theme-custom-sunset {
+  --color-primary: 30 27 27; /* Brun foncé */
+  --color-secondary: 254 240 215; /* Orange très clair */
+  --color-accent: 249 115 22; /* Orange vif */
+}
+
+/* Custom Themes - Forest Green */
+.theme-custom-forest {
+  --color-primary: 20 30 25; /* Vert très foncé */
+  --color-secondary: 236 253 243; /* Vert très clair */
+  --color-accent: 34 197 94; /* Vert */
+}
+
+/* Custom Themes - Ocean Blue */
+.theme-custom-ocean {
+  --color-primary: 12 23 39; /* Bleu nuit */
+  --color-secondary: 224 242 254; /* Bleu très clair */
+  --color-accent: 14 165 233; /* Bleu océan */
+}
+
+/* Custom Themes - Rose Pink */
+.theme-custom-rose {
+  --color-primary: 31 20 31; /* Violet foncé */
+  --color-secondary: 253 242 248; /* Rose très clair */
+  --color-accent: 244 63 94; /* Rose */
+}
+
+/* Custom Themes - Amber Gold */
+.theme-custom-amber {
+  --color-primary: 28 25 23; /* Brun foncé */
+  --color-secondary: 254 252 232; /* Jaune très clair */
+  --color-accent: 245 158 11; /* Ambre/Or */
+}
+
diff --git a/src/styles/reset.css b/src/styles/reset.css
new file mode 100644
index 0000000..12f3cb3
--- /dev/null
+++ b/src/styles/reset.css
@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	/* border: 0; */
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index d5afb2c..1d8b933 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,13 @@ export default {
         "./src/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
-        extend: {},
+        extend: {
+            colors: {
+                primary: `rgb(var(--color-primary)/ <alpha-value>)`,
+                secondary: `rgb(var(--color-secondary)/ <alpha-value>)`,
+                accent: `rgb(var(--color-accent)/ <alpha-value>)`,
+            },
+        },
     },
     plugins: [],
 }
diff --git a/vite.config.ts b/vite.config.ts
index 5a33944..0c65f76 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,4 +4,8 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173
+  }
 })