chore(release): 1.3.6 [skip ci]

Co-authored-by: Divlo <contact@divlo.fr>

.babelrc.json

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

.eslintrc.json

@@ -5,7 +5,7 @@
     "next/core-web-vitals",
     "prettier"
   ],
-  "plugins": ["prettier"],
+  "plugins": ["unicorn", "prettier"],
   "parserOptions": {
     "project": "./tsconfig.json"
   },
@@ -15,6 +15,17 @@
     "jest": true
   },
   "rules": {
-    "prettier/prettier": "error"
+    "prettier/prettier": "error",
+    "unicorn/prefer-node-protocol": "error",
+    "unicorn/prevent-abbreviations": [
+      "error",
+      {
+        "replacements": {
+          "props": {
+            "properties": false
+          }
+        }
+      }
+    ]
   }
 }

.github/workflows/Divlo.yml

@@ -32,7 +32,7 @@ jobs:
       - uses: 'actions/checkout@v2.3.4'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.3.0'
+        uses: 'actions/setup-node@v2.4.0'
         with:
           node-version: '16.x'
           cache: 'npm'
@@ -46,13 +46,30 @@ jobs:
       - run: 'npm run lint:markdown'
       - run: 'npm run lint:typescript'
 
-  build:
+  test-unit:
     runs-on: 'ubuntu-latest'
     steps:
       - uses: 'actions/checkout@v2.3.4'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.3.0'
+        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'
@@ -64,17 +81,17 @@ jobs:
         run: 'npm run build'
 
       - name: 'Lighthouse'
-        run: 'npm run lighthouse'
+        run: 'npm run test:lighthouse'
         env:
           LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
 
-  test:
+  test-e2e:
     runs-on: 'ubuntu-latest'
     steps:
       - uses: 'actions/checkout@v2.3.4'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.3.0'
+        uses: 'actions/setup-node@v2.4.0'
         with:
           node-version: '16.x'
           cache: 'npm'
@@ -82,18 +99,31 @@ jobs:
       - name: 'Install'
         run: 'npm install'
 
-      - name: 'Test'
-        run: 'npm run test'
+      - 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, build, test]
+    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.3.0'
+        uses: 'actions/setup-node@v2.4.0'
         with:
           node-version: '16.x'
           cache: 'npm'
@@ -101,13 +131,12 @@ jobs:
       - name: 'Install'
         run: 'npm install'
 
-      - name: 'Archive Source code'
-        run: 'tar --exclude="./node_modules" --exclude=".git" -cvf "./Divlo.tar.gz" "./" --warning=no-file-changed'
-
       - name: 'Release'
         run: 'npm run release'
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          GIT_COMMITTER_NAME: ${{ secrets.GIT_NAME }}
+          GIT_COMMITTER_EMAIL: ${{ secrets.GIT_EMAIL }}
 
       - name: 'Deploy to Vercel'
         run: 'npm run deploy -- --token="${VERCEL_TOKEN}" --prod'

.gitignore

@@ -14,6 +14,9 @@ dist
 
 # testing
 coverage
+cypress/screenshots
+cypress/videos
+cypress/downloads
 
 # PWA
 **/workbox-*.js

.lighthouserc.json

@@ -10,9 +10,7 @@
     "assert": {
       "preset": "lighthouse:recommended",
       "assertions": {
-        "csp-xss": "warning",
-        "non-composited-animations": "warning",
-        "uses-responsive-images": "warning"
+        "csp-xss": "warning"
       }
     },
     "upload": {

.releaserc.json

@@ -13,11 +13,24 @@
         "preset": "conventionalcommits"
       }
     ],
-    "@semantic-release/npm",
     [
-      "@semantic-release/github",
+      "@semantic-release/npm",
       {
-        "assets": [{ "path": "Divlo.tar.gz", "label": "Source code (tar.gz)" }]
+        "npmPublish": false
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json", "package-lock.json"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]"
+      }
+    ],
+    "@semantic-release/github",
+    [
+      "@saithodev/semantic-release-backmerge",
+      {
+        "backmergeStrategy": "merge"
       }
     ]
   ]

.vscode/settings.json

@@ -1,9 +1,48 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "prettier.configPath": ".prettierrc.json",
   "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"
   }
 }

Dockerfile

@@ -1,15 +1,15 @@
-FROM node:16.5.0 AS dependencies
+FROM node:16.8.0 AS dependencies
 WORKDIR /usr/src/app
 COPY ./package*.json ./
 RUN npm clean-install
 
