chore(release): 2.3.2 [skip ci]

BREAKING CHANGE: minimum supported Node.js >= 16.0.0 and npm >= 8.0.0

fixes #74

.babelrc.json

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "next/babel",
-      {
-        "styled-jsx": {
-          "plugins": ["@styled-jsx/plugin-sass"]
-        }
-      }
-    ]
-  ]
-}

.devcontainer/Dockerfile

@@ -0,0 +1,2 @@
+ARG VARIANT="16"
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

.devcontainer/devcontainer.json

@@ -0,0 +1,23 @@
+{
+  "name": "divlo",
+  "dockerComposeFile": "./docker-compose.yml",
+  "service": "workspace",
+  "workspaceFolder": "/workspace",
+  "settings": {
+    "remote.autoForwardPorts": false
+  },
+  "extensions": [
+    "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "divlo.vscode-styled-jsx-syntax",
+    "divlo.vscode-styled-jsx-languageserver",
+    "bradlc.vscode-tailwindcss",
+    "mikestead.dotenv",
+    "davidanson.vscode-markdownlint",
+    "ms-azuretools.vscode-docker"
+  ],
+  "forwardPorts": [3000],
+  "postAttachCommand": ["npm", "install"],
+  "remoteUser": "node"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,8 @@
+services:
+  workspace:
+    build:
+      context: './'
+      dockerfile: './Dockerfile'
+    volumes:
+      - '..:/workspace:cached'
+    command: 'sleep infinity'

.dockerignore

@@ -1,11 +1,12 @@
 .vscode
 .git
-.next
+.env
 build
+.next
 coverage
-dist
 node_modules
-out
-**/workbox-*.js
-**/sw.js
-**/__test__/**
+tmp
+temp
+.DS_Store
+.lighthouseci
+.vercel

.env.example

@@ -1,6 +1,2 @@
-COMPOSE_PROJECT_NAME=divlo.fr-website
+COMPOSE_PROJECT_NAME=divlo.fr
 PORT=3000
-EMAIL_HOST=divlo.fr-maildev
-EMAIL_USER=reply@divlo-website.fr
-EMAIL_PASSWORD=password
-EMAIL_PORT=25

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": ["conventions", "next/core-web-vitals", "prettier"],
+  "plugins": ["prettier", "unicorn"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "env": {
+    "node": true,
+    "browser": true
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "unicorn/prefer-node-protocol": "error"
+  }
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,11 +1,4 @@
-<!--
-
-Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time.
-
-Before submitting your contribution, please take a moment to review this document:
-https://github.com/Divlo/Divlo/blob/master/.github/CONTRIBUTING.md
-
--->
+<!-- Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time. -->
 
 ## What changes this PR introduce?
 

.github/dependabot.yml

@@ -1,16 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    schedule:
-      interval: 'daily'
-
-  - package-ecosystem: 'docker'
-    directory: '/'
-    schedule:
-      interval: 'daily'
-
-  - package-ecosystem: 'npm'
-    directory: '/'
-    schedule:
-      interval: 'daily'

.github/workflows/Divlo.yml

@@ -1,38 +0,0 @@
-name: 'Divlo'
-
-on:
-  push:
-    branches: [master, development]
-  pull_request:
-    branches: [master, development]
-
-jobs:
-  ci:
-    runs-on: 'ubuntu-latest'
-    strategy:
-      matrix:
-        node-version: [14.x]
-    steps:
-      - uses: 'actions/checkout@v2'
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: 'actions/setup-node@v2.1.5'
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: 'Cache dependencies'
-        uses: 'actions/cache@v2.1.5'
-        with:
-          path: '.npm'
-          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
-
-      - run: 'npm install --global npm@7'
-      - run: 'npm ci --cache .npm --prefer-offline'
-      - run: 'npm run lint:commit -- --to "${{ github.sha }}"'
-      - run: 'npm run lint:docker'
-      - run: 'npm run lint:editorconfig'
-      - run: 'npm run lint:markdown'
-      - run: 'npm run lint:typescript'
-      - run: 'npm run build'
-      - run: 'npm run lighthouse'
-      - run: 'npm run test'

.github/workflows/analyze.yml

@@ -0,0 +1,27 @@
+name: 'Analyze'
+
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [master, develop]
+
+jobs:
+  analyze:
+    runs-on: 'ubuntu-latest'
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ['javascript']
+
+    steps:
+      - uses: 'actions/checkout@v3.0.0'
+
+      - name: 'Initialize CodeQL'
+        uses: 'github/codeql-action/init@v1'
+        with:
+          languages: ${{ matrix.language }}
+
+      - name: 'Perform CodeQL Analysis'
+        uses: 'github/codeql-action/analyze@v1'

.github/workflows/build.yml

@@ -0,0 +1,25 @@
+name: 'Build'
+
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [master, develop]
+
+jobs:
+  build:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v3.0.0'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v3.0.0'
+        with:
+          node-version: '16.x'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Build'
+        run: 'npm run build'

.github/workflows/lint.yml

@@ -0,0 +1,47 @@
+name: 'Lint'
+
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [master, develop]
+
+jobs:
+  lint:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v3.0.0'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v3.0.0'
+        with:
+          node-version: '16.x'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'lint:commit'
+        run: 'npm run lint:commit -- --to "${{ github.sha }}"'
+
+      - name: 'lint:editorconfig'
+        run: 'npm run lint:editorconfig'
+
+      - name: 'lint:markdown'
+        run: 'npm run lint:markdown'
+
+      - name: 'lint:typescript'
+        run: 'npm run lint:typescript'
+
+      - name: 'lint:prettier'
+        run: 'npm run lint:prettier'
+
+      - name: 'lint:dotenv'
+        uses: 'dotenv-linter/action-dotenv-linter@v2'
+        with:
+          github_token: ${{ secrets.github_token }}
+
+      - name: 'lint:docker'
+        uses: 'hadolint/hadolint-action@v1.6.0'
+        with:
+          dockerfile: './Dockerfile'

.github/workflows/release.yml

@@ -1,34 +1,44 @@
-name: 'release'
+name: 'Release'
 
 on:
-  workflow_run:
-    workflows: [Divlo]
+  push:
     branches: [master]
-    types:
-      - 'completed'
 
 jobs:
   release:
     runs-on: 'ubuntu-latest'
-    strategy:
-      matrix:
-        node-version: [14.x]
     steps:
-      - uses: 'actions/checkout@v2'
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: 'actions/setup-node@v2.1.5'
+      - uses: 'actions/checkout@v3.0.0'
         with:
-          node-version: ${{ matrix.node-version }}
+          fetch-depth: 0
+          persist-credentials: false
 
-      - name: 'Cache dependencies'
-        uses: 'actions/cache@v2.1.5'
+      - name: 'Import GPG key'
+        uses: 'crazy-max/ghaction-import-gpg@v4'
         with:
-          path: '.npm'
-          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
+          git_user_signingkey: true
+          git_commit_gpgsign: true
 
-      - run: 'npm install --global npm@7'
-      - run: 'npm ci --cache .npm --prefer-offline'
-      - run: 'npm run release'
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v3.0.0'
+        with:
+          node-version: '16.x'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Release'
+        run: 'npm run release'
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          GIT_COMMITTER_NAME: ${{ secrets.GIT_NAME }}
+          GIT_COMMITTER_EMAIL: ${{ secrets.GIT_EMAIL }}
+
+      - name: 'Deploy to Vercel'
+        run: 'npm run deploy -- --token="${VERCEL_TOKEN}" --prod'
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

.github/workflows/test.yml

@@ -0,0 +1,70 @@
+name: 'Test'
+
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    branches: [master, develop]
+
+jobs:
+  test-unit:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v3.0.0'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v3.0.0'
+        with:
+          node-version: '16.x'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Unit Test'
+        run: 'npm run test:unit'
+
+  test-lighthouse:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v3.0.0'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v3.0.0'
+        with:
+          node-version: '16.x'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Build'
+        run: 'npm run build'
+
+      - name: 'html-w3c-validator'
+        run: 'npm run test:html-w3c-validator'
+
+      - name: 'Lighthouse'
+        run: 'npm run test:lighthouse'
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+
+  test-e2e:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v3.0.0'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v3.0.0'
+        with:
+          node-version: '16.x'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Build'
+        run: 'npm run build'
+
+      - name: 'End To End (e2e) Test'
+        run: 'npm run test:e2e'

.gitignore

@@ -11,13 +11,16 @@ out
 # production
 build
 dist
+public/curriculum-vitae
+# PWA
+public/workbox-*.js
+public/sw.js
 
 # testing
 coverage
-
-# PWA
-**/workbox-*.js
-**/sw.js
+cypress/screenshots
+cypress/videos
+cypress/downloads
 
 # envs
 .env
@@ -26,11 +29,23 @@ coverage
 # debug
 npm-debug.log*
 
-# editors
-.vscode
-.theia
-.idea
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
 
 # misc
 .DS_Store
 .lighthouseci
+.vercel

.gitpod.yml

@@ -0,0 +1,20 @@
+image: 'gitpod/workspace-full'
+
+tasks:
+  - before: 'cp .env.example .env'
+    init: 'npm 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

.html-w3c-validatorrc.json

@@ -0,0 +1,8 @@
+{
+  "urls": [
+    "http://localhost:3000/",
+    "http://localhost:3000/blog",
+    "http://localhost:3000/blog/hello-world"
+  ],
+  "files": ["./public/curriculum-vitae/index.html"]
+}

.husky/.gitignore

@@ -1 +0,0 @@
-_

.husky/pre-commit

@@ -1,7 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run lint:docker
-npm run lint:editorconfig
-npm run lint:markdown
-npm run lint:typescript
+npm run lint:staged

.lighthouserc.json

@@ -4,21 +4,22 @@
       "startServerCommand": "npm run start",
       "startServerReadyPattern": "ready on",
       "startServerReadyTimeout": 20000,
-      "url": ["http://localhost:3000/"],
-      "numberOfRuns": 3
+      "url": [
+        "http://localhost:3000/",
+        "http://localhost:3000/blog",
+        "http://localhost:3000/blog/hello-world"
+      ],
+      "numberOfRuns": 1
     },
     "assert": {
       "preset": "lighthouse:recommended",
       "assertions": {
-        "legacy-javascript": "off",
-        "unused-javascript": "off",
-        "uses-rel-preload": "off",
-        "canonical": "off",
-        "unsized-images": "off",
-        "uses-responsive-images": "off",
-        "bypass": "warning",
-        "color-contrast": "warning",
-        "preload-lcp-image": "warning"
+        "csp-xss": "warning",
+        "non-composited-animations": "warning",
+        "unused-javascript": "warning",
+        "image-size-responsive": "warning",
+        "unsized-images": "warning",
+        "color-contrast": "warning"
       }
     },
     "upload": {

.lintstagedrc.json

@@ -0,0 +1,6 @@
+{
+  "*": ["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"]
+}

.markdownlint-cli2.jsonc

@@ -0,0 +1,11 @@
+{
+  "config": {
+    "default": true,
+    "MD013": false,
+    "MD024": false,
+    "MD033": false,
+    "MD041": false
+  },
+  "globs": ["**/*.{md,mdx}"],
+  "ignores": ["**/node_modules"]
+}

.markdownlint.json

@@ -1,7 +0,0 @@
-{
-  "default": true,
-  "MD013": false,
-  "MD024": false,
-  "MD033": false,
-  "MD041": false
-}

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "trailingComma": "none"
+}

