fix: replace facebook/jest to vercel/styled-jsx

.devcontainer/Dockerfile

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

.devcontainer/devcontainer.json

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

.devcontainer/docker-compose.yml

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

.dockerignore

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

.eslintrc.json

@@ -1,6 +1,11 @@
 {
-  "extends": ["standard-with-typescript", "eslint-config-prettier"],
-  "plugins": ["eslint-plugin-prettier"],
+  "extends": [
+    "standard-with-typescript",
+    "next",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "plugins": ["prettier"],
   "parserOptions": {
     "project": "./tsconfig.json"
   },

.github/PULL_REQUEST_TEMPLATE.md

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

.github/workflows/Divlo.yml

@@ -2,37 +2,106 @@ name: 'Divlo'
 
 on:
   push:
-    branches: [master]
+    branches: [master, develop]
   pull_request:
-    branches: [master]
+    branches: [master, develop]
 
 jobs:
-  ci:
+  analyze:
     runs-on: 'ubuntu-latest'
+
     strategy:
+      fail-fast: false
       matrix:
-        node-version: [14.x]
+        language: ['javascript']
+
     steps:
-      - uses: 'actions/checkout@v2'
+      - uses: 'actions/checkout@v2.3.4'
 
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: 'actions/setup-node@v2.1.5'
+      - name: 'Initialize CodeQL'
+        uses: 'github/codeql-action/init@v1'
         with:
-          node-version: ${{ matrix.node-version }}
+          languages: ${{ matrix.language }}
 
-      - name: 'Cache dependencies'
-        uses: 'actions/cache@v2.1.5'
+      - name: 'Perform CodeQL Analysis'
+        uses: 'github/codeql-action/analyze@v1'
+
+  lint:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v2.3.4'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v2.3.0'
         with:
-          path: '.npm'
-          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          node-version: '16.x'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
 
-      - run: 'npm install --global npm@7'
-      - run: 'npm ci --cache .npm --prefer-offline'
       - run: 'npm run lint:commit -- --to "${{ github.sha }}"'
       - run: 'npm run lint:docker'
       - run: 'npm run lint:editorconfig'
       - run: 'npm run lint:markdown'
       - run: 'npm run lint:typescript'
-      - run: 'npm run build'
-      - run: 'npm run lighthouse'
-      - run: 'npm run test'
+
+  build:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v2.3.4'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v2.3.0'
+        with:
+          node-version: '16.x'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Build'
+        run: 'npm run build'
+
+      - name: 'Lighthouse'
+        run: 'npm run lighthouse'
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+
+  test:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v2.3.4'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v2.3.0'
+        with:
+          node-version: '16.x'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Test'
+        run: 'npm run test'
+
+  release:
+    if: github.ref == 'refs/heads/master' && github.event_name == 'push'
+    needs: [analyze, lint, build, test]
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v2.3.4'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v2.3.0'
+        with:
+          node-version: '16.x'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Release'
+        run: 'npm run release'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/codeql-analysis.yml

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

.github/workflows/release.yml

@@ -1,34 +0,0 @@
-name: 'Release'
-
-on:
-  workflow_run:
-    workflows: [Divlo]
-    branches: [master]
-    types:
-      - 'completed'
-
-jobs:
-  release:
-    runs-on: 'ubuntu-latest'
-    strategy:
-      matrix:
-        node-version: [14.x]
-    steps:
-      - uses: 'actions/checkout@v2'
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: 'actions/setup-node@v2.1.5'
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: 'Cache dependencies'
-        uses: 'actions/cache@v2.1.5'
-        with:
-          path: '.npm'
-          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
-
-      - run: 'npm install --global npm@7'
-      - run: 'npm ci --cache .npm --prefer-offline'
-      - run: 'npm run release'
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.husky/.gitignore

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

.lighthouserc.json

@@ -10,15 +10,9 @@
     "assert": {
       "preset": "lighthouse:recommended",
       "assertions": {
-        "legacy-javascript": "off",
-        "unused-javascript": "off",
-        "uses-rel-preload": "off",
-        "canonical": "off",
-        "unsized-images": "off",
-        "uses-responsive-images": "off",
-        "bypass": "warning",
-        "color-contrast": "warning",
-        "preload-lcp-image": "warning"
+        "csp-xss": "warning",
+        "non-composited-animations": "warning",
+        "uses-responsive-images": "warning"
       }
     },
     "upload": {

.releaserc.json

@@ -1,4 +1,5 @@
 {
+  "branches": ["master"],
   "plugins": [
     [
       "@semantic-release/commit-analyzer",
@@ -6,7 +7,13 @@
         "preset": "conventionalcommits"
       }
     ],
+    [
       "@semantic-release/release-notes-generator",
+      {
+        "preset": "conventionalcommits"
+      }
+    ],
+    "@semantic-release/npm",
     "@semantic-release/github"
   ]
 }

.vscode/extensions.json

@@ -8,6 +8,7 @@
     "bradlc.vscode-tailwindcss",
     "mikestead.dotenv",
     "coenraads.bracket-pair-colorizer",
-    "davidanson.vscode-markdownlint"
+    "davidanson.vscode-markdownlint",
+    "ms-azuretools.vscode-docker"
   ]
 }

