style: fix ESLint

chore: config updates
chore: try to fix CI with Playwright
2025-12-12 20:46:52 +01:00 · 2024-10-13 00:00:44 +02:00 · 2024-10-12 23:51:58 +02:00 · 2024-09-12 00:14:58 +02:00 · 2024-09-12 00:05:59 +02:00 · 2024-09-11 23:53:26 +02:00
156 changed files with 4963 additions and 4171 deletions
--- a/.env.example
+++ b/.env.example
@@ -1 +1,2 @@
+TZ=UTC
 WEBSITE_PORT=3000
--- a/.github/workflows/chromatic.yml
+++ b/.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"
--- a/.github/workflows/ci.yml
+++ b/.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"
--- a/.github/workflows/release.yml
+++ b/.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"
--- a/.gitignore
+++ b/.gitignore
@@ -15,7 +15,6 @@ coverage
 out/
 dist/
 build/
-apps/website/public/curriculum-vitae/

 # misc
 .DS_Store
--- a/.npmrc
+++ b/.npmrc
@@ -1 +0,0 @@
-save-exact = true
--- a/.vscode/extensions.json
+++ b/.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"
  ]
 }
--- a/.vscode/react.code-snippets
+++ b/.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}\",",
--- a/.vscode/settings.json
+++ b/.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
 }
--- a/CONTRIBUTING.md
+++ b/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/)
--- a/apps/storybook/.storybook/main.ts
+++ b/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",
--- a/apps/storybook/.storybook/preview.tsx
+++ b/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"
@@ -13,7 +14,7 @@ const preview: Preview = {
    },
    options: {
      storySort: {
-        order: ["Design System", "User Interface", "Errors", "Feature"],
+        order: ["Design System", "Layout", "Errors"],
      },
    },
    backgrounds: { disable: true },
@@ -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>
--- a/apps/storybook/.storybook/test-runner.ts
+++ b/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) {
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -1,21 +1,22 @@
 {
  "name": "@repo/storybook",
-  "version": "4.0.0-staging.1",
+  "version": "4.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "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:",
--- a/apps/storybook/tailwind.config.js
+++ b/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],
 }

--- a/apps/storybook/turbo.json
+++ b/apps/storybook/turbo.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    "test": {
+      "dependsOn": ["^test", "build"]
+    }
+  }
+}
--- a/apps/website/.env.example
+++ b/apps/website/.env.example
@@ -1,3 +1,4 @@
+TZ=UTC
 HOSTNAME=0.0.0.0
 PORT=3000
 NEXT_TELEMETRY_DISABLED=1
--- a/apps/website/.eslintrc.json
+++ b/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
      }
    }
  ]
--- a/apps/website/Dockerfile
+++ b/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.9
 COPY ./ ./
+RUN pnpm install --global turbo@2.1.3
 RUN turbo prune @repo/website --docker

 FROM node-pnpm AS installer
--- a/apps/website/app/[locale]/(main)/blog/[slug]/page.tsx
+++ b/apps/website/app/[locale]/(main)/blog/[slug]/page.tsx
@@ -3,10 +3,13 @@ import { notFound } from "next/navigation"

 import { getBlogPostBySlug, getBlogPosts } from "@repo/blog"
 import { BlogPostUI } from "@repo/blog/BlogPostUI"
+import type { Locale } from "@repo/utils/constants"
+import { unstable_setRequestLocale } from "next-intl/server"

 interface BlogPostPageProps {
  params: {
    slug: string
+    locale: Locale
  }
 }