.releaserc.json

@@ -1,12 +1,38 @@
 {
-  "release": {
-    "branches": ["master"]
-  },
+  "branches": ["master"],
   "plugins": [
-    ["@semantic-release/commit-analyzer", {
+    [
+      "@semantic-release/commit-analyzer",
+      {
         "preset": "conventionalcommits"
-    }],
+      }
+    ],
+    [
       "@semantic-release/release-notes-generator",
-    "@semantic-release/github"
+      {
+        "preset": "conventionalcommits"
+      }
+    ],
+    [
+      "@semantic-release/npm",
+      {
+        "npmPublish": false
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json", "package-lock.json"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]"
+      }
+    ],
+    "@semantic-release/github",
+    [
+      "@saithodev/semantic-release-backmerge",
+      {
+        "branches": [{ "from": "master", "to": "develop" }],
+        "backmergeStrategy": "merge"
+      }
+    ]
   ]
 }

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+  "recommendations": [
+    "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "divlo.vscode-styled-jsx-syntax",
+    "divlo.vscode-styled-jsx-languageserver",
+    "bradlc.vscode-tailwindcss",
+    "mikestead.dotenv",
+    "davidanson.vscode-markdownlint",
+    "ms-azuretools.vscode-docker"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.bracketPairColorization.enabled": true,
+  "prettier.configPath": ".prettierrc.json",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  }
+}

CONTRIBUTING.md

