chore(release): 2.5.0 [skip ci]

.devcontainer/Dockerfile

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

.devcontainer/devcontainer.json

@@ -1,5 +1,5 @@
 {
-  "name": "divlo",
+  "name": "Divlo",
   "dockerComposeFile": "./docker-compose.yml",
   "service": "workspace",
   "workspaceFolder": "/workspace",
@@ -10,8 +10,6 @@
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
-    "divlo.vscode-styled-jsx-syntax",
-    "divlo.vscode-styled-jsx-languageserver",
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
     "davidanson.vscode-markdownlint",

.devcontainer/docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3.0'
-
 services:
   workspace:
     build:

.eslintrc.json

@@ -6,12 +6,11 @@
   },
   "env": {
     "node": true,
-    "browser": true,
+    "browser": true
-    "jest": true
   },
   "rules": {
     "prettier/prettier": "error",
-    "unicorn/prefer-node-protocol": "off",
+    "unicorn/prefer-node-protocol": "error",
-    "@typescript-eslint/no-misused-promises": "off"
+    "@next/next/no-img-element": "off"
   }
 }

.github/workflows/analyze.yml

@@ -16,12 +16,12 @@ jobs:
         language: ['javascript']
 
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Initialize CodeQL'
-        uses: 'github/codeql-action/init@v1'
+        uses: 'github/codeql-action/init@v2'
         with:
           languages: ${{ matrix.language }}
 
       - name: 'Perform CodeQL Analysis'
-        uses: 'github/codeql-action/analyze@v1'
+        uses: 'github/codeql-action/analyze@v2'

.github/workflows/build.yml

@@ -10,12 +10,12 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'

.github/workflows/lint.yml

@@ -10,12 +10,12 @@ jobs:
   lint:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'

.github/workflows/release.yml

@@ -8,7 +8,7 @@ jobs:
   release:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
         with:
           fetch-depth: 0
           persist-credentials: false
@@ -21,9 +21,9 @@ jobs:
           git_commit_gpgsign: true
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'

.github/workflows/test.yml

@@ -10,12 +10,12 @@ jobs:
   test-unit:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'
@@ -27,12 +27,12 @@ jobs:
   test-lighthouse:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'
@@ -52,12 +52,12 @@ jobs:
   test-e2e:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.1.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.0.0'
+        uses: 'actions/setup-node@v3.5.1'
         with:
-          node-version: '16.x'
+          node-version: '18.x'
           cache: 'npm'
 
       - name: 'Install'

.gitignore

@@ -11,8 +11,7 @@ out
 # production
 build
 dist