@@ -47,6 +50,9 @@ export const generateStaticParams = async (): Promise<
 const BlogPostPage: React.FC<BlogPostPageProps> = async (props) => {
  const { params } = props

+  // Enable static rendering
+  unstable_setRequestLocale(params.locale)
+
  const blogPost = await getBlogPostBySlug(params.slug)
  if (blogPost == null) {
    return notFound()
--- a/apps/website/app/[locale]/(main)/blog/page.tsx
+++ b/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/design/Section"
-import { MainLayout } from "@repo/ui/MainLayout"
+} from "@repo/ui/Layout/Section"
+import { LOCALE_DEFAULT } from "@repo/utils/constants"
 import type { Metadata } from "next"
 import { unstable_setRequestLocale } from "next-intl/server"

--- a/apps/website/app/[locale]/(main)/error.tsx
+++ b/apps/website/app/[locale]/(main)/error.tsx
--- a/apps/website/app/[locale]/(main)/layout.tsx
+++ b/apps/website/app/[locale]/(main)/layout.tsx
@@ -0,0 +1,26 @@
+import "@repo/config-tailwind/styles.css"
+import type { LocaleProps } from "@repo/i18n/config"
+import { Footer } from "@repo/ui/Layout/Footer"
+import { Header } from "@repo/ui/Layout/Header"
+import { ThemeProvider } from "@repo/ui/Layout/Header/SwitchTheme"
+import { VERSION } from "@repo/utils/constants"
+import { unstable_setRequestLocale } from "next-intl/server"
+
+interface MainLayoutProps extends React.PropsWithChildren, LocaleProps {}
+
+const MainLayout: React.FC<MainLayoutProps> = async (props) => {
+  const { children, params } = props
+
+  // Enable static rendering
+  unstable_setRequestLocale(params.locale)
+
+  return (
+    <ThemeProvider>
+      <Header />
+      {children}
+      <Footer version={VERSION} />
+    </ThemeProvider>
+  )
+}
+
+export default MainLayout
--- a/apps/website/app/[locale]/(main)/loading.tsx
+++ b/apps/website/app/[locale]/(main)/loading.tsx
@@ -1,5 +1,5 @@
-import { MainLayout } from "@repo/ui/MainLayout"
-import { Spinner } from "@repo/ui/design/Spinner"
+import { Spinner } from "@repo/ui/Design/Spinner"
+import { MainLayout } from "@repo/ui/Layout/MainLayout"

 const Loading: React.FC = () => {
  return (
--- a/apps/website/app/[locale]/(main)/not-found.tsx
+++ b/apps/website/app/[locale]/(main)/not-found.tsx
--- a/apps/website/app/[locale]/(main)/page.tsx
+++ b/apps/website/app/[locale]/(main)/page.tsx
@@ -1,11 +1,11 @@
 import type { LocaleProps } from "@repo/i18n/config"
-import { About } from "@repo/ui/About"
-import { RevealFade } from "@repo/ui/design/Section"
-import { Interests } from "@repo/ui/Interests"
-import { MainLayout } from "@repo/ui/MainLayout"
-import { OpenSource } from "@repo/ui/OpenSource"
-import { Portfolio } from "@repo/ui/Portfolio"
-import { Skills } from "@repo/ui/Skills"
+import { About } from "@repo/ui/Home/About"
+import { Interests } from "@repo/ui/Home/Interests"
+import { OpenSource } from "@repo/ui/Home/OpenSource"
+import { Portfolio } from "@repo/ui/Home/Portfolio"
+import { Skills } from "@repo/ui/Home/Skills"
+import { MainLayout } from "@repo/ui/Layout/MainLayout"
+import { RevealFade } from "@repo/ui/Layout/Section"
 import { unstable_setRequestLocale } from "next-intl/server"

 interface HomePageProps extends LocaleProps {}
--- a/apps/website/app/[locale]/curriculum-vitae/layout.tsx
+++ b/apps/website/app/[locale]/curriculum-vitae/layout.tsx
@@ -0,0 +1,21 @@
+import "@repo/config-tailwind/styles.css"
+import type { LocaleProps } from "@repo/i18n/config"
+import { ThemeProvider } from "@repo/ui/Layout/Header/SwitchTheme"
+import { unstable_setRequestLocale } from "next-intl/server"
+
+interface CurriculumVitaeLayoutProps
+  extends React.PropsWithChildren,
+    LocaleProps {}
+
+const CurriculumVitaeLayout: React.FC<CurriculumVitaeLayoutProps> = async (
+  props,
+) => {
+  const { children, params } = props
+
+  // Enable static rendering
+  unstable_setRequestLocale(params.locale)
+
+  return <ThemeProvider forcedTheme="light">{children}</ThemeProvider>
+}
+
+export default CurriculumVitaeLayout
--- a/apps/website/app/[locale]/curriculum-vitae/page.tsx
+++ b/apps/website/app/[locale]/curriculum-vitae/page.tsx
@@ -0,0 +1,16 @@
+import type { LocaleProps } from "@repo/i18n/config"
+import { CurriculumVitae } from "@repo/ui/CurriculumVitae"
+import { unstable_setRequestLocale } from "next-intl/server"
+
+interface CurriculumVitaeProps extends LocaleProps {}
+
+const CurriculumVitaePage: React.FC<CurriculumVitaeProps> = (props) => {
+  const { params } = props
+
+  // Enable static rendering
+  unstable_setRequestLocale(params.locale)
+
+  return <CurriculumVitae />
+}
+
+export default CurriculumVitaePage
--- a/apps/website/app/[locale]/layout.tsx
+++ b/apps/website/app/[locale]/layout.tsx
@@ -1,10 +1,7 @@
 import "@repo/config-tailwind/styles.css"
-import type { Locale, LocaleProps } from "@repo/i18n/config"
-import { LOCALES } from "@repo/i18n/config"
-import { Footer } from "@repo/ui/Footer"
-import { Header } from "@repo/ui/Header"
-import { ThemeProvider } from "@repo/ui/Header/SwitchTheme"
-import { VERSION } from "@repo/utils/constants"
+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 {
@@ -59,11 +56,7 @@ export const generateStaticParams = (): Array<{ locale: Locale }> => {
  })
 }

-interface LocaleLayoutProps extends React.PropsWithChildren {
-  params: {
-    locale: Locale
-  }
-}
+interface LocaleLayoutProps extends React.PropsWithChildren, LocaleProps {}

 const LocaleLayout: React.FC<LocaleLayoutProps> = async (props) => {
  const { children, params } = props
@@ -76,13 +69,9 @@ const LocaleLayout: React.FC<LocaleLayoutProps> = async (props) => {
  return (
    <html lang={params.locale} suppressHydrationWarning>
      <body>
-        <ThemeProvider>
-          <NextIntlClientProvider messages={messages}>
-            <Header />
-            {children}
-            <Footer version={VERSION} />
-          </NextIntlClientProvider>
-        </ThemeProvider>
+        <NextIntlClientProvider messages={messages}>
+          {children}
+        </NextIntlClientProvider>
      </body>
    </html>
  )
--- a/apps/website/middleware.ts
+++ b/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({
@@ -14,6 +14,8 @@ export const config = {

    // Set a cookie to remember the previous locale for
    // all requests that have a locale prefix
+    // Next.js issue, middleware matcher should support template literals:
+    // https://github.com/vercel/next.js/issues/56398
    "/(en-US|fr-FR)/:path*",

    // Enable redirects that add missing locales
--- a/apps/website/next-env.d.ts
+++ b/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.
--- a/apps/website/next.config.js
+++ b/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"],
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@repo/website",
-  "version": "4.0.0-staging.1",
+  "version": "4.0.0",
  "private": true,
  "type": "module",
  "imports": {
@@ -22,8 +22,7 @@
    "next": "catalog:",
    "next-intl": "catalog:",
    "react": "catalog:",
-    "react-dom": "catalog:",
-    "sharp": "catalog:"
+    "react-dom": "catalog:"
  },
  "devDependencies": {
    "@repo/eslint-config": "workspace:*",
--- a/apps/website/public/curriculum-vitae/index-BFUlhOmZ.css
+++ b/apps/website/public/curriculum-vitae/index-BFUlhOmZ.css
@@ -1 +0,0 @@
-/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:before,:after{box-sizing:border-box}html{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{margin:0}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}body{font-family:Montserrat,Arial,"sans-serif";background:#f0f0f0;color:#333;line-height:1.42857143;font-size:14px}hr{margin-top:15px;margin-bottom:15px;border:0;border-top:1px solid #eee}p{margin:0}strong{font-weight:600}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}.link-disguise,.link-disguise:hover{color:inherit}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.clear-margin{margin:0}.relative{position:relative}.center-block{display:block;margin-right:auto;margin-left:auto}.text-center{text-align:center}.text-muted{color:#777}.text-uppercase{text-transform:uppercase}.list-unstyled{padding-left:0;list-style:none}.main{padding:5px}.title{font-weight:600}.profile-card-wrapper{position:relative}.card-wrapper{float:none!important;padding:5px}.profile-card-wrapper .profile-card{padding:10px}.card{background:#fff;border-radius:3px;padding:10px 0}.profile-pic{padding:10px 0}.profile-pic img{width:100px;height:100px;border-radius:50%;vertical-align:middle;border:0}.contact-details{display:flex;justify-content:center}.contact-details .detail{position:relative;min-height:1px;padding:10px}.social-links{line-height:2.5}.experience-description{margin-top:10px}.background-details .detail{display:table}.background-details .detail .icon,.background-details .detail .info{display:table-cell}.background-details .detail .icon{color:#707070}.background-details .detail .icon{min-width:45px;max-width:45px;text-align:center}.icon img{width:20px;height:20px}.background-details .detail .mobile-title{display:none}.card-nested{min-height:0;border-width:1px 0 0 0}.card-skills{position:relative}.labels{line-height:2}.space-top{margin-top:10px}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:600;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}.label-keyword{display:inline-block;font-size:.9em;padding:5px;border:1px solid #357ebd;margin-right:5px}.label-keyword p{margin:0}.section-separated{display:flex}
--- a/apps/website/public/curriculum-vitae/index-C1jSdDgn.js
+++ b/apps/website/public/curriculum-vitae/index-C1jSdDgn.js
@@ -1 +0,0 @@
-(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const c of t.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&r(c)}).observe(document,{childList:!0,subtree:!0});function s(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function r(e){if(e.ep)return;e.ep=!0;const t=s(e);fetch(e.href,t)}})();const i="31",l="03",u="2003",d=`${u}-${l}-${i}`,f=new Date(d),a=n=>{const o=new Date;let s=o.getFullYear()-n.getFullYear();const r=o.getMonth()-n.getMonth();return(r<0||r===0&&o.getDate()<n.getDate())&&s--,s},g=document.getElementById("year-old");g.textContent=a(f).toString();
--- a/apps/website/public/curriculum-vitae/index.html
+++ b/apps/website/public/curriculum-vitae/index.html
--- a/apps/website/tailwind.config.js
+++ b/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],
 }

--- a/apps/website/tsconfig.json
+++ b/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": {
      "#*": ["./*"]
    },
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
  "name": "repo",
-  "version": "4.0.0-staging.1",
+  "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.9",
+    "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:"
  }
 }
--- a/packages/blog/.eslintrc.json
+++ b/packages/blog/.eslintrc.json
@@ -7,7 +7,7 @@
      "plugins": ["@typescript-eslint"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
-        "project": true
+        "projectService": true
      }
    }
  ]
