chore(release): 2.3.0 [skip ci]

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

fixes #74

.babelrc.json

@@ -1,14 +0,0 @@
-{
-  "presets": [
-    [
-      "next/babel",
-      {
-        "preset-env": {
-          "targets": {
-            "browsers": ">1%, not ie 11, not dead"
-          }
-        }
-      }
-    ]
-  ]
-}

.devcontainer/Dockerfile

@@ -1,7 +1,2 @@
-# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.163.1/containers/javascript-node/.devcontainer/base.Dockerfile
+ARG VARIANT="16"
-
-ARG VARIANT="14-buster"
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
-
-ARG EXTRA_NODE_VERSION=16
-RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"

.devcontainer/devcontainer.json

@@ -14,11 +14,10 @@
     "divlo.vscode-styled-jsx-languageserver",
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
-    "coenraads.bracket-pair-colorizer",
     "davidanson.vscode-markdownlint",
     "ms-azuretools.vscode-docker"
   ],
   "forwardPorts": [3000],
-  "postAttachCommand": ["npm", "clean-install"],
+  "postAttachCommand": ["npm", "install"],
   "remoteUser": "node"
 }

.eslintignore

@@ -1,7 +0,0 @@
-.next
-.lighthouseci
-node_modules
-next-env.d.ts
-**/workbox-*.js
-**/sw.js
-.vercel

.eslintrc.json

@@ -1,11 +1,6 @@
 {
-  "extends": [
+  "extends": ["conventions", "next/core-web-vitals", "prettier"],
-    "standard-with-typescript",
+  "plugins": ["prettier", "unicorn"],
-    "next",
-    "next/core-web-vitals",
-    "prettier"
-  ],
-  "plugins": ["unicorn", "prettier"],
   "parserOptions": {
     "project": "./tsconfig.json"
   },
@@ -16,16 +11,7 @@
   },
   "rules": {
     "prettier/prettier": "error",
-    "unicorn/prefer-node-protocol": "error",
+    "unicorn/prefer-node-protocol": "off",
-    "unicorn/prevent-abbreviations": [
+    "@typescript-eslint/no-misused-promises": "off"
-      "error",
-      {
-        "replacements": {
-          "props": {
-            "properties": false
-          }
-        }
-      }
-    ]
   }
 }

.gitattributes

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

.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,146 +0,0 @@
-name: 'Divlo'
-
-on:
-  push:
-    branches: [master, develop]
-  pull_request:
-    branches: [master, develop]
-
-jobs:
-  analyze:
-    runs-on: 'ubuntu-latest'
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: ['javascript']
-
-    steps:
-      - uses: 'actions/checkout@v2.3.4'
-
-      - name: 'Initialize CodeQL'
-        uses: 'github/codeql-action/init@v1'
-        with:
-          languages: ${{ matrix.language }}
-
-      - name: 'Perform CodeQL Analysis'
-        uses: 'github/codeql-action/analyze@v1'
-
-  lint:
-    runs-on: 'ubuntu-latest'
-    steps:
-      - uses: 'actions/checkout@v2.3.4'
-
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.0'
-        with:
-          node-version: '16.x'
-          cache: 'npm'
-
-      - name: 'Install'
-        run: 'npm install'
-
-      - 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'
-
-  test-unit:
-    runs-on: 'ubuntu-latest'
-    steps:
-      - uses: 'actions/checkout@v2.3.4'
-
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.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@v2.3.4'
-
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.0'
-        with:
-          node-version: '16.x'
-          cache: 'npm'
-
-      - name: 'Install'
-        run: 'npm install'
-
-      - name: 'Build'
-        run: 'npm run build'
-
-      - 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@v2.3.4'
-
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.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'
-
-  release:
-    if: github.ref == 'refs/heads/master' && github.event_name == 'push'
-    needs: [analyze, lint, test-unit, test-e2e, test-lighthouse]
-    runs-on: 'ubuntu-latest'
-    steps:
-      - uses: 'actions/checkout@v2.3.4'
-        with:
-          fetch-depth: 0
-          persist-credentials: false
-
-      - name: 'Import GPG key'
-        uses: 'crazy-max/ghaction-import-gpg@v4'
-        with:
-          gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
-          git_user_signingkey: true
-          git_commit_gpgsign: true
-
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.4.0'
-        with:
-          node-version: '16.x'
-          cache: 'npm'
-
-      - name: 'Install'
-        run: 'npm install'
-
-      - name: 'Release'
-        run: 'npm run release'
-        env:
-          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/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

@@ -0,0 +1,44 @@
+name: 'Release'
+
+on:
+  push:
+    branches: [master]
+
+jobs:
+  release:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v3.0.0'
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: 'Import GPG key'
+        uses: 'crazy-max/ghaction-import-gpg@v4'
+        with:
+          gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
+          git_user_signingkey: true
+          git_commit_gpgsign: true
+
+      - 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:
+          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,6 +11,11 @@ out
 # production
 build
 dist
+public/*.html
+jsonresume-theme-custom/theme/index.html
+# PWA
+public/workbox-*.js
+public/sw.js
 
 # testing
 coverage
@@ -18,10 +23,6 @@ cypress/screenshots
 cypress/videos
 cypress/downloads
 
-# PWA
-**/workbox-*.js
-**/sw.js
-
 # envs
 .env
 .env.production

.gitpod.yml

@@ -1,8 +1,8 @@
 image: 'gitpod/workspace-full'
 
 tasks:
-  - before: 'cp .env.example .env && npm install --global npm@7'
+  - before: 'cp .env.example .env'
-    init: 'npm clean-install'
+    init: 'npm install'
     command: 'npm run dev'
 
 ports:

.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.html"]
+}

.lighthouserc.json

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

.lintstagedrc.json

@@ -1,11 +1,10 @@
 {
   "*": ["editorconfig-checker"],
-  "*.{js,ts,jsx,tsx}": [
+  "*.{js,jsx,ts,tsx}": [
     "prettier --write",
     "eslint --fix",
     "jest --findRelatedTests"
   ],
-  "*.{css,yml,json}": ["prettier --write"],
+  "*.{css,scss,sass,json,jsonc,yml,yaml}": ["prettier --write"],
-  "*.{md}": ["prettier --write", "markdownlint --dot --fix"],
+  "*.{md,mdx}": ["prettier --write", "markdownlint --dot --fix"]
-  "./Dockerfile": ["dockerfilelint"]
 }

.prettierignore

@@ -1,9 +0,0 @@
-.next
-.lighthouseci
-node_modules
-next-env.d.ts
-package.json
-package-lock.json
-**/workbox-*.js
-**/sw.js
-.vercel

.releaserc.json

@@ -30,6 +30,7 @@
     [
       "@saithodev/semantic-release-backmerge",
       {
+        "branches": [{ "from": "master", "to": "develop" }],
         "backmergeStrategy": "merge"
       }
     ]

.vscode/extensions.json

@@ -7,7 +7,6 @@
     "divlo.vscode-styled-jsx-languageserver",
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
-    "coenraads.bracket-pair-colorizer",
     "davidanson.vscode-markdownlint",
     "ms-azuretools.vscode-docker"
   ]

.vscode/settings.json

@@ -1,48 +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
-  },
-  "[css]": {
-    "editor.autoClosingBrackets": "always",
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[sass]": {
-    "editor.autoClosingBrackets": "always",
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[scss]": {
-    "editor.autoClosingBrackets": "always",
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[markdown]": {
-    "editor.autoClosingBrackets": "always",
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[json]": {
-    "editor.autoClosingBrackets": "always",
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[jsonc]": {
-    "editor.autoClosingBrackets": "always",
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.autoClosingBrackets": "always",
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.autoClosingBrackets": "always",
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascript]": {
-    "editor.autoClosingBrackets": "always",
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascriptreact]": {
-    "editor.autoClosingBrackets": "always",
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

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**.
 
@@ -51,8 +51,8 @@ Scopes define what part of the code changed.
 
 ### Prerequisites
 
