chore: add Vercel CLI

.dockerignore

@@ -9,3 +9,4 @@ tmp
 temp
 .DS_Store
 .lighthouseci
+.vercel

.eslintignore

@@ -4,3 +4,4 @@ node_modules
 next-env.d.ts
 **/workbox-*.js
 **/sw.js
+.vercel

.github/workflows/Divlo.yml

@@ -32,18 +32,13 @@ jobs:
       - uses: 'actions/checkout@v2.3.4'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.1.5'
+        uses: 'actions/setup-node@v2.3.0'
         with:
           node-version: '16.x'
-
+          cache: 'npm'
-      - name: 'Cache dependencies'
-        uses: 'actions/cache@v2.1.6'
-        with:
-          path: '.npm'
-          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
 
       - name: 'Install'
-        run: 'npm ci --cache .npm --prefer-offline'
+        run: 'npm install'
 
       - run: 'npm run lint:commit -- --to "${{ github.sha }}"'
       - run: 'npm run lint:docker'
@@ -57,18 +52,13 @@ jobs:
       - uses: 'actions/checkout@v2.3.4'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.1.5'
+        uses: 'actions/setup-node@v2.3.0'
         with:
           node-version: '16.x'
-
+          cache: 'npm'
-      - name: 'Cache dependencies'
-        uses: 'actions/cache@v2.1.6'
-        with:
-          path: '.npm'
-          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
 
       - name: 'Install'
-        run: 'npm ci --cache .npm --prefer-offline'
+        run: 'npm install'
 
       - name: 'Build'
         run: 'npm run build'
@@ -84,18 +74,13 @@ jobs:
       - uses: 'actions/checkout@v2.3.4'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.1.5'
+        uses: 'actions/setup-node@v2.3.0'
         with:
           node-version: '16.x'
-
+          cache: 'npm'
-      - name: 'Cache dependencies'
-        uses: 'actions/cache@v2.1.6'
-        with:
-          path: '.npm'
-          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
 
       - name: 'Install'
-        run: 'npm ci --cache .npm --prefer-offline'
+        run: 'npm install'
 
       - name: 'Test'
         run: 'npm run test'
@@ -108,20 +93,25 @@ jobs:
       - uses: 'actions/checkout@v2.3.4'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.1.5'
+        uses: 'actions/setup-node@v2.3.0'
         with:
           node-version: '16.x'
-
+          cache: 'npm'
-      - name: 'Cache dependencies'
-        uses: 'actions/cache@v2.1.6'
-        with:
-          path: '.npm'
-          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
 
       - name: 'Install'
-        run: 'npm ci --cache .npm --prefer-offline'
+        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 }}
+
+      - name: 'Deploy to Vercel'
+        run: 'npm run deploy -- --token="${VERCEL_TOKEN}" --prod'
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

.gitignore

@@ -45,3 +45,4 @@ npm-debug.log*
 # misc
 .DS_Store
 .lighthouseci
+.vercel

.husky/.gitignore

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

.prettierignore

@@ -6,3 +6,4 @@ package.json
 package-lock.json
 **/workbox-*.js
 **/sw.js
+.vercel

.releaserc.json

@@ -13,6 +13,12 @@
         "preset": "conventionalcommits"
       }
     ],
-    "@semantic-release/github"
+    "@semantic-release/npm",
+    [
+      "@semantic-release/github",
+      {
+        "assets": [{ "path": "Divlo.tar.gz", "label": "Source code (tar.gz)" }]
+      }
+    ]
   ]
 }

CONTRIBUTING.md

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

Dockerfile

@@ -1,15 +1,15 @@
-FROM node:16.3.0 AS dependencies
+FROM node:16.5.0 AS dependencies
 WORKDIR /usr/src/app
 COPY ./package*.json ./
 RUN npm clean-install
 
-FROM node:16.3.0 AS builder
+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
 