-public/*.html
+public/curriculum-vitae
-jsonresume-theme-custom/theme/index.html
 # PWA
 public/workbox-*.js
 public/sw.js
@@ -50,3 +49,7 @@ npm-debug.log*
 .DS_Store
 .lighthouseci
 .vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.html-w3c-validatorrc.json

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

.lighthouserc.json

@@ -5,9 +5,9 @@
       "startServerReadyPattern": "ready on",
       "startServerReadyTimeout": 20000,
       "url": [
-        "http://localhost:3000/",
+        "http://127.0.0.1:3000/",
-        "http://localhost:3000/blog",
+        "http://127.0.0.1:3000/blog",
-        "http://localhost:3000/blog/hello-world"
+        "http://127.0.0.1:3000/blog/hello-world"
       ],
       "numberOfRuns": 1
     },

.lintstagedrc.json

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

.markdownlint-cli2.jsonc

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

.markdownlint.json

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

.vscode/extensions.json

@@ -3,8 +3,6 @@
     "editorconfig.editorconfig",
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
-    "divlo.vscode-styled-jsx-syntax",
-    "divlo.vscode-styled-jsx-languageserver",
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
     "davidanson.vscode-markdownlint",

CONTRIBUTING.md

@@ -81,9 +81,9 @@ npm run dev
 
 ```sh
 # Setup and run all the services for you
-docker-compose up --build
+docker compose up --build
 ```
 
 ### Services started
 
-- website : `http://localhost:3000`
+- website : `http://127.0.0.1:3000`

Dockerfile

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

README.md

@@ -1,7 +1,7 @@
 <h1 align="center"><a href="https://divlo.fr/">Divlo</a></h1>
 
 <p align="center">
-  <strong>Developer Full Stack Junior • Passionate about High-Tech</strong>
+  <strong>Developer Full Stack • Passionate about High-Tech</strong>
 </p>
 
 <p align="center">
@@ -26,14 +26,20 @@
   "birthDate": "31/03/2003",
   "nationality": "Alsace, France",
   "interests": [
-    "Developer Full Stack Junior",
+    "Developer Full Stack",
     "Passionate about High-Tech",
     "Open-Source enthusiast"
   ],
   "skills": {
-    "programmingLanguages": ["JavaScript", "TypeScript", "Python", "C/C++"],
+    "programmingLanguages": [
+      "JavaScript",
+      "TypeScript",
+      "Python",
+      "C/C++",
+      "PHP"
+    ],
     "frontEnd": ["HTML", "CSS", "Tailwind CSS", "React.js (+ Next.js)"],
-    "backEnd": ["Node.js", "Fastify", "Prisma", "PostgreSQL", "MySQL"],
+    "backEnd": ["Laravel", "Node.js", "Fastify", "Prisma", "PostgreSQL"],
     "tools": ["GNU/Linux", "Ubuntu", "Visual Studio Code", "Git", "Docker"]
   }
 }

components/ErrorPage.tsx

@@ -1,17 +1,24 @@
 import useTranslation from 'next-translate/useTranslation'
 import Link from 'next/link'
 
-export interface ErrorPageProps {
+import type { FooterProps } from './Footer'
+import { Footer } from './Footer'
+import { Header } from './Header'
+
+export interface ErrorPageProps extends FooterProps {
   statusCode: number
   message: string
 }
 
 export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
-  const { message, statusCode } = props
+  const { message, statusCode, version } = props
   const { t } = useTranslation()
 
   return (
     <>
+      <div className='flex h-screen flex-col pt-0'>
+        <Header showLanguage />
+        <main className='flex min-w-full flex-1 flex-col items-center justify-center'>
           <h1 className='my-6 text-4xl font-semibold'>
             {t('errors:error')}{' '}
             <span
@@ -23,31 +30,16 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
           </h1>
           <p className='text-center text-lg'>
             {message}{' '}
-        <Link href='/'>
+            <Link
-          <a className='text-yellow hover:underline dark:text-yellow-dark'>
+              href='/'
+              className='text-yellow hover:underline dark:text-yellow-dark'
+            >
               {t('errors:return-to-home-page')}
-          </a>
             </Link>
           </p>
-
+        </main>
-      <style jsx global>
+        <Footer version={version} />
-        {`
+      </div>
-          main {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            min-width: 100vw;
-            flex: 1;
-          }
-          #__next {
-            display: flex;
-            flex-direction: column;
-            padding-top: 0;
-            height: 100vh;
-          }
-        `}
-      </style>
     </>
   )
 }

components/Footer.tsx

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

components/Head.tsx

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

components/Header/Language/index.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 import i18n from 'i18n.json'
 
@@ -11,31 +11,39 @@ import { LanguageFlag } from './LanguageFlag'
 export const Language: React.FC = () => {
   const { lang: currentLanguage } = useTranslation()
   const [hiddenMenu, setHiddenMenu] = useState(true)
+  const languageClickRef = useRef<HTMLDivElement | null>(null)
 
   const handleHiddenMenu = useCallback(() => {
-    setHiddenMenu(!hiddenMenu)
+    setHiddenMenu((oldHiddenMenu) => {
-  }, [hiddenMenu])
+      return !oldHiddenMenu
+    })
+  }, [])
 
   useEffect(() => {
-    if (!hiddenMenu) {
+    const handleClickEvent = (event: MouseEvent): void => {
-      window.document.addEventListener('click', handleHiddenMenu)
+      if (languageClickRef.current == null || event.target == null) {
-    } else {
+        return
-      window.document.removeEventListener('click', handleHiddenMenu)
+      }
+      if (!languageClickRef.current.contains(event.target as Node)) {
+        setHiddenMenu(true)
+      }
     }
 
+    window.document.addEventListener('click', handleClickEvent)
+
     return () => {
-      window.document.removeEventListener('click', handleHiddenMenu)
+      return window.removeEventListener('click', handleClickEvent)
     }
-  }, [hiddenMenu, handleHiddenMenu])
+  }, [])
 
   const handleLanguage = async (language: string): Promise<void> => {
     await setLanguage(language)
-    handleHiddenMenu()
   }
 
   return (
     <div className='flex cursor-pointer flex-col items-center justify-center'>
       <div
+        ref={languageClickRef}
         data-cy='language-click'
         className='mr-5 flex items-center'
         onClick={handleHiddenMenu}
@@ -59,7 +67,9 @@ export const Language: React.FC = () => {
             <li
               key={index}
               className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
-              onClick={async () => await handleLanguage(language)}
+              onClick={async () => {
+                return await handleLanguage(language)
+              }}
             >
               <LanguageFlag language={language} />
             </li>

components/Header/SwitchTheme.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import classNames from 'clsx'
 import { useTheme } from 'next-themes'
 
 export const SwitchTheme: React.FC = () => {
@@ -18,109 +19,60 @@ export const SwitchTheme: React.FC = () => {
   }
 
   return (
-    <>
     <div
       className='flex items-center'
       data-cy='switch-theme-click'
       onClick={handleClick}
     >
-        <div className='toggle-theme-button relative inline-block cursor-pointer bg-transparent'>
+      <div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
-          <div className='toggle-track'>
+        <div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
           <div
             data-cy='switch-theme-dark'
-              className='toggle-track-check absolute'
+            className={classNames(
+              'absolute top-0 bottom-0 left-[8px] mt-auto mb-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
+              {
+                'opacity-100': theme === 'dark',
+                'opacity-0': theme === 'light'
+              }
+            )}
           >
-              <span className='toggle_Dark relative flex items-center justify-center'>
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
               🌜
             </span>
           </div>
           <div
             data-cy='switch-theme-light'
-              className='toggle-track-x absolute'
+            className={classNames(
+              'absolute right-[10px] top-0 bottom-0 mt-auto mb-auto h-[10px] w-[10px] leading-[0]',
+              {
+                'opacity-100': theme === 'light',
+                'opacity-0': theme === 'dark'
+              }
+            )}
           >
-              <span className='toggle_Light relative flex items-center justify-center'>
+            <span className='relative flex h-[10px] w-[10px] items-center justify-center'>
               🌞
             </span>
           </div>
         </div>
-          <div className='toggle-thumb absolute' />
+        <div
+          className={classNames(
+            'absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out',
+            {
+              'left-[27px]': theme === 'dark',
+              'left-0': theme === 'light'
+            }
+          )}
+          style={{ border: '1px solid #4d4d4d' }}
+        />
         <input
           data-cy='switch-theme-input'
           type='checkbox'
           aria-label='Dark mode toggle'
-            className='toggle-screenreader-only absolute overflow-hidden'
+          className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
           defaultChecked
         />
       </div>
     </div>
-
-      <style jsx>
-        {`
-          .toggle-theme-button {
-            touch-action: pan-x;
-            border: 0;
-            padding: 0;
-            user-select: none;
-          }
-          .toggle-track {
-            width: 50px;
-            height: 24px;
-            padding: 0;
-            border-radius: 30px;
-            background-color: #4d4d4d;
-            transition: all 0.2s ease;
-            color: #fff;
-          }
-          .toggle-track-check {
-            width: 14px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            left: 8px;
-            opacity: ${theme === 'dark' ? 1 : 0};
-            transition: opacity 0.25s ease;
-          }
-          .toggle-track-x {
-            width: 10px;
-            height: 10px;
-            top: 0;
-            bottom: 0;
-            margin-top: auto;
-            margin-bottom: auto;
-            line-height: 0;
-            right: 10px;
-            opacity: ${theme === 'dark' ? 0 : 1};
-          }
-          .toggle_Dark,
-          .toggle_Light {
-            height: 10px;
-            width: 10px;
-          }
-          .toggle-thumb {
-            left: ${theme === 'dark' ? '27px' : '0px'};
-            width: 22px;
-            height: 22px;
-            border: 1px solid #4d4d4d;
-            border-radius: 50%;
-            background-color: #fafafa;
-            box-sizing: border-box;
-            transition: all 0.25s ease;
-            top: 1px;
-            color: #fff;
-          }
-          .toggle-screenreader-only {
-            border: 0;
-            clip: rect(0 0 0 0);
-            height: 1px;
-            margin: -1px;
-            padding: 0;
-            width: 1px;
-          }
-        `}
-      </style>
-    </>
   )
 }

components/Header/__test__/Header.test.tsx

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

components/Header/index.tsx

@@ -14,7 +14,6 @@ export const Header: React.FC<HeaderProps> = (props) => {
   return (
     <header className='sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black'>
       <Link href='/'>
-        <a>
         <div className='flex items-center justify-center'>
           <Image
             quality={100}
@@ -27,17 +26,15 @@ export const Header: React.FC<HeaderProps> = (props) => {
             Divlo
           </strong>
         </div>
-        </a>
       </Link>
       <div className='flex justify-between'>
         <div className='flex flex-col items-center justify-center px-6'>
-          <Link href='/blog'>
+          <Link
-            <a
+            href='/blog'
             data-cy='header-blog-link'
             className='text-yellow hover:underline dark:text-yellow-dark'
           >
             Blog
-            </a>
           </Link>
         </div>
         {showLanguage && <Language />}

components/Interests/InterestsList/InterestItem.tsx

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 
 interface InterestItemProps {
   title: string

components/Interests/InterestsList/index.tsx

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

components/Interests/index.tsx

@@ -1,6 +1,7 @@
 import useTranslation from 'next-translate/useTranslation'
 
-import { InterestParagraph, InterestParagraphProps } from './InterestParagraph'
+import type { InterestParagraphProps } from './InterestParagraph'
+import { InterestParagraph } from './InterestParagraph'
 import { InterestsList } from './InterestsList'
 
 export const Interests: React.FC = () => {

components/Portfolio/PortfolioItem.tsx

@@ -24,7 +24,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'
+            className='h-auto w-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5'
             width={300}
             height={300}
             src={image}

components/Portfolio/index.tsx

@@ -1,6 +1,7 @@
 import useTranslation from 'next-translate/useTranslation'
 
-import { PortfolioItem, PortfolioItemProps } from './PortfolioItem'
+import type { PortfolioItemProps } from './PortfolioItem'
+import { PortfolioItem } from './PortfolioItem'
 
 export const Portfolio: React.FC = () => {
   const { t } = useTranslation('home')

components/Profile/ProfileLogo.tsx

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

components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   const { children, className, ...rest } = props

components/Profile/SocialMediaList/SocialMediaItem.tsx

@@ -3,7 +3,9 @@ interface SocialMediaItemProps {
   ariaLabel: string
 }
 
-export const SocialMediaItem: React.FC<SocialMediaItemProps> = (props) => {
+export const SocialMediaItem: React.FC<
+  React.PropsWithChildren<SocialMediaItemProps>
+> = (props) => {
   const { link, ariaLabel, children } = props
 
   return (

components/Skills/Skill.tsx

@@ -2,10 +2,11 @@ import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import { useMemo } from 'react'
 
+import type { SkillName } from './skills'
 import { skills } from './skills'
 
 export interface SkillComponentProps {
-  skill: string
+  skill: SkillName
 }
 
 export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
@@ -14,10 +15,13 @@ export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
   const { theme } = useTheme()
 
   const image = useMemo(() => {
-    if (typeof skillProperties.image !== 'string') {
+    if (typeof skillProperties.image === 'string') {
-      return skillProperties.image[theme ?? 'light']
-    }
       return skillProperties.image
+    }
+    if (theme === 'light') {
+      return skillProperties.image.light
+    }
+    return skillProperties.image.dark
   }, [skillProperties, theme])
 
   return (
@@ -28,7 +32,14 @@ export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
       rel='noopener noreferrer'
     >
       <div className='text-center'>
-        <Image quality={100} width={60} height={60} alt={skill} src={image} />
+        <Image
+          className='inline h-auto w-auto'
+          quality={100}
+          width={60}
+          height={60}
+          alt={skill}
+          src={image}
+        />
         <p className='mt-1'>{skill}</p>
       </div>
     </a>

components/Skills/index.tsx

@@ -13,6 +13,7 @@ export const Skills: React.FC = () => {
         <SkillComponent skill='TypeScript' />
         <SkillComponent skill='Python' />
         <SkillComponent skill='C/C++' />
+        <SkillComponent skill='PHP' />
       </SkillsSection>
 
       <SkillsSection title='Front-end'>
@@ -23,11 +24,11 @@ export const Skills: React.FC = () => {
       </SkillsSection>
 
       <SkillsSection title='Back-end'>
+        <SkillComponent skill='Laravel' />
         <SkillComponent skill='Node.js' />
         <SkillComponent skill='Fastify' />
         <SkillComponent skill='Prisma' />
         <SkillComponent skill='PostgreSQL' />
-        <SkillComponent skill='MySQL' />
       </SkillsSection>
 
       <SkillsSection title={t('home:skills.software-tools')}>

components/Skills/skills.ts

@@ -3,11 +3,7 @@ export interface Skill {
   image: string | { [key: string]: string }
 }
 
-export interface Skills {
+export const skills = {
-  [key: string]: Skill
-}
-
-export const skills: Skills = {
   JavaScript: {
     link: 'https://developer.mozilla.org/docs/Web/JavaScript',
     image: '/images/skills/JavaScript.png'
@@ -24,6 +20,14 @@ export const skills: Skills = {
     link: 'https://isocpp.org/',
     image: '/images/skills/C-Cpp.png'
   },
+  PHP: {
+    link: 'https://www.php.net/',
+    image: '/images/skills/PHP.png'
+  },
+  Laravel: {
+    link: 'https://laravel.com/',
+    image: '/images/skills/Laravel.png'
+  },
   Dart: {
     link: 'https://dart.dev/',
     image: '/images/skills/Dart.png'
@@ -107,3 +111,5 @@ export const skills: Skills = {
     image: '/images/skills/Docker.png'
   }
 } as const
+
+export type SkillName = keyof typeof skills

components/__test__/ErrorPage.test.tsx

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

components/__test__/Footer.test.tsx

@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Footer } from '../Footer'
-
-describe('<Footer />', () => {
-  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
-    expect(getByText('Divlo')).toBeInTheDocument()
-    expect(versionLink).toBeInTheDocument()
-    expect(versionLink.href).toEqual(
-      `https://github.com/Divlo/Divlo/releases/tag/v${version}`
-    )
-  })
-})

components/design/RevealFade.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
 
-export const RevealFade: React.FC = (props) => {
+export const RevealFade: React.FC<React.PropsWithChildren<{}>> = (props) => {
   const { children } = props
 
   const htmlElement = useRef<HTMLDivElement>(null)

components/design/ShadowContainer.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 type ShadowContainerProps = React.ComponentPropsWithRef<'div'>
 

cypress.config.ts

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

cypress.json

@@ -1,8 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "pluginsFile": false,
-  "supportFile": false,
-  "fixturesFolder": false,
-  "video": false,
-  "screenshotOnRunFailure": false
-}

cypress/component/components/Footer.cy.tsx

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

cypress/component/utils/getAge.cy.ts

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

cypress/e2e/common/Header.cy.ts

@@ -1,5 +1,7 @@
 describe('Common > Header', () => {
-  beforeEach(() => cy.visit('/'))
+  beforeEach(() => {
+    return cy.visit('/')
+  })
 
   it('should redirect to /blog on click of the blog link', () => {
     cy.get('[data-cy=header-blog-link]')
@@ -56,3 +58,5 @@ describe('Common > Header', () => {
     })
   })
 })
+
+export {}

cypress/e2e/pages/404.cy.ts

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

cypress/e2e/pages/500.cy.ts

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

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

@@ -11,3 +11,5 @@ describe('Page /blog/[slug]', () => {
     cy.get('[data-cy=status-code]').contains('404')
   })
 })
+
+export {}

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

@@ -20,3 +20,5 @@ describe('Page /blog', () => {
       .should('eq', '/blog/hello-world')
   })
 })
+
+export {}

cypress/e2e/pages/index.cy.ts

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

cypress/support/commands.ts

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

cypress/support/component-index.html

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

cypress/support/component.ts

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

cypress/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "types": ["cypress"],
-    "isolatedModules": false
-  },
-  "include": ["../node_modules/cypress", "./**/*.ts"]
-}

