style: fix ESLint

.env.example

@@ -1 +1,2 @@
+TZ=UTC
 WEBSITE_PORT=3000

.github/workflows/chromatic.yml

@@ -11,14 +11,14 @@ jobs:
     timeout-minutes: 30
     runs-on: "ubuntu-latest"
     steps:
-      - uses: "actions/checkout@v4.1.7"
+      - uses: "actions/checkout@v4.2.1"
         with:
           fetch-depth: 0
 
       - uses: "pnpm/action-setup@v4.0.0"
 
       - name: "Setup Node.js"
-        uses: "actions/setup-node@v4.0.3"
+        uses: "actions/setup-node@v4.0.4"
         with:
           node-version: "22.x"
           cache: "pnpm"

.github/workflows/ci.yml

@@ -11,12 +11,12 @@ jobs:
     timeout-minutes: 30
     runs-on: "ubuntu-latest"
     steps:
-      - uses: "actions/checkout@v4.1.7"
+      - uses: "actions/checkout@v4.2.1"
 
       - uses: "pnpm/action-setup@v4.0.0"
 
       - name: "Setup Node.js"
-        uses: "actions/setup-node@v4.0.3"
+        uses: "actions/setup-node@v4.0.4"
         with:
           node-version: "22.x"
           cache: "pnpm"
@@ -29,15 +29,15 @@ jobs:
 
       - run: "node --run lint:editorconfig"
       - run: "node --run lint:markdown"
-      - run: "node --run lint:prettier"
-      - run: "node --run lint:eslint"
       - run: "node --run lint:typescript"
+      - run: "node --run lint:eslint"
+      - run: "node --run lint:prettier"
       - run: "node --run test"
       - run: "node --run build"
 
   commitlint:
     runs-on: "ubuntu-latest"
     steps:
-      - uses: "actions/checkout@v4.1.7"
+      - uses: "actions/checkout@v4.2.1"
 
-      - uses: "wagoid/commitlint-github-action@v6.0.1"
+      - uses: "wagoid/commitlint-github-action@v6.1.2"

.github/workflows/release.yml

@@ -14,13 +14,13 @@ jobs:
       pull-requests: "write"
       id-token: "write"
     steps:
-      - uses: "actions/checkout@v4.1.7"
+      - uses: "actions/checkout@v4.2.1"
         with:
           fetch-depth: 0
           persist-credentials: false
 
       - name: "Import GPG key"
-        uses: "crazy-max/ghaction-import-gpg@v6.0.0"
+        uses: "crazy-max/ghaction-import-gpg@v6.1.0"
         with:
           gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
           git_user_signingkey: true
@@ -29,7 +29,7 @@ jobs:
       - uses: "pnpm/action-setup@v4.0.0"
 
       - name: "Setup Node.js"
-        uses: "actions/setup-node@v4.0.3"
+        uses: "actions/setup-node@v4.0.4"
         with:
           node-version: "22.x"
           cache: "pnpm"

.npmrc

@@ -1 +0,0 @@
-save-exact = true

.vscode/extensions.json

@@ -1,12 +1,13 @@
 {
   "recommendations": [
-    "Vercel.turbo-vsc",
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
+    "davidanson.vscode-markdownlint",
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
-    "davidanson.vscode-markdownlint",
-    "ms-azuretools.vscode-docker"
+    "ms-azuretools.vscode-docker",
+    "antfu.pnpm-catalog-lens",
+    "Lokalise.i18n-ally"
   ]
 }

.vscode/react.code-snippets

@@ -22,7 +22,7 @@
     "body": [
       "import type { Meta, StoryObj } from \"@storybook/react\"",
       "",
-      "import { ${1:ComponentName} as ${1:ComponentName}Component } from \"./${1:ComponentName}\"",
+      "import { ${1:ComponentName} as ${1:ComponentName}Component } from \"./${1:ComponentName}.tsx\"",
       "",
       "const meta = {",
       "  title: \"${1:ComponentName}\",",

.vscode/settings.json

@@ -16,5 +16,12 @@
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ]
+  ],
+  "i18n-ally.localesPaths": ["./packages/i18n/src/translations/"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.sourceLanguage": "en-US",
+  "i18n-ally.displayLanguage": "en-US",
+  "i18n-ally.enabledFrameworks": ["next-intl", "general"],
+  "i18n-ally.extract.autoDetect": true
 }

CONTRIBUTING.md