-- [Node.js](https://nodejs.org/) >= 14.0.0
+- [Node.js](https://nodejs.org/) >= 16.0.0
-- [npm](https://www.npmjs.com/) >= 7.0.0
+- [npm](https://www.npmjs.com/) >= 8.0.0
 
 ### Installation
 

Dockerfile

@@ -1,15 +1,15 @@
-FROM node:16.8.0 AS dependencies
+FROM node:16.14.2 AS dependencies
 WORKDIR /usr/src/app
 COPY ./package*.json ./
-RUN npm clean-install
+RUN npm install
 
-FROM node:16.8.0 AS builder
+FROM node:16.14.2 AS builder
 WORKDIR /usr/src/app
 COPY ./ ./
 COPY --from=dependencies /usr/src/app/node_modules ./node_modules
 RUN npm run build
 
-FROM node:16.8.0 AS runner
+FROM node:16.14.2 AS runner
 WORKDIR /usr/src/app
 ENV NODE_ENV=production
 COPY --from=builder /usr/src/app/next.config.js ./next.config.js

README.md

@@ -5,7 +5,6 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/Divlo/Divlo/actions/workflows/Divlo.yml"><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>
@@ -32,17 +31,17 @@
     "Open-Source enthusiast"
   ],
   "skills": {
-    "programmingLanguages": ["JavaScript", "TypeScript", "Python"],
+    "programmingLanguages": ["JavaScript", "TypeScript", "Python", "C/C++"],
     "frontEnd": ["HTML", "CSS", "Tailwind CSS", "React.js (+ Next.js)"],
     "backEnd": ["Node.js", "Fastify", "Prisma", "PostgreSQL", "MySQL"],
-    "tools": ["Ubuntu", "Visual Studio Code", "Git", "Docker"]
+    "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" />

components/ErrorPage.tsx

@@ -12,7 +12,7 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
 
   return (
     <>
-      <h1 className='my-6 font-semibold text-4xl'>
+      <h1 className='my-6 text-4xl font-semibold'>
         {t('errors:error')}{' '}
         <span
           className='text-yellow dark:text-yellow-dark'
@@ -24,8 +24,8 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
       <p className='text-center text-lg'>
         {message}{' '}
         <Link href='/'>
-          <a className='text-yellow dark:text-yellow-dark hover:underline'>
+          <a className='text-yellow hover:underline dark:text-yellow-dark'>
-            {t('errors:returnToHomePage')}
+            {t('errors:return-to-home-page')}
           </a>
         </Link>
       </p>

components/Footer.tsx

@@ -15,19 +15,19 @@ export const Footer: React.FC<FooterProps> = (props) => {
   }, [version])
 
   return (
-    <footer className='bg-white flex flex-col items-center justify-center py-6 text-lg border-t-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
+    <footer className='flex flex-col items-center justify-center border-t-2 border-gray-600 bg-white py-6 text-lg dark:border-gray-400 dark:bg-black'>
       <p>
         <Link href='/'>
-          <a className='hover:underline text-yellow dark:text-yellow-dark'>
+          <a className='text-yellow hover:underline dark:text-yellow-dark'>
             Divlo
           </a>
         </Link>{' '}
-        | {t('common:allRightsReserved')}
+        | {t('common:all-rights-reserved')}
       </p>
       <p className='mt-1'>
         Version{' '}
         <a
-          className='hover:underline text-yellow dark:text-yellow-dark'
+          className='text-yellow hover:underline dark:text-yellow-dark'
           href={versionLink}
           target='_blank'
           rel='noopener noreferrer'

components/Head.tsx

@@ -10,8 +10,8 @@ interface HeadProps {
 export const Head: React.FC<HeadProps> = (props) => {
   const {
     title = 'Divlo',
-    image = '/images/icons/icon-96x96.png',
+    image = 'https://divlo.fr/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",
+    description = 'Divlo - Developer Full Stack Junior • Passionate about High-Tech',
     url = 'https://divlo.fr/'
   } = props
 
@@ -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/LanguageFlag.tsx

@@ -10,6 +10,7 @@ export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
   return (
     <>
       <Image
+        quality={100}
         width={35}
         height={35}
         src={`/images/languages/${language}.svg`}

components/Header/Language/index.tsx

@@ -3,9 +3,10 @@ import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
 import classNames from 'classnames'
 
+import i18n from 'i18n.json'
+
 import { Arrow } from './Arrow'
 import { LanguageFlag } from './LanguageFlag'
-import i18n from 'i18n.json'
 
 export const Language: React.FC = () => {
   const { lang: currentLanguage } = useTranslation()
@@ -33,10 +34,10 @@ export const Language: React.FC = () => {
   }
 
   return (
-    <div className='flex flex-col justify-center items-center cursor-pointer'>
+    <div className='flex cursor-pointer flex-col items-center justify-center'>
       <div
         data-cy='language-click'
-        className='flex items-center mr-5'
+        className='mr-5 flex items-center'
         onClick={handleHiddenMenu}
       >
         <LanguageFlag language={currentLanguage} />
@@ -46,7 +47,7 @@ export const Language: React.FC = () => {
       <ul
         data-cy='languages-list'
         className={classNames(
-          'flex flex-col justify-center items-center absolute p-0 top-14 z-10 w-24 mt-3 mr-4 rounded-lg list-none shadow-light dark:shadow-dark bg-white dark:bg-black',
+          '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 }
         )}
       >
@@ -57,7 +58,7 @@ export const Language: React.FC = () => {
           return (
             <li
               key={index}
-              className='flex items-center justify-center w-full h-12 hover:bg-[#4f545c] hover:bg-opacity-20 pl-2'
+              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} />

components/Header/SwitchTheme.tsx

@@ -24,13 +24,13 @@ export const SwitchTheme: React.FC = () => {
         data-cy='switch-theme-click'
         onClick={handleClick}
       >
-        <div className='toggle-theme-button relative cursor-pointer bg-transparent inline-block'>
+        <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 flex justify-center items-center relative'>
+              <span className='toggle_Dark relative flex items-center justify-center'>
                 🌜
               </span>
             </div>
@@ -38,7 +38,7 @@ export const SwitchTheme: React.FC = () => {
               data-cy='switch-theme-light'
               className='toggle-track-x absolute'
             >
-              <span className='toggle_Light flex justify-center items-center relative'>
+              <span className='toggle_Light relative flex items-center justify-center'>
                 🌞
               </span>
             </div>

components/Header/__test__/Header.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import { Header } from '..'
 
 describe('<Header />', () => {
-  it('should render', async () => {
+  it('should render', () => {
     const { getByText } = render(<Header />)
     expect(getByText('Divlo')).toBeInTheDocument()
   })

components/Header/index.tsx

@@ -4,26 +4,43 @@ import Image from 'next/image'
 import { Language } from './Language'
 import { SwitchTheme } from './SwitchTheme'
 
-export const Header: React.FC = () => {
+export interface HeaderProps {
+  showLanguage?: boolean
+}
+
+export const Header: React.FC<HeaderProps> = (props) => {
+  const { showLanguage = false } = props
+
   return (
-    <header className='bg-white sticky top-0 z-50 flex w-full justify-between px-6 py-2 border-b-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
+    <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>
           <div className='flex items-center justify-center'>
             <Image
+              quality={100}
               width={60}
               height={60}
               src='/images/divlo_icon_small.png'
               alt='Divlo'
             />
-            <strong className='ml-1 font-headline font-semibold hidden xs:block text-yellow dark:text-yellow-dark'>
+            <strong className='ml-1 hidden font-headline font-semibold text-yellow dark:text-yellow-dark xs:block'>
               Divlo
             </strong>
           </div>
         </a>
       </Link>
       <div className='flex justify-between'>
-        <Language />
+        <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>
+        {showLanguage && <Language />}
         <SwitchTheme />
       </div>
     </header>

components/Interests/InterestParagraph.tsx

@@ -10,8 +10,8 @@ export const InterestParagraph: React.FC<InterestParagraphProps> = (props) => {
 
   return (
     <>
-      <p className='text-center my-6 text-gray dark:text-gray-dark'>
+      <p className='my-6 text-center text-gray dark:text-gray-dark'>
-        <strong className='text-yellow font-semibold text-lg dark:text-yellow-dark'>
+        <strong className='text-lg font-semibold text-yellow dark:text-yellow-dark'>
           {title}
         </strong>
         <br />

components/Interests/InterestsList/InterestItem.tsx

@@ -10,9 +10,9 @@ export const InterestItem: React.FC<InterestItemProps> = (props) => {
   const { fontAwesomeIcon, title } = props
 
   return (
-    <li className='interest-item my-2 mx-2 w-8 h-8' title={title}>
+    <li className='interest-item my-2 mx-2 h-8 w-8' title={title}>
       <FontAwesomeIcon
-        className='text-yellow cursor-pointer h-full w-full block dark:text-yellow-dark'
+        className='block h-full w-full text-yellow dark:text-yellow-dark'
         icon={fontAwesomeIcon}
       />
     </li>

components/Interests/InterestsList/index.tsx

@@ -5,8 +5,8 @@ import { InterestItem } from './InterestItem'
 
 export const InterestsList: React.FC = () => {
   return (
-    <div className='flex justify-center my-4'>
+    <div className='my-4 flex justify-center'>
-      <ul className='flex justify-around p-0 m-0 list-none w-96'>
+      <ul className='m-0 flex w-96 list-none justify-around p-0'>
         <InterestItem
           title='Developer Full Stack Junior'
           fontAwesomeIcon={faCode}

components/Interests/index.tsx

@@ -15,13 +15,11 @@ export const Interests: React.FC = () => {
   )
 
   return (
-    <>
+    <div className='max-w-full'>
-      <div className='max-w-full'>
+      {paragraphs.map((paragraph, index) => {
-        {paragraphs.map((paragraph, index) => {
+        return <InterestParagraph key={index} {...paragraph} />
-          return <InterestParagraph key={index} {...paragraph} />
+      })}
-        })}
+      <InterestsList />
-        <InterestsList />
+    </div>
-      </div>
-    </>
   )
 }

components/OpenSource/Repository.tsx

@@ -11,10 +11,10 @@ export const Repository: React.FC<RepositoryProps> = (props) => {
   const { name, description, href } = props
 
   return (
-    <ShadowContainer className='cursor-pointer relative p-6 !mb-4 max-h-32 transition-transform duration-200 ease-in-out hover:-translate-y-2'>
+    <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='h-6 mr-2' />
+          <GitHubIcon className='mr-2 h-6' />
           <span className='text-yellow dark:text-yellow-dark'>{name}</span>
         </div>
         <p className='my-4'>{description}</p>

components/OpenSource/index.tsx

@@ -6,42 +6,30 @@ export const OpenSource: React.FC = () => {
   const { t } = useTranslation()
 
   return (
-    <>
+    <div className='mt-0 flex max-w-full flex-col items-center'>
-      <div className='max-w-full mt-0 flex flex-col items-center'>
+      <p className='text-center'>{t('home:open-source.description')}</p>
-        <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'>
-        <div className='grid grid-cols-1 md:w-10/12 md:grid-cols-2 gap-6 my-6'>
+        <Repository
-          <Repository
+          name='nodejs/node'
-            name='nodejs/node'
+          description='Node.js JavaScript runtime 🐢🚀'
-            description='Node.js JavaScript runtime ✨️🐢🚀✨️'
+          href='https://github.com/nodejs/node/commits?author=Divlo'
-            href='https://github.com/nodejs/node/commits?author=Divlo'
+        />
-          />
+        <Repository
-          <Repository
+          name='standard/standard'
-            name='standard/standard'
+          description='🌟 JavaScript Style Guide, with linter & automatic code fixer'
-            description='🌟 JavaScript Style Guide, with linter & automatic code fixer'
+          href='https://github.com/standard/standard/commits?author=Divlo'
-            href='https://github.com/standard/standard/commits?author=Divlo'
+        />
-          />
+        <Repository
-          <Repository
+          name='nrwl/nx'
-            name='nrwl/nx'
+          description='Smart, Extensible Build Framework'
-            description='Smart, Extensible Build Framework'
+          href='https://github.com/nrwl/nx/commits?author=Divlo'
-            href='https://github.com/nrwl/nx/commits?author=Divlo'
+        />
-          />
+        <Repository
-          <Repository
+          name='vercel/next.js'
-            name='vercel/styled-jsx'
+          description='The React Framework for Production'
-            description='Full CSS support for JSX without compromises'
+          href='https://github.com/vercel/next.js/commits?author=Divlo'
-            href='https://github.com/vercel/styled-jsx/commits?author=Divlo'
+        />
-          />
-        </div>
       </div>
-
+    </div>
-      <style jsx global>{`
-        .animation-custom {
-          position: relative;
-          transition: all 0.3s ease 0s;
-        }
-        .animation-custom:hover {
-          transform: translateY(-7px);
-        }
-      `}</style>
-    </>
   )
 }

components/Portfolio/PortfolioItem.tsx

@@ -1,6 +1,7 @@
-import { ShadowContainer } from 'components/design/ShadowContainer'
 import Image from 'next/image'
 
+import { ShadowContainer } from 'components/design/ShadowContainer'
+
 export interface PortfolioItemProps {
   title: string
   description: string
@@ -12,7 +13,7 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
   const { title, description, link, image } = props
 
   return (
-    <ShadowContainer className='cursor-pointer relative items-center sm:ml-10'>
+    <ShadowContainer className='relative cursor-pointer items-center sm:ml-10'>
       <a
         className='group inline-flex justify-center'
         target='_blank'
@@ -22,6 +23,7 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
       >
         <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}
@@ -29,8 +31,8 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
             alt={title}
           />
         </div>
-        <div className='opacity-0 transition-opacity duration-500 h-auto absolute text-center overflow-hidden bottom-0 group-hover:opacity-100'>
+        <div className='absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100'>
-          <h3 className='text-yellow text-xl font-semibold my-6 dark:text-yellow-dark'>
+          <h3 className='my-6 text-xl font-semibold text-yellow dark:text-yellow-dark'>
             {title}
           </h3>
           <p className='my-6'>{description}</p>

components/Portfolio/index.tsx

@@ -14,7 +14,7 @@ export const Portfolio: React.FC = () => {
   )
 
   return (
-    <div className='flex flex-wrap justify-center px-3 w-full'>
+    <div className='flex w-full flex-wrap justify-center px-3'>
       {items.map((item, index) => {
         return <PortfolioItem key={index} {...item} />
       })}

components/Profile/ProfileDescriptionBottom.tsx

@@ -1,12 +1,23 @@
-import Translation from 'next-translate/Trans'
+import useTranslation from 'next-translate/useTranslation'
 
 export const ProfileDescriptionBottom: React.FC = () => {
+  const { t, lang } = useTranslation()
+
   return (
-    <p className='mt-8 mb-8 font-normal text-base text-gray dark:text-gray-dark'>
+    <p className='mt-8 mb-8 text-base font-normal text-gray dark:text-gray-dark'>
-      <Translation
+      {t('home:about.description-bottom')}
-        i18nKey='home:about.descriptionBottom'
+      {lang === 'fr' && (
-        components={[<br key='break' />]}
+        <>
-      />
+          <br />
+          <br />
+          <a
+            href='/curriculum-vitae'
+            className='text-yellow hover:underline dark:text-yellow-dark'
+          >
+            Curriculum vitæ
+          </a>
+        </>
+      )}
     </p>
   )
 }

components/Profile/ProfileInfo.tsx

@@ -4,14 +4,14 @@ export const ProfileInformation: React.FC = () => {
   const { t } = useTranslation()
 
   return (
-    <div className='pb-2 mb-6 border-b-2 font-headline border-gray-600 dark:border-gray-400'>
+    <div className='mb-6 border-b-2 border-gray-600 pb-2 font-headline dark:border-gray-400'>
-      <h1 className='text-4xl mb-2'>
+      <h1 className='mb-2 text-4xl'>
-        {t('home:about.IAm')}{' '}
+        {t('home:about.i-am')}{' '}
         <strong className='font-semibold text-yellow dark:text-yellow-dark'>
           Divlo
         </strong>
       </h1>
-      <h2 className='text-base mb-3'>{t('home:about.description')}</h2>
+      <h2 className='mb-3 text-base'>{t('home:about.description')}</h2>
     </div>
   )
 }

components/Profile/ProfileList/ProfileItem.tsx

@@ -8,72 +8,22 @@ export const ProfileItem: React.FC<ProfileItemProps> = (props) => {
   const { title, value, link } = props
 
   return (
-    <>
+    <li className='mb-3 before:table after:clear-both after:table'>
-      <li className='profile-list__item'>
+      <strong className='float-left block w-28 text-sm font-bold text-black dark:text-white'>
-        <strong className='profile-list__item-title text-black dark:text-white'>
+        {title}
-          {title}
+      </strong>
-        </strong>
+      <span className='ml-0 mb-4 block text-sm font-normal text-gray dark:text-gray-dark sm:mb-0 sm:ml-32'>
-        <span className='profile-list__item-info text-gray dark:text-gray-dark'>
+        {link != null ? (
-          {link != null ? (
+          <a
-            <a
+            className='text-gray hover:underline dark:text-gray-dark'
-              className='text-gray dark:text-gray-dark hover:underline'
+            href={link}
-              href={link}
+          >
-            >
+            {value}
-              {value}
+          </a>
-            </a>
+        ) : (
-          ) : (
+          value
-            value
+        )}
-          )}
+      </span>
-        </span>
+    </li>
-      </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;
-            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;
-          }
-
-          @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,13 +1,24 @@
 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='m-0 p-0 list-none'>
+    <ul className='m-0 list-none p-0'>
-      <ProfileItem title={t('home:about.birthDate')} value='31/03/2003' />
+      <ProfileItem title={t('home:about.full-name')} value='Théo LUDWIG' />
+      <ProfileItem
+        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'

components/Profile/ProfileLogo.tsx

@@ -4,8 +4,8 @@ import DivloLogo from 'public/images/divlo_logo.png'
 
 export const ProfileLogo: React.FC = () => {
   return (
-    <div className='px-2 py-6 max-w-[370px] max-h-[370px]'>
+    <div className='max-h-[370px] max-w-[370px] px-2 py-6'>
-      <Image src={DivloLogo} alt='Divlo' priority />
+      <Image quality={100} src={DivloLogo} alt='Divlo' />
     </div>
   )
 }

components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx

@@ -8,7 +8,7 @@ export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
       xmlns='http://www.w3.org/2000/svg'
       viewBox='0 0 24 24'
       className={classNames(
-        'dark:text-white text-black w-8 h-8 fill-current',
+        'h-8 w-8 fill-current text-black dark:text-white',
         className
       )}
       {...rest}

components/Profile/SocialMediaList/SocialMediaItem.tsx

@@ -7,7 +7,7 @@ export const SocialMediaItem: React.FC<SocialMediaItemProps> = (props) => {
   const { link, ariaLabel, children } = props
 
   return (
-    <li className='inline-block mx-4 my-1'>
+    <li className='mx-4 my-1 inline-block'>
       <a
         href={link}
         aria-label={ariaLabel}

components/Profile/SocialMediaList/index.tsx

@@ -9,7 +9,7 @@ import { NPMIcon } from './SocialMediaIcons/NPMIcon'
 
 export const SocialMediaList: React.FC = () => {
   return (
-    <ul className='social-media-list m-0 mt-2 py-4 list-none text-center'>
+    <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>

components/Profile/index.tsx

@@ -5,7 +5,7 @@ import { ProfileLogo } from './ProfileLogo'
 
 export const Profile: React.FC = () => {
   return (
-    <div className='flex flex-col justify-center items-center px-10 pt-2 md:pt-10 md:flex-row'>
+    <div className='flex flex-col items-center justify-center px-10 pt-2 md:flex-row md:pt-10'>
       <ProfileLogo />
       <div>
         <ProfileInformation />

components/Skills/Skill.tsx

@@ -28,7 +28,7 @@ export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
       rel='noopener noreferrer'
     >
       <div className='text-center'>
-        <Image width={60} height={60} alt={skill} src={image} />
+        <Image quality={100} width={60} height={60} alt={skill} src={image} />
         <p className='mt-1'>{skill}</p>
       </div>
     </a>

components/Skills/SkillsSection.tsx

@@ -10,15 +10,15 @@ export const SkillsSection: React.FC<SkillsSectionProps> = (props) => {
 
   return (
     <ShadowContainer>
-      <div className='w-full px-4 mx-auto'>
+      <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-opacity-10 dark:border-white'>
+            <div className='mb-8 border-b border-gray-600 dark:border-white dark:border-opacity-10'>
-              <h3 className='text-yellow font-semibold text-xl my-3 dark:text-yellow-dark'>
+              <h3 className='my-3 text-xl font-semibold text-yellow dark:text-yellow-dark'>
                 {title}
               </h3>
             </div>
-            <div className='flex justify-around flex-wrap'>{children}</div>
+            <div className='flex flex-wrap justify-around'>{children}</div>
           </div>
         </div>
       </div>

components/Skills/index.tsx

@@ -12,6 +12,7 @@ export const Skills: React.FC = () => {
         <SkillComponent skill='JavaScript' />
         <SkillComponent skill='TypeScript' />
         <SkillComponent skill='Python' />
+        <SkillComponent skill='C/C++' />
       </SkillsSection>
 
       <SkillsSection title='Front-end'>
@@ -29,7 +30,8 @@ export const Skills: React.FC = () => {
         <SkillComponent skill='MySQL' />
       </SkillsSection>
 
-      <SkillsSection title={t('home:skills.softwareTools')}>
+      <SkillsSection title={t('home:skills.software-tools')}>
+        <SkillComponent skill='GNU/Linux' />
         <SkillComponent skill='Ubuntu' />
         <SkillComponent skill='Visual Studio Code' />
         <SkillComponent skill='Git' />

components/Skills/skills.ts

@@ -98,6 +98,10 @@ export const skills: 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/__test__/ErrorPage.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import { ErrorPage } from '../ErrorPage'
 
 describe('<ErrorPage />', () => {
-  it('should render the message and statusCode', async () => {
+  it('should render the message and statusCode', () => {
     const messageContent = 'message content'
     const statusCode = 404
     const { getByText } = render(

components/__test__/Footer.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import { Footer } from '../Footer'
 
 describe('<Footer />', () => {
-  it('should render with appropriate link tag version', async () => {
+  it('should render with appropriate link tag version', () => {
     const version = '1.0.0'
     const { getByText } = render(<Footer version={version} />)
     const versionLink = getByText(version) as HTMLAnchorElement

components/design/RevealFade.tsx

@@ -10,7 +10,8 @@ export const RevealFade: React.FC = (props) => {
       (entries, observer) => {
         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,26 +26,8 @@ export const RevealFade: React.FC = (props) => {
   }, [])
 
   return (
-    <>
+    <div ref={htmlElement} className='invisible -translate-y-7 opacity-0'>
-      <div ref={htmlElement} className='reveal'>
+      {children}
-        {children}
+    </div>
-      </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

@@ -4,7 +4,7 @@ export const SectionHeading: React.FC<SectionHeadingProps> = (props) => {
   const { children, ...rest } = props
 
   return (
-    <h2 {...rest} className='text-4xl font-semibold text-center mt-1 mb-3'>
+    <h2 {...rest} className='mt-1 mb-3 text-center text-4xl font-semibold'>
       {children}
     </h2>
   )

components/design/Section/index.tsx

@@ -20,11 +20,11 @@ export const Section: React.FC<SectionProps> = (props) => {
 
   if (isMain) {
     return (
-      <div className='px-3 w-full'>
+      <div className='w-full px-3'>
         <ShadowContainer style={{ marginTop: 50 }}>
           <section {...rest}>
             {heading != null && <SectionHeading>{heading}</SectionHeading>}
-            <div className='px-3 w-full'>{children}</div>
+            <div className='w-full px-3'>{children}</div>
           </section>
         </ShadowContainer>
       </div>
@@ -35,7 +35,7 @@ export const Section: React.FC<SectionProps> = (props) => {
     return (
       <section {...rest}>
         {heading != null && <SectionHeading>{heading}</SectionHeading>}
-        <div className='px-3 w-full'>{children}</div>
+        <div className='w-full px-3'>{children}</div>
       </section>
     )
   }
@@ -52,9 +52,9 @@ export const Section: React.FC<SectionProps> = (props) => {
           {description}
         </p>
       )}
-      <div className='px-3 w-full'>
+      <div className='w-full px-3'>
         <ShadowContainer>
-          <div className='px-16 py-4 leading-8 w-full'>{children}</div>
+          <div className='w-full px-16 py-4 leading-8'>{children}</div>
         </ShadowContainer>
       </div>
     </section>

components/design/ShadowContainer.tsx

@@ -6,27 +6,14 @@ export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
   const { children, className, ...rest } = props
 
   return (
-    <>
+    <div
-      <div
+      className={classNames(
-        className={classNames(
+        'mb-12 h-full max-w-full break-words rounded-2xl border border-solid border-[#000] shadow-light dark:shadow-dark ',
-          'shadow-container h-full max-w-full break-words',
+        className
-          className
+      )}
-        )}
+      {...rest}
-        {...rest}
+    >
-      >
+      {children}
-        {children}
+    </div>
-      </div>
-
-      <style jsx>
-        {`
-          .shadow-container {
-            box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
-            border: 1px solid black;
-            border-radius: 1rem;
-            margin-bottom: 50px;
-          }
-        `}
-      </style>
-    </>
   )
 }

cypress/integration/common/Header.spec.ts

@@ -1,6 +1,17 @@
 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')

cypress/integration/pages/blog/[slug].spec.ts

@@ -0,0 +1,13 @@
+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')
+  })
+})

cypress/integration/pages/blog/index.spec.ts

@@ -0,0 +1,22 @@
+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')
+  })
+})

jest.config.js

@@ -0,0 +1,14 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest()
+const customJestConfig = {
+  moduleDirectories: ['node_modules', './'],
+  modulePathIgnorePatterns: ['<rootDir>/cypress'],
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+    '@testing-library/react'
+  ]
+}
+
+module.exports = createJestConfig(customJestConfig)

jest.config.json

@@ -1,14 +0,0 @@
-{
-  "roots": ["<rootDir>"],
-  "transform": {
-    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
-  },
-  "moduleDirectories": ["node_modules", "./"],
-  "modulePathIgnorePatterns": ["<rootDir>/cypress"],
-  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
-  "testEnvironment": "jsdom",
-  "setupFilesAfterEnv": [
-    "@testing-library/jest-dom/extend-expect",
-    "@testing-library/react"
-  ]
-}

jsonresume-theme-custom/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+theme/index.html
+dist
+.parcel-cache

jsonresume-theme-custom/index.js

@@ -0,0 +1,28 @@
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+
+import ejs from 'ejs'
+import date from 'date-and-time'
+import { Parcel } from '@parcel/core'
+
+export const render = async (resume) => {
+  const themeIndexURL = new URL('./theme/index.ejs', import.meta.url)
+  const themeBuildURL = new URL('./theme/index.html', import.meta.url)
+  const indexHTMLURL = new URL('./dist/index.html', import.meta.url)
+  const themeBuildPath = fileURLToPath(themeBuildURL)
+  const html = await ejs.renderFile(fileURLToPath(themeIndexURL), {
+    date,
+    locals: {
+      ...resume
+    }
+  })
+  await fs.promises.writeFile(themeBuildURL, html, { encoding: 'utf-8' })
+  const bundler = new Parcel({
+    entries: themeBuildPath,
+    source: themeBuildPath,
+    mode: 'production',
+    defaultConfig: '@parcel/config-default'
+  })
+  await bundler.run()
+  return await fs.promises.readFile(indexHTMLURL, { encoding: 'utf-8' })
+}

jsonresume-theme-custom/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "jsonresume-theme-custom",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {},
+  "dependencies": {
+    "date-and-time": "2.3.0",
+    "ejs": "3.1.6",
+    "modern-normalize": "1.1.0"
+  },
+  "devDependencies": {
+    "@parcel/config-default": "2.4.1",
+    "@parcel/core": "2.4.1",
+    "@parcel/optimizer-data-url": "2.4.1",
+    "@parcel/transformer-inline-string": "2.4.1",
+    "parcel": "2.4.1"
+  }
+}

jsonresume-theme-custom/scripts/build.js

@@ -0,0 +1,18 @@
+import fs from 'fs'
+
+import { render } from '../index.js'
+
+const jsonResumeURL = new URL('../../resume.json', import.meta.url)
+const publicResumeURL = new URL(
+  '../../public/curriculum-vitae.html',
+  import.meta.url
+)
+
+const dataResumeStringJSON = await fs.promises.readFile(jsonResumeURL, {
+  encoding: 'utf-8'
+})
+const dataResumeJSON = JSON.parse(dataResumeStringJSON)
+const dataResumeIndexHTML = await render(dataResumeJSON)
+await fs.promises.writeFile(publicResumeURL, dataResumeIndexHTML, {
+  encoding: 'utf-8'
+})

jsonresume-theme-custom/theme/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/theme/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/theme/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>

jsonresume-theme-custom/theme/images/toolbox.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="M502.6 182.6l-45.25-45.25C451.4 131.4 443.3 128 434.8 128H384V80C384 53.5 362.5 32 336 32h-160C149.5 32 128 53.5 128 80V128H77.25c-8.5 0-16.62 3.375-22.62 9.375L9.375 182.6C3.375 188.6 0 196.8 0 205.3V304h128v-32C128 263.1 135.1 256 144 256h32C184.9 256 192 263.1 192 272v32h128v-32C320 263.1 327.1 256 336 256h32C376.9 256 384 263.1 384 272v32h128V205.3C512 196.8 508.6 188.6 502.6 182.6zM336 128h-160V80h160V128zM384 368c0 8.875-7.125 16-16 16h-32c-8.875 0-16-7.125-16-16v-32H192v32C192 376.9 184.9 384 176 384h-32C135.1 384 128 376.9 128 368v-32H0V448c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-112h-128V368z"/></svg>

jsonresume-theme-custom/theme/images/user.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 448 512"><path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"/></svg>

jsonresume-theme-custom/theme/index.ejs

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= locals.basics.name %></title>
+    <link rel="icon" type="image/png" href="<%= locals.basics.image %>" />
+
+    <style>
+      @import './styles/global.css';
+    </style>
+  </head>
+  <body>
+    <div class="container-fluid">
+      <div class="row main clearfix">
+        <section class="col-md-3 card-wrapper profile-card-wrapper affix">
+          <div class="card profile-card">
+            <div class="profile-pic-container">
+              <div class="profile-pic">
+                <img
+                  class="media-object img-circle center-block"
+                  data-src="holder.js/100x100"
+                  alt="<%= locals.basics.name %>"
+                  src="<%= locals.basics.image %>"
+                />
+              </div>
+              <div class="name-and-profession text-center">
+                <h3>
+                  <strong><%= locals.basics.name %></strong>
+                </h3>
+                <h5 class="text-muted"><%= locals.basics.label %></h5>
+              </div>
+            </div>
+            <div class="contact-details clearfix">
+              <div class="detail">
+                <span class="info"><%= locals.basics.phone %></span>
+              </div>
+              <div class="detail">
+                <span class="info">
+                  <a
+                    class="link-disguise"
+                    href="mailto:<%= locals.basics.email %>"
+                  >
+                    <%= locals.basics.email %>
+                  </a>
+                </span>
+              </div>
+              <div class="detail">
+                <span class="info">
+                  <a class="link-disguise" href="<%= locals.basics.url %>">
+                    <%= locals.basics.url %>
+                  </a>
+                </span>
+              </div>
+            </div>
+            <hr />
+          </div>
+          <div class="card background-card">
+            <div class="background-details">
+              <div class="detail" id="about">
+                <div class="icon">
+                  <img src="data-url:./images/user.svg" alt="user" />
+                </div>
+                <div class="info">
+                  <h4 class="title text-uppercase">À propos</h4>
+                  <div class="card card-nested">
+                    <div class="content mop-wrapper">
+                      <p><%- locals.basics.summary %></p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <hr />
+
+              <div class="detail" id="work-experience">
+                <div class="icon">
+                  <img
+                    src="data-url:./images/building-columns.svg"
+                    alt="work"
+                  />
+                </div>
+                <div class="info">
+                  <h4 class="title text-uppercase">Expériences</h4>
+                  <ul class="list-unstyled clear-margin">
+                    <% locals.work.forEach((experience) => { %>
+                    <li class="card card-nested clearfix">
+                      <div class="content">
+                        <p class="clear-margin relative">
+                          <a href="<%= experience.website %>">
+                            <strong><%= experience.name %></strong>
+                          </a>
+                        </p>
+                        <p class="clear-margin relative">
+                          <strong><%- experience.position %></strong>
+                        </p>
+                        <p class="text-muted">
+                          <small>
+                            <span class="space-right">
+                              <%= date.format(new Date(experience.startDate),
+                              'DD/MM/YYYY') %> - <%= date.format(new
+                              Date(experience.endDate), 'DD/MM/YYYY') %>
+                            </span>
+                          </small>
+                        </p>
+                        <div class="experience-description">
+                          <p><%- experience.summary %></p>
+                        </div>
+                      </div>
+                    </li>
+                    <% }) %>
+                  </ul>
+                </div>
+              </div>
+
+              <hr />
+
+              <div class="detail" id="skills">
+                <div class="icon">
+                  <img src="data-url:./images/toolbox.svg" alt="toolbox" />
+                </div>
+                <div class="info">
+                  <h4 class="title text-uppercase">Compétences</h4>
+                  <div class="content">
+                    <ul class="list-unstyled clear-margin">
+                      <% locals.skills.forEach((skill) => { %>
+                      <li class="card card-nested card-skills">
+                        <div class="skill-info">
+                          <strong><%= skill.name %></strong>
+                          <div class="space-top labels">
+                            <% skill.keywords.forEach((keyword) => { %>
+                            <p class="label label-keyword"><%= keyword %></p>
+                            <% }) %>
+                          </div>
+                        </div>
+                      </li>
+                      <% }) %>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <hr />
+
+              <div class="detail" id="education">
+                <div class="icon">
+                  <img
+                    src="data-url:./images/graduation-cap.svg"
+                    alt="graduation"
+                  />
+                </div>
+                <div class="info">
+                  <h4 class="title text-uppercase">Éducation</h4>
+                  <div class="content">
+                    <ul class="list-unstyled clear-margin">
+                      <% locals.education.forEach((degree) => { %>
+                      <li class="card card-nested">
+                        <div class="content">
+                          <p class="clear-margin relative">
+                            <strong><%= degree.studyType %></strong>
+                          </p>
+                          <p class="clear-margin relative">
+                            <strong><%= degree.score %></strong>
+                          </p>
+                          <p class="text-muted clear-margin">
+                            <%= degree.institution %>
+                          </p>
+                          <p class="text-muted clear-margin">
+                            <small>
+                              <%= degree.startDate %> - <%= degree.endDate %>
+                            </small>
+                          </p>
+                        </div>
+                      </li>
+                      <% }) %>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              <hr />
+
+              <div class="detail" id="interests">
+                <div class="icon">
+                  <img src="data-url:./images/heart.svg" alt="heart" />
+                </div>
+                <div class="info">
+                  <h4 class="title text-uppercase">Intérets</h4>
+                  <div class="content">
+                    <ul class="list-unstyled clear-margin">
+                      <% locals.interests.forEach((interest) => { %>
+                      <li class="card card-nested">
+                        <p><strong><%= interest.name %></strong></p>
+                      </li>
+                      <% }) %>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </body>
+</html>

jsonresume-theme-custom/theme/styles/global.css

@@ -0,0 +1,229 @@
+@import 'npm:modern-normalize/modern-normalize.css';
+
+body {
+  font-family: 'Montserrat', 'Arial', 'sans-serif';
+  background: #f0f0f0;
+  color: #333;
+  line-height: 1.42857143;
+  font-size: 14px;
+}
+hr {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  border: 0;
+  border-top: 1px solid #eee;
+}
+p {
+  margin: 0;
+}
+strong {
+  font-weight: 600;
+}
+a {
+  color: #337ab7;
+  text-decoration: none;
+}
+a:focus,
+a:hover {
+  color: #23527c;
+  text-decoration: underline;
+}
+.link-disguise {
+  color: inherit;
+}
+.link-disguise:hover {
+  color: inherit;
+}
+.h1,
+.h2,
+.h3,
+h1,
+h2,
+h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+.h4,
+.h5,
+.h6,
+h4,
+h5,
+h6 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+}
+.h3,
+h3 {
+  font-size: 24px;
+}
+.h4,
+h4 {
+  font-size: 18px;
+}
+.h5,
+h5 {
+  font-size: 14px;
+}
+.container-fluid {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+.row {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+.clear-margin {
+  margin: 0;
+}
+.relative {
+  position: relative;
+}
+.center-block {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+}
+.text-center {
+  text-align: center;
+}
+.text-muted {
+  color: #777;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+.main {
+  padding: 5px;
+}
+.title {
+  font-weight: 600;
+}
+
+.profile-card-wrapper {
+  position: relative;
+}
+
+.card-wrapper {
+  float: none !important;
+  padding: 5px;
+}
+
+.profile-card-wrapper .profile-card {
+  padding: 10px;
+}
+
+.card {
+  background: white;
+  border-radius: 3px;
+  padding: 10px 0;
+}
+.profile-pic {
+  padding: 10px 0;
+}
+.profile-pic img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  vertical-align: middle;
+  border: 0;
+}
+.contact-details {
+  display: flex;
+  justify-content: center;
+}
+.contact-details .detail {
+  position: relative;
+  min-height: 1px;
+  padding: 10px;
+}
+.social-links {
+  line-height: 2.5;
+}
+.experience-description {
+  margin-top: 10px;
+}
+
+.background-details .detail {
+  display: table;
+}
+.background-details .detail .icon,
+.background-details .detail .info {
+  display: table-cell;
+}
+.background-details .detail .icon {
+  color: #707070;
+}
+.background-details .detail .icon {
+  min-width: 45px;
+  max-width: 45px;
+  text-align: center;
+}
+.icon img {
+  width: 20px;
+  height: 20px;
+}
+.background-details .detail .mobile-title {
+  display: none;
+}
+.card-nested {
+  min-height: 0;
+  border-width: 1px 0 0 0;
+}
+
+.card-skills {
+  position: relative;
+}
+.labels {
+  line-height: 2;
+}
+.space-top {
+  margin-top: 10px;
+}
+.label {
+  display: inline;
+  padding: 0.2em 0.6em 0.3em;
+  font-size: 75%;
+  font-weight: 600;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25em;
+}
+.label-keyword {
+  display: inline-block;
+  background: #7eb0db;
+  color: white;
+  font-size: 0.9em;
+  padding: 5px;
+  border: 1px solid #357ebd;
+  margin-right: 5px;
+}
+.label-keyword p {
+  margin: 0;
+}

locales/en/common.json

@@ -1,6 +1,6 @@
 {
   "english": "English",
   "french": "French",
-  "allRightsReserved": "All rights reserved",
+  "all-rights-reserved": "All rights reserved",
   "home": "Home"
 }

locales/en/errors.json

@@ -1,6 +1,6 @@
 {
-  "returnToHomePage": "Return to the home page?",
+  "return-to-home-page": "Return to the home page?",
   "error": "Error",
-  "serverError": "Internal Server Error!",
+  "server-error": "Internal Server Error!",
-  "notFound": "This page doesn't exist!"
+  "not-found": "This page doesn't exist!"
 }

locales/en/home.json

@@ -1,24 +1,26 @@
 {
   "about": {
-    "IAm": "I am",
+    "i-am": "I am",
     "description": "Developer Full Stack Junior • Passionate about High-Tech",
-    "birthDate": "Birth date",
+    "full-name": "Full name",
+    "birth-date": "Birth date",
+    "years-old": "years old",
     "nationality": "Nationality",
-    "descriptionBottom": "I am self-taught in Computer Science by following online trainings and I am also a student at the university following the French training \"BUT Informatique\" (first year). <0/> <0/> I put into practice everything I learn and make many projects."
+    "description-bottom": "I am self-taught in Computer Science by following online trainings and I am also a student at the university following the French training \"BUT Informatique\" (first year)."
   },
   "interests": {
     "title": "Interests",
     "paragraphs": [
       {
-        "title": "Developer Full Stack Junior :",
+        "title": "Developer Full Stack Junior",
-        "description": "Computer programming is my main hobby, I love it! <br/> Mostly web development for the moment but I'm programming some Python and others programming language too."
+        "description": "Computer programming is my main hobby, I love it! <br/> Mostly web development for the moment but I'm programming in others programming language too."
       },
       {
-        "title": "Passionate about High-Tech :",
+        "title": "Passionate about High-Tech",
         "description": "I always wondered how the future would be. Every day I want to wake up and think that the future will be great and better than the past. Technologies improve gradually over time, which is very useful in many areas."
       },
       {
-        "title": "Open-Source enthusiast :",
+        "title": "Open-Source enthusiast",
         "description": "For me, everyone should work, solve problems, build things and think together. Long live open source, whenever you can share your work, do it! <br/> The website is open-source on <a class='text-yellow dark:text-yellow-dark hover:underline' href='https://github.com/Divlo/Divlo' target='_blank' rel='noopener noreferrer'>github</a>."
       }
     ]
@@ -26,7 +28,7 @@
   "skills": {
     "title": "Skills",
     "languages": "Programming languages",
-    "softwareTools": "Software and tools"
+    "software-tools": "Software and tools"
   },
   "portfolio": {
     "title": "Portfolio",

locales/fr/common.json

@@ -1,6 +1,6 @@
 {
   "english": "Anglais",
   "french": "Français",
-  "allRightsReserved": "Tous droits réservés",
+  "all-rights-reserved": "Tous droits réservés",
   "home": "Accueil"
 }

locales/fr/errors.json

@@ -1,6 +1,6 @@
 {
-  "returnToHomePage": "Revenir à la page d'accueil ?",
+  "return-to-home-page": "Revenir à la page d'accueil ?",
   "error": "Erreur",
-  "serverError": "Erreur Interne du Serveur !",
+  "server-error": "Erreur Interne du Serveur !",
-  "notFound": "Cette page n'existe pas!"
+  "not-found": "Cette page n'existe pas!"
 }

locales/fr/home.json

@@ -1,24 +1,26 @@
 {
   "about": {
-    "IAm": "Je suis",
+    "i-am": "Je suis",
     "description": "Développeur Full Stack Junior • Passionné de High-Tech",
-    "birthDate": "Date de naissance",
+    "full-name": "Prénom NOM",
+    "birth-date": "Date de naissance",
+    "years-old": "ans",
     "nationality": "Nationalité",
-    "descriptionBottom": "Je me forme en autodidacte dans l'informatique en suivant des formations en ligne et je suis aussi un étudiant à l'université suivant la formation \"BUT Informatique\" (première année). <0/> <0/> Je mets en pratique tout ce que j'apprends et réalise de nombreux projets."
+    "description-bottom": "Je me forme en autodidacte dans l'informatique en suivant des formations en ligne et je suis aussi un étudiant à l'université suivant la formation \"BUT Informatique\" (première année)."
   },
   "interests": {
     "title": "Intérêts",
     "paragraphs": [
       {
-        "title": "Développeur Full Stack Junior :",
+        "title": "Développeur Full Stack Junior",
-        "description": "La programmation informatique est mon loisir principal, j'adore! <br/> Principalement du développement Web pour le moment, mais je programme aussi du Python et d'autres langages de programmation."
+        "description": "La programmation informatique est mon loisir principal, j'adore! <br/> Principalement du développement Web pour le moment, mais je programme aussi dans d'autres langages de programmation."
       },
       {
-        "title": "Passionné de High-Tech :",
+        "title": "Passionné de High-Tech",
         "description": "Je me suis toujours demandé comment l'avenir serait. Chaque jour, je veux me réveiller et penser que l'avenir sera formidable et meilleur que le passé. Les technolgies s'améliorent progressivement avec le temps, ce qui est très utile dans de nombreux domaines."
       },
       {
-        "title": "Enthousiaste de l'Open-Source :",
+        "title": "Enthousiaste de l'Open-Source",
         "description": "Pour moi, tout le monde devrait travailler, résoudre des problèmes, construire des choses et réfléchir ensemble. Longue vie à l'open-source, chaque fois que vous pouvez partagez votre travail, faites-le! <br/> Le site est open-source sur <a class='text-yellow dark:text-yellow-dark hover:underline' href='https://github.com/Divlo/Divlo' target='_blank' rel='noopener noreferrer'>github</a>."
       }
     ]
@@ -26,7 +28,7 @@
   "skills": {
     "title": "Compétences",
     "languages": "Langages de programmation",
-    "softwareTools": "Logiciels et outils"
+    "software-tools": "Logiciels et outils"
   },
   "portfolio": {
     "title": "Portfolio",
@@ -39,7 +41,7 @@
       },
       {
         "title": "thream.divlo.fr",
-        "description": "Votre plateforme open source pour rester proche de vos amis et communautés, parler, discuter, collaborer, partager et vous amuser.",
+        "description": "Votre plateforme open source pour rester proche de vos amis et communautés, parler, discuter, collaborer, partager et amusez-vous.",
         "link": "https://thream.divlo.fr/",
         "image": "/images/portfolio/threamdivlofr.png"
       },

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next.config.js

@@ -5,11 +5,12 @@ const { createSecureHeaders } = require('next-secure-headers')
 /** @type {import("next").NextConfig} */
 module.exports = nextTranslate(
   nextPWA({
+    reactStrictMode: true,
     pwa: {
       disable: process.env.NODE_ENV !== 'production',
       dest: 'public'
     },
-    async headers() {
+    headers() {
       return [
         {
           source: '/:path*',
@@ -17,7 +18,12 @@ module.exports = nextTranslate(
             contentSecurityPolicy: {
               directives: {
                 defaultSrc: ["'self'"],
-                scriptSrc: ["'self'", "'unsafe-eval'", "'unsafe-inline'"],
+                scriptSrc: [
+                  "'self'",
+                  'data:',
+                  "'unsafe-eval'",
+                  "'unsafe-inline'"
+                ],
                 styleSrc: ["'self'", "'unsafe-inline'"],
                 imgSrc: ['*', 'data:', 'blob:'],
                 mediaSrc: "'none'",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "divlo",
-  "version": "1.3.6",
+  "version": "2.3.0",
   "private": true,
   "repository": {
     "type": "git",
@@ -13,77 +13,90 @@
   "scripts": {
     "dev": "next dev",
     "start": "next start",
-    "build": "next build",
+    "build": "npm run resume:build && next build",
     "export": "next export",
     "lint:commit": "commitlint",
-    "lint:docker": "dockerfilelint './Dockerfile'",
     "lint:editorconfig": "editorconfig-checker",
-    "lint:markdown": "markdownlint '**/*.md' --dot --ignore node_modules",
+    "lint:markdown": "markdownlint \"**/*.{md,mdx}\" --dot --ignore-path \".gitignore\"",
-    "lint:typescript": "eslint '**/*.{js,ts,jsx,tsx}'",
+    "lint:typescript": "eslint \"**/*.{js,jsx,ts,tsx}\" --ignore-path \".gitignore\"",
+    "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
     "lint:staged": "lint-staged",
     "test:unit": "jest",
+    "test:html-w3c-validator": "start-server-and-test \"start\" \"http://localhost:3000\" \"html-w3c-validator\"",
     "test:lighthouse": "lhci autorun",
-    "test:e2e": "start-server-and-test 'start' 'http://localhost:3000' 'cypress run'",
+    "test:e2e": "start-server-and-test \"start\" \"http://localhost:3000\" \"cypress run\"",
-    "test:e2e:dev": "start-server-and-test 'dev' 'http://localhost:3000' 'cypress open'",
+    "test:e2e:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\"",
+    "resume:build": "node ./jsonresume-theme-custom/scripts/build.js",
     "release": "semantic-release",
     "deploy": "vercel",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "4.5.1",
+    "@fontsource/montserrat": "4.5.7",
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/fontawesome-svg-core": "6.1.1",
-    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-brands-svg-icons": "6.1.1",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "6.1.1",
-    "@fortawesome/react-fontawesome": "0.1.15",
+    "@fortawesome/react-fontawesome": "0.1.18",
     "classnames": "2.3.1",
-    "html-react-parser": "1.3.0",
+    "date-and-time": "2.3.0",
-    "next": "11.1.2",
+    "gray-matter": "4.0.3",
-    "next-pwa": "5.3.1",
+    "html-react-parser": "1.4.10",
-    "next-themes": "0.0.15",
+    "next": "12.1.4",
-    "next-translate": "1.0.7",
+    "next-mdx-remote": "4.0.2",
+    "next-pwa": "5.4.7",
+    "next-themes": "0.1.1",
+    "next-translate": "1.4.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "read-pkg": "7.0.0",
+    "read-pkg": "7.1.0",
-    "sharp": "0.29.1",
+    "rehype-raw": "6.1.1",
+    "rehype-slug": "5.0.1",
+    "remark-gfm": "3.0.1",
+    "sharp": "0.30.3",
+    "shiki": "0.10.1",
+    "unified": "10.1.2",
+    "unist-util-visit": "4.1.0",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "13.1.0",
+    "@commitlint/cli": "16.2.3",
-    "@commitlint/config-conventional": "13.1.0",
+    "@commitlint/config-conventional": "16.2.1",
-    "@lhci/cli": "0.8.1",
+    "@lhci/cli": "0.9.0",
-    "@saithodev/semantic-release-backmerge": "1.5.3",
+    "@saithodev/semantic-release-backmerge": "2.1.2",
-    "@semantic-release/git": "9.0.1",
+    "@semantic-release/git": "10.0.1",
-    "@testing-library/jest-dom": "5.14.1",
+    "@tailwindcss/typography": "0.5.2",
-    "@testing-library/react": "12.0.0",
+    "@testing-library/jest-dom": "5.16.4",
-    "@types/jest": "27.0.1",
+    "@testing-library/react": "12.1.4",
-    "@types/node": "16.9.0",
+    "@types/jest": "27.4.1",
-    "@types/react": "17.0.20",
+    "@types/node": "17.0.23",
-    "@typescript-eslint/eslint-plugin": "4.31.0",
+    "@types/react": "17.0.43",
-    "autoprefixer": "10.3.4",
+    "@types/unist": "2.0.6",
-    "babel-jest": "27.1.1",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
-    "cypress": "8.3.1",
+    "autoprefixer": "10.4.4",
-    "dockerfilelint": "1.8.0",
+    "cypress": "9.5.3",
     "editorconfig-checker": "4.0.2",
-    "eslint": "7.32.0",
+    "eslint": "8.13.0",
-    "eslint-config-next": "11.1.2",
+    "eslint-config-conventions": "2.0.0",
-    "eslint-config-prettier": "8.3.0",
+    "eslint-config-next": "12.1.4",
-    "eslint-config-standard-with-typescript": "21.0.1",
+    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.24.2",
+    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-promise": "5.1.0",
+    "eslint-plugin-promise": "6.0.0",
-    "eslint-plugin-unicorn": "35.0.0",
+    "eslint-plugin-unicorn": "42.0.0",
-    "husky": "7.0.2",
+    "html-w3c-validator": "1.2.0",
-    "jest": "27.1.1",
+    "husky": "7.0.4",
-    "lint-staged": "11.1.2",
+    "jest": "27.5.1",
-    "markdownlint-cli": "0.28.1",
+    "jsonresume-theme-custom": "file:./jsonresume-theme-custom",
+    "lint-staged": "12.3.7",
+    "markdownlint-cli": "0.31.1",
     "next-secure-headers": "2.2.0",
-    "postcss": "8.3.6",
+    "postcss": "8.4.12",
-    "prettier": "2.3.2",
+    "prettier": "2.6.2",
-    "semantic-release": "17.4.7",
+    "prettier-plugin-tailwindcss": "0.1.8",
+    "semantic-release": "19.0.2",
     "start-server-and-test": "1.14.0",
-    "tailwindcss": "2.2.14",
+    "tailwindcss": "3.0.23",
-    "typescript": "4.4.2",
+    "typescript": "4.6.3",
-    "vercel": "23.1.2"
+    "vercel": "24.0.1"
   }
 }

pages/404.tsx

@@ -1,4 +1,4 @@
-import { GetStaticProps } from 'next'
+import { GetStaticProps, NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from 'components/ErrorPage'
@@ -6,24 +6,26 @@ import { Head } from 'components/Head'
 import { Header } from 'components/Header'
 import { Footer, FooterProps } from 'components/Footer'
 
-const Error404: React.FC<FooterProps> = (props) => {
+interface Error404Props extends FooterProps {}
+
+const Error404: NextPage<Error404Props> = (props) => {
   const { t } = useTranslation()
   const { version } = props
 
   return (
     <>
-      <Head title='Divlo - 404' />
+      <Head title='404 | Divlo' />
 
-      <Header />
+      <Header showLanguage />
       <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
-        <ErrorPage statusCode={404} message={t('errors:notFound')} />
+        <ErrorPage statusCode={404} message={t('errors:not-found')} />
       </main>
       <Footer version={version} />
     </>
   )
 }
 
-export const getStaticProps: GetStaticProps<FooterProps> = async () => {
+export const getStaticProps: GetStaticProps<Error404Props> = async () => {
   const { readPackage } = await import('read-pkg')
   const { version } = await readPackage()
   return { props: { version } }

pages/500.tsx

@@ -1,4 +1,4 @@
-import { GetStaticProps } from 'next'
+import { GetStaticProps, NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from 'components/ErrorPage'
@@ -6,24 +6,26 @@ import { Head } from 'components/Head'
 import { Header } from 'components/Header'
 import { Footer, FooterProps } from 'components/Footer'
 
-const Error500: React.FC<FooterProps> = (props) => {
+interface Error500Props extends FooterProps {}
+
+const Error500: NextPage<Error500Props> = (props) => {
   const { t } = useTranslation()
   const { version } = props
 
   return (
     <>
-      <Head title='Divlo - 500' />
+      <Head title='500 | Divlo' />
 
-      <Header />
+      <Header showLanguage />
       <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
-        <ErrorPage statusCode={500} message={t('errors:serverError')} />
+        <ErrorPage statusCode={500} message={t('errors:server-error')} />
       </main>
       <Footer version={version} />
     </>
   )
 }
 
-export const getStaticProps: GetStaticProps<FooterProps> = async () => {
+export const getStaticProps: GetStaticProps<Error500Props> = async () => {
   const { readPackage } = await import('read-pkg')
   const { version } = await readPackage()
   return { props: { version } }

pages/_app.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from 'next-themes'
 import useTranslation from 'next-translate/useTranslation'
 import UniversalCookie from 'universal-cookie'
 
-import 'tailwindcss/tailwind.css'
+import 'styles/global.css'
 import '@fontsource/montserrat/400.css'
 import '@fontsource/montserrat/600.css'
 

pages/_document.tsx

@@ -4,7 +4,7 @@ const Document: React.FC = () => {
   return (
     <Html>
       <Head />
-      <body className='bg-white dark:bg-black text-black dark:text-white font-headline'>
+      <body className='bg-white font-headline text-black dark:bg-black dark:text-white'>
         <Main />
         <NextScript />
       </body>

pages/blog/[slug].tsx

@@ -0,0 +1,83 @@
+import { GetStaticProps, GetStaticPaths, NextPage } from 'next'
+import { MDXRemote } from 'next-mdx-remote'
+import date from 'date-and-time'
+
+import { Head } from 'components/Head'
+import { Header } from 'components/Header'
+import { Footer, FooterProps } from 'components/Footer'
+import type { Post } from 'utils/blog'
+
+interface BlogPostPageProps extends FooterProps {
+  post: Post
+}
+
+const BlogPostPage: NextPage<BlogPostPageProps> = (props) => {
+  const { version, post } = props
+
+  return (
+    <>
+      <Head
+        title={`${post.frontmatter.title} | Divlo`}
+        description={post.frontmatter.description}
+      />
+
+      <Header />
+      <main className='flex flex-1 flex-col flex-wrap items-center'>
+        <div className='my-10 flex flex-col items-center'>
+          <h1 className='text-3xl font-semibold'>{post.frontmatter.title}</h1>
+          <p className='mt-2' data-cy='blog-post-date'>
+            {date.format(new Date(post.frontmatter.publishedOn), 'DD/MM/YYYY')}
+          </p>
+        </div>
+        <div className='prose mb-10 px-8'>
+          <MDXRemote
+            {...post.source}
+            components={{
+              a: (props: React.ComponentPropsWithoutRef<'a'>) => {
+                if (props.href?.startsWith('#') ?? false) {
+                  return <a {...props} />
+                }
+                return (
+                  <a target='_blank' rel='noopener noreferrer' {...props} />
+                )
+              }
+            }}
+          />
+        </div>
+      </main>
+      <Footer version={version} />
+    </>
+  )
+}
+
+export const getStaticProps: GetStaticProps<BlogPostPageProps> = async (
+  context
+) => {
+  const slug = context?.params?.slug
+  const { getPostBySlug } = await import('utils/blog')
+  const post = await getPostBySlug(slug)
+  if (post == null || (post != null && !post.frontmatter.isPublished)) {
+    return {
+      redirect: {
+        destination: '/404',
+        permanent: false
+      }
+    }
+  }
+  const { readPackage } = await import('read-pkg')
+  const { version } = await readPackage()
+  return { props: { version, post } }
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const { getPosts } = await import('utils/blog')
+  const posts = await getPosts()
+  return {
+    paths: posts.map((post) => {
+      return { params: { slug: post.slug } }
+    }),
+    fallback: false
+  }
+}
+
+export default BlogPostPage

pages/blog/index.tsx

@@ -0,0 +1,77 @@
+import { GetStaticProps, NextPage } from 'next'
+import Link from 'next/link'
+import date from 'date-and-time'
+
+import { Head } from 'components/Head'
+import { Header } from 'components/Header'
+import { Footer, FooterProps } from 'components/Footer'
+import { ShadowContainer } from 'components/design/ShadowContainer'
+import type { PostMetadata } from 'utils/blog'
+
+const blogDescription =
+  'The latest news about my journey of learning computer science.'
+
+interface BlogPageProps extends FooterProps {
+  posts: PostMetadata[]
+}
+
+const BlogPage: NextPage<BlogPageProps> = (props) => {
+  const { version, posts } = props
+
+  return (
+    <>
+      <Head title='Blog | Divlo' description={blogDescription} />
+
+      <Header />
+      <main className='flex flex-1 flex-col flex-wrap items-center'>
+        <div className='mt-10 flex flex-col items-center'>
+          <h1 className='text-4xl font-semibold'>Blog</h1>
+          <p className='mt-6 text-center' data-cy='blog-post-date'>
+            {blogDescription}
+          </p>
+        </div>
+        <div className='flex w-full items-center justify-center p-8'>
+          <div className='w-[1600px]' data-cy='blog-posts'>
+            {posts.map((post, index) => {
+              const postPublishedOn = date.format(
+                new Date(post.frontmatter.publishedOn),
+                'DD/MM/YYYY'
+              )
+              return (
+                <Link href={`/blog/${post.slug}`} key={index} locale='en'>
+                  <a data-cy={post.slug}>
+                    <ShadowContainer className='cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2'>
+                      <h2
+                        data-cy='blog-post-title'
+                        className='text-xl font-semibold'
+                      >
+                        {post.frontmatter.title}
+                      </h2>
+                      <p data-cy='blog-post-date' className='mt-2'>
+                        {postPublishedOn}
+                      </p>
+                      <p data-cy='blog-post-description' className='mt-3'>
+                        {post.frontmatter.description}
+                      </p>
+                    </ShadowContainer>
+                  </a>
+                </Link>
+              )
+            })}
+          </div>
+        </div>
+      </main>
+      <Footer version={version} />
+    </>
+  )
+}
+
+export const getStaticProps: GetStaticProps<BlogPageProps> = async () => {
+  const { readPackage } = await import('read-pkg')
+  const { getPosts } = await import('utils/blog')
+  const posts = await getPosts()
+  const { version } = await readPackage()
+  return { props: { version, posts } }
+}
+
+export default BlogPage

pages/index.tsx

@@ -1,4 +1,4 @@
-import { GetStaticProps } from 'next'
+import { GetStaticProps, NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { RevealFade } from 'components/design/RevealFade'
@@ -13,7 +13,9 @@ import { OpenSource } from 'components/OpenSource'
 import { Header } from 'components/Header'
 import { Footer, FooterProps } from 'components/Footer'
 
-const Home: React.FC<FooterProps> = (props) => {
+interface HomeProps extends FooterProps {}
+
+const Home: NextPage<HomeProps> = (props) => {
   const { t } = useTranslation()
   const { version } = props
 
@@ -21,7 +23,7 @@ const Home: React.FC<FooterProps> = (props) => {
     <>
       <Head />
 
-      <Header />
+      <Header showLanguage />
       <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
         <Section isMain id='about'>
           <Profile />
@@ -69,7 +71,7 @@ const Home: React.FC<FooterProps> = (props) => {
   )
 }
 
-export const getStaticProps: GetStaticProps<FooterProps> = async () => {
+export const getStaticProps: GetStaticProps<HomeProps> = async () => {
   const { readPackage } = await import('read-pkg')
   const { version } = await readPackage()
   return { props: { version } }

posts/clean-code.mdx

@@ -0,0 +1,254 @@
+---
+title: '🧼 Clean Code'
+description: 'What is "Clean Code", what are "Design Patterns", and why is it so important today? Tips and tricks to make your code more readable and maintainable in the long term.'
+isPublished: true
+publishedOn: '2022-02-23T08:00:18.758Z'
+---
+
+Hello! 👋
+
+Have you already heard of "**Clean Code**" or "**Design Patterns**" ?
+
+Even if you know what it is about, this blog post will probably still be useful to you, I will share some tips and tricks to make your code more readable and maintainable in the long term.
+
+**Note:** Sources used to write this blog post are available at the [end of this post](#sources).
+
+## Definition : Clean Code
+
+A clean code is a code that is **easy** to **read** and easy to **understand**.
+
+But I promise it is not a code that is easy to write, in fact it is really **hard to write Clean Code**.
+
+We could ask ourselves, what is **easy** to **read** and easy to **understand** ?
+
+It depends of many factors, and is somewhat relative to each one of us. The **perfect** Clean code **doesn't exist**, but we can try to be **as perfect as possible**.
+
+## Why is it so important ?
+
+Code like that works great, but it is not enough, even if the code will be read by the computer and understood by the machine, we should not forget that the code is **written by human** and will be also **read by human** not only a machine.
+
+For example the [Linux kernel](https://www.kernel.org/), is one of the biggest open source project with many contributors worldwide. Last data shows that it is about **20 millions** lines of code.
+
+With a project of this magnitude, we can't let everyone do what they want and however they want, **we must set rules and conventions** to get everyone to agree, this allows to add features faster and will reduce possible bugs as **developers** will not struggle as much to understand the code.
+
+## Definition : Design Patterns
+
+These **rules** and **conventions** are so called **Design Patterns**.
+
+A software design pattern is a general way of **solving a problem** by applying a **well-known solution**.
+
+Design patterns are formalized **best practices** that the programmer can use to solve common problems when designing an application or system.
+
+## How to write Clean Code and famous Design Patterns
+
+To show you the rules and conventions, I will write the examples in the [TypeScript](https://www.typescriptlang.org/) programming language but it is relevant to any programming language.
+
+### Naming variables
+
+We all know that **variables** are used everywhere in **programming**, good variable names allow us to better understand the intention of the code.
+
+#### Same vocabulary for the same type of variable
+
+##### Example (bad way)
+
+```typescript
+function getUserInfo(): User
+function getUserDetails(): User
+function getUserData(): User
+```
+
+##### Example (good way)
+
+```typescript
+function getUser(): User
+```
+
+---
+
+#### Avoid "Magic Numbers"
+
+##### Example (bad way)
+
+```typescript
+// What does 86400000 mean?
+setTimeout(restart, 86400000)
+```
+
+##### Example (good way)
+
+```typescript
+const MILLISECONDS_IN_A_DAY = 24 * 60 * 60 * 1000
+setTimeout(restart, MILLISECONDS_IN_A_DAY)
+```
+
+---
+
+#### Explicit is better than implicit (no abbreviations or acronyms)
+
+##### Example (bad way)
+
+```typescript
+const u = getUser()
+const s = getSubscription()
+const t = charge(u, s)
+```
+
+##### Example (good way)
+
+```typescript
+const user = getUser()
+const subscription = getSubscription()
+const transaction = charge(user, subscription)
+```
+
+---
+
+#### As short as possible, as long as necessary
+
+##### Example (bad way)
+
+```typescript
+interface Car {
+  carModel: string
+  carColor: 'red' | 'blue' | 'yellow'
+}
+const printCar = (car: Car): void => {
+  console.log(`${car.carModel} (${car.carColor})`)
+}
+```
+
+##### Example (good way)
+
+```typescript
+interface Car {
+  model: string
+  color: 'red' | 'blue' | 'yellow'
+}
+const printCar = (car: Car): void => {
+  console.log(`${car.model} (${car.color})`)
+}
+```
+
+---
+
+#### Boolean names (Prefix: is, has, can)
+
+##### Example (bad way)
+
+```typescript
+let person = true
+let age = true
+let dance = true
+function isEmailNotUsed(email: string): boolean
+```
+
+##### Example (good way)
+
+```typescript
+let isPerson = true
+let hasAge = true
+let canDance = true
+function isEmailUsed(email: string): boolean
+```
+
+---
+
+### DRY (Don't Repeat Yourself)
+
+When we copy/paste the same lines of code, we should better abstract it in a function, that we can reuse later without having to copy/paste the lines of code, that makes the code more maintainable afterwards, because if we need to change the behavior of this piece of code, we won't need to change it in several places, but only when declaring the function.
+
+---
+
+### KISS (Keep It Simple Stupid)
+
+As we have just said, we will prefer to abstract the code in multiple functions, rather than leaving everything in the same place, but a function should not do "too much", and we should rather separate it into several distinct functions.
+
+We have to keep it as simple as possible, not to implement features that are not requested, and to divide the functions as much as possible into small functions.
+
+### Example (bad way)
+
+```typescript
+import fs from 'node:fs'
+import path from 'node:path'
+
+const createFile = async (name: string, isTemporary: boolean = false) => {
+  if (isTemporary) {
+    return await fs.promises.writeFile(path.join('temporary', name), '')
+  }
+  return await fs.promises.writeFile(name, '')
+}
+```
+
+`createFile` is a function that does 2 things so it is better to split it in 2 separated functions.
+
+### Example (good way)
+
+```typescript
+import fs from 'node:fs'
+import path from 'node:path'
+
+const createFile = async (name: string) => {
+  await fs.promises.writeFile(name, '')
+}
+
+const createTemporaryFile = async (name: string) => {
+  await createFile(path.join('temporary', name))
+}
+```
+
+---
+
+### TDD (Test Driven Development)
+
+Test-driven development (TDD) is a software development process relying on software requirements being converted to test cases before software is fully developed, and tracking all software development by repeatedly testing the software against all test cases. This is as opposed to software being developed first and test cases created later.
+
+We first write tests that should fails because there are no implementation, and then we write the code implementation to make the tests succeeds.
+
+The End To End (e2e) and Unit tests should document what is the behavior intended for the code.
+
+---
+
+### Avoid comments
+
+One of the most important rule of "Clean Code" : If you need to add **comments**, it's because your code is **not clean**.
+
+I know that might be counter intuitive at first, as most developers will advice you to add comments to your code, to document what it does.
+
+The thing is that you should choose good variable names, break down features in multiple functions, so that others developers can read your code and understand it just by reading the functions names etc.
+
+You can write comments, but that should only be used documenting how to use a function but not for the implementation itself and in places where you can't be more explicit.
+
+In fact, as we saw in the [TDD section](#tdd-test-driven-development), automated tests can document what a function should returns, and how the code should behave, so that should already improve code maintainability.
+
+Having a good comment explaining a difficult code is better than nothing with a bad written code, difficult to understand.
+
+#### Example (bad way)
+
+```typescript
+// Check if subscription is active
+if (subscription.endDate > Date.now()) {
+}
+```
+
+#### Example (good way)
+
+```typescript
+const isSubscriptionActive = subscription.endDate > Date.now()
+if (isSubscriptionActive) {
+}
+```
+
+Here we are creating a new variable `isSubscriptionActive` that allows us to avoid the need of a comment to understand what the code does.
+
+---
+
+## Conclusion
+
+We can't write the perfect clean code understandable by everyone but we can **write code that is as perfect as possible to ease maintaibility** for yourself and others developers.
+
+## Sources
+
+- [Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin](https://books.google.fr/books/about/Clean_Code.html?id=hjEFCAAAQBAJ)
+- [Software Design Pattern (Wikipedia)](https://en.wikipedia.org/wiki/Software_design_pattern)
+- [TDD - Test-driven development (Wikipedia)](https://en.wikipedia.org/wiki/Test-driven_development)
+- [github.com/labs42io/clean-code-typescript](https://github.com/labs42io/clean-code-typescript)

posts/hello-world.mdx

@@ -0,0 +1,71 @@
+---
+title: '👋 Hello, world!'
+description: 'First post of the blog, introduction and explanation of how this blog is made.'
+isPublished: true
+publishedOn: '2022-02-20T08:00:18.758Z'
+---
+
+Hello, world! 👋
+
+## Introduction
+
+This blog is here to document my journey of learning computer science, explaining technical difficulties and problems I encountered, and how I solved them.
+
+The idea is that I will share my knowledge with you (readers), and hopefully help you to learn too.
+
+Keep in mind that I will not translate the posts in French, all the posts will be written in English, as I'm not a native English speaker, I will probably make mistakes, feel free to open pull requests on [GitHub](https://github.com/Divlo/Divlo) to correct them. 😊
+
+I plan to publish new posts when I have something new to share. There's no schedule, so stay tuned!
+
+To stay informed of new blog post and to ask questions, feel free to follow me on Twitter: [@Divlo_FR](https://twitter.com/Divlo_FR).
+
+## Project based learning
+
+The blog posts subjects will be often related to the problems I encountered in the projects I am currently working on.
+
+Most of the time, when I am learning something new, I **learn it because I actually need it for a project**, I don't learn [React.js](https://reactjs.org) because it is trending, and everyone talks about it.
+
+I learn something new, because it solved a "real life" problem I had encountered. For example, [React.js](https://reactjs.org) allows to easily update the DOM (Document Object Model) in the browser, so we can add interactivity to our web pages, not only that, it allows to reuse multiple HTML (JSX) elements with components.
+
+[React.js](https://reactjs.org) is only an example, but hopefully you understood my point: I often don't like too much theoretical thing, and enjoy much more practical things.
+
+## How this blog is made
+
+In this section, I will explain what technologies I used to make this blog, and what are the technical choices I had to do.
+
+The code of this website is open source on [GitHub](https://github.com/Divlo/Divlo), so you can see the code and contribute to it.
+
+I decided to keep things simple, here are the 2 main features missing on my blog:
+
+- Comments (you can interact with me on my Twitter account)
+- Views counter
+
+That not mean that these features will never be implemented, but to avoid the need of a database now, I dropped out these features.
+
+### Technologies
+
+- [Next.js](https://nextjs.org/)
+
+  It allows to have a server-side rendered website, that means that it is faster and easier to have a good SEO (Search Engine Optimization) than a SPA (Single Page Application).
+
+- [MDX](https://mdxjs.com/)
+
+  MDX is an extension of Markdown that allows you to use custom React components.
+
+  Here's what Markdown looks like:
+
+  ```md
+  A simple paragraph, with some **bold** text and some `inline code`.
+  ```
+
+  When using Markdown in a web application, there's a "compile" step; the Markdown needs to be transformed into HTML, so that it can be understood by the browser. Those asterisks get turned into a `<strong>` tag, and each paragraph gets a `<p>` tag etc.
+
+- [Tailwind CSS](https://tailwindcss.com/)
+
+  Tailwind is a CSS framework to rapidly build modern websites without ever leaving HTML.
+
+## Conclusion
+
+I hope you will enjoy my blog, and will find it useful.
+
+See you in the next posts! 😊

posts/mistakes-as-junior-developer.mdx

@@ -0,0 +1,66 @@
+---
+title: '❌ Mistakes I made as a junior developer'
+description: 'Here are mistakes I made when I started, to prevent you from making the same mistakes.'
+isPublished: true
+publishedOn: '2022-03-14T07:42:52.989Z'
+---
+
+Hello! 👋
+
+I will explain some of the mistakes I made as a junior developer, so you can avoid doing them.
+
+## 1. Skipped learning how to do automated tests
+
+Probably one of the most common errors junior developers does.
+
+When you begin in programming, you learn a programming language, so you learn variables, conditions, loops, functions, etc.
+
+With these concepts, you might start a new project, but as the project grows, you will end up using functions at multiple places in code, so if you change the behavior of a function, it will affect the whole project.
+
+And because the code grows, you might do some refactoring to make it more maintainable, but because we are humans, we make mistakes, you could accidentally break the entire project even with a tiny change you thought was safe to do.
+
+If you had automated tests, you would have a way to know if you made a mistake even before deploying to production.
+
+Depending on the programming language you are using, and what is the project you are working on, writing tests will be different.
+
+Be aware that there are 3 main testing strategies:
+
+- [Unit testing](https://en.wikipedia.org/wiki/Unit_testing)
+- [Integration testing](https://en.wikipedia.org/wiki/Integration_testing)
+- [End-to-end testing](https://en.wikipedia.org/wiki/End-to-end_testing)
+
+After you learned the basics of programming, learn how to write automated tests, it will save you a lot of time and debugging.
+
+I would even say that you should get used-to writing tests, it should be an automatism, you should not even have to think about it to do it.
+
+## 2. Thinking too big, with too much abstraction
+
+Abstraction is great, but it can be harder to understand what is going on if actually don't need this abstraction.
+
+Find the right balance, between abstraction and simple implementation, start simple, and then gradually improve and add more features.
+
+When you start a new project, you should focus on the core of the project, not on the details, to release as soon as possible, a working usable version of your project also called a [**Minimum Viable Product** (MVP)](https://en.wikipedia.org/wiki/Minimum_viable_product), it is better than a half-functioning, over-engineered project.
+
+I made this mistake while developing [Thream](https://thream.divlo.fr), your **open source** platform to stay close with your friends and communities, **talk**, chat, **collaborate**, share and **have fun**.
+
+Basically, I thought it was cool, to do a "big" v1.0.0 release with a lot of features, but in fact, it was not, because I could not even show what I was developing (to the end-users, not technical people) as I was making multiple features at the same time and also mainly focused on the **REST API** side and not at all the **website (frontend)**.
+
+What I recommend you to do is to start with a **v1.0.0** release as soon as possible with the minimum required features needed for your project idea, and then gradually add new features and release new versions.
+
+In my example for [Thream](https://thream.divlo.fr), I could release a v1.0.0 without these features:
+
+- English/French translation (could be only English)
+- Light/Dark theme (could be only Dark)
+- OAuth2 Authentication (could be only simple email/password authentication)
+- User public profile
+- Channels (maybe could be only one channel per guild to start with)
+
+And probably more, what was really required with [Thream](https://thream.divlo.fr), is that users could authenticate, create a community of friends, and then they could communicate with each other with messages in real-time, really that was enough.
+
+And then with this basis, I could release, v1.1.0, v1.2.0 etc. with more features, and release new versions more often to show the progress of the project, it is also more motivating to have users testing our project and to **get feedback sooner**.
+
+**Start simple, improve later.**
+
+## Conclusion
+
+The real key to success is to **be passionate**, **keep learning** on your own, and **look at mistakes as learning experiences**.

posts/thream-v1-0-0.mdx

@@ -0,0 +1,124 @@
+---
+title: '🟢 Thream v1.0.0'
+description: 'Your open source platform to stay close with your friends and communities, talk, chat, collaborate, share and have fun.'
+isPublished: true
+publishedOn: '2022-04-11T10:24:55.206Z'
+---
+
+Hello! 👋
+
+After months of hard work, [Thream v1.0.0](https://www.thream.divlo.fr/) has been released! 🎉
+
+[**Thream**](https://www.thream.divlo.fr/) is your open-source platform to stay close with your friends and communities, talk, chat, collaborate, share and have fun.
+
+## Presentation
+
+[**Thream**](https://www.thream.divlo.fr/) is a social network to stay close with your friends and communities to talk, chat, collaborate and share.
+
+The project is largely inspired by [Discord](https://discord.com), a proprietary instant messaging service, but differentiates itself by its **non-profit open source philosophy** and will integrate special features.
+
+The source code is available on [GitHub](https://github.com/Thream).
+
+The idea is that a user can create an account to authenticate with an email address, and a password, or directly use an account from another platform (currently supported: Google, GitHub, Discord). Once the user is authenticated, he/she can create and join "guilds", in other words communities, in order to discuss with other people in several channels to group discussions talking about the same subject.
+
+![The Thream app on a community page](/images/posts/thream-v1-0-0/thream-ui.png)
+
+[**Thream**](https://www.thream.divlo.fr/) is a website that works on any recent browser, accessible on [thream.divlo.fr](https://www.thream.divlo.fr/).
+
+## History
+
+The idea for the project has existed since May 13, 2020, symbolized by a [publication on Twitter](https://twitter.com/Divlo_FR/status/1260638175246135296) by the creator: Divlo.
+
+The main goal is to put into **practice knowledge in web development** and computer science in general on a concrete project that can **easily evolve over time** where you can add many features.
+
+The development of the project begins under the name of **SocialProject**, on August 20, 2020, with colors close to the image of Divlo.
+
+![SocialProject](/images/posts/thream-v1-0-0/social-project.jpg)
+
+When I started the project, I had little knowledge of database design, real-time management or the architecture of such a large <abbr title="Information Technology">IT</abbr> project, so this will be accompanied by many technical problems, to which we will need to find appropriate solutions.
+
+On October 19, 2020, **SocialProject** becomes **Thream**, an invented name, not yet used and more original than the previous one, and also changes colors so that the application is accessible in two distinct themes (light and dark).
+
+With the help of [Walidoux](https://github.com/Walidoux), a junior developer really good at making beautiful <abbr title="User Interface">UI</abbr> with <abbr title="Cascading Style Sheets">CSS</abbr>, we were able to collaborate on this side project together.
+
+Since the project is mainly developed during free time (mainly on weekends), the project took longer to be developed than desired, but now we finally released the first version. 🥳
+
+## Implementation and Technical Difficulties
+
+### Architecture
+
+**Thream** is divided into two distinct projects:
+
+- The **server** part, called **backend**, which the user does not see, allows actions to be taken to save or recover data in the **database**, it is the technical and functional aspect of the project. This part uses a style of software architecture defining a set of constraints to be used to create web services that establish interoperability between computers on the Internet, called REST <abbr title="Application Programming Interface">API</abbr>.
+
+- The **client** part, called **frontend**, what **the user sees on the screen**, such as forms, buttons and all the **graphic elements** with which the user can interact from a browser.
+
+<p className='flex flex-col items-center justify-center'>
+  <img
+    alt='HTTP Communication Schema'
+    src='/images/posts/thream-v1-0-0/http-communication.png'
+  />
+</p>
+
+This design allows the separation between the client and the server, as long as they both structure their communication according to the <abbr title="Representational state transfer">REST</abbr> architectural guidelines, using the <abbr title="Hypertext Transfer Protocol">HTTP</abbr> protocol, they will be able to communicate with each other, which makes it possible to work independently on the backend and on the frontend using different technologies and skills, really useful in teamwork.
+
+To allow the development of this design, it is necessary to think about its architecture in order to solve the following problem: how to store and structure the folders and files of a source code in order to find which file to modify to correct a problem with a particular feature, or to add a feature?
+
+There are two main architectures to solve this problem:
+
+- The **Monorepo** architecture is a single directory containing several distinct projects with well-defined relationships, i.e. it allows the modification of the code in the client and server part simultaneously in the same place by verifying that a modification in the server part does not impact the client part.
+- The **Polyrepo** architecture are several directories, a directory corresponding to a project.
+
+Both architectures track source code file history using version control systems such as [git](https://git-scm.com/).
+
+**Thream**, uses the **Polyrepo** architecture, to make it easier to set up and allows complete independence between client and server code.
+
+### Technologies
+
+Now that we have discussed, on the architecture of the source code, we will discuss the choice of technologies. The chosen technologies must meet the need, and allow the developer to be productive to quickly have a result. Often there are several possible technologies to meet the same need, so it is a question of choosing the technology that you prefer and that you know best.
+
+To ease the development, we chose for **Thream** to use the [TypeScript](https://www.typescriptlang.org/), an open source programming language made by Microsoft. It's a stricter syntactic superset of **JavaScript**, and adds optional static typing to the language, meaning we can assign a "type" (`string`, `number`, `boolean` etc.) to each data/variable in the code, which has the advantage of identifying program errors even before execution and thus greatly improves developer productivity.
+
+The **TypeScript** code is then compiled into **JavaScript** language which is one of the basic technologies of the **World Wide Web**, alongside HTML and CSS (in the client part), this makes it possible to make the pages of websites **interactive** by executing code depending on a certain event, for example when clicking on a button, or when pressing a key on the keyboard.
+
+Since the creation of **Node.js** in 2009, it is now also possible to execute **JavaScript** outside the browser, for example on a server. **Node.js is a runtime environment** that offers modules that handle various basic features for interacting with files/folders, networking (DNS, HTTP, TCP, TLS/SSL, or UDP), and other functions inaccessible from a browser and designed to reduce the complexity of developing server applications.
+
+**TypeScript** allows you to code with the same programming language, the client part and the server part, with different needs.
+
+### User Interface (frontend)
+
+The needs of the graphical interface (the client part):
+
+- be accessible through a web browser
+- allow the user to install the application
+- adapts to screen size
+- real-time data update (example: when a new message is sent)
+- save the authenticated user (in cookie)
+
+In order to meet its needs, Thream is a **<abbr title="Progressive Web App">PWA</abbr>**, this consists of making a website appear to the user as a native application, which makes it possible to combine the functionalities of browsers with those of the experience offered by native applications, such as the possibility of installing the application. The main advantage is to be able to **code once** and to provide the **application on several platforms (iOS, Android, Windows, GNU/Linux etc.)** without the need to develop specifically according to each platform.
+
+To design a **<abbr title="Progressive Web App">PWA</abbr>**, and allow updating the data on the graphical interface, we can use a framework, a development infrastructure to offer us a set of tools and software components. For **Thream**, we use [Next.js](https://nextjs.org/), a framework based on [React.js](https://reactjs.org/), which allows you to create interactive user interfaces in JavaScript, to **update the graphical interface when the data changes**.
+
+### Server (backend)
+
+By using the protocol, **<abbr title="Hypertext Transfer Protocol">HTTP</abbr>**, it is the client who sends a request to the server, but to allow the transfer of data in real time, the **<abbr title="Hypertext Transfer Protocol">HTTP</abbr>** protocol is no longer sufficient.
+
+We use **WebSockets** so that it is the server that send a response to all connected clients without the client requesting to the server to get a response, the server sends responses according to events, for example when creating or deleting a message.
+
+Thanks to [Fastify](https://www.fastify.io/), a fast and low overhead web framework, for Node.js and [Socket.io](https://socket.io/), a bidirectional and low-latency communication for every platform, we can easily make REST API and real time communication.
+
+To store the data, we use [PostgreSQL](https://www.postgresql.org/) database, and [Prisma](https://www.prisma.io/), a <abbr title="Object-Relational Mapping">ORM</abbr> for Node.js, which allows us to easily interact with the database without the need of writing <abbr title="Structured Query Language">SQL</abbr> ourselves.
+
+## Current and future state
+
+The main interest of **Thream** is to be able to put into practice the computer knowledge acquired as an autodidact on a concrete project, in order to learn, and understand the problems and potential solutions to complex computer applications such as social networks.
+
+Now that the first version of **Thream** has been released, there may not be any major evolution thereafter, the project will continue to be maintained to fix any bugs, and remain accessible, for as long as possible.
+
+The other interest of the project is that it is completely **open-source**, and allows those who want to contribute to the development, and add new features.
+
+**Thream** is **non-profit** and therefore has no financial goal, deadline or specific feature target, which makes the design of the project a hobby and a way to learn new concepts.
+
+Feel free to give feebacks and suggestions to improve the project, and to report any bug you find.
+
+**Thream** is available: [**thream.divlo.fr**](https://www.thream.divlo.fr/).