feat: add light mode + rewrite in Tailwind CSS (#15)

2024-12-08 00:44:30 +01:00 · 2021-05-08 19:52:04 +02:00 · 2021-05-08 19:52:04 +02:00 · c62e66a86a
commit c62e66a86a
parent 26f24329c7
83 changed files with 5803 additions and 7623 deletions
--- a/.babelrc.json
+++ b/.babelrc.json
@ -1,12 +1,3 @@
 {
-  "presets": [
-    [
-      "next/babel",
-      {
-        "styled-jsx": {
-          "plugins": ["@styled-jsx/plugin-sass"]
-        }
-      }
-    ]
-  ]
+  "presets": ["next/babel"]
 }
--- a/.env.example
+++ b/.env.example
@ -1,6 +1,2 @@
-COMPOSE_PROJECT_NAME=divlo.fr-website
+COMPOSE_PROJECT_NAME=divlo.fr
 PORT=3000
-EMAIL_HOST=divlo.fr-maildev
-EMAIL_USER=reply@divlo-website.fr
-EMAIL_PASSWORD=password
-EMAIL_PORT=25
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,6 @@
+.next
+.lighthouseci
+node_modules
+next-env.d.ts
+**/workbox-*.js
+**/sw.js
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,15 @@
+{
+  "extends": ["standard-with-typescript", "eslint-config-prettier"],
+  "plugins": ["eslint-plugin-prettier"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "env": {
+    "node": true,
+    "browser": true,
+    "jest": true
+  },
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -10,7 +10,7 @@ updates:
    schedule:
      interval: 'daily'

-  # - package-ecosystem: 'npm'
-  #   directory: '/'
-  #   schedule:
-  #     interval: 'daily'
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'daily'
--- a/.gitpod.yml
+++ b/.gitpod.yml
@ -1,21 +1,14 @@
 image: 'gitpod/workspace-full'

 tasks:
-  - name: 'docker-daemon'
-    init: 'cp .env.example .env && npm install --global npm@7 && npm ci'
-    command: 'sudo docker-up'
-  - name: 'docker-container'
-    init: 'echo "Waiting for docker daemon to start" &&
-      until docker info &> /dev/null; do sleep 1; done;'
-    command: 'docker-compose up'
+  - before: 'cp .env.example .env && npm install --global npm@7'
+    init: 'npm clean-install'
+    command: 'npm run dev'

 ports:
  - port: 3000
    onOpen: 'open-preview'

-  - port: 1080
-    onOpen: 'notify'
-
 github:
  prebuilds:
    master: true
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -1,7 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"

-npm run lint:docker
-npm run lint:editorconfig
-npm run lint:markdown
-npm run lint:typescript
+npm run lint:staged
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@ -0,0 +1,11 @@
+{
+  "*": ["editorconfig-checker"],
+  "*.{js,ts,jsx,tsx}": [
+    "prettier --write",
+    "eslint --fix",
+    "jest --findRelatedTests"
+  ],
+  "*.{css,yml,json}": ["prettier --write"],
+  "*.{md}": ["prettier --write", "markdownlint --dot --fix"],
+  "./Dockerfile": ["dockerfilelint"]
+}
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,8 @@
+.next
+.lighthouseci
+node_modules
+next-env.d.ts
+package.json
+package-lock.json
+**/workbox-*.js
+**/sw.js
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "trailingComma": "none"
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,12 +1,13 @@
 {
  "recommendations": [
+    "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
    "divlo.vscode-styled-jsx-syntax",
    "divlo.vscode-styled-jsx-languageserver",
-    "standard.vscode-standard",
+    "bradlc.vscode-tailwindcss",
    "mikestead.dotenv",
-    "editorconfig.editorconfig",
    "coenraads.bracket-pair-colorizer",
-    "davidanson.vscode-markdownlint",
-    "syler.sass-indented"
+    "davidanson.vscode-markdownlint"
  ]
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,8 +1,9 @@
 {
-  "standard.enable": true,
-  "standard.engine": "ts-standard",
-  "standard.treatErrorsAsWarnings": true,
-  "standard.usePackageJson": true,
-  "standard.autoFixOnSave": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.configPath": ".prettierrc.json",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  }
 }
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -72,4 +72,3 @@ docker-compose up --build
 ### Services started

 - website : `http://localhost:3000`
- [MailDev](https://maildev.github.io/maildev/) : `http://localhost:1080`
--- a/15
+++ b/15
@ -1,10 +1,11 @@
-FROM node:14.16.1
-RUN npm install --global npm@7
+FROM node:16.1.0

-WORKDIR /app
-
-COPY ./package*.json ./
+WORKDIR /usr/src/app
+RUN chown --recursive node:node /usr/src/app
+COPY --chown=node:node ./package*.json ./
 RUN npm install
-COPY ./ ./
+COPY --chown=node:node ./ ./

-CMD ["npm", "run", "dev", "--", "--port", "${PORT}"]
+USER node
+RUN npm run build
+CMD ["npm", "run", "start", "--", "--port", "${PORT}"]
--- a/test/pages/api/send-email.test.ts
+++ b/test/pages/api/send-email.test.ts
@ -1,70 +0,0 @@
-import { createMocks } from 'node-mocks-http'
-
-import handleSendEmail from 'pages/api/send-email'
-
-jest.mock('nodemailer', () => ({
-  createTransport: () => {
-    return {
-      sendMail: jest.fn(async () => {})
-    }
-  }
-}))
-
-describe('POST /api/send-email', () => {
-  it('succeeds and send the email', async () => {
-    const { req, res } = createMocks({
-      method: 'POST',
-      body: {
-        name: 'Divlo',
-        email: 'contact@divlo.fr',
-        subject: 'Subject',
-        message: 'Hello world!'
-      }
-    })
-    await handleSendEmail(req, res)
-    expect(res._getStatusCode()).toBe(201)
-    expect(JSON.parse(res._getData())).toEqual(
-      expect.objectContaining({
-        type: 'success'
-      })
-    )
-  })
-
-  it('fails with empty values', async () => {
-    const { req, res } = createMocks({
-      method: 'POST',
-      body: {
-        name: '',
-        email: '',
-        subject: '',
-        message: ''
-      }
-    })
-    await handleSendEmail(req, res)
-    expect(res._getStatusCode()).toBe(400)
-    expect(JSON.parse(res._getData())).toEqual(
-      expect.objectContaining({
-        type: 'requiredFields'
-      })
-    )
-  })
-
-  it('fails with invalid email', async () => {
-    const { req, res } = createMocks({
-      method: 'POST',
-      body: {
-        name: 'Name',
-        email: 'random wrong email',
-        subject: 'Subject',
-        message: 'Message'
-      }
-    })
-    await handleSendEmail(req, res)
-    expect(res._getStatusCode()).toBe(400)
-    expect(JSON.parse(res._getData())).toEqual(
-      expect.objectContaining({
-        type: 'invalidEmail'
-      })
-    )
-  })
-})
--- a/components/Contact/FormResult.tsx
+++ b/components/Contact/FormResult.tsx
@ -1,31 +0,0 @@
-import useTranslation from 'next-translate/useTranslation'
-
-import { FormState } from './FormState'
-import { ResultState } from './index'
-
-export interface FormResultProps {
-  state: ResultState
-}
-
-export const FormResult: React.FC<FormResultProps> = (props) => {
-  const { state } = props
-  const { t } = useTranslation()
-
-  if (state === 'idle') {
-    return null
-  }
-
-  if (state === 'loading' || state === 'success') {
-    return (
-      <FormState state={state}>
-        {t(`home:contact.result.${state}`)}
-      </FormState>
-    )
-  }
-
-  return (
-    <FormState state='error'>
-      {t(`home:contact.result.${state}`)}
-    </FormState>
-  )
-}
--- a/components/Contact/FormState.tsx
+++ b/components/Contact/FormState.tsx
@ -1,39 +0,0 @@
-import useTranslation from 'next-translate/useTranslation'
-
-export interface FormStateProps extends React.ComponentPropsWithRef<'p'> {
-  state: 'success' | 'error' | 'loading'
-  children: string
-}
-
-export const FormState: React.FC<FormStateProps> = props => {
-  const { state, children, ...rest } = props
-  const { t } = useTranslation()
-
-  return (
-    <>
-      <div className='form-result text-center'>
-        <p className={state} {...rest}>
-          {['error', 'success'].includes(state) && (
-            <b>
-              {state === 'error' ? t('home:contact.error') : t('home:contact.success')}:
-            </b>
-          )}{' '}
-          {children}
-        </p>
-      </div>
-
-      <style jsx>{`
-        .form-result {
-          margin: 30px;
-        }
-        .success {
-          color: #90ee90;
-        }
-        .error {
-          color: #ff7f7f;
-        }
-      `}
-      </style>
-    </>
-  )
-}
--- a/components/Contact/index.tsx
+++ b/components/Contact/index.tsx
@ -1,89 +0,0 @@
-import useTranslation from 'next-translate/useTranslation'
-import { useState } from 'react'
-import Form, { HandleForm } from 'react-component-form'
-import axios from 'axios'
-
-import { Input } from 'components/design/Input'
-import { Button } from 'components/design/Button'
-import { Textarea } from 'components/design/Textarea'
-import { FormResult } from './FormResult'
-
-export const resultState = [
-  'idle',
-  'success',
-  'loading',
-  'requiredFields',
-  'invalidEmail',
-  'serverError'
-] as const
-
-export type ResultState = typeof resultState[number]
-
-export const Contact: React.FC = () => {
-  const { t } = useTranslation()
-  const [state, setState] = useState<ResultState>('idle')
-
-  const handleSubmit: HandleForm = async (formData, formElement) => {
-    setState('loading')
-    try {
-      const { data } = await axios.post<{ type: ResultState }>(
-        '/api/send-email',
-        formData
-      )
-      if (data.type === 'success') {
-        setState('success')
-        return formElement.reset()
-      }
-      return setState('serverError')
-    } catch (error) {
-      const type = error.response.data.type
-      if (resultState.includes(type)) {
-        return setState(type)
-      }
-      return setState('serverError')
-    }
-  }
-
-  return (
-    <>
-      <div className='col-24'>
-        <Form onSubmit={handleSubmit}>
-          <Input
-            label={`${t('home:contact.nameField')} :`}
-            type='text'
-            name='name'
-            autoComplete='off'
-            required
-          />
-          <Input
-            label='Email :'
-            type='email'
-            name='email'
-            autoComplete='off'
-            required
-          />
-          <Input
-            label={`${t('home:contact.subjectField')} :`}
-            type='text'
-            name='subject'
-            autoComplete='off'
-            required
-          />
-
-          <Textarea
-            label='Message :'
-            name='message'
-            autoComplete='off'
-            required
-          />
-
-          <div className='text-center' style={{ marginBottom: 20 }}>
-            <Button type='submit'>{t('home:contact.sendEmail')}</Button>
-          </div>
-        </Form>
-
-        <FormResult state={state} />
-      </div>
-    </>
-  )
-}
--- a/components/ErrorPage.tsx
+++ b/components/ErrorPage.tsx
@ -6,32 +6,42 @@ export interface ErrorPageProps {
  message: string
 }

-export const ErrorPage: React.FC<ErrorPageProps> = props => {
+export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
  const { message, statusCode } = props
  const { t } = useTranslation()

  return (
    <>
-      <h1>
-        {t('errors:error')} <span className='important'>{statusCode}</span>
+      <h1 className='my-6 font-semibold text-4xl'>
+        {t('errors:error')}{' '}
+        <span className='text-yellow dark:text-yellow-dark'>{statusCode}</span>
      </h1>
-      <p className='text-center'>
-        {message} <Link href='/'>{t('errors:returnToHomePage')}</Link>
+      <p className='text-center text-lg'>
+        {message}{' '}
+        <Link href='/'>
+          <a className='text-yellow dark:text-yellow-dark hover:underline'>
+            {t('errors:returnToHomePage')}
+          </a>
+        </Link>
      </p>

-      <style jsx global>{`
-        .content {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          min-width: 100vw;
-          min-height: 100%;
-        }
-        #__next {
-          padding-top: 0;
-        }
-      `}
+      <style jsx global>
+        {`
+          main {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            min-width: 100vw;
+            flex: 1;
+          }
+          #__next {
+            display: flex;
+            flex-direction: column;
+            padding-top: 0;
+            height: 100vh;
+          }
+        `}
      </style>
    </>
  )
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@ -4,25 +4,11 @@ export const Footer: React.FC = () => {
  const { t } = useTranslation()

  return (
-    <>
-      <footer className='Footer text-center'>
-        <p>
-          <span className='important'>Divlo</span> | {t('common:allRightsReserved')}
-        </p>
-      </footer>
-
-      <style jsx>
-        {`
-          .Footer {
-            border-top: var(--border-header-footer);
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            padding: 10px;
-          }
-        `}
-      </style>
-    </>
+    <footer className='bg-white flex 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')}
+      </p>
+    </footer>
  )
 }
--- a/components/Head.tsx
+++ b/components/Head.tsx
@ -7,12 +7,12 @@ interface HeadProps {
  url?: string
 }

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

  return (
@ -21,7 +21,7 @@ export const Head: React.FC<HeadProps> = props => {
      <link rel='icon' type='image/png' href={image} />

      {/* Meta Tag */}
-      <meta name='viewport' content='width=device-width, initial-scale=1' />
+      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
      <meta name='description' content={description} />
      <meta name='Language' content='fr, en' />
      <meta name='theme-color' content='#ffd800' />
--- a/components/Header/Language/Arrow.tsx
+++ b/components/Header/Language/Arrow.tsx
@ -8,8 +8,8 @@ export const Arrow: React.FC = () => {
      xmlns='http://www.w3.org/2000/svg'
    >
      <path
+        className='fill-current text-black dark:text-white'
        d='M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z'
-        fill='#fff'
      />
    </svg>
  )
--- a/components/Header/Language/LanguageFlag.tsx
+++ b/components/Header/Language/LanguageFlag.tsx
@ -15,17 +15,7 @@ export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
        src={`/images/languages/${language}.svg`}
        alt={language}
      />
-      <p className='language-title'>{language.toUpperCase()}</p>
-
-      <style jsx>
-        {`
-          .language-title {
-            margin: 0 8px 0 10px;
-            font-size: 16px;
-            font-family: 'Arial', 'sans-serif';
-          }
-        `}
-      </style>
+      <p className='mx-2 text-base'>{language.toUpperCase()}</p>
    </>
  )
 }
--- a/components/Header/Language/index.tsx
+++ b/components/Header/Language/index.tsx
@ -32,74 +32,29 @@ export const Language: React.FC = () => {
  }

  return (
-    <>
-      <div className='language-menu'>
-        <div className='selected-language' onClick={handleHiddenMenu}>
-          <LanguageFlag language={currentLanguage} />
-          <Arrow />
-        </div>
-        {!hiddenMenu && (
-          <ul>
-            {locales.map((language, index) => {
-              if (language === currentLanguage) {
-                return null
-              }
-              return (
-                <li
-                  key={index}
-                  onClick={async () => await handleLanguage(language)}
-                >
-                  <LanguageFlag language={language} />
-                </li>
-              )
-            })}
-          </ul>
-        )}
+    <div className='flex flex-col justify-center items-center cursor-pointer'>
+      <div className='flex items-center mr-5' onClick={handleHiddenMenu}>
+        <LanguageFlag language={currentLanguage} />
+        <Arrow />
      </div>
-
-      <style jsx>
-        {`
-          .language-menu {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-          }
-          .selected-language {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-          }
-          ul {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            position: absolute;
-            top: 60px;
-            width: 100px;
-            padding: 10px;
-            margin: 10px 15px 0 0px;
-            border-radius: 15%;
-            padding: 0;
-            box-shadow: 0px 1px 10px var(--color-shadow);
-            background-color: var(--color-background-primary);
-            z-index: 10;
-          }
-          ul > li {
-            list-style: none;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 50px;
-            width: 100%;
-          }
-          ul > li:hover {
-            background-color: rgba(79, 84, 92, 0.16);
-          }
-        `}
-      </style>
-    </>
+      {!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) => {
+            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>
  )
 }
--- a/components/Header/SwitchTheme.tsx
+++ b/components/Header/SwitchTheme.tsx
@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+
+export const SwitchTheme: React.FC = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  return (
+    <>
+      <div
+        className='toggle-button'
+        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      >
+        <div className='toggle-theme-button'>
+          <div className='toggle-track'>
+            <div className='toggle-track-check'>
+              <span className='toggle_Dark'>🌜</span>
+            </div>
+            <div className='toggle-track-x'>
+              <span className='toggle_Light'>🌞</span>
+            </div>
+          </div>
+          <div className='toggle-thumb' />
+          <input
+            type='checkbox'
+            aria-label='Dark mode toggle'
+            className='toggle-screenreader-only'
+            defaultChecked
+          />
+        </div>
+      </div>
+
+      <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;
+          }
+          .toggle-track {
+            width: 50px;
+            height: 24px;
+            padding: 0;
+            border-radius: 30px;
+            background-color: #4d4d4d;
+            transition: all 0.2s ease;
+            color: #fff;
+          }
+          .toggle-track-check {
+            position: absolute;
+            width: 14px;
+            height: 10px;
+            top: 0;
+            bottom: 0;
+            margin-top: auto;
+            margin-bottom: auto;
+            line-height: 0;
+            left: 8px;
+            opacity: ${theme === 'dark' ? 1 : 0};
+            transition: opacity 0.25s ease;
+          }
+          .toggle-track-x {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            top: 0;
+            bottom: 0;
+            margin-top: auto;
+            margin-bottom: auto;
+            line-height: 0;
+            right: 10px;
+            opacity: ${theme === 'dark' ? 0 : 1};
+          }
+          .toggle_Dark,
+          .toggle_Light {
+            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;
+            border: 1px solid #4d4d4d;
+            border-radius: 50%;
+            background-color: #fafafa;
+            box-sizing: border-box;
+            transition: all 0.25s ease;
+            top: 1px;
+            color: #fff;
+          }
+          .toggle-screenreader-only {
+            border: 0;
+            clip: rect(0 0 0 0);
+            height: 1px;
+            margin: -1px;
+            overflow: hidden;
+            padding: 0;
+            position: absolute;
+            width: 1px;
+          }
+        `}
+      </style>
+    </>
+  )
+}
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@ -2,87 +2,30 @@ import Link from 'next/link'
 import Image from 'next/image'

 import { Language } from './Language'
+import { SwitchTheme } from './SwitchTheme'

 export const Header: React.FC = () => {
  return (
-    <>
-      <header className='header'>
-        <div className='container'>
-          <nav className='navbar navbar-fixed-top'>
-            <Link href='/'>
-              <a className='navbar__brand-link'>
-                <div className='navbar__brand'>
-                  <Image
-                    width={60}
-                    height={60}
-                    src='/images/divlo_icon_small.png'
-                    alt='Divlo'
-                  />
-                  <strong className='navbar__brand-title'>Divlo</strong>
-                </div>
-              </a>
-            </Link>
-            <div className='navbar__buttons'>
-              <Language />
-            </div>
-          </nav>
-        </div>
-      </header>
-
-      <style jsx>
-        {`
-          .header {
-            background-color: var(--color-background);
-            border-bottom: var(--border-header-footer);
-            padding: 0.5rem 1rem;
-            position: fixed;
-            width: 100%;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: 100;
-            height: var(--header-height);
-          }
-          .container {
-            max-width: 1280px;
-            width: 100%;
-            margin: auto;
-          }
-          .navbar {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-          }
-          .navbar-fixed-top {
-            position: sticky;
-            top: 0;
-            z-index: 200;
-          }
-          .navbar__brand-link {
-            color: var(--color-text-1);
-            text-decoration: none;
-            font-size: 16px;
-          }
-          .navbar__brand {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-          }
-          .navbar__brand-title {
-            font-weight: 600;
-            margin-left: 10px;
-          }
-          .navbar__buttons {
-            display: flex;
-            justify-content: space-between;
-          }
-          @media (max-width: 320px) {
-            .navbar__brand-title {
-              display: none;
-            }
-          }
-        `}
-      </style>
-    </>
+    <header className='bg-white sticky top-0 z-50 flex w-full justify-between px-6 py-2 border-b-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
+      <Link href='/'>
+        <a>
+          <div className='flex items-center justify-center'>
+            <Image
+              width={60}
+              height={60}
+              src='/images/divlo_icon_small.png'
+              alt='Divlo'
+            />
+            <strong className='ml-1 font-headline font-semibold hidden xs:block'>
+              Divlo
+            </strong>
+          </div>
+        </a>
+      </Link>
+      <div className='flex justify-between'>
+        <Language />
+        <SwitchTheme />
+      </div>
+    </header>
  )
 }
--- a/components/Interests/InterestParagraph.tsx
+++ b/components/Interests/InterestParagraph.tsx
@ -10,8 +10,10 @@ export const InterestParagraph: React.FC<InterestParagraphProps> = (props) => {

  return (
    <>
-      <p className='text-center'>
-        <strong className='important'>{title}</strong>
+      <p className='text-center my-6 text-gray dark:text-gray-dark'>
+        <strong className='text-yellow font-medium text-lg dark:text-yellow-dark'>
+          {title}
+        </strong>
        <br />
        <span className='paragraph-color'>{htmlParser(description)}</span>
      </p>
--- a/components/Interests/InterestsList/InterestItem.tsx
+++ b/components/Interests/InterestsList/InterestItem.tsx
@ -1,41 +1,20 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
-import { Tooltip } from 'components/design/Tooltip'

 interface InterestItemProps {
  title: string
  fontAwesomeIcon: IconDefinition
 }

-export const InterestItem: React.FC<InterestItemProps> = props => {
+export const InterestItem: React.FC<InterestItemProps> = (props) => {
  const { fontAwesomeIcon, title } = props

  return (
-    <>
-      <li className='interest-item'>
-        <Tooltip title={title}>
-          <FontAwesomeIcon
-            className='color-primary'
-            style={{
-              cursor: 'pointer',
-              height: '100%',
-              width: '100%',
-              display: 'block'
-            }}
-            icon={fontAwesomeIcon}
-          />
-        </Tooltip>
-      </li>
-
-      <style jsx>
-        {`
-          .interest-item {
-            margin: 7px 5px;
-            width: 34px;
-            height: 34px;
-          }
-        `}
-      </style>
-    </>
+    <li className='interest-item my-2 mx-2 w-8 h-8' title={title}>
+      <FontAwesomeIcon
+        className='text-yellow cursor-pointer h-full w-full block dark:text-yellow-dark'
+        icon={fontAwesomeIcon}
+      />
+    </li>
  )
 }
--- a/components/Interests/InterestsList/index.tsx
+++ b/components/Interests/InterestsList/index.tsx
@ -5,41 +5,18 @@ import { InterestItem } from './InterestItem'

 export const InterestsList: React.FC = () => {
  return (
-    <>
-      <div className='container-list'>
-        <ul className='interests-list'>
-          <InterestItem
-            title='Developer Full Stack Junior'
-            fontAwesomeIcon={faCode}
-          />
-          <InterestItem
-            title='Passionate about High-Tech'
-            fontAwesomeIcon={faMicrochip}
-          />
-          <InterestItem
-            title='Open-Source enthusiast'
-            fontAwesomeIcon={faGit}
-          />
-        </ul>
-      </div>
-
-      <style jsx>
-        {`
-          .container-list {
-            display: flex;
-            justify-content: center;
-            margin: 15px 0 15px 0;
-          }
-          .interests-list {
-            display: flex;
-            justify-content: space-around;
-            padding: 0;
-            margin: 0;
-            width: 60%;
-            list-style: none;
-          }
-        `}
-      </style>
-    </>
+    <div className='flex justify-center my-4'>
+      <ul className='flex justify-around p-0 m-0 list-none w-96'>
+        <InterestItem
+          title='Developer Full Stack Junior'
+          fontAwesomeIcon={faCode}
+        />
+        <InterestItem
+          title='Passionate about High-Tech'
+          fontAwesomeIcon={faMicrochip}
+        />
+        <InterestItem title='Open-Source enthusiast' fontAwesomeIcon={faGit} />
+      </ul>
+    </div>
  )
 }
--- a/components/Interests/index.tsx
+++ b/components/Interests/index.tsx
@ -6,13 +6,17 @@ import { InterestsList } from './InterestsList'
 export const Interests: React.FC = () => {
  const { t } = useTranslation()

-  const paragraphs: InterestParagraphProps[] = t('home:interests.paragraphs', {}, {
-    returnObjects: true
-  })
+  const paragraphs: InterestParagraphProps[] = t(
+    'home:interests.paragraphs',
+    {},
+    {
+      returnObjects: true
+    }
+  )

  return (
    <>
-      <div className='col-24'>
+      <div className='max-w-full'>
        {paragraphs.map((paragraph, index) => {
          return <InterestParagraph key={index} {...paragraph} />
        })}
--- a/components/Portfolio/PortfolioItem.tsx
+++ b/components/Portfolio/PortfolioItem.tsx
@ -1,3 +1,4 @@
+import { ShadowContainer } from 'components/design/ShadowContainer'
 import Image from 'next/image'

 export interface PortfolioItemProps {
@ -7,96 +8,34 @@ export interface PortfolioItemProps {
  image: string
 }

-export const PortfolioItem: React.FC<PortfolioItemProps> = props => {
+export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
  const { title, description, link, image } = props

  return (
-    <>
-      <div className='col-sm-24 col-md-10 col-xl-7 portfolio-grid'>
-        <a
-          className='portfolio-link'
-          target='_blank'
-          rel='noopener noreferrer'
-          href={link}
-          aria-label={title}
-        >
-          <div className='portfolio-figure'>
-            <Image width={300} height={300} src={image} alt={title} />
-          </div>
-          <div className='portfolio-caption'>
-            <h3 className='portfolio-title important'>{title}</h3>
-            <p className='portfolio-description'>{description}</p>
-          </div>
-        </a>
-      </div>
-
-      <style jsx global>
-        {`
-        .portfolio-figure img[alt='${title}'] {
-          max-height: 300px;
-          max-width: 300px;
-          transition: opacity 0.5s ease;
-        }
-        .portfolio-grid:hover img[alt='${title}'] {
-          opacity: 0.05;
-        }
-      `}
-      </style>
-
-      <style jsx>
-        {`
-          .portfolio-grid {
-            display: flex;
-            align-items: center;
-            position: relative;
-            flex-direction: column;
-            word-wrap: break-word;
-            box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
-            border: 1px solid black;
-            border-radius: 1rem;
-            margin: 0 0 50px 0;
-            cursor: pointer;
-          }
-          /* col-md */
-          @media (min-width: 768px) {
-            .portfolio-grid {
-              margin: 0 30px 50px 30px;
-            }
-          }
-          /* col-xl */
-          @media (min-width: 1200px) {
-            .portfolio-grid {
-              margin: 0 20px 50px 20px;
-            }
-          }
-          .portfolio-figure {
-            display: flex;
-            justify-content: center;
-          }
-          .portfolio-caption {
-            transition: opacity 0.5s ease;
-            opacity: 0;
-            height: 0;
-            overflow: hidden;
-          }
-          .portfolio-description {
-            font-size: 16px;
-          }
-          .portfolio-grid:hover .portfolio-caption {
-            opacity: 1;
-            height: auto;
-            position: absolute;
-            bottom: 0;
-            text-align: center;
-            width: 80%;
-          }
-          .portfolio-grid:hover .portfolio-link {
-            color: var(--text-color);
-            display: flex;
-            justify-content: center;
-          }
-        `}
-      </style>
-    </>
+    <ShadowContainer className='cursor-pointer relative items-center sm:ml-10'>
+      <a
+        className='group inline-flex justify-center'
+        target='_blank'
+        rel='noopener noreferrer'
+        href={link}
+        aria-label={title}
+      >
+        <div className='flex justify-center'>
+          <Image
+            className='transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5'
+            width={300}
+            height={300}
+            src={image}
+            alt={title}
+          />
+        </div>
+        <div className='opacity-0 transition-opacity duration-500 h-auto absolute text-center overflow-hidden bottom-0 group-hover:opacity-100'>
+          <h3 className='text-yellow text-xl font-semibold my-6 dark:text-yellow-dark'>
+            {title}
+          </h3>
+          <p className='my-6'>{description}</p>
+        </div>
+      </a>
+    </ShadowContainer>
  )
 }
--- a/components/Portfolio/index.tsx
+++ b/components/Portfolio/index.tsx
@ -5,19 +5,19 @@ import { PortfolioItem, PortfolioItemProps } from './PortfolioItem'
 export const Portfolio: React.FC = () => {
  const { t } = useTranslation('home')

-  const items: PortfolioItemProps[] = t('home:portfolio.items', {}, {
-    returnObjects: true
-  })
+  const items: PortfolioItemProps[] = t(
+    'home:portfolio.items',
+    {},
+    {
+      returnObjects: true
+    }
+  )

  return (
-    <>
-      <div className='container-fluid'>
-        <div className='row justify-content-center'>
-          {items.map((item, index) => {
-            return <PortfolioItem key={index} {...item} />
-          })}
-        </div>
-      </div>
-    </>
+    <div className='flex flex-wrap justify-center px-3 w-full'>
+      {items.map((item, index) => {
+        return <PortfolioItem key={index} {...item} />
+      })}
+    </div>
  )
 }
--- a/components/Profile/ProfileDescriptionBottom.tsx
+++ b/components/Profile/ProfileDescriptionBottom.tsx
@ -2,27 +2,11 @@ import Translation from 'next-translate/Trans'

 export const ProfileDescriptionBottom: React.FC = () => {
  return (
-    <>
-      <p className='profile-description-bottom'>
-        <Translation
-          i18nKey='home:about.descriptionBottom'
-          components={[<br key='break' />]}
-        />
-      </p>
-
-      <style jsx>
-        {`
-          .profile-description-bottom {
-            font-size: 16px;
-            display: block;
-            font-weight: 400;
-            line-height: 25px;
-            color: #b2bac2;
-            margin-top: 30px;
-            margin-bottom: 0;
-          }
-        `}
-      </style>
-    </>
+    <p className='block mt-8 mb-0 font-normal text-base text-gray dark:text-gray-dark'>
+      <Translation
+        i18nKey='home:about.descriptionBottom'
+        components={[<br key='break' />]}
+      />
+    </p>
  )
 }
--- a/components/Profile/ProfileInfo.tsx
+++ b/components/Profile/ProfileInfo.tsx
@ -5,11 +5,14 @@ export const ProfileInfo: React.FC = () => {

  return (
    <>
-      <div className='profile-info'>
-        <h1 className='profile-title'>
-          {t('home:about.IAm')} <strong className='important'>Divlo</strong>
+      <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='profile-description'>{t('home:about.description')}</h2>
+        <h2 className='text-base mb-3'>{t('home:about.description')}</h2>
      </div>

      <style jsx>
--- a/components/Profile/ProfileList/ProfileItem.tsx
+++ b/components/Profile/ProfileList/ProfileItem.tsx
@ -4,16 +4,18 @@ interface ProfileItemProps {
  link?: string
 }

-export const ProfileItem: React.FC<ProfileItemProps> = props => {
+export const ProfileItem: React.FC<ProfileItemProps> = (props) => {
  const { title, value, link } = props

  return (
    <>
      <li className='profile-list__item'>
-        <strong className='profile-list__item-title'>{title}</strong>
-        <span className='profile-list__item-info'>
+        <strong className='profile-list__item-title text-black dark:text-white'>
+          {title}
+        </strong>
+        <span className='profile-list__item-info text-gray dark:text-gray-dark'>
          {link != null ? (
-            <a className='profile-list__link' href={link}>
+            <a className='text-gray dark:text-gray-dark' href={link}>
              {value}
            </a>
          ) : (
@ -39,7 +41,6 @@ export const ProfileItem: React.FC<ProfileItemProps> = props => {
            display: block;
            width: 120px;
            float: left;
-            color: #d4d4d5;
            font-size: 12px;
            font-weight: 700;
            line-height: 20px;
@ -51,10 +52,6 @@ export const ProfileItem: React.FC<ProfileItemProps> = props => {
            font-size: 15px;
            font-weight: 400;
            line-height: 20px;
-            color: #84898e;
-          }
-          .profile-list__link {
-            color: #84898e;
          }

          @media (max-width: 576px) {
--- a/components/Profile/ProfileList/index.tsx
+++ b/components/Profile/ProfileList/index.tsx
@ -6,32 +6,14 @@ export const ProfileList: React.FC = () => {
  const { t } = useTranslation('home')

  return (
-    <>
-      <ul className='profile-list'>
-        <ProfileItem
-          title={t('home:about.birthDate')}
-          value='31/03/2003'
-        />
-        <ProfileItem
-          title={t('home:about.nationality')}
-          value='Alsace, France'
-        />
-        <ProfileItem
-          title='Email'
-          value='contact@divlo.fr'
-          link='mailto:contact@divlo.fr'
-        />
-      </ul>
-
-      <style jsx>
-        {`
-          .profile-list {
-            margin: 0;
-            padding: 0;
-            list-style: none;
-          }
-        `}
-      </style>
-    </>
+    <ul className='m-0 p-0 list-none'>
+      <ProfileItem title={t('home:about.birthDate')} value='31/03/2003' />
+      <ProfileItem title={t('home:about.nationality')} value='Alsace, France' />
+      <ProfileItem
+        title='Email'
+        value='contact@divlo.fr'
+        link='mailto:contact@divlo.fr'
+      />
+    </ul>
  )
 }
--- a/components/Profile/ProfileLogo.tsx
+++ b/components/Profile/ProfileLogo.tsx
@ -2,25 +2,13 @@ import Image from 'next/image'

 export const ProfileLogo: React.FC = () => {
  return (
-    <>
-      <div className='col-sm-24 col-md-10'>
-        <div className='profile-logo'>
-          <Image
-            width={800}
-            height={800}
-            src='/images/divlo_logo.png'
-            alt='Divlo'
-          />
-        </div>
-      </div>
-
-      <style jsx>{`
-        .profile-logo {
-          margin-right: 10px;
-          margin-left: 10px;
-        }
-      `}
-      </style>
-    </>
+    <div className='px-2 py-6'>
+      <Image
+        width={370}
+        height={370}
+        src='/images/divlo_logo.png'
+        alt='Divlo'
+      />
+    </div>
  )
 }
--- a/components/Profile/SocialMediaList/SocialMediaIcons/EmailIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/EmailIcon.tsx
@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const EmailIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <Icon {...props}>
+      <title>Email</title>
+      <path d='M15.61 12c0 1.99-1.62 3.61-3.61 3.61-1.99 0-3.61-1.62-3.61-3.61 0-1.99 1.62-3.61 3.61-3.61 1.99 0 3.61 1.62 3.61 3.61M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c2.424 0 4.761-.722 6.76-2.087l.034-.024-1.617-1.879-.027.017A9.494 9.494 0 0112 21.54c-5.26 0-9.54-4.28-9.54-9.54 0-5.26 4.28-9.54 9.54-9.54 5.26 0 9.54 4.28 9.54 9.54a9.63 9.63 0 01-.225 2.05c-.301 1.239-1.169 1.618-1.82 1.568-.654-.053-1.42-.52-1.426-1.661V12A6.076 6.076 0 0012 5.93 6.076 6.076 0 005.93 12 6.076 6.076 0 0012 18.07a6.02 6.02 0 004.3-1.792 3.9 3.9 0 003.32 1.805c.874 0 1.74-.292 2.437-.821.719-.547 1.256-1.336 1.553-2.285.047-.154.135-.504.135-.507l.002-.013c.175-.76.253-1.52.253-2.457 0-6.617-5.383-12-12-12' />
+    </Icon>
+  )
+}
--- a/components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx
@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const GitHubIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <Icon {...props}>
+      <title>GitHub</title>
+      <path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12' />
+    </Icon>
+  )
+}
--- a/components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx
@ -0,0 +1,14 @@
+export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  const { children, ...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'
+      {...rest}
+    >
+      {children}
+    </svg>
+  )
+}
--- a/components/Profile/SocialMediaList/SocialMediaIcons/TwitchIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/TwitchIcon.tsx
@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const TwitchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <Icon {...props}>
+      <title>Twitch</title>
+      <path d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z' />
+    </Icon>
+  )
+}
--- a/components/Profile/SocialMediaList/SocialMediaIcons/TwitterIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/TwitterIcon.tsx
@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <Icon {...props}>
+      <title>Twitter</title>
+      <path d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z' />
+    </Icon>
+  )
+}
--- a/components/Profile/SocialMediaList/SocialMediaIcons/YouTubeIcon.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaIcons/YouTubeIcon.tsx
@ -0,0 +1,10 @@
+import { Icon } from './Icon'
+
+export const YouTubeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <Icon {...props}>
+      <title>YouTube</title>
+      <path d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' />
+    </Icon>
+  )
+}
--- a/components/Profile/SocialMediaList/SocialMediaItem.tsx
+++ b/components/Profile/SocialMediaList/SocialMediaItem.tsx
@ -1,50 +1,22 @@
-import { Tooltip } from 'components/design/Tooltip'
-import Image from 'next/image'
-
 interface SocialMediaItemProps {
  link: string
-  socialMedia: 'Email' | 'GitHub' | 'Twitch' | 'Twitter' | 'YouTube'
+  ariaLabel: string
 }

-export const SocialMediaItem: React.FC<SocialMediaItemProps> = props => {
-  const { link, socialMedia } = props
+export const SocialMediaItem: React.FC<SocialMediaItemProps> = (props) => {
+  const { link, ariaLabel, children } = props

  return (
-    <>
-      <li className='social-media-list__item'>
-        <a
-          href={link}
-          aria-label={socialMedia}
-          target='_blank'
-          rel='noopener noreferrer'
-          className='social-media-list__link'
-        >
-          <Tooltip title={socialMedia}>
-            <Image
-              width={45}
-              height={45}
-              alt={socialMedia}
-              src={`/images/web/${socialMedia}.png`}
-            />
-          </Tooltip>
-        </a>
-      </li>
-
-      <style jsx>
-        {`
-          .social-media-list__item {
-            display: inline-block;
-            margin: 5px 15px;
-          }
-          .social-media-list__link {
-            width: 45px;
-            height: 45px;
-            position: relative;
-            display: inline-block;
-            background-color: transparent;
-          }
-        `}
-      </style>
-    </>
+    <li className='inline-block mx-4 my-1'>
+      <a
+        href={link}
+        aria-label={ariaLabel}
+        target='_blank'
+        rel='noopener noreferrer'
+        className='relative inline-block bg-transparent'
+      >
+        {children}
+      </a>
+    </li>
  )
 }
--- a/components/Profile/SocialMediaList/index.tsx
+++ b/components/Profile/SocialMediaList/index.tsx
@ -1,41 +1,31 @@
 import { SocialMediaItem } from './SocialMediaItem'
+import { TwitterIcon } from './SocialMediaIcons/TwitterIcon'
+import { GitHubIcon } from './SocialMediaIcons/GitHubIcon'
+import { YouTubeIcon } from './SocialMediaIcons/YouTubeIcon'
+import { TwitchIcon } from './SocialMediaIcons/TwitchIcon'
+import { EmailIcon } from './SocialMediaIcons/EmailIcon'

 export const SocialMediaList: React.FC = () => {
  return (
-    <>
-      <div className='row justify-content-center'>
-        <ul className='social-media-list'>
-          <SocialMediaItem
-            socialMedia='Twitter'
-            link='https://twitter.com/Divlo_FR'
-          />
-          <SocialMediaItem
-            socialMedia='GitHub'
-            link='https://github.com/Divlo'
-          />
-          <SocialMediaItem
-            socialMedia='YouTube'
-            link='https://www.youtube.com/c/Divlo'
-          />
-          <SocialMediaItem
-            socialMedia='Twitch'
-            link='https://www.twitch.tv/divlo'
-          />
-          <SocialMediaItem socialMedia='Email' link='mailto:contact@divlo.fr' />
-        </ul>
-      </div>
-
-      <style jsx>{`
-        .social-media-list {
-          margin: 0;
-          padding: 0;
-          list-style: none;
-          text-align: center;
-          padding: 15px 0;
-          margin-top: 10px;
-        }
-      `}
-      </style>
-    </>
+    <ul className='social-media-list m-0 p-0 list-none text-center mt-2 px-0 py-4'>
+      <SocialMediaItem link='https://twitter.com/Divlo_FR' ariaLabel='Twitter'>
+        <TwitterIcon />
+      </SocialMediaItem>
+      <SocialMediaItem link='https://github.com/Divlo' ariaLabel='GitHub'>
+        <GitHubIcon />
+      </SocialMediaItem>
+      <SocialMediaItem
+        link='https://www.youtube.com/c/Divlo'
+        ariaLabel='YouTube'
+      >
+        <YouTubeIcon />
+      </SocialMediaItem>
+      <SocialMediaItem link='https://www.twitch.tv/divlo' ariaLabel='Twitch'>
+        <TwitchIcon />
+      </SocialMediaItem>
+      <SocialMediaItem link='mailto:contact@divlo.fr' ariaLabel='Email'>
+        <EmailIcon />
+      </SocialMediaItem>
+    </ul>
  )
 }
--- a/components/Profile/index.tsx
+++ b/components/Profile/index.tsx
@ -5,29 +5,13 @@ import { ProfileLogo } from './ProfileLogo'

 export const Profile: React.FC = () => {
  return (
-    <>
-      <div className='row profile'>
-        <ProfileLogo />
-        <div className='col-sm-24 col-md-14'>
-          <ProfileInfo />
-          <ProfileList />
-          <ProfileDescriptionBottom />
-        </div>
+    <div className='flex flex-col justify-center items-center px-10 pt-2 pb-6 md:pt-10 xl:pt-0 md:flex-row'>
+      <ProfileLogo />
+      <div className='col-sm-24 col-md-14'>
+        <ProfileInfo />
+        <ProfileList />
+        <ProfileDescriptionBottom />
      </div>
-
-      <style jsx>
-        {`
-          .profile {
-            padding: 40px 50px 15px 50px;
-          }
-
-          @media (max-width: 576px) {
-            .profile {
-              padding: 40px 10px 0 10px;
-            }
-          }
-        `}
-      </style>
-    </>
+    </div>
  )
 }
--- a/components/Skills/Skill.tsx
+++ b/components/Skills/Skill.tsx
@ -6,39 +6,21 @@ export interface SkillProps {
  skill: keyof typeof skills
 }

-export const Skill: React.FC<SkillProps> = props => {
+export const Skill: React.FC<SkillProps> = (props) => {
  const { skill } = props
  const skillProperties = skills[skill]

  return (
-    <>
-      <a
-        href={skillProperties.link}
-        className='skills-link'
-        target='_blank'
-        rel='noopener noreferrer'
-      >
-        <div className='skills-content text-center'>
-          <Image
-            width={60}
-            height={60}
-            alt={skill}
-            src={skillProperties.image}
-          />
-          <p className='skills-text'>{skill}</p>
-        </div>
-      </a>
-
-      <style jsx>{`
-        .skills-link {
-          max-width: 120px;
-          margin: 0px 10px 0 10px;
-        }
-        .skills-text {
-          margin-top: 5px;
-        }
-      `}
-      </style>
-    </>
+    <a
+      href={skillProperties.link}
+      className='mx-2 max-w-xl text-yellow hover:underline dark:text-yellow-dark'
+      target='_blank'
+      rel='noopener noreferrer'
+    >
+      <div className='text-center'>
+        <Image width={60} height={60} alt={skill} src={skillProperties.image} />
+        <p className='mt-1'>{skill}</p>
+      </div>
+    </a>
  )
 }
--- a/components/Skills/SkillsSection.tsx
+++ b/components/Skills/SkillsSection.tsx
@ -5,40 +5,23 @@ export interface SkillsSectionProps {
  children: React.ReactNode
 }

-export const SkillsSection: React.FC<SkillsSectionProps> = props => {
+export const SkillsSection: React.FC<SkillsSectionProps> = (props) => {
  const { title, children } = props

  return (
-    <>
-      <ShadowContainer>
-        <div className='container-fluid'>
-          <div className='row row-padding'>
-            <div className='col-24'>
-              <div className='skills-header'>
-                <h3 className='important'>{title}</h3>
-              </div>
-              <div className='skills-body'>{children}</div>
+    <ShadowContainer>
+      <div className='w-full px-4 mx-auto'>
+        <div className='flex flex-wrap px-4 py-6'>
+          <div className='flex-1'>
+            <div className='mb-8 border-b border-gray-600 dark:border-opacity-10 dark:border-white'>
+              <h3 className='text-yellow font-semibold text-xl my-3 dark:text-yellow-dark'>
+                {title}
+              </h3>
            </div>
+            <div className='flex justify-around flex-wrap'>{children}</div>
          </div>
        </div>
-      </ShadowContainer>
-
-      <style jsx>{`
-        .skills-header {
-          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-          margin-bottom: 15px;
-        }
-        .skills-header > h3 {
-          margin-bottom: 15px;
-        }
-        .skills-body {
-          display: flex;
-          justify-content: space-around;
-          flex-flow: row wrap;
-          padding-top: 1.5rem;
-        }
-      `}
-      </style>
-    </>
+      </div>
+    </ShadowContainer>
  )
 }
--- a/components/design/Button.tsx
+++ b/components/design/Button.tsx
@ -1,43 +0,0 @@
-import { forwardRef } from 'react'
-
-type ButtonProps = React.ComponentPropsWithRef<'button'>
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const { children, ...rest } = props
-
-    return (
-      <>
-        <button ref={ref} {...rest} className='btn btn-dark'>
-          {children}
-        </button>
-
-        <style jsx>
-          {`
-            .btn {
-              cursor: pointer;
-              border: 1px solid transparent;
-              padding: 0.375rem 0.75rem;
-              font-size: 1rem;
-              line-height: 1.5;
-              border-radius: 0.25rem;
-              transition: color 0.15s ease-in-out,
-                background-color 0.15s ease-in-out,
-                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-            }
-            .btn-dark {
-              color: #fff;
-              background-color: #343a40;
-              border-color: #343a40;
-            }
-            .btn-dark:hover {
-              color: #fff;
-              background-color: #23272b;
-              border-color: #1d2124;
-            }
-          `}
-        </style>
-      </>
-    )
-  }
-)
--- a/components/design/Input.tsx
+++ b/components/design/Input.tsx
@ -1,75 +0,0 @@
-import { forwardRef } from 'react'
-
-interface InputProps extends React.HTMLProps<HTMLInputElement> {
-  label: string
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const { label, name, ...rest } = props
-
-  return (
-    <>
-      <div className='form-group-animation'>
-        <input ref={ref} {...rest} id={name} name={name} />
-        <label htmlFor={name} className='label'>
-          <span className='label-content'>{label}</span>
-        </label>
-      </div>
-
-      <style jsx>{`
-        .form-group-animation {
-          position: relative;
-          margin-top: 10px;
-          margin-bottom: 30px;
-          overflow: hidden;
-        }
-        .form-group-animation input {
-          width: 100%;
-          height: 100%;
-          padding-top: 35px;
-          color: var(--color-text-1);
-          border: none;
-          background: transparent;
-          outline: none;
-        }
-        .form-group-animation label {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          border-bottom: 1px solid #fff;
-        }
-        .form-group-animation label::after {
-          content: '';
-          position: absolute;
-          left: 0;
-          bottom: -1px;
-          height: 100%;
-          width: 100%;
-          border-bottom: 3px solid var(--color-primary);
-          transform: translateX(-100%);
-          transition: transform 0.2s ease;
-        }
-        .label-content {
-          position: absolute;
-          bottom: 5px;
-          left: 0px;
-          transition: all 0.3s ease;
-        }
-        .form-group-animation input:focus + .label .label-content,
-        .form-group-animation input:valid + .label .label-content {
-          transform: translateY(-150%);
-          font-size: 14px;
-          color: var(--color-primary);
-        }
-        .form-group-animation input:focus + .label::after,
-        .form-group-animation input:valid + .label::after {
-          transform: translateX(0%);
-        }
-      `}
-      </style>
-    </>
-  )
-})
--- a/components/design/RevealFade.tsx
+++ b/components/design/RevealFade.tsx
@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'

-export const RevealFade: React.FC = props => {
+export const RevealFade: React.FC = (props) => {
  const { children } = props

  const htmlElement = useRef<HTMLDivElement>(null)
@ -8,7 +8,7 @@ export const RevealFade: React.FC = props => {
  useEffect(() => {
    const observer = new window.IntersectionObserver(
      (entries, observer) => {
-        entries.forEach(entry => {
+        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('reveal-visible')
            observer.unobserve(entry.target)
@ -30,19 +30,20 @@ export const RevealFade: React.FC = props => {
        {children}
      </div>

-      <style jsx>{`
-        .reveal {
-          opacity: 0;
-          visibility: hidden;
-          transform: translateY(-30px);
-        }
-        .reveal-visible {
-          opacity: 1;
-          visibility: visible;
-          transform: translateY(0);
-          transition: all 500ms ease-out 100ms;
-        }
-      `}
+      <style jsx>
+        {`
+          .reveal {
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-30px);
+          }
+          .reveal-visible {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+            transition: all 500ms ease-out 100ms;
+          }
+        `}
      </style>
    </>
  )
--- a/components/design/Section/SectionHeading.tsx
+++ b/components/design/Section/SectionHeading.tsx
@ -3,26 +3,18 @@ import { forwardRef } from 'react'
 type SectionHeadingProps = React.ComponentPropsWithRef<'h2'>

 export const SectionHeading = forwardRef<
-HTMLHeadingElement,
-SectionHeadingProps
+  HTMLHeadingElement,
+  SectionHeadingProps
 >((props, ref) => {
  const { children, ...rest } = props

  return (
-    <>
-      <h2 ref={ref} {...rest} className='Section__title'>
-        {children}
-      </h2>
-
-      <style jsx>
-        {`
-          .Section__title {
-            font-size: 34px;
-            margin-top: 10px;
-            text-align: center;
-          }
-        `}
-      </style>
-    </>
+    <h2
+      ref={ref}
+      {...rest}
+      className='text-4xl font-semibold text-center mt-1 mb-7'
+    >
+      {children}
+    </h2>
  )
 })
--- a/components/design/Section/index.tsx
+++ b/components/design/Section/index.tsx
@ -22,12 +22,14 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {

  if (isMain) {
    return (
-      <ShadowContainer style={{ marginTop: 50 }}>
-        <section ref={ref} {...rest}>
-          {heading != null && <SectionHeading>{heading}</SectionHeading>}
-          <div className='container-fluid'>{children}</div>
-        </section>
-      </ShadowContainer>
+      <div className='px-3 w-full'>
+        <ShadowContainer style={{ marginTop: 50 }}>
+          <section ref={ref} {...rest}>
+            {heading != null && <SectionHeading>{heading}</SectionHeading>}
+            <div className='px-3 w-full'>{children}</div>
+          </section>
+        </ShadowContainer>
+      </div>
    )
  }

@ -35,7 +37,7 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
    return (
      <section ref={ref} {...rest}>
        {heading != null && <SectionHeading>{heading}</SectionHeading>}
-        <div className='container-fluid'>{children}</div>
+        <div className='px-3 w-full'>{children}</div>
      </section>
    )
  }
@ -52,11 +54,11 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
          {description}
        </p>
      )}
-      <ShadowContainer>
-        <div className='container-fluid'>
-          <div className='row row-padding'>{children}</div>
-        </div>
-      </ShadowContainer>
+      <div className='px-3 w-full'>
+        <ShadowContainer>
+          <div className='px-16 py-4 leading-8 w-full'>{children}</div>
+        </ShadowContainer>
+      </div>
    </section>
  )
 })
--- a/components/design/ShadowContainer.tsx
+++ b/components/design/ShadowContainer.tsx
@ -1,12 +1,17 @@
+import classNames from 'classnames'
+
 type ShadowContainerProps = React.ComponentPropsWithRef<'div'>

-export const ShadowContainer: React.FC<ShadowContainerProps> = props => {
+export const ShadowContainer: React.FC<ShadowContainerProps> = (props) => {
  const { children, className, ...rest } = props

  return (
    <>
      <div
-        className={`shadow-container ${className != null ? className : ''}`}
+        className={classNames(
+          'shadow-container flex flex-col h-full max-w-full break-words',
+          className
+        )}
        {...rest}
      >
        {children}
@ -15,14 +20,9 @@ export const ShadowContainer: React.FC<ShadowContainerProps> = props => {
      <style jsx>
        {`
          .shadow-container {
-            display: flex;
-            flex-direction: column;
-            word-wrap: break-word;
            box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
            border: 1px solid black;
            border-radius: 1rem;
-            height: 100%;
-            max-width: 100%;
            margin-bottom: 50px;
          }
        `}
--- a/components/design/Textarea.tsx
+++ b/components/design/Textarea.tsx
@ -1,39 +0,0 @@
-import { forwardRef } from 'react'
-
-interface TextareaProps extends React.HTMLProps<HTMLTextAreaElement> {
-  label: string
-}
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (props, ref) => {
-    const { label, name, ...rest } = props
-
-    return (
-      <>
-        <div className='form-group'>
-          <label htmlFor={name}>{label}</label>
-          <br />
-          <textarea id={name} name={name} ref={ref} {...rest} />
-        </div>
-
-        <style jsx>{`
-          .form-group {
-            padding-top: 15px;
-            margin-bottom: 30px;
-          }
-          .form-group textarea {
-            background: transparent;
-            color: var(--color-text);
-            outline: none;
-            width: 100%;
-            height: auto;
-            padding: 10px;
-            resize: vertical;
-            margin-top: 8px;
-          }
-        `}
-        </style>
-      </>
-    )
-  }
-)
--- a/components/design/Tooltip.tsx
+++ b/components/design/Tooltip.tsx
@ -1,49 +0,0 @@
-interface TooltipProps extends React.ComponentPropsWithRef<'div'> {
-  title: string
-  children: React.ReactNode
-}
-
-export const Tooltip: React.FC<TooltipProps> = props => {
-  const { title, children, ...rest } = props
-  return (
-    <>
-      <span className='tooltip' {...rest}>
-        {children}
-        <span className='title'>{title}</span>
-      </span>
-
-      <style jsx>{`
-        .title {
-          color: #fff;
-          font-size: 11px;
-          font-weight: 400;
-          line-height: 1;
-          display: inline-block;
-          background-color: #222222;
-          padding: 5px 8px;
-          white-space: nowrap;
-          position: absolute;
-          top: 100%;
-          margin-top: 10px;
-          z-index: 1;
-          opacity: 0;
-          visibility: hidden;
-          border-radius: 3px;
-          transition: all 0.15s ease-in;
-          transform: translate3d(0, -15px, 0);
-          backface-visibility: hidden;
-        }
-        .tooltip ~ .tooltip:hover .title,
-        .tooltip:first-child:hover .title {
-          opacity: 1;
-          visibility: visible;
-          transition: all 0.35s ease-out;
-          transform: translate3d(0, 0, 0);
-          margin: 0;
-          backface-visibility: hidden;
-        }
-      `}
-      </style>
-    </>
-  )
-}
--- a/components/design/test/Button.test.tsx
+++ b/components/design/test/Button.test.tsx
@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Button } from '../Button'
-
-describe('<Button />', () => {
-  it('should render', async () => {
-    const { getByText } = render(<Button>Submit</Button>)
-    expect(getByText('Submit')).toBeInTheDocument()
-  })
-})
--- a/components/design/test/Input.test.tsx
+++ b/components/design/test/Input.test.tsx
@ -1,11 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Input } from '../Input'
-
-describe('<Input />', () => {
-  it('should render the label', async () => {
-    const labelContent = 'label content'
-    const { getByText } = render(<Input label={labelContent} />)
-    expect(getByText(labelContent)).toBeInTheDocument()
-  })
-})
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,18 +1,11 @@
 version: '3.0'
 services:
-  divlo.fr-website:
+  divlo.fr:
    container_name: ${COMPOSE_PROJECT_NAME}
+    image: 'divlo.fr'
    build:
      context: './'
    ports:
      - '${PORT}:${PORT}'
    environment:
      PORT: ${PORT}
-    volumes:
-      - './:/app'
-
-  divlo.fr-maildev:
-    image: 'maildev/maildev:1.1.0'
-    ports:
-      - '1080:80'
-    container_name: 'divlo.fr-maildev'
--- a/jest.config.js
+++ b/jest.config.js
@ -17,6 +17,7 @@ module.exports = {
    '!**/node_modules/**',
    '!**/next.config.js',
    '!**/postcss.config.js',
+    '!**/tailwind.config.js',
    '!**/workbox-*.js',
    '!**/sw.js',
    '!**/jest.config.js'
--- a/locales/en/home.json
+++ b/locales/en/home.json
@ -44,20 +44,5 @@
        "image": "/images/portfolio/threamdivlofr.png"
      }
    ]
-  },
-  "contact": {
-    "title": "Contact-Me",
-    "nameField": "Name",
-    "subjectField": "Subject",
-    "sendEmail": "Send email",
-    "result": {
-      "loading": "Loading...",
-      "success": "Your email has been sent!",
-      "requiredFields": "You must fill all the fields...",
-      "invalidEmail": "Please enter a valid email address...",
-      "serverError": "The server could not process your request..."
-    },
-    "error": "Error",
-    "success": "Success"
  }
 }
--- a/locales/fr/home.json
+++ b/locales/fr/home.json
@ -44,20 +44,5 @@
        "image": "/images/portfolio/threamdivlofr.png"
      }
    ]
-  },
-  "contact": {
-    "title": "Contactez-Moi",
-    "nameField": "Nom",
-    "subjectField": "Objet",
-    "sendEmail": "Envoyer l'email",
-    "result": {
-      "loading": "Chargement...",
-      "success": "Votre email a été envoyé!",
-      "requiredFields": "Vous devez remplir tous les champs...",
-      "invalidEmail": "Veuillez entrer une adresse mail valide...",
-      "serverError": "Le serveur n'a pas pu traiter votre requête..."
-    },
-    "error": "Erreur",
-    "success": "Succès"
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,22 +6,6 @@
    "type": "git",
    "url": "https://github.com/Divlo/Divlo"
  },
-  "ts-standard": {
-    "ignore": [
-      ".next",
-      ".lighthouseci",
-      "node_modules",
-      "next-env.d.ts",
-      "**/workbox-*.js",
-      "**/sw.js"
-    ],
-    "envs": [
-      "node",
-      "browser",
-      "jest"
-    ],
-    "report": "stylish"
-  },
  "scripts": {
    "dev": "next dev",
    "start": "next start",
@ -30,60 +14,60 @@
    "lint:commit": "commitlint",
    "lint:docker": "dockerfilelint './Dockerfile'",
    "lint:editorconfig": "editorconfig-checker",
-    "lint:markdown": "markdownlint '**/*.md' --dot --ignore node_modules",
-    "lint:typescript": "ts-standard",
+    "lint:markdown": "markdownlint '*.md' --dot --ignore node_modules",
+    "lint:typescript": "eslint '*.{js,ts,jsx,tsx}'",
+    "lint:staged": "lint-staged",
    "lighthouse": "lhci autorun",
    "test": "jest",
    "release": "semantic-release",
    "postinstall": "husky install"
  },
  "dependencies": {
-    "@fontsource/montserrat": "4.2.2",
+    "@fontsource/montserrat": "4.3.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",
-    "axios": "0.21.1",
    "classnames": "2.3.1",
    "html-react-parser": "1.2.6",
-    "next": "10.1.3",
-    "next-pwa": "5.2.15",
+    "next": "10.2.0",
+    "next-pwa": "5.2.21",
+    "next-themes": "0.0.14",
    "next-translate": "1.0.6",
-    "nodemailer": "6.5.0",
-    "normalize.css": "8.0.1",
-    "nprogress": "0.2.0",
    "react": "17.0.2",
-    "react-component-form": "1.3.0",
    "react-dom": "17.0.2",
-    "universal-cookie": "4.0.4",
-    "validator": "13.6.0"
+    "universal-cookie": "4.0.4"
  },
  "devDependencies": {
    "@commitlint/cli": "12.1.1",
    "@commitlint/config-conventional": "12.1.1",
-    "@fullhuman/postcss-purgecss": "4.0.3",
-    "@lhci/cli": "0.7.1",
-    "@styled-jsx/plugin-sass": "3.0.0",
+    "@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.0",
-    "@types/nodemailer": "6.4.1",
-    "@types/nprogress": "0.2.0",
-    "@types/react": "17.0.4",
+    "@types/node": "15.0.2",
+    "@types/react": "17.0.5",
    "@types/styled-jsx": "2.2.8",
-    "@types/validator": "13.1.3",
+    "@typescript-eslint/eslint-plugin": "4.22.1",
+    "autoprefixer": "10.2.5",
    "babel-jest": "26.6.3",
    "dockerfilelint": "1.8.0",
    "editorconfig-checker": "4.0.2",
+    "eslint": "7.26.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-config-standard-with-typescript": "20.0.0",
+    "eslint-plugin-import": "2.22.1",
+    "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",
-    "node-mocks-http": "1.10.1",
-    "postcss": "8.2.13",
-    "sass": "1.32.11",
+    "postcss": "8.2.14",
+    "prettier": "2.2.1",
    "semantic-release": "17.4.2",
-    "ts-standard": "10.0.0",
+    "tailwindcss": "2.1.2",
    "typescript": "4.2.4"
  }
 }
--- a/pages/404.tsx
+++ b/pages/404.tsx
@ -10,7 +10,6 @@ const Error404: React.FC = () => {
  return (
    <>
      <Head title='Divlo - 404' />
-
      <ErrorPage statusCode={404} message={t('errors:notFound')} />
    </>
  )
--- a/pages/500.tsx
+++ b/pages/500.tsx
@ -10,7 +10,6 @@ const Error500: React.FC = () => {
  return (
    <>
      <Head title='Divlo - 500' />
-
      <ErrorPage statusCode={500} message={t('errors:serverError')} />
    </>
  )
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -1,32 +1,23 @@
+import { useEffect } from 'react'
 import { AppProps } from 'next/app'
-import Router from 'next/router'
-import NProgress from 'nprogress'
+import { ThemeProvider } from 'next-themes'
 import useTranslation from 'next-translate/useTranslation'
 import UniversalCookie from 'universal-cookie'

-import 'normalize.css/normalize.css'
+import 'tailwindcss/tailwind.css'
 import '@fontsource/montserrat/400.css'
 import '@fontsource/montserrat/500.css'
 import '@fontsource/montserrat/600.css'
 import '@fontsource/montserrat/700.css'

-import 'styles/grid.scss'
-import 'styles/general.scss'
-import 'styles/nprogress.scss'
-
 import { Header } from 'components/Header'
 import { Footer } from 'components/Footer'
-import { useEffect } from 'react'

 const universalCookie = new UniversalCookie()

 /** how long in seconds, until the cookie expires (10 years) */
 const COOKIE_MAX_AGE = 10 * 365.25 * 24 * 60 * 60

-Router.events.on('routeChangeStart', () => NProgress.start())
-Router.events.on('routeChangeComplete', () => NProgress.done())
-Router.events.on('routeChangeError', () => NProgress.done())
-
 const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
  const { lang } = useTranslation()

@ -38,13 +29,13 @@ const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
  }, [lang])

  return (
-    <>
+    <ThemeProvider attribute='class' defaultTheme='dark'>
      <Header />
-      <main className='content container'>
+      <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
        <Component {...pageProps} />
      </main>
      <Footer />
-    </>
+    </ThemeProvider>
  )
 }

--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -0,0 +1,31 @@
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+  DocumentInitialProps
+} 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>
+    )
+  }
+}
+
+export default MyDocument
--- a/pages/api/send-email.ts
+++ b/pages/api/send-email.ts
@ -1,61 +0,0 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import nodemailer from 'nodemailer'
-import validator from 'validator'
-
-const EMAIL_PORT = parseInt(process.env.EMAIL_PORT ?? '465', 10)
-
-const emailTransporter = nodemailer.createTransport({
-  host: process.env.EMAIL_HOST,
-  port: EMAIL_PORT,
-  secure: EMAIL_PORT === 465,
-  auth: {
-    user: process.env.EMAIL_USER,
-    pass: process.env.EMAIL_PASSWORD
-  },
-  tls: {
-    rejectUnauthorized: false
-  }
-})
-
-const handler = async (
-  request: NextApiRequest,
-  response: NextApiResponse
-): Promise<any> => {
-  if (request.method !== 'POST') {
-    return response.redirect('/404')
-  }
-  const { name, email, subject, message } = request.body as {
-    name: string
-    email: string
-    subject: string
-    message: string
-  }
-  if (
-    validator.isEmpty(name) ||
-    validator.isEmpty(email) ||
-    validator.isEmpty(subject) ||
-    validator.isEmpty(message)
-  ) {
-    return response.status(400).json({ type: 'requiredFields' })
-  }
-  if (!validator.isEmail(email)) {
-    return response.status(400).json({ type: 'invalidEmail' })
-  }
-  try {
-    await emailTransporter.sendMail({
-      from: '"Divlo" <contact@divlo.fr>',
-      to: email,
-      subject: `Contact - ${validator.escape(subject)}`,
-      html: `
-                <b>Name:</b> ${validator.escape(name)} <br/>
-                <b>Email:</b> ${validator.escape(email)} <br/>
-                <b>Message:</b> ${validator.escape(message)}
-            `
-    })
-    return response.status(201).json({ type: 'success' })
-  } catch {
-    return response.status(500).json({ type: 'serverError' })
-  }
-}
-
-export default handler
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -1,7 +1,6 @@
 import { GetStaticProps } from 'next'
 import useTranslation from 'next-translate/useTranslation'

-import { Contact } from 'components/Contact'
 import { RevealFade } from 'components/design/RevealFade'
 import { Section } from 'components/design/Section'
 import { Head } from 'components/Head'
@ -30,7 +29,11 @@ const Home: React.FC = () => {
      </RevealFade>

      <RevealFade>
-        <Section id='skills' heading={t('home:skills.title')} withoutShadowContainer>
+        <Section
+          id='skills'
+          heading={t('home:skills.title')}
+          withoutShadowContainer
+        >
          <Skills />
        </Section>
      </RevealFade>
@ -44,12 +47,6 @@ const Home: React.FC = () => {
          <Portfolio />
        </Section>
      </RevealFade>
-
-      <RevealFade>
-        <Section id='contact' heading={t('home:contact.title')}>
-          <Contact />
-        </Section>
-      </RevealFade>
    </>
  )
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,15 +1,6 @@
 module.exports = {
-  plugins: [
-    [
-      '@fullhuman/postcss-purgecss',
-      {
-        content: [
-          './pages/**/*.{js,jsx,ts,tsx}',
-          './components/**/*.{js,jsx,ts,tsx}'
-        ],
-        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
-        safelist: ['html', 'body']
-      }
-    ]
-  ]
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
 }
--- a/public/images/divlo_logo.png
+++ b/public/images/divlo_logo.png
--- a/public/images/portfolio/functiondivlofr.png
+++ b/public/images/portfolio/functiondivlofr.png
--- a/public/images/portfolio/threamdivlofr.png
+++ b/public/images/portfolio/threamdivlofr.png
--- a/public/images/web/Email.png
+++ b/public/images/web/Email.png
--- a/public/images/web/GitHub.png
+++ b/public/images/web/GitHub.png
--- a/public/images/web/Twitch.png
+++ b/public/images/web/Twitch.png
--- a/public/images/web/Twitter.png
+++ b/public/images/web/Twitter.png
--- a/public/images/web/YouTube.png
+++ b/public/images/web/YouTube.png
--- a/styles/general.scss
+++ b/styles/general.scss
@ -1,95 +0,0 @@
-:root {
-  --border-header-footer: 3px rgba(255, 255, 255, 0.7) solid;
-  --color-primary: #ffd800;
-  --color-text-1: rgb(222, 222, 222);
-  --color-text-2: #b2bac2;
-  --color-background: #181818;
-  --color-shadow: rgba(255, 255, 255, 0.2);
-  --header-height: 79px;
-}
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-#__next {
-  display: flex;
-  flex-flow: column wrap;
-  min-height: 100vh;
-  padding-top: var(--header-height);
-}
-html {
-  line-height: initial;
-}
-body {
-  background-color: var(--color-background);
-  color: var(--color-text-1);
-  font-family: 'Montserrat', 'Arial', 'sans-serif';
-  font-weight: 400;
-  font-size: 18px;
-}
-.content {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  opacity: 1;
-  visibility: visible;
-  position: relative;
-  overflow: hidden;
-  transition: opacity 400ms ease-out;
-}
-p {
-  font-size: 18px;
-  line-height: 1.9;
-}
-.color-primary {
-  color: var(--color-primary);
-}
-a,
-.important {
-  color: var(--color-primary);
-  text-decoration: none;
-}
-a:hover {
-  text-decoration: underline;
-}
-img {
-  border: 0;
-  height: auto;
-  max-width: 100%;
-  vertical-align: middle;
-}
-.row-padding {
-  padding: 15px 50px 15px 50px;
-}
-.text-center {
-  text-align: center;
-  word-break: break-word;
-}
-.justify-content-center {
-  justify-content: center;
-}
-.align-items-center {
-  align-items: center;
-}
-.d-none {
-  display: none !important;
-}
-.paragraph-color {
-  color: var(--color-text-2);
-}
-b,
-strong {
-  font-weight: 500;
-}
-em {
-  font-style: italic;
-}
-@media (max-width: 576px) {
-  .content {
-    width: 100% !important;
-  }
-  .row-padding {
-    padding: 0 !important;
-  }
-}
--- a/styles/grid.scss
+++ b/styles/grid.scss
@ -1,710 +0,0 @@
-/*
-* Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
-* Edited by Divlo (col, col-sm, col-md, col-lg, col-xl) and 24 columns (no offsets)
-*/
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-.container {
-  width: 100%;
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.container-fluid {
-  width: 100%;
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-@media (min-width: 576px) {
-  .container {
-    max-width: 540px;
-  }
-}
-
-@media (max-width: 576px) {
-  .container {
-    width: 90%;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 720px;
-  }
-}
-
-@media (min-width: 992px) {
-  .container {
-    max-width: 960px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .container {
-    max-width: 1140px;
-  }
-}
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -15px;
-  margin-left: -15px;
-}
-
-.col-1,
-.col-2,
-.col-3,
-.col-4,
-.col-5,
-.col-6,
-.col-7,
-.col-8,
-.col-9,
-.col-10,
-.col-11,
-.col-12,
-.col-13,
-.col-14,
-.col-15,
-.col-16,
-.col-17,
-.col-18,
-.col-19,
-.col-20,
-.col-21,
-.col-22,
-.col-23,
-.col-24,
-.col-sm-1,
-.col-sm-2,
-.col-sm-3,
-.col-sm-4,
-.col-sm-5,
-.col-sm-6,
-.col-sm-7,
-.col-sm-8,
-.col-sm-9,
-.col-sm-10,
-.col-sm-11,
-.col-sm-12,
-.col-sm-13,
-.col-sm-14,
-.col-sm-15,
-.col-sm-16,
-.col-sm-17,
-.col-sm-18,
-.col-sm-19,
-.col-sm-20,
-.col-sm-21,
-.col-sm-22,
-.col-sm-23,
-.col-sm-24,
-.col-md-1,
-.col-md-2,
-.col-md-3,
-.col-md-4,
-.col-md-5,
-.col-md-6,
-.col-md-7,
-.col-md-8,
-.col-md-9,
-.col-md-10,
-.col-md-11,
-.col-md-12,
-.col-md-13,
-.col-md-14,
-.col-md-15,
-.col-md-16,
-.col-md-17,
-.col-md-18,
-.col-md-19,
-.col-md-20,
-.col-md-21,
-.col-md-22,
-.col-md-23,
-.col-md-24,
-.col-lg-1,
-.col-lg-2,
-.col-lg-3,
-.col-lg-4,
-.col-lg-5,
-.col-lg-6,
-.col-lg-7,
-.col-lg-8,
-.col-lg-9,
-.col-lg-10,
-.col-lg-11,
-.col-lg-12,
-.col-lg-13,
-.col-lg-14,
-.col-lg-15,
-.col-lg-16,
-.col-lg-17,
-.col-lg-18,
-.col-lg-19,
-.col-lg-20,
-.col-lg-21,
-.col-lg-22,
-.col-lg-23,
-.col-lg-24,
-.col-xl-1,
-.col-xl-2,
-.col-xl-3,
-.col-xl-4,
-.col-xl-5,
-.col-xl-6,
-.col-xl-7,
-.col-xl-8,
-.col-xl-9,
-.col-xl-10,
-.col-xl-11,
-.col-xl-12,
-.col-xl-13,
-.col-xl-14,
-.col-xl-15,
-.col-xl-16,
-.col-xl-17,
-.col-xl-18,
-.col-xl-19,
-.col-xl-20,
-.col-xl-21,
-.col-xl-22,
-.col-xl-23,
-.col-xl-24 {
-  position: relative;
-  width: 100%;
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
-/* col- */
-.col-1 {
-  flex: 0 0 4.16667%;
-  max-width: 4.16667%;
-}
-
-.col-2 {
-  flex: 0 0 8.33333%;
-  max-width: 8.33333%;
-}
-
-.col-3 {
-  flex: 0 0 12.5%;
-  max-width: 12.5%;
-}
-
-.col-4 {
-  flex: 0 0 16.66667%;
-  max-width: 16.66667%;
-}
-
-.col-5 {
-  flex: 0 0 20.83333%;
-  max-width: 20.83333%;
-}
-
-.col-6 {
-  flex: 0 0 25%;
-  max-width: 25%;
-}
-
-.col-7 {
-  flex: 0 0 29.16667%;
-  max-width: 29.16667%;
-}
-
-.col-8 {
-  flex: 0 0 33.33333%;
-  max-width: 33.33333%;
-}
-
-.col-9 {
-  flex: 0 0 37.5%;
-  max-width: 37.5%;
-}
-
-.col-10 {
-  flex: 0 0 41.66667%;
-  max-width: 41.66667%;
-}
-
-.col-11 {
-  flex: 0 0 45.83333%;
-  max-width: 45.83333%;
-}
-
-.col-12 {
-  flex: 0 0 50%;
-  max-width: 50%;
-}
-
-.col-13 {
-  flex: 0 0 54.16667%;
-  max-width: 54.16667%;
-}
-
-.col-14 {
-  flex: 0 0 58.33333%;
-  max-width: 58.33333%;
-}
-
-.col-15 {
-  flex: 0 0 62.5%;
-  max-width: 62.5%;
-}
-
-.col-16 {
-  flex: 0 0 66.66667%;
-  max-width: 66.66667%;
-}
-
-.col-17 {
-  flex: 0 0 70.83333%;
-  max-width: 70.83333%;
-}
-
-.col-18 {
-  flex: 0 0 75%;
-  max-width: 75%;
-}
-
-.col-19 {
-  flex: 0 0 79.16667%;
-  max-width: 79.16667%;
-}
-
-.col-20 {
-  flex: 0 0 83.33333%;
-  max-width: 83.33333%;
-}
-
-.col-21 {
-  flex: 0 0 87.5%;
-  max-width: 87.5%;
-}
-
-.col-22 {
-  flex: 0 0 91.66667%;
-  max-width: 91.66667%;
-}
-
-.col-23 {
-  flex: 0 0 95.83333%;
-  max-width: 95.83333%;
-}
-
-.col-24 {
-  flex: 0 0 100%;
-  max-width: 100%;
-}
-
-/* col-sm */
-@media (min-width: 576px) {
-  .col-sm-1 {
-    flex: 0 0 4.16667%;
-    max-width: 4.16667%;
-  }
-  .col-sm-2 {
-    flex: 0 0 8.33333%;
-    max-width: 8.33333%;
-  }
-  .col-sm-3 {
-    flex: 0 0 12.5%;
-    max-width: 12.5%;
-  }
-  .col-sm-4 {
-    flex: 0 0 16.66667%;
-    max-width: 16.66667%;
-  }
-  .col-sm-5 {
-    flex: 0 0 20.83333%;
-    max-width: 20.83333%;
-  }
-  .col-sm-6 {
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-  .col-sm-7 {
-    flex: 0 0 29.16667%;
-    max-width: 29.16667%;
-  }
-  .col-sm-8 {
-    flex: 0 0 33.33333%;
-    max-width: 33.33333%;
-  }
-  .col-sm-9 {
-    flex: 0 0 37.5%;
-    max-width: 37.5%;
-  }
-  .col-sm-10 {
-    flex: 0 0 41.66667%;
-    max-width: 41.66667%;
-  }
-  .col-sm-11 {
-    flex: 0 0 45.83333%;
-    max-width: 45.83333%;
-  }
-  .col-sm-12 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-  .col-sm-13 {
-    flex: 0 0 54.16667%;
-    max-width: 54.16667%;
-  }
-  .col-sm-14 {
-    flex: 0 0 58.33333%;
-    max-width: 58.33333%;
-  }
-  .col-sm-15 {
-    flex: 0 0 62.5%;
-    max-width: 62.5%;
-  }
-  .col-sm-16 {
-    flex: 0 0 66.66667%;
-    max-width: 66.66667%;
-  }
-  .col-sm-17 {
-    flex: 0 0 70.83333%;
-    max-width: 70.83333%;
-  }
-  .col-sm-18 {
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-  .col-sm-19 {
-    flex: 0 0 79.16667%;
-    max-width: 79.16667%;
-  }
-  .col-sm-20 {
-    flex: 0 0 83.33333%;
-    max-width: 83.33333%;
-  }
-  .col-sm-21 {
-    flex: 0 0 87.5%;
-    max-width: 87.5%;
-  }
-  .col-sm-22 {
-    flex: 0 0 91.66667%;
-    max-width: 91.66667%;
-  }
-  .col-sm-23 {
-    flex: 0 0 95.83333%;
-    max-width: 95.83333%;
-  }
-  .col-sm-24 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
-
-/* col-md */
-@media (min-width: 768px) {
-  .col-md-1 {
-    flex: 0 0 4.16667%;
-    max-width: 4.16667%;
-  }
-  .col-md-2 {
-    flex: 0 0 8.33333%;
-    max-width: 8.33333%;
-  }
-  .col-md-3 {
-    flex: 0 0 12.5%;
-    max-width: 12.5%;
-  }
-  .col-md-4 {
-    flex: 0 0 16.66667%;
-    max-width: 16.66667%;
-  }
-  .col-md-5 {
-    flex: 0 0 20.83333%;
-    max-width: 20.83333%;
-  }
-  .col-md-6 {
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-  .col-md-7 {
-    flex: 0 0 29.16667%;
-    max-width: 29.16667%;
-  }
-  .col-md-8 {
-    flex: 0 0 33.33333%;
-    max-width: 33.33333%;
-  }
-  .col-md-9 {
-    flex: 0 0 37.5%;
-    max-width: 37.5%;
-  }
-  .col-md-10 {
-    flex: 0 0 41.66667%;
-    max-width: 41.66667%;
-  }
-  .col-md-11 {
-    flex: 0 0 45.83333%;
-    max-width: 45.83333%;
-  }
-  .col-md-12 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-  .col-md-13 {
-    flex: 0 0 54.16667%;
-    max-width: 54.16667%;
-  }
-  .col-md-14 {
-    flex: 0 0 58.33333%;
-    max-width: 58.33333%;
-  }
-  .col-md-15 {
-    flex: 0 0 62.5%;
-    max-width: 62.5%;
-  }
-  .col-md-16 {
-    flex: 0 0 66.66667%;
-    max-width: 66.66667%;
-  }
-  .col-md-17 {
-    flex: 0 0 70.83333%;
-    max-width: 70.83333%;
-  }
-  .col-md-18 {
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-  .col-md-19 {
-    flex: 0 0 79.16667%;
-    max-width: 79.16667%;
-  }
-  .col-md-20 {
-    flex: 0 0 83.33333%;
-    max-width: 83.33333%;
-  }
-  .col-md-21 {
-    flex: 0 0 87.5%;
-    max-width: 87.5%;
-  }
-  .col-md-22 {
-    flex: 0 0 91.66667%;
-    max-width: 91.66667%;
-  }
-  .col-md-23 {
-    flex: 0 0 95.83333%;
-    max-width: 95.83333%;
-  }
-  .col-md-24 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
-
-/* col-lg */
-@media (min-width: 992px) {
-  .col-lg-1 {
-    flex: 0 0 4.16667%;
-    max-width: 4.16667%;
-  }
-  .col-lg-2 {
-    flex: 0 0 8.33333%;
-    max-width: 8.33333%;
-  }
-  .col-lg-3 {
-    flex: 0 0 12.5%;
-    max-width: 12.5%;
-  }
-  .col-lg-4 {
-    flex: 0 0 16.66667%;
-    max-width: 16.66667%;
-  }
-  .col-lg-5 {
-    flex: 0 0 20.83333%;
-    max-width: 20.83333%;
-  }
-  .col-lg-6 {
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-  .col-lg-7 {
-    flex: 0 0 29.16667%;
-    max-width: 29.16667%;
-  }
-  .col-lg-8 {
-    flex: 0 0 33.33333%;
-    max-width: 33.33333%;
-  }
-  .col-lg-9 {
-    flex: 0 0 37.5%;
-    max-width: 37.5%;
-  }
-  .col-lg-10 {
-    flex: 0 0 41.66667%;
-    max-width: 41.66667%;
-  }
-  .col-lg-11 {
-    flex: 0 0 45.83333%;
-    max-width: 45.83333%;
-  }
-  .col-lg-12 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-  .col-lg-13 {
-    flex: 0 0 54.16667%;
-    max-width: 54.16667%;
-  }
-  .col-lg-14 {
-    flex: 0 0 58.33333%;
-    max-width: 58.33333%;
-  }
-  .col-lg-15 {
-    flex: 0 0 62.5%;
-    max-width: 62.5%;
-  }
-  .col-lg-16 {
-    flex: 0 0 66.66667%;
-    max-width: 66.66667%;
-  }
-  .col-lg-17 {
-    flex: 0 0 70.83333%;
-    max-width: 70.83333%;
-  }
-  .col-lg-18 {
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-  .col-lg-19 {
-    flex: 0 0 79.16667%;
-    max-width: 79.16667%;
-  }
-  .col-lg-20 {
-    flex: 0 0 83.33333%;
-    max-width: 83.33333%;
-  }
-  .col-lg-21 {
-    flex: 0 0 87.5%;
-    max-width: 87.5%;
-  }
-  .col-lg-22 {
-    flex: 0 0 91.66667%;
-    max-width: 91.66667%;
-  }
-  .col-lg-23 {
-    flex: 0 0 95.83333%;
-    max-width: 95.83333%;
-  }
-  .col-lg-24 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
-
-/* col-xl */
-@media (min-width: 1200px) {
-  .col-xl-1 {
-    flex: 0 0 4.16667%;
-    max-width: 4.16667%;
-  }
-  .col-xl-2 {
-    flex: 0 0 8.33333%;
-    max-width: 8.33333%;
-  }
-  .col-xl-3 {
-    flex: 0 0 12.5%;
-    max-width: 12.5%;
-  }
-  .col-xl-4 {
-    flex: 0 0 16.66667%;
-    max-width: 16.66667%;
-  }
-  .col-xl-5 {
-    flex: 0 0 20.83333%;
-    max-width: 20.83333%;
-  }
-  .col-xl-6 {
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-  .col-xl-7 {
-    flex: 0 0 29.16667%;
-    max-width: 29.16667%;
-  }
-  .col-xl-8 {
-    flex: 0 0 33.33333%;
-    max-width: 33.33333%;
-  }
-  .col-xl-9 {
-    flex: 0 0 37.5%;
-    max-width: 37.5%;
-  }
-  .col-xl-10 {
-    flex: 0 0 41.66667%;
-    max-width: 41.66667%;
-  }
-  .col-xl-11 {
-    flex: 0 0 45.83333%;
-    max-width: 45.83333%;
-  }
-  .col-xl-12 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-  .col-xl-13 {
-    flex: 0 0 54.16667%;
-    max-width: 54.16667%;
-  }
-  .col-xl-14 {
-    flex: 0 0 58.33333%;
-    max-width: 58.33333%;
-  }
-  .col-xl-15 {
-    flex: 0 0 62.5%;
-    max-width: 62.5%;
-  }
-  .col-xl-16 {
-    flex: 0 0 66.66667%;
-    max-width: 66.66667%;
-  }
-  .col-xl-17 {
-    flex: 0 0 70.83333%;
-    max-width: 70.83333%;
-  }
-  .col-xl-18 {
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-  .col-xl-19 {
-    flex: 0 0 79.16667%;
-    max-width: 79.16667%;
-  }
-  .col-xl-20 {
-    flex: 0 0 83.33333%;
-    max-width: 83.33333%;
-  }
-  .col-xl-21 {
-    flex: 0 0 87.5%;
-    max-width: 87.5%;
-  }
-  .col-xl-22 {
-    flex: 0 0 91.66667%;
-    max-width: 91.66667%;
-  }
-  .col-xl-23 {
-    flex: 0 0 95.83333%;
-    max-width: 95.83333%;
-  }
-  .col-xl-24 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
--- a/styles/nprogress.scss
+++ b/styles/nprogress.scss
@ -1,85 +0,0 @@
-/*! purgecss start ignore */
-
-/* Make clicks pass-through */
-#nprogress {
-  pointer-events: none;
-}
-
-#nprogress .bar {
-  background: var(--color-primary);
-
-  position: fixed;
-  z-index: 1031;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 2px;
-}
-
-/* Fancy blur effect */
-#nprogress .peg {
-  display: block;
-  position: absolute;
-  right: 0px;
-  width: 100px;
-  height: 100%;
-  box-shadow: 0 0 10px var(--color-primary), 0 0 5px var(--color-primary);
-  opacity: 1;
-
-  -webkit-transform: rotate(3deg) translate(0px, -4px);
-  -ms-transform: rotate(3deg) translate(0px, -4px);
-  transform: rotate(3deg) translate(0px, -4px);
-}
-
-/* Remove these to get rid of the spinner */
-#nprogress .spinner {
-  display: block;
-  position: fixed;
-  z-index: 1031;
-  top: 15px;
-  right: 15px;
-}
-
-#nprogress .spinner-icon {
-  width: 18px;
-  height: 18px;
-  box-sizing: border-box;
-
-  border: solid 2px transparent;
-  border-top-color: var(--color-primary);
-  border-left-color: var(--color-primary);
-  border-radius: 50%;
-
-  -webkit-animation: nprogress-spinner 400ms linear infinite;
-  animation: nprogress-spinner 400ms linear infinite;
-}
-
-.nprogress-custom-parent {
-  overflow: hidden;
-  position: relative;
-}
-
-.nprogress-custom-parent #nprogress .spinner,
-.nprogress-custom-parent #nprogress .bar {
-  position: absolute;
-}
-
-@-webkit-keyframes nprogress-spinner {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@keyframes nprogress-spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/*! purgecss end ignore */
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,34 @@
+module.exports = {
+  mode: 'jit',
+  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      screens: {
+        xs: '380px'
+      },
+      colors: {
+        black: '#181818',
+        gray: {
+          DEFAULT: '#333333',
+          dark: '#b2bac2'
+        },
+        yellow: {
+          DEFAULT: '#ff8000',
+          dark: '#ffd800'
+        }
+      },
+      boxShadow: {
+        dark: '0px 1px 10px hsla(0, 0%, 100%, 0.2)',
+        light: '0px 1px 10px rgba(0, 0, 0, 0.25)'
+      },
+      fontFamily: {
+        headline: ['Montserrat', 'Arial', 'sans-serif']
+      }
+    }
+  },
+  variants: {
+    extend: {}
+  },
+  plugins: []
+}