@@ -13,7 +13,7 @@ Thanks a lot for your interest in contributing to **divlo.fr**! 🎉
 
 - **Please first discuss** the change you wish to make via [issue](https://github.com/Divlo/Divlo/issues) before making a change. It might avoid a waste of your time.
 
-- Ensure your code respect [Typescript Standard Style](https://www.npmjs.com/package/ts-standard).
+- Ensure your code respect linting.
 
 - Make sure your **code passes the tests**.
 
@@ -47,6 +47,13 @@ Scopes define what part of the code changed.
 
 ## Getting Started
 
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Divlo/Divlo)
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) >= 16.0.0
+- [npm](https://www.npmjs.com/) >= 8.0.0
+
 ### Installation
 
 ```sh
@@ -58,16 +65,25 @@ cd Divlo
 
 # Configure environment variables
 cp .env.example .env
+
+# Install
+npm install
 ```
 
-### Development environment with [Docker](https://www.docker.com/)
+### Local Development environment
+
+```sh
+# Run website
+npm run dev
+```
+
+### Production environment with [Docker](https://www.docker.com/)
 
 ```sh
 # Setup and run all the services for you
-docker-compose up --build
+docker compose up --build
 ```
 
 ### Services started
 
 - website : `http://localhost:3000`
-- [MailDev](https://maildev.github.io/maildev/) : `http://localhost:1080`

Dockerfile

@@ -1,10 +1,23 @@
-FROM node:14.16.1
-RUN npm install --global npm@7
-
-WORKDIR /app
-
+FROM node:16.16.0 AS dependencies
+WORKDIR /usr/src/app
 COPY ./package*.json ./
 RUN npm install
-COPY ./ ./
 
-CMD ["npm", "run", "dev", "--", "--port", "${PORT}"]
+FROM node:16.16.0 AS builder
+WORKDIR /usr/src/app
+COPY ./ ./
+COPY --from=dependencies /usr/src/app/node_modules ./node_modules
+RUN npm run build
+
+FROM node:16.16.0 AS runner
+WORKDIR /usr/src/app
+ENV NODE_ENV=production
+COPY --from=builder /usr/src/app/next.config.js ./next.config.js
+COPY --from=builder /usr/src/app/public ./public
+COPY --from=builder /usr/src/app/.next ./.next
+COPY --from=builder /usr/src/app/i18n.json ./i18n.json
+COPY --from=builder /usr/src/app/locales ./locales
+COPY --from=builder /usr/src/app/pages ./pages
+COPY --from=builder /usr/src/app/node_modules ./node_modules
+RUN npx next telemetry disable
+CMD ["node_modules/.bin/next", "start", "--port", "${PORT}"]

README.md

@@ -5,7 +5,6 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/Divlo/Divlo/actions?query=workflow%3A%22Divlo%22"><img src="https://github.com/Divlo/Divlo/actions/workflows/Divlo.yml/badge.svg?branch=master" alt="Divlo's CI" /></a>
   <a href="https://github.com/Divlo"><img alt="GitHub" src="https://img.shields.io/badge/-GitHub-5A5A5A?style=flat&labelColor=5A5A5A&logo=github&logoColor=white"/></a>
   <a href="https://gitlab.com/Divlo"><img alt="GitLab" src="https://img.shields.io/badge/-GitLab-303030?style=flat&labelColor=303030&logo=gitlab&logoColor=white"/></a>
   <a href="https://www.npmjs.com/~divlo"><img alt="npm" src="https://img.shields.io/badge/-npm-c4302b?style=flat&labelColor=c4302b&logo=npm&logoColor=white"/></a>
@@ -20,30 +19,31 @@
 
 ## 📜 About
 
-```typescript
-export interface Divlo {
-  pronouns: 'He' | 'Him'
-  birthDate: '31/03/2003'
-  nationality: 'Alsace, France'
-  interests: [
-    'Developer Full Stack Junior',
-    'Passionate about High-Tech',
-    'Open-Source enthusiast'
-  ]
-  skills: {
-    languages: ['JavaScript', 'TypeScript', 'Python', 'Dart']
-    frontEnd: ['HTML', 'CSS', 'SASS', 'React.js (+ Next.js)', 'Flutter']
-    backEnd: ['Node.js', 'Strapi', 'MySQL']
-    tools: ['Ubuntu', 'Hyper Terminal', 'VSCode', 'Git', 'Docker']
+```json
+{
+  "name": "Divlo",
+  "pronouns": "He/Him",
+  "birthDate": "31/03/2003",
+  "nationality": "Alsace, France",
+  "interests": [
+    "Developer Full Stack Junior",
+    "Passionate about High-Tech",
+    "Open-Source enthusiast"
+  ],
+  "skills": {
+    "programmingLanguages": ["JavaScript", "TypeScript", "Python", "C/C++"],
+    "frontEnd": ["HTML", "CSS", "Tailwind CSS", "React.js (+ Next.js)"],
+    "backEnd": ["Node.js", "Fastify", "Prisma", "PostgreSQL", "MySQL"],
+    "tools": ["GNU/Linux", "Ubuntu", "Visual Studio Code", "Git", "Docker"]
   }
 }
 ```
 
 <hr />
 
-## 📈 Stats
+## 📈 Statistics
 
 <p align=center>
   <img height=175 align="center" src="https://github-readme-stats.vercel.app/api?username=Divlo&show_icons=true&theme=dark" />
-  <img height=175 align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Divlo&hide=html,css&langs_count=8&layout=compact&theme=dark" />
+  <img height=175 align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Divlo&hide=html,css,javascript&langs_count=8&layout=compact&theme=dark" />
 </p>

__test__/pages/api/send-email.test.ts

@@ -1,70 +0,0 @@
-import { createMocks } from 'node-mocks-http'
-
-import handleSendEmail from 'pages/api/send-email'
-
-jest.mock('nodemailer', () => ({
-  createTransport: () => {
-    return {
-      sendMail: jest.fn(async () => {})
-    }
-  }
-}))
-
-describe('POST /api/send-email', () => {
-  it('succeeds and send the email', async () => {
-    const { req, res } = createMocks({
-      method: 'POST',
-      body: {
-        name: 'Divlo',
-        email: 'contact@divlo.fr',
-        subject: 'Subject',
-        message: 'Hello world!'
-      }
-    })
-    await handleSendEmail(req, res)
-    expect(res._getStatusCode()).toBe(201)
-    expect(JSON.parse(res._getData())).toEqual(
-      expect.objectContaining({
-        type: 'success'
-      })
-    )
-  })
-
-  it('fails with empty values', async () => {
-    const { req, res } = createMocks({
-      method: 'POST',
-      body: {
-        name: '',
-        email: '',
-        subject: '',
-        message: ''
-      }
-    })
-    await handleSendEmail(req, res)
-    expect(res._getStatusCode()).toBe(400)
-    expect(JSON.parse(res._getData())).toEqual(
-      expect.objectContaining({
-        type: 'requiredFields'
-      })
-    )
-  })
-
-  it('fails with invalid email', async () => {
-    const { req, res } = createMocks({
-      method: 'POST',
-      body: {
-        name: 'Name',
-        email: 'random wrong email',
-        subject: 'Subject',
-        message: 'Message'
-      }
-    })
-    await handleSendEmail(req, res)
-    expect(res._getStatusCode()).toBe(400)
-    expect(JSON.parse(res._getData())).toEqual(
-      expect.objectContaining({
-        type: 'invalidEmail'
-      })
-    )
-  })
-})

components/Contact/FormResult.tsx

@@ -1,31 +0,0 @@
-import useTranslation from 'next-translate/useTranslation'
-
-import { FormState } from './FormState'
-import { ResultState } from './index'
-
-export interface FormResultProps {
-  state: ResultState
-}
-
-export const FormResult: React.FC<FormResultProps> = (props) => {
-  const { state } = props
-  const { t } = useTranslation()
-
-  if (state === 'idle') {
-    return null
-  }
-
-  if (state === 'loading' || state === 'success') {
-    return (
-      <FormState state={state}>
-        {t(`home:contact.result.${state}`)}
-      </FormState>
-    )
-  }
-
-  return (
-    <FormState state='error'>
-      {t(`home:contact.result.${state}`)}
-    </FormState>
-  )
-}

components/Contact/FormState.tsx

@@ -1,39 +0,0 @@
-import useTranslation from 'next-translate/useTranslation'
-
-export interface FormStateProps extends React.ComponentPropsWithRef<'p'> {
-  state: 'success' | 'error' | 'loading'
-  children: string
-}
-
-export const FormState: React.FC<FormStateProps> = props => {
-  const { state, children, ...rest } = props
-  const { t } = useTranslation()
-
-  return (
-    <>
-      <div className='form-result text-center'>
-        <p className={state} {...rest}>
-          {['error', 'success'].includes(state) && (
-            <b>
-              {state === 'error' ? t('home:contact.error') : t('home:contact.success')}:
-            </b>
-          )}{' '}
-          {children}
-        </p>
-      </div>
-
-      <style jsx>{`
-        .form-result {
-          margin: 30px;
-        }
-        .success {
-          color: #90ee90;
-        }
-        .error {
-          color: #ff7f7f;
-        }
-      `}
-      </style>
-    </>
-  )
-}

components/Contact/index.tsx

@@ -1,89 +0,0 @@
-import useTranslation from 'next-translate/useTranslation'
-import { useState } from 'react'
-import Form, { HandleForm } from 'react-component-form'
-import axios from 'axios'
-
-import { Input } from 'components/design/Input'
-import { Button } from 'components/design/Button'
-import { Textarea } from 'components/design/Textarea'
-import { FormResult } from './FormResult'
-
-export const resultState = [
-  'idle',
-  'success',
-  'loading',
-  'requiredFields',
-  'invalidEmail',
-  'serverError'
-] as const
-
-export type ResultState = typeof resultState[number]
-
-export const Contact: React.FC = () => {
-  const { t } = useTranslation()
-  const [state, setState] = useState<ResultState>('idle')
-
-  const handleSubmit: HandleForm = async (formData, formElement) => {
-    setState('loading')
-    try {
-      const { data } = await axios.post<{ type: ResultState }>(
-        '/api/send-email',
-        formData
-      )
-      if (data.type === 'success') {
-        setState('success')
-        return formElement.reset()
-      }
-      return setState('serverError')
-    } catch (error) {
-      const type = error.response.data.type
-      if (resultState.includes(type)) {
-        return setState(type)
-      }
-      return setState('serverError')
-    }
-  }
-
-  return (
-    <>
-      <div className='col-24'>
-        <Form onSubmit={handleSubmit}>
-          <Input
-            label={`${t('home:contact.nameField')} :`}
-            type='text'
-            name='name'
-            autoComplete='off'
-            required
-          />
-          <Input
-            label='Email :'
-            type='email'
-            name='email'
-            autoComplete='off'
-            required
-          />
-          <Input
-            label={`${t('home:contact.subjectField')} :`}
-            type='text'
-            name='subject'
-            autoComplete='off'
-            required
-          />
-
-          <Textarea
-            label='Message :'
-            name='message'
-            autoComplete='off'
-            required
-          />
-
-          <div className='text-center' style={{ marginBottom: 20 }}>
-            <Button type='submit'>{t('home:contact.sendEmail')}</Button>
-          </div>
-        </Form>
-
-        <FormResult state={state} />
-      </div>
-    </>
-  )
-}

components/ErrorPage.tsx

@@ -6,30 +6,45 @@ export interface ErrorPageProps {
   message: string
 }
 
-export const ErrorPage: React.FC<ErrorPageProps> = props => {
+export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
   const { message, statusCode } = props
   const { t } = useTranslation()
 
   return (
     <>
-      <h1>
-        {t('errors:error')} <span className='important'>{statusCode}</span>
+      <h1 className='my-6 text-4xl font-semibold'>
+        {t('errors:error')}{' '}
+        <span
+          className='text-yellow dark:text-yellow-dark'
+          data-cy='status-code'
+        >
+          {statusCode}
+        </span>
       </h1>
-      <p className='text-center'>
-        {message} <Link href='/'>{t('returnToHomePage')}</Link>
+      <p className='text-center text-lg'>
+        {message}{' '}
+        <Link href='/'>
+          <a className='text-yellow hover:underline dark:text-yellow-dark'>
+            {t('errors:return-to-home-page')}
+          </a>
+        </Link>
       </p>
 
-      <style jsx global>{`
-        .content {
+      <style jsx global>
+        {`
+          main {
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             min-width: 100vw;
-          min-height: 100%;
+            flex: 1;
           }
           #__next {
+            display: flex;
+            flex-direction: column;
             padding-top: 0;
+            height: 100vh;
           }
         `}
       </style>

components/Footer.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from 'react'
+import Link from 'next/link'
+import useTranslation from 'next-translate/useTranslation'
+
+export interface FooterProps {
+  version: string
+}
+
+export const Footer: React.FC<FooterProps> = (props) => {
+  const { t } = useTranslation()
+  const { version } = props
+
+  const versionLink = useMemo(() => {
+    return `https://github.com/Divlo/Divlo/releases/tag/v${version}`
+  }, [version])
+
+  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'>
+      <p>
+        <Link href='/'>
+          <a className='text-yellow hover:underline dark:text-yellow-dark'>
+            Divlo
+          </a>
+        </Link>{' '}
+        | {t('common:all-rights-reserved')}
+      </p>
+      <p className='mt-1'>
+        Version{' '}
+        <a
+          data-cy='version-link'
+          className='text-yellow hover:underline dark:text-yellow-dark'
+          href={versionLink}
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          {version}
+        </a>
+      </p>
+    </footer>
+  )
+}

components/Footer/index.tsx

@@ -1,28 +0,0 @@
-import useTranslation from 'next-translate/useTranslation'
-
-export const Footer: React.FC = () => {
-  const { t } = useTranslation()
-
-  return (
-    <>
-      <footer className='Footer text-center'>
-        <p>
-          <span className='important'>Divlo</span> | {t('common:allRightsReserved')}
-        </p>
-      </footer>
-
-      <style jsx>
-        {`
-          .Footer {
-            border-top: var(--border-header-footer);
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            padding: 10px;
-          }
-        `}
-      </style>
-    </>
-  )
-}

components/Head.tsx

@@ -7,12 +7,12 @@ interface HeadProps {
   url?: string
 }
 
-export const Head: React.FC<HeadProps> = props => {
+export const Head: React.FC<HeadProps> = (props) => {
   const {
     title = 'Divlo',
-    image = '/images/icons/icon-96x96.png',
-    description = "I'm Divlo, I'm 18 years old, I'm from France - Developer Full Stack Junior • Passionate about High-Tech",
-    url = 'https://divlo.divlo.fr/'
+    image = 'https://divlo.fr/images/icons/icon-96x96.png',
+    description = 'Divlo - Developer Full Stack Junior • Passionate about High-Tech',
+    url = 'https://divlo.fr/'
   } = props
 
   return (
@@ -21,7 +21,7 @@ export const Head: React.FC<HeadProps> = props => {
       <link rel='icon' type='image/png' href={image} />
 
       {/* Meta Tag */}
-      <meta name='viewport' content='width=device-width, initial-scale=1' />
+      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
       <meta name='description' content={description} />
       <meta name='Language' content='fr, en' />
       <meta name='theme-color' content='#ffd800' />
@@ -39,7 +39,7 @@ export const Head: React.FC<HeadProps> = props => {
       <meta name='twitter:card' content='summary' />
       <meta name='twitter:description' content={description} />
       <meta name='twitter:title' content={title} />
-      <meta name='twitter:image:src' content={image} />
+      <meta name='twitter:image' content={image} />
 
       {/* Google Verification */}
       <meta

components/Header/Language/Arrow.tsx

@@ -8,8 +8,8 @@ export const Arrow: React.FC = () => {
       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'
-        fill='#fff'
       />
     </svg>
   )

components/Header/Language/LanguageFlag.tsx

@@ -10,22 +10,15 @@ export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
   return (
     <>
       <Image
+        quality={100}
         width={35}
         height={35}
         src={`/images/languages/${language}.svg`}
         alt={language}
       />
-      <p className='language-title'>{language.toUpperCase()}</p>
-
-      <style jsx>
-        {`
-          .language-title {
-            margin: 0 8px 0 10px;
-            font-size: 16px;
-            font-family: 'Arial', 'sans-serif';
-          }
-        `}
-      </style>
+      <p data-cy='language-flag-text' className='mx-2 text-base'>
+        {language.toUpperCase()}
+      </p>
     </>
   )
 }

components/Header/Language/index.tsx

@@ -1,52 +1,70 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
+import classNames from 'clsx'
+
+import i18n from 'i18n.json'
 
 import { Arrow } from './Arrow'
 import { LanguageFlag } from './LanguageFlag'
-import { locales } from 'i18n.json'
 
 export const Language: React.FC = () => {
   const { lang: currentLanguage } = useTranslation()
   const [hiddenMenu, setHiddenMenu] = useState(true)
+  const languageClickRef = useRef<HTMLDivElement | null>(null)
+
+  const handleHiddenMenu = useCallback(() => {
+    setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
+  }, [])
 
   useEffect(() => {
-    if (!hiddenMenu) {
-      window.document.addEventListener('click', handleHiddenMenu)
-    } else {
-      window.document.removeEventListener('click', handleHiddenMenu)
+    const handleClickEvent = (event: MouseEvent): void => {
+      if (languageClickRef.current == null || event.target == null) {
+        return
+      }
+      if (!languageClickRef.current.contains(event.target as Node)) {
+        setHiddenMenu(true)
+      }
     }
 
+    window.document.addEventListener('click', handleClickEvent)
+
     return () => {
-      window.document.removeEventListener('click', handleHiddenMenu)
+      return window.removeEventListener('click', handleClickEvent)
     }
-  }, [hiddenMenu])
+  }, [])
 
   const handleLanguage = async (language: string): Promise<void> => {
     await setLanguage(language)
-    handleHiddenMenu()
-  }
-
-  const handleHiddenMenu = (): void => {
-    setHiddenMenu(!hiddenMenu)
   }
 
   return (
-    <>
-      <div className='language-menu'>
-        <div className='selected-language' onClick={handleHiddenMenu}>
+    <div className='flex cursor-pointer flex-col items-center justify-center'>
+      <div
+        ref={languageClickRef}
+        data-cy='language-click'
+        className='mr-5 flex items-center'
+        onClick={handleHiddenMenu}
+      >
         <LanguageFlag language={currentLanguage} />
         <Arrow />
       </div>
-        {!hiddenMenu && (
-          <ul>
-            {locales.map((language, index) => {
+
+      <ul
+        data-cy='languages-list'
+        className={classNames(
+          'absolute top-14 z-10 mt-3 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag',
+          { hidden: hiddenMenu }
+        )}
+      >
+        {i18n.locales.map((language, index) => {
           if (language === currentLanguage) {
             return null
           }
           return (
             <li
               key={index}
+              className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
               onClick={async () => await handleLanguage(language)}
             >
               <LanguageFlag language={language} />
@@ -54,52 +72,6 @@ export const Language: React.FC = () => {
           )
         })}
       </ul>
-        )}
     </div>
-
-      <style jsx>
-        {`
-          .language-menu {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-          }
-          .selected-language {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-          }
-          ul {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            position: absolute;
-            top: 60px;
-            width: 100px;
-            padding: 10px;
-            margin: 10px 15px 0 0px;
-            border-radius: 15%;
-            padding: 0;
-            box-shadow: 0px 1px 10px var(--color-shadow);
-            background-color: var(--color-background-primary);
-            z-index: 10;
-          }
-          ul > li {
-            list-style: none;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 50px;
-            width: 100%;
-          }
-          ul > li:hover {
-            background-color: rgba(79, 84, 92, 0.16);
-          }
-        `}
-      </style>
-    </>
   )
 }

components/Header/SwitchTheme.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+
+export const SwitchTheme: React.FC = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  const handleClick = (): void => {
+    setTheme(theme === 'dark' ? 'light' : 'dark')
+  }
+
+  return (
+    <>
+      <div
+        className='flex items-center'
+        data-cy='switch-theme-click'
+        onClick={handleClick}
+      >
+        <div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
+          <div className='toggle-track'>
+            <div
+              data-cy='switch-theme-dark'
+              className='toggle-track-check absolute'
+            >
+              <span className='toggle_Dark relative flex items-center justify-center'>
+                🌜
+              </span>
+            </div>
+            <div
+              data-cy='switch-theme-light'
+              className='toggle-track-x absolute'
+            >
+              <span className='toggle_Light relative flex items-center justify-center'>
+                🌞
+              </span>
+            </div>
+          </div>
+          <div className='toggle-thumb absolute' />
+          <input
+            data-cy='switch-theme-input'
+            type='checkbox'
+            aria-label='Dark mode toggle'
+            className='toggle-screenreader-only absolute overflow-hidden'
+            defaultChecked
+          />
+        </div>
+      </div>
+
+      <style jsx>
+        {`
+          .toggle-theme-button {
+            touch-action: pan-x;
+            border: 0;
+            padding: 0;
+            user-select: none;
+          }
+          .toggle-track {
+            width: 50px;
+            height: 24px;
+            padding: 0;
+            border-radius: 30px;
+            background-color: #4d4d4d;
+            transition: all 0.2s ease;
+            color: #fff;
+          }
+          .toggle-track-check {
+            width: 14px;
+            height: 10px;
+            top: 0;
+            bottom: 0;
+            margin-top: auto;
+            margin-bottom: auto;
+            line-height: 0;
+            left: 8px;
+            opacity: ${theme === 'dark' ? 1 : 0};
+            transition: opacity 0.25s ease;
+          }
+          .toggle-track-x {
+            width: 10px;
+            height: 10px;
+            top: 0;
+            bottom: 0;
+            margin-top: auto;
+            margin-bottom: auto;
+            line-height: 0;
+            right: 10px;
+            opacity: ${theme === 'dark' ? 0 : 1};
+          }
+          .toggle_Dark,
+          .toggle_Light {
+            height: 10px;
+            width: 10px;
+          }
+          .toggle-thumb {
+            left: ${theme === 'dark' ? '27px' : '0px'};
+            width: 22px;
+            height: 22px;
+            border: 1px solid #4d4d4d;
+            border-radius: 50%;
+            background-color: #fafafa;
+            box-sizing: border-box;
+            transition: all 0.25s ease;
+            top: 1px;
+            color: #fff;
+          }
+          .toggle-screenreader-only {
+            border: 0;
+            clip: rect(0 0 0 0);
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            width: 1px;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/Header/index.tsx

@@ -2,87 +2,47 @@ import Link from 'next/link'
 import Image from 'next/image'
 
 import { Language } from './Language'
+import { SwitchTheme } from './SwitchTheme'
+
+export interface HeaderProps {
+  showLanguage?: boolean
+}
+
+export const Header: React.FC<HeaderProps> = (props) => {
+  const { showLanguage = false } = props
 
-export const Header: React.FC = () => {
   return (
-    <>
-      <header className='header'>
-        <div className='container'>
-          <nav className='navbar navbar-fixed-top'>
+    <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='/'>
-              <a className='navbar__brand-link'>
-                <div className='navbar__brand'>
+        <a>
+          <div className='flex items-center justify-center'>
             <Image
+              quality={100}
               width={60}
               height={60}
               src='/images/divlo_icon_small.png'
               alt='Divlo'
             />
-                  <strong className='navbar__brand-title'>Divlo</strong>
+            <strong className='ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block'>
+              Divlo
+            </strong>
           </div>
         </a>
       </Link>
-            <div className='navbar__buttons'>
-              <Language />
+      <div className='flex justify-between'>
+        <div className='flex flex-col items-center justify-center px-6'>
+          <Link href='/blog'>
+            <a
+              data-cy='header-blog-link'
+              className='text-yellow hover:underline dark:text-yellow-dark'
+            >
+              Blog
+            </a>
+          </Link>
         </div>
-          </nav>
+        {showLanguage && <Language />}
+        <SwitchTheme />
       </div>
     </header>
-
-      <style jsx>
-        {`
-          .header {
-            background-color: var(--color-background);
-            border-bottom: var(--border-header-footer);
-            padding: 0.5rem 1rem;
-            position: fixed;
-            width: 100%;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: 100;
-            height: var(--header-height);
-          }
-          .container {
-            max-width: 1280px;
-            width: 100%;
-            margin: auto;
-          }
-          .navbar {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-          }
-          .navbar-fixed-top {
-            position: sticky;
-            top: 0;
-            z-index: 200;
-          }
-          .navbar__brand-link {
-            color: var(--color-text-1);
-            text-decoration: none;
-            font-size: 16px;
-          }
-          .navbar__brand {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-          }
-          .navbar__brand-title {
-            font-weight: 600;
-            margin-left: 10px;
-          }
-          .navbar__buttons {
-            display: flex;
-            justify-content: space-between;
-          }
-          @media (max-width: 320px) {
-            .navbar__brand-title {
-              display: none;
-            }
-          }
-        `}
-      </style>
-    </>
   )
 }

components/Interests/InterestParagraph.tsx

@@ -10,10 +10,12 @@ export const InterestParagraph: React.FC<InterestParagraphProps> = (props) => {
 
   return (
     <>
-      <p className='text-center'>
-        <strong className='important'>{title}</strong>
+      <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 />
-        <span className='paragraph-color'>{htmlParser(description)}</span>
+        <span>{htmlParser(description)}</span>
       </p>
     </>
   )

components/Interests/InterestsList/InterestItem.tsx

@@ -1,41 +1,20 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
-import { Tooltip } from 'components/design/Tooltip'
 
 interface InterestItemProps {
   title: string
   fontAwesomeIcon: IconDefinition
 }
 
-export const InterestItem: React.FC<InterestItemProps> = props => {
+export const InterestItem: React.FC<InterestItemProps> = (props) => {
   const { fontAwesomeIcon, title } = props
 
   return (
-    <>
-      <li className='interest-item'>
-        <Tooltip title={title}>
+    <li className='interest-item my-2 mx-2 h-8 w-8' title={title}>
       <FontAwesomeIcon
-            className='color-primary'
-            style={{
-              cursor: 'pointer',
-              height: '100%',
-              width: '100%',
-              display: 'block'
-            }}
+        className='block h-full w-full text-yellow dark:text-yellow-dark'
         icon={fontAwesomeIcon}
       />
-        </Tooltip>
     </li>
-
-      <style jsx>
-        {`
-          .interest-item {
-            margin: 7px 5px;
-            width: 34px;
-            height: 34px;
-          }
-        `}
-      </style>
-    </>
   )
 }

components/Interests/InterestsList/index.tsx

@@ -5,9 +5,8 @@ import { InterestItem } from './InterestItem'
 
 export const InterestsList: React.FC = () => {
   return (
-    <>
-      <div className='container-list'>
-        <ul className='interests-list'>
+    <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 Junior'
           fontAwesomeIcon={faCode}
@@ -16,30 +15,8 @@ export const InterestsList: React.FC = () => {
           title='Passionate about High-Tech'
           fontAwesomeIcon={faMicrochip}
         />
-          <InterestItem
-            title='Open-Source enthusiast'
-            fontAwesomeIcon={faGit}
-          />
+        <InterestItem title='Open-Source enthusiast' fontAwesomeIcon={faGit} />
       </ul>
     </div>
-
-      <style jsx>
-        {`
-          .container-list {
-            display: flex;
-            justify-content: center;
-            margin: 15px 0 15px 0;
-          }
-          .interests-list {
-            display: flex;
-            justify-content: space-around;
-            padding: 0;
-            margin: 0;
-            width: 60%;
-            list-style: none;
-          }
-        `}
-      </style>
-    </>
   )
 }

components/Interests/index.tsx

@@ -6,18 +6,20 @@ import { InterestsList } from './InterestsList'
 export const Interests: React.FC = () => {
   const { t } = useTranslation()
 
-  const paragraphs: InterestParagraphProps[] = t('home:interests.paragraphs', {}, {
+  const paragraphs: InterestParagraphProps[] = t(
+    'home:interests.paragraphs',
+    {},
+    {
       returnObjects: true
-  })
+    }
+  )
 
   return (
-    <>
-      <div className='col-24'>
+    <div className='max-w-full'>
       {paragraphs.map((paragraph, index) => {
         return <InterestParagraph key={index} {...paragraph} />
       })}
       <InterestsList />
     </div>
-    </>
   )
 }

components/OpenSource/Repository.tsx

@@ -0,0 +1,24 @@
+import { ShadowContainer } from 'components/design/ShadowContainer'
+import { GitHubIcon } from 'components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon'
+
+export interface RepositoryProps {
+  name: string
+  description: string
+  href: string
+}
+
+export const Repository: React.FC<RepositoryProps> = (props) => {
+  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>
+        </div>
+        <p className='my-4'>{description}</p>
+      </a>
+    </ShadowContainer>
+  )
+}

components/OpenSource/index.tsx

@@ -0,0 +1,35 @@
+import useTranslation from 'next-translate/useTranslation'
+
+import { Repository } from './Repository'
+
+export const OpenSource: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='mt-0 flex max-w-full flex-col items-center'>
+      <p className='text-center'>{t('home:open-source.description')}</p>
+      <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=Divlo'
+        />
+        <Repository
+          name='standard/standard'
+          description='🌟 JavaScript Style Guide, with linter & automatic code fixer'
+          href='https://github.com/standard/standard/commits?author=Divlo'
+        />
+        <Repository
+          name='nrwl/nx'
+          description='Smart, Extensible Build Framework'
+          href='https://github.com/nrwl/nx/commits?author=Divlo'
+        />
+        <Repository
+          name='vercel/next.js'
+          description='The React Framework for Production'
+          href='https://github.com/vercel/next.js/commits?author=Divlo'
+        />
+      </div>
+    </div>
+  )
+}

components/Portfolio/PortfolioItem.tsx

@@ -1,5 +1,7 @@
 import Image from 'next/image'
 
+import { ShadowContainer } from 'components/design/ShadowContainer'
+
 export interface PortfolioItemProps {
   title: string
   description: string
@@ -7,96 +9,35 @@ export interface PortfolioItemProps {
   image: string
 }
 
-export const PortfolioItem: React.FC<PortfolioItemProps> = props => {
+export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
   const { title, description, link, image } = props
 
   return (
-    <>
-      <div className='col-sm-24 col-md-10 col-xl-7 portfolio-grid'>
+    <ShadowContainer className='relative cursor-pointer items-center sm:ml-10'>
       <a
-          className='portfolio-link'
+        className='group inline-flex justify-center'
         target='_blank'
         rel='noopener noreferrer'
         href={link}
         aria-label={title}
       >
-          <div className='portfolio-figure'>
-            <Image width={300} height={300} src={image} alt={title} />
+        <div className='flex justify-center'>
+          <Image
+            quality={100}
+            className='transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5'
+            width={300}
+            height={300}
+            src={image}
+            alt={title}
+          />
         </div>
-          <div className='portfolio-caption'>
-            <h3 className='portfolio-title important'>{title}</h3>
-            <p className='portfolio-description'>{description}</p>
+        <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'>
+            {title}
+          </h3>
+          <p className='my-6'>{description}</p>
         </div>
       </a>
-      </div>
-
-      <style jsx global>
-        {`
-        .portfolio-figure img[alt='${title}'] {
-          max-height: 300px;
-          max-width: 300px;
-          transition: opacity 0.5s ease;
-        }
-        .portfolio-grid:hover img[alt='${title}'] {
-          opacity: 0.05;
-        }
-      `}
-      </style>
-
-      <style jsx>
-        {`
-          .portfolio-grid {
-            display: flex;
-            align-items: center;
-            position: relative;
-            flex-direction: column;
-            word-wrap: break-word;
-            box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
-            border: 1px solid black;
-            border-radius: 1rem;
-            margin: 0 0 50px 0;
-            cursor: pointer;
-          }
-          /* col-md */
-          @media (min-width: 768px) {
-            .portfolio-grid {
-              margin: 0 30px 50px 30px;
-            }
-          }
-          /* col-xl */
-          @media (min-width: 1200px) {
-            .portfolio-grid {
-              margin: 0 20px 50px 20px;
-            }
-          }
-          .portfolio-figure {
-            display: flex;
-            justify-content: center;
-          }
-          .portfolio-caption {
-            transition: opacity 0.5s ease;
-            opacity: 0;
-            height: 0;
-            overflow: hidden;
-          }
-          .portfolio-description {
-            font-size: 16px;
-          }
-          .portfolio-grid:hover .portfolio-caption {
-            opacity: 1;
-            height: auto;
-            position: absolute;
-            bottom: 0;
-            text-align: center;
-            width: 80%;
-          }
-          .portfolio-grid:hover .portfolio-link {
-            color: var(--text-color);
-            display: flex;
-            justify-content: center;
-          }
-        `}
-      </style>
-    </>
+    </ShadowContainer>
   )
 }

components/Portfolio/index.tsx

@@ -5,19 +5,19 @@ import { PortfolioItem, PortfolioItemProps } from './PortfolioItem'
 export const Portfolio: React.FC = () => {
   const { t } = useTranslation('home')
 
-  const items: PortfolioItemProps[] = t('home:portfolio.items', {}, {
+  const items: PortfolioItemProps[] = t(
+    'home:portfolio.items',
+    {},
+    {
       returnObjects: true
-  })
+    }
+  )
 
   return (
-    <>
-      <div className='container-fluid'>
-        <div className='row justify-content-center'>
+    <div className='flex w-full flex-wrap justify-center px-3'>
       {items.map((item, index) => {
         return <PortfolioItem key={index} {...item} />
       })}
     </div>
-      </div>
-    </>
   )
 }

components/Profile/ProfileDescriptionBottom.tsx

@@ -1,28 +1,23 @@
-import Translation from 'next-translate/Trans'
+import useTranslation from 'next-translate/useTranslation'
 
 export const ProfileDescriptionBottom: React.FC = () => {
-  return (
-    <>
-      <p className='profile-description-bottom'>
-        <Translation
-          i18nKey='home:about.descriptionBottom'
-          components={[<br key='break' />]}
-        />
-      </p>
+  const { t, lang } = useTranslation()
 
-      <style jsx>
-        {`
-          .profile-description-bottom {
-            font-size: 16px;
-            display: block;
-            font-weight: 400;
-            line-height: 25px;
-            color: #b2bac2;
-            margin-top: 30px;
-            margin-bottom: 0;
-          }
-        `}
-      </style>
+  return (
+    <p className='mt-8 mb-8 text-base font-normal text-gray dark:text-gray-dark'>
+      {t('home:about.description-bottom')}
+      {lang === 'fr' && (
+        <>
+          <br />
+          <br />
+          <a
+            href='/curriculum-vitae'
+            className='text-yellow hover:underline dark:text-yellow-dark'
+          >
+            Curriculum vitæ
+          </a>
         </>
+      )}
+    </p>
   )
 }

components/Profile/ProfileInfo.tsx

@@ -1,41 +1,17 @@
 import useTranslation from 'next-translate/useTranslation'
 
-export const ProfileInfo: React.FC = () => {
+export const ProfileInformation: React.FC = () => {
   const { t } = useTranslation()
 
   return (
-    <>
-      <div className='profile-info'>
-        <h1 className='profile-title'>
-          {t('home:about.IAm')} <strong className='important'>Divlo</strong>
+    <div className='mb-6 border-b-2 border-gray-600 pb-2 font-headline dark:border-gray-400'>
+      <h1 className='mb-2 text-4xl'>
+        {t('home:about.i-am')}{' '}
+        <strong className='font-semibold text-yellow dark:text-yellow-dark'>
+          Divlo
+        </strong>
       </h1>
-        <h2 className='profile-description'>{t('home:about.description')}</h2>
+      <h2 className='mb-3 text-base'>{t('home:about.description')}</h2>
     </div>
-
-      <style jsx>
-        {`
-          .profile-info {
-            padding-bottom: 25px;
-            margin-bottom: 25px;
-            border-bottom: 1px solid #dedede;
-          }
-          .profile-title {
-            font-size: 36px;
-            line-height: 1.1;
-            font-weight: 300;
-            margin-bottom: 10px;
-          }
-          .profile-title > strong {
-            font-weight: 600;
-          }
-          .profile-description {
-            font-size: 17.4px;
-            font-weight: 400;
-            line-height: 1.1;
-            margin: 0;
-          }
-        `}
-      </style>
-    </>
   )
 }

components/Profile/ProfileList/ProfileItem.tsx

@@ -4,16 +4,20 @@ interface ProfileItemProps {
   link?: string
 }
 
-export const ProfileItem: React.FC<ProfileItemProps> = props => {
+export const ProfileItem: React.FC<ProfileItemProps> = (props) => {
   const { title, value, link } = props
 
   return (
-    <>
-      <li className='profile-list__item'>
-        <strong className='profile-list__item-title'>{title}</strong>
-        <span className='profile-list__item-info'>
+    <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='ml-0 mb-4 block text-sm font-normal text-gray dark:text-gray-dark sm:mb-0 sm:ml-32'>
         {link != null ? (
-            <a className='profile-list__link' href={link}>
+          <a
+            className='text-gray hover:underline dark:text-gray-dark'
+            href={link}
+          >
             {value}
           </a>
         ) : (
@@ -21,59 +25,5 @@ export const ProfileItem: React.FC<ProfileItemProps> = props => {
         )}
       </span>
     </li>
-
-      <style jsx>
-        {`
-          .profile-list__item {
-            margin-bottom: 13px;
-          }
-          .profile-list__item::after,
-          .profile-list__item::before {
-            content: ' ';
-            display: table;
-          }
-          .profile-list__item::after {
-            clear: both;
-          }
-          .profile-list__item-title {
-            display: block;
-            width: 120px;
-            float: left;
-            color: #d4d4d5;
-            font-size: 12px;
-            font-weight: 700;
-            line-height: 20px;
-            text-transform: uppercase;
-          }
-          .profile-list__item-info {
-            display: block;
-            margin-left: 125px;
-            font-size: 15px;
-            font-weight: 400;
-            line-height: 20px;
-            color: #84898e;
-          }
-          .profile-list__link {
-            color: #84898e;
-          }
-
-          @media (max-width: 576px) {
-            .profile-list__item-title {
-              margin-bottom: 3px;
-            }
-            .profile-list__item-info {
-              margin-left: 0;
-              margin-bottom: 15px;
-            }
-            .profile-list__item-info,
-            .profile-list__item-title {
-              width: 100%;
-              float: none;
-              line-height: 1.2;
-            }
-          }
-        `}
-      </style>
-    </>
   )
 }

components/Profile/ProfileList/index.tsx

@@ -1,37 +1,30 @@
 import useTranslation from 'next-translate/useTranslation'
+import { useMemo } from 'react'
+
+import { DIVLO_BIRTHDAY, DIVLO_BIRTHDAY_DATE, getAge } from 'utils/getAge'
 
 import { ProfileItem } from './ProfileItem'
 
 export const ProfileList: React.FC = () => {
   const { t } = useTranslation('home')
 
+  const age = useMemo(() => {
+    return getAge(DIVLO_BIRTHDAY)
+  }, [])
+
   return (
-    <>
-      <ul className='profile-list'>
+    <ul className='m-0 list-none p-0'>
+      <ProfileItem title={t('home:about.full-name')} value='Théo LUDWIG' />
       <ProfileItem
-          title={t('home:about.birthDate')}
-          value='31/03/2003'
-        />
-        <ProfileItem
-          title={t('home:about.nationality')}
-          value='Alsace, France'
+        title={t('home:about.birth-date')}
+        value={`${DIVLO_BIRTHDAY_DATE} (${age} ${t('home:about.years-old')})`}
       />
+      <ProfileItem title={t('home:about.nationality')} value='Alsace, France' />
       <ProfileItem
         title='Email'
         value='contact@divlo.fr'
         link='mailto:contact@divlo.fr'
       />
     </ul>
-
-      <style jsx>
-        {`
-          .profile-list {
-            margin: 0;
-            padding: 0;
-            list-style: none;
-          }
-        `}
-      </style>
-    </>
   )
 }

components/Profile/ProfileLogo.tsx

@@ -1,26 +1,11 @@
 import Image from 'next/image'
 
+import DivloLogo from 'public/images/divlo_logo.png'
+
 export const ProfileLogo: React.FC = () => {
   return (
-    <>
-      <div className='col-sm-24 col-md-10'>
-        <div className='profile-logo'>
-          <Image
-            width={800}
-            height={800}
-            src='/images/divlo_logo.png'
-            alt='Divlo'
-          />
+    <div className='max-h-[370px] max-w-[370px] px-2 py-6'>
+      <Image quality={100} src={DivloLogo} alt='Divlo' />
     </div>
-      </div>
-
-      <style jsx>{`
-        .profile-logo {
-          margin-right: 10px;
-          margin-left: 10px;
-        }
-      `}
-      </style>
-    </>
   )
 }

components/Profile/SocialMediaList/SocialMediaIcons/EmailIcon.tsx

@@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const EmailIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  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' />
+    </Icon>
+  )
+}

components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx

@@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const GitHubIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  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' />
+    </Icon>
+  )
+}

components/Profile/SocialMediaList/SocialMediaIcons/GitLabIcon.tsx

@@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const GitLabIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  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' />
+    </Icon>
+  )
+}

components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx

@@ -0,0 +1,19 @@
+import classNames from 'clsx'
+
+export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  const { children, className, ...rest } = props
+
+  return (
+    <svg
+      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
+      )}
+      {...rest}
+    >
+      {children}
+    </svg>
+  )
+}

components/Profile/SocialMediaList/SocialMediaIcons/NPMIcon.tsx

@@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const NPMIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  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' />
+    </Icon>
+  )
+}

components/Profile/SocialMediaList/SocialMediaIcons/TwitchIcon.tsx

@@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const TwitchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  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' />
+    </Icon>
+  )
+}

components/Profile/SocialMediaList/SocialMediaIcons/TwitterIcon.tsx

@@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  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' />
+    </Icon>
+  )
+}

components/Profile/SocialMediaList/SocialMediaIcons/YouTubeIcon.tsx

@@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const YouTubeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  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' />
+    </Icon>
+  )
+}

components/Profile/SocialMediaList/SocialMediaItem.tsx

@@ -1,50 +1,24 @@
-import { Tooltip } from 'components/design/Tooltip'
-import Image from 'next/image'
-
 interface SocialMediaItemProps {
   link: string
-  socialMedia: 'Email' | 'GitHub' | 'Twitch' | 'Twitter' | 'YouTube'
+  ariaLabel: string
 }
 
-export const SocialMediaItem: React.FC<SocialMediaItemProps> = props => {
-  const { link, socialMedia } = props
+export const SocialMediaItem: React.FC<
+  React.PropsWithChildren<SocialMediaItemProps>
+> = (props) => {
+  const { link, ariaLabel, children } = props
 
   return (
-    <>
-      <li className='social-media-list__item'>
+    <li className='mx-4 my-1 inline-block'>
       <a
         href={link}
-          aria-label={socialMedia}
+        aria-label={ariaLabel}
         target='_blank'
         rel='noopener noreferrer'
-          className='social-media-list__link'
+        className='relative inline-block bg-transparent'
       >
-          <Tooltip title={socialMedia}>
-            <Image
-              width={45}
-              height={45}
-              alt={socialMedia}
-              src={`/images/web/${socialMedia}.png`}
-            />
-          </Tooltip>
+        {children}
       </a>
     </li>
-
-      <style jsx>
-        {`
-          .social-media-list__item {
-            display: inline-block;
-            margin: 5px 15px;
-          }
-          .social-media-list__link {
-            width: 45px;
-            height: 45px;
-            position: relative;
-            display: inline-block;
-            background-color: transparent;
-          }
-        `}
-      </style>
-    </>
   )
 }

components/Profile/SocialMediaList/index.tsx

@@ -1,41 +1,39 @@
 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: React.FC = () => {
   return (
-    <>
-      <div className='row justify-content-center'>
-        <ul className='social-media-list'>
+    <ul className='social-media-list m-0 mt-2 list-none py-4 text-center'>
+      <SocialMediaItem link='https://github.com/Divlo' ariaLabel='GitHub'>
+        <GitHubIcon />
+      </SocialMediaItem>
+      <SocialMediaItem link='https://gitlab.com/Divlo' ariaLabel='GitLab'>
+        <GitLabIcon />
+      </SocialMediaItem>
+      <SocialMediaItem link='https://www.npmjs.com/~divlo' ariaLabel='NPM'>
+        <NPMIcon />
+      </SocialMediaItem>
+      <SocialMediaItem link='https://twitter.com/Divlo_FR' ariaLabel='Twitter'>
+        <TwitterIcon />
+      </SocialMediaItem>
       <SocialMediaItem
-            socialMedia='Twitter'
-            link='https://twitter.com/Divlo_FR'
-          />
-          <SocialMediaItem
-            socialMedia='GitHub'
-            link='https://github.com/Divlo'
-          />
-          <SocialMediaItem
-            socialMedia='YouTube'
         link='https://www.youtube.com/c/Divlo'
-          />
-          <SocialMediaItem
-            socialMedia='Twitch'
-            link='https://www.twitch.tv/divlo'
-          />
-          <SocialMediaItem socialMedia='Email' link='mailto:contact@divlo.fr' />
+        ariaLabel='YouTube'
+      >
+        <YouTubeIcon />
+      </SocialMediaItem>
+      <SocialMediaItem link='https://www.twitch.tv/divlo' ariaLabel='Twitch'>
+        <TwitchIcon />
+      </SocialMediaItem>
+      <SocialMediaItem link='mailto:contact@divlo.fr' ariaLabel='Email'>
+        <EmailIcon />
+      </SocialMediaItem>
     </ul>
-      </div>
-
-      <style jsx>{`
-        .social-media-list {
-          margin: 0;
-          padding: 0;
-          list-style: none;
-          text-align: center;
-          padding: 15px 0;
-          margin-top: 10px;
-        }
-      `}
-      </style>
-    </>
   )
 }

components/Profile/index.tsx

@@ -1,33 +1,17 @@
 import { ProfileDescriptionBottom } from './ProfileDescriptionBottom'
-import { ProfileInfo } from './ProfileInfo'
+import { ProfileInformation } from './ProfileInfo'
 import { ProfileList } from './ProfileList'
 import { ProfileLogo } from './ProfileLogo'
 
 export const Profile: React.FC = () => {
   return (
-    <>
-      <div className='row profile'>
+    <div className='flex flex-col items-center justify-center px-10 pt-2 md:flex-row md:pt-10'>
       <ProfileLogo />
-        <div className='col-sm-24 col-md-14'>
-          <ProfileInfo />
+      <div>
+        <ProfileInformation />
         <ProfileList />
         <ProfileDescriptionBottom />
       </div>
     </div>
-
-      <style jsx>
-        {`
-          .profile {
-            padding: 40px 50px 15px 50px;
-          }
-
-          @media (max-width: 576px) {
-            .profile {
-              padding: 40px 10px 0 10px;
-            }
-          }
-        `}
-      </style>
-    </>
   )
 }

components/Skills/Skill.tsx

@@ -1,44 +1,36 @@
+import { useTheme } from 'next-themes'
 import Image from 'next/image'
+import { useMemo } from 'react'
 
 import { skills } from './skills'
 
-export interface SkillProps {
-  skill: keyof typeof skills
+export interface SkillComponentProps {
+  skill: string
 }
 
-export const Skill: React.FC<SkillProps> = props => {
+export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
   const { skill } = props
   const skillProperties = skills[skill]
+  const { theme } = useTheme()
+
+  const image = useMemo(() => {
+    if (typeof skillProperties.image !== 'string') {
+      return skillProperties.image[theme ?? 'light']
+    }
+    return skillProperties.image
+  }, [skillProperties, theme])
 
   return (
-    <>
     <a
       href={skillProperties.link}
-        className='skills-link'
+      className='mx-2 max-w-xl text-yellow hover:underline dark:text-yellow-dark'
       target='_blank'
       rel='noopener noreferrer'
     >
-        <div className='skills-content text-center'>
-          <Image
-            width={60}
-            height={60}
-            alt={skill}
-            src={skillProperties.image}
-          />
-          <p className='skills-text'>{skill}</p>
+      <div className='text-center'>
+        <Image quality={100} width={60} height={60} alt={skill} src={image} />
+        <p className='mt-1'>{skill}</p>
       </div>
     </a>
-
-      <style jsx>{`
-        .skills-link {
-          max-width: 120px;
-          margin: 0px 10px 0 10px;
-        }
-        .skills-text {
-          margin-top: 5px;
-        }
-      `}
-      </style>
-    </>
   )
 }

components/Skills/SkillsSection.tsx

@@ -5,40 +5,23 @@ export interface SkillsSectionProps {
   children: React.ReactNode
 }
 
-export const SkillsSection: React.FC<SkillsSectionProps> = props => {
+export const SkillsSection: React.FC<SkillsSectionProps> = (props) => {
   const { title, children } = props
 
   return (
-    <>
     <ShadowContainer>
-        <div className='container-fluid'>
-          <div className='row row-padding'>
-            <div className='col-24'>
-              <div className='skills-header'>
-                <h3 className='important'>{title}</h3>
+      <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'>
+                {title}
+              </h3>
             </div>
-              <div className='skills-body'>{children}</div>
+            <div className='flex flex-wrap justify-around'>{children}</div>
           </div>
         </div>
       </div>
     </ShadowContainer>
-
-      <style jsx>{`
-        .skills-header {
-          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-          margin-bottom: 15px;
-        }
-        .skills-header > h3 {
-          margin-bottom: 15px;
-        }
-        .skills-body {
-          display: flex;
-          justify-content: space-around;
-          flex-flow: row wrap;
-          padding-top: 1.5rem;
-        }
-      `}
-      </style>
-    </>
   )
 }

components/Skills/index.tsx

@@ -1,6 +1,6 @@
 import useTranslation from 'next-translate/useTranslation'
 
-import { Skill } from './Skill'
+import { SkillComponent } from './Skill'
 import { SkillsSection } from './SkillsSection'
 
 export const Skills: React.FC = () => {
@@ -9,32 +9,33 @@ export const Skills: React.FC = () => {
   return (
     <>
       <SkillsSection title={t('home:skills.languages')}>
-        <Skill skill='JavaScript' />
-        <Skill skill='TypeScript' />
-        <Skill skill='Python' />
-        <Skill skill='Dart' />
+        <SkillComponent skill='JavaScript' />
+        <SkillComponent skill='TypeScript' />
+        <SkillComponent skill='Python' />
+        <SkillComponent skill='C/C++' />
       </SkillsSection>
 
       <SkillsSection title='Front-end'>
-        <Skill skill='HTML' />
-        <Skill skill='CSS' />
-        <Skill skill='SASS' />
-        <Skill skill='React.js (+ Next.js)' />
-        <Skill skill='Flutter' />
+        <SkillComponent skill='HTML' />
+        <SkillComponent skill='CSS' />
+        <SkillComponent skill='Tailwind CSS' />
+        <SkillComponent skill='React.js (+ Next.js)' />
       </SkillsSection>
 
       <SkillsSection title='Back-end'>
-        <Skill skill='Node.js' />
-        <Skill skill='Strapi' />
-        <Skill skill='MySQL' />
+        <SkillComponent skill='Node.js' />
+        <SkillComponent skill='Fastify' />
+        <SkillComponent skill='Prisma' />
+        <SkillComponent skill='PostgreSQL' />
+        <SkillComponent skill='MySQL' />
       </SkillsSection>
 
-      <SkillsSection title={t('home:skills.softwareTools')}>
-        <Skill skill='Ubuntu' />
-        <Skill skill='Hyper' />
-        <Skill skill='Visual Studio Code' />
-        <Skill skill='Git' />
-        <Skill skill='Docker' />
+      <SkillsSection title={t('home:skills.software-tools')}>
+        <SkillComponent skill='GNU/Linux' />
+        <SkillComponent skill='Ubuntu' />
+        <SkillComponent skill='Visual Studio Code' />
+        <SkillComponent skill='Git' />
+        <SkillComponent skill='Docker' />
       </SkillsSection>
     </>
   )

components/Skills/skills.ts

@@ -1,4 +1,13 @@
-export const skills = {
+export interface Skill {
+  link: string
+  image: string | { [key: string]: string }
+}
+
+export interface Skills {
+  [key: string]: Skill
+}
+
+export const skills: Skills = {
   JavaScript: {
     link: 'https://developer.mozilla.org/docs/Web/JavaScript',
     image: '/images/skills/JavaScript.png'
@@ -11,6 +20,10 @@ export const skills = {
     link: 'https://www.python.org/',
     image: '/images/skills/Python.png'
   },
+  'C/C++': {
+    link: 'https://isocpp.org/',
+    image: '/images/skills/C-Cpp.png'
+  },
   Dart: {
     link: 'https://dart.dev/',
     image: '/images/skills/Dart.png'
@@ -27,6 +40,10 @@ export const skills = {
     link: 'https://developer.mozilla.org/docs/Web/CSS',
     image: '/images/skills/CSS.png'
   },
+  'Tailwind CSS': {
+    link: 'https://tailwindcss.com/',
+    image: '/images/skills/TailwindCSS.png'
+  },
   SASS: {
     link: 'https://sass-lang.com/',
     image: '/images/skills/SASS.svg'
@@ -39,6 +56,24 @@ export const skills = {
     link: 'https://nodejs.org/',
     image: '/images/skills/NodeJS.png'
   },
+  Fastify: {
+    link: 'https://www.fastify.io/',
+    image: {
+      light: '/images/skills/Fastify-light.png',
+      dark: '/images/skills/Fastify-dark.png'
+    }
+  },
+  Prisma: {
+    link: 'https://www.prisma.io/',
+    image: {
+      light: '/images/skills/Prisma-light.png',
+      dark: '/images/skills/Prisma-dark.png'
+    }
+  },
+  PostgreSQL: {
+    link: 'https://www.postgresql.org/',
+    image: '/images/skills/PostgreSQL.png'
+  },
   MySQL: {
     link: 'https://www.mysql.com/',
     image: '/images/skills/MySQL.png'
@@ -63,6 +98,10 @@ export const skills = {
     link: 'https://ubuntu.com/',
     image: '/images/skills/Ubuntu.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'

components/design/Button.tsx

@@ -1,43 +0,0 @@
-import { forwardRef } from 'react'
-
-type ButtonProps = React.ComponentPropsWithRef<'button'>
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const { children, ...rest } = props
-
-    return (
-      <>
-        <button ref={ref} {...rest} className='btn btn-dark'>
-          {children}
-        </button>
-
-        <style jsx>
-          {`
-            .btn {
-              cursor: pointer;
-              border: 1px solid transparent;
-              padding: 0.375rem 0.75rem;
-              font-size: 1rem;
-              line-height: 1.5;
-              border-radius: 0.25rem;
-              transition: color 0.15s ease-in-out,
-                background-color 0.15s ease-in-out,
-                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-            }
-            .btn-dark {
-              color: #fff;
-              background-color: #343a40;
-              border-color: #343a40;
-            }
-            .btn-dark:hover {
-              color: #fff;
-              background-color: #23272b;
-              border-color: #1d2124;
-            }
-          `}
-        </style>
-      </>
-    )
-  }
-)

components/design/Input.tsx

@@ -1,75 +0,0 @@
-import { forwardRef } from 'react'
-
-interface InputProps extends React.HTMLProps<HTMLInputElement> {
-  label: string
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const { label, name, ...rest } = props
-
-  return (
-    <>
-      <div className='form-group-animation'>
-        <input ref={ref} {...rest} id={name} name={name} />
-        <label htmlFor={name} className='label'>
-          <span className='label-content'>{label}</span>
-        </label>
-      </div>
-
-      <style jsx>{`
-        .form-group-animation {
-          position: relative;
-          margin-top: 10px;
-          margin-bottom: 30px;
-          overflow: hidden;
-        }
-        .form-group-animation input {
-          width: 100%;
-          height: 100%;
-          padding-top: 35px;
-          color: var(--color-text-1);
-          border: none;
-          background: transparent;
-          outline: none;
-        }
-        .form-group-animation label {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          border-bottom: 1px solid #fff;
-        }
-        .form-group-animation label::after {
-          content: '';
-          position: absolute;
-          left: 0;
-          bottom: -1px;
-          height: 100%;
-          width: 100%;
-          border-bottom: 3px solid var(--color-primary);
-          transform: translateX(-100%);
-          transition: transform 0.2s ease;
-        }
-        .label-content {
-          position: absolute;
-          bottom: 5px;
-          left: 0px;
-          transition: all 0.3s ease;
-        }
-        .form-group-animation input:focus + .label .label-content,
-        .form-group-animation input:valid + .label .label-content {
-          transform: translateY(-150%);
-          font-size: 14px;
-          color: var(--color-primary);
-        }
-        .form-group-animation input:focus + .label::after,
-        .form-group-animation input:valid + .label::after {
-          transform: translateX(0%);
-        }
-      `}
-      </style>
-    </>
-  )
-})

components/design/RevealFade.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
 
-export const RevealFade: React.FC = props => {
+export const RevealFade: React.FC<React.PropsWithChildren<{}>> = (props) => {
   const { children } = props
 
   const htmlElement = useRef<HTMLDivElement>(null)
@@ -8,9 +8,10 @@ export const RevealFade: React.FC = props => {
   useEffect(() => {
     const observer = new window.IntersectionObserver(
       (entries, observer) => {
-        entries.forEach(entry => {
+        entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            entry.target.classList.add('reveal-visible')
+            entry.target.className =
+              'opacity-100 visible translate-y-0 transition-all duration-700 ease-in-out'
             observer.unobserve(entry.target)
           }
         })
@@ -25,25 +26,8 @@ export const RevealFade: React.FC = props => {
   }, [])
 
   return (
-    <>
-      <div ref={htmlElement} className='reveal'>
+    <div ref={htmlElement} className='invisible -translate-y-7 opacity-0'>
       {children}
     </div>
-
-      <style jsx>{`
-        .reveal {
-          opacity: 0;
-          visibility: hidden;
-          transform: translateY(-30px);
-        }
-        .reveal-visible {
-          opacity: 1;
-          visibility: visible;
-          transform: translateY(0);
-          transition: all 500ms ease-out 100ms;
-        }
-      `}
-      </style>
-    </>
   )
 }

components/design/Section/SectionHeading.tsx

@@ -1,28 +1,11 @@
-import { forwardRef } from 'react'
-
 type SectionHeadingProps = React.ComponentPropsWithRef<'h2'>
 
-export const SectionHeading = forwardRef<
-HTMLHeadingElement,
-SectionHeadingProps
->((props, ref) => {
+export const SectionHeading: React.FC<SectionHeadingProps> = (props) => {
   const { children, ...rest } = props
 
   return (
-    <>
-      <h2 ref={ref} {...rest} className='Section__title'>
+    <h2 {...rest} className='mt-1 mb-3 text-center text-4xl font-semibold'>
       {children}
     </h2>
-
-      <style jsx>
-        {`
-          .Section__title {
-            font-size: 34px;
-            margin-top: 10px;
-            text-align: center;
-          }
-        `}
-      </style>
-    </>
   )
-})
+}

components/design/Section/index.tsx

@@ -1,5 +1,3 @@
-import { forwardRef } from 'react'
-
 import { ShadowContainer } from '../ShadowContainer'
 import { SectionHeading } from './SectionHeading'
 
@@ -10,7 +8,7 @@ type SectionProps = React.ComponentPropsWithRef<'section'> & {
   withoutShadowContainer?: boolean
 }
 
-export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
+export const Section: React.FC<SectionProps> = (props) => {
   const {
     children,
     heading,
@@ -22,26 +20,28 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
 
   if (isMain) {
     return (
+      <div className='w-full px-3'>
         <ShadowContainer style={{ marginTop: 50 }}>
-        <section ref={ref} {...rest}>
+          <section {...rest}>
             {heading != null && <SectionHeading>{heading}</SectionHeading>}
-          <div className='container-fluid'>{children}</div>
+            <div className='w-full px-3'>{children}</div>
           </section>
         </ShadowContainer>
+      </div>
     )
   }
 
   if (withoutShadowContainer) {
     return (
-      <section ref={ref} {...rest}>
+      <section {...rest}>
         {heading != null && <SectionHeading>{heading}</SectionHeading>}
-        <div className='container-fluid'>{children}</div>
+        <div className='w-full px-3'>{children}</div>
       </section>
     )
   }
 
   return (
-    <section ref={ref} {...rest}>
+    <section {...rest}>
       {heading != null && (
         <SectionHeading style={{ ...(description != null && { margin: 0 }) }}>
           {heading}
@@ -52,11 +52,11 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
           {description}
         </p>
       )}
+      <div className='w-full px-3'>
         <ShadowContainer>
-        <div className='container-fluid'>
-          <div className='row row-padding'>{children}</div>
-        </div>
+          <div className='w-full px-16 py-4 leading-8'>{children}</div>
         </ShadowContainer>
+      </div>
     </section>
   )
-})
+}

components/design/ShadowContainer.tsx

@@ -1,32 +1,19 @@
+import classNames from 'clsx'
+
 type ShadowContainerProps = React.ComponentPropsWithRef<'div'>
 
-export const ShadowContainer: React.FC<ShadowContainerProps> = props => {
+export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
   const { children, className, ...rest } = props
 
   return (
-    <>
     <div
-        className={`shadow-container ${className != null ? className : ''}`}
+      className={classNames(
+        'mb-12 h-full max-w-full break-words rounded-2xl border border-solid border-[#000] shadow-light dark:shadow-dark ',
+        className
+      )}
       {...rest}
     >
       {children}
     </div>
-
-      <style jsx>
-        {`
-          .shadow-container {
-            display: flex;
-            flex-direction: column;
-            word-wrap: break-word;
-            box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
-            border: 1px solid black;
-            border-radius: 1rem;
-            height: 100%;
-            max-width: 100%;
-            margin-bottom: 50px;
-          }
-        `}
-      </style>
-    </>
   )
 }

components/design/Textarea.tsx

@@ -1,39 +0,0 @@
-import { forwardRef } from 'react'
-
-interface TextareaProps extends React.HTMLProps<HTMLTextAreaElement> {
-  label: string
-}
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (props, ref) => {
-    const { label, name, ...rest } = props
-
-    return (
-      <>
-        <div className='form-group'>
-          <label htmlFor={name}>{label}</label>
-          <br />
-          <textarea id={name} name={name} ref={ref} {...rest} />
-        </div>
-
-        <style jsx>{`
-          .form-group {
-            padding-top: 15px;
-            margin-bottom: 30px;
-          }
-          .form-group textarea {
-            background: transparent;
-            color: var(--color-text);
-            outline: none;
-            width: 100%;
-            height: auto;
-            padding: 10px;
-            resize: vertical;
-            margin-top: 8px;
-          }
-        `}
-        </style>
-      </>
-    )
-  }
-)

components/design/Tooltip.tsx

@@ -1,49 +0,0 @@
-interface TooltipProps extends React.ComponentPropsWithRef<'div'> {
-  title: string
-  children: React.ReactNode
-}
-
-export const Tooltip: React.FC<TooltipProps> = props => {
-  const { title, children, ...rest } = props
-  return (
-    <>
-      <span className='tooltip' {...rest}>
-        {children}
-        <span className='title'>{title}</span>
-      </span>
-
-      <style jsx>{`
-        .title {
-          color: #fff;
-          font-size: 11px;
-          font-weight: 400;
-          line-height: 1;
-          display: inline-block;
-          background-color: #222222;
-          padding: 5px 8px;
-          white-space: nowrap;
-          position: absolute;
-          top: 100%;
-          margin-top: 10px;
-          z-index: 1;
-          opacity: 0;
-          visibility: hidden;
-          border-radius: 3px;
-          transition: all 0.15s ease-in;
-          transform: translate3d(0, -15px, 0);
-          backface-visibility: hidden;
-        }
-        .tooltip ~ .tooltip:hover .title,
-        .tooltip:first-child:hover .title {
-          opacity: 1;
-          visibility: visible;
-          transition: all 0.35s ease-out;
-          transform: translate3d(0, 0, 0);
-          margin: 0;
-          backface-visibility: hidden;
-        }
-      `}
-      </style>
-    </>
-  )
-}

components/design/__test__/Button.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Button } from '../Button'
-
-describe('<Button />', () => {
-  it('should render', async () => {
-    const { getByText } = render(<Button>Submit</Button>)
-    expect(getByText('Submit')).toBeInTheDocument()
-  })
-})

cypress.config.ts

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

cypress/component/Footer.cy.tsx

@@ -0,0 +1,18 @@
+import { Footer } from 'components/Footer'
+
+describe('<Footer />', () => {
+  it('should render with appropriate link tag version', () => {
+    const version = '1.0.0'
+    cy.mount(<Footer version={version} />)
+    cy.contains('Divlo')
+      .get('[data-cy=version-link]')
+      .should('have.text', version)
+      .should(
+        'have.attr',
+        'href',
+        `https://github.com/Divlo/Divlo/releases/tag/v${version}`
+      )
+  })
+})
+
+export {}

cypress/component/utils/getAge.cy.ts

@@ -0,0 +1,17 @@
+import { getAge } from '../../../utils/getAge'
+
+describe('utils/getAge', () => {
+  it('should calculate the right age of a person', () => {
+    cy.clock(new Date('2018-03-20')).then(() => {
+      const birthDate = new Date('1980-02-20')
+      expect(getAge(birthDate)).equal(38)
+    })
+  })
+
+  it('should calculate the right age of a person (taking into account the months)', () => {
+    cy.clock(new Date('2018-03-20')).then(() => {
+      const birthDate = new Date('1980-07-20')
+      expect(getAge(birthDate)).equal(37)
+    })
+  })
+})

cypress/e2e/common/Header.cy.ts

@@ -0,0 +1,60 @@
+describe('Common > Header', () => {
+  beforeEach(() => cy.visit('/'))
+
+  it('should redirect to /blog on click of the blog link', () => {
+    cy.get('[data-cy=header-blog-link]')
+      .click()
+      .location('pathname')
+      .should('eq', '/blog')
+  })
+
+  it('should always be visible (sticky header)', () => {
+    cy.scrollTo('bottom').get('header').should('be.visible')
+  })
+
+  describe('Switch theme color (dark/light)', () => {
+    it('should switch theme from `dark` (default) to `light`', () => {
+      cy.get('[data-cy=switch-theme-dark]').should('be.visible')
+      cy.get('[data-cy=switch-theme-light]').should('not.be.visible')
+      cy.get('body').should(
+        'not.have.css',
+        'background-color',
+        'rgb(255, 255, 255)'
+      )
+
+      cy.get('[data-cy=switch-theme-click]').click()
+
+      cy.get('[data-cy=switch-theme-dark]').should('not.be.visible')
+      cy.get('[data-cy=switch-theme-light]').should('be.visible')
+      cy.get('body').should(
+        'have.css',
+        'background-color',
+        'rgb(255, 255, 255)'
+      )
+    })
+  })
+
+  describe('Switch Language', () => {
+    it('should switch language from EN (default) to FR', () => {
+      cy.get('h1').contains('I am Divlo')
+      cy.get('[data-cy=language-flag-text]').contains('EN')
+      cy.get('[data-cy=languages-list]').should('not.be.visible')
+      cy.get('[data-cy=language-click]').click()
+      cy.get('[data-cy=languages-list]').should('be.visible')
+      cy.get('[data-cy=languages-list] > li:first-child').contains('FR').click()
+      cy.get('[data-cy=languages-list]').should('not.be.visible')
+      cy.get('[data-cy=language-flag-text]').contains('FR')
+      cy.get('h1').contains('Je suis Divlo')
+    })
+
+    it('should close the language list menu when clicking outside', () => {
+      cy.get('[data-cy=languages-list]').should('not.be.visible')
+      cy.get('[data-cy=language-click]').click()
+      cy.get('[data-cy=languages-list]').should('be.visible')
+      cy.get('h1').click()
+      cy.get('[data-cy=languages-list]').should('not.be.visible')
+    })
+  })
+})
+
+export {}

cypress/e2e/pages/404.cy.ts

@@ -0,0 +1,9 @@
+describe('Page /404', () => {
+  beforeEach(() => cy.visit('/404', { failOnStatusCode: false }))
+
+  it('should display the statusCode of 404', () => {
+    cy.get('[data-cy=status-code]').contains('404')
+  })
+})
+
+export {}

cypress/e2e/pages/500.cy.ts

@@ -0,0 +1,9 @@
+describe('Page /500', () => {
+  beforeEach(() => cy.visit('/500', { failOnStatusCode: false }))
+
+  it('should display the statusCode of 500', () => {
+    cy.get('[data-cy=status-code]').contains('500')
+  })
+})
+
+export {}

cypress/e2e/pages/blog/[slug].cy.ts

@@ -0,0 +1,15 @@
+describe('Page /blog/[slug]', () => {
+  it('should displays the first blog post (`hello-world`)', () => {
+    cy.visit('/blog/hello-world')
+    cy.get('[data-cy=language-flag-text]').should('not.exist')
+    cy.get('h1').should('have.text', '👋 Hello, world!')
+    cy.get('.prose a').should('have.attr', 'target', '_blank')
+  })
+
+  it("should redirect to /404 if the blog post doesn't exist", () => {
+    cy.visit('/blog/random-blog-post-not-found', { failOnStatusCode: false })
+    cy.get('[data-cy=status-code]').contains('404')
+  })
+})
+
+export {}

cypress/e2e/pages/blog/index.cy.ts

@@ -0,0 +1,24 @@
+describe('Page /blog', () => {
+  it('should displays the blog posts sorted from newest to oldest', () => {
+    cy.visit('/blog')
+    cy.get('[data-cy=blog-posts] [data-cy=blog-post-title]')
+      .last()
+      .should('have.text', '👋 Hello, world!')
+    cy.get('[data-cy=blog-posts] [data-cy=blog-post-description]')
+      .last()
+      .should(
+        'have.text',
+        'First post of the blog, introduction and explanation of how this blog is made.'
+      )
+  })
+
+  it('should redirect the user to the right blog post', () => {
+    cy.visit('/blog')
+    cy.get('[data-cy=hello-world]')
+      .click()
+      .location('pathname')
+      .should('eq', '/blog/hello-world')
+  })
+})
+
+export {}

cypress/e2e/pages/index.cy.ts

@@ -0,0 +1,21 @@
+describe('Page /', () => {
+  beforeEach(() => cy.visit('/'))
+
+  it('should reveals the sections while scrolling except the about section', () => {
+    const sectionsReveals = [
+      '#interests',
+      '#skills',
+      '#portfolio',
+      '#open-source'
+    ]
+    cy.get('#about').should('be.visible')
+    for (const section of sectionsReveals) {
+      cy.get(section)
+        .should('not.be.visible')
+        .scrollIntoView()
+        .should('be.visible')
+    }
+  })
+})
+
+export {}

cypress/support/commands.ts

@@ -0,0 +1,3 @@
+/// <reference types="cypress" />
+
+export {}

cypress/support/component-index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.ts

@@ -0,0 +1,13 @@
+import { mount } from 'cypress/react'
+
+import './commands'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)

docker-compose.yml

@@ -1,18 +1,11 @@
-version: '3.0'
 services:
-  divlo.fr-website:
+  divlo.fr:
     container_name: ${COMPOSE_PROJECT_NAME}
+    image: 'divlo.fr'
     build:
       context: './'
     ports:
       - '${PORT}:${PORT}'
     environment:
       PORT: ${PORT}
-    volumes:
-      - './:/app'
-
-  divlo.fr-maildev:
-    image: 'maildev/maildev:1.1.0'
-    ports:
-      - '1080:80'
-    container_name: 'divlo.fr-maildev'
+    env_file: './.env'

jest.config.js

@@ -1,25 +0,0 @@
-module.exports = {
-  roots: ['<rootDir>'],
-  transform: {
-    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
-  },
-  moduleDirectories: ['node_modules', './'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-  setupFilesAfterEnv: [
-    '@testing-library/jest-dom/extend-expect',
-    '@testing-library/react'
-  ],
-  collectCoverage: true,
-  collectCoverageFrom: [
-    '**/*.{js,jsx,ts,tsx}',
-    '!**/*.d.ts',
-    '!**/.next/**',
-    '!**/node_modules/**',
-    '!**/next.config.js',
-    '!**/postcss.config.js',
-    '!**/workbox-*.js',
-    '!**/sw.js'
-  ],
-  coverageDirectory: './coverage',
-  coverageReporters: ['text', 'cobertura']
-}

jsonresume-theme-custom/.gitignore

@@ -0,0 +1,22 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

jsonresume-theme-custom/images/building-columns.svg

@@ -0,0 +1,2 @@
+<!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M243.4 2.587C251.4-.8625 260.6-.8625 268.6 2.587L492.6 98.59C506.6 104.6 514.4 119.6 511.3 134.4C508.3 149.3 495.2 159.1 479.1 160V168C479.1 181.3 469.3 192 455.1 192H55.1C42.74 192 31.1 181.3 31.1 168V160C16.81 159.1 3.708 149.3 .6528 134.4C-2.402 119.6 5.429 104.6 19.39 98.59L243.4 2.587zM256 128C273.7 128 288 113.7 288 96C288 78.33 273.7 64 256 64C238.3 64 224 78.33 224 96C224 113.7 238.3 128 256 128zM127.1 416H167.1V224H231.1V416H280V224H344V416H384V224H448V420.3C448.6 420.6 449.2 420.1 449.8 421.4L497.8 453.4C509.5 461.2 514.7 475.8 510.6 489.3C506.5 502.8 494.1 512 480 512H31.1C17.9 512 5.458 502.8 1.372 489.3C-2.715 475.8 2.515 461.2 14.25 453.4L62.25 421.4C62.82 420.1 63.41 420.6 63.1 420.3V224H127.1V416z"/></svg>

jsonresume-theme-custom/images/graduation-cap.svg

@@ -0,0 +1,2 @@
+<!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M623.1 136.9l-282.7-101.2c-13.73-4.91-28.7-4.91-42.43 0L16.05 136.9C6.438 140.4 0 149.6 0 160s6.438 19.65 16.05 23.09L76.07 204.6c-11.89 15.8-20.26 34.16-24.55 53.95C40.05 263.4 32 274.8 32 288c0 9.953 4.814 18.49 11.94 24.36l-24.83 149C17.48 471.1 25 480 34.89 480H93.11c9.887 0 17.41-8.879 15.78-18.63l-24.83-149C91.19 306.5 96 297.1 96 288c0-10.29-5.174-19.03-12.72-24.89c4.252-17.76 12.88-33.82 24.94-47.03l190.6 68.23c13.73 4.91 28.7 4.91 42.43 0l282.7-101.2C633.6 179.6 640 170.4 640 160S633.6 140.4 623.1 136.9zM351.1 314.4C341.7 318.1 330.9 320 320 320c-10.92 0-21.69-1.867-32-5.555L142.8 262.5L128 405.3C128 446.6 213.1 480 320 480c105.1 0 192-33.4 192-74.67l-14.78-142.9L351.1 314.4z"/></svg>

jsonresume-theme-custom/images/heart.svg

@@ -0,0 +1,2 @@
+<!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z"/></svg>