@@ -32,7 +32,8 @@ The commit message guidelines adheres to [Conventional Commits](https://www.conv
 ### Prerequisites
 
 - [Node.js](https://nodejs.org/) >= 22.0.0
-- [pnpm](https://pnpm.io/) >= 9.5.0
+- [pnpm](https://pnpm.io/) >= 9.12.1 [(`corepack enable`)](https://nodejs.org/docs/latest-v22.x/api/corepack.html)
+- [Docker](https://www.docker.com/)
 
 ### Installation
 
@@ -40,6 +41,9 @@ The commit message guidelines adheres to [Conventional Commits](https://www.conv
 # Clone the repository
 git clone git@github.com:theoludwig/theoludwig.git
 
+# Go to the project root
+cd theoludwig
+
 # Configure environment variables
 cp .env.example .env
 cp apps/website/.env.example apps/website/.env
@@ -60,15 +64,19 @@ node --run dev
 # Lint
 node --run lint:editorconfig
 node --run lint:markdown
-node --run lint:prettier
-node --run lint:eslint
 node --run lint:typescript
+node --run lint:eslint
+node --run lint:prettier
 
 # Tests
 node --run test
 
 # Build
 node --run build
+
+# To execute a command in a specific package (e.g: packages/utils)
+cd packages/utils
+node --run test
 ```
 
 ### Production environment with [Docker](https://www.docker.com/)

apps/storybook/.storybook/main.ts

@@ -7,7 +7,11 @@ const config: StorybookConfig = {
   docs: {
     defaultName: "Documentation",
   },
-  stories: ["../../../packages/**/*.stories.tsx", "../stories/*.mdx"],
+  stories: [
+    "../../../packages/ui/src/**/*.stories.tsx",
+    "../../../packages/blog/src/**/*.stories.tsx",
+    "../stories/*.mdx",
+  ],
   addons: [
     "@storybook/addon-essentials",
     "@storybook/addon-storysource",

apps/storybook/.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import "@repo/config-tailwind/styles.css"
-import { defaultTranslationValues, Locale } from "@repo/i18n/config"
+import { defaultTranslationValues } from "@repo/i18n/config"
 import i18nMessagesEnglish from "@repo/i18n/translations/en-US.json"
+import { LOCALE_DEFAULT } from "@repo/utils/constants"
 import type { Preview } from "@storybook/react"
 import { NextIntlClientProvider } from "next-intl"
 import { ThemeProvider as NextThemeProvider } from "next-themes"
@@ -24,6 +25,7 @@ const preview: Preview = {
       stylePreview: true,
     },
     controls: {
+      disableSaveFromUI: true,
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
@@ -32,14 +34,13 @@ const preview: Preview = {
   },
   decorators: [
     (Story) => {
-      const locale = "en-US" satisfies Locale
-
       return (
         <NextThemeProvider enableColorScheme={false}>
           <NextIntlClientProvider
             messages={i18nMessagesEnglish}
-            locale={locale}
+            locale={LOCALE_DEFAULT}
             defaultTranslationValues={defaultTranslationValues}
+            timeZone={process.env["TZ"] ?? "UTC"}
           >
             <Story />
           </NextIntlClientProvider>

apps/storybook/.storybook/test-runner.ts

@@ -5,7 +5,6 @@ import { checkA11y, configureAxe, injectAxe } from "axe-playwright"
 
 /*
  * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
- * to learn more about the test-runner hooks API.
  */
 const config: TestRunnerConfig = {
   async preVisit(page) {

apps/storybook/package.json

@@ -7,15 +7,16 @@
     "build": "storybook build",
     "dev": "storybook dev --port 6006 --no-open",
     "start": "http-server \"storybook-static\" --port 6006 --silent",
-    "test": "start-server-and-test \"dev\" http://127.0.0.1:6006 \"test:storybook\"",
-    "test:storybook": "test-storybook",
-    "test:storybook-coverage": "test-storybook --coverage",
+    "test": "start-server-and-test \"start\" http://127.0.0.1:6006 \"test:storybook\"",
+    "test:dev": "start-server-and-test \"dev\" http://127.0.0.1:6006 \"test:storybook\"",
+    "test:storybook": "test-storybook --testTimeout=60000 --maxWorkers=2",
     "chromatic": "chromatic"
   },
   "dependencies": {
     "@repo/config-tailwind": "workspace:*",
     "@repo/i18n": "workspace:*",
     "@repo/ui": "workspace:*",
+    "@repo/utils": "workspace:*",
     "@repo/blog": "workspace:*",
     "next": "catalog:",
     "next-intl": "catalog:",

apps/storybook/tailwind.config.js

@@ -2,7 +2,11 @@ import sharedConfig from "@repo/config-tailwind"
 
 /** @type {Pick<import('tailwindcss').Config, "presets" | "content">} */
 const config = {
-  content: [".storybook/preview.tsx", "../../packages/**/*.tsx"],
+  content: [
+    ".storybook/preview.tsx",
+    "../../packages/ui/src/**/*.tsx",
+    "../../packages/blog/src/**/*.tsx",
+  ],
   presets: [sharedConfig],
 }
 

apps/storybook/turbo.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    "test": {
+      "dependsOn": ["^test", "build"]
+    }
+  }
+}

apps/website/.env.example

@@ -1,3 +1,4 @@
+TZ=UTC
 HOSTNAME=0.0.0.0
 PORT=3000
 NEXT_TELEMETRY_DISABLED=1

apps/website/.eslintrc.json

@@ -1,14 +1,13 @@
 {
   "root": true,
   "extends": ["@repo/eslint-config/nextjs/.eslintrc.json"],
-  "ignorePatterns": ["public/"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],
       "plugins": ["@typescript-eslint"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
-        "project": true
+        "projectService": true
       }
     }
   ]

apps/website/Dockerfile

@@ -2,11 +2,13 @@ FROM node:22.4.1-slim AS node-pnpm
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
+ENV TURBO_TELEMETRY_DISABLED=1
+ENV DO_NOT_TRACK=1
 WORKDIR /usr/src/app
 
 FROM node-pnpm AS builder
-RUN pnpm install --global turbo@2.0.10
 COPY ./ ./
+RUN pnpm install --global turbo@2.1.3
 RUN turbo prune @repo/website --docker
 
 FROM node-pnpm AS installer

apps/website/app/[locale]/(main)/blog/[slug]/page.tsx

@@ -3,7 +3,7 @@ import { notFound } from "next/navigation"
 
 import { getBlogPostBySlug, getBlogPosts } from "@repo/blog"
 import { BlogPostUI } from "@repo/blog/BlogPostUI"
-import type { Locale } from "@repo/i18n/config"
+import type { Locale } from "@repo/utils/constants"
 import { unstable_setRequestLocale } from "next-intl/server"
 
 interface BlogPostPageProps {

apps/website/app/[locale]/(main)/blog/page.tsx

@@ -1,12 +1,13 @@
 import { getBlogPosts } from "@repo/blog"
 import { BlogPosts } from "@repo/blog/BlogPosts"
-import { LOCALE_DEFAULT, type LocaleProps } from "@repo/i18n/config"
+import type { LocaleProps } from "@repo/i18n/config"
 import { MainLayout } from "@repo/ui/Layout/MainLayout"
 import {
   Section,
   SectionDescription,
   SectionTitle,
 } from "@repo/ui/Layout/Section"
+import { LOCALE_DEFAULT } from "@repo/utils/constants"
 import type { Metadata } from "next"
 import { unstable_setRequestLocale } from "next-intl/server"
 

apps/website/app/[locale]/layout.tsx

@@ -1,6 +1,7 @@
 import "@repo/config-tailwind/styles.css"
-import type { Locale, LocaleProps } from "@repo/i18n/config"
-import { LOCALES } from "@repo/i18n/config"
+import type { LocaleProps } from "@repo/i18n/config"
+import type { Locale } from "@repo/utils/constants"
+import { LOCALES } from "@repo/utils/constants"
 import type { Metadata } from "next"
 import { NextIntlClientProvider } from "next-intl"
 import {

apps/website/middleware.ts

@@ -1,4 +1,4 @@
-import { LOCALES, LOCALE_DEFAULT, LOCALE_PREFIX } from "@repo/i18n/config"
+import { LOCALES, LOCALE_DEFAULT, LOCALE_PREFIX } from "@repo/utils/constants"
 import createMiddleware from "next-intl/middleware"
 
 export default createMiddleware({

apps/website/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/website/next.config.js

@@ -5,6 +5,10 @@ const IS_STANDALONE = process.env.IS_STANDALONE === "true"
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: IS_STANDALONE ? "standalone" : undefined,
+  images: {
+    unoptimized: true,
+  },
+  compress: false,
 
   // https://github.com/hashicorp/next-mdx-remote/issues/436#issuecomment-2066971842
   transpilePackages: ["next-mdx-remote", "shiki"],

apps/website/package.json

@@ -22,8 +22,7 @@
     "next": "catalog:",
     "next-intl": "catalog:",
     "react": "catalog:",
-    "react-dom": "catalog:",
-    "sharp": "catalog:"
+    "react-dom": "catalog:"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",

apps/website/tailwind.config.js

@@ -2,7 +2,11 @@ import sharedConfig from "@repo/config-tailwind"
 
 /** @type {Pick<import('tailwindcss').Config, "presets" | "content">} */
 const config = {
-  content: ["./**/*.tsx", "../../packages/**/*.tsx"],
+  content: [
+    "./app/**/*.tsx",
+    "../../packages/ui/src/**/*.tsx",
+    "../../packages/blog/src/**/*.tsx",
+  ],
   presets: [sharedConfig],
 }
 

apps/website/tsconfig.json

@@ -1,16 +1,9 @@
 {
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": ["@total-typescript/ts-reset", "@repo/i18n/messages.d.ts"],
-    "incremental": true,
-    "noEmit": true,
     "allowJs": true,
-    "jsx": "preserve",
     "paths": {
       "#*": ["./*"]
     },

package.json

@@ -3,10 +3,10 @@
   "version": "4.0.0",
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903",
+  "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4",
   "engines": {
     "node": ">=22.0.0",
-    "pnpm": ">=9.5.0"
+    "pnpm": ">=9.12.1"
   },
   "scripts": {
     "build": "turbo run build",
@@ -15,25 +15,25 @@
     "test": "turbo run test",
     "lint:editorconfig": "editorconfig-checker",
     "lint:markdown": "markdownlint-cli2",
-    "lint:prettier": "prettier . --check",
-    "lint:eslint": "turbo run lint:eslint",
     "lint:typescript": "turbo run lint:typescript",
+    "lint:eslint": "turbo run lint:eslint",
+    "lint:prettier": "prettier . --check",
     "release": "semantic-release"
   },
   "devDependencies": {
-    "@saithodev/semantic-release-backmerge": "4.0.1",
-    "@semantic-release/exec": "6.0.3",
-    "@semantic-release/git": "10.0.1",
-    "editorconfig-checker": "5.1.8",
+    "@saithodev/semantic-release-backmerge": "catalog:",
+    "@semantic-release/exec": "catalog:",
+    "@semantic-release/git": "catalog:",
+    "editorconfig-checker": "catalog:",
     "playwright": "catalog:",
-    "prettier": "3.3.3",
-    "prettier-plugin-tailwindcss": "0.6.5",
-    "markdownlint-cli2": "0.13.0",
-    "markdownlint": "0.34.0",
-    "markdownlint-rule-relative-links": "3.0.0",
-    "replace-in-files-cli": "3.0.0",
-    "semantic-release": "23.1.1",
-    "turbo": "2.0.10",
+    "prettier": "catalog:",
+    "prettier-plugin-tailwindcss": "catalog:",
+    "markdownlint-cli2": "catalog:",
+    "markdownlint": "catalog:",
+    "markdownlint-rule-relative-links": "catalog:",
+    "replace-in-files-cli": "catalog:",
+    "semantic-release": "catalog:",
+    "turbo": "catalog:",
     "typescript": "catalog:"
   }
 }

packages/blog/.eslintrc.json

@@ -7,7 +7,7 @@
       "plugins": ["@typescript-eslint"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
-        "project": true
+        "projectService": true
       }
     }
   ]

packages/blog/src/BlogPostContent.tsx

@@ -11,7 +11,7 @@ import remarkMath from "remark-math"
 
 import { Link } from "@repo/i18n/navigation"
 import "katex/dist/katex.min.css"
-import { BlogPostComments } from "./BlogPostComments"
+import { BlogPostComments } from "./BlogPostComments.tsx"
 
 const Heading: React.FC<
   React.DetailedHTMLProps<

packages/blog/src/BlogPostUI.tsx

@@ -3,8 +3,8 @@ import "katex/dist/katex.min.css"
 
 import { Typography } from "@repo/ui/Design/Typography"
 import { MainLayout } from "@repo/ui/Layout/MainLayout"
-import type { BlogPost } from "./BlogPost"
-import { BlogPostContent } from "./BlogPostContent"
+import type { BlogPost } from "./BlogPost.tsx"
+import { BlogPostContent } from "./BlogPostContent.tsx"
 
 export interface BlogPostUIProps {
   blogPost: BlogPost

packages/blog/src/BlogPosts.tsx

@@ -2,7 +2,7 @@ import { Link } from "@repo/i18n/navigation"
 import { Typography } from "@repo/ui/Design/Typography"
 import { Section, SectionContent } from "@repo/ui/Layout/Section"
 import { getISODate } from "@repo/utils/dates"
-import type { BlogPost } from "./BlogPost"
+import type { BlogPost } from "./BlogPost.tsx"
 
 export interface BlogPostsProps {
   posts: BlogPost[]

packages/blog/src/blog.ts

@@ -2,7 +2,7 @@ import fs from "node:fs"
 import path from "node:path"
 
 import matter from "gray-matter"
-import type { BlogPost, FrontMatter } from "./BlogPost"
+import type { BlogPost, FrontMatter } from "./BlogPost.tsx"
 
 export const BLOG_POSTS_PATH = path.join(
   process.cwd(),

packages/blog/src/stories/BlogPostUI.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { BLOG_POST_MOCK } from "../BlogPost"
-import { BlogPostUI as BlogPostUIComponent } from "../BlogPostUI"
+import { BLOG_POST_MOCK } from "../BlogPost.ts"
+import { BlogPostUI as BlogPostUIComponent } from "../BlogPostUI.tsx"
 
 const meta = {
   title: "Blog/BlogPostUI",

packages/blog/src/stories/BlogPosts.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { BLOG_POST_MOCK } from "../BlogPost"
-import { BlogPosts as BlogPostsComponent } from "../BlogPosts"
+import { BLOG_POST_MOCK } from "../BlogPost.ts"
+import { BlogPosts as BlogPostsComponent } from "../BlogPosts.tsx"
 
 const meta = {
   title: "Blog/BlogPosts",

packages/blog/tsconfig.json

@@ -1,18 +1,11 @@
 {
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": [
       "@total-typescript/ts-reset",
-      "@repo/i18n/messages.d.ts",
-      "@types/node"
-    ],
-    "jsx": "preserve",
-
-    "noEmit": true
+      "@types/node",
+      "@repo/i18n/messages.d.ts"
+    ]
   }
 }

packages/config-eslint/.eslintrc.json

@@ -1,3 +1,26 @@
 {
-  "extends": ["conventions"]
+  "extends": ["conventions"],
+  "plugins": ["import-x"],
+  "rules": {
+    "import-x/no-absolute-path": "error",
+    "import-x/no-webpack-loader-syntax": "error",
+    "import-x/no-self-import": "error",
+    "import-x/no-useless-path-segments": "error",
+    "import-x/export": "error",
+    "import-x/no-duplicates": "error",
+    "import-x/no-named-default": "error",
+    "import-x/no-empty-named-blocks": "error",
+    "import-x/no-anonymous-default-export": "error",
+    "import-x/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "always",
+        "tsx": "always",
+        "js": "never",
+        "jsx": "never"
+      }
+    ],
+    "import-x/consistent-type-specifier-style": ["error", "prefer-top-level"]
+  }
 }

packages/config-eslint/nextjs/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "conventions",
+    "../.eslintrc.json",
     "next/core-web-vitals",
     "plugin:tailwindcss/recommended",
     "plugin:storybook/recommended"

packages/config-eslint/package.json

@@ -17,6 +17,7 @@
     "eslint-config-next": "catalog:",
     "eslint-plugin-storybook": "catalog:",
     "eslint-plugin-tailwindcss": "catalog:",
+    "eslint-plugin-import-x": "catalog:",
     "typescript": "catalog:"
   }
 }

packages/config-tailwind/.eslintrc.json

@@ -7,7 +7,7 @@
       "plugins": ["@typescript-eslint"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
-        "project": true
+        "projectService": true
       }
     }
   ]

packages/config-tailwind/tsconfig.json

@@ -1,10 +1,6 @@
 {
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-
-    "noEmit": true
+    "lib": ["ESNext"]
   }
 }

packages/config-typescript/tsconfig.json

@@ -6,15 +6,27 @@
     "noFallthroughCasesInSwitch": true,
     "noImplicitOverride": true,
     "noImplicitReturns": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
 
+    "verbatimModuleSyntax": true,
     "isolatedModules": true,
     "esModuleInterop": true,
+    "allowImportingTsExtensions": true,
     "skipLibCheck": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "noEmit": true,
+
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
   }
 }

packages/i18n/.eslintrc.json

@@ -7,7 +7,7 @@
       "plugins": ["@typescript-eslint"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
-        "project": true
+        "projectService": true
       }
     }
   ]

packages/i18n/package.json

@@ -16,6 +16,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@repo/utils": "workspace:*",
     "deepmerge": "catalog:",
     "next": "catalog:",
     "next-intl": "catalog:",

packages/i18n/src/config.tsx

@@ -1,10 +1,6 @@
+import type { Locale } from "@repo/utils/constants"
 import type { RichTranslationValues } from "next-intl"
 
-export const LOCALES = ["en-US", "fr-FR"] as const
-export type Locale = (typeof LOCALES)[number]
-export const LOCALE_DEFAULT = "en-US" satisfies Locale
-export const LOCALE_PREFIX = "never"
-
 export interface LocaleProps {
   params: {
     locale: Locale

packages/i18n/src/i18n.ts

@@ -3,8 +3,9 @@ import type { AbstractIntlMessages } from "next-intl"
 import { getRequestConfig } from "next-intl/server"
 import { notFound } from "next/navigation"
 
-import type { Locale } from "./config"
-import { defaultTranslationValues, LOCALE_DEFAULT, LOCALES } from "./config"
+import type { Locale } from "@repo/utils/constants"
+import { LOCALE_DEFAULT, LOCALES } from "@repo/utils/constants"
+import { defaultTranslationValues } from "./config.tsx"
 
 export default getRequestConfig(async ({ locale }) => {
   if (!LOCALES.includes(locale as Locale)) {

packages/i18n/src/navigation.ts

@@ -1,6 +1,6 @@
 import { createSharedPathnamesNavigation } from "next-intl/navigation"
 
-import { LOCALES, LOCALE_PREFIX } from "./config"
+import { LOCALES, LOCALE_PREFIX } from "@repo/utils/constants"
 
 export const { Link, redirect, usePathname, useRouter, permanentRedirect } =
   createSharedPathnamesNavigation({

packages/i18n/src/translations/en-US.json

@@ -1,151 +1,162 @@
 {
-  "meta": {
-    "title": "Théo LUDWIG",
-    "description": "Developer Full Stack • Open-Source Enthusiast"
-  },
-  "locales": {
-    "en-US": "English",
-    "fr-FR": "French"
-  },
-  "footer": {
-    "all-rights-reserved": "All rights reserved"
-  },
-  "errors": {
-    "error": "Error",
-    "page-doesnt-exist": "This page doesn't exist!",
-    "not-found": "Not Found",
-    "server-error": "Internal Server Error!",
-    "return-to-home-page": "Return to the home page?",
-    "try-again": "Try again?"
-  },
-  "home": {
-    "about": {
-      "pronouns": {
-        "label": "Pronouns",
-        "value": "He/Him"
-      },
-      "birth-date": {
-        "label": "Birth date",
-        "value": "{birthDate} ({age} years old)"
-      },
-      "nationality": {
-        "label": "Nationality",
-        "value": "Alsace, France"
-      },
-      "email": {
-        "label": "Email",
-        "value": "{email}"
-      },
-      "description": "I constantly wonder how to <strong>improve our present, to make our future better</strong>, particularly thanks to the advancements in <strong>computer science</strong>."
-    },
-    "interests": {
-      "title": "Interests",
-      "code": {
-        "title": "Developer Full Stack",
-        "description": "My priority is to craft <strong>intuitive user experiences (<abbr-ux>UX</abbr-ux>)</strong>, that meet the needs of the users <strong>in the most efficient way possible</strong>. <br></br> Mainly focused on the development of <strong>Web solutions</strong>. <br></br> I am also interested in mobile and desktop application development, among other areas within the field of computer science."
-      },
-      "open-source": {
-        "title": "Open-Source Enthusiast",
-        "description": "I value the <strong>sharing of knowledge and collaboration</strong> to collectively resolve problems. <br></br> The source code of the website is available on <github-link>GitHub</github-link>."
-      }
-    },
-    "skills": {
-      "title": "Skills",
-      "programming-languages": "Programming languages",
-      "frontend": "Frontend",
-      "backend": "Backend",
-      "software-tools": "Software and tools",
-      "others": "Others",
-      "driving-license": "Driving license"
-    },
-    "portfolio": {
-      "title": "Portfolio",
-      "carolo": {
-        "title": "Carolo",
-        "description": "Strategy board game similar to chess which allows grandiose moves (only available in French)."
-      },
-      "leon": {
-        "title": "Leon",
-        "description": "Leon is your open-source personal assistant."
-      }
-    },
-    "open-source": {
-      "title": "Open-Source",
-      "description": "Most famous open source projects I contributed to."
-    }
-  },
   "curriculum-vitae": {
-    "description": "Developer Full Stack • Student",
     "about": {
-      "title": "About",
-      "description": "I constantly wonder how to improve our present, to make our future better, particularly thanks to the advancements in computer science. <br></br> My priority is to craft intuitive user experiences (UX), that meet the needs of the users in the most efficient way possible."
+      "description": "I constantly wonder how to improve our present, to make our future better, particularly thanks to the advancements in computer science. <br></br> My priority is to craft intuitive user experiences (UX), that meet the needs of the users in the most efficient way possible.",
+      "title": "About"
     },
+    "description": "Developer Full Stack • Student",
     "education": {
-      "title": "Studies",
-      "iut": {
-        "study-type": "University Bachelor of Technology (BUT) Computer Science",
-        "institution": "IUT Robert Schuman in Illkirch-Graffenstaden",
+      "cnam": {
+        "institution": "Conservatoire National des Arts et Métiers (CNAM), in Eckbolsheim - UIMM Alsace - ITII Alsace",
+        "study-type": "Engineer in Computer Science and Information Systems (IS)",
         "years": {
-          "2023-2024": {
-            "title": "2023 - 2024",
-            "description": "3rd year",
-            "courses": {
-              "web": "Web development in Node.js and React.js",
-              "ci-cd": "Continuous Integration/Deployment (CI/CD) and Docker",
-              "complexity-algorithms": "Theoretical and Practical Algorithmic Complexity in C++",
-              "no-sql": "NoSQL database (Redis, MongoDB, Cassandra)"
-            }
-          },
-          "2022-2023": {
-            "title": "2022 - 2023",
-            "description": "2nd year",
-            "courses": {
-              "web": "Web development with the Laravel framework in PHP",
-              "tests": "Development Quality and Automated Testing",
-              "clean-code": "Design Patterns and Principles (Maintainable and Reusable Code) in UML",
-              "systems-c": "Systems programming in C (Multi-Thread, Server/Client UDP/TCP)",
-              "sql-security": "Securing database access and PL/SQL"
-            }
-          },
-          "2021-2022": {
-            "title": "2021 - 2022",
+          "2024-2025": {
+            "courses": {},
             "description": "1st year",
+            "title": "2024 - 2025"
+          }
+        }
+      },
+      "iut": {
+        "institution": "IUT Robert Schuman in Illkirch-Graffenstaden",
+        "study-type": "University Bachelor of Technology (BUT) Computer Science",
+        "years": {
+          "2021-2022": {
             "courses": {
               "java": "Object Oriented Development in Java",
+              "sql": "Relational database and SQL language",
               "systems-c": "Systems programming in C (Memory allocation, Pointers, Structures)",
-              "windows-forms": "Windows Forms (.NET Framework) Application Development in C#",
-              "sql": "Relational database and SQL language"
-            }
+              "windows-forms": "Windows Forms (.NET Framework) Application Development in C#"
+            },
+            "description": "1st year",
+            "title": "2021 - 2022"
+          },
+          "2022-2023": {
+            "courses": {
+              "clean-code": "Design Patterns and Principles (Maintainable and Reusable Code) in UML",
+              "sql-security": "Securing database access and PL/SQL",
+              "systems-c": "Systems programming in C (Multi-Thread, Server/Client UDP/TCP)",
+              "tests": "Development Quality and Automated Testing",
+              "web": "Web development with the Laravel framework in PHP"
+            },
+            "description": "2nd year",
+            "title": "2022 - 2023"
+          },
+          "2023-2024": {
+            "courses": {
+              "ci-cd": "Continuous Integration/Deployment (CI/CD) and Docker",
+              "complexity-algorithms": "Theoretical and Practical Algorithmic Complexity in C++",
+              "no-sql": "NoSQL database (Redis, MongoDB, Cassandra)",
+              "web": "Web development in Node.js and React.js"
+            },
+            "description": "3rd year",
+            "title": "2023 - 2024"
           }
         }
       },
       "lycee": {
-        "study-type": "General Baccalaureate (Mathematics and Computer Science)",
         "institution": "Heinrich Nessel High School in Haguenau",
         "score": "Mention Quite Good",
+        "study-type": "General Baccalaureate (Mathematics and Computer Science)",
         "years": {
           "2019-2021": {
             "title": "2019 - 2021"
           }
         }
-      }
+      },
+      "title": "Studies"
+    },
+    "interests": {
+      "high-tech": "Passionate about High-Tech",
+      "open-source": "Open-Source Enthusiast"
     },
     "work": {
-      "title": "Work experiences",
       "ircad": {
-        "summary": "Development of WebSurg, a virtual university dedicated to medical-surgical training, in React.js/Next.js and API Platform with Symfony.",
+        "duration": "4 ans",
         "position": "Full Stack Web Developer Apprentice",
-        "duration": "1 year"
+        "summary": "Development of WebSurg, a virtual university dedicated to medical-surgical training, in React.js/Next.js and API Platform with Symfony."
       },
       "numerize": {
-        "summary": "Development of an DMS (Document Management System) tool in React.js, Laravel and GraphQL.",
+        "duration": "4 months",
         "position": "Full Stack Web Developer Intern",
-        "duration": "4 months"
+        "summary": "Development of an DMS (Document Management System) tool in React.js, Laravel and GraphQL."
+      },
+      "title": "Work experiences"
+    }
+  },
+  "errors": {
+    "error": "Error",
+    "not-found": "Not Found",
+    "page-doesnt-exist": "This page doesn't exist!",
+    "return-to-home-page": "Return to the home page?",
+    "server-error": "Internal Server Error!",
+    "try-again": "Try again?"
+  },
+  "footer": {
+    "all-rights-reserved": "All rights reserved"
+  },
+  "home": {
+    "about": {
+      "birth-date": {
+        "label": "Birth date",
+        "value": "{birthDate} ({age} years old)"
+      },
+      "description": "I constantly wonder how to <strong>improve our present, to make our future better</strong>, particularly thanks to the advancements in <strong>computer science</strong>.",
+      "email": {
+        "label": "Email",
+        "value": "{email}"
+      },
+      "nationality": {
+        "label": "Nationality",
+        "value": "Alsace, France"
+      },
+      "pronouns": {
+        "label": "Pronouns",
+        "value": "He/Him"
       }
     },
     "interests": {
-      "open-source": "Open-Source Enthusiast",
-      "high-tech": "Passionate about High-Tech"
+      "code": {
+        "description": "My priority is to craft <strong>intuitive user experiences (<abbr-ux>UX</abbr-ux>)</strong>, that meet the needs of the users <strong>in the most efficient way possible</strong>. <br></br> Mainly focused on the development of <strong>Web solutions</strong>. <br></br> I am also interested in mobile and desktop application development, among other areas within the field of computer science.",
+        "title": "Developer Full Stack"
+      },
+      "open-source": {
+        "description": "I value the <strong>sharing of knowledge and collaboration</strong> to collectively resolve problems. <br></br> The source code of the website is available on <github-link>GitHub</github-link>.",
+        "title": "Open-Source Enthusiast"
+      },
+      "title": "Interests"
+    },
+    "open-source": {
+      "description": "Most famous open source projects I contributed to.",
+      "title": "Open-Source"
+    },
+    "portfolio": {
+      "carolo": {
+        "description": "Strategy board game similar to chess which allows grandiose moves (only available in French).",
+        "title": "Carolo"
+      },
+      "leon": {
+        "description": "Leon is your open-source personal assistant.",
+        "title": "Leon"
+      },
+      "title": "Portfolio"
+    },
+    "skills": {
+      "backend": "Backend",
+      "driving-license": "Driving license",
+      "frontend": "Frontend",
+      "others": "Others",
+      "programming-languages": "Programming languages",
+      "software-tools": "Software and tools",
+      "title": "Skills"
     }
+  },
+  "locales": {
+    "en-US": "English",
+    "fr-FR": "French"
+  },
+  "meta": {
+    "description": "Developer Full Stack • Open-Source Enthusiast",
+    "title": "Théo LUDWIG"
   }
 }

packages/i18n/src/translations/fr-FR.json

@@ -1,151 +1,162 @@
 {
-  "meta": {
-    "title": "Théo LUDWIG",
-    "description": "Développeur Full Stack • Enthousiaste de l'Open-Source"
-  },
-  "locales": {
-    "en-US": "Anglais",
-    "fr-FR": "Français"
-  },
-  "footer": {
-    "all-rights-reserved": "Tous droits réservés"
-  },
-  "errors": {
-    "error": "Erreur",
-    "page-doesnt-exist": "Cette page n'existe pas !",
-    "not-found": "Introuvable",
-    "server-error": "Erreur interne du serveur !",
-    "return-to-home-page": "Retour à la page d'accueil ?",
-    "try-again": "Réessayer ?"
-  },
-  "home": {
-    "about": {
-      "pronouns": {
-        "label": "Pronoms",
-        "value": "Il/Lui"
-      },
-      "birth-date": {
-        "label": "Date de naissance",
-        "value": "{birthDate} ({age} ans)"
-      },
-      "nationality": {
-        "label": "Nationalité",
-        "value": "Alsace, France"
-      },
-      "email": {
-        "label": "Email",
-        "value": "{email}"
-      },
-      "description": "Je me demande constamment comment <strong>améliorer notre présent, afin de rendre notre futur meilleur</strong>, particulièrement grâce aux progrès de <strong>l'informatique</strong>."
-    },
-    "interests": {
-      "title": "Intérêts",
-      "code": {
-        "title": "Développeur Full Stack",
-        "description": "Ma priorité réside dans la création <strong>d'expériences utilisateurs (<abbr-ux>UX</abbr-ux>) intuitives</strong>, répondant aux besoins des utilisateurs de la <strong>manière la plus efficace que possible</strong>. <br></br> Principalement axé sur l'élaboration de <strong>solutions en Développement Web</strong>. <br></br> Je suis également intéressé par le développement d'applications mobiles parmis d'autres domaines de l'informatique."
-      },
-      "open-source": {
-        "title": "Enthousiaste de l'Open-Source",
-        "description": "J'apprécie le <strong>partage des connaissances et la collaboration</strong> pour résoudre des défis collectivement. <br></br> Le code source du site est accessible sur <github-link>GitHub</github-link>."
-      }
-    },
-    "skills": {
-      "title": "Compétences",
-      "programming-languages": "Langages de programmation",
-      "frontend": "Frontend",
-      "backend": "Backend",
-      "software-tools": "Logiciels et outils",
-      "others": "Autres",
-      "driving-license": "Permis B"
-    },
-    "portfolio": {
-      "title": "Portfolio",
-      "carolo": {
-        "title": "Carolo",
-        "description": "Jeu de plateau stratégique similaire aux échecs qui permet des coups grandioses, reposant sur des enchaînements remarquables."
-      },
-      "leon": {
-        "title": "Leon",
-        "description": "Leon est votre assistant personnel open source."
-      }
-    },
-    "open-source": {
-      "title": "Open-Source",
-      "description": "Projets open source les plus célèbres auxquels j'ai contribué."
-    }
-  },
   "curriculum-vitae": {
-    "description": "Développeur Full Stack • Étudiant",
     "about": {
-      "title": "À propos",
-      "description": "Je me demande constamment comment améliorer notre présent, afin de rendre notre futur meilleur, particulièrement grâce aux progrès de l'informatique. <br></br> Ma priorité réside dans la création d'expériences utilisateurs (UX) intuitives, répondant aux besoins des utilisateurs de la manière la plus efficace que possible."
+      "description": "Je me demande constamment comment améliorer notre présent, afin de rendre notre futur meilleur, particulièrement grâce aux progrès de l'informatique. <br></br> Ma priorité réside dans la création d'expériences utilisateurs (UX) intuitives, répondant aux besoins des utilisateurs de la manière la plus efficace que possible.",
+      "title": "À propos"
     },
+    "description": "Développeur Full Stack • Étudiant",
     "education": {
-      "title": "Études",
-      "iut": {
-        "study-type": "Bachelor Universitaire de Technologie (BUT) Informatique",
-        "institution": "IUT Robert Schuman à Illkirch-Graffenstaden",
+      "cnam": {
+        "institution": "Conservatoire National des Arts et Métiers (CNAM) à Eckbolsheim - UIMM Alsace - ITII Alsace",
+        "study-type": "Ingénieur en Informatique et Systèmes d'Information (SI)",
         "years": {
-          "2023-2024": {
-            "title": "2023 - 2024",
-            "description": "3ème année",
-            "courses": {
-              "web": "Développement Web en Node.js et React.js",
-              "ci-cd": "Intégration/Déploiement Continue et Docker",
-              "complexity-algorithms": "Complexité Algorithmique Théorique et Pratique en C++",
-              "no-sql": "Base de données NoSQL (Redis, MongoDB, Cassandra)"
-            }
-          },
-          "2022-2023": {
-            "title": "2022 - 2023",
-            "description": "2ème année",
-            "courses": {
-              "web": "Développement Web avec le framework Laravel en PHP",
-              "tests": "Qualité de développement et Tests automatisés",
-              "clean-code": "Patrons et Principes de conceptions (Code maintenable et réutilisable) en UML",
-              "systems-c": "Programmation systèmes en C (Multi-Thread, Serveur/Client UDP/TCP)",
-              "sql-security": "Sécurisation des accès à la base de données et PL/SQL"
-            }
-          },
-          "2021-2022": {
-            "title": "2021 - 2022",
+          "2024-2025": {
+            "courses": {},
             "description": "1ère année",
+            "title": "2024 - 2025"
+          }
+        }
+      },
+      "iut": {
+        "institution": "IUT Robert Schuman à Illkirch-Graffenstaden",
+        "study-type": "Bachelor Universitaire de Technologie (BUT) Informatique",
+        "years": {
+          "2021-2022": {
             "courses": {
               "java": "Développement Orientée Objet en Java",
+              "sql": "Base de données relationnelles et langage SQL",
               "systems-c": "Programmation systèmes en C (Allocation mémoire, Pointeurs, Structures)",
-              "windows-forms": "Développement d'application Windows Forms (.NET Framework) en C#",
-              "sql": "Base de données relationnelles et langage SQL"
-            }
+              "windows-forms": "Développement d'application Windows Forms (.NET Framework) en C#"
+            },
+            "description": "1ère année",
+            "title": "2021 - 2022"
+          },
+          "2022-2023": {
+            "courses": {
+              "clean-code": "Patrons et Principes de conceptions (Code maintenable et réutilisable) en UML",
+              "sql-security": "Sécurisation des accès à la base de données et PL/SQL",
+              "systems-c": "Programmation systèmes en C (Multi-Thread, Serveur/Client UDP/TCP)",
+              "tests": "Qualité de développement et Tests automatisés",
+              "web": "Développement Web avec le framework Laravel en PHP"
+            },
+            "description": "2ème année",
+            "title": "2022 - 2023"
+          },
+          "2023-2024": {
+            "courses": {
+              "ci-cd": "Intégration/Déploiement Continue et Docker",
+              "complexity-algorithms": "Complexité Algorithmique Théorique et Pratique en C++",
+              "no-sql": "Base de données NoSQL (Redis, MongoDB, Cassandra)",
+              "web": "Développement Web en Node.js et React.js"
+            },
+            "description": "3ème année",
+            "title": "2023 - 2024"
           }
         }
       },
       "lycee": {
-        "study-type": "Baccalauréat Général (Mathématiques et Numériques Sciences Informatiques)",
         "institution": "Lycée Heinrich Nessel à Haguenau",
         "score": "Mention Assez Bien",
+        "study-type": "Baccalauréat Général (Mathématiques et Numériques Sciences Informatiques)",
         "years": {
           "2019-2021": {
             "title": "2019 - 2021"
           }
         }
-      }
+      },
+      "title": "Études"
+    },
+    "interests": {
+      "high-tech": "Passionné de High-Tech",
+      "open-source": "Enthousiaste de l'Open-Source"
     },
     "work": {
-      "title": "Expériences professionnelles",
       "ircad": {
-        "summary": "Développement de WebSurg, une université virtuelle consacrée à la formation médico-chirurgicale, en React.js/Next.js et API Platform avec Symfony.",
+        "duration": "4 ans",
         "position": "Apprenti Développeur Web Full Stack",
-        "duration": "1 an"
+        "summary": "Développement de WebSurg, une université virtuelle consacrée à la formation médico-chirurgicale, en React.js/Next.js et API Platform avec Symfony."
       },
       "numerize": {
-        "summary": "Développement d'un outil GED (Gestion Électronique de Documents) en React.js, Laravel et GraphQL.",
+        "duration": "4 mois",
         "position": "Stagiaire Développeur Web Full Stack",
-        "duration": "4 mois"
+        "summary": "Développement d'un outil GED (Gestion Électronique de Documents) en React.js, Laravel et GraphQL."
+      },
+      "title": "Expériences professionnelles"
+    }
+  },
+  "errors": {
+    "error": "Erreur",
+    "not-found": "Introuvable",
+    "page-doesnt-exist": "Cette page n'existe pas !",
+    "return-to-home-page": "Retour à la page d'accueil ?",
+    "server-error": "Erreur interne du serveur !",
+    "try-again": "Réessayer ?"
+  },
+  "footer": {
+    "all-rights-reserved": "Tous droits réservés"
+  },
+  "home": {
+    "about": {
+      "birth-date": {
+        "label": "Date de naissance",
+        "value": "{birthDate} ({age} ans)"
+      },
+      "description": "Je me demande constamment comment <strong>améliorer notre présent, afin de rendre notre futur meilleur</strong>, particulièrement grâce aux progrès de <strong>l'informatique</strong>.",
+      "email": {
+        "label": "Email",
+        "value": "{email}"
+      },
+      "nationality": {
+        "label": "Nationalité",
+        "value": "Alsace, France"
+      },
+      "pronouns": {
+        "label": "Pronoms",
+        "value": "Il/Lui"
       }
     },
     "interests": {
-      "open-source": "Enthousiaste de l'Open-Source",
-      "high-tech": "Passionné de High-Tech"
+      "code": {
+        "description": "Ma priorité réside dans la création <strong>d'expériences utilisateurs (<abbr-ux>UX</abbr-ux>) intuitives</strong>, répondant aux besoins des utilisateurs de la <strong>manière la plus efficace que possible</strong>. <br></br> Principalement axé sur l'élaboration de <strong>solutions en Développement Web</strong>. <br></br> Je suis également intéressé par le développement d'applications mobiles parmis d'autres domaines de l'informatique.",
+        "title": "Développeur Full Stack"
+      },
+      "open-source": {
+        "description": "J'apprécie le <strong>partage des connaissances et la collaboration</strong> pour résoudre des défis collectivement. <br></br> Le code source du site est accessible sur <github-link>GitHub</github-link>.",
+        "title": "Enthousiaste de l'Open-Source"
+      },
+      "title": "Intérêts"
+    },
+    "open-source": {
+      "description": "Projets open source les plus célèbres auxquels j'ai contribué.",
+      "title": "Open-Source"
+    },
+    "portfolio": {
+      "carolo": {
+        "description": "Jeu de plateau stratégique similaire aux échecs qui permet des coups grandioses, reposant sur des enchaînements remarquables.",
+        "title": "Carolo"
+      },
+      "leon": {
+        "description": "Leon est votre assistant personnel open source.",
+        "title": "Leon"
+      },
+      "title": "Portfolio"
+    },
+    "skills": {
+      "backend": "Backend",
+      "driving-license": "Permis B",
+      "frontend": "Frontend",
+      "others": "Autres",
+      "programming-languages": "Langages de programmation",
+      "software-tools": "Logiciels et outils",
+      "title": "Compétences"
     }
+  },
+  "locales": {
+    "en-US": "Anglais",
+    "fr-FR": "Français"
+  },
+  "meta": {
+    "description": "Développeur Full Stack • Enthousiaste de l'Open-Source",
+    "title": "Théo LUDWIG"
   }
 }

packages/i18n/tsconfig.json

@@ -1,14 +1,7 @@
 {
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["@total-typescript/ts-reset"],
-    "jsx": "preserve",
-
-    "noEmit": true
+    "types": ["@total-typescript/ts-reset"]
   }
 }

packages/react-hooks/.eslintrc.json

@@ -7,7 +7,7 @@
       "plugins": ["@typescript-eslint"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
-        "project": true
+        "projectService": true
       }
     }
   ]

packages/react-hooks/src/tests/useBoolean.test.ts

@@ -1,7 +1,7 @@
 import { act, renderHook } from "@testing-library/react"
 
 import { describe, expect, it } from "vitest"
-import { useBoolean } from "../useBoolean"
+import { useBoolean } from "../useBoolean.ts"
 
 describe("useBoolean", () => {
   const initialValues = [true, false]

packages/react-hooks/src/tests/useIsMounted.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from "@testing-library/react"
 
 import { describe, expect, it } from "vitest"
-import { useIsMounted } from "../useIsMounted"
+import { useIsMounted } from "../useIsMounted.ts"
 
 describe("useIsMounted", () => {
   it("should return true", () => {

packages/react-hooks/tsconfig.json

@@ -1,17 +1,7 @@
 {
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": [
-      "@total-typescript/ts-reset",
-      "@vitest/browser/providers/playwright"
-    ],
-    "jsx": "preserve",
-
-    "noEmit": true
+    "types": ["@total-typescript/ts-reset"]
   }
 }

packages/ui/.eslintrc.json

@@ -7,7 +7,7 @@
       "plugins": ["@typescript-eslint"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
-        "project": true
+        "projectService": true
       }
     }
   ]

packages/ui/src/CurriculumVitae/CurriculumVitae.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { CurriculumVitae as CurriculumVitaeComponent } from "./CurriculumVitae"
+import { CurriculumVitae as CurriculumVitaeComponent } from "./CurriculumVitae.tsx"
 
 const meta = {
   title: "Curriculum Vitae/CurriculumVitae",

packages/ui/src/CurriculumVitae/CurriculumVitae.tsx

@@ -1,9 +1,9 @@
-import { CurriculumVitaeAbout } from "./CurriculumVitaeAbout"
-import { CurriculumVitaeEducation } from "./CurriculumVitaeEducation"
-import { CurriculumVitaeInterests } from "./CurriculumVitaeInterests"
-import { CurriculumVitaeProfile } from "./CurriculumVitaeProfile"
-import { CurriculumVitaeSkills } from "./CurriculumVitaeSkills"
-import { CurriculumVitaeWork } from "./CurriculumVitaeWork"
+import { CurriculumVitaeAbout } from "./CurriculumVitaeAbout.tsx"
+import { CurriculumVitaeEducation } from "./CurriculumVitaeEducation.tsx"
+import { CurriculumVitaeInterests } from "./CurriculumVitaeInterests.tsx"
+import { CurriculumVitaeProfile } from "./CurriculumVitaeProfile.tsx"
+import { CurriculumVitaeSkills } from "./CurriculumVitaeSkills.tsx"
+import { CurriculumVitaeWork } from "./CurriculumVitaeWork.tsx"
 
 export interface CurriculumVitaeProps {}
 

packages/ui/src/CurriculumVitae/CurriculumVitaeAbout.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
 import { FaUser } from "react-icons/fa"
-import { CurriculumVitaeSection } from "./CurriculumVitaeSection"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
 
 export interface CurriculumVitaeAboutProps {}
 

packages/ui/src/CurriculumVitae/CurriculumVitaeEducation.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
 import { FaGraduationCap } from "react-icons/fa"
-import { CurriculumVitaeSection } from "./CurriculumVitaeSection"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
 
 export interface CurriculumVitaeEducationProps {}
 
@@ -10,6 +10,13 @@ export const CurriculumVitaeEducation: React.FC<
   const t = useTranslations()
 
   const educations = [
+    {
+      years: t("curriculum-vitae.education.cnam.years.2024-2025.title"),
+      studyType: t("curriculum-vitae.education.cnam.study-type"),
+      institution: t("curriculum-vitae.education.cnam.institution"),
+      score: t("curriculum-vitae.education.cnam.years.2024-2025.description"),
+      courses: [],
+    },
     {
       years: t("curriculum-vitae.education.iut.years.2023-2024.title"),
       studyType: t("curriculum-vitae.education.iut.study-type"),

packages/ui/src/CurriculumVitae/CurriculumVitaeInterests.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
 import { FaHeart } from "react-icons/fa"
-import { CurriculumVitaeSection } from "./CurriculumVitaeSection"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
 
 export interface CurriculumVitaeInterestsProps {}
 

packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx

@@ -1,8 +1,8 @@
 import { Link } from "@repo/i18n/navigation"
 import { useTranslations } from "next-intl"
 import Image from "next/image"
-import { BirthDate } from "../Home/About/AboutList/BirthDate"
-import { Locales } from "../Layout/Header/Locales/Locales"
+import { BirthDate } from "../Home/About/AboutList/BirthDate.tsx"
+import { Locales } from "../Layout/Header/Locales/Locales.tsx"
 
 export interface CurriculumVitaeProfileProps {}
 

packages/ui/src/CurriculumVitae/CurriculumVitaeSkills.tsx

@@ -3,8 +3,8 @@ import { FaToolbox } from "react-icons/fa"
 import {
   SKILL_CATEGORIES,
   SKILL_NAMES_BY_CATEGORY,
-} from "../Home/Skills/skills"
-import { CurriculumVitaeSection } from "./CurriculumVitaeSection"
+} from "../Home/Skills/skills.ts"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
 
 export interface CurriculumVitaeSkillsProps {}
 

packages/ui/src/CurriculumVitae/CurriculumVitaeWork.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
 import { MdWork } from "react-icons/md"
-import { CurriculumVitaeSection } from "./CurriculumVitaeSection"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
 
 export interface CurriculumVitaeWorkProps {}
 
@@ -14,7 +14,7 @@ export const CurriculumVitaeWork: React.FC<CurriculumVitaeWorkProps> = () => {
       name: "IRCAD",
       location: "1 Place de l'Hôpital, FR-67000 Strasbourg",
       position: t("curriculum-vitae.work.ircad.position"),
-      dates: "28/08/2023 - 02/09/2024",
+      dates: "28/08/2023 - 31/08/2027",
       duration: t("curriculum-vitae.work.ircad.duration"),
     },
     {

packages/ui/src/Design/Button/Button.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { expect, fn, userEvent, within } from "@storybook/test"
 import { FaCheck } from "react-icons/fa"
 
-import type { ButtonLinkProps } from "./Button"
-import { Button } from "./Button"
+import type { ButtonLinkProps } from "./Button.tsx"
+import { Button } from "./Button.tsx"
 
 const meta = {
   title: "Design System/Button",

packages/ui/src/Design/Button/Button.tsx

@@ -3,8 +3,8 @@ import { Link as NextLink } from "@repo/i18n/navigation"
 import type { VariantProps } from "cva"
 import { cva } from "cva"
 
-import { Spinner } from "../Spinner/Spinner"
-import { Ripple } from "./Ripple"
+import { Spinner } from "../Spinner/Spinner.tsx"
+import { Ripple } from "./Ripple.tsx"
 
 const buttonVariants = cva({
   base: "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",

packages/ui/src/Design/Link/Link.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Link } from "./Link"
+import { Link } from "./Link.tsx"
 
 const meta = {
   title: "Design System/Link",

packages/ui/src/Design/Spinner/Spinner.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Spinner } from "./Spinner"
+import { Spinner } from "./Spinner.tsx"
 
 const meta = {
   title: "Design System/Spinner",

packages/ui/src/Design/Typography/Typography.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import type { TypographyProps } from "./Typography"
-import { Typography } from "./Typography"
+import type { TypographyProps } from "./Typography.tsx"
+import { Typography } from "./Typography.tsx"
 
 const meta = {
   title: "Design System/Typography",

packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { ErrorNotFound as ErrorNotFoundComponent } from "./ErrorNotFound"
+import { ErrorNotFound as ErrorNotFoundComponent } from "./ErrorNotFound.tsx"
 
 const meta = {
   title: "Errors/ErrorNotFound",

packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.tsx

@@ -1,8 +1,8 @@
 import { useTranslations } from "next-intl"
-import { Link } from "../../Design/Link/Link"
-import { Typography } from "../../Design/Typography/Typography"
-import { MainLayout } from "../../Layout/MainLayout/MainLayout"
-import { Section } from "../../Layout/Section/Section"
+import { Link } from "../../Design/Link/Link.tsx"
+import { Typography } from "../../Design/Typography/Typography.tsx"
+import { MainLayout } from "../../Layout/MainLayout/MainLayout.tsx"
+import { Section } from "../../Layout/Section/Section.tsx"
 
 export interface ErrorNotFoundProps {}
 

packages/ui/src/Errors/ErrorServer/ErrorServer.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { expect, fn, userEvent, within } from "@storybook/test"
 
-import { ErrorServer as ErrorServerComponent } from "./ErrorServer"
+import { ErrorServer as ErrorServerComponent } from "./ErrorServer.tsx"
 
 const meta = {
   title: "Errors/ErrorServer",

packages/ui/src/Errors/ErrorServer/ErrorServer.tsx

@@ -1,11 +1,12 @@
 "use client"
 
+import { useRouter } from "@repo/i18n/navigation"
 import { useTranslations } from "next-intl"
-import { useEffect } from "react"
-import { Button } from "../../Design/Button/Button"
-import { Typography } from "../../Design/Typography/Typography"
-import { MainLayout } from "../../Layout/MainLayout/MainLayout"
-import { Section } from "../../Layout/Section/Section"
+import { useEffect, useTransition } from "react"
+import { Button } from "../../Design/Button/Button.tsx"
+import { Typography } from "../../Design/Typography/Typography.tsx"
+import { MainLayout } from "../../Layout/MainLayout/MainLayout.tsx"
+import { Section } from "../../Layout/Section/Section.tsx"
 
 export interface ErrorServerProps {
   error: Error & { digest?: string }
@@ -15,6 +16,9 @@ export interface ErrorServerProps {
 export const ErrorServer: React.FC<ErrorServerProps> = (props) => {
   const { error, reset } = props
 
+  const [isPending, startTransition] = useTransition()
+  const router = useRouter()
+
   const t = useTranslations()
 
   useEffect(() => {
@@ -29,7 +33,17 @@ export const ErrorServer: React.FC<ErrorServerProps> = (props) => {
         </Typography>
 
         <Typography variant="text1" as="p" className="mt-4">
-          <Button onClick={reset}>{t("errors.try-again")}</Button>
+          <Button
+            isLoading={isPending}
+            onClick={() => {
+              startTransition(() => {
+                router.refresh()
+                reset()
+              })
+            }}
+          >
+            {t("errors.try-again")}
+          </Button>
         </Typography>
       </Section>
     </MainLayout>

packages/ui/src/Home/About/About.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { About as AboutComponent } from "./About"
+import { About as AboutComponent } from "./About.tsx"
 
 const meta = {
   title: "Home/About",

packages/ui/src/Home/About/About.tsx

@@ -1,9 +1,9 @@
-import { Section, SectionContent } from "../../Layout/Section/Section"
-import { AboutDescription } from "./AboutDescription"
-import { AboutIntroduction } from "./AboutIntroduction"
-import { AboutList } from "./AboutList/AboutList"
-import { AboutLogo } from "./AboutLogo"
-import { SocialMediaList } from "./SocialMediaList/SocialMediaList"
+import { Section, SectionContent } from "../../Layout/Section/Section.tsx"
+import { AboutDescription } from "./AboutDescription.tsx"
+import { AboutIntroduction } from "./AboutIntroduction.tsx"
+import { AboutList } from "./AboutList/AboutList.tsx"
+import { AboutLogo } from "./AboutLogo.tsx"
+import { SocialMediaList } from "./SocialMediaList/SocialMediaList.tsx"
 
 export interface AboutProps {}
 

packages/ui/src/Home/About/AboutDescription.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
-import { Button } from "../../Design/Button/Button"
-import { Typography } from "../../Design/Typography/Typography"
+import { Button } from "../../Design/Button/Button.tsx"
+import { Typography } from "../../Design/Typography/Typography.tsx"
 
 export interface AboutDescriptionProps {}
 

packages/ui/src/Home/About/AboutIntroduction.tsx

@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl"
-import { Typography } from "../../Design/Typography/Typography"
+import { Typography } from "../../Design/Typography/Typography.tsx"
 
 export interface AboutIntroductionProps {}
 

packages/ui/src/Home/About/AboutList/AboutList.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
-import { AboutItem } from "./AboutItem"
-import { BirthDate } from "./BirthDate"
+import { AboutItem } from "./AboutItem.tsx"
+import { BirthDate } from "./BirthDate.tsx"
 
 export interface AboutListProps {}
 

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/EmailIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const EmailIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const GitHubIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/GitLabIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const GitLabIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/NPMIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const NPMIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/TwitchIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const TwitchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/TwitterIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/YouTubeIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const YouTubeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaList.tsx

@@ -1,11 +1,11 @@
-import { EmailIcon } from "./SocialMediaIcons/EmailIcon"
-import { GitHubIcon } from "./SocialMediaIcons/GitHubIcon"
-import { GitLabIcon } from "./SocialMediaIcons/GitLabIcon"
-import { NPMIcon } from "./SocialMediaIcons/NPMIcon"
-import { TwitchIcon } from "./SocialMediaIcons/TwitchIcon"
-import { TwitterIcon } from "./SocialMediaIcons/TwitterIcon"
-import { YouTubeIcon } from "./SocialMediaIcons/YouTubeIcon"
-import { SocialMediaItem } from "./SocialMediaItem"
+import { EmailIcon } from "./SocialMediaIcons/EmailIcon.tsx"
+import { GitHubIcon } from "./SocialMediaIcons/GitHubIcon.tsx"
+import { GitLabIcon } from "./SocialMediaIcons/GitLabIcon.tsx"
+import { NPMIcon } from "./SocialMediaIcons/NPMIcon.tsx"
+import { TwitchIcon } from "./SocialMediaIcons/TwitchIcon.tsx"
+import { TwitterIcon } from "./SocialMediaIcons/TwitterIcon.tsx"
+import { YouTubeIcon } from "./SocialMediaIcons/YouTubeIcon.tsx"
+import { SocialMediaItem } from "./SocialMediaItem.tsx"
 
 export interface SocialMediaListProps {}
 

packages/ui/src/Home/Interests/InterestItem.tsx

@@ -1,4 +1,4 @@
-import { Typography } from "../../Design/Typography/Typography"
+import { Typography } from "../../Design/Typography/Typography.tsx"
 
 export interface InterestItemProps {
   title: string

packages/ui/src/Home/Interests/Interests.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Interests as InterestsComponent } from "./Interests"
+import { Interests as InterestsComponent } from "./Interests.tsx"
 
 const meta = {
   title: "Home/Interests",

packages/ui/src/Home/Interests/Interests.tsx

@@ -1,13 +1,13 @@
 import { GIT_REPO_LINK } from "@repo/utils/constants"
 import { useTranslations } from "next-intl"
 import { FaGit, FaMicrochip } from "react-icons/fa"
-import { Link } from "../../Design/Link/Link"
+import { Link } from "../../Design/Link/Link.tsx"
 import {
   Section,
   SectionContent,
   SectionTitle,
-} from "../../Layout/Section/Section"
-import { InterestItem } from "./InterestItem"
+} from "../../Layout/Section/Section.tsx"
+import { InterestItem } from "./InterestItem.tsx"
 
 export interface InterestsProps {}
 

packages/ui/src/Home/OpenSource/OpenSource.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { OpenSource as OpenSourceComponent } from "./OpenSource"
+import { OpenSource as OpenSourceComponent } from "./OpenSource.tsx"
 
 const meta = {
   title: "Home/OpenSource",

packages/ui/src/Home/OpenSource/OpenSource.tsx

@@ -3,8 +3,8 @@ import {
   Section,
   SectionDescription,
   SectionTitle,
-} from "../../Layout/Section/Section"
-import { Repository } from "./Repository"
+} from "../../Layout/Section/Section.tsx"
+import { Repository } from "./Repository.tsx"
 
 export interface OpenSourceProps {}
 

packages/ui/src/Home/OpenSource/Repository.tsx

@@ -1,6 +1,6 @@
-import { Typography } from "../../Design/Typography/Typography"
-import { SectionContent } from "../../Layout/Section/Section"
-import { GitHubIcon } from "../About/SocialMediaList/SocialMediaIcons/GitHubIcon"
+import { Typography } from "../../Design/Typography/Typography.tsx"
+import { SectionContent } from "../../Layout/Section/Section.tsx"
+import { GitHubIcon } from "../About/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx"
 
 export interface RepositoryProps {
   name: string

packages/ui/src/Home/Portfolio/Portfolio.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Portfolio as PortfolioComponent } from "./Portfolio"
+import { Portfolio as PortfolioComponent } from "./Portfolio.tsx"
 
 const meta = {
   title: "Home/Portfolio",

packages/ui/src/Home/Portfolio/Portfolio.tsx

@@ -1,6 +1,7 @@
 import { useTranslations } from "next-intl"
-import { Section, SectionTitle } from "../../Layout/Section/Section"
-import { PortfolioItem, type PortfolioProject } from "./PortfolioItem"
+import { Section, SectionTitle } from "../../Layout/Section/Section.tsx"
+import type { PortfolioProject } from "./PortfolioItem.tsx"
+import { PortfolioItem } from "./PortfolioItem.tsx"
 
 export interface PortfolioProps {}
 

packages/ui/src/Home/Portfolio/PortfolioItem.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image"
-import { Typography } from "../../Design/Typography/Typography"
-import { SectionContent } from "../../Layout/Section/Section"
+import { Typography } from "../../Design/Typography/Typography.tsx"
+import { SectionContent } from "../../Layout/Section/Section.tsx"
 
 export interface PortfolioProject {
   id: string
@@ -33,7 +33,7 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
           <div className="flex justify-center">
             <Image
               quality={100}
-              className="size-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5"
+              className="size-[300px] transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5"
               width={300}
               height={300}
               src={image}

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

@@ -2,10 +2,10 @@
 
 import Image from "next/image"
 import { useMemo } from "react"
-import { Link } from "../../Design/Link/Link"
-import { useTheme } from "../../Layout/Header/SwitchTheme"
-import type { SkillName } from "./skills"
-import { SKILLS } from "./skills"
+import { Link } from "../../Design/Link/Link.tsx"
+import { useTheme } from "../../Layout/Header/SwitchTheme.tsx"
+import type { SkillName } from "./skills.ts"
+import { SKILLS } from "./skills.ts"
 
 export interface SkillItemProps {
   skillName: SkillName

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Skills as SkillsComponent } from "./Skills"
+import { Skills as SkillsComponent } from "./Skills.tsx"
 
 const meta = {
   title: "Home/Skills",

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

@@ -1,8 +1,8 @@
 import { useTranslations } from "next-intl"
-import { Section, SectionTitle } from "../../Layout/Section/Section"
-import { SkillItem } from "./SkillItem"
-import { SkillsSection } from "./SkillsSection"
-import { SKILL_CATEGORIES, SKILL_NAMES_BY_CATEGORY } from "./skills"
+import { Section, SectionTitle } from "../../Layout/Section/Section.tsx"
+import { SkillItem } from "./SkillItem.tsx"
+import { SkillsSection } from "./SkillsSection.tsx"
+import { SKILL_CATEGORIES, SKILL_NAMES_BY_CATEGORY } from "./skills.ts"
 
 export interface SkillsProps {}
 

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

@@ -1,5 +1,5 @@
-import { Typography } from "../../Design/Typography/Typography"
-import { SectionContent } from "../../Layout/Section/Section"
+import { Typography } from "../../Design/Typography/Typography.tsx"
+import { SectionContent } from "../../Layout/Section/Section.tsx"
 
 export interface SkillsSectionProps extends React.PropsWithChildren {
   title: string

packages/ui/src/Layout/Footer/Footer.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Footer as FooterComponent } from "./Footer"
+import { Footer as FooterComponent } from "./Footer.tsx"
 
 const meta = {
   title: "Layout/Footer",

packages/ui/src/Layout/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import { useTranslations } from "next-intl"
 
 import { GIT_REPO_LINK } from "@repo/utils/constants"
-import { Link } from "../../Design/Link/Link"
+import { Link } from "../../Design/Link/Link.tsx"
 
 export interface FooterProps {
   version: string