-FROM node:16.3.0 AS runner
+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

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
+```json
-export interface Divlo {
+{
-  pronouns: 'He' | 'Him'
+  "name": "Divlo",
-  birthDate: '31/03/2003'
+  "pronouns": "He' | 'Him",
-  nationality: 'Alsace, France'
+  "birthDate": "31/03/2003",
-  interests: [
+  "nationality": "Alsace, France",
-    'Developer Full Stack Junior',
+  "interests": [
-    'Passionate about High-Tech',
+    "Developer Full Stack Junior",
-    'Open-Source enthusiast'
+    "Passionate about High-Tech",
-  ]
+    "Open-Source enthusiast"
-  skills: {
+  ],
-    languages: ['JavaScript', 'TypeScript', 'Python', 'C/C++']
+  "skills": {
-    frontEnd: ['HTML', 'CSS', 'Tailwind CSS', 'React.js (+ Next.js)']
+    "programmingLanguages": ["JavaScript", "TypeScript", "Python"],
-    backEnd: ['Node.js', 'Fastify', 'Prisma', 'PostgreSQL', 'MySQL']
+    "frontEnd": ["HTML", "CSS", "Tailwind CSS", "React.js (+ Next.js)"],
-    tools: ['Ubuntu', 'Hyper Terminal', 'VSCode', 'Git', 'Docker']
+    "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> |{' '}
+        <Link href='/'>
-        {t('common:allRightsReserved')}
+          <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/OpenSource/Repository.tsx

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

@@ -12,7 +12,6 @@ export const Skills: React.FC = () => {
         <SkillComponent skill='JavaScript' />
         <SkillComponent skill='TypeScript' />
         <SkillComponent skill='Python' />
-        <SkillComponent skill='C/C++' />
       </SkillsSection>
 
       <SkillsSection title='Front-end'>

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 () => {
+  it('should render the version link pointing to the GitHub release', async () => {
-    const { getByText } = render(<Footer />)
+    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

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

locales/en/home.json

@@ -50,5 +50,8 @@
         "image": "/images/portfolio/leon.png"
       }
     ]
+  },
+  "open-source": {
+    "description": "List of most famous open source projects I contributed to."
   }
 }

locales/fr/home.json

@@ -50,5 +50,8 @@
         "image": "/images/portfolio/leon.png"
       }
     ]
+  },
+  "open-source": {
+    "description": "Liste des projets open source les plus célèbres auxquels j'ai contribué."
   }
 }

package.json

@@ -24,10 +24,11 @@
     "lighthouse": "lhci autorun",
     "test": "jest",
     "release": "semantic-release",
+    "deploy": "vercel",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "4.4.5",
+    "@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",
@@ -35,29 +36,30 @@
     "classnames": "2.3.1",
     "html-react-parser": "1.2.7",
     "next": "11.0.1",
-    "next-pwa": "5.2.21",
+    "next-pwa": "5.2.24",
-    "next-themes": "0.0.14",
+    "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.4",
+    "@commitlint/cli": "13.1.0",
-    "@commitlint/config-conventional": "12.1.4",
+    "@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.23",
+    "@types/jest": "26.0.24",
-    "@types/node": "15.12.4",
+    "@types/node": "16.4.3",
-    "@types/react": "17.0.11",
+    "@types/react": "17.0.15",
-    "@types/styled-jsx": "2.2.8",
+    "@types/styled-jsx": "2.2.9",
-    "@typescript-eslint/eslint-plugin": "4.28.0",
+    "@typescript-eslint/eslint-plugin": "4.28.5",
-    "autoprefixer": "10.2.6",
+    "autoprefixer": "10.3.1",
-    "babel-jest": "27.0.5",
+    "babel-jest": "27.0.6",
     "dockerfilelint": "1.8.0",
     "editorconfig-checker": "4.0.2",
-    "eslint": "7.29.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",
@@ -65,14 +67,15 @@
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-promise": "5.1.0",
-    "husky": "6.0.0",
+    "husky": "7.0.1",
-    "jest": "27.0.5",
+    "jest": "27.0.6",
-    "lint-staged": "11.0.0",
+    "lint-staged": "11.1.1",
-    "markdownlint-cli": "0.27.1",
+    "markdownlint-cli": "0.28.1",
-    "postcss": "8.3.5",
+    "postcss": "8.3.6",
-    "prettier": "2.3.1",
+    "prettier": "2.3.2",
     "semantic-release": "17.4.4",
-    "tailwindcss": "2.2.4",
+    "tailwindcss": "2.2.7",
-    "typescript": "4.3.4"
+    "typescript": "4.3.5",
+    "vercel": "23.0.1"
   }
 }

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' />
-      <ErrorPage statusCode={404} message={t('errors:notFound')} />
+
+      <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 () => {
+export const getStaticProps: GetStaticProps<FooterProps> = async () => {
-  return { props: {} }
+  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' />
-      <ErrorPage statusCode={500} message={t('errors:serverError')} />
+
+      <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 () => {
+export const getStaticProps: GetStaticProps<FooterProps> = async () => {
-  return { props: {} }
+  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 />
+      <Component {...pageProps} />
-      <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,50 +10,69 @@ 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 />
 
-      <Section isMain id='about'>
+      <Header />
-        <Profile />
+      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
-        <SocialMediaList />
+        <Section isMain id='about'>
-      </Section>
+          <Profile />
-
+          <SocialMediaList />
-      <RevealFade>
-        <Section id='interests' heading={t('home:interests.title')}>
-          <Interests />
         </Section>
-      </RevealFade>
 
-      <RevealFade>
+        <RevealFade>
-        <Section
+          <Section id='interests' heading={t('home:interests.title')}>
-          id='skills'
+            <Interests />
-          heading={t('home:skills.title')}
+          </Section>
-          withoutShadowContainer
+        </RevealFade>
-        >
-          <Skills />
-        </Section>
-      </RevealFade>
 
-      <RevealFade>
+        <RevealFade>
-        <Section
+          <Section
-          id='portfolio'
+            id='skills'
-          heading={t('home:portfolio.title')}
+            heading={t('home:skills.title')}
-          withoutShadowContainer
+            withoutShadowContainer
-        >
+          >
-          <Portfolio />
+            <Skills />
-        </Section>
+          </Section>
-      </RevealFade>
+        </RevealFade>
+
+        <RevealFade>
+          <Section
+            id='portfolio'
+            heading={t('home:portfolio.title')}
+            withoutShadowContainer
+          >
+            <Portfolio />
+          </Section>
+        </RevealFade>
+
+        <RevealFade>
+          <Section
+            id='open-source'
+            heading='Open source'
+            withoutShadowContainer
+          >
+            <OpenSource />
+          </Section>
+        </RevealFade>
+      </main>
+      <Footer version={version} />
     </>
   )
 }
 
-export const getStaticProps: GetStaticProps = async () => {
+export const getStaticProps: GetStaticProps<FooterProps> = async () => {
-  return { props: {} }
+  const { version } = await readPackageJSON()
+  return { props: { version } }
 }
 
 export default Home

vercel.json

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