docker-compose.yml

@@ -1,4 +1,3 @@
-version: '3.0'
 services:
   divlo.fr:
     container_name: ${COMPOSE_PROJECT_NAME}
@@ -6,7 +5,7 @@ services:
     build:
       context: './'
     ports:
-      - '${PORT}:${PORT}'
+      - '${PORT-3000}:${PORT-3000}'
     environment:
-      PORT: ${PORT}
+      PORT: ${PORT-3000}
     env_file: './.env'

jest.config.js

@@ -1,14 +0,0 @@
-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)

jsonresume-theme-custom/.gitignore

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

jsonresume-theme-custom/index.html

@@ -5,10 +5,7 @@
     <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 %>" />
-
+    <link rel="stylesheet" href="./styles/global.css" />
-    <style>
-      @import './styles/global.css';
-    </style>
   </head>
   <body>
     <div class="container-fluid">
@@ -59,7 +56,7 @@
             <div class="background-details">
               <div class="detail" id="about">
                 <div class="icon">
-                  <img src="data-url:./images/user.svg" alt="user" />
+                  <img src="./images/user.svg" alt="user" />
                 </div>
                 <div class="info">
                   <h4 class="title text-uppercase">À propos</h4>
@@ -75,10 +72,7 @@
 
               <div class="detail" id="work-experience">
                 <div class="icon">