CONTRIBUTING.md

@@ -49,6 +49,11 @@ Scopes define what part of the code changed.
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Divlo/Divlo)
 
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) >= 14.0.0
+- [npm](https://www.npmjs.com/) >= 7.0.0
+
 ### Installation
 
 ```sh
@@ -60,9 +65,19 @@ cd Divlo
 
 # Configure environment variables
 cp .env.example .env
+
+# Install
+npm install
 ```
 
-### Development environment with [Docker](https://www.docker.com/)
+### Local Development environment
+
+```sh
+# Run website
+npm run dev
+```
+
+### Production environment with [Docker](https://www.docker.com/)
 
 ```sh
 # Setup and run all the services for you

Dockerfile

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

README.md

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

components/Footer.tsx

@@ -1,13 +1,42 @@
+import { useMemo } from 'react'
+import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
 
-export const Footer: React.FC = () => {
+export interface FooterProps {
+  version: string
+}
+
+export const Footer: React.FC<FooterProps> = (props) => {
   const { t } = useTranslation()
+  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'
+  }, [version])
 
   return (
-    <footer className='bg-white flex justify-center py-6 text-lg border-t-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
+    <footer className='bg-white flex flex-col items-center justify-center py-6 text-lg border-t-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
       <p>
-        <span className='text-yellow dark:text-yellow-dark'>Divlo</span> |{' '}
-        {t('common:allRightsReserved')}
+        <Link href='/'>
+          <a className='hover:underline text-yellow dark:text-yellow-dark'>
+            Divlo
+          </a>
+        </Link>{' '}
+        | {t('common:allRightsReserved')}
+      </p>
+      <p className='mt-1'>
+        Version{' '}
+        <a
+          className='hover:underline text-yellow dark:text-yellow-dark'
+          href={versionLink}
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          {version}
+        </a>
       </p>
     </footer>
   )

components/Header/Language/index.tsx

@@ -1,15 +1,19 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
 
 import { Arrow } from './Arrow'
 import { LanguageFlag } from './LanguageFlag'
-import { locales } from 'i18n.json'
+import i18n from 'i18n.json'
 
 export const Language: React.FC = () => {
   const { lang: currentLanguage } = useTranslation()
   const [hiddenMenu, setHiddenMenu] = useState(true)
 
+  const handleHiddenMenu = useCallback(() => {
+    setHiddenMenu(!hiddenMenu)
+  }, [hiddenMenu])
+
   useEffect(() => {
     if (!hiddenMenu) {
       window.document.addEventListener('click', handleHiddenMenu)
@@ -20,17 +24,13 @@ export const Language: React.FC = () => {
     return () => {
       window.document.removeEventListener('click', handleHiddenMenu)
     }
-  }, [hiddenMenu])
+  }, [hiddenMenu, handleHiddenMenu])
 
   const handleLanguage = async (language: string): Promise<void> => {
     await setLanguage(language)
     handleHiddenMenu()
   }
 
-  const handleHiddenMenu = (): void => {
-    setHiddenMenu(!hiddenMenu)
-  }
-
   return (
     <div className='flex flex-col justify-center items-center cursor-pointer'>
       <div className='flex items-center mr-5' onClick={handleHiddenMenu}>
@@ -39,7 +39,7 @@ export const Language: React.FC = () => {
       </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'>
-          {locales.map((language, index) => {
+          {i18n.locales.map((language, index) => {
             if (language === currentLanguage) {
               return null
             }

components/Header/index.tsx

@@ -16,7 +16,7 @@ export const Header: React.FC = () => {
               src='/images/divlo_icon_small.png'
               alt='Divlo'
             />
-            <strong className='ml-1 font-headline font-semibold hidden xs:block'>
+            <strong className='ml-1 font-headline font-semibold hidden xs:block text-yellow dark:text-yellow-dark'>
               Divlo
             </strong>
           </div>

components/Interests/InterestParagraph.tsx

@@ -15,7 +15,7 @@ export const InterestParagraph: React.FC<InterestParagraphProps> = (props) => {
           {title}
         </strong>
         <br />
-        <span className='paragraph-color'>{htmlParser(description)}</span>
+        <span>{htmlParser(description)}</span>
       </p>
     </>
   )

components/OpenSource/Repository.tsx

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

components/OpenSource/index.tsx

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

components/Profile/ProfileList/ProfileItem.tsx

@@ -15,7 +15,10 @@ export const ProfileItem: React.FC<ProfileItemProps> = (props) => {
         </strong>
         <span className='profile-list__item-info text-gray dark:text-gray-dark'>
           {link != null ? (
-            <a className='text-gray dark:text-gray-dark' href={link}>
+            <a
+              className='text-gray dark:text-gray-dark hover:underline'
+              href={link}
+            >
               {value}
             </a>
           ) : (

components/Profile/SocialMediaList/SocialMediaIcons/GitLabIcon.tsx

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

components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx

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

components/Profile/SocialMediaList/SocialMediaIcons/NPMIcon.tsx

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

components/Profile/SocialMediaList/index.tsx

@@ -1,19 +1,27 @@
 import { SocialMediaItem } from './SocialMediaItem'
 import { TwitterIcon } from './SocialMediaIcons/TwitterIcon'
 import { GitHubIcon } from './SocialMediaIcons/GitHubIcon'
+import { GitLabIcon } from './SocialMediaIcons/GitLabIcon'
 import { YouTubeIcon } from './SocialMediaIcons/YouTubeIcon'
 import { TwitchIcon } from './SocialMediaIcons/TwitchIcon'
 import { EmailIcon } from './SocialMediaIcons/EmailIcon'
+import { NPMIcon } from './SocialMediaIcons/NPMIcon'
 
 export const SocialMediaList: React.FC = () => {
   return (
     <ul className='social-media-list m-0 mt-2 py-4 list-none text-center'>
-      <SocialMediaItem link='https://twitter.com/Divlo_FR' ariaLabel='Twitter'>
-        <TwitterIcon />
-      </SocialMediaItem>
       <SocialMediaItem link='https://github.com/Divlo' ariaLabel='GitHub'>
         <GitHubIcon />
       </SocialMediaItem>
+      <SocialMediaItem link='https://gitlab.com/Divlo' ariaLabel='GitLab'>
+        <GitLabIcon />
+      </SocialMediaItem>
+      <SocialMediaItem link='https://www.npmjs.com/~divlo' ariaLabel='NPM'>
+        <NPMIcon />
+      </SocialMediaItem>
+      <SocialMediaItem link='https://twitter.com/Divlo_FR' ariaLabel='Twitter'>
+        <TwitterIcon />
+      </SocialMediaItem>
       <SocialMediaItem
         link='https://www.youtube.com/c/Divlo'
         ariaLabel='YouTube'

components/Skills/Skill.tsx

@@ -1,14 +1,24 @@
+import { useTheme } from 'next-themes'
 import Image from 'next/image'
+import { useMemo } from 'react'
 
 import { skills } from './skills'
 
-export interface SkillProps {
-  skill: keyof typeof skills
+export interface SkillComponentProps {
+  skill: string
 }
 
-export const Skill: React.FC<SkillProps> = (props) => {
+export const SkillComponent: React.FC<SkillComponentProps> = (props) => {
   const { skill } = props
   const skillProperties = skills[skill]
+  const { theme } = useTheme()
+
+  const image = useMemo(() => {
+    if (typeof skillProperties.image !== 'string') {
+      return skillProperties.image[theme ?? 'light']
+    }
+    return skillProperties.image
+  }, [skillProperties, theme])
 
   return (
     <a
@@ -18,7 +28,7 @@ export const Skill: React.FC<SkillProps> = (props) => {
       rel='noopener noreferrer'
     >
       <div className='text-center'>
-        <Image width={60} height={60} alt={skill} src={skillProperties.image} />
+        <Image width={60} height={60} alt={skill} src={image} />
         <p className='mt-1'>{skill}</p>
       </div>
     </a>

components/Skills/index.tsx

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

components/Skills/skills.ts

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

components/__test__/Footer.test.tsx

@@ -3,8 +3,25 @@ import { render } from '@testing-library/react'
 import { Footer } from '../Footer'
 
 describe('<Footer />', () => {
-  it('should render', async () => {
-    const { getByText } = render(<Footer />)
+  it('should render the version link pointing to the GitHub release', async () => {
+    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}`
+    )
+  })
+
+  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'
+    )
   })
 })