-FROM node:16.5.0 AS builder
+FROM node:16.8.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.5.0 AS runner
+FROM node:16.8.0 AS runner
 WORKDIR /usr/src/app
 ENV NODE_ENV=production
 COPY --from=builder /usr/src/app/next.config.js ./next.config.js

README.md

@@ -23,7 +23,7 @@
 ```json
 {
   "name": "Divlo",
-  "pronouns": "He' | 'Him",
+  "pronouns": "He/Him",
   "birthDate": "31/03/2003",
   "nationality": "Alsace, France",
   "interests": [
@@ -35,7 +35,7 @@
     "programmingLanguages": ["JavaScript", "TypeScript", "Python"],
     "frontEnd": ["HTML", "CSS", "Tailwind CSS", "React.js (+ Next.js)"],
     "backEnd": ["Node.js", "Fastify", "Prisma", "PostgreSQL", "MySQL"],
-    "tools": ["Ubuntu", "Hyper Terminal", "VSCode", "Git", "Docker"]
+    "tools": ["Ubuntu", "Visual Studio Code", "Git", "Docker"]
   }
 }
 ```

__test__/pages/404.test.tsx

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

__test__/pages/500.test.tsx

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

components/ErrorPage.tsx

@@ -14,7 +14,12 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
     <>
       <h1 className='my-6 font-semibold text-4xl'>
         {t('errors:error')}{' '}
-        <span className='text-yellow dark:text-yellow-dark'>{statusCode}</span>
+        <span
+          className='text-yellow dark:text-yellow-dark'
+          data-cy='status-code'
+        >
+          {statusCode}
+        </span>
       </h1>
       <p className='text-center text-lg'>
         {message}{' '}

components/Footer.tsx

@@ -11,10 +11,7 @@ export const Footer: React.FC<FooterProps> = (props) => {
   const { version } = props
 
   const versionLink = useMemo(() => {
-    if (version !== '0.0.0-development') {
-      return `https://github.com/Divlo/Divlo/releases/tag/v${version}`
-    }
-    return 'https://github.com/Divlo/Divlo/tree/develop'
+    return `https://github.com/Divlo/Divlo/releases/tag/v${version}`
   }, [version])
 
   return (

components/Header/Language/LanguageFlag.tsx

@@ -15,7 +15,9 @@ export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
         src={`/images/languages/${language}.svg`}
         alt={language}
       />
-      <p className='mx-2 text-base'>{language.toUpperCase()}</p>
+      <p data-cy='language-flag-text' className='mx-2 text-base'>
+        {language.toUpperCase()}
+      </p>
     </>
   )
 }

components/Header/Language/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
+import classNames from 'classnames'
 
 import { Arrow } from './Arrow'
 import { LanguageFlag } from './LanguageFlag'
@@ -33,28 +34,37 @@ export const Language: React.FC = () => {
 
   return (
     <div className='flex flex-col justify-center items-center cursor-pointer'>
-      <div className='flex items-center mr-5' onClick={handleHiddenMenu}>
+      <div
+        data-cy='language-click'
+        className='flex items-center mr-5'
+        onClick={handleHiddenMenu}
+      >
         <LanguageFlag language={currentLanguage} />
         <Arrow />
       </div>
-      {!hiddenMenu && (
-        <ul className='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'>
-          {i18n.locales.map((language, index) => {
-            if (language === currentLanguage) {
-              return null
-            }
-            return (
-              <li
-                key={index}
-                className='flex items-center justify-center w-full h-12 hover:bg-[#4f545c] hover:bg-opacity-20 pl-2'
-                onClick={async () => await handleLanguage(language)}
-              >
-                <LanguageFlag language={language} />
-              </li>
-            )
-          })}
-        </ul>
-      )}
+
+      <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',
+          { hidden: hiddenMenu }
+        )}
+      >
+        {i18n.locales.map((language, index) => {
+          if (language === currentLanguage) {
+            return null
+          }
+          return (
+            <li
+              key={index}
+              className='flex items-center justify-center w-full h-12 hover:bg-[#4f545c] hover:bg-opacity-20 pl-2'
+              onClick={async () => await handleLanguage(language)}
+            >
+              <LanguageFlag language={language} />
+            </li>
+          )
+        })}
+      </ul>
     </div>
   )
 }

components/Header/SwitchTheme.tsx

@@ -13,26 +13,42 @@ export const SwitchTheme: React.FC = () => {
     return null
   }
 