-                  <img
+                  <img src="./images/building-columns.svg" alt="work" />
-                    src="data-url:./images/building-columns.svg"
-                    alt="work"
-                  />
                 </div>
                 <div class="info">
                   <h4 class="title text-uppercase">Expériences</h4>
@@ -117,7 +111,7 @@
 
               <div class="detail" id="skills">
                 <div class="icon">
-                  <img src="data-url:./images/toolbox.svg" alt="toolbox" />
+                  <img src="./images/toolbox.svg" alt="toolbox" />
                 </div>
                 <div class="info">
                   <h4 class="title text-uppercase">Compétences</h4>
@@ -144,10 +138,7 @@
 
               <div class="detail" id="education">
                 <div class="icon">
-                  <img
+                  <img src="./images/graduation-cap.svg" alt="graduation" />
-                    src="data-url:./images/graduation-cap.svg"
-                    alt="graduation"
-                  />
                 </div>
                 <div class="info">
                   <h4 class="title text-uppercase">Éducation</h4>
@@ -167,7 +158,8 @@
                           </p>
                           <p class="text-muted clear-margin">
                             <small>
-                              <%= degree.startDate %> - <%= degree.endDate %>
+                              <%= degree.startDate %> <%= degree.endDate != null
+                              ? " - " + degree.endDate : "" %>
                             </small>
                           </p>
                         </div>
@@ -182,7 +174,7 @@
 
               <div class="detail" id="interests">
                 <div class="icon">
-                  <img src="data-url:./images/heart.svg" alt="heart" />
+                  <img src="./images/heart.svg" alt="heart" />
                 </div>
                 <div class="info">
                   <h4 class="title text-uppercase">Intérets</h4>

jsonresume-theme-custom/index.js

@@ -1,28 +0,0 @@
-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

@@ -3,17 +3,18 @@
   "private": true,
   "version": "1.0.0",
   "type": "module",
-  "scripts": {},
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
   "dependencies": {
-    "date-and-time": "2.3.0",
-    "ejs": "3.1.6",
     "modern-normalize": "1.1.0"
   },
   "devDependencies": {
-    "@parcel/config-default": "2.4.1",
+    "@types/node": "18.11.7",
-    "@parcel/core": "2.4.1",
+    "date-and-time": "2.4.1",
-    "@parcel/optimizer-data-url": "2.4.1",
+    "vite": "3.2.0",
-    "@parcel/transformer-inline-string": "2.4.1",
+    "vite-plugin-html": "3.2.0"
-    "parcel": "2.4.1"
   }
 }

jsonresume-theme-custom/scripts/build.js

@@ -1,18 +1,20 @@
-import fs from 'fs'
+import { fileURLToPath } from 'node:url'
+import fs from 'node:fs'
 
-import { render } from '../index.js'
+import { build } from 'vite'
 
