chore(release): 3.2.2 [skip ci]

.devcontainer/compose.yaml

@@ -1,9 +1,9 @@
 services:
   workspace:
     build:
-      context: './'
-      dockerfile: './Dockerfile'
+      context: "./"
+      dockerfile: "./Dockerfile"
     volumes:
-      - '..:/workspace:cached'
-    command: 'sleep infinity'
-    network_mode: 'host'
+      - "..:/workspace:cached"
+    command: "sleep infinity"
+    network_mode: "host"

.devcontainer/devcontainer.json

@@ -7,8 +7,8 @@
     "vscode": {
       "settings": {
         "remote.autoForwardPorts": false,
-        "remote.localPortHost": "allInterfaces"
-      }
+        "remote.localPortHost": "allInterfaces",
+      },
     },
     "extensions": [
       "editorconfig.editorconfig",
@@ -17,8 +17,8 @@
       "davidanson.vscode-markdownlint",
       "bradlc.vscode-tailwindcss",
       "mikestead.dotenv",
-      "ms-azuretools.vscode-docker"
-    ]
+      "ms-azuretools.vscode-docker",
+    ],
   },
-  "remoteUser": "node"
+  "remoteUser": "node",
 }

.dockerignore

@@ -1,4 +1,21 @@
-build
-.next
-coverage
-node_modules
+**/.turbo
+**/.next
+**/out
+**/build
+**/coverage
+**/node_modules
+
+# envs
+.env
+.env.production
+.env.development
+secrets
+
+# misc
+.DS_Store
+*.pem
+Dockerfile
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.editorconfig

@@ -1,4 +1,4 @@
-# For more information see: https://editorconfig.org/
+# https://editorconfig.org/
 
 root = true
 

.env.example

@@ -1,2 +1,4 @@
 COMPOSE_PROJECT_NAME=theoludwig
+HOSTNAME=0.0.0.0
 PORT=3000
+NEXT_TELEMETRY_DISABLED=1

.eslintrc.json