--- a/packages/blog/package.json
+++ b/packages/blog/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@repo/blog",
-  "version": "4.0.0-staging.1",
+  "version": "4.0.0",
  "private": true,
  "type": "module",
  "exports": {
--- a/packages/blog/src/BlogPostComments.tsx
+++ b/packages/blog/src/BlogPostComments.tsx
@@ -1,7 +1,7 @@
 "use client"

 import Giscus from "@giscus/react"
-import { useTheme } from "@repo/ui/Header/SwitchTheme"
+import { useTheme } from "@repo/ui/Layout/Header/SwitchTheme"

 interface BlogPostCommentsProps {}

--- a/packages/blog/src/BlogPostContent.tsx
+++ b/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<
--- a/packages/blog/src/BlogPostUI.tsx
+++ b/packages/blog/src/BlogPostUI.tsx
@@ -1,10 +1,10 @@
 import { getISODate } from "@repo/utils/dates"
 import "katex/dist/katex.min.css"

-import { Typography } from "@repo/ui/design/Typography"
-import { MainLayout } from "@repo/ui/MainLayout"
-import type { BlogPost } from "./BlogPost"
-import { BlogPostContent } from "./BlogPostContent"
+import { Typography } from "@repo/ui/Design/Typography"
+import { MainLayout } from "@repo/ui/Layout/MainLayout"
+import type { BlogPost } from "./BlogPost.tsx"
+import { BlogPostContent } from "./BlogPostContent.tsx"

 export interface BlogPostUIProps {
  blogPost: BlogPost
--- a/packages/blog/src/BlogPosts.tsx
+++ b/packages/blog/src/BlogPosts.tsx
@@ -1,8 +1,8 @@
 import { Link } from "@repo/i18n/navigation"
-import { Section, SectionContent } from "@repo/ui/design/Section"
-import { Typography } from "@repo/ui/design/Typography"
+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[]
--- a/packages/blog/src/blog.ts
+++ b/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(),
--- a/packages/blog/src/stories/BlogPostUI.stories.tsx
+++ b/packages/blog/src/stories/BlogPostUI.stories.tsx
@@ -1,10 +1,10 @@
 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: "Feature/Blog/BlogPostUI",
+  title: "Blog/BlogPostUI",
  component: BlogPostUIComponent,
 } satisfies Meta<typeof BlogPostUIComponent>

--- a/packages/blog/src/stories/BlogPosts.stories.tsx
+++ b/packages/blog/src/stories/BlogPosts.stories.tsx
@@ -1,10 +1,10 @@
 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: "Feature/Blog/BlogPosts",
+  title: "Blog/BlogPosts",
  component: BlogPostsComponent,
 } satisfies Meta<typeof BlogPostsComponent>

--- a/packages/blog/tsconfig.json
+++ b/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"
+    ]
  }
 }
--- a/packages/config-eslint/.eslintrc.json
+++ b/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"]
+  }
 }
--- a/packages/config-eslint/nextjs/.eslintrc.json
+++ b/packages/config-eslint/nextjs/.eslintrc.json
@@ -1,6 +1,6 @@
 {
  "extends": [
-    "conventions",
+    "../.eslintrc.json",
    "next/core-web-vitals",
    "plugin:tailwindcss/recommended",
    "plugin:storybook/recommended"
--- a/packages/config-eslint/package.json
+++ b/packages/config-eslint/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@repo/eslint-config",
-  "version": "4.0.0-staging.1",
+  "version": "4.0.0",
  "private": true,
  "main": ".eslintrc.json",
  "files": [
@@ -17,6 +17,7 @@
    "eslint-config-next": "catalog:",
    "eslint-plugin-storybook": "catalog:",
    "eslint-plugin-tailwindcss": "catalog:",
+    "eslint-plugin-import-x": "catalog:",
    "typescript": "catalog:"
  }
 }
--- a/packages/config-tailwind/.eslintrc.json
+++ b/packages/config-tailwind/.eslintrc.json
@@ -7,7 +7,7 @@
      "plugins": ["@typescript-eslint"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
-        "project": true
+        "projectService": true
      }
    }
  ]
--- a/packages/config-tailwind/package.json
+++ b/packages/config-tailwind/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@repo/config-tailwind",
-  "version": "4.0.0-staging.1",
+  "version": "4.0.0",
  "private": true,
  "type": "module",
  "main": "./tailwind.config.js",
--- a/packages/config-tailwind/styles.css
+++ b/packages/config-tailwind/styles.css
@@ -160,3 +160,144 @@ code .line:last-child {
  white-space: normal !important;
  width: 100% !important;
 }
+
+.curriculum-vitae {
+  background: #f0f0f0;
+  color: #333;
+  font-family: Arial, sans-serif;
+
+  hr {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    border: 0;
+    border-top: 1px solid #eee;
+  }
+  a {
+    color: #337ab7;
+    text-decoration: none;
+  }
+  a:focus,
+  a:hover {
+    color: #23527c;
+    text-decoration: underline;
+  }
+  .link-disguise {
+    color: inherit;
+  }
+  .link-disguise:hover {
+    color: inherit;
+  }
+  .h1,
+  .h2,
+  .h3 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+  .h4,
+  .h5,
+  .h6 {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    font-family: inherit;
+    line-height: 1.1;
+    color: inherit;
+  }
+  .h3 {
+    font-size: 24px;
+  }
+  .h4 {
+    font-size: 18px;
+  }
+  .h5 {
+    font-size: 14px;
+  }
+  .text-muted {
+    color: #414141;
+  }
+  .list-unstyled {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  .card-wrapper {
+    float: none !important;
+    padding: 5px;
+  }
+
+  .card {
+    background: white;
+    border-radius: 3px;
+    padding: 10px 0;
+  }
+  .profile-pic {
+    padding: 10px 0;
+  }
+  .profile-pic img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    vertical-align: middle;
+    border: 0;
+  }
+  .social-links {
+    line-height: 2.5;
+  }
+
+  .background-details .detail {
+    display: table;
+  }
+  .background-details .detail .icon,
+  .background-details .detail .info {
+    display: table-cell;
+  }
+  .background-details .detail .icon {
+    color: #707070;
+  }
+  .background-details .detail .icon {
+    min-width: 45px;
+    max-width: 45px;
+    text-align: center;
+  }
+  .icon img {
+    width: 20px;
+    height: 20px;
+  }
+  .background-details .detail .mobile-title {
+    display: none;
+  }
+  .card-nested {
+    min-height: 0;
+  }
+
+  .labels {
+    line-height: 2;
+  }
+  .label {
+    display: inline;
+    padding: 0.2em 0.6em 0.3em;
+    font-size: 75%;
+    font-weight: 600;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25em;
+  }
+  .label-keyword {
+    display: inline-block;
+    font-size: 0.9em;
+    padding: 5px;
+    border: 1px solid #357ebd;
+    margin-right: 5px;
+  }
+  .label-keyword p {
+    margin: 0;
+  }
+}
--- a/packages/config-tailwind/tsconfig.json
+++ b/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"]
  }
 }
--- a/packages/config-typescript/package.json
+++ b/packages/config-typescript/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@repo/config-typescript",
-  "version": "4.0.0-staging.1",
+  "version": "4.0.0",
  "private": true,
  "files": [
    "tsconfig.json"
--- a/packages/config-typescript/tsconfig.json
+++ b/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
  }
 }