-const jsonResumeURL = new URL('../../resume.json', import.meta.url)
+const jsonResumeThemeCustom = new URL('../', import.meta.url)
-const publicResumeURL = new URL(
+const jsonResumeThemeCustomDist = new URL('./dist', jsonResumeThemeCustom)
-  '../../public/curriculum-vitae.html',
+const publicResumeOutputURL = new URL(
+  '../../public/curriculum-vitae',
   import.meta.url
 )
 
-const dataResumeStringJSON = await fs.promises.readFile(jsonResumeURL, {
+await build({
-  encoding: 'utf-8'
+  root: fileURLToPath(jsonResumeThemeCustom),
+  base: '/curriculum-vitae/'
 })
-const dataResumeJSON = JSON.parse(dataResumeStringJSON)
+
-const dataResumeIndexHTML = await render(dataResumeJSON)
+await fs.promises.cp(jsonResumeThemeCustomDist, publicResumeOutputURL, {
-await fs.promises.writeFile(publicResumeURL, dataResumeIndexHTML, {
+  recursive: true
-  encoding: 'utf-8'
 })

jsonresume-theme-custom/styles/global.css

@@ -1,4 +1,4 @@
-@import 'npm:modern-normalize/modern-normalize.css';
+@import 'modern-normalize/modern-normalize.css';
 
 body {
   font-family: 'Montserrat', 'Arial', 'sans-serif';

jsonresume-theme-custom/vite.config.ts

@@ -0,0 +1,33 @@
+import fs from 'node:fs'
+
+import { defineConfig } from 'vite'
+import { createHtmlPlugin } from 'vite-plugin-html'
+import date from 'date-and-time'
+
+const jsonResumeURL = new URL('../resume.json', import.meta.url)
+const dataResumeStringJSON = await fs.promises.readFile(jsonResumeURL, {
+  encoding: 'utf-8'
+})
+const resume = JSON.parse(dataResumeStringJSON)
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    assetsDir: './'
+  },
+  plugins: [
+    createHtmlPlugin({
+      inject: {
+        data: {
+          date,
+          locals: {
+            ...resume
+          }
+        }
+      }
+    })
+  ],
+  css: {
+    postcss: {}
+  }
+})

locales/en/home.json

@@ -1,18 +1,18 @@
 {
   "about": {
     "i-am": "I am",
-    "description": "Developer Full Stack Junior • Passionate about High-Tech",
+    "description": "Developer Full Stack • Passionate about High-Tech",
     "full-name": "Full name",
     "birth-date": "Birth date",
     "years-old": "years old",
     "nationality": "Nationality",
-    "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)."
+    "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\" (second year)."
   },
   "interests": {
     "title": "Interests",
     "paragraphs": [
       {
-        "title": "Developer Full Stack Junior",
+        "title": "Developer Full Stack",
         "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."
       },
       {

locales/fr/home.json

@@ -1,18 +1,18 @@
 {
   "about": {
     "i-am": "Je suis",
-    "description": "Développeur Full Stack Junior • Passionné de High-Tech",
+    "description": "Développeur Full Stack • Passionné de High-Tech",
     "full-name": "Prénom NOM",
     "birth-date": "Date de naissance",
     "years-old": "ans",
     "nationality": "Nationalité",
-    "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)."
+    "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\" (deuxième année)."
   },
   "interests": {
     "title": "Intérêts",
     "paragraphs": [
       {
-        "title": "Développeur Full Stack Junior",
+        "title": "Développeur Full Stack",
         "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."
       },
       {

next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,41 +1,13 @@
-const nextPWA = require('next-pwa')
+const nextPWA = require('next-pwa')({
-const nextTranslate = require('next-translate')
-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'
-    },
-    headers() {
-      return [
-        {
-          source: '/:path*',
-          headers: createSecureHeaders({
-            contentSecurityPolicy: {
-              directives: {
-                defaultSrc: ["'self'"],
-                scriptSrc: [
-                  "'self'",
-                  'data:',
-                  "'unsafe-eval'",
-                  "'unsafe-inline'"
-                ],
-                styleSrc: ["'self'", "'unsafe-inline'"],
-                imgSrc: ['*', 'data:', 'blob:'],
-                mediaSrc: "'none'",
-                connectSrc: '*',
-                objectSrc: "'none'",
-                fontSrc: "'self'",
-                baseURI: "'none'"
-              }
-            }
 })
+const nextTranslate = require('next-translate')
+
+/** @type {import("next").NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  output: 'standalone'
 }
-      ]
+
-    }
+module.exports = nextTranslate(nextPWA(nextConfig))
-  })
-)

package.json

@@ -1,14 +1,14 @@
 {
   "name": "divlo",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "private": true,
   "repository": {
     "type": "git",
     "url": "https://github.com/Divlo/Divlo"
   },
   "engines": {
-    "node": ">=14.0.0",
+    "node": ">=16.0.0",
-    "npm": ">=7.0.0"
+    "npm": ">=8.0.0"
   },
   "scripts": {
     "dev": "next dev",
@@ -17,86 +17,82 @@
     "export": "next export",
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
-    "lint:markdown": "markdownlint \"**/*.{md,mdx}\" --dot --ignore-path \".gitignore\"",
+    "lint:markdown": "markdownlint-cli2",
     "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:unit": "cypress run --component",
-    "test:html-w3c-validator": "start-server-and-test \"start\" \"http://localhost:3000\" \"html-w3c-validator\"",
+    "test:html-w3c-validator": "start-server-and-test \"start\" \"http://127.0.0.1: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://127.0.0.1:3000\" \"cypress run\"",
-    "test:e2e:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\"",
+    "test:dev": "start-server-and-test \"dev\" \"http://127.0.0.1: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.7",
+    "@fontsource/montserrat": "4.5.13",
-    "@fortawesome/fontawesome-svg-core": "6.1.1",
+    "@fortawesome/fontawesome-svg-core": "6.2.0",
-    "@fortawesome/free-brands-svg-icons": "6.1.1",
+    "@fortawesome/free-brands-svg-icons": "6.2.0",
-    "@fortawesome/free-solid-svg-icons": "6.1.1",
+    "@fortawesome/free-solid-svg-icons": "6.2.0",
-    "@fortawesome/react-fontawesome": "0.1.18",
+    "@fortawesome/react-fontawesome": "0.2.0",
-    "classnames": "2.3.1",
+    "@giscus/react": "2.2.0",
-    "date-and-time": "2.3.0",
+    "clsx": "1.2.1",
+    "date-and-time": "2.4.1",
     "gray-matter": "4.0.3",
-    "html-react-parser": "1.4.10",
+    "html-react-parser": "3.0.4",
-    "next": "12.1.4",
+    "next": "13.0.0",
-    "next-mdx-remote": "4.0.2",
+    "next-mdx-remote": "4.1.0",
-    "next-pwa": "5.4.7",
+    "next-pwa": "5.6.0",
-    "next-themes": "0.1.1",
+    "next-themes": "0.2.1",
-    "next-translate": "1.4.0",
+    "next-translate": "1.6.0",
-    "react": "17.0.2",
+    "react": "18.2.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "read-pkg": "7.1.0",
     "rehype-raw": "6.1.1",
     "rehype-slug": "5.0.1",
     "remark-gfm": "3.0.1",
-    "sharp": "0.30.3",
+    "sharp": "0.31.1",
-    "shiki": "0.10.1",
+    "shiki": "0.11.1",
     "unified": "10.1.2",
-    "unist-util-visit": "4.1.0",
+    "unist-util-visit": "4.1.1",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "16.2.3",
+    "@commitlint/cli": "17.1.2",
-    "@commitlint/config-conventional": "16.2.1",
+    "@commitlint/config-conventional": "17.1.0",
     "@lhci/cli": "0.9.0",
     "@saithodev/semantic-release-backmerge": "2.1.2",
     "@semantic-release/git": "10.0.1",
-    "@tailwindcss/typography": "0.5.2",
+    "@tailwindcss/typography": "0.5.7",
-    "@testing-library/jest-dom": "5.16.4",
+    "@types/node": "18.11.7",
-    "@testing-library/react": "12.1.4",
+    "@types/react": "18.0.24",
-    "@types/jest": "27.4.1",
-    "@types/node": "17.0.23",
-    "@types/react": "17.0.43",
     "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "@typescript-eslint/eslint-plugin": "5.41.0",
-    "autoprefixer": "10.4.4",
+    "autoprefixer": "10.4.12",
-    "cypress": "9.5.3",
+    "cypress": "10.11.0",
     "editorconfig-checker": "4.0.2",
-    "eslint": "8.13.0",
+    "eslint": "8.26.0",
-    "eslint-config-conventions": "2.0.0",
+    "eslint-config-conventions": "5.0.0",
-    "eslint-config-next": "12.1.4",
+    "eslint-config-next": "13.0.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-promise": "6.0.0",
+    "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-unicorn": "42.0.0",
+    "eslint-plugin-unicorn": "44.0.2",
-    "html-w3c-validator": "1.2.0",
+    "html-w3c-validator": "1.2.1",
-    "husky": "7.0.4",
+    "husky": "8.0.1",
-    "jest": "27.5.1",
     "jsonresume-theme-custom": "file:./jsonresume-theme-custom",
-    "lint-staged": "12.3.7",
+    "lint-staged": "13.0.3",
-    "markdownlint-cli": "0.31.1",
+    "markdownlint-cli2": "0.5.1",
-    "next-secure-headers": "2.2.0",
+    "postcss": "8.4.18",
-    "postcss": "8.4.12",
+    "prettier": "2.7.1",
-    "prettier": "2.6.2",
+    "prettier-plugin-tailwindcss": "0.1.13",
-    "prettier-plugin-tailwindcss": "0.1.8",
+    "semantic-release": "19.0.5",
-    "semantic-release": "19.0.2",
     "start-server-and-test": "1.14.0",
-    "tailwindcss": "3.0.23",
+    "tailwindcss": "3.2.1",
-    "typescript": "4.6.3",
+    "typescript": "4.8.4",
-    "vercel": "24.0.1"
+    "vercel": "28.4.12"
   }
 }

pages/404.tsx

@@ -1,10 +1,9 @@
-import { GetStaticProps, NextPage } from 'next'
+import type { GetStaticProps, NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from 'components/ErrorPage'
 import { Head } from 'components/Head'
-import { Header } from 'components/Header'
+import type { FooterProps } from 'components/Footer'
-import { Footer, FooterProps } from 'components/Footer'
 
 interface Error404Props extends FooterProps {}
 
@@ -15,12 +14,11 @@ const Error404: NextPage<Error404Props> = (props) => {
   return (
     <>
       <Head title='404 | Divlo' />
-
+      <ErrorPage
-      <Header showLanguage />
+        statusCode={404}
-      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
+        message={t('errors:not-found')}
-        <ErrorPage statusCode={404} message={t('errors:not-found')} />
+        version={version}
-      </main>
+      />
-      <Footer version={version} />
     </>
   )
 }

pages/500.tsx

@@ -1,10 +1,9 @@
-import { GetStaticProps, NextPage } from 'next'
+import type { GetStaticProps, NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from 'components/ErrorPage'
 import { Head } from 'components/Head'
-import { Header } from 'components/Header'
+import type { FooterProps } from 'components/Footer'
-import { Footer, FooterProps } from 'components/Footer'
 
 interface Error500Props extends FooterProps {}
 
@@ -15,12 +14,11 @@ const Error500: NextPage<Error500Props> = (props) => {
   return (
     <>
       <Head title='500 | Divlo' />
-
+      <ErrorPage
-      <Header showLanguage />
+        statusCode={500}
-      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
+        message={t('errors:server-error')}
-        <ErrorPage statusCode={500} message={t('errors:server-error')} />
+        version={version}
-      </main>
+      />
-      <Footer version={version} />
     </>
   )
 }

pages/_app.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { AppProps } from 'next/app'
+import type { AppType } from 'next/app'
 import { ThemeProvider } from 'next-themes'
 import useTranslation from 'next-translate/useTranslation'
 import UniversalCookie from 'universal-cookie'
@@ -13,7 +13,7 @@ const universalCookie = new UniversalCookie()
 /** how long in seconds, until the cookie expires (10 years) */
 const COOKIE_MAX_AGE = 10 * 365.25 * 24 * 60 * 60
 
-const Application = ({ Component, pageProps }: AppProps): JSX.Element => {
+const Application: AppType = ({ Component, pageProps }) => {
   const { lang } = useTranslation()
 
   useEffect(() => {

pages/blog/[slug].tsx

@@ -1,10 +1,13 @@
-import { GetStaticProps, GetStaticPaths, NextPage } from 'next'
+import type { GetStaticProps, GetStaticPaths, NextPage } from 'next'
 import { MDXRemote } from 'next-mdx-remote'
 import date from 'date-and-time'
+import Giscus from '@giscus/react'
+import { useTheme } from 'next-themes'
 
 import { Head } from 'components/Head'
 import { Header } from 'components/Header'
-import { Footer, FooterProps } from 'components/Footer'
+import type { FooterProps } from 'components/Footer'
+import { Footer } from 'components/Footer'
 import type { Post } from 'utils/blog'
 
 interface BlogPostPageProps extends FooterProps {
@@ -14,6 +17,8 @@ interface BlogPostPageProps extends FooterProps {
 const BlogPostPage: NextPage<BlogPostPageProps> = (props) => {
   const { version, post } = props
 
+  const { theme = 'dark' } = useTheme()
+
   return (
     <>
       <Head
@@ -33,7 +38,13 @@ const BlogPostPage: NextPage<BlogPostPageProps> = (props) => {
           <MDXRemote
             {...post.source}
             components={{
-              a: (props: React.ComponentPropsWithoutRef<'a'>) => {
+              img: (properties) => {
+                const { src, alt, ...props } = properties
+                let source = src
+                source = src?.replace('../public/', '/')
+                return <img src={source} alt={alt} {...props} />
+              },
+              a: (props) => {
                 if (props.href?.startsWith('#') ?? false) {
                   return <a {...props} />
                 }
@@ -43,6 +54,20 @@ const BlogPostPage: NextPage<BlogPostPageProps> = (props) => {
               }
             }}
           />
+          <Giscus
+            id='comments'
+            repo='Divlo/Divlo'
+            repoId='MDEwOlJlcG9zaXRvcnkzNTg5NDg1NDQ='
+            category='General'
+            categoryId='DIC_kwDOFWUewM4CQ_WK'
+            mapping='pathname'
+            reactionsEnabled='1'
+            emitMetadata='0'
+            inputPosition='top'
+            theme={theme}
+            lang='en'
+            loading='lazy'
+          />
         </div>
       </main>
       <Footer version={version} />

pages/blog/index.tsx

@@ -1,10 +1,11 @@
-import { GetStaticProps, NextPage } from 'next'
+import type { 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 type { FooterProps } from 'components/Footer'
+import { Footer } from 'components/Footer'
 import { ShadowContainer } from 'components/design/ShadowContainer'
 import type { PostMetadata } from 'utils/blog'
 
@@ -38,8 +39,12 @@ const BlogPage: NextPage<BlogPageProps> = (props) => {
                 'DD/MM/YYYY'
               )
               return (
-                <Link href={`/blog/${post.slug}`} key={index} locale='en'>
+                <Link
-                  <a data-cy={post.slug}>
+                  href={`/blog/${post.slug}`}
+                  key={index}
+                  locale='en'
+                  data-cy={post.slug}
+                >
                   <ShadowContainer className='cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2'>
                     <h2
                       data-cy='blog-post-title'
@@ -54,7 +59,6 @@ const BlogPage: NextPage<BlogPageProps> = (props) => {
                       {post.frontmatter.description}
                     </p>
                   </ShadowContainer>
-                  </a>
                 </Link>
               )
             })}

pages/index.tsx

@@ -1,4 +1,4 @@
-import { GetStaticProps, NextPage } from 'next'
+import type { GetStaticProps, NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { RevealFade } from 'components/design/RevealFade'
@@ -11,7 +11,8 @@ import { SocialMediaList } from 'components/Profile/SocialMediaList'
 import { Skills } from 'components/Skills'
 import { OpenSource } from 'components/OpenSource'
 import { Header } from 'components/Header'
-import { Footer, FooterProps } from 'components/Footer'
+import type { FooterProps } from 'components/Footer'
+import { Footer } from 'components/Footer'
 
 interface HomeProps extends FooterProps {}
 

posts/git-ultimate-guide.md

@@ -0,0 +1,239 @@
+---
+title: '🗓️ Git version control: Ultimate Guide'
+description: 'What is `git`, what are the most used commands, best practices, and tips and tricks. The Ultimate guide to master `git` in your daily workflow.'
+isPublished: true
+publishedOn: '2022-10-27T14:33:07.465Z'
+---
+
+Hello! 👋
+
+Welcome to the Ultimate Guide to master `git` in your daily workflow, we will see what are the most used commands, what are the best practices, and tips and tricks.
+
+This guide is a summary of the most important things to know when working with `git`, and in general, will link to the official documentation of `git` or other resources for more details, it is on purpose to not go in depth in each topic, it allows to summarize `git` and vocabulary about it (you can use it as a `git` cheatsheet).
+
+**Note:** Sources used to write this blog post are available at the [end of this post](#sources).
+
+## Introduction
+
+**Git** is a free and open-source distributed **version control system** for keeping track of changes across a set of files.
+
+Git was originally authored by [Linus Torvalds](https://en.wikipedia.org/wiki/Linus_Torvalds) in 2005 for the development of the [Linux kernel](https://kernel.org/).
+
+Git allows:
+
+- to be able to work with several people on the same codebase.
+- track changes to know who did what and when.
+- revert changes.
+
+Git is **decentralized**, which means that every developer has a full copy of the repository and the complete history of the project.
+
+## Get started with `git` and `.gitconfig` config file
+
+The first thing you should do when you install Git is to set your user name and email address.
+
+```sh
+git config --global user.name "Username"
+git config --global user.email "email@example.com"
+```
+
+These configurations are stored in the `.gitconfig` file in your home directory (e.g: `~/.gitconfig`) with this format:
+
+```sh
+[user]
+  name = Username
+  email = email@example.com
+```
+
+You can find more information and useful `git` configurations in the [official documentation](https://git-scm.com/docs/git-config).
+
+## How `git` works?
+
+Each `git` project is called a **repository** (or **repo** for short) and it contains all the files and folders for a project, as well as each file's revision history (**commits**) stored in the `.git` folder.
+
+The history of a repository is represented by a graph.
+
+Each node is called commit and contains:
+
+- an instantaneous view (snapshot) of the state of the repository at a specific moment
+- metadata: message, author, creation date, etc.
+
+Commits are **snapshots** (not diffs on each file) of the project at specific moments in time.
+
+There are several areas where the files in your project will live in Git:
+
+- **Working directory**: the files that you see in your computer's file system.
+- **Staging area**: the files that will go into your next commit (files added with `git add <filename>` command).
+- **Local repository**: the `.git` directory, which contains all of your project's commits, branches, etc. (files added with `git commit -m "message"` command).
+- **Remote repository**: the `.git` directory in a remote server (files added with `git push` command).
+
+## Commands cheatsheet
+
+You can find the official documentation of `git` commands at [git-scm.com/docs](https://git-scm.com/docs).
+
+```sh
+# Initialize a new git repository
+git init
+
+# Clone a repository
+git clone <url>
+
+# Add all the files to staging area
+git add .
+
+# Add specific file to staging area
+git add <file>
+
+# Commit changes
+git commit -m "chore: initial commit"
+
+# Add remote repository
+git remote add <remote> <url>
+# The main <remote> is often called `origin`
+
+# Add forked repository
+git remote add <remote> <url>
+# The forked <remote> is often called `upstream`
+
+# List all the remotes
+git remote
+
+# Sync forked repository
+git fetch <remote>
+git merge <remote>/<branch>
+
+# Push changes to remote repository
+git push <remote>
+
+# Pull changes from remote repository
+git pull <remote>
+
+# Show the status of the working tree
+git status
+
+# Show the commit history
+git log
+
+# Create a new branch
+git checkout -b <branch>
+
+# Switch to a branch (or tag or commit)
+git checkout <branch>
+
+# Merge a branch into the current branch
+git merge <branch>
+
+# Delete a branch
+git branch --delete <branch>
+git push <remote> --delete <branch>
+
+# Fetch branches from remote repository and prune
+git fetch --prune
+
+# Revert a commit
+git revert <commit>
+
+# Change several past commits (interactive rebase)
+# HEAD points to the current consulted commit.
+git rebase --interactive HEAD~<number-of-commits>
+
+# Reset the current branch, delete all commits since <branch> (without removing the changes)
+git reset --soft <branch>
+
+# Apply the changes introduced by some existing commits
+git cherry-pick <commit>
+```
+
+## `.gitignore` file
+
+The `.gitignore` file is a text file that tells `git` which files (or patterns) it should ignore.
+
+The `.gitignore` file is usually placed in the root directory of the repository.
+
+We usually ignore files that are generated by the build process or files that contain sensitive information.
+
+Example of `.gitignore` file:
+
+```sh
+.env
+build
+*.exe
+```
+
+## `.gitkeep` file
+
+The `.gitkeep` file is a file that is used to keep an empty directory in a Git repository.
+
+This is useful when you want to keep an empty directory in your repository but you don't want to commit any file inside it.
+
+## Git remote repositories (GitHub/GitLab)
+
+Once you are ready to share your code over the internet, you will need to create a remote repository on a service like [GitHub](https://github.com) or [GitLab](https://gitlab.com).
+
+There are many other services, you can also self-host your own Git server.
+
+### SSH vs HTTPS authentication
+
+Once you have created a remote repository, you will need to authenticate to push and pull changes.
+
+There are two main ways to authenticate:
+
+- **SSH**: you will need to generate an SSH key pair and add the public key to your remote repository.
+- **HTTPS**: you will need to provide your username and password each time you push or pull changes.
+
+SSH authentication is the recommended way to authenticate to a remote repository.
+
+You can find more information about SSH authentication in the [official documentation](https://git-scm.com/book/en/v2/Git-on-the-Server-Generating-Your-SSH-Public-Key).
+
+### Sign `git` commits with `gpg`
+
+As we have seen in the [Get started with `git` and `.gitconfig` config file](#get-started-with-git-and-gitconfig-config-file) section, we can configure `git` with a name and email address with a value of our choice.
+
+That means that **anyone can create a commit with any name and email address and claim to be whoever they want** when they create a commit.
+
+To avoid this, you can sign your commits with a <abbr title="GNU Privacy Guard">[GPG](https://gnupg.org/)</abbr> key.
+
+You can find more information about signing commits in the [official documentation](https://git-scm.com/book/en/v2/Git-Tools-Signing-Your-Work).
+
+### Continous Integration/Continuous Delivery (CI/CD)
+
+Once you have your code in a remote repository, everyone (with access) can potentially start contributing to the project. This is great, but it also means that you need to have a way to ensure that your code is working as expected for each change in the project.
+
+You could do it manually, depending on the size and the complexity of the project, but it could be a tedious task.
+
+Instead, you can use a **Continuous Integration** (CI) service to automate the process of testing your code, running linting, unit tests, e2e tests, etc.
+
+There are many CI services, but the most popular ones are [GitHub Actions](https://github.com/features/actions), [GitLab CI](https://docs.gitlab.com/ee/ci/), [CircleCI](https://circleci.com/), [Travis CI](https://travis-ci.org/), and many others...
+
+Then, once your code is ready, tested and working as expected, you can use a **Continuous Delivery** (CD) service to automate the process of **deploying your code**.
+
+CI/CD services are usually integrated with remote repositories, so you can configure them to run automatically when you push changes to the remote repository.
+
+## Best practices and `git` workflows
+
+Commit messages are very important, they are a way to easily know what has changed in the project.
+
+There are many conventions for commit messages, but the most popular one is the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
+
+Then, we can use the commit messages to automatically determine a [semantic version](https://semver.org/) for the next release of the project.
+
+When multiple developers are working on the same project, it is important to organize the work in a way that everyone can work on different features without conflicts (changes in the same files).
+
+There are many ways to organize the work, but the most popular ones are:
+
+- [GitFlow](https://nvie.com/posts/a-successful-git-branching-model/)
+- [GitHub Flow](https://guides.github.com/introduction/flow/)
+- [Trunk-based development](https://trunkbaseddevelopment.com/)
+
+They are called **Git workflows**, or **Git branching strategies**.
+
+## Conclusion
+
+`git` is the tool that every programmer should know to do collaborative work (not only, `git` is also very powerful even when working alone) and keep track of changes across a set of files.
+
+## Sources
+
+- [Git official website and documentation](https://git-scm.com/)
+- [Git Explained in 100 Seconds](https://www.youtube.com/watch?v=hwP7WQkmECE)
+- [Understand Git in 7 minutes](https://www.jesuisundev.com/en/understand-git-in-7-minutes/)
+- [How (and why) to sign Git commits | With Blue Ink](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html?utm_source=tiktok&utm_campaign=codetok-sign)
+- [What Are the Best Git Branching Strategies](https://www.flagship.io/git-branching-strategies/)

posts/thream-v1-0-0.md

@@ -21,7 +21,7 @@ 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)
+![The Thream app on a community page](../public/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/).
 
@@ -33,7 +33,7 @@ The main goal is to put into **practice knowledge in web development** and compu
 
 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)
+![SocialProject](../public/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.
 
@@ -56,7 +56,7 @@ Since the project is mainly developed during free time (mainly on weekends), the
 <p className='flex flex-col items-center justify-center'>
   <img
     alt='HTTP Communication Schema'
-    src='/images/posts/thream-v1-0-0/http-communication.png'
+    src='../public/images/posts/thream-v1-0-0/http-communication.png'
   />
 </p>
 

resume.json

@@ -5,17 +5,16 @@
   },
   "basics": {
     "name": "Théo LUDWIG",
-    "label": "Développeur Full Stack Junior • Passionné de High-Tech",
+    "label": "Développeur Full Stack • Passionné de High-Tech",
     "image": "https://divlo.fr/images/logo_orange.png",
     "email": "contact@divlo.fr",
     "location": {},
     "url": "https://divlo.fr",
-    "summary": "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). <br/> Je mets en pratique tout ce que j'apprends et réalise de nombreux projets."
+    "summary": "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\" (deuxième année). <br/> Je mets en pratique tout ce que j'apprends et réalise de nombreux projets."
   },
   "education": [
     {
       "startDate": "2022",
-      "endDate": "2024",
       "studyType": "Diplôme du Bachelor Universitaire de Technologie (BUT) Informatique",
       "institution": "IUT Robert Schuman à Illkirch-Graffenstaden",
       "score": "En cours"
@@ -41,8 +40,8 @@
       "website": "https://www.nuitdelinfo.com/",
       "name": "La Nuit de l'info 2021",
       "position": "Participation avec l'équipe <a href=\"https://www.nuitdelinfo.com/inscription/equipes/46\">Who are We</a>",
-      "startDate": "2021-07-07",
+      "startDate": "2021-12-02",
-      "endDate": "2021-07-30"
+      "endDate": "2021-12-03"
     },
     {
       "summary": "Agent administratif en vue de faire face au sucroît temporaire d'activités liés à la numérisation des plans des postes sources <br /> actuellement sous format papier calque suite à la libération des locaux des archives.",
@@ -83,7 +82,7 @@
   ],
   "interests": [
     {
-      "name": "Développeur Full Stack Junior"
+      "name": "Développeur Full Stack"
     },
     {
       "name": "Passionné de High-Tech"
@@ -94,7 +93,7 @@
   ],
   "skills": [
     {
-      "keywords": ["JavaScript", "TypeScript", "Python", "C/C++"],
+      "keywords": ["JavaScript", "TypeScript", "Python", "C/C++", "PHP"],
       "name": "Langages de programmation"
     },
     {
@@ -102,7 +101,7 @@
       "name": "Front-end"
     },
     {
-      "keywords": ["Node.js", "Fastify", "PostgreSQL", "MySQL"],
+      "keywords": ["Laravel", "Node.js", "Fastify", "PostgreSQL"],
       "name": "Back-end"
     },
     {

tailwind.config.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+const tailwindConfig = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}'
@@ -47,3 +48,5 @@ module.exports = {
   },
   plugins: [require('@tailwindcss/typography')]
 }
+
+module.exports = tailwindConfig

tsconfig.json

@@ -10,7 +10,7 @@
     "removeComments": true,
     "noEmit": true,
     "strict": true,
-    "types": ["jest", "@testing-library/jest-dom", "@testing-library/react"],
+    "types": ["cypress"],
     "baseUrl": ".",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,

utils/__test__/getAge.test.ts

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

utils/blog.ts

@@ -1,5 +1,5 @@
-import fs from 'fs'
+import fs from 'node:fs'
-import path from 'path'
+import path from 'node:path'
 
 import type { MDXRemoteSerializeResult } from 'next-mdx-remote'
 import { nodeTypes } from '@mdx-js/mdx'
@@ -37,8 +37,8 @@ export const getPosts = async (): Promise<PostMetadata[]> => {
   const posts = await fs.promises.readdir(POSTS_PATH)
   const postsWithTime = await Promise.all(
     posts.map(async (postFilename) => {
-      const [slug] = postFilename.split('.')
+      const [slug, extension] = postFilename.split('.')
-      const blogPostPath = path.join(POSTS_PATH, `${slug}.mdx`)
+      const blogPostPath = path.join(POSTS_PATH, `${slug}.${extension}`)
       const blogPostContent = await fs.promises.readFile(blogPostPath, {
         encoding: 'utf8'
       })
@@ -53,8 +53,12 @@ export const getPosts = async (): Promise<PostMetadata[]> => {
     })
   )
   const postsWithTimeSorted = postsWithTime
-    .filter((post) => post.frontmatter.isPublished)
+    .filter((post) => {
-    .sort((a, b) => b.time - a.time)
+      return post.frontmatter.isPublished
+    })
+    .sort((a, b) => {
+      return b.time - a.time
+    })
   return postsWithTimeSorted
 }
 
@@ -62,7 +66,9 @@ export const getPostBySlug = async (
   slug?: string | string[]
 ): Promise<Post | undefined> => {
   const posts = await getPosts()
-  const post = posts.find((post) => post.slug === slug)
+  const post = posts.find((post) => {
+    return post.slug === slug
+  })
   if (post == null) {
     return undefined
   }

utils/remarkSyntaxHighlightingPlugin.ts

@@ -1,7 +1,7 @@
-import { Plugin, Transformer } from 'unified'
+import type { Plugin, Transformer } from 'unified'
-import { Literal } from 'unist'
+import type { Literal } from 'unist'
 import { visit } from 'unist-util-visit'
-import { Highlighter } from 'shiki'
+import type { Highlighter } from 'shiki'
 
 export interface RemarkSyntaxHighlightingPluginOptions {
   highlighter: Highlighter