From 4ba1f59341c982bdd0637dda19f3b666170ea8fe Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Sat, 28 Nov 2020 19:35:11 +0100
Subject: [PATCH] working

---
 config/Head.ts                        |    1 -
 config/Translation.ts                 |   22 +
 config/index.ts                       |    3 +-
 nuxt.config.js                        |    5 +-
 package.json                          |    1 +
 src/assets/css/style.scss             |    2 +-
 src/assets/css/tailwind.css           |    1 +
 src/components/EnvGroup.vue           |   15 +
 src/components/EnvList.vue            |   15 +
 src/components/EnvListItem.vue        |   30 +
 src/components/EnvTitle.vue           |   22 +
 src/components/Experience.vue         |   14 +-
 src/components/Footer.vue             |    4 +-
 src/components/Formation.vue          |   11 +-
 src/components/Header.vue             |   41 +-
 src/components/HomeLink.vue           |   50 ++
 src/components/HomePost.vue           |   62 --
 src/components/PageTitle.vue          |   29 +
 src/components/Post.vue               |   31 +-
 src/components/Service.vue            |   39 +
 src/components/Skill.vue              |    9 +-
 src/components/Work.vue               |   46 +
 src/components/WorkSkill.vue          |   34 +
 src/locales/en-US.ts                  |   12 +
 src/locales/fr-FR.ts                  |   12 +
 src/tailwind.config.js                | 1119 +++++++++++++------------
 src/templates/layouts/default.vue     |    6 +-
 src/templates/pages/about.vue         |  315 +++----
 src/templates/pages/blog/_id.vue      |   16 +-
 src/templates/pages/blog/index.vue    |   39 +-
 src/templates/pages/blog/tags/_id.vue |    5 +
 src/templates/pages/contact.vue       |  113 +++
 src/templates/pages/index.vue         |  157 ++--
 src/templates/pages/work/_id.vue      |   78 ++
 src/templates/pages/work/index.vue    |   57 ++
 tsconfig.json                         |    3 +-
 36 files changed, 1460 insertions(+), 959 deletions(-)
 create mode 100644 config/Translation.ts
 create mode 100644 src/components/EnvGroup.vue
 create mode 100644 src/components/EnvList.vue
 create mode 100644 src/components/EnvListItem.vue
 create mode 100644 src/components/EnvTitle.vue
 create mode 100644 src/components/HomeLink.vue
 delete mode 100644 src/components/HomePost.vue
 create mode 100644 src/components/PageTitle.vue
 create mode 100644 src/components/Service.vue
 create mode 100644 src/components/Work.vue
 create mode 100644 src/components/WorkSkill.vue
 create mode 100644 src/locales/en-US.ts
 create mode 100644 src/locales/fr-FR.ts
 create mode 100644 src/templates/pages/contact.vue
 create mode 100644 src/templates/pages/work/_id.vue
 create mode 100644 src/templates/pages/work/index.vue