+  const handleClick = (): void => {
+    setTheme(theme === 'dark' ? 'light' : 'dark')
+  }
+
   return (
     <>
       <div
-        className='toggle-button'
-        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+        className='flex items-center'
+        data-cy='switch-theme-click'
+        onClick={handleClick}
       >
-        <div className='toggle-theme-button'>
+        <div className='toggle-theme-button relative cursor-pointer bg-transparent inline-block'>
           <div className='toggle-track'>
-            <div className='toggle-track-check'>
-              <span className='toggle_Dark'>🌜</span>
+            <div
+              data-cy='switch-theme-dark'
+              className='toggle-track-check absolute'
+            >
+              <span className='toggle_Dark flex justify-center items-center relative'>
+                🌜
+              </span>
             </div>
-            <div className='toggle-track-x'>
-              <span className='toggle_Light'>🌞</span>
+            <div
+              data-cy='switch-theme-light'
+              className='toggle-track-x absolute'
+            >
+              <span className='toggle_Light flex justify-center items-center relative'>
+                🌞
+              </span>
             </div>
           </div>
-          <div className='toggle-thumb' />
+          <div className='toggle-thumb absolute' />
           <input
+            data-cy='switch-theme-input'
             type='checkbox'
             aria-label='Dark mode toggle'
-            className='toggle-screenreader-only'
+            className='toggle-screenreader-only absolute overflow-hidden'
             defaultChecked
           />
         </div>
@@ -40,16 +56,8 @@ export const SwitchTheme: React.FC = () => {
 
       <style jsx>
         {`
-          .toggle-button {
-            display: flex;
-            align-items: center;
-          }
           .toggle-theme-button {
             touch-action: pan-x;
-            display: inline-block;
-            position: relative;
-            cursor: pointer;
-            background-color: transparent;
             border: 0;
             padding: 0;
             user-select: none;
@@ -64,7 +72,6 @@ export const SwitchTheme: React.FC = () => {
             color: #fff;
           }
           .toggle-track-check {
-            position: absolute;
             width: 14px;
             height: 10px;
             top: 0;
@@ -77,7 +84,6 @@ export const SwitchTheme: React.FC = () => {
             transition: opacity 0.25s ease;
           }
           .toggle-track-x {
-            position: absolute;
             width: 10px;
             height: 10px;
             top: 0;
@@ -90,15 +96,10 @@ export const SwitchTheme: React.FC = () => {
           }
           .toggle_Dark,
           .toggle_Light {
-            align-items: center;
-            display: flex;
             height: 10px;
-            justify-content: center;
-            position: relative;
             width: 10px;
           }
           .toggle-thumb {
-            position: absolute;
             left: ${theme === 'dark' ? '27px' : '0px'};
             width: 22px;
             height: 22px;
@@ -115,9 +116,7 @@ export const SwitchTheme: React.FC = () => {
             clip: rect(0 0 0 0);
             height: 1px;
             margin: -1px;
-            overflow: hidden;
             padding: 0;
-            position: absolute;
             width: 1px;
           }
         `}

components/Interests/InterestParagraph.tsx

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

components/Profile/ProfileInfo.tsx

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

components/Profile/ProfileLogo.tsx

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

components/Profile/index.tsx

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

components/Skills/index.tsx

@@ -31,7 +31,6 @@ export const Skills: React.FC = () => {
 
       <SkillsSection title={t('home:skills.softwareTools')}>
         <SkillComponent skill='Ubuntu' />
-        <SkillComponent skill='Hyper' />
         <SkillComponent skill='Visual Studio Code' />
         <SkillComponent skill='Git' />
         <SkillComponent skill='Docker' />

components/__test__/Footer.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import { Footer } from '../Footer'
 
 describe('<Footer />', () => {
-  it('should render the version link pointing to the GitHub release', async () => {
+  it('should render with appropriate link tag version', async () => {
     const version = '1.0.0'
     const { getByText } = render(<Footer version={version} />)
     const versionLink = getByText(version) as HTMLAnchorElement
@@ -13,15 +13,4 @@ describe('<Footer />', () => {
       `https://github.com/Divlo/Divlo/releases/tag/v${version}`
     )
   })
-
-  it('should render the version link pointing to the `develop` branch', async () => {
-    const version = '0.0.0-development'
-    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/tree/develop'
-    )
-  })
 })

cypress.json

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

cypress/integration/common/Header.spec.ts

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

cypress/integration/pages/404.spec.ts

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

cypress/integration/pages/500.spec.ts

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

cypress/integration/pages/index.spec.ts

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

cypress/tsconfig.json

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

jest.config.js

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

jest.config.json

@@ -0,0 +1,14 @@
+{
+  "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"
+  ]
+}

locales/en/home.json

@@ -4,7 +4,7 @@
     "description": "Developer Full Stack Junior • Passionate about High-Tech",
     "birthDate": "Birth date",
     "nationality": "Nationality",
-    "descriptionBottom": "I am self-taught in Computer Science by following online trainings. <0/> <0/> I put into practice everything I learn and make many projects."
+    "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."
   },
   "interests": {
     "title": "Interests",

locales/fr/home.json

@@ -4,7 +4,7 @@
     "description": "Développeur Full Stack Junior • Passionné de High-Tech",
     "birthDate": "Date de naissance",
     "nationality": "Nationalité",
-    "descriptionBottom": "Je me forme en autodidacte dans l'informatique en suivant des formations en ligne. <0/> <0/> Je mets en pratique tout ce que j'apprends et réalise de nombreux projets."
+    "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."
   },
   "interests": {
     "title": "Intérêts",

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <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,11 +1,35 @@
 const nextPWA = require('next-pwa')
 const nextTranslate = require('next-translate')
+const { createSecureHeaders } = require('next-secure-headers')
 
+/** @type {import("next").NextConfig} */
 module.exports = nextTranslate(
   nextPWA({
     pwa: {
       disable: process.env.NODE_ENV !== 'production',
       dest: 'public'
+    },
+    async headers() {
+      return [
+        {
+          source: '/:path*',
+          headers: createSecureHeaders({
+            contentSecurityPolicy: {
+              directives: {
+                defaultSrc: ["'self'"],
+                scriptSrc: ["'self'", "'unsafe-eval'", "'unsafe-inline'"],
+                styleSrc: ["'self'", "'unsafe-inline'"],
+                imgSrc: ['*', 'data:', 'blob:'],
+                mediaSrc: "'none'",
+                connectSrc: '*',
+                objectSrc: "'none'",
+                fontSrc: "'self'",
+                baseURI: "'none'"
+              }
+            }
+          })
+        }
+      ]
     }
   })
 )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "divlo",
-  "version": "0.0.0-development",
+  "version": "1.3.6",
   "private": true,
   "repository": {
     "type": "git",
@@ -21,61 +21,69 @@
     "lint:markdown": "markdownlint '**/*.md' --dot --ignore node_modules",
     "lint:typescript": "eslint '**/*.{js,ts,jsx,tsx}'",
     "lint:staged": "lint-staged",
-    "lighthouse": "lhci autorun",
-    "test": "jest",
+    "test:unit": "jest",
+    "test:lighthouse": "lhci autorun",
+    "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'",
     "release": "semantic-release",
     "deploy": "vercel",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "4.5.0",
-    "@fortawesome/fontawesome-svg-core": "1.2.35",
-    "@fortawesome/free-brands-svg-icons": "5.15.3",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
-    "@fortawesome/react-fontawesome": "0.1.14",
+    "@fontsource/montserrat": "4.5.1",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "0.1.15",
     "classnames": "2.3.1",
-    "html-react-parser": "1.2.7",
-    "next": "11.0.1",
-    "next-pwa": "5.2.24",
+    "html-react-parser": "1.3.0",
+    "next": "11.1.2",
+    "next-pwa": "5.3.1",
     "next-themes": "0.0.15",
     "next-translate": "1.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "read-pkg": "5.2.0",
+    "read-pkg": "7.0.0",
+    "sharp": "0.29.1",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
     "@commitlint/cli": "13.1.0",
     "@commitlint/config-conventional": "13.1.0",
-    "@lhci/cli": "0.8.0",
+    "@lhci/cli": "0.8.1",
+    "@saithodev/semantic-release-backmerge": "1.5.3",
+    "@semantic-release/git": "9.0.1",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "12.0.0",
-    "@types/jest": "26.0.24",
-    "@types/node": "16.4.3",
-    "@types/react": "17.0.15",
-    "@types/styled-jsx": "2.2.9",
-    "@typescript-eslint/eslint-plugin": "4.28.5",
-    "autoprefixer": "10.3.1",
-    "babel-jest": "27.0.6",
+    "@types/jest": "27.0.1",
+    "@types/node": "16.9.0",
+    "@types/react": "17.0.20",
+    "@typescript-eslint/eslint-plugin": "4.31.0",
+    "autoprefixer": "10.3.4",
+    "babel-jest": "27.1.1",
+    "cypress": "8.3.1",
     "dockerfilelint": "1.8.0",
     "editorconfig-checker": "4.0.2",
-    "eslint": "7.31.0",
-    "eslint-config-next": "11.0.1",
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.1.2",
     "eslint-config-prettier": "8.3.0",
-    "eslint-config-standard-with-typescript": "20.0.0",
-    "eslint-plugin-import": "2.23.4",
+    "eslint-config-standard-with-typescript": "21.0.1",
+    "eslint-plugin-import": "2.24.2",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-promise": "5.1.0",
-    "husky": "7.0.1",
-    "jest": "27.0.6",
-    "lint-staged": "11.1.1",
+    "eslint-plugin-unicorn": "35.0.0",
+    "husky": "7.0.2",
+    "jest": "27.1.1",
+    "lint-staged": "11.1.2",
     "markdownlint-cli": "0.28.1",
+    "next-secure-headers": "2.2.0",
     "postcss": "8.3.6",
     "prettier": "2.3.2",
-    "semantic-release": "17.4.4",
-    "tailwindcss": "2.2.7",
-    "typescript": "4.3.5",
-    "vercel": "23.0.1"
+    "semantic-release": "17.4.7",
+    "start-server-and-test": "1.14.0",
+    "tailwindcss": "2.2.14",
+    "typescript": "4.4.2",
+    "vercel": "23.1.2"
   }
 }

pages/404.tsx

@@ -1,6 +1,5 @@
 import { GetStaticProps } from 'next'
 import useTranslation from 'next-translate/useTranslation'
-import readPackageJSON from 'read-pkg'
 
 import { ErrorPage } from 'components/ErrorPage'
 import { Head } from 'components/Head'
@@ -25,7 +24,8 @@ const Error404: React.FC<FooterProps> = (props) => {
 }
 
 export const getStaticProps: GetStaticProps<FooterProps> = async () => {
-  const { version } = await readPackageJSON()
+  const { readPackage } = await import('read-pkg')
+  const { version } = await readPackage()
   return { props: { version } }
 }
 

pages/500.tsx

@@ -1,6 +1,5 @@
 import { GetStaticProps } from 'next'
 import useTranslation from 'next-translate/useTranslation'
-import readPackageJSON from 'read-pkg'
 
 import { ErrorPage } from 'components/ErrorPage'
 import { Head } from 'components/Head'
@@ -25,7 +24,8 @@ const Error500: React.FC<FooterProps> = (props) => {
 }
 
 export const getStaticProps: GetStaticProps<FooterProps> = async () => {
-  const { version } = await readPackageJSON()
+  const { readPackage } = await import('read-pkg')
+  const { version } = await readPackage()
   return { props: { version } }
 }
 

pages/_app.tsx

@@ -6,16 +6,14 @@ import UniversalCookie from 'universal-cookie'
 
 import 'tailwindcss/tailwind.css'
 import '@fontsource/montserrat/400.css'
-import '@fontsource/montserrat/500.css'
 import '@fontsource/montserrat/600.css'
-import '@fontsource/montserrat/700.css'
 
 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 MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
+const Application = ({ Component, pageProps }: AppProps): JSX.Element => {
   const { lang } = useTranslation()
 
   useEffect(() => {
@@ -32,4 +30,4 @@ const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
   )
 }
 
-export default MyApp
+export default Application

pages/_document.tsx

@@ -1,31 +1,15 @@
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-  DocumentContext,
-  DocumentInitialProps
-} from 'next/document'
+import { Html, Head, Main, NextScript } from 'next/document'
 
-class MyDocument extends Document {
-  static async getInitialProps(
-    ctx: DocumentContext
-  ): Promise<DocumentInitialProps> {
-    const initialProps = await Document.getInitialProps(ctx)
-    return initialProps
-  }
-
-  render(): JSX.Element {
-    return (
-      <Html>
-        <Head />
-        <body className='bg-white dark:bg-black text-black dark:text-white font-headline'>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
+const Document: React.FC = () => {
+  return (
+    <Html>
+      <Head />
+      <body className='bg-white dark:bg-black text-black dark:text-white font-headline'>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
 }
 
-export default MyDocument
+export default Document

pages/index.tsx

@@ -1,6 +1,5 @@
 import { GetStaticProps } from 'next'
 import useTranslation from 'next-translate/useTranslation'
-import readPackageJSON from 'read-pkg'
 
 import { RevealFade } from 'components/design/RevealFade'
 import { Section } from 'components/design/Section'
@@ -71,7 +70,8 @@ const Home: React.FC<FooterProps> = (props) => {
 }
 
 export const getStaticProps: GetStaticProps<FooterProps> = async () => {
-  const { version } = await readPackageJSON()
+  const { readPackage } = await import('read-pkg')
+  const { version } = await readPackage()
   return { props: { version } }
 }
 

tsconfig.json

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

vercel.json

@@ -1,6 +1,5 @@
 {
   "github": {
-    "enabled": false,
-    "silent": true
+    "enabled": false
   }
 }