components/design/Section/SectionHeading.tsx

@@ -1,20 +1,11 @@
-import { forwardRef } from 'react'
-
 type SectionHeadingProps = React.ComponentPropsWithRef<'h2'>
 
-export const SectionHeading = forwardRef<
-  HTMLHeadingElement,
-  SectionHeadingProps
->((props, ref) => {
+export const SectionHeading: React.FC<SectionHeadingProps> = (props) => {
   const { children, ...rest } = props
 
   return (
-    <h2
-      ref={ref}
-      {...rest}
-      className='text-4xl font-semibold text-center mt-1 mb-7'
-    >
+    <h2 {...rest} className='text-4xl font-semibold text-center mt-1 mb-3'>
       {children}
     </h2>
   )
-})
+}

components/design/Section/index.tsx

@@ -1,5 +1,3 @@
-import { forwardRef } from 'react'
-
 import { ShadowContainer } from '../ShadowContainer'
 import { SectionHeading } from './SectionHeading'
 
@@ -10,7 +8,7 @@ type SectionProps = React.ComponentPropsWithRef<'section'> & {
   withoutShadowContainer?: boolean
 }
 
-export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
+export const Section: React.FC<SectionProps> = (props) => {
   const {
     children,
     heading,
@@ -24,7 +22,7 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
     return (
       <div className='px-3 w-full'>
         <ShadowContainer style={{ marginTop: 50 }}>
-          <section ref={ref} {...rest}>
+          <section {...rest}>
             {heading != null && <SectionHeading>{heading}</SectionHeading>}
             <div className='px-3 w-full'>{children}</div>
           </section>
@@ -35,7 +33,7 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
 
   if (withoutShadowContainer) {
     return (
-      <section ref={ref} {...rest}>
+      <section {...rest}>
         {heading != null && <SectionHeading>{heading}</SectionHeading>}
         <div className='px-3 w-full'>{children}</div>
       </section>
@@ -43,7 +41,7 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
   }
 
   return (
-    <section ref={ref} {...rest}>
+    <section {...rest}>
       {heading != null && (
         <SectionHeading style={{ ...(description != null && { margin: 0 }) }}>
           {heading}
@@ -61,4 +59,4 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
       </div>
     </section>
   )
-})
+}

docker-compose.yml

@@ -9,3 +9,4 @@ services:
       - '${PORT}:${PORT}'
     environment:
       PORT: ${PORT}
+    env_file: './.env'

jest.config.js

@@ -5,23 +5,12 @@ module.exports = {
   },
   moduleDirectories: ['node_modules', './'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testEnvironment: 'jsdom',
   setupFilesAfterEnv: [
     '@testing-library/jest-dom/extend-expect',
     '@testing-library/react'
   ],
   collectCoverage: true,
-  collectCoverageFrom: [
-    '**/*.{js,jsx,ts,tsx}',
-    '!**/*.d.ts',
-    '!**/.next/**',
-    '!**/node_modules/**',
-    '!**/next.config.js',
-    '!**/postcss.config.js',
-    '!**/tailwind.config.js',
-    '!**/workbox-*.js',
-    '!**/sw.js',
-    '!**/jest.config.js'
-  ],
   coverageDirectory: './coverage',
   coverageReporters: ['text', 'cobertura']
 }

locales/en/home.json

@@ -7,7 +7,7 @@
     "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."
   },
   "interests": {
-    "title": "My Interests",
+    "title": "Interests",
     "paragraphs": [
       {
         "title": "Developer Full Stack Junior :",
@@ -19,17 +19,17 @@
       },
       {
         "title": "Open-Source enthusiast :",
-        "description": "For me, everyone should work, solve problems, build things and think together. Long live open source, whenever you can share your work, do it! <br/> The website is open-source on <a href='https://github.com/Divlo/Divlo' target='_blank' rel='noopener noreferrer'>github</a>."
+        "description": "For me, everyone should work, solve problems, build things and think together. Long live open source, whenever you can share your work, do it! <br/> The website is open-source on <a class='text-yellow dark:text-yellow-dark hover:underline' href='https://github.com/Divlo/Divlo' target='_blank' rel='noopener noreferrer'>github</a>."
       }
     ]
   },
   "skills": {
-    "title": "My skills",
+    "title": "Skills",
     "languages": "Programming languages",
     "softwareTools": "Software and tools"
   },
   "portfolio": {
-    "title": "My Portfolio",
+    "title": "Portfolio",
     "items": [
       {
         "title": "function.divlo.fr",
@@ -42,7 +42,16 @@
         "description": "Your open source platform to stay close with your friends and communities, talk, chat, collaborate, share and have fun.",
         "link": "https://thream.divlo.fr/",
         "image": "/images/portfolio/threamdivlofr.png"
+      },
+      {
+        "title": "Leon",
+        "description": "Leon is your open-source personal assistant.",
+        "link": "https://getleon.ai/",
+        "image": "/images/portfolio/leon.png"
       }
     ]
+  },
+  "open-source": {
+    "description": "List of most famous open source projects I contributed to."
   }
 }

locales/fr/home.json

@@ -7,7 +7,7 @@
     "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."
   },
   "interests": {
-    "title": "Mes intérêts",
+    "title": "Intérêts",
     "paragraphs": [
       {
         "title": "Développeur Full Stack Junior :",
@@ -19,17 +19,17 @@
       },
       {
         "title": "Enthousiaste de l'Open-Source :",
-        "description": "Pour moi, tout le monde devrait travailler, résoudre des problèmes, construire des choses et réfléchir ensemble. Longue vie à l'open-source, chaque fois que vous pouvez partagez votre travail, faites-le! <br/> Le site est open-source sur <a href='https://github.com/Divlo/Divlo' target='_blank' rel='noopener noreferrer'>github</a>."
+        "description": "Pour moi, tout le monde devrait travailler, résoudre des problèmes, construire des choses et réfléchir ensemble. Longue vie à l'open-source, chaque fois que vous pouvez partagez votre travail, faites-le! <br/> Le site est open-source sur <a class='text-yellow dark:text-yellow-dark hover:underline' href='https://github.com/Divlo/Divlo' target='_blank' rel='noopener noreferrer'>github</a>."
       }
     ]
   },
   "skills": {
-    "title": "Mes compétences",
+    "title": "Compétences",
     "languages": "Langages de programmation",
     "softwareTools": "Logiciels et outils"
   },
   "portfolio": {
-    "title": "Mon Portfolio",
+    "title": "Portfolio",
     "items": [
       {
         "title": "function.divlo.fr",
@@ -42,7 +42,16 @@
         "description": "Votre plateforme open source pour rester proche de vos amis et communautés, parler, discuter, collaborer, partager et vous amuser.",
         "link": "https://thream.divlo.fr/",
         "image": "/images/portfolio/threamdivlofr.png"
+      },
+      {
+        "title": "Leon",
+        "description": "Leon est votre assistant personnel open source.",
+        "link": "https://getleon.ai/",
+        "image": "/images/portfolio/leon.png"
       }
     ]
+  },
+  "open-source": {
+    "description": "Liste des projets open source les plus célèbres auxquels j'ai contribué."
   }
 }