diff --git a/config/Head.ts b/config/Head.ts
index 3fa20ad..6f4bb04 100644
--- a/config/Head.ts
+++ b/config/Head.ts
@@ -1,5 +1,4 @@
 export default {
-  title: 'artsite',
   meta: [
     { charset: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
diff --git a/config/Translation.ts b/config/Translation.ts
new file mode 100644
index 0000000..2ee8df3
--- /dev/null
+++ b/config/Translation.ts
@@ -0,0 +1,22 @@
+export default {
+  locales: [
+    {
+      code: 'en',
+      name: 'English',
+      file: 'en-US.ts',
+    },
+    {
+      code: 'fr',
+      name: 'Français',
+      file: 'fr-FR.ts',
+    },
+  ],
+  strategy: 'no_prefix',
+  defaultLocale: 'en',
+  langDir: 'locales/',
+  lazy: true,
+  seo: true,
+  vueI18n: {
+    fallbackLocale: 'en',
+  },
+}
diff --git a/config/index.ts b/config/index.ts
index 3c800ff..5ce54b0 100644
--- a/config/index.ts
+++ b/config/index.ts
@@ -2,5 +2,6 @@ import Axios from './Axios'
 import Head from './Head'
 import ColorMode from './ColorMode'
 import Tailwind from './Tailwind'
+import Translation from './Translation'
 
-export { Axios, Head, ColorMode, Tailwind }
+export { Axios, Head, ColorMode, Tailwind, Translation }
diff --git a/nuxt.config.js b/nuxt.config.js
index 812b35d..2962c3c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,4 +1,4 @@
-import { Axios, Head, ColorMode, Tailwind } from './config'
+import { Axios, Head, ColorMode, Tailwind, Translation } from './config'
 
 export default {
   head: Head,
@@ -23,7 +23,8 @@ export default {
   ],
 
   modules: [
-    ['@nuxtjs/axios', Axios]
+    ['@nuxtjs/axios', Axios],
+    ['nuxt-i18n', Translation]
   ],
 
   buildDir: 'build',
diff --git a/package.json b/package.json
index be13530..9a0bc9f 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@nuxtjs/axios": "5.12.1",
     "core-js": "^3.7.0",
     "nuxt": "^2.14.6",
+    "nuxt-i18n": "^6.15.4",
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0"
   },
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 0713e35..50bf7f3 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -8,6 +8,6 @@ img, svg {
 }
 
 * {
-  @apply select-none outline-none ;
+  @apply select-none outline-none;
 }
 
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index 38191fb..a906b99 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
 @import "./style.scss";
 
 @tailwind base;
diff --git a/src/components/EnvGroup.vue b/src/components/EnvGroup.vue
new file mode 100644
index 0000000..4edc414
--- /dev/null
+++ b/src/components/EnvGroup.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="w-full mb-10">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EnvGroup"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/EnvList.vue b/src/components/EnvList.vue
new file mode 100644
index 0000000..2b92416
--- /dev/null
+++ b/src/components/EnvList.vue
@@ -0,0 +1,15 @@
+<template>
+  <ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl">
+    <slot/>
+  </ul>
+</template>
+
+<script>
+export default {
+name: "EnvList"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/EnvListItem.vue b/src/components/EnvListItem.vue
new file mode 100644
index 0000000..56fd79f
--- /dev/null
+++ b/src/components/EnvListItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <li>
+    {{ title }}:
+    <a class="duration-300 text-orange-400 font-medium border-b-2 border-opacity-0 hover:border-opacity-100 border-orange-400 border-solid" v-if="link" :href="link" target="_blank">{{content}}</a>
+    <span v-else>{{content}}</span>
+  </li>
+</template>
+
+<script>
+export default {
+  name: "EnvListItem",
+  props:{
+    title: {
+      default: 'Title',
+      type: String
+    },
+    link: {
+      type: String
+    },
+    content: {
+      default: 'content',
+      type: String
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/EnvTitle.vue b/src/components/EnvTitle.vue
new file mode 100644
index 0000000..2cc208f
--- /dev/null
+++ b/src/components/EnvTitle.vue
@@ -0,0 +1,22 @@
+<template>
+  <h3 class="font-bold text-2xl md:text-4xl mb-2">
+    {{ title }}
+    <slot />
+  </h3>
+</template>
+
+<script>
+export default {
+  name: "EnvTitle",
+  props:{
+    title: {
+      default: 'Title',
+      type: String
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Experience.vue b/src/components/Experience.vue
index 8f82c30..1b237b5 100644
--- a/src/components/Experience.vue
+++ b/src/components/Experience.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-row mb-5">
     <span class="self-center h-4 w-4 mr-4">
-      <span v-if="end === 'Today'" class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-green-500"/>
+      <span v-if="end === 'Today'" class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-green-500 animate-ping ring-green-200"/>
       <span v-else class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-gray-500"/>
     </span>
     <div class="leading-7">
-      <p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{begin}} - {{end}} <span class="px-3">|</span> {{location}}</p>
+      <p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
       <h1 class="text-2xl font-bold">{{title}} - {{company}}</h1>
       <h2 class="text-xl">{{description}}</h2>
     </div>
@@ -40,10 +40,18 @@ export default {
       type: String,
       default: "Never"
     }
+  },
+  methods: {
+    formatDate(date) {
+      const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+        "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
+      ];
+      const dateFormat = new Date(date)
+      return monthNames[dateFormat.getMonth()] + " " + dateFormat.getFullYear()
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
-
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 2b0a6c9..2171488 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -66,10 +66,10 @@ export default {
   }
 
   .link {
-    transition-duration: .3s;
+    transition-duration: .2s;
 
     &:hover {
-      text-decoration: underline;
+      @apply border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid;
     }
   }
 }
diff --git a/src/components/Formation.vue b/src/components/Formation.vue
index 4b79f7b..a41eb8b 100644
--- a/src/components/Formation.vue
+++ b/src/components/Formation.vue
@@ -5,7 +5,7 @@
       <span v-else class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-gray-500"/>
     </span>
     <div class="leading-7 relative">
-      <p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{begin}} - {{end}} <span class="px-3">|</span> {{location}}</p>
+      <p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
       <h1 class="text-2xl font-bold">{{title}}</h1>
       <h2 class="text-xl">{{description}}</h2>
     </div>
@@ -36,6 +36,15 @@ export default {
       type: String,
       default: "Never"
     }
+  },
+  methods: {
+    formatDate(date) {
+      const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+        "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
+      ];
+      const dateFormat = new Date(date)
+      return monthNames[dateFormat.getMonth()] + " " + dateFormat.getFullYear()
+    }
   }
 }
 </script>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index d05337b..b86d636 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,16 +1,21 @@
 <template>
-  <header class="dark:bg-dark-200 dark:text-white fixed z-index-50 top-0 left-0 bg-white header border-b border-gray-200 border-solid tracking-wider w-full h-16 lg:h-24 duration-500" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white' : ''">
+  <header class="dark:bg-dark-200 dark:text-white fixed z-50 top-0 left-0 bg-white header tracking-wider w-full h-16 lg:h-24 duration-500" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white' : ''">
     <div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
       <nuxt-link to="/">
-        <div class="left text-2xl font-bold cursor-pointer hover:underline duration-500">
-          Arthur Danjou
+        <div class="left text-2xl font-bold cursor-pointer border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid duration-500">
+          {{ $t('header_title') }}
         </div>
       </nuxt-link>
       <nav class="right">
         <div class="flex flex-col md:flex-row items-center">
           <ul class="flex text-xl">
             <li class="mx-2 cursor-pointer">
-              <nuxt-link to="/dev"> FR </nuxt-link>
+              <div v-if="this.$i18n.locale === 'en'" @click="changeLanguage('fr')">
+                🇫🇷
+              </div>
+              <div v-else @click="changeLanguage('en')">
+                🇺🇸
+              </div>
             </li>
             <li @click="changeColorMode()" class="mx-2 cursor-pointer flex items-center">
               <div v-if="this.$colorMode.value === 'light'">
@@ -26,27 +31,27 @@
             </li>
             <nuxt-link class="red hidden md:inline-block" to="/">
               <li class="hover:text-red-400 font-bold mx-2 cursor-pointer duration-300">
-                Accueil
+                {{ $t('part_home') }}
               </li>
             </nuxt-link>
             <nuxt-link class="orange hidden md:inline-block" to="/about">
               <li class="hover:text-orange-400 font-bold mx-2 cursor-pointer duration-300">
-                Moi
+                {{ $t('part_about') }}
               </li>
             </nuxt-link>
             <nuxt-link class="green hidden md:inline-block" to="/blog">
               <li class="hover:text-green-400 font-bold mx-2 cursor-pointer duration-300">
-                Blog
+                {{ $t('part_blog') }}
               </li>
             </nuxt-link>
             <nuxt-link class="blue hidden md:inline-block" to="/work">
               <li class="hover:text-blue-400 font-bold mx-2 cursor-pointer duration-300">
-                Travail
+                {{ $t('part_work') }}
               </li>
             </nuxt-link>
             <nuxt-link class="purple hidden md:inline-block" to="/contact">
               <li class="hover:text-purple-400 font-bold mx-2 cursor-pointer duration-300">
-                Contact
+                {{ $t('part_contact') }}
               </li>
             </nuxt-link>
           </ul>
@@ -57,7 +62,7 @@
               <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
               </svg>
-              Accueil
+              {{ $t('part_home') }}
             </li>
           </nuxt-link>
           <nuxt-link to="/about" class="orange">
@@ -65,7 +70,7 @@
               <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
               </svg>
-              Moi
+              {{ $t('part_about') }}
             </li>
           </nuxt-link>
           <nuxt-link to="/blog" class="green">
@@ -73,7 +78,7 @@
               <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
               </svg>
-              Blog
+              {{ $t('part_blog') }}
             </li>
           </nuxt-link>
           <nuxt-link to="/work" class="blue">
@@ -81,7 +86,7 @@
               <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
               </svg>
-              Travail
+              {{ $t('part_work') }}
             </li>
           </nuxt-link>
           <nuxt-link to="/contact" class="purple">
@@ -90,7 +95,7 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
               </svg>
-              Contact
+              {{ $t('part_contact') }}
             </li>
           </nuxt-link>
         </ul>
@@ -113,7 +118,10 @@ export default {
     },
     updateScroll() {
       this.scrollPosition = window.scrollY
-    }
+    },
+    changeLanguage(lang) {
+      this.$i18n.setLocale(lang)
+    },
   },
   mounted() {
     window.addEventListener('scroll', this.updateScroll);
@@ -133,6 +141,9 @@ export default {
       &.green {
         @apply text-green-400;
       }
+      &.blue {
+        @apply text-blue-400;
+      }
     }
 
     .nuxt-link-exact-active {
diff --git a/src/components/HomeLink.vue b/src/components/HomeLink.vue
new file mode 100644
index 0000000..848cbdb
--- /dev/null
+++ b/src/components/HomeLink.vue
@@ -0,0 +1,50 @@
+<template>
+  <nuxt-link :to="link">
+    <div
+      class="home-link h-full duration-500 cursor-pointer flex flex-row justify-between py-3 w-full md:w-96 items-center"
+      :class="color ? 'hover:bg-' + color + '-400 dark:hover:bg-' + color + '-600 active:bg-' + color + '-400 dark:active:bg-' + color + '-600' : ''">
+      <div class="ml-4">
+        <h1 class="text-3xl font-bold my-2">
+          {{ title }}
+          <slot />
+        </h1>
+        <p class="w-5/6 text-gray-900 dark:text-dark-900 text-justify">{{ description }}</p>
+      </div>
+      <div class="mr-10 arrow duration-300">
+        <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+        </svg>
+      </div>
+    </div>
+  </nuxt-link>
+</template>
+
+<script>
+export default {
+  name: "HomeLink",
+  props: {
+    title: {
+      default: "Title",
+      type: String
+    },
+    description: {
+      default: "Description",
+      type: String
+    },
+    color: {
+      default: "red-100",
+      type: String
+    },
+    link: {
+      default: "/",
+      type: String
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.home-link:hover .arrow {
+  transform: translateX(15px);
+}
+</style>
diff --git a/src/components/HomePost.vue b/src/components/HomePost.vue
deleted file mode 100644
index d761648..0000000
--- a/src/components/HomePost.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <article class="hover:bg-gray-200 dark:hover:bg-red-900 border-2 border-solid rounded-xl border-gray-300 dark:border-dark-900 w-full lg:w-1/3 h-auto h-blog p-2 flex flex-col justify-between my-5 lg:my-0 lg:mx-5 duration-300">
-    <div>
-      <p class="text-3xl font-bold text-justify leading-7 mb-3">{{title}}</p>
-      <p class="dark:text-dark-900 text-gray-900 text-lg italic text-justify leading-5">{{description}}</p>
-    </div>
-    <div class="flex justify-between mt-8">
-      <div>
-        <div>{{date}}</div>
-        <div>{{reading_time}} min read</div>
-      </div>
-      <div class="self-end flex flex-wrap">
-        <div v-for="tag in tagsSplit" class="ml-2 py-1 px-2 dark:bg-white dark:text-black rounded bg-black text-white font-semibold">
-          #{{tag}}
-        </div>
-      </div>
-    </div>
-  </article>
-</template>
-
-<script>
-export default {
-  name: "HomePost",
-  props: {
-    title: {
-      type: String,
-      default: "New Post's title "
-    },
-    description: {
-      type: String,
-      default: "New Post's description"
-    },
-    reading_time: {
-      type: String,
-      default: "0"
-    },
-    date: {
-      type: String,
-      default: "Today"
-    },
-    tags: {
-      type: String,
-      default: "Tag1 Tag2 Tag3",
-    },
-    cover: {
-      type: String,
-      default: "https://api.arthurdanjou.fr/pictures/default.png"
-    }
-  },
-  computed: {
-    tagsSplit() {
-      return this.tags.split(" ")
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.h-blog {
-  min-height: 20rem;
-}
-</style>
diff --git a/src/components/PageTitle.vue b/src/components/PageTitle.vue
new file mode 100644
index 0000000..1dbba53
--- /dev/null
+++ b/src/components/PageTitle.vue
@@ -0,0 +1,29 @@
+<template>
+  <h1
+    class="mt-16 md:mt-32 font-bold text-4xl mr-2 inline mb-4 border-b-2 border-solid"
+    :class="' border-'+ color +'-400'"
+  >
+    {{ title }}
+    <slot />
+  </h1>
+</template>
+
+<script>
+export default {
+  name: "PageTitle",
+  props: {
+    title: {
+      default: 'Title',
+      type: String
+    },
+    color: {
+      default: 'red',
+      type: String
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Post.vue b/src/components/Post.vue
index bb07f9b..3187942 100644
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -1,20 +1,32 @@
 <template>
   <article
-    class="w-full h-blog p-2 flex flex-col justify-between my-5"
-    :style="{ backgroundImage: 'url(http://localhost:5555/files/' + cover.file_name + ')' }"
+    class="border-2 border-black border-solid rounded-xl w-full h-blog p-2 flex flex-col justify-between my-5 duration-200 transform hover:scale-95"
+    :style="{ backgroundImage: 'url(http://localhost:5555/files/' + cover + ')' }"
   >
     <div>
-      <p class="text-3xl text-white font-bold text-justify leading-7 mb-3">{{title}}</p>
-      <p class="text-dark-900 text-lg italic text-justify leading-5">{{description}}</p>
+      <p
+        class="text-3xl  font-bold text-justify leading-7 mb-3"
+        :class="lightBg === 1 ? 'text-black':'text-white'"
+      >{{title}}</p>
+      <p
+        class="text-lg italic text-justify leading-5"
+        :class="lightBg === 1 ? 'text-gray-900':'text-dark-900'"
+      >{{description}}</p>
     </div>
-    <div class="flex justify-between mt-8 text-dark-900">
+    <div
+      class="flex justify-between mt-8"
+      :class="lightBg ? 'text-gray-900':'text-dark-900'"
+    >
       <div>
         <div>{{formatDate}}</div>
         <div>{{reading_time}} min read</div>
         <div>{{likes}} ❤</div>
       </div>
       <div class="self-end flex flex-wrap flex-col md:flex-row">
-        <div v-for="(tag) in tags" class="my-1 md:my-0 ml-2 py-1 px-2 bg-white text-black rounded font-semibold">
+        <div v-for="(tag) in tags"
+             class="my-1 md:my-0 ml-2 py-1 px-2 rounded font-semibold"
+             :class="lightBg ? 'bg-black text-white':'bg-white text-black'"
+        >
           #{{tag}}
         </div>
       </div>
@@ -52,7 +64,11 @@ export default {
     },
     cover: {
       type: String,
-      default: "https://api.arthurdanjou.fr/pictures/default.png"
+      default: "default.png"
+    },
+    lightBg: {
+      type: Number,
+      default: false
     }
   },
   computed: {
@@ -75,5 +91,6 @@ export default {
   min-height: 20rem;
   background-position: center;
   background-size: cover;
+  @apply bg-opacity-50;
 }
 </style>
diff --git a/src/components/Service.vue b/src/components/Service.vue
new file mode 100644
index 0000000..e9b19e6
--- /dev/null
+++ b/src/components/Service.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="flex flex-col items-center m-4 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer">
+    <div>
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Service",
+  props: {
+    title: {
+      default: 'Title',
+      type: String
+    },
+    description: {
+      default: 'Description',
+      type: String
+    },
+    cover: {
+      default: 'default.png',
+      type: String
+    },
+    price: {
+      default: 0,
+      type: Number
+    },
+    bestSeller: {
+      default: false,
+      type: Boolean
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Skill.vue b/src/components/Skill.vue
index d7ec469..3c2b686 100644
--- a/src/components/Skill.vue
+++ b/src/components/Skill.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="m-4 md:w-48 h-32 w-2/3 p-1 md:p-2 skill border-gray-900 border-2 bg-gray-300 duration-300 rounded-3xl" :class="'hover:bg-'+color">
+  <div class="m-4 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
-        COVER
+        <img alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
       </div>
       <h1 class="md:text-2xl text-lg font-bold">{{skill}}</h1>
     </div>
@@ -23,14 +23,11 @@ export default {
     },
     cover: {
       type: String,
-      default: "https://api.arthurdanjou.fr/files/default.png"
+      default: "logo.jpg"
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.skill {
-
-}
 </style>
diff --git a/src/components/Work.vue b/src/components/Work.vue
new file mode 100644
index 0000000..df46e39
--- /dev/null
+++ b/src/components/Work.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="m-4 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
+    <div class="w-full h-full flex flex-col justify-center items-center">
+      <div>
+        <img alt="Project Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
+      </div>
+      <div class="text-center">
+        <h1 class="md:text-2xl text-lg font-bold">{{ title }}</h1>
+        <a :href="url" :class="'text-' + color + '-500'">{{ formatLink }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Work",
+  props: {
+    title: {
+      type: String,
+      default: 'Title'
+    },
+    url: {
+      type: String,
+      default: 'https://arthurdanjou.fr'
+    },
+    cover: {
+      type: String,
+      default: 'default.png'
+    },
+    color: {
+      type: String,
+      default: 'white'
+    }
+  },
+  computed: {
+    formatLink() {
+      return this.url.replace('https://', '').replace('http://', '')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/WorkSkill.vue b/src/components/WorkSkill.vue
new file mode 100644
index 0000000..01ec689
--- /dev/null
+++ b/src/components/WorkSkill.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="m-4 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
+    <div class="w-full h-full flex flex-col justify-center items-center">
+      <div>
+        <img alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
+      </div>
+      <h1 class="md:text-2xl text-lg font-bold">{{skill}}</h1>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WorkSkill",
+  props: {
+    skill: {
+      type: String,
+      default: "Rien"
+    },
+    color: {
+      type: String,
+      default: "red-100"
+    },
+    cover: {
+      type: String,
+      default: "logo.jpg"
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
new file mode 100644
index 0000000..898e489
--- /dev/null
+++ b/src/locales/en-US.ts
@@ -0,0 +1,12 @@
+import axios from "axios";
+import {Axios} from "../../config";
+
+export default async function () {
+  let informations = {}
+  const {data: translations} = await axios.get(Axios.baseURL + 'translations')
+  translations.map((item: any) => {
+    const { code, en } = item
+    informations = { ...informations, [code]: en }
+  })
+  return informations
+}
diff --git a/src/locales/fr-FR.ts b/src/locales/fr-FR.ts
new file mode 100644
index 0000000..ef49e3e
--- /dev/null
+++ b/src/locales/fr-FR.ts
@@ -0,0 +1,12 @@
+import axios from "axios";
+import {Axios} from "../../config";
+
+export default async function () {
+  let informations = {}
+  const {data: translations} = await axios.get(Axios.baseURL + 'translations')
+  translations.map((item: any) => {
+    const { code, fr } = item
+    informations = { ...informations, [code]: fr }
+  })
+  return informations
+}
diff --git a/src/tailwind.config.js b/src/tailwind.config.js
index 1a6fcfd..b9f266d 100644
--- a/src/tailwind.config.js
+++ b/src/tailwind.config.js
@@ -1,166 +1,89 @@
+const colors = require('tailwindcss/colors')
+
 module.exports = {
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: false,
-  },
   purge: [],
-  prefix: '',
-  important: false,
-  separator: ':',
-  darkMode: 'class',
+  presets: [],
+  darkMode: 'class', // or 'media' or 'class'
   theme: {
     screens: {
       sm: '640px',
       md: '768px',
       lg: '1024px',
       xl: '1280px',
+      '2xl': '1536px',
     },
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
 
-      black: '#000',
-      white: '#fff',
-
+      black: colors.black,
+      white: colors.white,
+      rose: colors.rose,
+      pink: colors.pink,
+      fuchsia: colors.fuchsia,
+      purple: colors.purple,
+      violet: colors.violet,
+      indigo: colors.indigo,
+      blue: colors.blue,
+      lightBlue: colors.lightBlue,
+      cyan: colors.cyan,
+      teal: colors.teal,
+      emerald: colors.emerald,
+      green: colors.green,
+      lime: colors.lime,
+      yellow: colors.yellow,
+      amber: colors.amber,
+      orange: colors.orange,
+      red: colors.red,
+      warmGray: colors.warmGray,
+      trueGray: colors.trueGray,
+      gray: colors.gray,
+      coolGray: colors.coolGray,
+      blueGray: colors.blueGray,
       dark: {
         100: '#272727',
         200: '#121212',
+        700: 'rgb(112,112,112)',
         800: '#212121',
         900: 'rgba(255,255,255,0.6)'
       },
-
-      gray: {
-        100: '#f7fafc',
-        200: '#edf2f7',
-        300: '#e2e8f0',
-        400: '#cbd5e0',
-        500: '#a0aec0',
-        600: '#718096',
-        700: '#4a5568',
-        800: '#2d3748',
-        900: '#1a202c',
-      },
-      red: {
-        100: '#fff5f5',
-        200: '#fed7d7',
-        300: '#feb2b2',
-        400: '#fc8181',
-        500: '#f56565',
-        600: '#e53e3e',
-        700: '#c53030',
-        800: '#9b2c2c',
-        900: '#742a2a',
-      },
-      orange: {
-        100: '#fffaf0',
-        200: '#feebc8',
-        300: '#fbd38d',
-        400: '#f6ad55',
-        500: '#ed8936',
-        600: '#dd6b20',
-        700: '#c05621',
-        800: '#9c4221',
-        900: '#7b341e',
-      },
-      yellow: {
-        100: '#fffff0',
-        200: '#fefcbf',
-        300: '#faf089',
-        400: '#f6e05e',
-        500: '#ecc94b',
-        600: '#d69e2e',
-        700: '#b7791f',
-        800: '#975a16',
-        900: '#744210',
-      },
-      green: {
-        100: '#f0fff4',
-        200: '#c6f6d5',
-        300: '#9ae6b4',
-        400: '#68d391',
-        500: '#48bb78',
-        600: '#38a169',
-        700: '#2f855a',
-        800: '#276749',
-        900: '#22543d',
-      },
-      teal: {
-        100: '#e6fffa',
-        200: '#b2f5ea',
-        300: '#81e6d9',
-        400: '#4fd1c5',
-        500: '#38b2ac',
-        600: '#319795',
-        700: '#2c7a7b',
-        800: '#285e61',
-        900: '#234e52',
-      },
-      blue: {
-        100: '#ebf8ff',
-        200: '#bee3f8',
-        300: '#90cdf4',
-        400: '#63b3ed',
-        500: '#4299e1',
-        600: '#3182ce',
-        700: '#2b6cb0',
-        800: '#2c5282',
-        900: '#2a4365',
-      },
-      indigo: {
-        100: '#ebf4ff',
-        200: '#c3dafe',
-        300: '#a3bffa',
-        400: '#7f9cf5',
-        500: '#667eea',
-        600: '#5a67d8',
-        700: '#4c51bf',
-        800: '#434190',
-        900: '#3c366b',
-      },
-      purple: {
-        100: '#faf5ff',
-        200: '#e9d8fd',
-        300: '#d6bcfa',
-        400: '#b794f4',
-        500: '#9f7aea',
-        600: '#805ad5',
-        700: '#6b46c1',
-        800: '#553c9a',
-        900: '#44337a',
-      },
-      pink: {
-        100: '#fff5f7',
-        200: '#fed7e2',
-        300: '#fbb6ce',
-        400: '#f687b3',
-        500: '#ed64a6',
-        600: '#d53f8c',
-        700: '#b83280',
-        800: '#97266d',
-        900: '#702459',
-      },
     },
     spacing: {
       px: '1px',
-      '0': '0',
-      '1': '0.25rem',
-      '2': '0.5rem',
-      '3': '0.75rem',
-      '4': '1rem',
-      '5': '1.25rem',
-      '6': '1.5rem',
-      '8': '2rem',
-      '10': '2.5rem',
-      '12': '3rem',
-      '16': '4rem',
-      '20': '5rem',
-      '24': '6rem',
-      '32': '8rem',
-      '40': '10rem',
-      '48': '12rem',
-      '56': '14rem',
-      '64': '16rem',
-      'blog': '25rem',
+      0: '0px',
+      0.5: '0.125rem',
+      1: '0.25rem',
+      1.5: '0.375rem',
+      2: '0.5rem',
+      2.5: '0.625rem',
+      3: '0.75rem',
+      3.5: '0.875rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      7: '1.75rem',
+      8: '2rem',
+      9: '2.25rem',
+      10: '2.5rem',
+      11: '2.75rem',
+      12: '3rem',
+      14: '3.5rem',
+      16: '4rem',
+      20: '5rem',
+      24: '6rem',
+      28: '7rem',
+      32: '8rem',
+      36: '9rem',
+      40: '10rem',
+      44: '11rem',
+      48: '12rem',
+      52: '13rem',
+      56: '14rem',
+      60: '15rem',
+      64: '16rem',
+      72: '18rem',
+      80: '20rem',
+      96: '24rem',
       '1/2': '50%',
       '1/3': '33.333333%',
       '2/3': '66.666667%',
@@ -187,21 +110,28 @@ module.exports = {
       '9/12': '75%',
       '10/12': '83.333333%',
       '11/12': '91.666667%',
+      full: '100%',
     },
-    backgroundColor: theme => theme('colors'),
+    animation: {
+      none: 'none',
+      spin: 'spin 1s linear infinite',
+      ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+      pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      bounce: 'bounce 1s infinite',
+    },
+    backgroundColor: (theme) => theme('colors'),
     backgroundImage: {
       none: 'none',
-      'gradient-to-t': 'linear-gradient(to top, var(--gradient-color-stops))',
-      'gradient-to-tr': 'linear-gradient(to top right, var(--gradient-color-stops))',
-      'gradient-to-r': 'linear-gradient(to right, var(--gradient-color-stops))',
-      'gradient-to-br': 'linear-gradient(to bottom right, var(--gradient-color-stops))',
-      'gradient-to-b': 'linear-gradient(to bottom, var(--gradient-color-stops))',
-      'gradient-to-bl': 'linear-gradient(to bottom left, var(--gradient-color-stops))',
-      'gradient-to-l': 'linear-gradient(to left, var(--gradient-color-stops))',
-      'gradient-to-tl': 'linear-gradient(to top left, var(--gradient-color-stops))',
+      'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
+      'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
+      'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
+      'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
+      'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
+      'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
+      'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
+      'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
     },
-    gradientColorStops: theme => theme('colors'),
-    backgroundOpacity: theme => theme('opacity'),
+    backgroundOpacity: (theme) => theme('opacity'),
     backgroundPosition: {
       bottom: 'bottom',
       center: 'center',
@@ -218,15 +148,15 @@ module.exports = {
       cover: 'cover',
       contain: 'contain',
     },
-    borderColor: theme => ({
+    borderColor: (theme) => ({
       ...theme('colors'),
-      default: theme('colors.gray.300', 'currentColor'),
+      DEFAULT: theme('colors.gray.200', 'currentColor'),
     }),
-    borderOpacity: theme => theme('opacity'),
+    borderOpacity: (theme) => theme('opacity'),
     borderRadius: {
-      none: '0',
+      none: '0px',
       sm: '0.125rem',
-      default: '0.25rem',
+      DEFAULT: '0.25rem',
       md: '0.375rem',
       lg: '0.5rem',
       xl: '0.75rem',
@@ -235,24 +165,22 @@ module.exports = {
       full: '9999px',
     },
     borderWidth: {
-      default: '1px',
-      '0': '0',
-      '2': '2px',
-      '4': '4px',
-      '8': '8px',
+      DEFAULT: '1px',
+      0: '0px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
     },
     boxShadow: {
-      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
       sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
       md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
       lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
       xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
       '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
       inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+      white: '0 4px 4px -1px rgba(255,255,255,0.9), 0 2px 2px -1px rgba(255,255,255,0.94)',
       none: 'none',
-      white: '0 4px 4px -1px rgba(255,255,255,0.9), 0 2px 2px -1px rgba(255,255,255,0.94)'
     },
     container: {},
     cursor: {
@@ -264,30 +192,28 @@ module.exports = {
       move: 'move',
       'not-allowed': 'not-allowed',
     },
-    divideColor: theme => theme('borderColor'),
-    divideOpacity: theme => theme('borderOpacity'),
-    divideWidth: theme => theme('borderWidth'),
-    fill: theme => ({
-      current: 'currentColor',
-      ...theme('colors')
-    }),
+    divideColor: (theme) => theme('borderColor'),
+    divideOpacity: (theme) => theme('borderOpacity'),
+    divideWidth: (theme) => theme('borderWidth'),
+    fill: { current: 'currentColor' },
     flex: {
-      '1': '1 1 0%',
+      1: '1 1 0%',
       auto: '1 1 auto',
       initial: '0 1 auto',
       none: 'none',
     },
     flexGrow: {
-      '0': '0',
-      default: '1',
+      0: '0',
+      DEFAULT: '1',
     },
     flexShrink: {
-      '0': '0',
-      default: '1',
+      0: '0',
+      DEFAULT: '1',
     },
-    fontfontFamily: {
+    fontFamily: {
       sans: [
-        'raleway',
+        '"Raleway"',
+        'ui-sans-serif',
         'system-ui',
         '-apple-system',
         'BlinkMacSystemFont',
@@ -302,24 +228,37 @@ module.exports = {
         '"Segoe UI Symbol"',
         '"Noto Color Emoji"',
       ],
-      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
-      mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
+      serif: ['raleway', 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      mono: [
+        'raleway',
+        'ui-monospace',
+        'SFMono-Regular',
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        '"Liberation Mono"',
+        '"Courier New"',
+        'monospace',
+      ],
     },
     fontSize: {
-      xs: '0.75rem',
-      sm: '0.875rem',
-      base: '1rem',
-      lg: '1.125rem',
-      xl: '1.25rem',
-      '2xl': '1.5rem',
-      '3xl': '1.875rem',
-      '4xl': '2.25rem',
-      '5xl': '3rem',
-      '6xl': '4rem',
+      xs: ['0.75rem', { lineHeight: '1rem' }],
+      sm: ['0.875rem', { lineHeight: '1.25rem' }],
+      base: ['1rem', { lineHeight: '1.5rem' }],
+      lg: ['1.125rem', { lineHeight: '1.75rem' }],
+      xl: ['1.25rem', { lineHeight: '1.75rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2rem' }],
+      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+      '5xl': ['3rem', { lineHeight: '1' }],
+      '6xl': ['3.75rem', { lineHeight: '1' }],
+      '7xl': ['4.5rem', { lineHeight: '1' }],
+      '8xl': ['6rem', { lineHeight: '1' }],
+      '9xl': ['8rem', { lineHeight: '1' }],
     },
     fontWeight: {
-      hairline: '100',
-      thin: '200',
+      thin: '100',
+      extralight: '200',
       light: '300',
       normal: '400',
       medium: '500',
@@ -328,173 +267,20 @@ module.exports = {
       extrabold: '800',
       black: '900',
     },
-    height: theme => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      full: '100%',
-      screen: '100vh',
-    }),
-    inset: theme => ({
-      '0': '0',
-      ...theme('spacing'),
-      auto: 'auto',
-    }),
-    letterSpacing: {
-      tighter: '-0.05em',
-      tight: '-0.025em',
-      normal: '0',
-      wide: '0.025em',
-      wider: '0.05em',
-      widest: '0.1em',
-    },
-    lineHeight: {
-      none: '1',
-      tight: '1.25',
-      snug: '1.375',
-      normal: '1.5',
-      relaxed: '1.625',
-      loose: '2',
-      '3': '.75rem',
-      '4': '1rem',
-      '5': '1.25rem',
-      '6': '1.5rem',
-      '7': '1.75rem',
-      '8': '2rem',
-      '9': '2.25rem',
-      '10': '2.5rem',
-    },
-    listStyleType: {
-      none: 'none',
-      disc: 'disc',
-      decimal: 'decimal',
-    },
-    margin: (theme, { negative }) => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      ...negative(theme('spacing')),
-    }),
-    maxHeight: {
-      full: '100%',
-      screen: '100vh',
-    },
-    maxWidth: (theme, { breakpoints }) => ({
-      none: 'none',
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      full: '100%',
-      ...breakpoints(theme('screens')),
-    }),
-    minHeight: {
-      '0': '0',
-      full: '100%',
-      screen: '100vh',
-    },
-    minWidth: {
-      '0': '0',
-      full: '100%',
-    },
-    objectPosition: {
-      bottom: 'bottom',
-      center: 'center',
-      left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
-      right: 'right',
-      'right-bottom': 'right bottom',
-      'right-top': 'right top',
-      top: 'top',
-    },
-    opacity: {
-      '0': '0',
-      '25': '0.25',
-      '50': '0.5',
-      '75': '0.75',
-      '100': '1',
-    },
-    order: {
-      first: '-9999',
-      last: '9999',
-      none: '0',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7',
-      '8': '8',
-      '9': '9',
-      '10': '10',
-      '11': '11',
-      '12': '12',
-    },
-    outline: {
-      none: ['2px solid transparent', '2px'],
-      white: ['2px dotted white', '2px'],
-      black: ['2px dotted black', '2px'],
-    },
-    padding: theme => theme('spacing'),
-    placeholderColor: theme => theme('colors'),
-    placeholderOpacity: theme => theme('opacity'),
-    space: (theme, { negative }) => ({
-      ...theme('spacing'),
-      ...negative(theme('spacing')),
-    }),
-    stroke: {
-      current: 'currentColor',
-    },
-    strokeWidth: {
-      '0': '0',
-      '1': '1',
-      '2': '2',
-    },
-    textColor: theme => theme('colors'),
-    textOpacity: theme => theme('opacity'),
-    width: theme => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      full: '100%',
-      screen: '100vw',
-    }),
-    zIndex: {
-      auto: 'auto',
-      '0': '0',
-      '10': '10',
-      '20': '20',
-      '30': '30',
-      '40': '40',
-      '50': '50',
-    },
-    gap: theme => theme('spacing'),
-    gridTemplateColumns: {
-      none: 'none',
-      '1': 'repeat(1, minmax(0, 1fr))',
-      '2': 'repeat(2, minmax(0, 1fr))',
-      '3': 'repeat(3, minmax(0, 1fr))',
-      '4': 'repeat(4, minmax(0, 1fr))',
-      '5': 'repeat(5, minmax(0, 1fr))',
-      '6': 'repeat(6, minmax(0, 1fr))',
-      '7': 'repeat(7, minmax(0, 1fr))',
-      '8': 'repeat(8, minmax(0, 1fr))',
-      '9': 'repeat(9, minmax(0, 1fr))',
-      '10': 'repeat(10, minmax(0, 1fr))',
-      '11': 'repeat(11, minmax(0, 1fr))',
-      '12': 'repeat(12, minmax(0, 1fr))',
-    },
+    gap: (theme) => theme('spacing'),
+    gradientColorStops: (theme) => theme('colors'),
     gridAutoColumns: {
       auto: 'auto',
       min: 'min-content',
       max: 'max-content',
       fr: 'minmax(0, 1fr)',
     },
+    gridAutoRows: {
+      auto: 'auto',
+      min: 'min-content',
+      max: 'max-content',
+      fr: 'minmax(0, 1fr)',
+    },
     gridColumn: {
       auto: 'auto',
       'span-1': 'span 1 / span 1',
@@ -511,52 +297,37 @@ module.exports = {
       'span-12': 'span 12 / span 12',
       'span-full': '1 / -1',
     },
-    gridColumnStart: {
-      auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7',
-      '8': '8',
-      '9': '9',
-      '10': '10',
-      '11': '11',
-      '12': '12',
-      '13': '13',
-    },
     gridColumnEnd: {
       auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7',
-      '8': '8',
-      '9': '9',
-      '10': '10',
-      '11': '11',
-      '12': '12',
-      '13': '13',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13',
     },
-    gridTemplateRows: {
-      none: 'none',
-      '1': 'repeat(1, minmax(0, 1fr))',
-      '2': 'repeat(2, minmax(0, 1fr))',
-      '3': 'repeat(3, minmax(0, 1fr))',
-      '4': 'repeat(4, minmax(0, 1fr))',
-      '5': 'repeat(5, minmax(0, 1fr))',
-      '6': 'repeat(6, minmax(0, 1fr))',
-    },
-    gridAutoRows: {
+    gridColumnStart: {
       auto: 'auto',
-      min: 'min-content',
-      max: 'max-content',
-      fr: 'minmax(0, 1fr)',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13',
     },
     gridRow: {
       auto: 'auto',
@@ -570,23 +341,23 @@ module.exports = {
     },
     gridRowStart: {
       auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
     },
     gridRowEnd: {
       auto: 'auto',
-      '1': '1',
-      '2': '2',
-      '3': '3',
-      '4': '4',
-      '5': '5',
-      '6': '6',
-      '7': '7',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
     },
     transformOrigin: {
       center: 'center',
@@ -599,109 +370,70 @@ module.exports = {
       left: 'left',
       'top-left': 'top left',
     },
-    scale: {
-      '0': '0',
-      '50': '.5',
-      '75': '.75',
-      '90': '.9',
-      '95': '.95',
-      '100': '1',
-      '105': '1.05',
-      '110': '1.1',
-      '125': '1.25',
-      '150': '1.5',
+    gridTemplateColumns: {
+      none: 'none',
+      1: 'repeat(1, minmax(0, 1fr))',
+      2: 'repeat(2, minmax(0, 1fr))',
+      3: 'repeat(3, minmax(0, 1fr))',
+      4: 'repeat(4, minmax(0, 1fr))',
+      5: 'repeat(5, minmax(0, 1fr))',
+      6: 'repeat(6, minmax(0, 1fr))',
+      7: 'repeat(7, minmax(0, 1fr))',
+      8: 'repeat(8, minmax(0, 1fr))',
+      9: 'repeat(9, minmax(0, 1fr))',
+      10: 'repeat(10, minmax(0, 1fr))',
+      11: 'repeat(11, minmax(0, 1fr))',
+      12: 'repeat(12, minmax(0, 1fr))',
     },
-    rotate: {
-      '-180': '-180deg',
-      '-90': '-90deg',
-      '-45': '-45deg',
-      '-12': '-12deg',
-      '-6': '-6deg',
-      '-3': '-3deg',
-      '-2': '-2deg',
-      '-1': '-1deg',
-      '0': '0',
-      '1': '1deg',
-      '2': '2deg',
-      '3': '3deg',
-      '6': '6deg',
-      '12': '12deg',
-      '45': '45deg',
-      '90': '90deg',
-      '180': '180deg',
+    gridTemplateRows: {
+      none: 'none',
+      1: 'repeat(1, minmax(0, 1fr))',
+      2: 'repeat(2, minmax(0, 1fr))',
+      3: 'repeat(3, minmax(0, 1fr))',
+      4: 'repeat(4, minmax(0, 1fr))',
+      5: 'repeat(5, minmax(0, 1fr))',
+      6: 'repeat(6, minmax(0, 1fr))',
     },
-    translate: (theme, { negative }) => ({
+    height: (theme) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      screen: '100vh',
+    }),
+    inset: (theme, { negative }) => ({
+      auto: 'auto',
       ...theme('spacing'),
       ...negative(theme('spacing')),
-      '-full': '-100%',
-      '-1/2': '-50%',
       '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
       full: '100%',
+      '-1/2': '-50%',
+      '-1/3': '-33.333333%',
+      '-2/3': '-66.666667%',
+      '-1/4': '-25%',
+      '-2/4': '-50%',
+      '-3/4': '-75%',
+      '-full': '-100%',
     }),
-    skew: {
-      '-12': '-12deg',
-      '-6': '-6deg',
-      '-3': '-3deg',
-      '-2': '-2deg',
-      '-1': '-1deg',
-      '0': '0',
-      '1': '1deg',
-      '2': '2deg',
-      '3': '3deg',
-      '6': '6deg',
-      '12': '12deg',
-    },
-    transitionProperty: {
-      none: 'none',
-      all: 'all',
-      default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
-      colors: 'background-color, border-color, color, fill, stroke',
-      opacity: 'opacity',
-      shadow: 'box-shadow',
-      transform: 'transform',
-    },
-    transitionTimingFunction: {
-      linear: 'linear',
-      in: 'cubic-bezier(0.4, 0, 1, 1)',
-      out: 'cubic-bezier(0, 0, 0.2, 1)',
-      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-    },
-    transitionDuration: {
-      '75': '75ms',
-      '100': '100ms',
-      '150': '150ms',
-      '200': '200ms',
-      '300': '300ms',
-      '500': '500ms',
-      '700': '700ms',
-      '1000': '1000ms',
-    },
-    transitionDelay: {
-      '75': '75ms',
-      '100': '100ms',
-      '150': '150ms',
-      '200': '200ms',
-      '300': '300ms',
-      '500': '500ms',
-      '700': '700ms',
-      '1000': '1000ms',
-    },
-    animation: {
-      none: 'none',
-      spin: 'spin 1s linear infinite',
-      ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-      pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-      bounce: 'bounce 1s infinite',
-    },
     keyframes: {
       spin: {
-        to: { transform: 'rotate(360deg)' },
+        to: {
+          transform: 'rotate(360deg)',
+        },
       },
       ping: {
-        '75%, 100%': { transform: 'scale(2)', opacity: '0' },
+        '75%, 100%': {
+          transform: 'scale(2)',
+          opacity: '0',
+        },
       },
       pulse: {
-        '50%': { opacity: '.5' },
+        '50%': {
+          opacity: '.5',
+        },
       },
       bounce: {
         '0%, 100%': {
@@ -714,34 +446,327 @@ module.exports = {
         },
       },
     },
+    letterSpacing: {
+      tighter: '-0.05em',
+      tight: '-0.025em',
+      normal: '0em',
+      wide: '0.025em',
+      wider: '0.05em',
+      widest: '0.1em',
+    },
+    lineHeight: {
+      none: '1',
+      tight: '1.25',
+      snug: '1.375',
+      normal: '1.5',
+      relaxed: '1.625',
+      loose: '2',
+      3: '.75rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      7: '1.75rem',
+      8: '2rem',
+      9: '2.25rem',
+      10: '2.5rem',
+    },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+    },
+    margin: (theme, { negative }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
+    maxHeight: (theme) => ({
+      ...theme('spacing'),
+      full: '100%',
+      screen: '100vh',
+    }),
+    maxWidth: (theme, { breakpoints }) => ({
+      none: 'none',
+      0: '0rem',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      '7xl': '80rem',
+      full: '100%',
+      min: 'min-content',
+      max: 'max-content',
+      prose: '65ch',
+      ...breakpoints(theme('screens')),
+    }),
+    minHeight: {
+      0: '0px',
+      full: '100%',
+      screen: '100vh',
+    },
+    minWidth: {
+      0: '0px',
+      full: '100%',
+      min: 'min-content',
+      max: 'max-content',
+    },
+    objectPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    opacity: {
+      0: '0',
+      5: '0.05',
+      10: '0.1',
+      20: '0.2',
+      25: '0.25',
+      30: '0.3',
+      40: '0.4',
+      50: '0.5',
+      60: '0.6',
+      70: '0.7',
+      75: '0.75',
+      80: '0.8',
+      90: '0.9',
+      95: '0.95',
+      100: '1',
+    },
+    order: {
+      first: '-9999',
+      last: '9999',
+      none: '0',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+    },
+    outline: {
+      none: ['2px solid transparent', '2px'],
+      white: ['2px dotted white', '2px'],
+      black: ['2px dotted black', '2px'],
+    },
+    padding: (theme) => theme('spacing'),
+    placeholderColor: (theme) => theme('colors'),
+    placeholderOpacity: (theme) => theme('opacity'),
+    ringColor: (theme) => ({
+      DEFAULT: theme('colors.blue.500', '#3b82f6'),
+      ...theme('colors'),
+    }),
+    ringOffsetColor: (theme) => theme('colors'),
+    ringOffsetWidth: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    ringOpacity: (theme) => ({
+      DEFAULT: '0.5',
+      ...theme('opacity'),
+    }),
+    ringWidth: {
+      DEFAULT: '3px',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    rotate: {
+      '-180': '-180deg',
+      '-90': '-90deg',
+      '-45': '-45deg',
+      '-12': '-12deg',
+      '-6': '-6deg',
+      '-3': '-3deg',
+      '-2': '-2deg',
+      '-1': '-1deg',
+      0: '0deg',
+      1: '1deg',
+      2: '2deg',
+      3: '3deg',
+      6: '6deg',
+      12: '12deg',
+      45: '45deg',
+      90: '90deg',
+      180: '180deg',
+    },
+    scale: {
+      0: '0',
+      50: '.5',
+      75: '.75',
+      90: '.9',
+      95: '.95',
+      100: '1',
+      105: '1.05',
+      110: '1.1',
+      125: '1.25',
+      150: '1.5',
+    },
+    skew: {
+      '-12': '-12deg',
+      '-6': '-6deg',
+      '-3': '-3deg',
+      '-2': '-2deg',
+      '-1': '-1deg',
+      0: '0deg',
+      1: '1deg',
+      2: '2deg',
+      3: '3deg',
+      6: '6deg',
+      12: '12deg',
+    },
+    space: (theme, { negative }) => ({
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
+    stroke: {
+      current: 'currentColor',
+    },
+    strokeWidth: {
+      0: '0',
+      1: '1',
+      2: '2',
+    },
+    textColor: (theme) => theme('colors'),
+    textOpacity: (theme) => theme('opacity'),
+    transitionDuration: {
+      DEFAULT: '150ms',
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms',
+    },
+    transitionDelay: {
+      75: '75ms',
+      100: '100ms',
+      150: '150ms',
+      200: '200ms',
+      300: '300ms',
+      500: '500ms',
+      700: '700ms',
+      1000: '1000ms',
+    },
+    transitionProperty: {
+      none: 'none',
+      all: 'all',
+      DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+      colors: 'background-color, border-color, color, fill, stroke',
+      opacity: 'opacity',
+      shadow: 'box-shadow',
+      transform: 'transform',
+    },
+    transitionTimingFunction: {
+      DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      linear: 'linear',
+      in: 'cubic-bezier(0.4, 0, 1, 1)',
+      out: 'cubic-bezier(0, 0, 0.2, 1)',
+      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+    translate: (theme, { negative }) => ({
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      full: '100%',
+      '-1/2': '-50%',
+      '-1/3': '-33.333333%',
+      '-2/3': '-66.666667%',
+      '-1/4': '-25%',
+      '-2/4': '-50%',
+      '-3/4': '-75%',
+      '-full': '-100%',
+    }),
+    width: (theme) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      screen: '100vw',
+      min: 'min-content',
+      max: 'max-content',
+    }),
+    zIndex: {
+      auto: 'auto',
+      0: '0',
+      10: '10',
+      20: '20',
+      30: '30',
+      40: '40',
+      50: '50',
+    },
   },
+  variantOrder: [
+    'first',
+    'last',
+    'odd',
+    'even',
+    'visited',
+    'checked',
+    'group-hover',
+    'group-focus',
+    'focus-within',
+    'hover',
+    'focus',
+    'focus-visible',
+    'active',
+    'disabled',
+  ],
   variants: {
-    accessibility: ['responsive', 'focus'],
+    accessibility: ['responsive', 'focus-within', 'focus'],
     alignContent: ['responsive'],
     alignItems: ['responsive'],
     alignSelf: ['responsive'],
+    animation: ['responsive'],
     appearance: ['responsive'],
     backgroundAttachment: ['responsive'],
     backgroundClip: ['responsive'],
-    backgroundColor: ['dark', 'hover', 'responsive'],
-    backgroundImage: ['dark', 'responsive'],
-    gradientColorStops: ['responsive', 'hover', 'focus'],
-    backgroundOpacity: ['responsive', 'hover', 'focus'],
+    backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
+    backgroundImage: ['responsive'],
+    backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
     borderCollapse: ['responsive'],
-    borderColor: ['dark','hover', 'responsive'],
-    borderOpacity: ['responsive', 'hover', 'focus'],
+    borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
+    borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus', 'dark'],
     borderRadius: ['responsive'],
     borderStyle: ['responsive'],
     borderWidth: ['responsive'],
-    boxShadow: ['dark', 'responsive', 'hover', 'focus'],
+    boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus', 'dark'],
     boxSizing: ['responsive'],
+    clear: ['responsive'],
     container: ['responsive'],
     cursor: ['responsive'],
     display: ['responsive'],
-    divideColor: ['responsive'],
+    divideColor: ['responsive', 'dark'],
     divideOpacity: ['responsive'],
     divideStyle: ['responsive'],
     divideWidth: ['responsive'],
@@ -752,13 +777,25 @@ module.exports = {
     flexShrink: ['responsive'],
     flexWrap: ['responsive'],
     float: ['responsive'],
-    clear: ['responsive'],
     fontFamily: ['responsive'],
     fontSize: ['responsive'],
     fontSmoothing: ['responsive'],
-    fontVariantNumeric: ['responsive'],
     fontStyle: ['responsive'],
-    fontWeight: ['responsive', 'hover', 'focus'],
+    fontVariantNumeric: ['responsive'],
+    fontWeight: ['responsive'],
+    gap: ['responsive'],
+    gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
+    gridAutoColumns: ['responsive'],
+    gridAutoFlow: ['responsive'],
+    gridAutoRows: ['responsive'],
+    gridColumn: ['responsive'],
+    gridColumnEnd: ['responsive'],
+    gridColumnStart: ['responsive'],
+    gridRow: ['responsive'],
+    gridRowEnd: ['responsive'],
+    gridRowStart: ['responsive'],
+    gridTemplateColumns: ['responsive'],
+    gridTemplateRows: ['responsive'],
     height: ['responsive'],
     inset: ['responsive'],
     justifyContent: ['responsive'],
@@ -775,58 +812,52 @@ module.exports = {
     minWidth: ['responsive'],
     objectFit: ['responsive'],
     objectPosition: ['responsive'],
-    opacity: ['responsive', 'hover', 'focus'],
+    opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
     order: ['responsive'],
-    outline: ['responsive', 'focus'],
+    outline: ['responsive', 'focus-within', 'focus'],
     overflow: ['responsive'],
     overscrollBehavior: ['responsive'],
     padding: ['responsive'],
     placeContent: ['responsive'],
     placeItems: ['responsive'],
     placeSelf: ['responsive'],
-    placeholderColor: ['dark', 'responsive', 'focus'],
+    placeholderColor: ['responsive', 'dark', 'focus'],
     placeholderOpacity: ['responsive', 'focus'],
     pointerEvents: ['responsive'],
     position: ['responsive'],
     resize: ['responsive'],
+    ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
+    ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
+    ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
+    ringOpacity: ['responsive', 'focus-within', 'focus'],
+    ringWidth: ['responsive', 'focus-within', 'focus'],
+    rotate: ['responsive', 'hover', 'focus'],
+    scale: ['responsive', 'hover', 'focus'],
+    skew: ['responsive', 'hover', 'focus'],
     space: ['responsive'],
     stroke: ['responsive'],
     strokeWidth: ['responsive'],
     tableLayout: ['responsive'],
     textAlign: ['responsive'],
-    textColor: ['dark', 'hover', 'responsive'],
-    textOpacity: ['responsive', 'hover', 'focus'],
-    textDecoration: ['responsive', 'hover', 'focus'],
+    textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
+    textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
+    textOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
+    textOverflow: ['responsive'],
     textTransform: ['responsive'],
+    transform: ['responsive'],
+    transformOrigin: ['responsive'],
+    transitionDelay: ['responsive'],
+    transitionDuration: ['responsive'],
+    transitionProperty: ['responsive'],
+    transitionTimingFunction: ['responsive'],
+    translate: ['responsive', 'hover', 'focus'],
     userSelect: ['responsive'],
     verticalAlign: ['responsive'],
     visibility: ['responsive'],
     whitespace: ['responsive'],
     width: ['responsive'],
     wordBreak: ['responsive'],
-    zIndex: ['responsive'],
-    gap: ['responsive'],
-    gridAutoFlow: ['responsive'],
-    gridTemplateColumns: ['responsive'],
-    gridAutoColumns: ['responsive'],
-    gridColumn: ['responsive'],
-    gridColumnStart: ['responsive'],
-    gridColumnEnd: ['responsive'],
-    gridTemplateRows: ['responsive'],
-    gridAutoRows: ['responsive'],
-    gridRow: ['responsive'],
-    gridRowStart: ['responsive'],
-    gridRowEnd: ['responsive'],
-    transform: ['responsive'],
-    transformOrigin: ['responsive'],
-    scale: ['responsive', 'hover', 'focus'],
-    rotate: ['responsive', 'hover', 'focus'],
-    translate: ['responsive', 'hover', 'focus'],
-    skew: ['responsive', 'hover', 'focus'],
-    transitionProperty: ['responsive'],
-    transitionTimingFunction: ['responsive'],
-    transitionDuration: ['responsive'],
-    transitionDelay: ['responsive'],
-    animation: ['responsive'],
-  }
+    zIndex: ['responsive', 'focus-within', 'focus'],
+  },
+  plugins: [],
 }
diff --git a/src/templates/layouts/default.vue b/src/templates/layouts/default.vue
index 400b1c0..0f3b17d 100644
--- a/src/templates/layouts/default.vue
+++ b/src/templates/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="dark:bg-dark-200 dark:text-white">
+  <div class="dark:bg-dark-200 dark:text-white font-sans">
     <Header />
-    <Nuxt class="content pt-16 lg:pt-24"/>
+    <Nuxt class="z-10 pt-16 lg:pt-24 content"/>
     <Footer />
   </div>
 </template>
@@ -16,6 +16,6 @@ export default {
 
 <style scoped>
 .content {
-  min-height: calc(100vh - (118px + 96px));
+  min-height: calc(100vh - 118px);
 }
 </style>
diff --git a/src/templates/pages/about.vue b/src/templates/pages/about.vue
index 44c9dba..5715b9c 100644
--- a/src/templates/pages/about.vue
+++ b/src/templates/pages/about.vue
@@ -1,11 +1,13 @@
 <template>
   <main class="about flex flex-col items-center px-5 xl:px-64">
-    <h1 class="mt-16 md:mt-32 title font-bold text-4xl mr-2 inline mb-4">
-      A Propos
-      <svg class="inline-block about-img" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <PageTitle
+      title="A propos"
+      color="orange"
+    >
+      <svg class="inline-block icon" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
       </svg>
-    </h1>
+    </PageTitle>
     <div class="flex flex-col md:flex-row justify-around items-center py-8">
       <div>
         <img class="logo-img rounded-full my-5" src="@/assets/img/Logo.jpg" alt="It's me !" />
@@ -35,44 +37,14 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
         </svg>
       </h3>
-      <div class="flex flex-col items-center md:items-start md:justify-between md:flex-row flex-wrap">
-        <!-- TODO Insert Skills -->
-        <Skill
-          skill="Java"
-          color="white" />
-        <Skill
-          skill="JavaScript"
-          color="white" />
-        <Skill
-          skill="Java"
-          color="white" />
-        <Skill
-          skill="Java"
-          color="white" />
-        <Skill
-          skill="Java"
-          color="white" />
-        <Skill
-          skill="Java"
-          color="white" />
-        <Skill
-          skill="Java"
-          color="white" />
-        <Skill
-          skill="Java"
-          color="white" />
-        <Skill
-          skill="Java"
-          color="white" />
-        <Skill
-          skill="Java"
-          color="white" />
-        <Skill
-          skill="Java"
-          color="white" />
-        <Skill
-          skill="Java"
-          color="white" />
+      <div class="flex flex-row w-full overflow-x-auto">
+        <div v-for="skill in skills">
+          <Skill
+            :skill="skill.title.code"
+            :color="skill.color"
+            :cover="skill.cover.file_name"
+          />
+        </div>
       </div>
     </div>
     <div class="w-full mb-10">
@@ -158,20 +130,13 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
         </svg>
       </h3>
-      <div>
-        <!-- TODO Insert Formations-->
+      <div v-for="formation in formations">
         <Formation
-          title="Autodidacte"
-          description="Apprentissage en autodidacte et en pratiquant"
-          location="At Home 🏠"
-          begin="2015"
-          end="Today" />
-        <Formation
-          title="Baccalauréat"
-          description="Examen spécialités maths & Pc"
-          location="At Passy"
-          begin="2020"
-          end="2021" />
+          :title="formation.title.code"
+          :description="formation.description.code"
+          :location="formation.location"
+          :begin="formation.begin_date"
+          :end="formation.end_date" />
       </div>
     </div>
     <div class="w-full mb-10">
@@ -181,189 +146,147 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
         </svg>
       </h3>
-      <div>
-        <!-- TODO Insert Experiences-->
+      <div v-for="experience in experiences">
         <Experience
-          title="Junior Developer"
-          company="Erisium"
-          description="Chargé des mini-jeux et de l'infrastructure"
-          location="At Home 🏠"
-          begin="2019"
-          end="Today" />
-        <Experience
-          title="FullStack Software & Web Developer"
-          company="ArtDanjProduction"
-          description="Création d'applications web et développement de l'infrastructure"
-          location="At Home 🏠"
-          begin="2019"
-          end="2020" />
+          :title="experience.title.code"
+          :company="experience.company"
+          :description="experience.description.code"
+          :location="experience.location"
+          :begin="experience.begin_date"
+          :end="experience.end_date" />
       </div>
     </div>
     <nuxt-link to="/cv">
-      <div class="flex justify-center items-center font-bold py-4 px-6 bg-orange-300 hover:bg-orange-500 cursor-pointer duration-500 rounded-full dark:text-black">
+      <div class="flex justify-center items-center font-bold py-4 px-6 bg-orange-400 hover:bg-orange-600 cursor-pointer duration-500 rounded-full dark:text-black">
         Télécharger mon CV
         <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
         </svg>
       </div>
     </nuxt-link>
-    <div class="my-10 border-t-2 border-black dark:border-white border-solid w-full" />
-    <h1 class="mb-10 title font-bold text-4xl mr-2 inline mb-4">
-      Environnement
+    <div class="mt-10 border-t-2 border-black dark:border-white border-solid w-full" />
+    <PageTitle
+      title="Environnement"
+      color="orange"
+    >
       <svg class="inline icon" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
       </svg>
-    </h1>
+    </PageTitle>
     <p class="text-lg leading-6 text-justify pb-8">
       Mon environnement de développement permet de gagner en productivité.
       En effet, je m'organise de la sorte à toujours optimiser mon temps de réflexion et de développement.
       Voici donc une liste de tous mes logiciels que j'utilise au quotidien et de mon setup.
     </p>
-    <div class="w-full mb-10">
-      <h3 class="font-bold text-2xl md:text-4xl mb-2">
-        Editeurs de texte
+    <EnvGroup>
+      <EnvTitle title="Editeurs de texte">
         <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
         </svg>
-      </h3>
-      <ul class="list-disc ml-10 dark:text-dark-900 text-gray-800 text-xl">
-        <li>
-          Editeur Java: <span>Intellij Idea Ultimate</span>
-        </li>
-        <li>
-          Editeur Python: <span>Pycharm Ultimate</span>
-        </li>
-        <li>
-          Editeur Web: <span>Webstorm</span>
-        </li>
-        <li>
-          Editeur Go: <span>Goland</span>
-        </li>
-        <li>
-          Editeur de bases de données: <span>DataGrip</span>
-        </li>
-        <li>
-          All-In-One: <span>Jetbrains Toolbox</span>
-        </li>
-        <li>
-          Police d'écriture: <span>Jetbrains Mono</span>
-        </li>
-        <li>
-          Console: <span>GitBash</span>
-        </li>
-        <li>
-          WSL 2: <span>Ubuntu 20.04</span>
-        </li>
-      </ul>
-    </div>
-    <div class="w-full mb-10">
-      <h3 class="font-bold text-2xl md:text-4xl mb-2">
-        Apps & Logiciels
+      </EnvTitle>
+      <EnvList>
+        <EnvListItem title="Editeur Java" content="Intellij Idea Ultimate" link="https://www.jetbrains.com/fr-fr/idea/"/>
+        <EnvListItem title="Editeur Python" content="PyCharm Ultimate" link="https://www.jetbrains.com/fr-fr/pycharm/"/>
+        <EnvListItem title="Editeur Web" content="WebStorm" link="https://www.jetbrains.com/fr-fr/webstorm/"/>
+        <EnvListItem title="Editeur Go" content="GoLand" link="https://www.jetbrains.com/fr-fr/go/"/>
+        <EnvListItem title="Editeur de bases de données" content="DataGrip" link="https://www.jetbrains.com/fr-fr/datagrip/"/>
+        <EnvListItem title="All-In-One" content="Jetbrains Toolbox" link="https://www.jetbrains.com/toolbox-app/"/>
+        <EnvListItem title="Police" content="Jetbrains Mono" link="https://www.jetbrains.com/lp/mono/"/>
+        <EnvListItem title="Console" content="HyperJs" link="https://hyper.is/"/>
+        <EnvListItem title="WSL 2" content="Ubuntu 20.04" link="https://www.microsoft.com/en-us/p/ubuntu-2004-lts/9n6svws3rx71?activetab=pivot:overviewtab"/>
+      </EnvList>
+    </EnvGroup>
+    <EnvGroup>
+      <EnvTitle title="Apps & Logiciels">
         <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
         </svg>
-      </h3>
-      <ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl">
-        <li>
-          Email: <span>Courrier by Microsoft</span>
-        </li>
-        <li>
-          Client VPN: <span>Pritunl</span>
-        </li>
-        <li>
-          Client FTP: <span>WinSCP</span>
-        </li>
-        <li>
-          Navigateur web: <span>Intellij Idea Ultimate</span>
-        </li>
-        <li>
-          Organisation: <span>Trello</span> & <span>Notion</span>
-        </li>
-        <li>
-          Création / graphisme: <span>Affinity Designer</span>
-        </li>
-        <li>
-          Communication: <span>Discord</span>, <span>Slack</span> & <span>Mattermost</span>
-        </li>
-      </ul>
-    </div>
-    <div class="w-full mb-10">
-      <h3 class="font-bold text-2xl md:text-4xl mb-2">
-        Hébergement
+      </EnvTitle>
+      <EnvList>
+        <EnvListItem title="Email" content="Courrier by Microsoft" link="https://www.microsoft.com/fr-fr/p/courrier-et-calendrier/9wzdncrfhvqm?activetab=pivot:overviewtab"/>
+        <EnvListItem title="Client VPN" content="Pritunl" link="https://pritunl.com/"/>
+        <EnvListItem title="Client FTP" content="WinSCP" link="https://winscp.net/eng/download.php"/>
+        <EnvListItem title="Navigateur Web" content="FireFox Developer Edition" link="https://www.mozilla.org/fr/firefox/developer/"/>
+        <EnvListItem title="Organisation" content="Notion" link="https://www.notion.so/"/>
+        <EnvListItem title="Organisation" content="Trello" link="https://www.trello.com/"/>
+        <EnvListItem title="Création / graphisme" content="Affinity Designer" link="https://affinity.serif.com/fr/designer/"/>
+        <EnvListItem title="Communication" content="Slack" link="https://slack.com/intl/fr-fr/"/>
+        <EnvListItem title="Communication" content="Discord" link="https://www.discord.com/"/>
+        <EnvListItem title="Communication" content="Mattermost" link="https://mattermost.com/"/>
+      </EnvList>
+    </EnvGroup>
+    <EnvGroup>
+      <EnvTitle title="Hébergement">
         <svg class="inline icon"  height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
         </svg>
-      </h3>
-      <ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl">
-        <li>
-          Hébergeur VPS: <span>PulseHeberg</span>
-        </li>
-        <li>
-          Hébergeur nom de domaine: <span>OVH</span>
-        </li>
-      </ul>
-    </div>
-    <div class="w-full mb-10">
-      <h3 class="font-bold text-2xl md:text-4xl mb-2">
-        Setup bureautique
+      </EnvTitle>
+      <EnvList>
+        <EnvListItem title="Hébergeur VPS" content="PulseHeberg" link="https://pulseheberg.com/"/>
+        <EnvListItem title="Nom de domaine" content="OVH" link="https://ovh.com/"/>
+      </EnvList>
+    </EnvGroup>
+    <EnvGroup>
+      <EnvTitle title="Setup bureautique">
         <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
         </svg>
-      </h3>
-      <ul class="list-disc ml-10 text-gray-800 dark:text-dark-900 text-xl">
-        <li>
-          Bureau: <span>Ikea en bois</span>
-        </li>
-        <li>
-          Téléphone: <span>Samsung Galaxy Note 8</span>
-        </li>
-        <li>
-          Ordinateur fixe: <span>Asus i5, 8Go Ram, GTX 950, 1To HDD</span>
-        </li>
-        <li>
-          Ecran: <span>iiyama ProLite E2283HS</span>
-        </li>
-        <li>
-          Clavier : <span>Microsoft</span>
-        </li>
-        <li>
-          Souris: <span>Roccat Kova</span>
-        </li>
-        <li>
-          Ecouteurs: <span>Apple Airpods</span>
-        </li>
-        <li>
-          Casque/Micro: <span>Turtle Beach px22</span>
-        </li>
-      </ul>
-    </div>
+      </EnvTitle>
+      <EnvList>
+        <EnvListItem title="Bureau" content="Ikea en bois"/>
+        <EnvListItem title="Téléphone" content="Samsung Galaxy Note 8" link="https://www.samsung.com/smartphones/galaxy-note8/"/>
+        <EnvListItem title="Ordinateur fixe" content="Asus i5, 8Go Ram, GTX 950, 1To HDD"/>
+        <EnvListItem title="Ecran" content="iiyama ProLite E2283HS" link="https://iiyama.com/fr_fr/produits/prolite-e2283hs-b3/"/>
+        <EnvListItem title="Clavier" content="Microsoft"/>
+        <EnvListItem title="Souris" content="Roccat Kova" link="https://fr.roccat.org/Mice/Kova-AIMO"/>
+        <EnvListItem title="Ecouteurs" content="Apple Airpods" link="https://www.apple.com/fr/airpods/"/>
+        <EnvListItem title="Casque/Micro" content="Turtle Beach px22" link="https://www.amazon.fr/Turtle-Beach-PX22-casque-gaming/dp/B00BDS415I"/>
+      </EnvList>
+    </EnvGroup>
   </main>
 </template>
 
-<script lang="ts">
+<script>
+import EnvGroup from "~/components/EnvGroup.vue";
+import EnvTitle from "~/components/EnvTitle.vue";
+import EnvListItem from "~/components/EnvListItem.vue";
+import EnvList from "~/components/EnvList.vue";
+import Skill from "~/components/Skill.vue";
+import Formation from "~/components/Formation.vue";
+import Experience from "~/components/Experience.vue";
+import PageTitle from "~/components/PageTitle";
 export default {
   name: "about",
+  components: {PageTitle, EnvList, EnvListItem, EnvTitle, EnvGroup, Skill, Formation, Experience},
+  head() {
+    return {
+      title: 'About me - Arthur Danjou'
+    }
+  },
+  data() {
+    return {
+      skills: [],
+      experiences: [],
+      formations: []
+    }
+  },
+  async asyncData({ $axios }) {
+    const {data: skills} = await $axios.get('/skills')
+    const {data: experiences} = await $axios.get('experiences')
+    const {data: formations} = await $axios.get('/formations')
+    return {
+      skills,
+      experiences,
+      formations
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
 .about {
-  .about-img {
-    transform: translate(3px, -10px);
-  }
-
-  .title:after {
-    margin-top: 0.1rem;
-    content: '';
-    height: 2px;
-    width: 100%;
-    display: block;
-    @apply bg-orange-400;
-  }
-
   .logo-img {
     height: 20rem;
   }
-
 }
 </style>
diff --git a/src/templates/pages/blog/_id.vue b/src/templates/pages/blog/_id.vue
index f924ac2..f6770fe 100644
--- a/src/templates/pages/blog/_id.vue
+++ b/src/templates/pages/blog/_id.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="blog flex flex-col items-center px-5 xl:px-64 mb-16 md:mb-32">
+  <main class="flex flex-col items-center px-5 xl:px-64 mb-16 md:mb-32">
     <!-- TODO Titre en blanc et desc en gris lien autre couleur + Définir un autre padding sur les cotés-->
     <div class="mt-8 md:mt-32 flex flex-col justify-around py-8 w-full">
       <h1 class="text-3xl md:text-5xl font-bold">
@@ -18,7 +18,8 @@
           <p>{{ reading_time }} min</p>
         </div>
         <div>
-          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Tags</p>
+          <!-- Todo remove if tags === 0 -->
+          <p :class="tags.size === 0 ? 'hidden': ''" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Tags</p>
           <p>{{formatTags}}</p>
         </div>
       </div>
@@ -33,7 +34,7 @@
       <p class="text-center">
         Merci d'avoir lu jusqu'au bout ! 😊<br class="md:hidden"/>
         Hésite surtout pas à partager l'article sur Twitter
-        Todo : replace par des buttons : - Likes, - Twitter (proposition de tweet), - partage (lien)
+        <!-- Todo : replace par des buttons : - Likes, - Twitter (proposition de tweet), - partage (lien) -->
       </p>
     </div>
   </main>
@@ -42,6 +43,11 @@
 <script>
 export default {
   name: "blog",
+  head() {
+    return {
+      title: 'Blog - Arthur Danjou'
+    }
+  },
   data() {
     return {
       id: this.$route.params.id,
@@ -52,7 +58,7 @@ export default {
       likes: 0,
       date: '',
       cover: '',
-      reading_time: 0
+      reading_time: 0,
     }
   },
   async asyncData({ params, $axios }) {
@@ -65,7 +71,7 @@ export default {
       likes: post.likes,
       date: post.created_at,
       reading_time: post.reading_time,
-      cover: post.cover
+      cover: post.cover,
     }
   },
   computed: {
diff --git a/src/templates/pages/blog/index.vue b/src/templates/pages/blog/index.vue
index 0d56d66..5d9b954 100644
--- a/src/templates/pages/blog/index.vue
+++ b/src/templates/pages/blog/index.vue
@@ -1,16 +1,20 @@
 <template>
   <main class="blog flex flex-col items-center px-5 xl:px-64">
-    <h1 class="mt-16 md:mt-32 title font-bold text-4xl mr-2 inline mb-4">
-      Blog
-      <svg class="inline-block blog-img" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <PageTitle
+      title="Blog"
+      color="green"
+    >
+      <svg class="inline-block icon" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
       </svg>
-    </h1>
-    <div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
+    </PageTitle>
+    <div>
       <!-- TODO
       Insert research by tags
       Insert see more
       -->
+    </div>
+    <div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
       <div v-if="posts.size !== 0" class="w-full" v-for="post in posts">
         <nuxt-link :to="'/blog/' + post.id">
           <Post
@@ -18,9 +22,10 @@
             :reading_time="post.reading_time"
             :description="post.description.code"
             :tags="displayTags(post.tags)"
-            :cover="post.cover"
+            :cover="post.cover.file_name"
             :date="post.created_at"
             :likes="post.likes"
+            :lightBg="post.light_back_ground"
           />
         </nuxt-link>
       </div>
@@ -33,9 +38,15 @@
 
 <script>
 import Post from "~/components/Post";
+import PageTitle from "~/components/PageTitle";
 export default {
   name: "blog",
-  components: {Post},
+  components: {PageTitle, Post},
+  head() {
+    return {
+      title: 'Blog - Arthur Danjou'
+    }
+  },
   data () {
     return {
       posts: []
@@ -60,18 +71,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.blog {
-  .blog-img {
-    transform: translate(3px, -10px);
-  }
-
-  .title:after {
-    margin-top: 0.1rem;
-    content: '';
-    height: 2px;
-    width: 100%;
-    display: block;
-    @apply bg-green-400;
-  }
-}
 </style>
diff --git a/src/templates/pages/blog/tags/_id.vue b/src/templates/pages/blog/tags/_id.vue
index 1ce5a5f..f01dd18 100644
--- a/src/templates/pages/blog/tags/_id.vue
+++ b/src/templates/pages/blog/tags/_id.vue
@@ -19,6 +19,11 @@
 <script>
 export default {
   name: "blog",
+  head() {
+    return {
+      title: 'Blog - Arthur Danjou'
+    }
+  },
   data() {
     return {
       tag: this.$route.params.id
diff --git a/src/templates/pages/contact.vue b/src/templates/pages/contact.vue
new file mode 100644
index 0000000..e585001
--- /dev/null
+++ b/src/templates/pages/contact.vue
@@ -0,0 +1,113 @@
+<template>
+  <main class="contact flex flex-col items-center px-5 xl:px-64">
+    <PageTitle
+      title="Contact"
+      color="purple"
+    >
+      <svg class="inline-block icon" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    </PageTitle>
+    <div class="flex flex-col justify-around items-center py-10 w-full">
+      <h1 class="text-xl font-bold text-center mb-8">
+        Vous voulez collaborer avec moi ? Voici mes différentes offres !
+      </h1>
+      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full">
+        <!-- Insert Services -->
+      </div>
+      <div class="flex flex-col items-center w-full md:w-2/3">
+        <h1 class="text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
+          Software & Tech Newsletter
+        </h1>
+        <h3 class="text-lg md:text-xl">
+          Abonnez vous pour ne pas louper mes prochaines offres, mes prochains articles et mes nouveaux projets.
+          <span class="font-bold self-start">Pas de spam. Désabonnement quand vous voulez</span>
+        </h3>
+        <form class="flex flex-col lg:flex-row my-4 w-full">
+          <div class="mb-3 mr-4 w-full md:w-auto">
+            <input class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg" type="text" placeholder="Prénom" required id="name"/>
+          </div>
+          <div class="mb-3 mr-4 w-full md:w-auto">
+            <input class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg" type="email" placeholder="Adresse Mail" required id="email"/>
+          </div>
+          <div class="mb-3 self-center">
+            <button class="dark:text-black font-bold px-3 py-2 bg-purple-400 hover:bg-purple-500 cursor-pointer duration-300 rounded-lg btn">
+              S'abonner
+              <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+              </svg>
+            </button>
+          </div>
+        </form>
+      </div>
+      <div class="flex flex-col items-start w-full md:w-2/3">
+        <h1 class="self-center text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
+          Comment me contacter ?
+        </h1>
+        <h3 class="text-lg md:text-xl">
+          N'hésitez pas à nous contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous connecter ✌️
+        </h3>
+        <div>
+          <div class="my-4 email text-lg duration-300 text-purple-500 hover:text-purple-700 cursor-pointer flex">
+            <a class="mr-2" href="mailto:contact@arthurdanjou.fr?subject=Please enter here your project name">
+              contact@arthurdanjou.fr
+            </a>
+            <div class="arrow duration-300">
+              <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+              </svg>
+            </div>
+          </div>
+          <div>
+            Statut Freelance : <span class="py-1 px-2 font-bold rounded-full" :class="'bg-' +hiringColor+ '-300 text-' +hiringColor+ '-500'">{{$t(hiringStatus.code)}}</span>
+          </div>
+        </div>
+        <!-- Insert Form -->
+      </div>
+    </div>
+    <!--
+    TODO Newsletter + Services + Formulaire de contact
+    -->
+  </main>
+</template>
+
+<script>
+import PageTitle from "~/components/PageTitle";
+export default {
+  name: "contact",
+  components: {PageTitle},
+  data () {
+    return {
+      services: [],
+      hiringStatus: '',
+      hiringColor: ''
+    }
+  },
+  async asyncData({ $axios }) {
+    const {data: services} = await $axios.get('/services')
+    const {data: me} = await $axios.get('/me')
+    return {
+      services,
+      hiringStatus: me.hiringStatus,
+      hiringColor: me.hiring_color
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.contact {
+  .email:hover .arrow {
+    transform: translateX(15px);
+  }
+
+  .link {
+    @apply mr-5 duration-300;
+
+    &:hover {
+      @apply border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid;
+    }
+  }
+}
+</style>
diff --git a/src/templates/pages/index.vue b/src/templates/pages/index.vue
index dcc8280..4744a4e 100644
--- a/src/templates/pages/index.vue
+++ b/src/templates/pages/index.vue
@@ -1,113 +1,94 @@
 <template>
   <main class="index px-5 xl:px-64">
-    <section class="mt-16 md:mt-32 banner w-full flex justify-between flex-col lg:flex-row-reverse items-center mb-16">
-      <div class="hidden lg:block flex justify-center items-center lg:w-1/2">
-        <img src="@/assets/img/computer.png" alt="It's me !" class="icon" />
-      </div>
-      <div class="title flex justify-center flex-col lg:w-1/2 pr-3">
-        <div class="mb-4 md:mb-10">
+    <section class="mt-16 md:mt-32 banner w-full mb-16">
+      <div class="flex flex-col lg:flex-row-reverse mb-4">
+        <div class="hidden lg:block flex justify-center items-center lg:w-1/2">
+          <img src="@/assets/img/computer.png" alt="It's me !" class="icon" />
+        </div>
+        <div class="mb-4 md:mb-10 lg:w-1/2 self-center">
           <h1 class="text-4xl md:text-5xl text-left font-bold md:w-3/4">
-            Bonjour, je suis <br />
+            {{ $t('home_banner_hello') }} <br />
             <span class="text-red-700 font-black">Arthur Danjou</span> 👋
           </h1>
           <p class="text-2xl md:text-3xl my-5 font-semibold">
-            Développeur & étudiant
+            {{ $t('home_banner_role') }}
           </p>
           <p class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700 dark:text-dark-900">
-            Je suis un jeune développeur autodidacte de 17 ans. J'habite à Paris 🇫🇷. J'adore créer des applications et des logiciels plus ou moins utiles.
-            J'utilise des technologies modernes pour obtenir le meilleur résultat possible ✨
+            {{ $t('home_banner_description', {age: age}) }}
           </p>
         </div>
-        <div class="dark:text-black flex flex-col md:flex-row justify-around items-center">
-          <nuxt-link class="mb-3 w-full text-center md:mb-0 md:w-auto" to="about">
-            <p class="arrow-btn font-semibold rounded-full bg-red-400 hover:bg-red-700 duration-300 px-3 md:px-10 py-1 cursor-pointer">
-              En savoir plus
-              <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-              </svg>
-            </p>
-          </nuxt-link>
-          <nuxt-link class="mb-3 w-full text-center md:mb-0 md:w-auto" to="contact">
-            <p class="rounded-full font-semibold border-2 border-solid dark:hover:bg-white border-black dark:border-white hover:bg-black dark:hover:border-white hover:text-white dark:hover:text-black dark:text-white duration-300 px-12 py-1 cursor-pointer">
-              Me contacter
-            </p>
-          </nuxt-link>
-        </div>
       </div>
-    </section>
-    <section class="my-16 border-t border-solid border-black pt-16">
-      <h1 class="font-bold text-3xl mr-2 inline">
-        Mes Articles
-        <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-        </svg>
-      </h1>
-      <p class="mt-2 mb-8">
-        Parfois, je rédige des articles concernant le développement, ma vie, le design ou bien encore l'apprentissage !
-      </p>
-      <div class="flex flex-col">
-        <!-- TODO Max 3 articles -->
-        <div class="flex flex-col lg:flex-row justify-space-evenly mb-10">
-          <HomePost
-            title="Il était une nouvelle fois la vie"
-            reading_time="4"
-            description="Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi."
-            tags="Dev Tech"/>
-          <HomePost />
-          <HomePost />
-        </div>
-        <div class="text-center">
-          <nuxt-link to="/blog" class="arrow-btn px-3 py-3 border-2 border-solid border-red-500 rounded-full font-semibold hover:bg-red-500 duration-300 dark:text-red-500 dark:hover:text-black">
-            Voir plus d'articles
-            <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+      <div class="flex flex-col items-center w-full">
+        <div class="flex flex-col md:flex-row justify-around w-full md:mb-8">
+          <HomeLink
+            :title="$t('home_link_about')"
+            :description="$t('home_link_about_description')"
+            color="orange"
+            link="/about"
+            >
+            <svg class="inline" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
             </svg>
-          </nuxt-link>
+          </HomeLink>
+          <HomeLink
+            :title="$t('home_link_blog')"
+            :description="$t('home_link_blog_description')"
+            color="green"
+            link="/blog"
+          >
+            <svg class="inline" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+            </svg>
+          </HomeLink>
+        </div>
+        <div class="flex flex-col md:flex-row justify-around w-full">
+          <HomeLink
+            :title="$t('home_link_work')"
+            :description="$t('home_link_work_description')"
+            color="blue"
+            link="/work"
+          >
+            <svg class="inline-block" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+          </HomeLink>
+          <HomeLink
+            :title="$t('home_link_contact')"
+            :description="$t('home_link_contact_description')"
+            color="purple"
+            link="/contact"
+          >
+            <svg class="inline-block" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+          </HomeLink>
         </div>
-      </div>
-    </section>
-    <section class="my-16 border-t border-solid border-black pt-16">
-      <h1 class="font-bold text-3xl mr-2 inline">
-        Mon Travail
-        <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-        </svg>
-      </h1>
-      <p class="mt-2 mb-8">
-        Ayez une vision de mon travail, de mes projets personnels et professionnels ou de mes expérimentations !
-      </p>
-      <div>
-        <!-- TODO -->
-        TODO Insert Works request
-      </div>
-    </section>
-    <section class="my-16 border-t border-solid border-black pt-16">
-      <h1 class="font-bold text-3xl mr-2 inline">
-        Mes Services
-        <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
-        </svg>
-      </h1>
-      <p class="mt-2 mb-8">
-        Vous avez une idée révolutionnaire ?
-      </p>
-      <div>
-        <!-- TODO -->
-        TODO Services
       </div>
     </section>
   </main>
 </template>
 
-<script lang="ts">
+<script>
 import Vue from 'vue'
+import HomeLink from "~/components/HomeLink";
 
 export default Vue.extend({
-  data() {
+  components: {HomeLink},
+  head() {
     return {
-      posts: [],
-      works: [],
-      services: []
+      title: 'Arthur Danjou - Web & Software Developer'
+    }
+  },
+  data () {
+    return {
+      age: 0
+    }
+  },
+  async asyncData({$axios}) {
+    const {data: me} = await $axios.get('/me')
+    return {
+      age: me.age
     }
   }
 })
diff --git a/src/templates/pages/work/_id.vue b/src/templates/pages/work/_id.vue
new file mode 100644
index 0000000..1a6df69
--- /dev/null
+++ b/src/templates/pages/work/_id.vue
@@ -0,0 +1,78 @@
+<template>
+  <main class="flex flex-col lg:flex-row items-center px-5 xl:px-64 mb-16 md:mb-32">
+    <div class="w-full lg:w-1/2 flex flex-col items-center mt-8 md:mt-32">
+      <img class="w-4/5 rounded-xl" :src="'http://localhost:5555/files/' + cover" alt="Project Img" />
+      <a
+        class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
+        :class="'bg-' + color + '-400 hover:bg-' + color + '-600'"
+        :href="url"
+      >{{formatLink}}</a>
+    </div>
+    <div class="w-full lg:w-1/2 ml-5 ">
+      <h1 class="text-xl lg:text-3xl font-bold">
+        {{ $t(title) }}
+      </h1>
+      <p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-900">
+        {{ $t(description) }}
+      </p>
+      <div>
+        <h3 class="text-md lg:text-lg font-bold">
+          {{ $t('work_tech_used') }}
+        </h3>
+        <div class="flex flex-row overflow-x-auto">
+          <div v-for="skill in skills">
+            <WorkSkill
+              :skill="skill.title.code"
+              :color="skill.color"
+              :cover="skill.cover.file_name"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import WorkSkill from "~/components/WorkSkill";
+export default {
+  name: "_id",
+  components: {WorkSkill},
+  head() {
+    return {
+      title: 'Work - Arthur Danjou'
+    }
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      title: '',
+      description: '',
+      skills: [],
+      color: '',
+      cover: '',
+      url: ''
+    }
+  },
+  async asyncData({ params, $axios }) {
+    const {data: project} = await $axios.get('/projects/' + params.id)
+    return {
+      title: project.title.code,
+      description: project.description.code,
+      skills: project.skills,
+      color: project.color,
+      cover: project.cover.file_name,
+      url: project.url
+    }
+  },
+  computed: {
+    formatLink() {
+      return this.url.replace('https://', '').replace('http://', '')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/templates/pages/work/index.vue b/src/templates/pages/work/index.vue
new file mode 100644
index 0000000..35cef15
--- /dev/null
+++ b/src/templates/pages/work/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <main class="work flex flex-col items-center px-5 xl:px-64">
+    <PageTitle
+      title="Mon travail"
+      color="blue"
+    >
+      <svg class="inline-block icon" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+      </svg>
+    </PageTitle>
+    <div class="flex flex-col justify-around items-center py-10 w-full">
+      <h1 class="text-xl font-bold text-center mb-8">
+        Voici les différents projets auxquels j'ai pu participer dans mon passé !
+      </h1>
+      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full">
+        <div v-for="work in works">
+          <nuxt-link :to="'/work/' + work.id">
+            <Work
+              :title="work.title.code"
+              :url="work.url"
+              :color="work.color"
+              :cover="work.cover.file_name"
+            />
+          </nuxt-link>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import PageTitle from "~/components/PageTitle";
+import Work from "~/components/Work";
+export default {
+  name: "index",
+  components: {Work, PageTitle},
+  head() {
+    return {
+      title: 'Work - Arthur Danjou'
+    }
+  },
+  data () {
+    return {
+      works: []
+    }
+  },
+  async asyncData({ $axios }) {
+    const {data: works} = await $axios.get('/projects')
+    return {
+      works
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/tsconfig.json b/tsconfig.json
index 229ecf5..d88c0ff 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,7 +26,8 @@
     "types": [
       "@types/node",
       "@nuxt/types",
-      "@nuxtjs/axios"
+      "@nuxtjs/axios",
+      "nuxt-i18n"
     ]
   },
   "exclude": [