--- a/packages/i18n/.eslintrc.json
+++ b/packages/i18n/.eslintrc.json
@@ -7,7 +7,7 @@
      "plugins": ["@typescript-eslint"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
-        "project": true
+        "projectService": true
      }
    }
  ]
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@repo/i18n",
-  "version": "4.0.0-staging.1",
+  "version": "4.0.0",
  "private": true,
  "type": "module",
  "exports": {
@@ -12,9 +12,11 @@
  },
  "scripts": {
    "lint:eslint": "eslint src --max-warnings 0 --report-unused-disable-directives",
-    "lint:typescript": "tsc --noEmit"
+    "lint:typescript": "tsc --noEmit",
+    "test": "vitest run"
  },
  "dependencies": {
+    "@repo/utils": "workspace:*",
    "deepmerge": "catalog:",
    "next": "catalog:",
    "next-intl": "catalog:",
@@ -28,6 +30,7 @@
    "@types/react-dom": "catalog:",
    "@total-typescript/ts-reset": "catalog:",
    "eslint": "catalog:",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vitest": "catalog:"
  }
 }
--- a/packages/i18n/src/config.tsx
+++ b/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
--- a/packages/i18n/src/i18n.ts
+++ b/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)) {
--- a/packages/i18n/src/navigation.ts
+++ b/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({
--- a/packages/i18n/src/tests/translations.test-d.ts
+++ b/packages/i18n/src/tests/translations.test-d.ts
@@ -0,0 +1,7 @@
+import { expectTypeOf, test } from "vitest"
+import en from "../translations/en-US.json"
+import fr from "../translations/fr-FR.json"
+
+test("translations types should match", () => {
+  expectTypeOf(en).toEqualTypeOf(fr)
+})
--- a/packages/i18n/src/translations/curriculum-vitae.fr-FR.legacy.jsonc
+++ b/packages/i18n/src/translations/curriculum-vitae.fr-FR.legacy.jsonc
@@ -0,0 +1,181 @@
+{
+  "$schema": "https://raw.githubusercontent.com/jsonresume/resume-schema/v1.0.0/schema.json",
+  "basics": {
+    "name": "Théo LUDWIG",
+    "label": "Développeur Full Stack • Étudiant",
+    "image": "https://theoludwig.fr/images/logo_background.png",
+    "email": "contact@theoludwig.fr",
+    "age": "31/03/2003",
+    "location": {
+      "address": "Alsace, France",
+    },
+    "url": "https://theoludwig.fr",
+    "summary": "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 /> 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.",
+  },
+  "education": [
+    {
+      "startDate": "2023",
+      "endDate": "2024",
+      "studyType": "Bachelor Universitaire de Technologie (BUT) Informatique",
+      "institution": "IUT Robert Schuman à Illkirch-Graffenstaden",
+      "score": "3ème année",
+      "courses": [
+        "Développement Web en Node.js et React.js",
+        "Intégration/Déploiement Continue et Docker",
+        "Complexité Algorithmique Théorique et Pratique en C++",
+        // "Projet développement LLM (Large Language Model) et NLP (Natural Language Processing)",
+        "Base de données NoSQL (Redis, MongoDB, Cassandra)",
+      ],
+    },
+    {
+      "startDate": "2022",
+      "endDate": "2023",
+      "studyType": "Bachelor Universitaire de Technologie (BUT) Informatique",
+      "institution": "IUT Robert Schuman à Illkirch-Graffenstaden",
+      "score": "2ème année",
+      "courses": [
+        "Développement Web avec le framework Laravel en PHP",
+        "Qualité de développement et Tests automatisés",
+        "Patrons et Principes de conceptions (Code maintenable et réutilisable) en UML",
+        "Programmation systèmes en C (Multi-Thread, Serveur/Client UDP/TCP)",
+        "Sécurisation des accès à la base de données et PL/SQL",
+      ],
+    },
+    {
+      "startDate": "2021",
+      "endDate": "2022",
+      "studyType": "Bachelor Universitaire de Technologie (BUT) Informatique",
+      "institution": "IUT Robert Schuman à Illkirch-Graffenstaden",
+      "score": "1ère année",
+      "courses": [
+        "Développement Orientée Objet en Java",
+        "Programmation systèmes en C (Allocation mémoire, Pointeurs, Structures)",
+        "Développement d'application Windows Forms (.NET Framework) en C#",
+        "Base de données relationnelles et langage SQL",
+      ],
+    },
+    {
+      "startDate": "2019",
+      "endDate": "2021",
+      "studyType": "Baccalauréat Général (Mathématiques et Numériques Sciences Informatiques)",
+      "institution": "Lycée Heinrich Nessel à Haguenau",
+      "score": "Mention Assez Bien",
+    },
+    // {
+    //   "startDate": "2014",
+    //   "endDate": "2018",
+    //   "studyType": "Diplôme national du brevet",
+    //   "institution": "Collège Gustave Doré à Hochfelden",
+    //   "score": "Mention Bien"
+    // }
+  ],
+  "work": [
+    {
+      "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.",
+      "website": "https://ircad.fr/",
+      "name": "IRCAD",
+      "location": "1 Place de l'Hôpital, 67000 Strasbourg",
+      "position": "Alternant Développeur Web Full Stack",
+      "startDate": "2023-08-28",
+      "endDate": "2024-09-02",
+      "duration": "1 an",
+    },
+    {
+      "summary": "Développement d'un outil GED (Gestion Électronique de Documents) en React.js, Laravel et GraphQL.",
+      "website": "https://numerize.com/",
+      "name": "Numerize",
+      "location": "4 Rue Sophie Germain, 67720 Hœrdt",
+      "position": "Stagiaire Développeur Web Full Stack",
+      "startDate": "2023-04-11",
+      "endDate": "2023-07-26",
+      "duration": "4 mois",
+    },
+    // {
+    //   "summary": "Agent administratif - Numérisation et archivage des plans électriques initialement sous format papier calque.",
+    //   "website": "https://www.es.fr/",
+    //   "name": "ÉS (Électricité de Strasbourg)",
+    //   "location": "5 Rue André Marie Ampère, 67450 Mundolsheim",
+    //   "position": "Emploi d'été en qualité d'agent administratif",
+    //   "startDate": "2021-07-07",
+    //   "endDate": "2021-07-30",
+    //   "duration": "1 mois"
+    // },
+    {
+      "summary": "Développement d'un site web pour trouver un restaurant à la pause repas.",
+      "website": "https://itpartners.fr/",
+      "name": "Tribe | IT Partners",
+      "location": "16 Rue du Parc, 67205 Oberhausbergen",
+      "position": "Stage initiation métier développeur web",
+      "startDate": "2019-06-17",
+      "endDate": "2019-06-21",
+      "duration": "1 semaine",
+    },
+    {
+      "description": "interests",
+      "summary": "Développement site web en React.js et Strapi.<br /> Classé n°1 en France sur le Défi de l'entreprise <a href=\"https://toolpad.fr/\">ToolPad</a>.",
+      "website": "https://nuitdelinfo.com/",
+      "name": "La Nuit de l'info 2021",
+      "position": "Participation en équipe de 5 personnes",
+      "startDate": "2021-12-02",
+      "endDate": "2021-12-03",
+      "duration": "1 semaine",
+    },
+    {
+      "description": "interests",
+      "summary": "Hackathon développement d'une landing page et web scraping.",
+      "website": "https://wildcodeschool.fr/",
+      "name": "Wild Code School",
+      "location": "32 Rue du Bass. d'Austerlitz, 67100 Strasbourg",
+      "position": "Initiation métier Développeur web",
+      "startDate": "2019-06-24",
+      "endDate": "2019-06-28",
+      "duration": "1 semaine",
+    },
+    // {
+    //   "summary": "Apprentissage du métier \"Chargé de communication\" et des logiciels de graphisme tels que \"Adobe Photoshop\".",
+    //   "website": "https://es.fr/",
+    //   "name": "ÉS (Électricité de Strasbourg)",
+    //   "location": "26 Bd du Président-Wilson, 67000 Strasbourg",
+    //   "position": "Stage de découverte (3ème)",
+    //   "startDate": "2018-02-19",
+    //   "endDate": "2018-02-23",
+    //   "duration": "1 semaine"
+    // }
+  ],
+  "interests": [
+    {
+      "name": "Enthousiaste de l'Open-Source",
+    },
+    {
+      "name": "Passionné de High-Tech",
+    },
+  ],
+  "skills": [
+    {
+      "keywords": ["JavaScript/TypeScript", "Python", "C/C++", "PHP"],
+      "name": "Langages de programmation",
+    },
+    {
+      "keywords": ["HTML", "CSS", "Tailwind CSS", "React.js/Next.js"],
+      "name": "Frontend",
+    },
+    {
+      "keywords": ["Laravel", "Node.js", "Fastify", "PostgreSQL"],
+      "name": "Backend",
+    },
+    {
+      "keywords": [
+        "GNU/Linux",
+        "Arch Linux",
+        "Visual Studio Code",
+        "Git",
+        "Docker",
+      ],
+      "name": "Logiciels et outils",
+    },
+    {
+      "keywords": ["Permis B", "Anglais"],
+      "name": "Autres",
+    },
+  ],
+}
--- a/packages/i18n/src/translations/en-US.json
+++ b/packages/i18n/src/translations/en-US.json
@@ -1,75 +1,162 @@
 {
-  "meta": {
-    "title": "Théo LUDWIG",
-    "description": "Developer Full Stack • Open-Source Enthusiast"
+  "curriculum-vitae": {
+    "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.",
+      "title": "About"
+    },
+    "description": "Developer Full Stack • Student",
+    "education": {
+      "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": {
+          "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#"
+            },
+            "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": {
+        "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": {
+      "ircad": {
+        "duration": "4 ans",
+        "position": "Full Stack Web Developer Apprentice",
+        "summary": "Development of WebSurg, a virtual university dedicated to medical-surgical training, in React.js/Next.js and API Platform with Symfony."
+      },
+      "numerize": {
+        "duration": "4 months",
+        "position": "Full Stack Web Developer Intern",
+        "summary": "Development of an DMS (Document Management System) tool in React.js, Laravel and GraphQL."
+      },
+      "title": "Work experiences"
+    }
  },
-  "locales": {
-    "en-US": "English",
-    "fr-FR": "French"
+  "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"
  },
-  "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)"
      },
+      "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"
      },
-      "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>."
+      "pronouns": {
+        "label": "Pronouns",
+        "value": "He/Him"
+      }
    },
    "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."
+        "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": {
-        "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"
-    },
-    "portfolio": {
-      "title": "Portfolio",
-      "carolo": {
-        "title": "Carolo",
-        "description": "Strategy board game similar to chess which allows grandiose moves (only available in French)."
+        "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"
      },
-      "leon": {
-        "title": "Leon",
-        "description": "Leon is your open-source personal assistant."
-      }
+      "title": "Interests"
    },
    "open-source": {
-      "title": "Open-Source",
-      "description": "Most famous open source projects I contributed to."
+      "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"
  }
 }
--- a/packages/i18n/src/translations/fr-FR.json
+++ b/packages/i18n/src/translations/fr-FR.json
@@ -1,75 +1,162 @@
 {
-  "meta": {
-    "title": "Théo LUDWIG",
-    "description": "Développeur Full Stack • Enthousiaste de l'Open-Source"
+  "curriculum-vitae": {
+    "about": {
+      "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": {
+      "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": {
+          "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#"
+            },
+            "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": {
+        "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": {
+      "ircad": {
+        "duration": "4 ans",
+        "position": "Apprenti Développeur Web Full Stack",
+        "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": {
+        "duration": "4 mois",
+        "position": "Stagiaire Développeur Web Full Stack",
+        "summary": "Développement d'un outil GED (Gestion Électronique de Documents) en React.js, Laravel et GraphQL."
+      },
+      "title": "Expériences professionnelles"
+    }
  },
-  "locales": {
-    "en-US": "Anglais",
-    "fr-FR": "Français"
+  "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"
  },
-  "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)"
      },
+      "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"
      },
-      "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>."
+      "pronouns": {
+        "label": "Pronoms",
+        "value": "Il/Lui"
+      }
    },
    "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."
+        "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": {
-        "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"
-    },
-    "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."
+        "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"
      },
-      "leon": {
-        "title": "Leon",
-        "description": "Leon est votre assistant personnel open source."
-      }
+      "title": "Intérêts"
    },
    "open-source": {
-      "title": "Open-Source",
-      "description": "Projets open source les plus célèbres auxquels j'ai contribué."
+      "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"
  }
 }
--- a/packages/i18n/tsconfig.json
+++ b/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"]
  }
 }