next-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

package.json

@@ -6,6 +6,10 @@
     "type": "git",
     "url": "https://github.com/Divlo/Divlo"
   },
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=7.0.0"
+  },
   "scripts": {
     "dev": "next dev",
     "start": "next start",
@@ -14,8 +18,8 @@
     "lint:commit": "commitlint",
     "lint:docker": "dockerfilelint './Dockerfile'",
     "lint:editorconfig": "editorconfig-checker",
-    "lint:markdown": "markdownlint '*.md' --dot --ignore node_modules",
-    "lint:typescript": "eslint '*.{js,ts,jsx,tsx}'",
+    "lint:markdown": "markdownlint '**/*.md' --dot --ignore node_modules",
+    "lint:typescript": "eslint '**/*.{js,ts,jsx,tsx}'",
     "lint:staged": "lint-staged",
     "lighthouse": "lhci autorun",
     "test": "jest",
@@ -23,51 +27,53 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "4.3.0",
+    "@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",
     "classnames": "2.3.1",
-    "html-react-parser": "1.2.6",
-    "next": "10.2.0",
-    "next-pwa": "5.2.21",
-    "next-themes": "0.0.14",
-    "next-translate": "1.0.6",
+    "html-react-parser": "1.2.7",
+    "next": "11.0.1",
+    "next-pwa": "5.2.24",
+    "next-themes": "0.0.15",
+    "next-translate": "1.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "read-pkg": "5.2.0",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "12.1.1",
-    "@commitlint/config-conventional": "12.1.1",
-    "@lhci/cli": "0.7.2",
-    "@testing-library/jest-dom": "5.12.0",
-    "@testing-library/react": "11.2.6",
-    "@types/jest": "26.0.23",
-    "@types/node": "15.0.2",
-    "@types/react": "17.0.5",
-    "@types/styled-jsx": "2.2.8",
-    "@typescript-eslint/eslint-plugin": "4.22.1",
-    "autoprefixer": "10.2.5",
-    "babel-jest": "26.6.3",
+    "@commitlint/cli": "13.1.0",
+    "@commitlint/config-conventional": "13.1.0",
+    "@lhci/cli": "0.8.0",
+    "@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",
     "dockerfilelint": "1.8.0",
     "editorconfig-checker": "4.0.2",
-    "eslint": "7.26.0",
+    "eslint": "7.31.0",
+    "eslint-config-next": "11.0.1",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-standard-with-typescript": "20.0.0",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-import": "2.23.4",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-promise": "4.3.1",
-    "husky": "6.0.0",
-    "jest": "26.6.3",
-    "lint-staged": "11.0.0",
-    "markdownlint-cli": "0.27.1",
-    "postcss": "8.2.14",
-    "prettier": "2.2.1",
-    "semantic-release": "17.4.2",
-    "tailwindcss": "2.1.2",
-    "typescript": "4.2.4"
+    "eslint-plugin-promise": "5.1.0",
+    "husky": "7.0.1",
+    "jest": "27.0.6",
+    "lint-staged": "11.1.1",
+    "markdownlint-cli": "0.28.1",
+    "postcss": "8.3.6",
+    "prettier": "2.3.2",
+    "semantic-release": "17.4.4",
+    "tailwindcss": "2.2.7",
+    "typescript": "4.3.5"
   }
 }