@@ -1,11 +1,34 @@
 {
-  "extends": ["conventions", "next/core-web-vitals", "prettier"],
+  "root": true,
+  "extends": [
+    "conventions",
+    "next/core-web-vitals",
+    "plugin:tailwindcss/recommended",
+    "prettier"
+  ],
   "plugins": ["prettier"],
   "parserOptions": {
     "project": "./tsconfig.json"
   },
+  "settings": {
+    "tailwindcss": {
+      "callees": ["classNames"]
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
   "rules": {
-    "prettier/prettier": "error"
+    "prettier/prettier": "error",
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
+    "react/void-dom-elements-no-children": "error",
+    "react/jsx-boolean-value": "error"
   },
   "overrides": [
     {

.github/ISSUE_TEMPLATE/BUG.md

@@ -1,8 +1,8 @@
 ---
-name: '🐛 Bug Report'
-about: 'Report an unexpected problem or unintended behavior.'
-title: '[Bug]'
-labels: 'bug'
+name: "🐛 Bug Report"
+about: "Report an unexpected problem or unintended behavior."
+title: "[Bug]"
+labels: "bug"
 ---
 
 <!--

.github/ISSUE_TEMPLATE/DOCUMENTATION.md

@@ -1,8 +1,8 @@
 ---
-name: '📜 Documentation'
-about: 'Correct spelling errors, improvements or additions to documentation files (README, CONTRIBUTING...).'
-title: '[Documentation]'
-labels: 'documentation'
+name: "📜 Documentation"
+about: "Correct spelling errors, improvements or additions to documentation files (README, CONTRIBUTING...)."
+title: "[Documentation]"
+labels: "documentation"
 ---
 
 <!-- Please make sure your issue has not already been fixed. -->

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,8 +1,8 @@
 ---
-name: '✨ Feature Request'
-about: 'Suggest a new feature idea.'
-title: '[Feature]'
-labels: 'feature request'
+name: "✨ Feature Request"
+about: "Suggest a new feature idea."
+title: "[Feature]"
+labels: "feature request"
 ---
 
 <!-- Please make sure your issue has not already been fixed. -->

.github/ISSUE_TEMPLATE/IMPROVEMENT.md

@@ -1,8 +1,8 @@
 ---
-name: '🔧 Improvement'
-about: 'Improve structure/format/performance/refactor/tests of the code.'
-title: '[Improvement]'
-labels: 'improvement'
+name: "🔧 Improvement"
+about: "Improve structure/format/performance/refactor/tests of the code."
+title: "[Improvement]"
+labels: "improvement"
 ---
 
 <!-- Please make sure your issue has not already been fixed. -->

.github/ISSUE_TEMPLATE/QUESTION.md

@@ -1,8 +1,8 @@
 ---
-name: '🙋 Question'
-about: 'Further information is requested.'
-title: '[Question]'
-labels: 'question'
+name: "🙋 Question"
+about: "Further information is requested."
+title: "[Question]"
+labels: "question"
 ---
 
 ### Question

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: 'Build'
+name: "Build"
 
 on:
   push:
@@ -8,18 +8,18 @@ on:
 
 jobs:
   build:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v4.0.0'
+      - uses: "actions/checkout@v4.1.1"
 
-      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.8.1'
+      - name: "Setup Node.js"
+        uses: "actions/setup-node@v4.0.1"
         with:
-          node-version: '20.x'
-          cache: 'npm'
+          node-version: "20.x"
+          cache: "npm"
 
-      - name: 'Install dependencies'
-        run: 'npm clean-install'
+      - name: "Install dependencies"
+        run: "npm clean-install"
 
-      - name: 'Build'
-        run: 'npm run build'
+      - name: "Build"
+        run: "npm run build"

.github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: 'Lint'
+name: "Lint"
 
 on:
   push:
@@ -8,35 +8,35 @@ on:
 
 jobs:
   lint:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v4.0.0'
+      - uses: "actions/checkout@v4.1.1"
 
-      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.8.1'
+      - name: "Setup Node.js"
+        uses: "actions/setup-node@v4.0.1"
         with:
-          node-version: '20.x'
-          cache: 'npm'
+          node-version: "20.x"
+          cache: "npm"
 
-      - name: 'Install dependencies'
-        run: 'npm clean-install'
+      - name: "Install dependencies"
+        run: "npm clean-install"
 
-      - name: 'lint:commit'
+      - name: "lint:commit"
         run: 'npm run lint:commit -- --to "${{ github.sha }}"'
 
-      - name: 'lint:editorconfig'
-        run: 'npm run lint:editorconfig'
+      - name: "lint:editorconfig"
+        run: "npm run lint:editorconfig"
 
-      - name: 'lint:markdown'
-        run: 'npm run lint:markdown'
+      - name: "lint:markdown"
+        run: "npm run lint:markdown"
 
-      - name: 'lint:eslint'
-        run: 'npm run lint:eslint'
+      - name: "lint:eslint"
+        run: "npm run lint:eslint"
 
-      - name: 'lint:prettier'
-        run: 'npm run lint:prettier'
+      - name: "lint:prettier"
+        run: "npm run lint:prettier"
 
-      - name: 'lint:dotenv'
-        uses: 'dotenv-linter/action-dotenv-linter@v2.18.0'
+      - name: "lint:dotenv"
+        uses: "dotenv-linter/action-dotenv-linter@v2.18.0"
         with:
           github_token: ${{ secrets.github_token }}

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: 'Release'
+name: "Release"
 
 on:
   push:
@@ -6,31 +6,31 @@ on:
 
 jobs:
   release:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v4.0.0'
+      - uses: "actions/checkout@v4.1.1"
         with:
           fetch-depth: 0
           persist-credentials: false
 
-      - name: 'Import GPG key'
-        uses: 'crazy-max/ghaction-import-gpg@v6.0.0'
+      - name: "Import GPG key"
+        uses: "crazy-max/ghaction-import-gpg@v6.0.0"
         with:
           gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
           git_user_signingkey: true
           git_commit_gpgsign: true
 
-      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.8.1'
+      - name: "Setup Node.js"
+        uses: "actions/setup-node@v4.0.1"
         with:
-          node-version: '20.x'
-          cache: 'npm'
+          node-version: "20.x"
+          cache: "npm"
 
-      - name: 'Install dependencies'
-        run: 'npm clean-install'
+      - name: "Install dependencies"
+        run: "npm clean-install"
 
-      - name: 'Release'
-        run: 'npm run release'
+      - name: "Release"
+        run: "npm run release"
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           GIT_COMMITTER_NAME: ${{ secrets.GIT_NAME }}

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: 'Test'
+name: "Test"
 
 on:
   push:
@@ -8,41 +8,41 @@ on:
 
 jobs:
   test-unit:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v4.0.0'
+      - uses: "actions/checkout@v4.1.1"
 
-      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.8.1'
+      - name: "Setup Node.js"
+        uses: "actions/setup-node@v4.0.1"
         with:
-          node-version: '20.x'
-          cache: 'npm'
+          node-version: "20.x"
+          cache: "npm"
 
-      - name: 'Install dependencies'
-        run: 'npm clean-install'
+      - name: "Install dependencies"
+        run: "npm clean-install"
 
-      - name: 'Unit Test'
-        run: 'npm run test:unit'
+      - name: "Unit Test"
+        run: "npm run test:unit"
 
   test-e2e:
-    runs-on: 'ubuntu-latest'
+    runs-on: "ubuntu-latest"
     steps:
-      - uses: 'actions/checkout@v4.0.0'
+      - uses: "actions/checkout@v4.1.1"
 
-      - name: 'Setup Node.js'
-        uses: 'actions/setup-node@v3.8.1'
+      - name: "Setup Node.js"
+        uses: "actions/setup-node@v4.0.1"
         with:
-          node-version: '20.x'
-          cache: 'npm'
+          node-version: "20.x"
+          cache: "npm"
 
-      - name: 'Install dependencies'
-        run: 'npm clean-install'
+      - name: "Install dependencies"
+        run: "npm clean-install"
 
-      - name: 'Build'
-        run: 'npm run build'
+      - name: "Build"
+        run: "npm run build"
 
-      - name: 'html-w3c-validator'
-        run: 'npm run test:html-w3c-validator'
+      - name: "html-w3c-validator"
+        run: "npm run test:html-w3c-validator"
 
-      - name: 'End To End (e2e) Test'
-        run: 'npm run test:e2e'
+      - name: "End To End (e2e) Test"
+        run: "npm run test:e2e"

.gitpod.yml

@@ -1,20 +1,10 @@
-image: 'gitpod/workspace-full'
+image: "gitpod/workspace-full"
 
 tasks:
-  - before: 'cp .env.example .env'
-    init: 'npm clean-install'
-    command: 'npm run dev'
+  - before: "cp .env.example .env"
+    init: "npm clean-install"
+    command: "npm run dev"
 
 ports:
   - port: 3000
-    onOpen: 'open-preview'
-
-github:
-  prebuilds:
-    master: true
-    branches: true
-    pullRequests: true
-    pullRequestsFromForks: true
-    addComment: true
-    addBadge: true
-    addLabel: true
+    onOpen: "open-preview"

.html-w3c-validatorrc.json

@@ -1,4 +1,6 @@
 {
+  "$schema": "https://raw.githubusercontent.com/theoludwig/html-w3c-validator/master/schema/html-w3c-validatorrc-schema.json",
   "urls": ["http://127.0.0.1:3000/", "http://127.0.0.1:3000/blog"],
-  "files": ["./public/curriculum-vitae/index.html"]
+  "files": ["./public/curriculum-vitae/index.html"],
+  "severities": ["error"]
 }

.husky/commit-msg

@@ -1,4 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+#!/usr/bin/env sh
 
 npm run lint:commit -- --edit

.husky/pre-commit

@@ -1,4 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+#!/usr/bin/env sh
 
 npm run lint:staged

.lintstagedrc.json

@@ -1,6 +1,7 @@
 {
-  "*": ["editorconfig-checker"],
-  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"],
-  "*.{css,scss,sass,json,jsonc,yml,yaml}": ["prettier --write"],
-  "*.{md,mdx}": ["prettier --write", "markdownlint-cli2 --fix"]
+  "**/*": ["editorconfig-checker", "prettier --write --ignore-unknown"],
+  "**/*.md": ["markdownlint-cli2 --fix --no-globs"],
+  "**/*.{js,jsx,ts,tsx}": [
+    "eslint --fix --max-warnings 0 --report-unused-disable-directives"
+  ]
 }

.markdownlint-cli2.jsonc

@@ -1,12 +1,12 @@
 {
   "config": {
+    "extends": "markdownlint/style/prettier",
     "default": true,
     "relative-links": true,
-    "extends": "markdownlint/style/prettier",
-    "MD024": false,
-    "MD033": false
+    "no-duplicate-heading": false,
+    "no-inline-html": false,
   },
-  "globs": ["**/*.{md,mdx}"],
+  "globs": ["**/*.md"],
   "ignores": ["**/node_modules"],
-  "customRules": ["markdownlint-rule-relative-links"]
+  "customRules": ["markdownlint-rule-relative-links"],
 }

.prettierrc.json

@@ -1,6 +1,4 @@
 {
-  "singleQuote": true,
-  "jsxSingleQuote": true,
   "semi": false,
-  "trailingComma": "none"
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.vscode/settings.json

@@ -5,7 +5,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "eslint.options": {
     "ignorePath": ".gitignore"

CONTRIBUTING.md

@@ -34,7 +34,7 @@ The commit message guidelines adheres to [Conventional Commits](https://www.conv
 ### Prerequisites
 
 - [Node.js](https://nodejs.org/) >= 20.0.0
-- [npm](https://www.npmjs.com/) >= 9.0.0
+- [npm](https://www.npmjs.com/) >= 10.0.0
 
 ### Installation
 

Dockerfile

@@ -1,23 +1,28 @@
-FROM node:20.6.1 AS builder-dependencies
+FROM node:20.11.0 AS builder-dependencies
 WORKDIR /usr/src/application
 COPY ./package*.json ./
 RUN npm clean-install
 
-FROM node:20.6.1 AS builder
+FROM node:20.11.0 AS builder
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV IS_STANDALONE=true
 WORKDIR /usr/src/application
 COPY --from=builder-dependencies /usr/src/application/node_modules ./node_modules
 COPY ./ ./
 RUN npm run build
 
-FROM gcr.io/distroless/nodejs20-debian11:latest AS runner
-WORKDIR /usr/src/application
+FROM node:20.11.0-slim AS runner
 ENV NODE_ENV=production
 ENV HOSTNAME=0.0.0.0
 ENV NEXT_TELEMETRY_DISABLED=1
-COPY --from=builder-dependencies /usr/src/application/node_modules ./node_modules
-COPY --from=builder /usr/src/application/.next/standalone ./
-COPY --from=builder /usr/src/application/.next/static ./.next/static
-COPY --from=builder /usr/src/application/public ./public
-COPY --from=builder /usr/src/application/i18n/translations ./i18n/translations
-COPY --from=builder /usr/src/application/next.config.js ./next.config.js
+ENV IS_STANDALONE=true
+WORKDIR /usr/src/application
+RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 applicationrunner
+USER applicationrunner
+COPY --from=builder-dependencies --chown=applicationrunner:nodejs /usr/src/application/node_modules ./node_modules
+COPY --from=builder --chown=applicationrunner:nodejs /usr/src/application/.next/standalone ./
+COPY --from=builder --chown=applicationrunner:nodejs /usr/src/application/.next/static ./.next/static
+COPY --from=builder --chown=applicationrunner:nodejs /usr/src/application/public ./public
+COPY --from=builder --chown=applicationrunner:nodejs /usr/src/application/i18n/translations ./i18n/translations
+COPY --from=builder --chown=applicationrunner:nodejs /usr/src/application/next.config.js ./next.config.js
 CMD ["./server.js"]

LICENSE

@@ -1,6 +1,6 @@
-MIT License
+# MIT License
 
-Copyright (c) Théo LUDWIG
+Copyright (c) Théo LUDWIG <contact@theoludwig.fr>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,7 +1,7 @@
 <h1 align="center"><a href="https://theoludwig.fr/">Théo LUDWIG</a></h1>
 
 <p align="center">
-  <strong>Developer Full Stack • Open-Source enthusiast</strong>
+  <strong>Developer Full Stack • Open-Source Enthusiast</strong>
 </p>
 
 <p align="center">
@@ -25,10 +25,10 @@
   "pronouns": "He/Him",
   "birthDate": "31/03/2003",
   "nationality": "Alsace, France",
-  "interests": ["Developer Full Stack", "Open-Source enthusiast"],
+  "interests": ["Developer Full Stack", "Open-Source Enthusiast"],
   "skills": {
     "programmingLanguages": ["JavaScript/TypeScript", "Python", "C/C++", "PHP"],
-    "frontend": ["HTML", "CSS", "Tailwind CSS", "React.js/Next.js"],
+    "frontend": ["HTML/CSS", "Tailwind CSS", "React.js/Next.js"],
     "backend": ["Laravel", "Node.js", "Fastify", "PostgreSQL"],
     "tools": ["GNU/Linux", "Arch Linux", "Visual Studio Code", "Git", "Docker"]
   }
@@ -40,6 +40,6 @@
 ## 📈 Statistics
 
 <p align=center>
-  <img height=175 align="center" src="https://github-readme-stats.vercel.app/api?username=theoludwig&show_icons=true&theme=dark" />
-  <img height=175 align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=theoludwig&hide=html,css,javascript&langs_count=8&layout=compact&theme=dark" />
+  <img height=175 align="center" src="https://github-readme-stats.vercel.app/api?username=theoludwig&show_icons=true&theme=dark" alt="Théo LUDWIG's GitHub Stats" />
+  <img height=175 align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=theoludwig&hide=html,css,javascript&langs_count=8&layout=compact&theme=dark" alt="Théo LUDWIG's Programming Languages" />
 </p>

app/blog/[slug]/loading.tsx

@@ -1,8 +1,8 @@
-import { Loader } from '@/components/design/Loader'
+import { Loader } from "@/components/design/Loader"
 
 const Loading = (): JSX.Element => {
   return (
-    <main className='flex flex-col flex-1 items-center justify-center'>
+    <main className="flex flex-1 flex-col items-center justify-center">
       <Loader />
     </main>
   )

app/blog/[slug]/page.tsx

@@ -1,10 +1,10 @@
-import type { Metadata } from 'next'
-import { notFound } from 'next/navigation'
+import type { Metadata } from "next"
+import { notFound } from "next/navigation"
 
-import 'katex/dist/katex.min.css'
+import "katex/dist/katex.min.css"
 
-import { getBlogPostBySlug } from '@/blog/blog'
-import { BlogPost } from '@/blog/BlogPost'
+import { getBlogPostBySlug } from "@/blog/blog"
+import { BlogPost } from "@/blog/BlogPost"
 
 interface BlogPostPageProps {
   params: {
@@ -13,7 +13,7 @@ interface BlogPostPageProps {
 }
 
 export const generateMetadata = async (
-  props: BlogPostPageProps
+  props: BlogPostPageProps,
 ): Promise<Metadata> => {
   const blogPost = await getBlogPostBySlug(props.params.slug)
   if (blogPost == null) {
@@ -26,12 +26,12 @@ export const generateMetadata = async (
     description,
     openGraph: {
       title,
-      description
+      description,
     },
     twitter: {
       title,
-      description
-    }
+      description,
+    },
   }
 }
 

app/blog/loading.tsx

@@ -1,8 +1,8 @@
-import { Loader } from '@/components/design/Loader'
+import { Loader } from "@/components/design/Loader"
 
 const Loading = (): JSX.Element => {
   return (
-    <main className='flex flex-col flex-1 items-center justify-center'>
+    <main className="flex flex-1 flex-col items-center justify-center">
       <Loader />
     </main>
   )

app/blog/page.tsx

@@ -1,36 +1,38 @@
-import { Suspense } from 'react'
-import type { Metadata } from 'next'
+import { Suspense } from "react"
+import type { Metadata } from "next"
 
-import { BlogPosts } from '@/blog/BlogPosts'
-import { Loader } from '@/components/design/Loader'
+import { BlogPosts } from "@/blog/BlogPosts"
+import { Loader } from "@/components/design/Loader"
 
-const title = 'Blog | Théo LUDWIG'
+const title = "Blog | Théo LUDWIG"
 const description =
-  'The latest news about my journey of learning computer science.'
+  "The latest news about my journey of learning computer science."
 
 export const metadata: Metadata = {
   title,
   description,
   openGraph: {
     title,
-    description
+    description,
   },
   twitter: {
     title,
-    description
-  }
+    description,
+  },
 }
 
 const BlogPage = async (): Promise<JSX.Element> => {
   return (
-    <main className='flex flex-1 flex-col flex-wrap items-center'>
-      <div className='mt-10 flex flex-col items-center'>
-        <h1 className='text-4xl font-semibold'>Blog</h1>
-        <p className='mt-6 text-center' data-cy='blog-post-date'>
+    <main className="flex flex-1 flex-col flex-wrap items-center">
+      <div className="mt-10 flex flex-col items-center">
+        <h1 className="text-4xl font-semibold text-yellow dark:text-yellow-dark">
+          Blog
+        </h1>
+        <p className="mt-6 text-center" data-cy="blog-post-date">
           {description}
         </p>
       </div>
-      <Suspense fallback={<Loader className='mt-8' />}>
+      <Suspense fallback={<Loader className="mt-8" />}>
         <BlogPosts />
       </Suspense>
     </main>

app/error.tsx

@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { useEffect } from 'react'
+import { useEffect } from "react"
 
 export interface ErrorHandlingProps {
   error: Error
@@ -14,17 +14,17 @@ const ErrorHandling = (props: ErrorHandlingProps): JSX.Element => {
   }, [error])
 
   return (
-    <main className='flex flex-col flex-1 items-center justify-center'>
-      <h1 className='my-6 text-4xl font-semibold'>
-        Error{' '}
+    <main className="flex flex-1 flex-col items-center justify-center">
+      <h1 className="my-6 text-4xl font-semibold">
+        Error{" "}
         <span
-          className='text-yellow dark:text-yellow-dark'
-          data-cy='status-code'
+          className="text-yellow dark:text-yellow-dark"
+          data-cy="status-code"
         >
           500
         </span>
       </h1>
-      <p className='text-center text-lg'>Server error</p>
+      <p className="text-center text-lg">Server error</p>
     </main>
   )
 }

app/globals.css

@@ -7,6 +7,10 @@
   word-break: break-word;
 }
 
+.text-base {
+  line-height: 1.75rem;
+}
+
 .prose {
   @apply !max-w-5xl scroll-smooth text-gray dark:text-gray-300;
 }
@@ -16,7 +20,7 @@
 }
 
 .prose [id]::before {
-  content: '';
+  content: "";
   display: block;
   height: 90px;
   margin-top: -90px;
@@ -25,7 +29,12 @@
 
 .prose a,
 .prose strong {
-  @apply text-yellow dark:text-yellow-dark;
+  @apply !font-semibold text-yellow dark:text-yellow-dark;
+}
+
+strong,
+b {
+  @apply font-bold;
 }
 
 .prose h2,
@@ -39,9 +48,9 @@
 .prose code {
   color: #ce9178;
 }
-.prose :where(code):not(:where([class~='not-prose'] *))::before,
-.prose :where(code):not(:where([class~='not-prose'] *))::after {
-  content: '';
+.prose :where(code):not(:where([class~="not-prose"] *))::before,
+.prose :where(code):not(:where([class~="not-prose"] *))::after {
+  content: "";
 }
 .shiki {
   white-space: pre-wrap !important;

app/layout.tsx

@@ -1,21 +1,21 @@
-import type { Metadata } from 'next'
-import classNames from 'clsx'
+import type { Metadata } from "next"
+import classNames from "clsx"
 
-import '@fontsource/montserrat/400.css'
-import '@fontsource/montserrat/600.css'
-import './globals.css'
+import "@fontsource/montserrat/400.css"
+import "@fontsource/montserrat/600.css"
+import "./globals.css"
 
-import { Header } from '@/components/Header'
-import { Footer } from '@/components/Footer'
-import { getI18n } from '@/i18n/i18n.server'
-import { getTheme } from '@/theme/theme.server'
+import { Header } from "@/components/Header"
+import { Footer } from "@/components/Footer"
+import { getI18n } from "@/i18n/i18n.server"
+import { getTheme } from "@/theme/theme.server"
 
-const title = 'Théo LUDWIG'
+const title = "Théo LUDWIG"
 const description =
-  'Théo LUDWIG - Developer Full Stack • Open-Source enthusiast'
-const image = '/images/icon-96x96.png'
-const url = new URL('https://theoludwig.fr')
-const locale = 'fr-FR, en-US'
+  "Théo LUDWIG - Developer Full Stack • Open-Source Enthusiast"
+const image = "/images/logo.png"
+const url = new URL("https://theoludwig.fr")
+const locale = "fr-FR, en-US"
 
 export const metadata: Metadata = {
   title,
@@ -30,21 +30,18 @@ export const metadata: Metadata = {
       {
         url: image,
         width: 96,
-        height: 96
-      }
+        height: 96,
+      },
     ],
     locale,
-    type: 'website'
-  },
-  icons: {
-    icon: '/images/icon-96x96.png'
+    type: "website",
   },
   twitter: {
-    card: 'summary',
+    card: "summary",
     title,
     description,
-    images: [image]
-  }
+    images: [image],
+  },
 }
 
 interface RootLayoutProps {
@@ -61,14 +58,14 @@ const RootLayout = (props: RootLayoutProps): JSX.Element => {
     <html
       lang={i18n.locale}
       className={classNames({
-        dark: theme === 'dark',
-        light: theme === 'light'
+        dark: theme === "dark",
+        light: theme === "light",
       })}
       style={{
-        colorScheme: theme
+        colorScheme: theme,
       }}
     >
-      <body className='bg-white font-headline text-black dark:bg-black dark:text-white flex flex-col min-h-screen'>
+      <body className="flex min-h-screen flex-col bg-white font-headline text-black dark:bg-black dark:text-white">
         <Header />
         {children}
         <Footer />

app/loading.tsx

@@ -1,8 +1,8 @@
-import { Loader } from '@/components/design/Loader'
+import { Loader } from "@/components/design/Loader"
 
 const Loading = (): JSX.Element => {
   return (
-    <main className='flex flex-col flex-1 items-center justify-center'>
+    <main className="flex flex-1 flex-col items-center justify-center">
       <Loader />
     </main>
   )

app/not-found.tsx

@@ -1,28 +1,28 @@
-import Link from 'next/link'
+import Link from "next/link"
 
-import { getI18n } from '@/i18n/i18n.server'
+import { getI18n } from "@/i18n/i18n.server"
 
 const NotFound = (): JSX.Element => {
   const i18n = getI18n()
 
   return (
-    <main className='flex flex-col flex-1 items-center justify-center'>
-      <h1 className='my-6 text-4xl font-semibold'>
-        {i18n.translate('errors.error')}{' '}
+    <main className="flex flex-1 flex-col items-center justify-center">
+      <h1 className="my-6 text-4xl font-semibold">
+        {i18n.translate("errors.error")}{" "}
         <span
-          className='text-yellow dark:text-yellow-dark'
-          data-cy='status-code'
+          className="text-yellow dark:text-yellow-dark"
+          data-cy="status-code"
         >
           404
         </span>
       </h1>
-      <p className='text-center text-lg'>
-        {i18n.translate('errors.not-found')}{' '}
+      <p className="text-center text-lg">
+        {i18n.translate("errors.not-found")}{" "}
         <Link
-          href='/'
-          className='text-yellow hover:underline dark:text-yellow-dark'
+          href="/"
+          className="text-yellow hover:underline dark:text-yellow-dark"
         >
-          {i18n.translate('errors.return-to-home-page')}
+          {i18n.translate("errors.return-to-home-page")}
         </Link>
       </p>
     </main>

app/page.tsx

@@ -1,27 +1,27 @@
-import { RevealFade } from '@/components/design/RevealFade'
-import { Section } from '@/components/design/Section'
-import { Interests } from '@/components/Interests'
-import { Portfolio } from '@/components/Portfolio'
-import { Profile } from '@/components/Profile'
-import { SocialMediaList } from '@/components/Profile/SocialMediaList'
-import { Skills } from '@/components/Skills'
-import { OpenSource } from '@/components/OpenSource'
-import { getI18n } from '@/i18n/i18n.server'
+import { RevealFade } from "@/components/design/RevealFade"
+import { Section } from "@/components/design/Section"
+import { Interests } from "@/components/Interests"
+import { Portfolio } from "@/components/Portfolio"
+import { Profile } from "@/components/Profile"
+import { SocialMediaList } from "@/components/Profile/SocialMediaList"
+import { Skills } from "@/components/Skills"
+import { OpenSource } from "@/components/OpenSource"
+import { getI18n } from "@/i18n/i18n.server"
 
 const HomePage = (): JSX.Element => {
   const i18n = getI18n()
 
   return (
-    <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
-      <Section isMain id='about'>
+    <main className="flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl">
+      <Section isMain id="about">
         <Profile />
         <SocialMediaList />
       </Section>
 
       <RevealFade>
         <Section
-          id='interests'
-          heading={i18n.translate('home.interests.title')}
+          id="interests"
+          heading={i18n.translate("home.interests.title")}
         >
           <Interests />
         </Section>
@@ -29,8 +29,8 @@ const HomePage = (): JSX.Element => {
 
       <RevealFade>
         <Section
-          id='skills'
-          heading={i18n.translate('home.skills.title')}
+          id="skills"
+          heading={i18n.translate("home.skills.title")}
           withoutShadowContainer
         >
           <Skills />
@@ -39,8 +39,8 @@ const HomePage = (): JSX.Element => {
 
       <RevealFade>
         <Section
-          id='portfolio'
-          heading={i18n.translate('home.portfolio.title')}
+          id="portfolio"
+          heading={i18n.translate("home.portfolio.title")}
           withoutShadowContainer
         >
           <Portfolio />
@@ -48,7 +48,7 @@ const HomePage = (): JSX.Element => {
       </RevealFade>
 
       <RevealFade>
-        <Section id='open-source' heading='Open source' withoutShadowContainer>
+        <Section id="open-source" heading="Open source" withoutShadowContainer>
           <OpenSource />
         </Section>
       </RevealFade>

blog/BlogPost.tsx

@@ -1,10 +1,10 @@
-import { notFound } from 'next/navigation'
-import date from 'date-and-time'
+import { notFound } from "next/navigation"
+import date from "date-and-time"
 
-import 'katex/dist/katex.min.css'
+import "katex/dist/katex.min.css"
 
-import { getBlogPostBySlug } from '@/blog/blog'
-import { BlogPostContent } from '@/blog/BlogPostContent'
+import { getBlogPostBySlug } from "@/blog/blog"
+import { BlogPostContent } from "@/blog/BlogPostContent"
 
 export interface BlogPostProps {
   slug: string
@@ -19,13 +19,15 @@ export const BlogPost = async (props: BlogPostProps): Promise<JSX.Element> => {
   }
 
   return (
-    <main className='break-wrap-words flex flex-1 flex-col flex-wrap items-center justify-center'>
-      <div className='my-10 flex flex-col items-center text-center'>
-        <h1 className='text-3xl font-semibold'>{blogPost.frontmatter.title}</h1>
-        <p className='mt-2' data-cy='blog-post-date'>
+    <main className="break-wrap-words flex flex-1 flex-col flex-wrap items-center justify-center">
+      <div className="my-10 flex flex-col items-center text-center">
+        <h1 className="text-3xl font-semibold text-yellow dark:text-yellow-dark">
+          {blogPost.frontmatter.title}
+        </h1>
+        <p className="mt-2" data-cy="blog-post-date">
           {date.format(
             new Date(blogPost.frontmatter.publishedOn),
-            'DD/MM/YYYY'
+            "DD/MM/YYYY",
           )}
         </p>
       </div>

blog/BlogPostComments.tsx

@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import Giscus from '@giscus/react'
+import Giscus from "@giscus/react"
 
-import { useTheme } from '@/theme/theme.client'
-import type { CookiesStore } from '@/utils/constants'
+import { useTheme } from "@/theme/theme.client"
+import type { CookiesStore } from "@/utils/constants"
 
 interface BlogPostCommentsProps {
   cookiesStore: CookiesStore
@@ -16,18 +16,18 @@ export const BlogPostComments = (props: BlogPostCommentsProps): JSX.Element => {
 
   return (
     <Giscus
-      id='comments'
-      repo='theoludwig/theoludwig'
-      repoId='MDEwOlJlcG9zaXRvcnkzNTg5NDg1NDQ='
-      category='General'
-      categoryId='DIC_kwDOFWUewM4CQ_WK'
-      mapping='pathname'
-      reactionsEnabled='1'
-      emitMetadata='0'
-      inputPosition='top'
+      id="comments"
+      repo="theoludwig/theoludwig"
+      repoId="MDEwOlJlcG9zaXRvcnkzNTg5NDg1NDQ="
+      category="General"
+      categoryId="DIC_kwDOFWUewM4CQ_WK"
+      mapping="pathname"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="top"
       theme={theme}
-      lang='en'
-      loading='lazy'
+      lang="en"
+      loading="lazy"
     />
   )
 }

blog/BlogPostContent.tsx

@@ -1,37 +1,37 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import { cookies } from 'next/headers'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faLink } from '@fortawesome/free-solid-svg-icons'
-import { MDXRemote } from 'next-mdx-remote/rsc'
-import { nodeTypes } from '@mdx-js/mdx'
-import rehypeRaw from 'rehype-raw'
-import remarkGfm from 'remark-gfm'
-import rehypeSlug from 'rehype-slug'
-import remarkMath from 'remark-math'
-import rehypeKatex from 'rehype-katex'
-import { getHighlighter } from 'shiki'
+import Image from "next/image"
+import Link from "next/link"
+import { cookies } from "next/headers"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faLink } from "@fortawesome/free-solid-svg-icons"
+import { MDXRemote } from "next-mdx-remote/rsc"
+import { nodeTypes } from "@mdx-js/mdx"
+import rehypeRaw from "rehype-raw"
+import remarkGfm from "remark-gfm"
+import rehypeSlug from "rehype-slug"
+import remarkMath from "remark-math"
+import rehypeKatex from "rehype-katex"
+import { getHighlighter } from "shiki"
 
-import 'katex/dist/katex.min.css'
+import "katex/dist/katex.min.css"
 
-import { getTheme } from '@/theme/theme.server'
-import { remarkSyntaxHighlightingPlugin } from '@/blog/remarkSyntaxHighlightingPlugin'
-import { BlogPostComments } from '@/blog/BlogPostComments'
+import { getTheme } from "@/theme/theme.server"
+import { remarkSyntaxHighlightingPlugin } from "@/blog/remarkSyntaxHighlightingPlugin"
+import { BlogPostComments } from "@/blog/BlogPostComments"
 
 const Heading = (
   props: React.DetailedHTMLProps<
     React.HTMLAttributes<HTMLHeadingElement>,
     HTMLHeadingElement
-  >
+  >,
 ): JSX.Element => {
-  const { children, id = '' } = props
+  const { children, id = "" } = props
   return (
-    <h2 {...props} className='group'>
+    <h2 {...props} className="group">
       <Link
         href={`#${id}`}
-        className='invisible !text-black group-hover:visible dark:!text-white'
+        className="invisible !text-black group-hover:visible dark:!text-white"
       >
-        <FontAwesomeIcon className='mr-2 inline h-4 w-4' icon={faLink} />
+        <FontAwesomeIcon className="mr-2 inline size-4" icon={faLink} />
       </Link>
       {children}
     </h2>
@@ -43,7 +43,7 @@ export interface BlogPostContentProps {
 }
 
 export const BlogPostContent = async (
-  props: BlogPostContentProps
+  props: BlogPostContentProps,
 ): Promise<JSX.Element> => {
   const { content } = props
 
@@ -51,12 +51,12 @@ export const BlogPostContent = async (
   const theme = getTheme()
 
   const highlighter = await getHighlighter({
-    theme: `${theme}-plus`
+    theme: `${theme}-plus`,
   })
 
   return (
-    <div className='prose mb-10'>
-      <div className='px-8'>
+    <div className="prose mb-10">
+      <div className="px-8">
         <MDXRemote
           source={content}
           options={{
@@ -64,14 +64,14 @@ export const BlogPostContent = async (
               remarkPlugins: [
                 remarkGfm,
                 [remarkSyntaxHighlightingPlugin, { highlighter }],
-                remarkMath
+                remarkMath,
               ],
               rehypePlugins: [
                 rehypeSlug,
                 [rehypeRaw, { passThrough: nodeTypes }],
-                rehypeKatex
-              ]
-            }
+                rehypeKatex,
+              ],
+            },
           }}
           components={{
             h1: Heading,
@@ -81,27 +81,37 @@ export const BlogPostContent = async (
             h5: Heading,
             h6: Heading,
             img: (properties) => {
-              const { src = '', alt = 'Blog Image' } = properties
-              const source = src.replace('../../public/', '/')
+              const { src = "", alt = "Blog Image" } = properties
+              const source = src.replace("../../public/", "/")
               return (
-                <span className='flex flex-col items-center justify-center'>
+                <span className="flex flex-col items-center justify-center">
                   <Image
                     src={source}
                     alt={alt}
                     width={1000}
                     height={1000}
-                    className='h-auto w-auto'
+                    className="size-auto"
                   />
                 </span>
               )
             },
             a: (props) => {
-              const { href = '' } = props
-              if (href.startsWith('#')) {
+              const { href = "", ...rest } = props
+              if (href.startsWith("#")) {
                 return <a {...props} />
               }
-              return <a target='_blank' rel='noopener noreferrer' {...props} />
+              if (href.startsWith("../posts/")) {
+                return (
+                  <a
+                    href={href
+                      .replace("../posts/", "/blog/")
+                      .replace(".md", "")}
+                    {...rest}
+                  />
+                )
               }
+              return <a target="_blank" rel="noopener noreferrer" {...props} />
+            },
           }}
         />
         <BlogPostComments cookiesStore={cookiesStore.toString()} />

blog/BlogPosts.tsx

@@ -1,35 +1,38 @@
-import Link from 'next/link'
-import date from 'date-and-time'
+import Link from "next/link"
+import date from "date-and-time"
 
-import { ShadowContainer } from '@/components/design/ShadowContainer'
-import { getBlogPosts } from '@/blog/blog'
+import { ShadowContainer } from "@/components/design/ShadowContainer"
+import { getBlogPosts } from "@/blog/blog"
 
 export const BlogPosts = async (): Promise<JSX.Element> => {
   const posts = await getBlogPosts()
 
   return (
-    <div className='flex w-full items-center justify-center p-8'>
-      <div className='w-[1600px]' data-cy='blog-posts'>
+    <div className="flex w-full items-center justify-center p-8">
+      <div className="w-[1600px]" data-cy="blog-posts">
         {posts.map((post, index) => {
           const postPublishedOn = date.format(
             new Date(post.frontmatter.publishedOn),
-            'DD/MM/YYYY'
+            "DD/MM/YYYY",
           )
           return (
             <Link
               href={`/blog/${post.slug}`}
               key={index}
-              locale='en'
+              locale="en"
               data-cy={post.slug}
             >
-              <ShadowContainer className='cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2'>
-                <h2 data-cy='blog-post-title' className='text-xl font-semibold'>
+              <ShadowContainer className="cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2">
+                <h2
+                  data-cy="blog-post-title"
+                  className="text-xl font-semibold text-yellow dark:text-yellow-dark"
+                >
                   {post.frontmatter.title}
                 </h2>
-                <p data-cy='blog-post-date' className='mt-2'>
+                <p data-cy="blog-post-date" className="mt-2">
                   {postPublishedOn}
                 </p>
-                <p data-cy='blog-post-description' className='mt-3'>
+                <p data-cy="blog-post-description" className="mt-3">
                   {post.frontmatter.description}
                 </p>
               </ShadowContainer>

blog/blog.ts

@@ -1,10 +1,10 @@
-import fs from 'node:fs'
-import path from 'node:path'
+import fs from "node:fs"
+import path from "node:path"
 
-import { cache } from 'react'
-import matter from 'gray-matter'
+import { cache } from "react"
+import matter from "gray-matter"
 
-export const BLOG_POSTS_PATH = path.join(process.cwd(), 'blog', 'posts')
+export const BLOG_POSTS_PATH = path.join(process.cwd(), "blog", "posts")
 
 export interface FrontMatter {
   title: string
@@ -23,13 +23,13 @@ export const getBlogPosts = cache(async (): Promise<BlogPost[]> => {
   const blogPosts = await fs.promises.readdir(BLOG_POSTS_PATH)
   const blogPostsWithTime = await Promise.all(
     blogPosts.map(async (blogPostFilename) => {
-      const [slug, extension] = blogPostFilename.split('.')
+      const [slug, extension] = blogPostFilename.split(".")
       if (slug == null || extension == null) {
-        throw new Error('Invalid blog post filename.')
+        throw new Error("Invalid blog post filename.")
       }
       const blogPostPath = path.join(BLOG_POSTS_PATH, `${slug}.${extension}`)
       const blogPostContent = await fs.promises.readFile(blogPostPath, {
-        encoding: 'utf8'
+        encoding: "utf8",
       })
       const { data, content } = matter(blogPostContent) as unknown as {
         data: FrontMatter
@@ -40,9 +40,9 @@ export const getBlogPosts = cache(async (): Promise<BlogPost[]> => {
         slug,
         content,
         frontmatter: data,
-        time: date.getTime()
+        time: date.getTime(),
       }
-    })
+    }),
   )
   const blogPostsSortedByPublicationDate = blogPostsWithTime
     .filter((post) => {
@@ -61,5 +61,5 @@ export const getBlogPostBySlug = cache(
       return blogPost.slug === slug && blogPost.frontmatter.isPublished
     })
     return blogPost
-  }
+  },
 )

blog/posts/clean-code.md

@@ -1,8 +1,8 @@
 ---
-title: '🧼 Clean Code'
+title: "🧼 Clean Code"
 description: 'What is "Clean Code", what are "Design Patterns", and why is it so important today? Tips and tricks to make your code more readable and maintainable in the long term.'
 isPublished: true
-publishedOn: '2022-02-23T08:00:18.758Z'
+publishedOn: "2022-02-23T08:00:18.758Z"
 ---
 
 Hello! 👋
@@ -110,7 +110,7 @@ const transaction = charge(user, subscription)
 ```typescript
 interface Car {
   carModel: string
-  carColor: 'red' | 'blue' | 'yellow'
+  carColor: "red" | "blue" | "yellow"
 }
 const printCar = (car: Car): void => {
   console.log(`${car.carModel} (${car.carColor})`)
@@ -122,7 +122,7 @@ const printCar = (car: Car): void => {
 ```typescript
 interface Car {
   model: string
-  color: 'red' | 'blue' | 'yellow'
+  color: "red" | "blue" | "yellow"
 }
 const printCar = (car: Car): void => {
   console.log(`${car.model} (${car.color})`)
@@ -170,17 +170,17 @@ We have to keep it as simple as possible, not to implement features that are not
 ### Example (bad way)
 
 ```typescript
-import fs from 'node:fs'
-import path from 'node:path'
+import fs from "node:fs"
+import path from "node:path"
 
 const createFile = async (
   name: string,
-  isTemporary: boolean = false
+  isTemporary: boolean = false,
 ): Promise<void> => {
   if (isTemporary) {
-    return await fs.promises.writeFile(path.join('temporary', name), '')
+    return await fs.promises.writeFile(path.join("temporary", name), "")
   }
-  return await fs.promises.writeFile(name, '')
+  return await fs.promises.writeFile(name, "")
 }
 ```
 
@@ -189,15 +189,15 @@ const createFile = async (
 ### Example (good way)
 
 ```typescript
-import fs from 'node:fs'
-import path from 'node:path'
+import fs from "node:fs"
+import path from "node:path"
 
 const createFile = async (name: string): Promise<void> => {
-  await fs.promises.writeFile(name, '')
+  await fs.promises.writeFile(name, "")
 }
 
 const createTemporaryFile = async (name: string): Promise<void> => {
-  await createFile(path.join('temporary', name))
+  await createFile(path.join("temporary", name))
 }
 ```
 

blog/posts/git-ultimate-guide.md

@@ -1,8 +1,8 @@
 ---
-title: '🗓️ Git version control: Ultimate Guide'
-description: 'What is `git`, what are the most used commands, best practices, and tips and tricks. The Ultimate guide to master `git` in your daily workflow.'
+title: "🗓️ Git version control: Ultimate Guide"
+description: "What is `git`, what are the most used commands, best practices, and tips and tricks. The Ultimate guide to master `git` in your daily workflow."
 isPublished: true
-publishedOn: '2022-10-27T14:33:07.465Z'
+publishedOn: "2022-10-27T14:33:07.465Z"
 ---
 
 Hello! 👋

blog/posts/hello-world.md

@@ -1,8 +1,8 @@
 ---
-title: '👋 Hello, world!'
-description: 'First post of the blog, introduction and explanation of how this blog is made.'
+title: "👋 Hello, world!"
+description: "First post of the blog, introduction and explanation of how this blog is made."
 isPublished: true
-publishedOn: '2022-02-20T08:00:18.758Z'
+publishedOn: "2022-02-20T08:00:18.758Z"
 ---
 
 Hello, world! 👋

blog/posts/mistakes-as-junior-developer.md

@@ -1,8 +1,8 @@
 ---
-title: '❌ Mistakes I made as a junior developer'
-description: 'Here are mistakes I made when I started, to prevent you from making the same mistakes.'
+title: "❌ Mistakes I made as a junior developer"
+description: "Here are mistakes I made when I started, to prevent you from making the same mistakes."
 isPublished: true
-publishedOn: '2022-03-14T07:42:52.989Z'
+publishedOn: "2022-03-14T07:42:52.989Z"
 ---
 
 Hello! 👋
@@ -41,13 +41,13 @@ Find the right balance, between abstraction and simple implementation, start sim
 
 When you start a new project, you should focus on the core of the project, not on the details, to release as soon as possible, a working usable version of your project also called a [**Minimum Viable Product** (MVP)](https://en.wikipedia.org/wiki/Minimum_viable_product), it is better than a half-functioning, over-engineered project.
 
-I made this mistake while developing [Thream](https://thream.theoludwig.fr), your **open source** platform to stay close with your friends and communities, **talk**, chat, **collaborate**, share and **have fun**.
+I made this mistake while developing [Thream](../posts/thream-v1-0-0.md), your **open source** platform to stay close with your friends and communities, **talk**, chat, **collaborate**, share and **have fun**.
 
 Basically, I thought it was cool, to do a "big" v1.0.0 release with a lot of features, but in fact, it was not, because I could not even show what I was developing (to the end-users, not technical people) as I was making multiple features at the same time and also mainly focused on the **REST API** side and not at all the **website (frontend)**.
 
 What I recommend you to do is to start with a **v1.0.0** release as soon as possible with the minimum required features needed for your project idea, and then gradually add new features and release new versions.
 
-In my example for [Thream](https://thream.theoludwig.fr), I could release a v1.0.0 without these features:
+In my example for [Thream](../posts/thream-v1-0-0.md), I could release a v1.0.0 without these features:
 
 - English/French translation (could be only English)
 - Light/Dark theme (could be only Dark)
@@ -55,7 +55,7 @@ In my example for [Thream](https://thream.theoludwig.fr), I could release a v1.0
 - User public profile
 - Channels (maybe could be only one channel per guild to start with)
 
-And probably more, what was really required with [Thream](https://thream.theoludwig.fr), is that users could authenticate, create a community of friends, and then they could communicate with each other with messages in real-time, really that was enough.
+And probably more, what was really required with [Thream](../posts/thream-v1-0-0.md), is that users could authenticate, create a community of friends, and then they could communicate with each other with messages in real-time, really that was enough.
 
 And then with this basis, I could release, v1.1.0, v1.2.0 etc. with more features, and release new versions more often to show the progress of the project, it is also more motivating to have users testing our project and to **get feedback sooner**.
 

blog/posts/programming-challenges.md

@@ -1,8 +1,8 @@
 ---
-title: '🧠 Programming Challenges'
-description: 'What are Programming Challenges and Competitive Programming and an introduction to Time/Space Complexity with Big O Notation.'
+title: "🧠 Programming Challenges"
+description: "What are Programming Challenges and Competitive Programming and an introduction to Time/Space Complexity with Big O Notation."
 isPublished: true
-publishedOn: '2023-05-21T10:20:18.837Z'
+publishedOn: "2023-05-21T10:20:18.837Z"
 ---
 
 Hello! 👋

blog/posts/thream-v1-0-0.md

@@ -1,19 +1,29 @@
 ---
-title: '🟢 Thream v1.0.0'
-description: 'Your open source platform to stay close with your friends and communities, talk, chat, collaborate, share and have fun.'
+title: "🟢 Thream v1.0.0"
+description: "Your open source platform to stay close with your friends and communities, talk, chat, collaborate, share and have fun."
 isPublished: true
-publishedOn: '2022-04-11T10:24:55.206Z'
+publishedOn: "2022-04-11T10:24:55.206Z"
+---
+
+⚠️ **Thream** is **not maintained anymore**, and is no longer accessible on ~~[thream.theoludwig.fr](https://thream.theoludwig.fr)`~~.
+
+While the project taught me a lot, it had too much ambitions for new features, with nearly no users, and no contributors.
+
+You can still use the code as you wish and fork it to maintain it yourself, as the code is completely open source on [GitHub](https://github.com/Thream).
+
+This blog post is still available to explain the project, and how it was implemented.
+
 ---
 
 Hello! 👋
 
-After months of hard work, [Thream v1.0.0](https://thream.theoludwig.fr/) has been released! 🎉
+After months of hard work, [Thream v1.0.0](https://github.com/Thream) has been released! 🎉
 
-[**Thream**](https://thream.theoludwig.fr/) is your open-source platform to stay close with your friends and communities, talk, chat, collaborate, share and have fun.
+[**Thream**](https://github.com/Thream) is your open-source platform to stay close with your friends and communities, talk, chat, collaborate, share and have fun.
 
 ## Presentation
 
-[**Thream**](https://thream.theoludwig.fr/) is a social network to stay close with your friends and communities to talk, chat, collaborate and share.
+[**Thream**](https://github.com/Thream) is a social network to stay close with your friends and communities to talk, chat, collaborate and share.
 
 The project is largely inspired by [Discord](https://discord.com), a proprietary instant messaging service, but differentiates itself by its **non-profit open source philosophy** and will integrate special features.
 
@@ -23,7 +33,7 @@ The idea is that a user can create an account to authenticate with an email addr
 
 ![The Thream app on a community page](../../public/images/posts/thream-v1-0-0/thream-ui.png)
 
-[**Thream**](https://thream.theoludwig.fr/) is a website that works on any recent browser, accessible on [thream.theoludwig.fr](https://thream.theoludwig.fr/).
+[**Thream**](https://github.com/Thream) is a website that works on any recent browser.
 
 ## History
 
@@ -115,5 +125,3 @@ The other interest of the project is that it is completely **open-source**, and
 **Thream** is **non-profit** and therefore has no financial goal, deadline or specific feature target, which makes the design of the project a hobby and a way to learn new concepts.
 
 Feel free to give feebacks and suggestions to improve the project, and to report any bug you find.
-
-**Thream** is available: [**thream.theoludwig.fr**](https://thream.theoludwig.fr/).

blog/remarkSyntaxHighlightingPlugin.ts

@@ -1,7 +1,7 @@
-import type { Plugin, Transformer } from 'unified'
-import type { Literal, Node } from 'unist'
-import { visit } from 'unist-util-visit'
-import type { Highlighter } from 'shiki'
+import type { Plugin, Transformer } from "unified"
+import type { Literal, Node } from "unist"
+import { visit } from "unist-util-visit"
+import type { Highlighter } from "shiki"
 
 export interface RemarkSyntaxHighlightingPluginOptions {
   highlighter: Highlighter
@@ -20,11 +20,11 @@ export const remarkSyntaxHighlightingPlugin: Plugin<
   Literal
 > = (options) => {
   const transformer: Transformer<RemarkSyntaxHighlightingNode> = (tree) => {
-    visit<RemarkSyntaxHighlightingNode, string>(tree, 'code', (node) => {
-      node.type = 'html'
+    visit<RemarkSyntaxHighlightingNode, string>(tree, "code", (node) => {
+      node.type = "html"
       node.children = undefined
       node.value = options.highlighter.codeToHtml(node.value, {
-        lang: node.lang
+        lang: node.lang,
       })
     })
   }

components/Footer/FooterText.tsx

@@ -1,6 +1,6 @@
-import Link from 'next/link'
+import Link from "next/link"
 
-import { getI18n } from '@/i18n/i18n.server'
+import { getI18n } from "@/i18n/i18n.server"
 
 export const FooterText = (): JSX.Element => {
   const i18n = getI18n()
@@ -8,12 +8,12 @@ export const FooterText = (): JSX.Element => {
   return (
     <p>
       <Link
-        href='/'
-        className='text-yellow hover:underline dark:text-yellow-dark'
+        href="/"
+        className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
       >
         Théo LUDWIG
-      </Link>{' '}
-      | {i18n.translate('common.all-rights-reserved')}
+      </Link>{" "}
+      | {i18n.translate("common.all-rights-reserved")}
     </p>
   )
 }

components/Footer/FooterVersion.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo } from "react"
 
 interface FooterVersionProps {
   version: string
@@ -12,14 +12,14 @@ export const FooterVersion = (props: FooterVersionProps): JSX.Element => {
   }, [version])
 
   return (
-    <p className='mt-1'>
-      Version{' '}
+    <p className="mt-1">
+      Version{" "}
       <a
-        data-cy='version-link'
-        className='text-yellow hover:underline dark:text-yellow-dark'
+        data-cy="version-link"
+        className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
         href={versionLink}
-        target='_blank'
-        rel='noopener noreferrer'
+        target="_blank"
+        rel="noopener noreferrer"
       >
         {version}
       </a>

components/Footer/index.tsx

@@ -1,12 +1,12 @@
-import { FooterText } from './FooterText'
-import { FooterVersion } from './FooterVersion'
+import { FooterText } from "./FooterText"
+import { FooterVersion } from "./FooterVersion"
 
 export const Footer = async (): Promise<JSX.Element> => {
-  const { readPackage } = await import('read-pkg')
+  const { readPackage } = await import("read-pkg")
   const { version } = await readPackage()
 
   return (
-    <footer className='flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black'>
+    <footer className="flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black">
       <FooterText />
       <FooterVersion version={version} />
     </footer>

components/Header/Locales/Arrow.tsx

@@ -1,15 +1,15 @@
 export const Arrow = (): JSX.Element => {
   return (
     <svg
-      width='12'
-      height='8'
-      viewBox='0 0 12 8'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
+      width="12"
+      height="8"
+      viewBox="0 0 12 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        className='fill-current text-black dark:text-white'
-        d='M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z'
+        className="fill-current text-black dark:text-white"
+        d="M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z"
       />
     </svg>
   )

components/Header/Locales/LocaleFlag.tsx

@@ -1,7 +1,7 @@
-import Image from 'next/image'
+import Image from "next/image"
 
-import type { CookiesStore } from '@/utils/constants'
-import { useI18n } from '@/i18n/i18n.client'
+import type { CookiesStore } from "@/utils/constants"
+import { useI18n } from "@/i18n/i18n.client"
 
 export interface LocaleFlagProps {
   locale: string
@@ -22,7 +22,7 @@ export const LocaleFlag = (props: LocaleFlagProps): JSX.Element => {
         src={`/images/locales/${locale}.svg`}
         alt={locale}
       />
-      <p data-cy='locale-flag-text' className='mx-2 text-base'>
+      <p data-cy="locale-flag-text" className="mx-2 text-base">
         {i18n.translate(`common.${locale}`)}
       </p>
     </>

components/Header/Locales/index.tsx

@@ -1,14 +1,14 @@
-'use client'
+"use client"
 
-import { usePathname } from 'next/navigation'
-import { useCallback, useEffect, useState, useRef } from 'react'
-import classNames from 'clsx'
+import { usePathname } from "next/navigation"
+import { useCallback, useEffect, useState, useRef } from "react"
+import classNames from "clsx"
 
-import type { Locale as LocaleType, CookiesStore } from '@/utils/constants'
-import { LOCALES } from '@/utils/constants'
+import type { Locale as LocaleType, CookiesStore } from "@/utils/constants"
+import { LOCALES } from "@/utils/constants"
 
-import { Arrow } from './Arrow'
-import { LocaleFlag } from './LocaleFlag'
+import { Arrow } from "./Arrow"
+import { LocaleFlag } from "./LocaleFlag"
 
 export interface LocalesProps {
   currentLocale: string
@@ -38,28 +38,28 @@ export const Locales = (props: LocalesProps): JSX.Element => {
       }
     }
 
-    window.document.addEventListener('click', handleClickEvent)
+    window.document.addEventListener("click", handleClickEvent)
 
     return () => {
-      return window.removeEventListener('click', handleClickEvent)
+      return window.removeEventListener("click", handleClickEvent)
     }
   }, [])
 
   const handleLocale = async (locale: LocaleType): Promise<void> => {
-    const { setLocale } = await import('@/i18n/i18n.server')
+    const { setLocale } = await import("@/i18n/i18n.server")
     setLocale(locale)
   }
 
-  if (pathname.startsWith('/blog')) {
+  if (pathname.startsWith("/blog")) {
     return <></>
   }
 
   return (
-    <div className='flex cursor-pointer flex-col items-center justify-center'>
+    <div className="flex cursor-pointer flex-col items-center justify-center">
       <div
         ref={languageClickRef}
-        data-cy='locale-click'
-        className='mr-5 flex items-center'
+        data-cy="locale-click"
+        className="mr-5 flex items-center"
         onClick={handleHiddenMenu}
       >
         <LocaleFlag
@@ -70,10 +70,10 @@ export const Locales = (props: LocalesProps): JSX.Element => {
       </div>
 
       <ul
-        data-cy='locales-list'
+        data-cy="locales-list"
         className={classNames(
-          'absolute top-14 z-10 mr-4 mt-3 flex w-32 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag',
-          { hidden: hiddenMenu }
+          "absolute top-14 z-10 mr-4 mt-3 flex w-32 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag",
+          { hidden: hiddenMenu },
         )}
       >
         {LOCALES.filter((locale) => {
@@ -82,7 +82,7 @@ export const Locales = (props: LocalesProps): JSX.Element => {
           return (
             <li
               key={locale}
-              className='flex h-12 w-full items-center justify-center hover:bg-[#4f545c] hover:bg-opacity-20'
+              className="flex h-12 w-full items-center justify-center hover:bg-[#4f545c]/20"
               onClick={async () => {
                 return await handleLocale(locale)
               }}

components/Header/SwitchTheme.tsx

@@ -1,9 +1,9 @@
-'use client'
+"use client"
 
-import classNames from 'clsx'
+import classNames from "clsx"
 
-import { useTheme } from '@/theme/theme.client'
-import type { CookiesStore } from '@/utils/constants'
+import { useTheme } from "@/theme/theme.client"
+import type { CookiesStore } from "@/utils/constants"
 
 export interface SwitchThemeProps {
   cookiesStore: CookiesStore
@@ -14,63 +14,63 @@ export const SwitchTheme = (props: SwitchThemeProps): JSX.Element => {
   const theme = useTheme(cookiesStore)
 
   const handleClick = async (): Promise<void> => {
-    const { setTheme } = await import('@/theme/theme.server')
-    const newTheme = theme === 'dark' ? 'light' : 'dark'
+    const { setTheme } = await import("@/theme/theme.server")
+    const newTheme = theme === "dark" ? "light" : "dark"
     setTheme(newTheme)
   }
 
   return (
     <div
-      className='flex items-center'
-      data-cy='switch-theme-click'
+      className="flex items-center"
+      data-cy="switch-theme-click"
       onClick={handleClick}
     >
-      <div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
-        <div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
+      <div className="relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0">
+        <div className="h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out">
           <div
-            data-cy='switch-theme-dark'
+            data-cy="switch-theme-dark"
             className={classNames(
-              'absolute bottom-0 left-[8px] top-0 mb-auto mt-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
+              "absolute inset-y-0 left-[8px] my-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out",
               {
-                'opacity-100': theme === 'dark',
-                'opacity-0': theme === 'light'
-              }
+                "opacity-100": theme === "dark",
+                "opacity-0": theme === "light",
+              },
             )}
           >
-            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
+            <span className="relative flex size-[10px] items-center justify-center">
               🌜
             </span>
           </div>
           <div
-            data-cy='switch-theme-light'
+            data-cy="switch-theme-light"
             className={classNames(
-              'absolute bottom-0 right-[10px] top-0 mb-auto mt-auto h-[10px] w-[10px] leading-[0]',
+              "absolute inset-y-0 right-[10px] my-auto size-[10px] leading-[0]",
               {
-                'opacity-100': theme === 'light',
-                'opacity-0': theme === 'dark'
-              }
+                "opacity-100": theme === "light",
+                "opacity-0": theme === "dark",
+              },
             )}
           >
-            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
+            <span className="relative flex size-[10px] items-center justify-center">
               🌞
             </span>
           </div>
         </div>
         <div
           className={classNames(
-            'absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out',
+            "absolute top-[1px] box-border size-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out",
             {
-              'left-[27px]': theme === 'dark',
-              'left-0': theme === 'light'
-            }
+              "left-[27px]": theme === "dark",
+              "left-0": theme === "light",
+            },
           )}
-          style={{ border: '1px solid #4d4d4d' }}
+          style={{ border: "1px solid #4d4d4d" }}
         />
         <input
-          data-cy='switch-theme-input'
-          type='checkbox'
-          aria-label='Dark mode toggle'
-          className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0 hidden'
+          data-cy="switch-theme-input"
+          type="checkbox"
+          aria-label="Dark mode toggle"
+          className="absolute m-[-1px] hidden size-[1px] overflow-hidden border-0 p-0"
           defaultChecked
         />
       </div>

components/Header/index.tsx

@@ -1,39 +1,39 @@
-import { cookies } from 'next/headers'
-import Link from 'next/link'
-import Image from 'next/image'
+import { cookies } from "next/headers"
+import Link from "next/link"
+import Image from "next/image"
 
-import { getI18n } from '@/i18n/i18n.server'
+import Logo from "@/public/images/logo.png"
+import { getI18n } from "@/i18n/i18n.server"
 
-import { Locales } from './Locales'
-import { SwitchTheme } from './SwitchTheme'
+import { Locales } from "./Locales"
+import { SwitchTheme } from "./SwitchTheme"
 
 export const Header = (): JSX.Element => {
   const cookiesStore = cookies()
   const i18n = getI18n()
 
   return (
-    <header className='sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
-      <Link href='/'>
-        <div className='flex items-center justify-center'>
+    <header className="sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black">
+      <Link href="/">
+        <h1 className="flex items-center justify-center">
           <Image
             quality={100}
-            width={60}
-            height={60}
-            src='/images/icon_small.png'
-            alt='Théo LUDWIG'
+            className="size-16"
+            src={Logo}
+            alt="Théo LUDWIG"
             priority
           />
-          <strong className='ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block'>
+          <strong className="ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark sm:block sm:text-xl">
             Théo LUDWIG
           </strong>
-        </div>
+        </h1>
       </Link>
-      <div className='flex justify-between'>
-        <div className='flex flex-col items-center justify-center px-6'>
+      <div className="flex justify-between">
+        <div className="flex flex-col items-center justify-center px-6">
           <Link
-            href='/blog'
-            data-cy='header-blog-link'
-            className='text-yellow hover:underline dark:text-yellow-dark'
+            href="/blog"
+            data-cy="header-blog-link"
+            className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
           >
             Blog
           </Link>

components/Interests/InterestParagraph.tsx

@@ -1,19 +1,28 @@
-import htmlParser from 'html-react-parser'
+import htmlParser from "html-react-parser"
+import { faCode, faMicrochip } from "@fortawesome/free-solid-svg-icons"
+import { faGit } from "@fortawesome/free-brands-svg-icons"
+
+export const InterestsIcons = {
+  code: faCode,
+  "open-source": faGit,
+  "high-tech": faMicrochip,
+} as const
 
 export interface InterestParagraphProps {
   title: string
   description: string
+  id: keyof typeof InterestsIcons
 }
 
 export const InterestParagraph = (
-  props: InterestParagraphProps
+  props: InterestParagraphProps,
 ): JSX.Element => {
   const { title, description } = props
 
   return (
     <>
-      <p className='my-6 text-center text-gray dark:text-gray-dark'>
-        <strong className='text-lg font-semibold text-yellow dark:text-yellow-dark'>
+      <p className="my-6 text-center text-gray dark:text-gray-dark">
+        <strong className="text-lg font-semibold text-yellow dark:text-yellow-dark">
           {title}
         </strong>
         <br />

components/Interests/InterestsList/InterestItem.tsx

@@ -1,5 +1,5 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import type { IconDefinition } from "@fortawesome/free-solid-svg-icons"
 
 interface InterestItemProps {
   title: string
@@ -10,9 +10,9 @@ export const InterestItem = (props: InterestItemProps): JSX.Element => {
   const { fontAwesomeIcon, title } = props
 
   return (
-    <li className='interest-item mx-2 my-2 h-8 w-8' title={title}>
+    <li className="m-2 size-8" title={title}>
       <FontAwesomeIcon
-        className='block h-full w-full text-yellow dark:text-yellow-dark'
+        className="block size-full text-yellow dark:text-yellow-dark"
         icon={fontAwesomeIcon}
       />
     </li>

components/Interests/InterestsList/index.tsx

@@ -1,18 +1,28 @@
-import { faCode, faMicrochip } from '@fortawesome/free-solid-svg-icons'
-import { faGit } from '@fortawesome/free-brands-svg-icons'
+import { getI18n } from "@/i18n/i18n.server"
 
-import { InterestItem } from './InterestItem'
+import {
+  InterestsIcons,
+  type InterestParagraphProps,
+} from "../InterestParagraph"
+import { InterestItem } from "./InterestItem"
 
 export const InterestsList = (): JSX.Element => {
+  const i18n = getI18n()
+
+  let paragraphs = i18n.translate<InterestParagraphProps[]>(
+    "home.interests.paragraphs",
+  )
+  if (!Array.isArray(paragraphs)) {
+    paragraphs = []
+  }
+
   return (
-    <div className='my-4 flex justify-center'>
-      <ul className='m-0 flex w-96 list-none justify-around p-0'>
-        <InterestItem title='Developer Full Stack' fontAwesomeIcon={faCode} />
-        <InterestItem
-          title='Passionate about High-Tech'
-          fontAwesomeIcon={faMicrochip}
-        />
-        <InterestItem title='Open-Source enthusiast' fontAwesomeIcon={faGit} />
+    <div className="my-4 flex justify-center">
+      <ul className="m-0 flex w-96 list-none justify-around p-0">
+        {paragraphs.map(({ title, id }) => {
+          const icon = InterestsIcons[id]
+          return <InterestItem key={id} title={title} fontAwesomeIcon={icon} />
+        })}
       </ul>
     </div>
   )

components/Interests/index.tsx

@@ -1,21 +1,21 @@
-import { getI18n } from '@/i18n/i18n.server'
+import { getI18n } from "@/i18n/i18n.server"
 
-import type { InterestParagraphProps } from './InterestParagraph'
-import { InterestParagraph } from './InterestParagraph'
-import { InterestsList } from './InterestsList'
+import type { InterestParagraphProps } from "./InterestParagraph"
+import { InterestParagraph } from "./InterestParagraph"
+import { InterestsList } from "./InterestsList"
 
 export const Interests = (): JSX.Element => {
   const i18n = getI18n()
 
   let paragraphs = i18n.translate<InterestParagraphProps[]>(
-    'home.interests.paragraphs'
+    "home.interests.paragraphs",
   )
   if (!Array.isArray(paragraphs)) {
     paragraphs = []
   }
 
   return (
-    <div className='max-w-full'>
+    <div className="max-w-full">
       {paragraphs.map((paragraph, index) => {
         return <InterestParagraph key={index} {...paragraph} />
       })}

components/OpenSource/Repository.tsx

@@ -1,5 +1,5 @@
-import { ShadowContainer } from '@/components/design/ShadowContainer'
-import { GitHubIcon } from '@/components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon'
+import { ShadowContainer } from "@/components/design/ShadowContainer"
+import { GitHubIcon } from "@/components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon"
 
 export interface RepositoryProps {
   name: string
@@ -11,13 +11,15 @@ export const Repository = (props: RepositoryProps): JSX.Element => {
   const { name, description, href } = props
 
   return (
-    <ShadowContainer className='relative !mb-4 max-h-32 cursor-pointer p-6 transition-transform duration-200 ease-in-out hover:-translate-y-2'>
-      <a href={href} target='_blank' rel='noopener noreferrer'>
-        <div className='flex'>
-          <GitHubIcon className='mr-2 h-6' />
-          <span className='text-yellow dark:text-yellow-dark'>{name}</span>
+    <ShadowContainer className="relative !mb-4 max-h-32 cursor-pointer p-6 transition-transform duration-200 ease-in-out hover:-translate-y-2">
+      <a href={href} target="_blank" rel="noopener noreferrer">
+        <div className="flex">
+          <GitHubIcon className="mr-2 h-6" />
+          <span className="font-semibold text-yellow dark:text-yellow-dark">
+            {name}
+          </span>
         </div>
-        <p className='my-4'>{description}</p>
+        <p className="my-4">{description}</p>
       </a>
     </ShadowContainer>
   )

components/OpenSource/index.tsx

@@ -1,35 +1,35 @@
-import { getI18n } from '@/i18n/i18n.server'
+import { getI18n } from "@/i18n/i18n.server"
 
-import { Repository } from './Repository'
+import { Repository } from "./Repository"
 
 export const OpenSource = (): JSX.Element => {
   const i18n = getI18n()
 
   return (
-    <div className='mt-0 flex max-w-full flex-col items-center'>
-      <p className='text-center'>
-        {i18n.translate('home.open-source.description')}
+    <div className="mt-0 flex max-w-full flex-col items-center">
+      <p className="text-center">
+        {i18n.translate("home.open-source.description")}
       </p>
-      <div className='my-6 grid grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2'>
+      <div className="my-6 grid grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2">
         <Repository
-          name='nodejs/node'
-          description='Node.js JavaScript runtime ✨🐢🚀✨'
-          href='https://github.com/nodejs/node/commits?author=theoludwig'
+          name="nodejs/node"
+          description="Node.js JavaScript runtime ✨🐢🚀✨"
+          href="https://github.com/nodejs/node/commits?author=theoludwig"
         />
         <Repository
-          name='standard/standard'
-          description='🌟 JavaScript Style Guide, with linter & automatic code fixer'
-          href='https://github.com/standard/standard/commits?author=theoludwig'
+          name="standard/standard"
+          description="🌟 JavaScript Style Guide, with linter & automatic code fixer"
+          href="https://github.com/standard/standard/commits?author=theoludwig"
         />
         <Repository
-          name='nrwl/nx'
-          description='Smart, Fast and Extensible Build System'
-          href='https://github.com/nrwl/nx/commits?author=theoludwig'
+          name="DefinitelyTyped/DefinitelyTyped"
+          description="High quality TypeScript type definitions."
+          href="https://github.com/DefinitelyTyped/DefinitelyTyped/commits?author=theoludwig"
         />
         <Repository
-          name='vercel/next.js'
-          description='The React Framework'
-          href='https://github.com/vercel/next.js/commits?author=theoludwig'
+          name="vercel/next.js"
+          description="The React Framework"
+          href="https://github.com/vercel/next.js/commits?author=theoludwig"
         />
       </div>
     </div>

components/Portfolio/PortfolioItem.tsx

@@ -1,6 +1,6 @@
-import Image from 'next/image'
+import Image from "next/image"
 
-import { ShadowContainer } from '@/components/design/ShadowContainer'
+import { ShadowContainer } from "@/components/design/ShadowContainer"
 
 export interface PortfolioItemProps {
   title: string
@@ -13,29 +13,29 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
   const { title, description, link, image } = props
 
   return (
-    <ShadowContainer className='relative cursor-pointer items-center sm:ml-10'>
+    <ShadowContainer className="relative cursor-pointer items-center sm:ml-10">
       <a
-        className='group inline-flex justify-center'
-        target='_blank'
-        rel='noopener noreferrer'
+        className="group inline-flex justify-center"
+        target="_blank"
+        rel="noopener noreferrer"
         href={link}
         aria-label={title}
       >
-        <div className='flex justify-center'>
+        <div className="flex justify-center">
           <Image
             quality={100}
-            className='h-auto w-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5'
+            className="size-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5"
             width={300}
             height={300}
             src={image}
             alt={title}
           />
         </div>
-        <div className='absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100'>
-          <h3 className='my-6 text-xl font-semibold text-yellow dark:text-yellow-dark'>
+        <div className="absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100">
+          <h3 className="my-6 text-2xl font-semibold text-yellow dark:text-yellow-dark">
             {title}
           </h3>
-          <p className='my-6'>{description}</p>
+          <p className="mx-4 my-6 font-semibold">{description}</p>
         </div>
       </a>
     </ShadowContainer>

components/Portfolio/index.tsx

@@ -1,18 +1,18 @@
-import { getI18n } from '@/i18n/i18n.server'
+import { getI18n } from "@/i18n/i18n.server"
 
-import type { PortfolioItemProps } from './PortfolioItem'
-import { PortfolioItem } from './PortfolioItem'
+import type { PortfolioItemProps } from "./PortfolioItem"
+import { PortfolioItem } from "./PortfolioItem"
 
 export const Portfolio = (): JSX.Element => {
   const i18n = getI18n()
 
-  let items = i18n.translate<PortfolioItemProps[]>('home.portfolio.items')
+  let items = i18n.translate<PortfolioItemProps[]>("home.portfolio.items")
   if (!Array.isArray(items)) {
     items = []
   }
 
   return (
-    <div className='flex w-full flex-wrap justify-center px-3'>
+    <div className="flex w-full flex-wrap justify-center px-3">
       {items.map((item, index) => {
         return <PortfolioItem key={index} {...item} />
       })}

components/Profile/ProfileDescriptionBottom.tsx

@@ -1,23 +1,21 @@
-import { getI18n } from '@/i18n/i18n.server'
+import htmlParser from "html-react-parser"
+
+import { getI18n } from "@/i18n/i18n.server"
 
 export const ProfileDescriptionBottom = (): JSX.Element => {
   const i18n = getI18n()
 
   return (
-    <p className='mb-8 mt-8 text-base font-normal text-gray dark:text-gray-dark'>
-      {i18n.translate('home.about.description-bottom')}
-      {i18n.locale === 'fr-FR' ? (
-        <>
-          <br />
+    <div className="my-6 max-w-md text-center text-base text-gray dark:text-gray-dark">
+      <p>{htmlParser(i18n.translate("home.about.description-bottom"))}</p>
+
       <br />
       <a
-            href='/curriculum-vitae/index.html'
-            className='text-yellow hover:underline dark:text-yellow-dark'
+        href="/curriculum-vitae/index.html"
+        className="font-semibold text-yellow hover:underline dark:text-yellow-dark"
       >
-            Curriculum vitæ
+        Curriculum vitæ ({i18n.translate("common.fr-FR")})
       </a>
-        </>
-      ) : null}
-    </p>
+    </div>
   )
 }

components/Profile/ProfileInfo.tsx

@@ -1,15 +1,15 @@
-import { getI18n } from '@/i18n/i18n.server'
+import { getI18n } from "@/i18n/i18n.server"
 
 export const ProfileInformation = (): JSX.Element => {
   const i18n = getI18n()
 
   return (
-    <div className='mb-6 border-b-2 border-gray-600 pb-2 font-headline dark:border-gray-400'>
-      <h1 className='mb-2 text-4xl font-semibold text-yellow dark:text-yellow-dark'>
+    <div className="mb-6 border-b-2 border-gray-600 pb-2 font-headline dark:border-gray-400">
+      <h1 className="mb-2 text-4xl font-semibold text-yellow dark:text-yellow-dark">
         Théo LUDWIG
       </h1>
-      <h2 className='mb-3 text-base'>
-        {i18n.translate('home.about.description')}
+      <h2 className="mb-3 text-base">
+        {i18n.translate("home.about.description")}
       </h2>
     </div>
   )

components/Profile/ProfileList/ProfileItem.tsx

@@ -8,14 +8,14 @@ export const ProfileItem = (props: ProfileItemProps): JSX.Element => {
   const { title, value, link } = props
 
   return (
-    <li className='mb-3 before:table after:clear-both after:table'>
-      <strong className='float-left block w-28 text-sm font-bold text-black dark:text-white'>
+    <li className="mb-3 before:table after:clear-both after:table">
+      <strong className="float-left block w-28 text-sm font-bold text-black dark:text-white">
         {title}
       </strong>
-      <span className='mb-4 ml-0 block text-sm font-normal text-gray dark:text-gray-dark sm:mb-0 sm:ml-32'>
+      <span className="mb-4 ml-0 block text-sm font-normal text-gray dark:text-gray-dark sm:mb-0 sm:ml-32">
         {link != null ? (
           <a
-            className='text-gray hover:underline dark:text-gray-dark'
+            className="text-gray hover:underline dark:text-gray-dark"
             href={link}
           >
             {value}

components/Profile/ProfileList/index.tsx

@@ -1,12 +1,12 @@
-'use client'
+"use client"
 
-import { useMemo } from 'react'
+import { useMemo } from "react"
 
-import { useI18n } from '@/i18n/i18n.client'
-import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from '@/utils/getAge'
-import type { CookiesStore } from '@/utils/constants'
+import { useI18n } from "@/i18n/i18n.client"
+import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from "@/utils/getAge"
+import type { CookiesStore } from "@/utils/constants"
 
-import { ProfileItem } from './ProfileItem'
+import { ProfileItem } from "./ProfileItem"
 
 export interface ProfileListProps {
   cookiesStore: CookiesStore
@@ -22,25 +22,25 @@ export const ProfileList = (props: ProfileListProps): JSX.Element => {
   }, [])
 
   return (
-    <ul className='m-0 list-none p-0'>
+    <ul className="m-0 list-none p-0">
       <ProfileItem
-        title={i18n.translate('home.about.pronouns')}
-        value={i18n.translate('home.about.pronouns-value')}
+        title={i18n.translate("home.about.pronouns")}
+        value={i18n.translate("home.about.pronouns-value")}
       />
       <ProfileItem
-        title={i18n.translate('home.about.birth-date')}
+        title={i18n.translate("home.about.birth-date")}
         value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
-          'home.about.years-old'
+          "home.about.years-old",
         )})`}
       />
       <ProfileItem
-        title={i18n.translate('home.about.nationality')}
-        value='Alsace, France'
+        title={i18n.translate("home.about.nationality")}
+        value="Alsace, France"
       />
       <ProfileItem
-        title='Email'
-        value='contact@theoludwig.fr'
-        link='mailto:contact@theoludwig.fr'
+        title="Email"
+        value="contact@theoludwig.fr"
+        link="mailto:contact@theoludwig.fr"
       />
     </ul>
   )

components/Profile/ProfileLogo.tsx

@@ -1,11 +1,11 @@
-import Image from 'next/image'
+import Image from "next/image"
 
-import Logo from 'public/images/logo.png'
+import Logo from "@/public/images/logo.png"
 
 export const ProfileLogo = (): JSX.Element => {
   return (
-    <div className='max-h-[370px] max-w-[370px] px-2 py-6'>
-      <Image quality={100} src={Logo} alt='Théo LUDWIG' priority />
+    <div className="max-h-[370px] max-w-[370px] px-2 py-6">
+      <Image quality={100} src={Logo} alt="Théo LUDWIG" priority />
     </div>
   )
 }

components/Profile/SocialMediaList/SocialMediaIcons/EmailIcon.tsx

@@ -1,12 +1,12 @@
-import { Icon } from './Icon'
+import { Icon } from "./Icon"
 
 export const EmailIcon = (
-  props: React.SVGProps<SVGSVGElement>
+  props: React.SVGProps<SVGSVGElement>,
 ): JSX.Element => {
   return (
     <Icon {...props}>
       <title>Email</title>
-      <path d='M15.61 12c0 1.99-1.62 3.61-3.61 3.61-1.99 0-3.61-1.62-3.61-3.61 0-1.99 1.62-3.61 3.61-3.61 1.99 0 3.61 1.62 3.61 3.61M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c2.424 0 4.761-.722 6.76-2.087l.034-.024-1.617-1.879-.027.017A9.494 9.494 0 0112 21.54c-5.26 0-9.54-4.28-9.54-9.54 0-5.26 4.28-9.54 9.54-9.54 5.26 0 9.54 4.28 9.54 9.54a9.63 9.63 0 01-.225 2.05c-.301 1.239-1.169 1.618-1.82 1.568-.654-.053-1.42-.52-1.426-1.661V12A6.076 6.076 0 0012 5.93 6.076 6.076 0 005.93 12 6.076 6.076 0 0012 18.07a6.02 6.02 0 004.3-1.792 3.9 3.9 0 003.32 1.805c.874 0 1.74-.292 2.437-.821.719-.547 1.256-1.336 1.553-2.285.047-.154.135-.504.135-.507l.002-.013c.175-.76.253-1.52.253-2.457 0-6.617-5.383-12-12-12' />
+      <path d="M15.61 12c0 1.99-1.62 3.61-3.61 3.61-1.99 0-3.61-1.62-3.61-3.61 0-1.99 1.62-3.61 3.61-3.61 1.99 0 3.61 1.62 3.61 3.61M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c2.424 0 4.761-.722 6.76-2.087l.034-.024-1.617-1.879-.027.017A9.494 9.494 0 0112 21.54c-5.26 0-9.54-4.28-9.54-9.54 0-5.26 4.28-9.54 9.54-9.54 5.26 0 9.54 4.28 9.54 9.54a9.63 9.63 0 01-.225 2.05c-.301 1.239-1.169 1.618-1.82 1.568-.654-.053-1.42-.52-1.426-1.661V12A6.076 6.076 0 0012 5.93 6.076 6.076 0 005.93 12 6.076 6.076 0 0012 18.07a6.02 6.02 0 004.3-1.792 3.9 3.9 0 003.32 1.805c.874 0 1.74-.292 2.437-.821.719-.547 1.256-1.336 1.553-2.285.047-.154.135-.504.135-.507l.002-.013c.175-.76.253-1.52.253-2.457 0-6.617-5.383-12-12-12" />
     </Icon>
   )
 }

components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx

@@ -1,12 +1,12 @@
-import { Icon } from './Icon'
+import { Icon } from "./Icon"
 
 export const GitHubIcon = (
-  props: React.SVGProps<SVGSVGElement>
+  props: React.SVGProps<SVGSVGElement>,
 ): JSX.Element => {
   return (
     <Icon {...props}>
       <title>GitHub</title>
-      <path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12' />
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
     </Icon>
   )
 }

components/Profile/SocialMediaList/SocialMediaIcons/GitLabIcon.tsx

@@ -1,12 +1,12 @@
-import { Icon } from './Icon'
+import { Icon } from "./Icon"
 
 export const GitLabIcon = (
-  props: React.SVGProps<SVGSVGElement>
+  props: React.SVGProps<SVGSVGElement>,
 ): JSX.Element => {
   return (
     <Icon {...props}>
       <title>GitLab</title>
-      <path d='M4.845.904c-.435 0-.82.28-.955.692C2.639 5.449 1.246 9.728.07 13.335a1.437 1.437 0 00.522 1.607l11.071 8.045c.2.145.472.144.67-.004l11.073-8.04a1.436 1.436 0 00.522-1.61c-1.285-3.942-2.683-8.256-3.817-11.746a1.004 1.004 0 00-.957-.684.987.987 0 00-.949.69l-2.405 7.408H8.203l-2.41-7.408a.987.987 0 00-.942-.69h-.006zm-.006 1.42l2.173 6.678H2.675zm14.326 0l2.168 6.678h-4.341zm-10.593 7.81h6.862c-1.142 3.52-2.288 7.04-3.434 10.559L8.572 10.135zm-5.514.005h4.321l3.086 9.5zm13.567 0h4.325c-2.467 3.17-4.95 6.328-7.411 9.502 1.028-3.167 2.059-6.334 3.086-9.502zM2.1 10.762l6.977 8.947-7.817-5.682a.305.305 0 01-.112-.341zm19.798 0l.952 2.922a.305.305 0 01-.11.341v.002l-7.82 5.68.026-.035z' />
+      <path d="M4.845.904c-.435 0-.82.28-.955.692C2.639 5.449 1.246 9.728.07 13.335a1.437 1.437 0 00.522 1.607l11.071 8.045c.2.145.472.144.67-.004l11.073-8.04a1.436 1.436 0 00.522-1.61c-1.285-3.942-2.683-8.256-3.817-11.746a1.004 1.004 0 00-.957-.684.987.987 0 00-.949.69l-2.405 7.408H8.203l-2.41-7.408a.987.987 0 00-.942-.69h-.006zm-.006 1.42l2.173 6.678H2.675zm14.326 0l2.168 6.678h-4.341zm-10.593 7.81h6.862c-1.142 3.52-2.288 7.04-3.434 10.559L8.572 10.135zm-5.514.005h4.321l3.086 9.5zm13.567 0h4.325c-2.467 3.17-4.95 6.328-7.411 9.502 1.028-3.167 2.059-6.334 3.086-9.502zM2.1 10.762l6.977 8.947-7.817-5.682a.305.305 0 01-.112-.341zm19.798 0l.952 2.922a.305.305 0 01-.11.341v.002l-7.82 5.68.026-.035z" />
     </Icon>
   )
 }

components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx

@@ -1,15 +1,15 @@
-import classNames from 'clsx'
+import classNames from "clsx"
 
 export const Icon = (props: React.SVGProps<SVGSVGElement>): JSX.Element => {
   const { children, className, ...rest } = props
 
   return (
     <svg
-      xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 24 24'
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
       className={classNames(
-        'h-8 w-8 fill-current text-black dark:text-white',
-        className
+        "size-8 fill-current text-black dark:text-white",
+        className,
       )}
       {...rest}
     >

components/Profile/SocialMediaList/SocialMediaIcons/NPMIcon.tsx

@@ -1,10 +1,10 @@
-import { Icon } from './Icon'
+import { Icon } from "./Icon"
 
 export const NPMIcon = (props: React.SVGProps<SVGSVGElement>): JSX.Element => {
   return (
     <Icon {...props}>
       <title>npm</title>
-      <path d='M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z' />
+      <path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" />
     </Icon>
   )
 }

components/Profile/SocialMediaList/SocialMediaIcons/TwitchIcon.tsx

@@ -1,12 +1,12 @@
-import { Icon } from './Icon'
+import { Icon } from "./Icon"
 
 export const TwitchIcon = (
-  props: React.SVGProps<SVGSVGElement>
+  props: React.SVGProps<SVGSVGElement>,
 ): JSX.Element => {
   return (
     <Icon {...props}>
       <title>Twitch</title>
-      <path d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z' />
+      <path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z" />
     </Icon>
   )
 }

components/Profile/SocialMediaList/SocialMediaIcons/TwitterIcon.tsx

@@ -1,12 +1,12 @@
-import { Icon } from './Icon'
+import { Icon } from "./Icon"
 
 export const TwitterIcon = (
-  props: React.SVGProps<SVGSVGElement>
+  props: React.SVGProps<SVGSVGElement>,
 ): JSX.Element => {
   return (
     <Icon {...props}>
       <title>Twitter</title>
-      <path d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z' />
+      <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
     </Icon>
   )
 }

components/Profile/SocialMediaList/SocialMediaIcons/YouTubeIcon.tsx

@@ -1,12 +1,12 @@
-import { Icon } from './Icon'
+import { Icon } from "./Icon"
 
 export const YouTubeIcon = (
-  props: React.SVGProps<SVGSVGElement>
+  props: React.SVGProps<SVGSVGElement>,
 ): JSX.Element => {
   return (
     <Icon {...props}>
       <title>YouTube</title>
-      <path d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' />
+      <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
     </Icon>
   )
 }

components/Profile/SocialMediaList/SocialMediaItem.tsx

@@ -7,13 +7,13 @@ export const SocialMediaItem = (props: SocialMediaItemProps): JSX.Element => {
   const { link, ariaLabel, children } = props
 
   return (
-    <li className='mx-4 my-1 inline-block'>
+    <li className="mx-4 my-1 inline-block">
       <a
         href={link}
         aria-label={ariaLabel}
-        target='_blank'
-        rel='noopener noreferrer'
-        className='relative inline-block bg-transparent'
+        target="_blank"
+        rel="noopener noreferrer"
+        className="relative inline-block bg-transparent"
       >
         {children}
       </a>

components/Profile/SocialMediaList/index.tsx

@@ -1,43 +1,43 @@
-import { SocialMediaItem } from './SocialMediaItem'
-import { TwitterIcon } from './SocialMediaIcons/TwitterIcon'
-import { GitHubIcon } from './SocialMediaIcons/GitHubIcon'
-import { GitLabIcon } from './SocialMediaIcons/GitLabIcon'
-import { YouTubeIcon } from './SocialMediaIcons/YouTubeIcon'
-import { TwitchIcon } from './SocialMediaIcons/TwitchIcon'
-import { EmailIcon } from './SocialMediaIcons/EmailIcon'
-import { NPMIcon } from './SocialMediaIcons/NPMIcon'
+import { SocialMediaItem } from "./SocialMediaItem"
+import { TwitterIcon } from "./SocialMediaIcons/TwitterIcon"
+import { GitHubIcon } from "./SocialMediaIcons/GitHubIcon"
+import { GitLabIcon } from "./SocialMediaIcons/GitLabIcon"
+import { YouTubeIcon } from "./SocialMediaIcons/YouTubeIcon"
+import { TwitchIcon } from "./SocialMediaIcons/TwitchIcon"
+import { EmailIcon } from "./SocialMediaIcons/EmailIcon"
+import { NPMIcon } from "./SocialMediaIcons/NPMIcon"
 
 export const SocialMediaList = (): JSX.Element => {
   return (
-    <ul className='social-media-list m-0 mt-2 list-none py-4 text-center'>
-      <SocialMediaItem link='https://github.com/theoludwig' ariaLabel='GitHub'>
+    <ul className="m-0 mt-2 list-none py-4 text-center">
+      <SocialMediaItem link="https://github.com/theoludwig" ariaLabel="GitHub">
         <GitHubIcon />
       </SocialMediaItem>
-      <SocialMediaItem link='https://gitlab.com/theoludwig' ariaLabel='GitLab'>
+      <SocialMediaItem link="https://gitlab.com/theoludwig" ariaLabel="GitLab">
         <GitLabIcon />
       </SocialMediaItem>
-      <SocialMediaItem link='https://www.npmjs.com/~theoludwig' ariaLabel='npm'>
+      <SocialMediaItem link="https://www.npmjs.com/~theoludwig" ariaLabel="npm">
         <NPMIcon />
       </SocialMediaItem>
       <SocialMediaItem
-        link='https://twitter.com/theoludwig_'
-        ariaLabel='Twitter'
+        link="https://twitter.com/theoludwig_"
+        ariaLabel="Twitter"
       >
         <TwitterIcon />
       </SocialMediaItem>
       <SocialMediaItem
-        link='https://www.youtube.com/@theo_ludwig'
-        ariaLabel='YouTube'
+        link="https://www.youtube.com/@theo_ludwig"
+        ariaLabel="YouTube"
       >
         <YouTubeIcon />
       </SocialMediaItem>
       <SocialMediaItem
-        link='https://www.twitch.tv/theoludwig'
-        ariaLabel='Twitch'
+        link="https://www.twitch.tv/theoludwig"
+        ariaLabel="Twitch"
       >
         <TwitchIcon />
       </SocialMediaItem>
-      <SocialMediaItem link='mailto:contact@theoludwig.fr' ariaLabel='Email'>
+      <SocialMediaItem link="mailto:contact@theoludwig.fr" ariaLabel="Email">
         <EmailIcon />
       </SocialMediaItem>
     </ul>

components/Profile/index.tsx

@@ -1,15 +1,15 @@
-import { cookies } from 'next/headers'
+import { cookies } from "next/headers"
 
-import { ProfileDescriptionBottom } from './ProfileDescriptionBottom'
-import { ProfileInformation } from './ProfileInfo'
-import { ProfileList } from './ProfileList'
-import { ProfileLogo } from './ProfileLogo'
+import { ProfileDescriptionBottom } from "./ProfileDescriptionBottom"
+import { ProfileInformation } from "./ProfileInfo"
+import { ProfileList } from "./ProfileList"
+import { ProfileLogo } from "./ProfileLogo"
 
 export const Profile = (): JSX.Element => {
   const cookiesStore = cookies()
 
   return (
-    <div className='flex flex-col items-center justify-center px-10 pt-2 md:flex-row md:pt-10'>
+    <div className="flex flex-col items-center justify-center px-10 pt-2 md:flex-row md:pt-10">
       <ProfileLogo />
       <div>
         <ProfileInformation />

components/Skills/Skill.tsx

@@ -1,9 +1,9 @@
-import Image from 'next/image'
+import Image from "next/image"
 
-import { getTheme } from '@/theme/theme.server'
+import { getTheme } from "@/theme/theme.server"
 
-import type { SkillName } from './skills'
-import { skills } from './skills'
+import type { SkillName } from "./skills"
+import { skills } from "./skills"
 
 export interface SkillComponentProps {
   skill: SkillName
@@ -17,10 +17,10 @@ export const SkillComponent = (props: SkillComponentProps): JSX.Element => {
   const theme = getTheme()
 
   const getImage = (): string => {
-    if (typeof skillProperties.image === 'string') {
+    if (typeof skillProperties.image === "string") {
       return skillProperties.image
     }
-    if (theme === 'light') {
+    if (theme === "light") {
       return skillProperties.image.light
     }
     return skillProperties.image.dark
@@ -29,20 +29,20 @@ export const SkillComponent = (props: SkillComponentProps): JSX.Element => {
   return (
     <a
       href={skillProperties.link}
-      className='mx-2 max-w-xl text-yellow hover:underline dark:text-yellow-dark'
-      target='_blank'
-      rel='noopener noreferrer'
+      className="mx-2 max-w-xl text-yellow hover:underline dark:text-yellow-dark"
+      target="_blank"
+      rel="noopener noreferrer"
     >
-      <div className='text-center'>
+      <div className="text-center">
         <Image
-          className='inline h-16 w-16'
+          className="inline size-16"
           quality={100}
           width={64}
           height={64}
           alt={skill}
           src={getImage()}
         />
-        <p className='mt-1'>{skill}</p>
+        <p className="mt-1 font-semibold">{skill}</p>
       </div>
     </a>
   )

components/Skills/SkillsSection.tsx

@@ -1,4 +1,4 @@
-import { ShadowContainer } from '@/components/design/ShadowContainer'
+import { ShadowContainer } from "@/components/design/ShadowContainer"
 
 export interface SkillsSectionProps {
   title: string
@@ -10,15 +10,15 @@ export const SkillsSection = (props: SkillsSectionProps): JSX.Element => {
 
   return (
     <ShadowContainer>
-      <div className='mx-auto w-full px-4'>
-        <div className='flex flex-wrap px-4 py-6'>
-          <div className='flex-1'>
-            <div className='mb-8 border-b border-gray-600 dark:border-white dark:border-opacity-10'>
-              <h3 className='my-3 text-xl font-semibold text-yellow dark:text-yellow-dark'>
+      <div className="mx-auto w-full px-4">
+        <div className="flex flex-wrap px-4 py-6">
+          <div className="flex-1">
+            <div className="mb-8 border-b border-gray-600 dark:border-white/10">
+              <h3 className="my-3 text-xl font-semibold text-yellow dark:text-yellow-dark">
                 {title}
               </h3>
             </div>
-            <div className='flex flex-wrap justify-around'>{children}</div>
+            <div className="flex flex-wrap justify-around">{children}</div>
           </div>
         </div>
       </div>

components/Skills/index.tsx

@@ -1,40 +1,40 @@
-import { getI18n } from '@/i18n/i18n.server'
+import { getI18n } from "@/i18n/i18n.server"
 
-import { SkillComponent } from './Skill'
-import { SkillsSection } from './SkillsSection'
+import { SkillComponent } from "./Skill"
+import { SkillsSection } from "./SkillsSection"
 
 export const Skills = (): JSX.Element => {
   const i18n = getI18n()
 
   return (
     <>
-      <SkillsSection title={i18n.translate('home.skills.languages')}>
-        <SkillComponent skill='TypeScript' />
-        <SkillComponent skill='Python' />
-        <SkillComponent skill='C/C++' />
-        <SkillComponent skill='PHP' />
+      <SkillsSection title={i18n.translate("home.skills.languages")}>
+        <SkillComponent skill="TypeScript" />
+        <SkillComponent skill="Python" />
+        <SkillComponent skill="C/C++" />
+        <SkillComponent skill="PHP" />
       </SkillsSection>
 
-      <SkillsSection title='Frontend'>
-        <SkillComponent skill='HTML' />
-        <SkillComponent skill='CSS' />
-        <SkillComponent skill='Tailwind CSS' />
-        <SkillComponent skill='React.js (+ Next.js)' />
+      <SkillsSection title="Frontend">
+        <SkillComponent skill="HTML" />
+        <SkillComponent skill="CSS" />
+        <SkillComponent skill="Tailwind CSS" />
+        <SkillComponent skill="React.js (+ Next.js)" />
       </SkillsSection>
 
-      <SkillsSection title='Backend'>
-        <SkillComponent skill='Laravel' />
-        <SkillComponent skill='Node.js' />
-        <SkillComponent skill='Fastify' />
-        <SkillComponent skill='PostgreSQL' />
+      <SkillsSection title="Backend">
+        <SkillComponent skill="Laravel" />
+        <SkillComponent skill="Node.js" />
+        <SkillComponent skill="Fastify" />
+        <SkillComponent skill="PostgreSQL" />
       </SkillsSection>
 
-      <SkillsSection title={i18n.translate('home.skills.software-tools')}>
-        <SkillComponent skill='GNU/Linux' />
-        <SkillComponent skill='Arch Linux' />
-        <SkillComponent skill='Visual Studio Code' />
-        <SkillComponent skill='Git' />
-        <SkillComponent skill='Docker' />
+      <SkillsSection title={i18n.translate("home.skills.software-tools")}>
+        <SkillComponent skill="GNU/Linux" />
+        <SkillComponent skill="Arch Linux" />
+        <SkillComponent skill="Visual Studio Code" />
+        <SkillComponent skill="Git" />
+        <SkillComponent skill="Docker" />
       </SkillsSection>
     </>
   )

components/Skills/skills.ts

@@ -5,111 +5,111 @@ export interface Skill {
 
 export const skills = {
   JavaScript: {
-    link: 'https://developer.mozilla.org/docs/Web/JavaScript',
-    image: '/images/skills/JavaScript.png'
+    link: "https://developer.mozilla.org/docs/Web/JavaScript",
+    image: "/images/skills/JavaScript.png",
   },
   TypeScript: {
-    link: 'https://www.typescriptlang.org/',
-    image: '/images/skills/TypeScript.png'
+    link: "https://www.typescriptlang.org/",
+    image: "/images/skills/TypeScript.png",
   },
   Python: {
-    link: 'https://www.python.org/',
-    image: '/images/skills/Python.png'
+    link: "https://www.python.org/",
+    image: "/images/skills/Python.png",
   },
-  'C/C++': {
-    link: 'https://isocpp.org/',
-    image: '/images/skills/C-Cpp.png'
+  "C/C++": {
+    link: "https://isocpp.org/",
+    image: "/images/skills/C-Cpp.png",
   },
   PHP: {
-    link: 'https://www.php.net/',
-    image: '/images/skills/PHP.png'
+    link: "https://www.php.net/",
+    image: "/images/skills/PHP.png",
   },
   Laravel: {
-    link: 'https://laravel.com/',
-    image: '/images/skills/Laravel.png'
+    link: "https://laravel.com/",
+    image: "/images/skills/Laravel.png",
   },
   Dart: {
-    link: 'https://dart.dev/',
-    image: '/images/skills/Dart.png'
+    link: "https://dart.dev/",
+    image: "/images/skills/Dart.png",
   },
   Flutter: {
-    link: 'https://flutter.dev/',
-    image: '/images/skills/Flutter.webp'
+    link: "https://flutter.dev/",
+    image: "/images/skills/Flutter.webp",
   },
   HTML: {
-    link: 'https://developer.mozilla.org/docs/Web/HTML',
-    image: '/images/skills/HTML.png'
+    link: "https://developer.mozilla.org/docs/Web/HTML",
+    image: "/images/skills/HTML.png",
   },
   CSS: {
-    link: 'https://developer.mozilla.org/docs/Web/CSS',
-    image: '/images/skills/CSS.png'
+    link: "https://developer.mozilla.org/docs/Web/CSS",
+    image: "/images/skills/CSS.png",
   },
-  'Tailwind CSS': {
-    link: 'https://tailwindcss.com/',
-    image: '/images/skills/TailwindCSS.png'
+  "Tailwind CSS": {
+    link: "https://tailwindcss.com/",
+    image: "/images/skills/TailwindCSS.png",
   },
   SASS: {
-    link: 'https://sass-lang.com/',
-    image: '/images/skills/SASS.svg'
+    link: "https://sass-lang.com/",
+    image: "/images/skills/SASS.svg",
   },
-  'React.js (+ Next.js)': {
-    link: 'https://reactjs.org/',
-    image: '/images/skills/ReactJS.png'
+  "React.js (+ Next.js)": {
+    link: "https://reactjs.org/",
+    image: "/images/skills/ReactJS.png",
   },
-  'Node.js': {
-    link: 'https://nodejs.org/',
-    image: '/images/skills/NodeJS.png'
+  "Node.js": {
+    link: "https://nodejs.org/",
+    image: "/images/skills/NodeJS.png",
   },
   Fastify: {
-    link: 'https://www.fastify.io/',
+    link: "https://www.fastify.io/",
     image: {
-      light: '/images/skills/Fastify-light.png',
-      dark: '/images/skills/Fastify-dark.png'
-    }
+      light: "/images/skills/Fastify-light.png",
+      dark: "/images/skills/Fastify-dark.png",
+    },
   },
   Prisma: {
-    link: 'https://www.prisma.io/',
+    link: "https://www.prisma.io/",
     image: {
-      light: '/images/skills/Prisma-light.png',
-      dark: '/images/skills/Prisma-dark.png'
-    }
+      light: "/images/skills/Prisma-light.png",
+      dark: "/images/skills/Prisma-dark.png",
+    },
   },
   PostgreSQL: {
-    link: 'https://www.postgresql.org/',
-    image: '/images/skills/PostgreSQL.png'
+    link: "https://www.postgresql.org/",
+    image: "/images/skills/PostgreSQL.png",
   },
   MySQL: {
-    link: 'https://www.mysql.com/',
-    image: '/images/skills/MySQL.png'
+    link: "https://www.mysql.com/",
+    image: "/images/skills/MySQL.png",
   },
   Strapi: {
-    link: 'https://strapi.io/',
-    image: '/images/skills/Strapi.png'
+    link: "https://strapi.io/",
+    image: "/images/skills/Strapi.png",
   },
-  'Visual Studio Code': {
-    link: 'https://code.visualstudio.com/',
-    image: '/images/skills/VisualStudioCode.png'
+  "Visual Studio Code": {
+    link: "https://code.visualstudio.com/",
+    image: "/images/skills/VisualStudioCode.png",
   },
   Git: {
-    link: 'https://git-scm.com/',
-    image: '/images/skills/Git.png'
+    link: "https://git-scm.com/",
+    image: "/images/skills/Git.png",
   },
   Ubuntu: {
-    link: 'https://ubuntu.com/',
-    image: '/images/skills/Ubuntu.png'
+    link: "https://ubuntu.com/",
+    image: "/images/skills/Ubuntu.png",
   },
-  'Arch Linux': {
-    link: 'https://archlinux.org/',
-    image: '/images/skills/ArchLinux.png'
+  "Arch Linux": {
+    link: "https://archlinux.org/",
+    image: "/images/skills/ArchLinux.png",
   },
-  'GNU/Linux': {
-    link: 'https://www.gnu.org/',
-    image: '/images/skills/GNU-Linux.png'
+  "GNU/Linux": {
+    link: "https://www.gnu.org/",
+    image: "/images/skills/GNU-Linux.png",
   },
   Docker: {
-    link: 'https://www.docker.com/',
-    image: '/images/skills/Docker.png'
-  }
+    link: "https://www.docker.com/",
+    image: "/images/skills/Docker.png",
+  },
 } as const
 
 export type SkillName = keyof typeof skills

components/design/Loader.tsx

@@ -1,4 +1,4 @@
-import classNames from 'clsx'
+import classNames from "clsx"
 
 export interface LoaderProps {
   width?: number
@@ -13,16 +13,16 @@ export const Loader = (props: LoaderProps): JSX.Element => {
     <div
       style={{
         width,
-        height
+        height,
       }}
       className={classNames(
-        'animate-spin inline-block border-[3px] border-current border-t-transparent text-yellow dark:text-yellow-dark rounded-full',
-        className
+        "inline-block animate-spin rounded-full border-[3px] border-current border-t-transparent text-yellow dark:text-yellow-dark",
+        className,
       )}
-      role='status'
-      aria-label='loading'
+      role="status"
+      aria-label="loading"
     >
-      <span className='sr-only'>Loading...</span>
+      <span className="sr-only">Loading...</span>
     </div>
   )
 }

components/design/RevealFade.tsx

@@ -1,6 +1,6 @@
-'use client'
+"use client"
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef } from "react"
 
 export type RevealFadeProps = React.PropsWithChildren
 
@@ -15,22 +15,22 @@ export const RevealFade = (props: RevealFadeProps): JSX.Element => {
         for (const entry of entries) {
           if (entry.isIntersecting) {
             entry.target.className =
-              'opacity-100 visible translate-y-0 transition-all duration-700 ease-in-out'
+              "opacity-100 visible translate-y-0 transition-all duration-700 ease-in-out"
             observer.unobserve(entry.target)
           }
         }
       },
       {
         root: null,
-        rootMargin: '0px',
-        threshold: 0.28
-      }
+        rootMargin: "0px",
+        threshold: 0.28,
+      },
     )
     observer.observe(htmlElement.current as HTMLDivElement)
   }, [])
 
   return (
-    <div ref={htmlElement} className='invisible -translate-y-7 opacity-0'>
+    <div ref={htmlElement} className="invisible -translate-y-7 opacity-0">
       {children}
     </div>
   )

components/design/Section/SectionHeading.tsx

@@ -1,10 +1,13 @@
-type SectionHeadingProps = React.ComponentPropsWithRef<'h2'>
+type SectionHeadingProps = React.ComponentPropsWithRef<"h2">
 
 export const SectionHeading = (props: SectionHeadingProps): JSX.Element => {
   const { children, ...rest } = props
 
   return (
-    <h2 {...rest} className='mb-3 mt-1 text-center text-4xl font-semibold'>
+    <h2
+      {...rest}
+      className="mb-3 mt-1 text-center text-4xl font-semibold text-yellow dark:text-yellow-dark"
+    >
       {children}
     </h2>
   )

components/design/Section/index.tsx

@@ -1,7 +1,7 @@
-import { ShadowContainer } from '@/components/design/ShadowContainer'
-import { SectionHeading } from '@/components/design/Section/SectionHeading'
+import { ShadowContainer } from "@/components/design/ShadowContainer"
+import { SectionHeading } from "@/components/design/Section/SectionHeading"
 
-type SectionProps = React.ComponentPropsWithRef<'section'> & {
+type SectionProps = React.ComponentPropsWithRef<"section"> & {
   heading?: string
   description?: string
   isMain?: boolean
@@ -20,13 +20,13 @@ export const Section = (props: SectionProps): JSX.Element => {
 
   if (isMain) {
     return (
-      <div className='w-full px-3'>
+      <div className="w-full px-3">
         <ShadowContainer style={{ marginTop: 50 }}>
           <section {...rest}>
             {heading != null ? (
               <SectionHeading>{heading}</SectionHeading>
             ) : null}
-            <div className='w-full px-3'>{children}</div>
+            <div className="w-full px-3">{children}</div>
           </section>
         </ShadowContainer>
       </div>
@@ -37,7 +37,7 @@ export const Section = (props: SectionProps): JSX.Element => {
     return (
       <section {...rest}>
         {heading != null ? <SectionHeading>{heading}</SectionHeading> : null}
-        <div className='w-full px-3'>{children}</div>
+        <div className="w-full px-3">{children}</div>
       </section>
     )
   }
@@ -52,13 +52,13 @@ export const Section = (props: SectionProps): JSX.Element => {
         </SectionHeading>
       ) : null}
       {description != null ? (
-        <p style={{ marginTop: 7 }} className='text-center'>
+        <p style={{ marginTop: 7 }} className="text-center">
           {description}
         </p>
       ) : null}
-      <div className='w-full px-3'>
+      <div className="w-full px-3">
         <ShadowContainer>
-          <div className='w-full px-16 py-4 leading-8'>{children}</div>
+          <div className="w-full px-16 py-4 leading-8">{children}</div>
         </ShadowContainer>
       </div>
     </section>

components/design/ShadowContainer.tsx

@@ -1,6 +1,6 @@
-import classNames from 'clsx'
+import classNames from "clsx"
 
-type ShadowContainerProps = React.ComponentPropsWithRef<'div'>
+type ShadowContainerProps = React.ComponentPropsWithRef<"div">
 
 export const ShadowContainer = (props: ShadowContainerProps): JSX.Element => {
   const { children, className, ...rest } = props
@@ -8,8 +8,8 @@ export const ShadowContainer = (props: ShadowContainerProps): JSX.Element => {
   return (
     <div
       className={classNames(
-        'mb-12 h-full max-w-full break-words rounded-2xl border border-solid border-[#000] shadow-light dark:shadow-dark ',
-        className
+        "mb-12 h-full max-w-full break-words rounded-2xl border border-solid border-[#000] shadow-light dark:shadow-dark ",
+        className,
       )}
       {...rest}
     >

compose.yaml

@@ -1,11 +1,12 @@
 services:
   theoludwig:
     container_name: ${COMPOSE_PROJECT_NAME}
-    image: 'theoludwig'
-    restart: 'unless-stopped'
+    image: "theoludwig"
+    restart: "unless-stopped"
     build:
-      context: './'
-    network_mode: 'host'
+      context: "./"
+    ports:
+      - "${PORT-3000}:${PORT-3000}"
     environment:
       PORT: ${PORT-3000}
-    env_file: '.env'
+    env_file: ".env"

curriculum-vitae/build.js

@@ -1,20 +1,20 @@
-import { fileURLToPath } from 'node:url'
-import fs from 'node:fs'
+import { fileURLToPath } from "node:url"
+import fs from "node:fs"
 
-import { build } from 'vite'
+import { build } from "vite"
 
-const curriculumVitae = new URL('./', import.meta.url)
-const curriculumVitaeDist = new URL('./dist', curriculumVitae)
+const curriculumVitae = new URL("./", import.meta.url)
+const curriculumVitaeDist = new URL("./dist", curriculumVitae)
 const publicCurriculumVitaeOutputURL = new URL(
-  '../public/curriculum-vitae',
-  import.meta.url
+  "../public/curriculum-vitae",
+  import.meta.url,
 )
 
 await build({
   root: fileURLToPath(curriculumVitae),
-  base: '/curriculum-vitae/'
+  base: "/curriculum-vitae/",
 })
 
 await fs.promises.cp(curriculumVitaeDist, publicCurriculumVitaeOutputURL, {
-  recursive: true
+  recursive: true,
 })

curriculum-vitae/curriculum-vitae.jsonc

@@ -3,14 +3,14 @@
   "basics": {
     "name": "Théo LUDWIG",
     "label": "Développeur Full Stack • Étudiant",
-    "image": "https://theoludwig.fr/images/logo_orange.png",
+    "image": "https://theoludwig.fr/images/logo_background.png",
     "email": "contact@theoludwig.fr",
     "age": "31/03/2003",
     "location": {
-      "address": "Alsace, France"
+      "address": "Alsace, France",
     },
     "url": "https://theoludwig.fr",
-    "summary": "Je suis étudiant à l'université suivant la formation \"BUT Informatique\" et me forme en autodidacte dans l'informatique en suivant des formations en ligne. <br/> Je mets en pratique tout ce que j'apprends et réalise de nombreux projets (disponible sur <a href=\"https://theoludwig.fr\">theoludwig.fr</a>)."
+    "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": [
     {
@@ -22,9 +22,10 @@
       "courses": [
         "Développement Web en Node.js et React.js",
         "Intégration/Déploiement Continue et Docker",
-        "Projet développement LLM (Large Language Model) et NLP (Natural Language Processing)",
-        "Base de données NoSQL (MongoDB)"
-      ]
+        "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",
@@ -34,11 +35,11 @@
       "score": "2ème année",
       "courses": [
         "Développement Web avec le framework Laravel en PHP",
-        "Qualité de développement et Tests unitaires, d'intégration, fonctionnels/systèmes, d'acceptation etc.",
+        "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"
-      ]
+        "Sécurisation des accès à la base de données et PL/SQL",
+      ],
     },
     {
       "startDate": "2021",
@@ -50,16 +51,16 @@
         "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"
-      ]
+        "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"
-    }
+      "score": "Mention Assez Bien",
+    },
     // {
     //   "startDate": "2014",
     //   "endDate": "2018",
@@ -77,7 +78,7 @@
       "position": "Alternant Développeur Web Full Stack",
       "startDate": "2023-08-28",
       "endDate": "2024-09-02",
-      "duration": "1 an"
+      "duration": "1 an",
     },
     {
       "summary": "Développement d'un outil GED (Gestion Électronique de Documents) en React.js, Laravel et GraphQL.",
@@ -87,7 +88,7 @@
       "position": "Stagiaire Développeur Web Full Stack",
       "startDate": "2023-04-11",
       "endDate": "2023-07-26",
-      "duration": "4 mois"
+      "duration": "4 mois",
     },
     // {
     //   "summary": "Agent administratif - Numérisation et archivage des plans électriques initialement sous format papier calque.",
@@ -107,7 +108,7 @@
       "position": "Stage initiation métier développeur web",
       "startDate": "2019-06-17",
       "endDate": "2019-06-21",
-      "duration": "1 semaine"
+      "duration": "1 semaine",
     },
     {
       "description": "interests",
@@ -117,7 +118,7 @@
       "position": "Participation en équipe de 5 personnes",
       "startDate": "2021-12-02",
       "endDate": "2021-12-03",
-      "duration": "1 semaine"
+      "duration": "1 semaine",
     },
     {
       "description": "interests",
@@ -128,8 +129,8 @@
       "position": "Initiation métier Développeur web",
       "startDate": "2019-06-24",
       "endDate": "2019-06-28",
-      "duration": "1 semaine"
-    }
+      "duration": "1 semaine",
+    },
     // {
     //   "summary": "Apprentissage du métier \"Chargé de communication\" et des logiciels de graphisme tels que \"Adobe Photoshop\".",
     //   "website": "https://es.fr/",
@@ -143,24 +144,24 @@
   ],
   "interests": [
     {
-      "name": "Enthousiaste de l'Open-Source"
+      "name": "Enthousiaste de l'Open-Source",
     },
     {
-      "name": "Passionné de High-Tech"
-    }
+      "name": "Passionné de High-Tech",
+    },
   ],
   "skills": [
     {
       "keywords": ["JavaScript/TypeScript", "Python", "C/C++", "PHP"],
-      "name": "Langages de programmation"
+      "name": "Langages de programmation",
     },
     {
       "keywords": ["HTML", "CSS", "Tailwind CSS", "React.js/Next.js"],
-      "name": "Frontend"
+      "name": "Frontend",
     },
     {
       "keywords": ["Laravel", "Node.js", "Fastify", "PostgreSQL"],
-      "name": "Backend"
+      "name": "Backend",
     },
     {
       "keywords": [
@@ -168,13 +169,13 @@
         "Arch Linux",
         "Visual Studio Code",
         "Git",
-        "Docker"
+        "Docker",
       ],
-      "name": "Logiciels et outils"
+      "name": "Logiciels et outils",
     },
     {
       "keywords": ["Permis B", "Anglais"],
-      "name": "Autres"
-    }
-  ]
+      "name": "Autres",
+    },
+  ],
 }

curriculum-vitae/package-lock.json

@@ -8,20 +8,36 @@
       "name": "curriculum-vitae",
       "version": "1.0.0",
       "dependencies": {
-        "jsonc-parser": "3.2.0",
+        "jsonc-parser": "3.2.1",
         "modern-normalize": "2.0.0"
       },
       "devDependencies": {
-        "@types/node": "20.6.2",
-        "date-and-time": "3.0.3",
-        "vite": "4.4.9",
-        "vite-plugin-html": "3.2.0"
+        "@types/node": "20.11.16",
+        "date-and-time": "3.1.1",
+        "vite": "5.0.12",
+        "vite-plugin-html": "3.2.2"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
+      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
-      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
+      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
       "cpu": [
         "arm"
       ],
@@ -35,9 +51,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
-      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
+      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
       "cpu": [
         "arm64"
       ],
@@ -51,9 +67,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
-      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
+      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
       "cpu": [
         "x64"
       ],
@@ -67,9 +83,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
-      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
+      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
       "cpu": [
         "arm64"
       ],
@@ -83,9 +99,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
-      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
+      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
       "cpu": [
         "x64"
       ],
@@ -99,9 +115,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
-      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
+      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
       "cpu": [
         "arm64"
       ],
@@ -115,9 +131,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
-      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
+      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
       "cpu": [
         "x64"
       ],
@@ -131,9 +147,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
-      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
+      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
       "cpu": [
         "arm"
       ],
@@ -147,9 +163,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
-      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
+      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
       "cpu": [
         "arm64"
       ],
@@ -163,9 +179,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
-      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
+      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
       "cpu": [
         "ia32"
       ],
@@ -179,9 +195,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
-      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
+      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
       "cpu": [
         "loong64"
       ],
@@ -195,9 +211,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
-      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
+      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
       "cpu": [
         "mips64el"
       ],
@@ -211,9 +227,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
-      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
+      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
       "cpu": [
         "ppc64"
       ],
@@ -227,9 +243,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
-      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
+      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
       "cpu": [
         "riscv64"
       ],
@@ -243,9 +259,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
-      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
+      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
       "cpu": [
         "s390x"
       ],
@@ -259,9 +275,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
-      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
+      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
       "cpu": [
         "x64"
       ],
@@ -275,9 +291,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
       "cpu": [
         "x64"
       ],
@@ -291,9 +307,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
       "cpu": [
         "x64"
       ],
@@ -307,9 +323,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
-      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
+      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
       "cpu": [
         "x64"
       ],
@@ -323,9 +339,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
-      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
+      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
       "cpu": [
         "arm64"
       ],
@@ -339,9 +355,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
-      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
+      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
       "cpu": [
         "ia32"
       ],
@@ -355,9 +371,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
-      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
+      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
       "cpu": [
         "x64"
       ],
@@ -419,9 +435,9 @@
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
-      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
+      "version": "0.3.22",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
+      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
       "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -476,16 +492,194 @@
         "node": ">= 8.0.0"
       }
     },
-    "node_modules/@types/node": {
-      "version": "20.6.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.2.tgz",
-      "integrity": "sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==",
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
+      "integrity": "sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.6.tgz",
+      "integrity": "sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.6.tgz",
+      "integrity": "sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.6.tgz",
+      "integrity": "sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.6.tgz",
+      "integrity": "sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.6.tgz",
+      "integrity": "sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.6.tgz",
+      "integrity": "sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.6.tgz",
+      "integrity": "sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.6.tgz",
+      "integrity": "sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.6.tgz",
+      "integrity": "sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.6.tgz",
+      "integrity": "sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.6.tgz",
+      "integrity": "sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.6.tgz",
+      "integrity": "sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "20.11.16",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.16.tgz",
+      "integrity": "sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/acorn": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -510,9 +704,9 @@
       }
     },
     "node_modules/async": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
-      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
       "dev": true
     },
     "node_modules/balanced-match": {
@@ -582,9 +776,9 @@
       }
     },
     "node_modules/clean-css": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
-      "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
+      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
       "dev": true,
       "dependencies": {
         "source-map": "~0.6.0"
@@ -676,9 +870,9 @@
       }
     },
     "node_modules/date-and-time": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-3.0.3.tgz",
-      "integrity": "sha512-CmHCeTixc3KA5pcLTVs9JCFhmJMFTBsmSsgHnNed4YDNw9yUOrjjRn3zALy8eMgqmTO+4U8k5jl1peC7IoezfA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-3.1.1.tgz",
+      "integrity": "sha512-N9kstidT3P0VUk1iKOFilOZ6251r6iTUNx9M9kvgL2jqOk9mljWZUq5CjAtYwCnppWHbERk5YFQUrSbY7FQOpA==",
       "dev": true
     },
     "node_modules/dom-serializer": {
@@ -747,9 +941,9 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
-      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.1.tgz",
+      "integrity": "sha512-CjA3y+Dr3FyFDOAMnxZEGtnW9KBR2M0JvvUtXNW+dYJL5ROWxP9DUHCwgFqpMk0OXCc0ljhaNTr2w/kutYIcHQ==",
       "dev": true,
       "engines": {
         "node": ">=12"
@@ -792,9 +986,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
-      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
+      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -804,28 +998,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.18.20",
-        "@esbuild/android-arm64": "0.18.20",
-        "@esbuild/android-x64": "0.18.20",
-        "@esbuild/darwin-arm64": "0.18.20",
-        "@esbuild/darwin-x64": "0.18.20",
-        "@esbuild/freebsd-arm64": "0.18.20",
-        "@esbuild/freebsd-x64": "0.18.20",
-        "@esbuild/linux-arm": "0.18.20",
-        "@esbuild/linux-arm64": "0.18.20",
-        "@esbuild/linux-ia32": "0.18.20",
-        "@esbuild/linux-loong64": "0.18.20",
-        "@esbuild/linux-mips64el": "0.18.20",
-        "@esbuild/linux-ppc64": "0.18.20",
-        "@esbuild/linux-riscv64": "0.18.20",
-        "@esbuild/linux-s390x": "0.18.20",
-        "@esbuild/linux-x64": "0.18.20",
-        "@esbuild/netbsd-x64": "0.18.20",
-        "@esbuild/openbsd-x64": "0.18.20",
-        "@esbuild/sunos-x64": "0.18.20",
-        "@esbuild/win32-arm64": "0.18.20",
-        "@esbuild/win32-ia32": "0.18.20",
-        "@esbuild/win32-x64": "0.18.20"
+        "@esbuild/aix-ppc64": "0.19.12",
+        "@esbuild/android-arm": "0.19.12",
+        "@esbuild/android-arm64": "0.19.12",
+        "@esbuild/android-x64": "0.19.12",
+        "@esbuild/darwin-arm64": "0.19.12",
+        "@esbuild/darwin-x64": "0.19.12",
+        "@esbuild/freebsd-arm64": "0.19.12",
+        "@esbuild/freebsd-x64": "0.19.12",
+        "@esbuild/linux-arm": "0.19.12",
+        "@esbuild/linux-arm64": "0.19.12",
+        "@esbuild/linux-ia32": "0.19.12",
+        "@esbuild/linux-loong64": "0.19.12",
+        "@esbuild/linux-mips64el": "0.19.12",
+        "@esbuild/linux-ppc64": "0.19.12",
+        "@esbuild/linux-riscv64": "0.19.12",
+        "@esbuild/linux-s390x": "0.19.12",
+        "@esbuild/linux-x64": "0.19.12",
+        "@esbuild/netbsd-x64": "0.19.12",
+        "@esbuild/openbsd-x64": "0.19.12",
+        "@esbuild/sunos-x64": "0.19.12",
+        "@esbuild/win32-arm64": "0.19.12",
+        "@esbuild/win32-ia32": "0.19.12",
+        "@esbuild/win32-x64": "0.19.12"
       }
     },
     "node_modules/estree-walker": {
@@ -835,9 +1030,9 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
-      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -851,9 +1046,9 @@
       }
     },
     "node_modules/fastq": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
-      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.0.tgz",
+      "integrity": "sha512-zGygtijUMT7jnk3h26kUms3BkSDp4IfIKjmnqI2tvx6nuBfiF1UqOxbnLfzdv+apBy+53oaImsKtMw/xYbW+1w==",
       "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
@@ -1035,9 +1230,9 @@
       }
     },
     "node_modules/jsonc-parser": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
+      "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA=="
     },
     "node_modules/jsonfile": {
       "version": "6.1.0",
@@ -1106,9 +1301,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "dev": true,
       "funding": [
         {
@@ -1200,9 +1395,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
       "dev": true,
       "funding": [
         {
@@ -1219,7 +1414,7 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -1267,18 +1462,34 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.29.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.2.tgz",
-      "integrity": "sha512-CJouHoZ27v6siztc21eEQGo0kIcE5D1gVPA571ez0mMYb25LGYGKnVNXpEj5MGlepmDWGXNjDB5q7uNiPHC11A==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.6.tgz",
+      "integrity": "sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==",
       "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
       "engines": {
-        "node": ">=14.18.0",
+        "node": ">=18.0.0",
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.9.6",
+        "@rollup/rollup-android-arm64": "4.9.6",
+        "@rollup/rollup-darwin-arm64": "4.9.6",
+        "@rollup/rollup-darwin-x64": "4.9.6",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.9.6",
+        "@rollup/rollup-linux-arm64-gnu": "4.9.6",
+        "@rollup/rollup-linux-arm64-musl": "4.9.6",
+        "@rollup/rollup-linux-riscv64-gnu": "4.9.6",
+        "@rollup/rollup-linux-x64-gnu": "4.9.6",
+        "@rollup/rollup-linux-x64-musl": "4.9.6",
+        "@rollup/rollup-win32-arm64-msvc": "4.9.6",
+        "@rollup/rollup-win32-ia32-msvc": "4.9.6",
+        "@rollup/rollup-win32-x64-msvc": "4.9.6",
         "fsevents": "~2.3.2"
       }
     },
@@ -1346,9 +1557,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.19.4",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.19.4.tgz",
-      "integrity": "sha512-6p1DjHeuluwxDXcuT9VR8p64klWJKo1ILiy19s6C9+0Bh2+NWTX6nD9EPppiER4ICkHDVB1RkVpin/YW2nQn/g==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.0.tgz",
+      "integrity": "sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==",
       "dev": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -1387,39 +1598,45 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
       "dev": true
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
       "dev": true,
       "engines": {
         "node": ">= 10.0.0"
       }
     },
     "node_modules/vite": {
-      "version": "4.4.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
-      "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
+      "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.18.10",
-        "postcss": "^8.4.27",
-        "rollup": "^3.27.1"
+        "esbuild": "^0.19.3",
+        "postcss": "^8.4.32",
+        "rollup": "^4.2.0"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^14.18.0 || >=16.0.0"
+        "node": "^18.0.0 || >=20.0.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
       },
       "optionalDependencies": {
-        "fsevents": "~2.3.2"
+        "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": ">= 14",
+        "@types/node": "^18.0.0 || >=20.0.0",
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
@@ -1452,9 +1669,9 @@
       }
     },
     "node_modules/vite-plugin-html": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-3.2.0.tgz",
-      "integrity": "sha512-2VLCeDiHmV/BqqNn5h2V+4280KRgQzCFN47cst3WiNK848klESPQnzuC3okH5XHtgwHH/6s1Ho/YV6yIO0pgoQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-3.2.2.tgz",
+      "integrity": "sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^4.2.0",

curriculum-vitae/package.json

@@ -9,13 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "jsonc-parser": "3.2.0",
+    "jsonc-parser": "3.2.1",
     "modern-normalize": "2.0.0"
   },
   "devDependencies": {
-    "@types/node": "20.6.2",
-    "date-and-time": "3.0.3",
-    "vite": "4.4.9",
-    "vite-plugin-html": "3.2.0"
+    "@types/node": "20.11.16",
+    "date-and-time": "3.1.1",
+    "vite": "5.0.12",
+    "vite-plugin-html": "3.2.2"
   }
 }

curriculum-vitae/scripts/main.js

@@ -1,5 +1,5 @@
-import { BIRTH_DATE, getAge } from '../../utils/getAge.ts'
+import { BIRTH_DATE, getAge } from "../../utils/getAge.ts"
 
-const yearOld = document.getElementById('year-old')
+const yearOld = document.getElementById("year-old")
 
 yearOld.textContent = getAge(BIRTH_DATE).toString()

curriculum-vitae/styles/global.css

@@ -1,7 +1,7 @@
-@import 'modern-normalize/modern-normalize.css';
+@import "modern-normalize/modern-normalize.css";
 
 body {
-  font-family: 'Montserrat', 'Arial', 'sans-serif';
+  font-family: "Montserrat", "Arial", "sans-serif";
   background: #f0f0f0;
   color: #333;
   line-height: 1.42857143;

curriculum-vitae/vite.config.ts

@@ -1,19 +1,19 @@
-import fs from 'node:fs'
+import fs from "node:fs"
 
-import { defineConfig } from 'vite'
-import { parse as JSONCParser } from 'jsonc-parser'
-import { createHtmlPlugin } from 'vite-plugin-html'
-import date from 'date-and-time'
+import { defineConfig } from "vite"
+import { parse as JSONCParser } from "jsonc-parser"
+import { createHtmlPlugin } from "vite-plugin-html"
+import date from "date-and-time"
 
 const jsonCurriculumVitaeURL = new URL(
-  './curriculum-vitae.jsonc',
-  import.meta.url
+  "./curriculum-vitae.jsonc",
+  import.meta.url,
 )
 const dataCurriculumVitaeStringJSON = await fs.promises.readFile(
   jsonCurriculumVitaeURL,
   {
-    encoding: 'utf-8'
-  }
+    encoding: "utf-8",
+  },
 )
 const curriculumVitae = JSONCParser(dataCurriculumVitaeStringJSON)
 
@@ -22,7 +22,7 @@ const curriculumVitae = JSONCParser(dataCurriculumVitaeStringJSON)
  */
 export default defineConfig({
   build: {
-    assetsDir: './'
+    assetsDir: "./",
   },
   plugins: [
     createHtmlPlugin({
@@ -30,13 +30,13 @@ export default defineConfig({
         data: {
           date,
           locals: {
-            ...curriculumVitae
-          }
-        }
-      }
-    })
+            ...curriculumVitae,
+          },
+        },
+      },
+    }),
   ],
   css: {
-    postcss: {}
-  }
+    postcss: {},
+  },
 })

cypress.config.ts

@@ -1,17 +1,17 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from "cypress"
 
 export default defineConfig({
   fixturesFolder: false,
   video: false,
   screenshotOnRunFailure: false,
   e2e: {
-    baseUrl: 'http://127.0.0.1:3000',
-    supportFile: false
+    baseUrl: "http://127.0.0.1:3000",
+    supportFile: false,
   },
   component: {
     devServer: {
-      framework: 'next',
-      bundler: 'webpack'
-    }
-  }
+      framework: "next",
+      bundler: "webpack",
+    },
+  },
 })