--- a/packages/i18n/vitest.config.ts
+++ b/packages/i18n/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config"
+
+export default defineConfig({
+  test: {
+    typecheck: {
+      enabled: true,
+    },
+  },
+})
--- a/packages/react-hooks/.eslintrc.json
+++ b/packages/react-hooks/.eslintrc.json
@@ -7,7 +7,7 @@
      "plugins": ["@typescript-eslint"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
-        "project": true
+        "projectService": true
      }
    }
  ]
--- a/packages/react-hooks/package.json
+++ b/packages/react-hooks/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@repo/react-hooks",
-  "version": "4.0.0-staging.1",
+  "version": "4.0.0",
  "private": true,
  "type": "module",
  "exports": {
--- a/packages/react-hooks/src/tests/useBoolean.test.ts
+++ b/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]
--- a/packages/react-hooks/src/tests/useIsMounted.test.ts
+++ b/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", () => {
--- a/packages/react-hooks/tsconfig.json
+++ b/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"]
  }
 }
--- a/packages/ui/.eslintrc.json
+++ b/packages/ui/.eslintrc.json
@@ -7,7 +7,7 @@
      "plugins": ["@typescript-eslint"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
-        "project": true
+        "projectService": true
      }
    }
  ]
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,25 +1,26 @@
 {
  "name": "@repo/ui",
-  "version": "4.0.0-staging.1",
+  "version": "4.0.0",
  "private": true,
  "type": "module",
  "exports": {
-    "./About": "./src/About/About.tsx",
-    "./design/Button": "./src/design/Button/Button.tsx",
-    "./design/Link": "./src/design/Link/Link.tsx",
-    "./design/Section": "./src/design/Section/Section.tsx",
-    "./design/Spinner": "./src/design/Spinner/Spinner.tsx",
-    "./design/Typography": "./src/design/Typography/Typography.tsx",
+    "./CurriculumVitae": "./src/CurriculumVitae/CurriculumVitae.tsx",
+    "./Design/Button": "./src/Design/Button/Button.tsx",
+    "./Design/Link": "./src/Design/Link/Link.tsx",
+    "./Design/Spinner": "./src/Design/Spinner/Spinner.tsx",
+    "./Design/Typography": "./src/Design/Typography/Typography.tsx",
    "./Errors/ErrorNotFound": "./src/Errors/ErrorNotFound/ErrorNotFound.tsx",
    "./Errors/ErrorServer": "./src/Errors/ErrorServer/ErrorServer.tsx",
-    "./Footer": "./src/Footer/Footer.tsx",
-    "./Header": "./src/Header/Header.tsx",
-    "./Interests": "./src/Interests/Interests.tsx",
-    "./Header/SwitchTheme": "./src/Header/SwitchTheme.tsx",
-    "./MainLayout": "./src/MainLayout/MainLayout.tsx",
-    "./OpenSource": "./src/OpenSource/OpenSource.tsx",
-    "./Portfolio": "./src/Portfolio/Portfolio.tsx",
-    "./Skills": "./src/Skills/Skills.tsx"
+    "./Home/About": "./src/Home/About/About.tsx",
+    "./Home/Interests": "./src/Home/Interests/Interests.tsx",
+    "./Home/OpenSource": "./src/Home/OpenSource/OpenSource.tsx",
+    "./Home/Portfolio": "./src/Home/Portfolio/Portfolio.tsx",
+    "./Home/Skills": "./src/Home/Skills/Skills.tsx",
+    "./Layout/Footer": "./src/Layout/Footer/Footer.tsx",
+    "./Layout/Header": "./src/Layout/Header/Header.tsx",
+    "./Layout/Header/SwitchTheme": "./src/Layout/Header/SwitchTheme.tsx",
+    "./Layout/MainLayout": "./src/Layout/MainLayout/MainLayout.tsx",
+    "./Layout/Section": "./src/Layout/Section/Section.tsx"
  },
  "scripts": {
    "lint:eslint": "eslint src --max-warnings 0 --report-unused-disable-directives",
--- a/packages/ui/src/About/AboutList/AboutItemBirthDate.tsx
+++ b/packages/ui/src/About/AboutList/AboutItemBirthDate.tsx
@@ -1,27 +0,0 @@
-"use client"
-
-import { BIRTH_DATE } from "@repo/utils/constants"
-import { getAge, getISODate } from "@repo/utils/dates"
-import { useTranslations } from "next-intl"
-import { useMemo } from "react"
-import { AboutItem } from "./AboutItem"
-
-export interface AboutItemBirthDateProps {}
-
-export const AboutItemBirthDate: React.FC<AboutItemBirthDateProps> = () => {
-  const t = useTranslations()
-
-  const age = useMemo(() => {
-    return getAge(BIRTH_DATE)
-  }, [])
-
-  return (
-    <AboutItem
-      label={t("home.about.birth-date.label")}
-      value={t("home.about.birth-date.value", {
-        age,
-        birthDate: getISODate(BIRTH_DATE),
-      })}
-    />
-  )
-}
--- a/packages/ui/src/CurriculumVitae/CurriculumVitae.stories.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitae.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { CurriculumVitae as CurriculumVitaeComponent } from "./CurriculumVitae.tsx"
+
+const meta = {
+  title: "Curriculum Vitae/CurriculumVitae",
+  component: CurriculumVitaeComponent,
+} satisfies Meta<typeof CurriculumVitaeComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const CurriculumVitae: Story = {
+  args: {},
+}
--- a/packages/ui/src/CurriculumVitae/CurriculumVitae.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitae.tsx
@@ -0,0 +1,40 @@
+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 {}
+
+export const CurriculumVitae: React.FC<CurriculumVitaeProps> = () => {
+  return (
+    <main className="curriculum-vitae mx-auto px-4 text-sm">
+      <div className="-mx-4 p-2">
+        <section className="col-md-3 card-wrapper relative">
+          <CurriculumVitaeProfile />
+
+          <div className="card background-card">
+            <div className="background-details">
+              <CurriculumVitaeAbout />
+
+              <hr />
+
+              <section className="flex">
+                <CurriculumVitaeEducation />
+                <CurriculumVitaeSkills />
+              </section>
+
+              <hr />
+
+              <section className="flex">
+                <CurriculumVitaeWork />
+                <CurriculumVitaeInterests />
+              </section>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  )
+}
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeAbout.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeAbout.tsx
@@ -0,0 +1,19 @@
+import { useTranslations } from "next-intl"
+import { FaUser } from "react-icons/fa"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
+
+export interface CurriculumVitaeAboutProps {}
+
+export const CurriculumVitaeAbout: React.FC<CurriculumVitaeAboutProps> = () => {
+  const t = useTranslations()
+
+  return (
+    <CurriculumVitaeSection
+      id="about"
+      title={t("curriculum-vitae.about.title")}
+      icon={<FaUser size={24} />}
+    >
+      <p>{t.rich("curriculum-vitae.about.description")}</p>
+    </CurriculumVitaeSection>
+  )
+}
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeEducation.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeEducation.tsx
@@ -0,0 +1,117 @@
+import { useTranslations } from "next-intl"
+import { FaGraduationCap } from "react-icons/fa"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
+
+export interface CurriculumVitaeEducationProps {}
+
+export const CurriculumVitaeEducation: React.FC<
+  CurriculumVitaeEducationProps
+> = () => {
+  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"),
+      institution: t("curriculum-vitae.education.iut.institution"),
+      score: t("curriculum-vitae.education.iut.years.2023-2024.description"),
+      courses: [
+        t("curriculum-vitae.education.iut.years.2023-2024.courses.web"),
+        t("curriculum-vitae.education.iut.years.2023-2024.courses.ci-cd"),
+        t(
+          "curriculum-vitae.education.iut.years.2023-2024.courses.complexity-algorithms",
+        ),
+        t("curriculum-vitae.education.iut.years.2023-2024.courses.no-sql"),
+      ],
+    },
+    {
+      years: t("curriculum-vitae.education.iut.years.2022-2023.title"),
+      studyType: t("curriculum-vitae.education.iut.study-type"),
+      institution: t("curriculum-vitae.education.iut.institution"),
+      score: t("curriculum-vitae.education.iut.years.2022-2023.description"),
+      courses: [
+        t("curriculum-vitae.education.iut.years.2022-2023.courses.web"),
+        t("curriculum-vitae.education.iut.years.2022-2023.courses.tests"),
+        t("curriculum-vitae.education.iut.years.2022-2023.courses.clean-code"),
+        t("curriculum-vitae.education.iut.years.2022-2023.courses.systems-c"),
+        t(
+          "curriculum-vitae.education.iut.years.2022-2023.courses.sql-security",
+        ),
+      ],
+    },
+    {
+      years: t("curriculum-vitae.education.iut.years.2021-2022.title"),
+      studyType: t("curriculum-vitae.education.iut.study-type"),
+      institution: t("curriculum-vitae.education.iut.institution"),
+      score: t("curriculum-vitae.education.iut.years.2021-2022.description"),
+      courses: [
+        t("curriculum-vitae.education.iut.years.2021-2022.courses.java"),
+        t("curriculum-vitae.education.iut.years.2021-2022.courses.systems-c"),
+        t(
+          "curriculum-vitae.education.iut.years.2021-2022.courses.windows-forms",
+        ),
+        t("curriculum-vitae.education.iut.years.2021-2022.courses.sql"),
+      ],
+    },
+    {
+      years: t("curriculum-vitae.education.lycee.years.2019-2021.title"),
+      studyType: t("curriculum-vitae.education.lycee.study-type"),
+      institution: t("curriculum-vitae.education.lycee.institution"),
+      score: t("curriculum-vitae.education.lycee.score"),
+      courses: [],
+    },
+  ]
+
+  return (
+    <CurriculumVitaeSection
+      id="education"
+      title={t("curriculum-vitae.education.title")}
+      icon={<FaGraduationCap size={24} />}
+    >
+      <ul className="list-unstyled m-0">
+        {educations.map((education) => {
+          return (
+            <li key={education.years} className="card card-nested">
+              <div className="content">
+                <p className="relative m-0">
+                  <strong>{education.studyType}</strong>
+                </p>
+
+                <p className="relative m-0">
+                  <strong>{education.score}</strong>
+                </p>
+
+                <p className="text-muted m-0">{education.institution}</p>
+
+                <p className="text-muted m-0">
+                  <small>{education.years}</small>
+                </p>
+
+                {education.courses.length > 0 ? (
+                  <ul
+                    style={{
+                      paddingInlineStart: 20,
+                    }}
+                  >
+                    {education.courses.map((course) => {
+                      return <li key={course}>{course}</li>
+                    })}
+                  </ul>
+                ) : (
+                  <></>
+                )}
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+    </CurriculumVitaeSection>
+  )
+}
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeInterests.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeInterests.tsx
@@ -0,0 +1,36 @@
+import { useTranslations } from "next-intl"
+import { FaHeart } from "react-icons/fa"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
+
+export interface CurriculumVitaeInterestsProps {}
+
+export const CurriculumVitaeInterests: React.FC<
+  CurriculumVitaeInterestsProps
+> = () => {
+  const t = useTranslations()
+
+  const interests = [
+    t("curriculum-vitae.interests.open-source"),
+    t("curriculum-vitae.interests.high-tech"),
+  ]
+
+  return (
+    <CurriculumVitaeSection
+      id="interests"
+      title={t("home.interests.title")}
+      icon={<FaHeart size={24} />}
+    >
+      <ul className="list-unstyled m-0">
+        {interests.map((interest) => {
+          return (
+            <li key={interest} className="card card-nested">
+              <p>
+                <strong>{interest}</strong>
+              </p>
+            </li>
+          )
+        })}
+      </ul>
+    </CurriculumVitaeSection>
+  )
+}
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx
@@ -0,0 +1,59 @@
+import { Link } from "@repo/i18n/navigation"
+import { useTranslations } from "next-intl"
+import Image from "next/image"
+import { BirthDate } from "../Home/About/AboutList/BirthDate.tsx"
+import { Locales } from "../Layout/Header/Locales/Locales.tsx"
+
+export interface CurriculumVitaeProfileProps {}
+
+export const CurriculumVitaeProfile: React.FC<
+  CurriculumVitaeProfileProps
+> = () => {
+  const t = useTranslations()
+
+  return (
+    <div className="card p-2">
+      <div className="mx-2 flex print:hidden">
+        <Locales />
+      </div>
+      <div className="profile-pic-container">
+        <div className="profile-pic">
+          <Image
+            className="mx-auto block"
+            alt={t("meta.title")}
+            src="/images/logo_background.webp"
+            width={800}
+            height={800}
+          />
+        </div>
+        <div className="name-and-profession text-center">
+          <h1 className="h3">
+            <strong>{t("meta.title")}</strong>
+          </h1>
+          <h2 className="text-muted h5">{t("curriculum-vitae.description")}</h2>
+          <h2 className="text-muted h5">
+            <BirthDate />
+          </h2>
+          <h2 className="text-muted h5">{t("home.about.nationality.value")}</h2>
+        </div>
+      </div>
+      <div className="flex justify-center">
+        <div className="relative px-3">
+          <span className="info">
+            <a className="link-disguise" href="mailto:contact@theoludwig.fr">
+              contact@theoludwig.fr
+            </a>
+          </span>
+        </div>
+        <div className="detail">
+          <span className="info">
+            <Link className="link-disguise" href="/">
+              https://theoludwig.fr/
+            </Link>
+          </span>
+        </div>
+      </div>
+      <hr />
+    </div>
+  )
+}
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeSection.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeSection.tsx
@@ -0,0 +1,23 @@
+export interface CurriculumVitaeSectionProps extends React.PropsWithChildren {
+  id: string
+  icon: React.ReactNode
+  title: string
+}
+
+export const CurriculumVitaeSection: React.FC<CurriculumVitaeSectionProps> = (
+  props,
+) => {
+  const { id, icon, title, children } = props
+
+  return (
+    <section className="detail" id={id}>
+      <div className="icon">{icon}</div>
+
+      <div className="info">
+        <h2 className="h4 font-semibold uppercase">{title}</h2>
+
+        <div className="content">{children}</div>
+      </div>
+    </section>
+  )
+}
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeSkills.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeSkills.tsx
@@ -0,0 +1,59 @@
+import { useTranslations } from "next-intl"
+import { FaToolbox } from "react-icons/fa"
+import {
+  SKILL_CATEGORIES,
+  SKILL_NAMES_BY_CATEGORY,
+} from "../Home/Skills/skills.ts"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
+
+export interface CurriculumVitaeSkillsProps {}
+
+export const CurriculumVitaeSkills: React.FC<
+  CurriculumVitaeSkillsProps
+> = () => {
+  const t = useTranslations()
+
+  const skills = [
+    ...SKILL_CATEGORIES.map((category) => {
+      const skillNames = SKILL_NAMES_BY_CATEGORY[category]
+      return {
+        category,
+        skillNames,
+      }
+    }),
+    {
+      category: "others",
+      skillNames: [t("locales.en-US"), t("home.skills.driving-license")],
+    },
+  ] as const
+
+  return (
+    <CurriculumVitaeSection
+      id="skills"
+      title={t("home.skills.title")}
+      icon={<FaToolbox size={24} />}
+    >
+      <ul className="list-unstyled m-0">
+        {skills.map(({ category, skillNames }) => {
+          return (
+            <li key={category} className="card card-nested relative">
+              <div className="skill-info">
+                <strong>{t(`home.skills.${category}`)}</strong>
+
+                <div className="labels mt-2">
+                  {skillNames.map((skillName) => {
+                    return (
+                      <p key={skillName} className="label label-keyword">
+                        {skillName}
+                      </p>
+                    )
+                  })}
+                </div>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+    </CurriculumVitaeSection>
+  )
+}
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeWork.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeWork.tsx
@@ -0,0 +1,69 @@
+import { useTranslations } from "next-intl"
+import { MdWork } from "react-icons/md"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
+
+export interface CurriculumVitaeWorkProps {}
+
+export const CurriculumVitaeWork: React.FC<CurriculumVitaeWorkProps> = () => {
+  const t = useTranslations()
+
+  const workExperiences = [
+    {
+      summary: t("curriculum-vitae.work.ircad.summary"),
+      website: "https://ircad.fr/",
+      name: "IRCAD",
+      location: "1 Place de l'Hôpital, FR-67000 Strasbourg",
+      position: t("curriculum-vitae.work.ircad.position"),
+      dates: "28/08/2023 - 31/08/2027",
+      duration: t("curriculum-vitae.work.ircad.duration"),
+    },
+    {
+      summary: t("curriculum-vitae.work.numerize.summary"),
+      website: "https://numerize.com/",
+      name: "Numerize",
+      location: "4 Rue Sophie Germain, FR-67720 Hœrdt",
+      position: t("curriculum-vitae.work.numerize.position"),
+      dates: "11/04/2023 - 26/07/2023",
+      duration: t("curriculum-vitae.work.numerize.duration"),
+    },
+  ]
+
+  return (
+    <CurriculumVitaeSection
+      id="work-experience"
+      title={t("curriculum-vitae.work.title")}
+      icon={<MdWork size={24} />}
+    >
+      <ul className="list-unstyled m-0">
+        {workExperiences.map((workExperience) => {
+          return (
+            <li key={workExperience.name} className="card card-nested">
+              <p className="relative m-0">
+                <strong>
+                  <a href={workExperience.website} target="_blank">
+                    {workExperience.name}
+                  </a>
+                </strong>
+              </p>
+
+              <p className="relative m-0">
+                <strong>{workExperience.position}</strong>
+              </p>
+
+              <p className="text-muted">
+                <small>
+                  <span className="space-right">
+                    {workExperience.dates} ({workExperience.duration})
+                  </span>
+                </small>
+              </p>
+              <div className="mt-2">
+                <p>{workExperience.summary}</p>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+    </CurriculumVitaeSection>
+  )
+}
--- a/packages/ui/src/Design/Button/Button.stories.tsx
+++ b/packages/ui/src/Design/Button/Button.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { expect, fn, userEvent, within } from "@storybook/test"
-import { FaCheck } from "react-icons/fa6"
+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",
--- a/packages/ui/src/Design/Button/Button.tsx
+++ b/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",
--- a/packages/ui/src/Design/Button/Ripple.tsx
+++ b/packages/ui/src/Design/Button/Ripple.tsx
--- a/packages/ui/src/Design/Link/Link.stories.tsx
+++ b/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",
--- a/packages/ui/src/Design/Link/Link.tsx
+++ b/packages/ui/src/Design/Link/Link.tsx
--- a/packages/ui/src/Design/Spinner/Spinner.stories.tsx
+++ b/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",
--- a/packages/ui/src/Design/Spinner/Spinner.tsx
+++ b/packages/ui/src/Design/Spinner/Spinner.tsx
--- a/packages/ui/src/Design/Typography/Typography.stories.tsx
+++ b/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",
--- a/packages/ui/src/Design/Typography/Typography.tsx
+++ b/packages/ui/src/Design/Typography/Typography.tsx
--- a/packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.stories.tsx
+++ b/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",
--- a/packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.tsx
+++ b/packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.tsx
@@ -1,8 +1,8 @@
 import { useTranslations } from "next-intl"
-import { MainLayout } from "../../MainLayout/MainLayout"
-import { Link } from "../../design/Link/Link"
-import { Section } from "../../design/Section/Section"
-import { Typography } from "../../design/Typography/Typography"
+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 {}

--- a/packages/ui/src/Errors/ErrorServer/ErrorServer.stories.tsx
+++ b/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",
--- a/packages/ui/src/Errors/ErrorServer/ErrorServer.tsx
+++ b/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 { MainLayout } from "../../MainLayout/MainLayout"
-import { Button } from "../../design/Button/Button"
-import { Section } from "../../design/Section/Section"
-import { Typography } from "../../design/Typography/Typography"
+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>
--- a/packages/ui/src/Home/About/About.stories.tsx
+++ b/packages/ui/src/Home/About/About.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react"

-import { About as AboutComponent } from "./About"
+import { About as AboutComponent } from "./About.tsx"

 const meta = {
-  title: "Feature/About",
+  title: "Home/About",
  component: AboutComponent,
 } satisfies Meta<typeof AboutComponent>

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Théo LUDWIG	59153a7a69	style: fix ESLint	2024-10-13 00:00:44 +02:00
Théo LUDWIG	0a7094005c	chore: config updates	2024-10-12 23:51:58 +02:00
Théo LUDWIG	12f1d6cdf2	chore: try to fix CI with Playwright	2024-09-12 00:14:58 +02:00
Théo LUDWIG	0d7b33727b	feat: add in progress Engineering study + IRCAD until 2027 on CV	2024-09-12 00:05:59 +02:00
Théo LUDWIG	386f407f21	chore: simplify TypeScript config	2024-09-11 23:53:26 +02:00
semantic-release-bot	6853ac6884	chore(release): 4.0.0 [skip ci]	2024-07-31 22:55:33 +00:00
Théo LUDWIG	b199aedf77	feat: add Locale switch to Curriculum Vitae (not visible in print mode)	2024-08-01 00:48:22 +02:00
Théo LUDWIG	da4b483a3c	fix: a11y issues with curriculum-vitae	2024-08-01 00:36:45 +02:00
Théo LUDWIG	012fea869f	feat: translate Curriculum Vitae in both English and French	2024-08-01 00:26:46 +02:00
Théo LUDWIG	a596d1c443	feat: components structure Curriculum Vitae	2024-07-31 22:27:51 +02:00
Théo LUDWIG	b4611e4a7f	feat: init Curriculum Vitae	2024-07-31 19:23:14 +02:00
Théo LUDWIG	b5c50728de	refactor: components struture	2024-07-31 11:41:39 +02:00
Théo LUDWIG	ceeeb2f9c5	fix: add missing unstable_setRequestLocale to enable static rendering	2024-07-31 11:00:30 +02:00
				`@@ -1 +0,0 @@`
				/! modern-normalize v2.0.0 \| MIT License \| https://github.com/sindresorhus/modern-normalize /*,:before,:after{box-sizing:border-box}html{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{margin:0}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}body{font-family:Montserrat,Arial,"sans-serif";background:#f0f0f0;color:#333;line-height:1.42857143;font-size:14px}hr{margin-top:15px;margin-bottom:15px;border:0;border-top:1px solid #eee}p{margin:0}strong{font-weight:600}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}.link-disguise,.link-disguise:hover{color:inherit}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.clear-margin{margin:0}.relative{position:relative}.center-block{display:block;margin-right:auto;margin-left:auto}.text-center{text-align:center}.text-muted{color:#777}.text-uppercase{text-transform:uppercase}.list-unstyled{padding-left:0;list-style:none}.main{padding:5px}.title{font-weight:600}.profile-card-wrapper{position:relative}.card-wrapper{float:none!important;padding:5px}.profile-card-wrapper .profile-card{padding:10px}.card{background:#fff;border-radius:3px;padding:10px 0}.profile-pic{padding:10px 0}.profile-pic img{width:100px;height:100px;border-radius:50%;vertical-align:middle;border:0}.contact-details{display:flex;justify-content:center}.contact-details .detail{position:relative;min-height:1px;padding:10px}.social-links{line-height:2.5}.experience-description{margin-top:10px}.background-details .detail{display:table}.background-details .detail .icon,.background-details .detail .info{display:table-cell}.background-details .detail .icon{color:#707070}.background-details .detail .icon{min-width:45px;max-width:45px;text-align:center}.icon img{width:20px;height:20px}.background-details .detail .mobile-title{display:none}.card-nested{min-height:0;border-width:1px 0 0 0}.card-skills{position:relative}.labels{line-height:2}.space-top{margin-top:10px}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:600;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}.label-keyword{display:inline-block;font-size:.9em;padding:5px;border:1px solid #357ebd;margin-right:5px}.label-keyword p{margin:0}.section-separated{display:flex}
				`@@ -1 +0,0 @@`
				(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const c of t.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&r(c)}).observe(document,{childList:!0,subtree:!0});function s(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function r(e){if(e.ep)return;e.ep=!0;const t=s(e);fetch(e.href,t)}})();const i="31",l="03",u="2003",d=`${u}-${l}-${i}`,f=new Date(d),a=n=>{const o=new Date;let s=o.getFullYear()-n.getFullYear();const r=o.getMonth()-n.getMonth();return(r<0\|\|r===0&&o.getDate()<n.getDate())&&s--,s},g=document.getElementById("year-old");g.textContent=a(f).toString();