pages/404.tsx

@@ -1,22 +1,32 @@
 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'
+import { Header } from 'components/Header'
+import { Footer, FooterProps } from 'components/Footer'
 
-const Error404: React.FC = () => {
+const Error404: React.FC<FooterProps> = (props) => {
   const { t } = useTranslation()
+  const { version } = props
 
   return (
     <>
       <Head title='Divlo - 404' />
+
+      <Header />
+      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
         <ErrorPage statusCode={404} message={t('errors:notFound')} />
+      </main>
+      <Footer version={version} />
     </>
   )
 }
 
-export const getStaticProps: GetStaticProps = async () => {
-  return { props: {} }
+export const getStaticProps: GetStaticProps<FooterProps> = async () => {
+  const { version } = await readPackageJSON()
+  return { props: { version } }
 }
 
 export default Error404

pages/500.tsx

@@ -1,22 +1,32 @@
 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'
+import { Header } from 'components/Header'
+import { Footer, FooterProps } from 'components/Footer'
 
-const Error500: React.FC = () => {
+const Error500: React.FC<FooterProps> = (props) => {
   const { t } = useTranslation()
+  const { version } = props
 
   return (
     <>
       <Head title='Divlo - 500' />
+
+      <Header />
+      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
         <ErrorPage statusCode={500} message={t('errors:serverError')} />
+      </main>
+      <Footer version={version} />
     </>
   )
 }
 
-export const getStaticProps: GetStaticProps = async () => {
-  return { props: {} }
+export const getStaticProps: GetStaticProps<FooterProps> = async () => {
+  const { version } = await readPackageJSON()
+  return { props: { version } }
 }
 
 export default Error500

pages/_app.tsx

@@ -10,9 +10,6 @@ import '@fontsource/montserrat/500.css'
 import '@fontsource/montserrat/600.css'
 import '@fontsource/montserrat/700.css'
 
-import { Header } from 'components/Header'
-import { Footer } from 'components/Footer'
-
 const universalCookie = new UniversalCookie()
 
 /** how long in seconds, until the cookie expires (10 years) */
@@ -30,11 +27,7 @@ const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
 
   return (
     <ThemeProvider attribute='class' defaultTheme='dark'>
-      <Header />
-      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
       <Component {...pageProps} />
-      </main>
-      <Footer />
     </ThemeProvider>
   )
 }

pages/index.tsx

@@ -1,5 +1,6 @@
 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'
@@ -9,14 +10,20 @@ import { Portfolio } from 'components/Portfolio'
 import { Profile } from 'components/Profile'
 import { SocialMediaList } from 'components/Profile/SocialMediaList'
 import { Skills } from 'components/Skills'
+import { OpenSource } from 'components/OpenSource'
+import { Header } from 'components/Header'
+import { Footer, FooterProps } from 'components/Footer'
 
-const Home: React.FC = () => {
+const Home: React.FC<FooterProps> = (props) => {
   const { t } = useTranslation()
+  const { version } = props
 
   return (
     <>
       <Head />
 
+      <Header />
+      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
         <Section isMain id='about'>
           <Profile />
           <SocialMediaList />
@@ -47,12 +54,25 @@ const Home: React.FC = () => {
             <Portfolio />
           </Section>
         </RevealFade>
+
+        <RevealFade>
+          <Section
+            id='open-source'
+            heading='Open source'
+            withoutShadowContainer
+          >
+            <OpenSource />
+          </Section>
+        </RevealFade>
+      </main>
+      <Footer version={version} />
     </>
   )
 }
 
-export const getStaticProps: GetStaticProps = async () => {
-  return { props: {} }
+export const getStaticProps: GetStaticProps<FooterProps> = async () => {
+  const { version } = await readPackageJSON()
+  return { props: { version } }
 }
 
 export default Home