diff --git a/package.json b/package.json
index 1af43a8..46a27e2 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@nuxtjs/axios": "^5.12.5",
     "@nuxtjs/composition-api": "^0.22.2",
     "core-js": "^3.9.1",
-    "nuxt": "^2.14.12",
+    "nuxt": "2.15.3",
     "nuxt-i18n": "6.21.1",
     "prism-themes": "1.6.0",
     "sass": "1.32.8"
@@ -26,6 +26,7 @@
     "nuxt-vite": "^0.0.36",
     "nuxt-windicss": "^0.4.6",
     "sass-loader": "10.1.1",
+    "vite-plugin-windicss": "^0.11.2",
     "vue-windicss-preprocess": "^2.2.0"
   }
 }
diff --git a/settings/Build.ts b/settings/Build.ts
index 0ab8165..fa83456 100644
--- a/settings/Build.ts
+++ b/settings/Build.ts
@@ -1,3 +1,15 @@
 // Build Configuration: https://go.nuxtjs.dev/config-build
 export default {
+  extend(config: any) {
+    config.module.rules.push({
+      test: /\.vue$/,
+      loader: 'vue-windicss-preprocess',
+      options: {
+        compile: true,                // false: interpretation mode; true: compilation mode
+        globalPreflight: true,         // set preflight style is global or scoped
+        globalUtility: true,           // set utility style is global or scoped
+        prefix: 'windi-'               // set compilation mode style prefix
+      }
+    })
+  }
 }
diff --git a/settings/BuildModules.ts b/settings/BuildModules.ts
index f945971..d58eb01 100644
--- a/settings/BuildModules.ts
+++ b/settings/BuildModules.ts
@@ -21,7 +21,7 @@ const windicss = {
     ],
     include: []
   },
-  transformCSS: 'pre',
+  transformCSS: 'post',
   preflight: {
     alias: {
       // add nuxt aliases
@@ -36,6 +36,6 @@ export default [
   '@nuxt/typescript-build',
   '@nuxtjs/composition-api',
   ['nuxt-windicss', windicss],
-  //'nuxt-vite',
+  'nuxt-vite',
   ['@nuxtjs/color-mode', color_mode],
 ] as NuxtOptionsModule[]
diff --git a/src/assets/images/logo-header.png b/src/assets/images/logo-header.png
new file mode 100644
index 0000000..b065ec1
Binary files /dev/null and b/src/assets/images/logo-header.png differ
diff --git a/src/components/Formation.vue b/src/components/Formation.vue
index 2cc6188..52056de 100644
--- a/src/components/Formation.vue
+++ b/src/components/Formation.vue
@@ -53,10 +53,14 @@ export default {
     const {$i18n} = useContext()
     const getBeginDate = computed(() => {
       const dateFormat = props.begin.split('-')
+      console.log('1')
+      console.log($i18n.t('month.' + dateFormat[0]) + " " + dateFormat[1])
       return $i18n.t('month.' + dateFormat[0]) + " " + dateFormat[1]
     })
     const getEndDate = computed(() => {
       const dateFormat = props.end.split('-')
+      console.log('2')
+      console.log(props.end === 'Today' ? $i18n.t('date.today') : $i18n.t('month.' + dateFormat[0]) + " " + dateFormat[1])
       return props.end === 'Today' ? $i18n.t('date.today') : $i18n.t('month.' + dateFormat[0]) + " " + dateFormat[1]
     })
 
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4fbbc81..1e93a2b 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,96 +1,74 @@
 <template>
-  <header class="dark:bg-dark-900 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">
+  <header class="dark:bg-black dark:text-white fixed z-50 top-0 left-0 bg-white header 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-32">
       <nuxt-link to="/">
-        <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>
+        <img src="@/assets/images/logo-header.png" alt="Logo Circle" class="h-10 left cursor-pointer duration-500" />
       </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">
-              <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'">
-                <svg 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                </svg>
-              </div>
-              <div v-else>
-                <svg 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="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                </svg>
-              </div>
-            </li>
-            <nuxt-link class="red hidden md:inline-block" to="/">
-              <li class="hover:text-red-400 font-bold mx-2 cursor-pointer duration-300">
-                {{ $t('header.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">
+          <ul class="flex text-lg">
+            <nuxt-link class="hidden md:inline-block" to="/about">
+              <li class="nav-link">
                 {{ $t('header.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">
+            <nuxt-link class="hidden md:inline-block" to="/blog">
+              <li class="nav-link">
                 {{ $t('header.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">
-                {{ $t('header.work') }}
+            <nuxt-link class="hidden md:inline-block" to="/uses">
+              <li class="nav-link">
+                {{ $t('header.uses') }}
               </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">
+            <nuxt-link class="hidden md:inline-block" to="/projects">
+              <li class="nav-link">
+                {{ $t('header.projects') }}
+              </li>
+            </nuxt-link>
+            <nuxt-link class="hidden md:inline-block" to="/contact">
+              <li class="nav-link">
                 {{ $t('header.contact') }}
               </li>
             </nuxt-link>
           </ul>
         </div>
-        <ul class="dark:text-white dark:bg-dark-900 text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
-          <nuxt-link to="/" class="w-1/5 red">
-            <li class="font-bold flex flex-col items-center justify-center">
+        <ul class="dark:text-white dark:bg-black text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
+          <nuxt-link to="/about" class="w-1/5 nav-link-mobile">
+            <li class="font-medium flex flex-col items-center justify-center">
               <svg class="inline-block" height="20" width="20" 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>
-              {{ $t('header.home') }}
-            </li>
-          </nuxt-link>
-          <nuxt-link to="/about" class="w-1/5 orange">
-            <li class="font-bold flex flex-col items-center justify-center">
-              <svg class="inline-block" height="20" width="20" 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>
               {{ $t('header.about') }}
             </li>
           </nuxt-link>
-          <nuxt-link to="/blog" class="w-1/5 green">
-            <li class="font-bold flex flex-col items-center justify-center">
+          <nuxt-link to="/blog" class="w-1/5 nav-link-mobile">
+            <li class="font-medium flex flex-col items-center justify-center">
               <svg class="inline-block" height="20" width="20" 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" />
+                <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>
               {{ $t('header.blog') }}
             </li>
           </nuxt-link>
-          <nuxt-link to="/work" class="w-1/5 blue">
-            <li class="font-bold flex flex-col items-center justify-center">
+          <nuxt-link to="/uses" class="w-1/5 nav-link-mobile">
+            <li class="font-medium flex flex-col items-center justify-center">
+              <svg class="inline-block" height="20" width="20" 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>
+              {{ $t('header.uses') }}
+            </li>
+          </nuxt-link>
+          <nuxt-link to="/projects" class="w-1/5 nav-link-mobile">
+            <li class="font-medium flex flex-col items-center justify-center">
               <svg class="inline-block" height="20" width="20" 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>
-              {{ $t('header.work') }}
+              {{ $t('header.projects') }}
             </li>
           </nuxt-link>
-          <nuxt-link to="/contact" class="w-1/5 purple">
-            <li class="font-bold flex flex-col items-center justify-center">
+          <nuxt-link to="/contact" class="w-1/5 nav-link-mobile">
+            <li class="font-medium flex flex-col items-center justify-center">
               <svg class="inline-block" height="20" width="20" 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" />
@@ -100,18 +78,43 @@
           </nuxt-link>
         </ul>
       </nav>
+      <div>
+        <ul class="flex items-center">
+          <li class="mx-1 h-9 w-9 cursor-pointer flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-850">
+            <div v-if="this.$i18n.locale === 'en'" @click="changeLanguage('fr')">
+              :fr:
+            </div>
+            <div v-else @click="changeLanguage('en')">
+              🇬🇧
+            </div>
+          </li>
+          <li @click="changeColorMode()" class="mx-1 h-9 w-9 cursor-pointer flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-850 duration-200">
+            <div v-if="this.$colorMode.preference === 'light'">
+              <svg 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+              </svg>
+            </div>
+            <div v-else>
+              <svg 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="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+              </svg>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </header>
 </template>
 
 <script lang="ts">
-import {onMounted, onUnmounted, ref, useContext, useRouter} from "@nuxtjs/composition-api";
+import {onMounted, onUnmounted, ref, useAsync, useContext, useRouter} from "@nuxtjs/composition-api";
 
 export default {
   name: "Header",
   setup() {
     const {$colorMode} = useContext()
     const changeColorMode = () => {
+      console.log("changed !")
       $colorMode.preference = $colorMode.value === 'light' ? 'dark' : 'light'
     }
 
@@ -130,12 +133,13 @@ export default {
 
     const {app, $i18n} = useContext()
     const $router = useRouter()
-    const changeLanguage = async (lang: 'fr' | 'en') => {
-      await $i18n.setLocale(lang)
+    const changeLanguage = (lang: 'fr' | 'en') => useAsync(() => {
+      console.log("i18n changed")
+      $i18n.setLocale(lang)
       if ($router.currentRoute.fullPath.includes('blog')) {
-        await app.refresh()
+        app.refresh()
       }
-    }
+    })
 
     return {
       scrollPosition,
@@ -152,31 +156,16 @@ export default {
 
   .header-container {
 
-    .nuxt-link-active {
-      &.green {
-        @apply text-green-400;
-      }
-      &.blue {
-        @apply text-blue-400;
-      }
+    .nav-link {
+      @apply text-gray-500 dark:text-gray-400 hover:dark:text-white font-medium hover:text-black mx-4 cursor-pointer duration-300
     }
 
-    .nuxt-link-exact-active {
-      &.red {
-        @apply text-red-400;
-      }
-      &.orange {
-        @apply text-orange-400;
-      }
-      &.green {
-        @apply text-green-400;
-      }
-      &.blue {
-        @apply text-blue-400;
-      }
-      &.purple {
-        @apply text-purple-400;
-      }
+    .nav-link-mobile {
+      @apply text-gray-500 dark:text-gray-400 hover:dark:text-white hover:text-black duration-300
+    }
+
+    nav .nuxt-link-exact-active {
+      @apply text-black dark:text-white;
     }
 
     .navbar-bottom-items li {
diff --git a/src/components/HomeLink.vue b/src/components/HomeLink.vue
index 553ca88..1bd0fd6 100644
--- a/src/components/HomeLink.vue
+++ b/src/components/HomeLink.vue
@@ -43,7 +43,7 @@ export default {
       type: String
     },
     color: {
-      default: "red-100",
+      default: "red",
       type: String
     },
     link: {
@@ -52,10 +52,24 @@ export default {
     }
   },
   setup(props: HomeLinkProps) {
-    const getColor = computed(() => `hover:bg-${props.color}-400 dark:hover:bg-${props.color}-600 active:bg-${props.color}-400 dark:active:bg-${props.color}-600`)
+    /**const getColor = computed(() => {
+      return 'hover:bg-color-400 dark:hover:bg-color-600 active:bg-color-400 dark:active:bg-color-600'.replaceAll('color', props.color)
+    })*/
+    const getColor = computed(() => {
+      switch (props.color) {
+        case 'orange':
+          return 'hover:bg-orange-400 dark:hover:bg-orange-600 active:bg-orange-400 dark:active:bg-orange-600'
+        case 'purple':
+          return 'hover:bg-purple-400 dark:hover:bg-purple-600 active:bg-purple-400 dark:active:bg-purple-600'
+        case 'blue':
+          return 'hover:bg-blue-400 dark:hover:bg-blue-600 active:bg-blue-400 dark:active:bg-blue-600'
+        case 'green':
+          return 'hover:bg-green-400 dark:hover:bg-green-600 active:bg-green-400 dark:active:bg-green-600'
+      }
+    })
 
     return {
-      getColor
+      getColor,
     }
   }
 }
diff --git a/src/layouts/dev.vue b/src/layouts/dev.vue
new file mode 100644
index 0000000..9044b88
--- /dev/null
+++ b/src/layouts/dev.vue
@@ -0,0 +1,13 @@
+<template>
+  <Nuxt />
+</template>
+
+<script>
+export default {
+  name: "dev"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/locales/en-EN.ts b/src/locales/en-EN.ts
index 9ad5525..ee95e61 100644
--- a/src/locales/en-EN.ts
+++ b/src/locales/en-EN.ts
@@ -1,11 +1,10 @@
 export default {
   header: {
-    title: 'Arthur Danjou',
     home: 'Home',
     about: 'About',
     blog: 'Blog',
-    work: 'Work',
-    contact: 'Contact'
+    projects: 'Projects',
+    uses: 'Uses',
   },
 
   footer: {
diff --git a/src/locales/fr-FR.ts b/src/locales/fr-FR.ts
index 68e4493..3f4ef98 100644
--- a/src/locales/fr-FR.ts
+++ b/src/locales/fr-FR.ts
@@ -1,11 +1,10 @@
 export default {
   header: {
-    title: 'Arthur Danjou',
-    home: 'Accueil',
     about: 'Moi',
     blog: 'Blog',
-    work: 'Travail',
-    contact: 'Contact'
+    contact: 'Contact',
+    projects: 'Projets',
+    uses: 'Usages'
   },
 
   footer: {
diff --git a/src/pages/README.md b/src/pages/README.md
deleted file mode 100644
index 1d5d48b..0000000
--- a/src/pages/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# PAGES
-
-This directory contains your Application Views and Routes.
-The framework reads all the `*.vue` files inside this directory and creates the router of your application.
-
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
diff --git a/src/pages/about.vue b/src/pages/about.vue
new file mode 100644
index 0000000..46f3b2e
--- /dev/null
+++ b/src/pages/about.vue
@@ -0,0 +1,274 @@
+<template>
+  <main class="about flex flex-col items-center px-5 xl:px-64">
+    <PageTitle
+      title="part.about"
+      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>
+    </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/images/Logo.jpg" alt="It's me !" />
+      </div>
+      <div class="ml-2 text-lg leading-6 md:w-2/3 text-justify">
+        <p>{{ $t('about.banner.hello') }} <span class="text-orange-400 font-bold">Arthur DANJOU</span> 👋.</p> <br/>
+        <p>{{ $t('about.banner.1')}}</p> <br/>
+        <p>{{ $t('about.banner.2') }}</p> <br/>
+        <p>{{ $t('about.banner.3') }}</p>
+      </div>
+    </div>
+    <div class="w-full mb-10 mt-4">
+      <h3 class="font-bold text-2xl md:text-4xl mb-3">
+        {{ $t('about.title.skills') }}
+        <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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+        </svg>
+      </h3>
+      <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
+        <div v-if="skills" v-for="skill in skills">
+          <Skill
+            :skill="skill.title"
+            :color="skill.color"
+            :cover="skill.cover"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl">
+        {{ $t('about.title.interests') }}
+        <svg height="32" width="32" class="inline icon" 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 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
+        </svg>
+      </h3>
+      <div>
+        <ul class="text-xl">
+          <li class="my-2">
+            {{ $t('about.title.technologies') }}
+            <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="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+            </svg>
+          </li>
+          <li class="my-2">
+            {{ $t('about.interests.dev') }}
+            <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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+            </svg>
+          </li>
+          <li class="my-2">
+            {{ $t('about.interests.devops') }}
+            <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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+            </svg>
+          </li>
+          <li class="my-2">
+            {{ $t('about.interests.startups') }}
+            <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.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+            </svg>
+          </li>
+          <li class="my-2">
+            {{ $t('about.interests.sysadmin') }}
+            <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="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>
+          </li>
+          <li class="my-2">
+            {{ $t('about.interests.trips') }}
+            <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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+            </svg>
+          </li>
+          <li class="my-2">
+            {{ $t('about.interests.moto') }}
+            <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>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl">
+        {{ $t('about.title.languages') }}
+        <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="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
+        </svg>
+      </h3>
+      <div>
+        <table class="text-base text-xl">
+          <tr>
+            <td class="font-bold py-2 pr-4">{{ $t('about.languages.fr')}} 🇫🇷</td>
+            <td class="py-2 px-4">{{ $t('about.languages.native') }}</td>
+          </tr>
+          <tr>
+            <td class="font-bold py-2 pr-4">{{ $t('about.languages.en')}} 🇬🇧</td>
+            <td class="py-2 px-4">{{ $t('about.languages.fluent') }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl mb-3">
+        {{ $t('about.title.formations') }}
+        <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="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 v-if="formations" v-for="formation in formations">
+        <Formation
+          :title="formation.title"
+          :description="formation.description"
+          :location="formation.location"
+          :begin="formation.begin_date"
+          :end="formation.end_date" />
+      </div>
+    </div>
+    <div class="w-full mb-10">
+      <h3 class="font-bold text-2xl md:text-4xl mb-3">
+        {{ $t('about.title.experiences') }}
+        <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="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 v-if="experiences" v-for="experience in experiences">
+        <Experience
+          :title="experience.title"
+          :company="experience.company"
+          :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-400 hover:bg-orange-600 cursor-pointer duration-500 rounded-full dark:text-black">
+        {{ $t('about.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="mt-10 border-t-2 border-black dark:border-white border-solid w-full" />
+    <PageTitle
+      title="about.environment"
+      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="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
+      </svg>
+    </PageTitle>
+    <p class="text-lg leading-6 text-justify pb-8">{{ $t('about.env.description') }}</p>
+    <EnvGroup>
+      <EnvTitle title="about.env.ide">
+        <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>
+      </EnvTitle>
+      <EnvList>
+        <EnvListItem title="about.ide.java" content="Intellij Idea Ultimate" link="https://www.jetbrains.com/fr-fr/idea/"/>
+        <EnvListItem title="about.ide.web" content="WebStorm" link="https://www.jetbrains.com/fr-fr/webstorm/"/>
+        <EnvListItem title="about.ide.go" content="GoLand" link="https://www.jetbrains.com/fr-fr/go/"/>
+        <EnvListItem title="about.ide.db" content="DataGrip" link="https://www.jetbrains.com/fr-fr/datagrip/"/>
+        <EnvListItem title="about.ide.all" content="Jetbrains Toolbox" link="https://www.jetbrains.com/toolbox-app/"/>
+        <EnvListItem title="about.police" content="Jetbrains Mono" link="https://www.jetbrains.com/lp/mono/"/>
+        <EnvListItem title="about.console" content="Terminus" link="https://github.com/Eugeny/terminus"/>
+        <EnvListItem title="about.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="about.env.apps">
+        <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>
+      </EnvTitle>
+      <EnvList>
+        <EnvListItem title="about.email_client" content="Courrier by Microsoft" link="https://www.microsoft.com/fr-fr/p/courrier-et-calendrier/9wzdncrfhvqm?activetab=pivot:overviewtab"/>
+        <EnvListItem title="about.vpn_client" content="Pritunl" link="https://pritunl.com/"/>
+        <EnvListItem title="about.ftp_client" content="WinSCP" link="https://winscp.net/eng/download.php"/>
+        <EnvListItem title="about.web_client" content="FireFox Developer Edition" link="https://www.mozilla.org/fr/firefox/developer/"/>
+        <EnvListItem title="about.organisation_tool" content="Notion" link="https://www.notion.so/"/>
+        <EnvListItem title="about.organisation_tool" content="Trello" link="https://www.trello.com/"/>
+        <EnvListItem title="about.design_tool" content="Affinity Designer" link="https://affinity.serif.com/fr/designer/"/>
+        <EnvListItem title="about.communication_tool" content="Slack" link="https://slack.com/intl/fr-fr/"/>
+        <EnvListItem title="about.communication_tool" content="Discord" link="https://www.discord.com/"/>
+        <EnvListItem title="about.communication_tool" content="Mattermost" link="https://mattermost.com/"/>
+      </EnvList>
+    </EnvGroup>
+    <EnvGroup>
+      <EnvTitle title="about.env.hosting">
+        <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>
+      </EnvTitle>
+      <EnvList>
+        <EnvListItem title="about.hosting.vps" content="PulseHeberg" link="https://pulseheberg.com/"/>
+        <EnvListItem title="about.hosting.ndd" content="OVH" link="https://ovh.com/"/>
+      </EnvList>
+    </EnvGroup>
+    <EnvGroup>
+      <EnvTitle title="about.env.setup">
+        <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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+        </svg>
+      </EnvTitle>
+      <EnvList>
+        <EnvListItem title="about.setup.desk" content="Ikea"/>
+        <EnvListItem title="about.setup.phone" content="Samsung Galaxy Note 8" link="https://www.samsung.com/smartphones/galaxy-note8/"/>
+        <EnvListItem title="about.setup.computer" content="Asus i5, 8Go Ram, GTX 950, 1To HDD"/>
+        <EnvListItem title="about.setup.screen" content="iiyama ProLite E2283HS" link="https://iiyama.com/fr/fr/produits/prolite-e2283hs-b3/"/>
+        <EnvListItem title="about.setup.keyboard" content="Microsoft"/>
+        <EnvListItem title="about.setup.mouse" content="Roccat Kova" link="https://fr.roccat.org/Mice/Kova-AIMO"/>
+        <EnvListItem title="about.setup.headphone" content="Apple Airpods" link="https://www.apple.com/fr/airpods/"/>
+        <EnvListItem title="about.setup.microphone" content="Turtle Beach px22" link="https://www.amazon.fr/Turtle-Beach-PX22-casque-gaming/dp/B00BDS415I"/>
+      </EnvList>
+    </EnvGroup>
+  </main>
+</template>
+
+<script lang="ts">
+import {useAsync, useContext} from "@nuxtjs/composition-api";
+import {Experience, Formation, Skill} from "../../@types/types";
+
+export default {
+  name: "about",
+  head() {
+    return {
+      title: 'About me - Arthur Danjou'
+    }
+  },
+  setup() {
+    const {$content} = useContext()
+
+    const skills = useAsync(() => {
+      return $content('skills').fetch<Skill>()
+    })
+    const experiences = useAsync(() => {
+      return $content('experiences')
+        .sortBy('end_date', 'desc')
+        .fetch<Experience>()
+    })
+    const formations = useAsync(() => {
+      return $content('formations')
+        .sortBy('end_date', 'desc')
+        .fetch<Formation>()
+    })
+
+    return {
+      skills,
+      experiences,
+      formations
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.about {
+  .logo-img {
+    height: 20rem;
+  }
+}
+</style>
diff --git a/src/pages/blog/_slug.vue b/src/pages/blog/_slug.vue
new file mode 100644
index 0000000..2e7596e
--- /dev/null
+++ b/src/pages/blog/_slug.vue
@@ -0,0 +1,201 @@
+<template>
+  <main class="blog flex flex-col items-center px-5 xl:px-96 mb-16 md:mb-32">
+    <div class="mt-8 md:mt-32 flex flex-col justify-around py-8 w-full">
+      <div>
+        <div class="mb-4 flex">
+          <nuxt-link to="/blog" class="back-arrow flex">
+            <div class="duration-300 arrow">
+              <svg 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="M10 19l-7-7m0 0l7-7m-7 7h18" />
+              </svg>
+            </div>
+            <div class="ml-2">
+              {{ $t('blog.read.back') }}
+            </div>
+          </nuxt-link>
+        </div>
+      </div>
+      <h1 class="text-3xl md:text-5xl font-bold">
+        {{ post.title }}
+      </h1>
+      <h3 class="text-xl text-gray-800 dark:text-dark-100 my-4 md:mt-8">
+        {{ post.description }}
+      </h3>
+      <div class="flex flex-row justify-between w-full md:w-2/3 mb-12">
+        <div>
+          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">Date</p>
+          <p>{{ formatDate }}</p>
+        </div>
+        <div>
+          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">{{ $t('blog.read.time') }}</p>
+          <p>{{ post.reading_time }} min</p>
+        </div>
+        <div>
+          <p :class="post.tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">Tags</p>
+          <p>{{ formatTags }}</p>
+        </div>
+      </div>
+      <div class="w-full">
+        <div class="flex justify-center w-full h-auto">
+          <img class="w-full h-auto" :src="require(`@/assets/images/posts/${post.cover}.png`)" alt="Cover Img" />
+        </div>
+      </div>
+      <nuxt-content
+        :document="post"
+        class="my-6 md:my-12 w-full text-justify max-w-none
+        prose prose-sm sm:prose lg:prose-lg lg:max-w-none sm:max-w-none
+        dark:prose-dark dark:max-w-none"
+      />
+      <p class="mb-3">
+        {{ $t('blog.read.thanks') }}
+      </p>
+      <div class="flex flex-col md:flex-row">
+        <div class="flex items-center mb-2 md:mb-0">
+          <div
+            @click="handleLike"
+            class="h-16 end-blog flex flex-row justify-center items-center cursor-pointer duration-300 text-3xl p-3 border-solid border mr-2"
+            :class="liked ? 'border-red-500 dark:border-red-500 hover:border-gray-400 dark:hover:border-dark-200' : 'border-gray-400 dark:border-dark-200 hover:border-red-500 dark:hover:border-red-500'"
+          >
+            <div class="mr-2 lining-nums">
+              {{ likes }}
+            </div>
+            <div class="icon-hover inline">❤</div>
+          </div>
+          <a
+            target="_blank"
+            :href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Farthurdanjou.fr%2Fblog%2F' + this.post.slug + '&text=' + $t('blog.tweet') + ' ' + post.title"
+            class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-cyan-500 dark:hover:border-cyan-400 justify-center items-center"
+          >
+            <img class="inline img icon-hover" src="@/assets/images/socials/twitter.svg" alt="Twitter logo" height="40" width="40" />
+          </a>
+          <div @click="scrollToTop"
+               class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white">
+            <svg class="inline icon-hover" width="40" height="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="M5 10l7-7m0 0l7 7m-7-7v18" />
+            </svg>
+          </div>
+        </div>
+        <div class="flex items-center">
+          <nuxt-link to="/contact"
+                     class="h-16 mr-2 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white"
+          >
+            <svg class="inline icon-hover" width="40" height="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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
+            </svg>
+          </nuxt-link>
+          <div
+            @click="copyToClipBoard"
+            class="h-16 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white"
+          >
+            <svg class="inline icon-hover" 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="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
+            </svg>
+          </div>
+          <div v-if="isCopied" class="p-3 relative text-sm flex justify-center items-center text-green-500">
+            {{ $t('copied') }}
+            <svg class="inline icon" width="25" height="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="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+  name: "blog",
+  head() {
+    return {
+      title: 'Blog - Arthur Danjou - ' + this.post.title
+    }
+  },
+  data() {
+    return {
+      likes: 0,
+      post: null,
+
+      isCopied: false,
+      liked: false
+    }
+  },
+  async asyncData({ params, $content, app, $axios, error }) {
+    const post = await $content(`articles/${app.i18n.locale}`, params.slug)
+      .fetch()
+      .catch(() => {
+        error({ statusCode: 404, message: "Post not found" });
+      });
+    const {data: likes} = await $axios.get(`posts/${params.slug}`)
+    const liked = await $axios.get(`posts/is/${params.slug}`)
+    return {
+      post,
+      likes,
+      liked: liked.data !== 0
+    }
+  },
+  methods: {
+    scrollToTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      })
+    },
+    copyToClipBoard() {
+      navigator.clipboard.writeText('https://arthurdanjou.fr/blog/' + this.post.slug)
+      this.isCopied = true
+      setTimeout(() => {
+        this.isCopied = false
+      }, 7000)
+    },
+    async handleLike() {
+      if (this.liked) {
+        const {data} = await this.$axios.post(`posts/${this.post.slug}/unlike`)
+        if (data.code === 200) {
+          this.liked = false
+          this.likes = data.post.likes
+        }
+      } else {
+        const {data} = await this.$axios.post(`posts/${this.post.slug}/like`)
+        if (data.code === 200) {
+          this.liked = true
+          this.likes = data.post.likes
+        }
+      }
+    }
+  },
+  computed: {
+    formatDate() {
+      const dateFormat = this.post.date.split('-')
+      return dateFormat[0] + " " + this.$t('month.' + dateFormat[1]) + " " + dateFormat[2]
+    },
+    formatTags() {
+      let tags = ""
+      this.post.tags.map(tag => {
+        tags += this.$t(tag) + ", "
+      })
+      return tags.substring(0, tags.length - 2)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.blog {
+  .back-arrow:hover .arrow {
+    transform: translate(-8px, -1px);
+  }
+
+  .arrow {
+    transform: translate(3px, -1px);
+  }
+
+  .end-blog .icon-hover {
+    @apply duration-300
+  }
+
+  .end-blog:hover .icon-hover {
+    @apply transform scale-105;
+  }
+}
+</style>
diff --git a/src/pages/blog/index.vue b/src/pages/blog/index.vue
new file mode 100644
index 0000000..12e7f01
--- /dev/null
+++ b/src/pages/blog/index.vue
@@ -0,0 +1,276 @@
+<template>
+  <main class="blog flex flex-col items-center px-5 xl:px-64">
+    <PageTitle
+      title="part.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>
+    </PageTitle>
+    <div class="flex flex-col mt-8 w-full md:w-1/2">
+      <h1
+        v-if="current_tag === ''"
+        class="text-lg mb-2"
+      >{{ $t('blog.tags.search') }}</h1>
+      <div
+        @click="resetPosts"
+        v-if="current_tag !== ''"
+        class="w-full"
+      >
+        <div class="w-full home-arrow flex cursor-pointer font-bold mb-3">
+          <div class="arrow duration-300 mr-2">
+            <svg 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="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+          </div>
+          {{ $t('blog.tags.back') }}
+        </div>
+        <div class="w-full">
+          {{ $t('blog.tags.current', { tag: $t(current_tag)}) }}
+        </div>
+      </div>
+      <div v-else class="flex flex-row w-full overflow-x-scroll md:overflow-x-hidden md:flex-wrap space-x-3 md:space-x-0">
+        <div v-for="tag in tags">
+          <div
+            class="mb-3 md:mr-4 border-b-2 border-opacity-0 hover:border-opacity-100 border-green-400 border-solid duration-300 cursor-pointer font-black"
+            @click="fetchPostsByTag(tag.slug)"
+          >
+            {{ $t(tag.slug) }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('blog.no_posts') }}</h1>
+    <div class="w-full xl:w-1/2" v-else>
+      <div class="flex flex-col justify-around items-center py-8 w-full">
+        <div class="w-full" v-for="post in posts">
+          <nuxt-link :to="'/blog/' + post.slug">
+            <Post
+              :title="post.title"
+              :reading_time="post.reading_time"
+              :description="post.description"
+              :tags="displayTags(post.tags)"
+              :cover="post.cover"
+              :date="post.date"
+              :lightBg="post.background"
+            />
+          </nuxt-link>
+        </div>
+      </div>
+      <div class="relative flex flex-row justify-between w-full mb-4" v-if="(next || prev) && this.postsCount > 5">
+        <div
+          class="duration-300 flex w-1/2 px-5 py-4 justify-center items-center"
+          :class="prev === null ? 'opacity-0': 'opacity-100'"
+        >
+          <div class="flex items-center duration-300 prev-arrow" @click="prevPage">
+            <div class="arrow duration-300">
+              <svg class="inline icon" height="30" width="30" 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 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
+              </svg>
+            </div>
+            <div class="inline ml-4 font-bold">{{ $t('blog.pagination.prev') }}</div>
+          </div>
+        </div>
+        <div
+          class="duration-300 flex w-1/2 px-5 py-4 justify-center items-center"
+          :class="next === null ? 'opacity-0': 'opacity-100'"
+        >
+          <div class="flex items-center duration-300 suiv-arrow" @click="nextPage">
+            <div class="mr-4 font-bold">{{ $t('blog.pagination.next') }}</div>
+            <div class="inline arrow duration-300">
+              <svg class="inline icon" height="30" width="30" 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="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import Post from "~/components/Post";
+import PageTitle from "~/components/PageTitle";
+export default {
+  name: "blog",
+  components: {PageTitle, Post},
+  head() {
+    return {
+      title: 'Blog - Arthur Danjou'
+    }
+  },
+  data () {
+    return {
+      postsCount: 0,
+      page: 0,
+      current_tag: '',
+      posts: []
+    }
+  },
+  methods: {
+    displayTags(tags) {
+      const tags_label = []
+      if (tags.length > 0) {
+        tags.map(tag => {
+          tags_label.push(tag)
+        })
+      }
+      return tags_label
+    },
+    async fetchPostsByTag(tag) {
+      this.current_tag = tag
+      this.page = 0
+      await this.fetchPosts()
+      if (this.posts.length !== 0) {
+        await this.fetchPrevAndNext()
+      } else {
+        this.next = null
+        this.prev = null
+      }
+    },
+    async resetPosts() {
+      this.current_tag = ''
+      this.posts = await this.$content(`articles/${this.$i18n.locale}`)
+        .sortBy('date', 'asc')
+        .limit(5)
+        .fetch()
+    },
+    async nextPage() {
+      this.page++
+      await this.fetchPosts()
+      await this.fetchPrevAndNext()
+
+      window.scrollTo({
+        top: 100,
+        behavior: "smooth"
+      })
+    },
+    async prevPage() {
+      this.page--
+      await this.fetchPosts()
+      await this.fetchPrevAndNext()
+      window.scrollTo({
+        top: 100,
+        behavior: "smooth"
+      })
+    },
+    async fetchPosts() {
+      let postsTemp = []
+      if (this.current_tag === "") {
+        postsTemp = await this.$content(`articles/${this.$i18n.locale}`)
+          .sortBy('date', 'asc')
+          .limit(5)
+          .skip(this.page * 5)
+          .fetch()
+      } else {
+        postsTemp = await this.$content(`articles/${this.$i18n.locale}`)
+          .sortBy('date', 'asc')
+          .limit(5)
+          .skip(this.page * 5)
+          .where({
+            tags: {
+              $contains: this.current_tag
+            }
+          })
+          .fetch()
+      }
+
+      const posts = []
+      postsTemp.map(post => {
+        posts.push(post)
+      })
+      this.posts = posts
+    },
+    async fetchPrevAndNext() {
+      const [_, next] = await this.$content(`articles/${this.$i18n.locale}`)
+        .surround(this.posts[this.posts.length - 1].slug, {
+          before: 1,
+          after: 1
+        })
+        .fetch()
+      const [prev, __] = await this.$content(`articles/${this.$i18n.locale}`)
+        .skip(this.page)
+        .surround(this.posts[0].slug, {
+          before: 1,
+          after: 1
+        })
+        .fetch()
+
+      this.prev = null
+      this.next = null
+      if (this.posts.length === 5) {
+        this.next = next
+      }
+      if (this.page > 0) {
+        this.prev = prev
+      }
+    }
+  },
+  async asyncData ({ $content, app }) {
+    const tags = await $content('tags').fetch()
+    const locale = await app.i18n.locale
+
+    const postsTemp = await $content(`articles/${locale}`)
+      .sortBy('date', 'asc')
+      .limit(5)
+      .fetch()
+
+    const posts = []
+    postsTemp.map(post => {
+      posts.push(post)
+    })
+
+    let prev = null
+    let next = null
+
+    if (posts.length > 0) {
+      const [_, nextTemp] = await $content(`articles/${locale}`)
+        .surround(posts[posts.length - 1].slug, {
+          before: 1,
+          after: 1
+        })
+        .fetch()
+
+      const [prevTemp, __] = await $content(`articles/${locale}`)
+        .surround(posts[0].slug, {
+          before: 1,
+          after: 1
+        })
+        .fetch()
+
+      next = nextTemp
+      prev = prevTemp
+    }
+
+    return {
+      posts,
+      postsCount: posts.length,
+      tags,
+      prev,
+      next
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.blog {
+  .home-arrow:hover .arrow {
+    transform: translateX(-15px);
+  }
+
+  .prev-arrow:hover .arrow {
+    transform: translateX(-10px);
+  }
+
+  .suiv-arrow:hover .arrow {
+    transform: translateX(15px);
+  }
+
+  .arrow {
+    transform: translateX(-3px);
+  }
+}
+</style>
diff --git a/src/pages/contact.vue b/src/pages/contact.vue
new file mode 100644
index 0000000..578ff5d
--- /dev/null
+++ b/src/pages/contact.vue
@@ -0,0 +1,162 @@
+<template>
+  <main class="contact flex flex-col items-center px-5 xl:px-64">
+    <PageTitle
+      title="part.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="w-full lg:w-3/4 mb-10 mt-4">
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-200">{{ $t('contact.newsletter.title') }}</h1>
+      <h3 class="text-md md:text-lg">
+        {{ $t('contact.newsletter.description') }} <br>
+        <span class="font-bold self-start">{{ $t('contact.newsletter.unfollow') }}</span>
+      </h3>
+      <form class="flex flex-col lg:flex-row mt-4 w-full">
+        <div class="flex flex-col lg:flex-row">
+          <div class="mb-3 lg:mr-4 w-full md:w-auto">
+            <input v-model="form.name"
+                   class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-800 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-900 border border-solid border-purple-700 rounded-lg"
+                   type="text"
+                   :placeholder="$t('contact.form.name')"
+                   required
+                   id="name"/>
+          </div>
+          <div class="mb-3 lg:mr-4 w-full md:w-auto">
+            <input v-model="form.name"
+                   class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-800 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-900 border border-solid border-purple-700 rounded-lg"
+                   type="email"
+                   :placeholder="$t('contact.form.mail')"
+                   required
+                   id="email"/>
+          </div>
+        </div>
+        <div class="mb-3 self-center">
+          <button @click.prevent="handleForm" class="dark:text-black font-bold px-3 py-2 bg-purple-400 hover:bg-purple-500 cursor-pointer duration-300 rounded-lg btn">
+            {{ $t('contact.form.submit')}}
+            <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 v-if="error" class="flex">
+        <div class="rounded-xl px-3 py-2 bg-red-300 font-bold dark:text-black">
+          {{ $t('contact.form.error') }}
+        </div>
+      </div>
+      <div v-if="success" class="flex">
+        <div class="rounded-xl px-3 py-2 bg-green-300 font-bold dark:text-black">
+          {{ $t('contact.form.success', { email: form.email }) }}
+        </div>
+      </div>
+    </div>
+    <div class="w-full lg:w-3/4 mb-10 mt-4">
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
+        {{ $t('contact.how_to.title') }}
+      </h1>
+      <h3 class="text-md md:text-lg">
+        {{ $t('contact.how_to.description') }}
+      </h3>
+      <div class="mt-4 text-lg flex">
+        <div class="flex email duration-300 text-purple-500 hover:text-purple-700 cursor-pointer">
+          <a class="mr-2" href="mailto:me@arthurdanjou.fr?subject=Please enter here your project name">
+            me@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>
+    </div>
+    <div class="w-full lg:w-3/4 mb-10 mt-4">
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
+        {{ $t('contact.available.title') }}
+      </h1>
+      <h3 class="text-lg md:text-lg">
+        {{ $t('contact.available.description') }}
+      </h3>
+      <div class="my-4 text-purple-500">
+        {{ $t('contact.available.start') }}
+        <span v-if="info && info.hiring.status" class="py-1 px-2 font-bold rounded-full m-0.5" :class="getColor">{{ $t('hiring.status.' + info.hiring.status) }}</span>
+        {{ $t('contact.available.end') }}
+      </div>
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+import {computed, ref, useAsync, useContext} from "@nuxtjs/composition-api";
+import {FormData, InfoData} from "../../@types/types";
+
+export default {
+  name: "contact",
+  setup() {
+    const {$content} = useContext()
+    const info = useAsync(() => {
+      return $content('infos').fetch<InfoData>()
+    })
+
+    const hiring_color = info && info.value?.values.hiring.color
+    const getColor = computed(() => `bg-${hiring_color}-200 text-${hiring_color}-500`)
+
+    const error = ref(false)
+    const success = ref(false)
+
+    const {$axios} = useContext()
+    const form = ref({} as FormData)
+    const handleForm = useAsync(
+      async () => {
+        await $axios.post('subscribers',
+          {
+            email: form.value.email,
+            name: form.value.name,
+          })
+          .then(() => {
+            success.value = true
+            setTimeout(() => {
+              success.value = false
+              form.value.email = ''
+              form.value.name = ''
+            }, 5000)
+          }).catch(() => {
+            error.value = true
+            setTimeout(() => {
+              error.value = false
+            }, 5000)
+          })
+      }
+    )
+
+    return {
+      info,
+      getColor,
+      handleForm,
+      success,
+      error,
+      form
+    }
+  }
+}
+</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/pages/dev.vue b/src/pages/dev.vue
new file mode 100644
index 0000000..6975106
--- /dev/null
+++ b/src/pages/dev.vue
@@ -0,0 +1,14 @@
+<template>
+  <Header />
+</template>
+
+<script>
+export default {
+  name: "dev",
+  layout: 'dev'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/uses.vue b/src/pages/uses.vue
new file mode 100644
index 0000000..1783e2b
--- /dev/null
+++ b/src/pages/uses.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+name: "uses"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/work/_slug.vue b/src/pages/work/_slug.vue
new file mode 100644
index 0000000..7a26ae9
--- /dev/null
+++ b/src/pages/work/_slug.vue
@@ -0,0 +1,150 @@
+<template>
+  <main class="px-5 xl:px-64 mb-16 md:mb-32">
+    <div class="w-full flex flex-col lg:flex-row items-center md:items-start mt-8 md:mt-32">
+      <div class="w-full lg:w-1/2 flex flex-col items-center">
+        <div class="md:mb-24">
+          <div class="mb-4 flex">
+            <nuxt-link to="/work" class="back-arrow flex">
+              <div class="duration-300 arrow">
+                <svg 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="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                </svg>
+              </div>
+              <div class="ml-2">
+                {{ $t('work.go_back') }}
+              </div>
+            </nuxt-link>
+          </div>
+        </div>
+        <img class="w-72 rounded-xl" :src="require(`@/assets/images/works/${work.cover}.png`)" alt="Project Img" />
+        <a
+          class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
+          :class="getColor"
+          :href="work.url"
+        >{{work.url.replace('https://', '').replace('http://', '')}}</a>
+      </div>
+      <div class="w-full lg:w-1/2 ml-5 ">
+        <h1 class="text-xl lg:text-3xl font-bold">
+          {{ work.title }}
+        </h1>
+        <p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-100">
+          {{ $t(work.description) }}
+        </p>
+        <div>
+          <h3 class="text-md lg:text-lg font-bold">
+            {{ $t('work.tech_used') }}
+          </h3>
+          <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
+            <div v-for="skill in skills">
+              <WorkSkill
+                :skill="skill.title"
+                :color="skill.color"
+                :cover="skill.cover"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import WorkSkill from "~/components/WorkSkill";
+
+export default {
+  components: {WorkSkill},
+  head() {
+    return {
+      title: 'Work - Arthur Danjou'
+    }
+  },
+  data() {
+    return {
+      work: null
+    }
+  },
+  async asyncData({ params, $content, error }) {
+    const work = await $content('works', params.slug)
+      .fetch()
+      .catch(() => {
+        error({
+          statusCode: 404,
+          message: 'Work not found',
+        })
+      });
+    let skills = []
+    if (work) {
+      skills = await $content('skills').where({ slug: { $in: work.skills } }).fetch()
+    }
+    return {
+      work,
+      skills
+    }
+  },
+  computed: {
+    getColor() {
+      switch (this.work.color) {
+        case 'red':
+          return 'bg-red-400 hover:bg-red-600'
+        case 'orange':
+          return 'bg-orange-400 hover:bg-orange-600'
+        case 'purple':
+          return 'bg-purple-400 hover:bg-purple-600'
+        case 'blue':
+          return 'bg-blue-400 hover:bg-blue-600'
+        case 'green':
+          return 'bg-green-400 hover:bg-green-600'
+        case 'yellow':
+          return 'bg-yellow-400 hover:bg-yellow-600'
+        case 'cyan':
+          return 'bg-cyan-400 hover:bg-cyan-600'
+        case 'teal':
+          return 'bg-teal-400 hover:bg-teal-600'
+        case 'amber':
+          return 'bg-amber-400 hover:bg-amber-600'
+        case 'blueGray':
+          return 'bg-blueGray-400 hover:bg-blueGray-600'
+        case 'emerald':
+          return 'bg-emerald-400 hover:bg-emerald-600'
+        case 'lightBlue':
+          return 'bg-lightBlue-400 hover:bg-lightBlue-600'
+        case 'lime':
+          return 'bg-lime-400 hover:bg-lime-600'
+        case 'rose':
+          return 'bg-rose-400 hover:bg-rose-600'
+        case 'black':
+          return 'bg-black hover:bg-black'
+        case 'white':
+          return 'bg-white hover:bg-white'
+        case 'pink':
+          return 'bg-pink-400 hover:bg-pink-600'
+        case 'fuchsia':
+          return 'bg-fuchsia-400 hover:bg-fuchsia-600'
+        case 'violet':
+          return 'bg-violet-400 hover:bg-violet-600'
+        case 'indigo':
+          return 'bg-indigo-400 hover:bg-indigo-600'
+        case 'warmGray':
+          return 'bg-warmGray-400 hover:bg-warmGray-600'
+        case 'trueGray':
+          return 'bg-trueGray-400 hover:bg-trueGray-600'
+        case 'gray':
+          return 'bg-gray-400 hover:bg-gray-600'
+        case 'coolGray':
+          return 'bg-coolGray-400 hover:bg-coolGray-600'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.back-arrow:hover .arrow {
+  transform: translate(-8px, -1px);
+}
+
+.arrow {
+  transform: translate(3px, -1px);
+}
+</style>
diff --git a/src/pages/work/index.vue b/src/pages/work/index.vue
new file mode 100644
index 0000000..5b8c8c5
--- /dev/null
+++ b/src/pages/work/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <main class="work flex flex-col items-center px-5 xl:px-64">
+    <PageTitle
+      title="part.work"
+      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>
+    <h1 v-if="works.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('work.no_work') }}</h1>
+    <div v-else class="flex flex-col justify-around items-center py-10 w-full">
+      <h1 class="text-xl font-bold text-center mb-8">{{ $t('work.description') }}</h1>
+      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0">
+        <div v-for="work in works">
+          <nuxt-link :to="'/work/' + work.slug">
+            <Work
+              :title="work.title"
+              :url="work.url"
+              :color="work.color"
+              :cover="work.cover"
+            />
+          </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'
+    }
+  },
+  async asyncData({ $content }) {
+    const works = await $content('works').fetch()
+    return {
+      works
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/windi.config.js b/windi.config.js
index e5f1a97..3bbf2f1 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -1,6 +1,7 @@
 const colors = require('windicss/colors')
 const typography = require('windicss/plugin/typography')
 
+//export default defineConfig({
 module.exports = {
   presets: [],
   darkMode: 'class',
@@ -106,7 +107,6 @@ module.exports = {
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
-
       black: colors.black,
       white: colors.white,
       rose: colors.rose,
@@ -134,6 +134,7 @@ module.exports = {
       dark: {
         100: 'rgb(150,150,150)',
         200: 'rgb(112,112,112)',
+        850: '#404040',
         700: '#272727',
         800: '#212121',
         900: '#121212',
diff --git a/yarn.lock b/yarn.lock
index 44ca4c8..f074da3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,12 +9,12 @@
   dependencies:
     "@babel/highlight" "^7.12.13"
 
-"@babel/compat-data@^7.13.0", "@babel/compat-data@^7.13.8":
-  version "7.13.11"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.13.11.tgz#9c8fe523c206979c9a81b1e12fe50c1254f1aa35"
-  integrity sha512-BwKEkO+2a67DcFeS3RLl0Z3Gs2OvdXewuWjc1Hfokhb5eQWP9YRYH1/+VrVZvql2CfjOiNGqSAFOYt4lsqTHzg==
+"@babel/compat-data@^7.13.0", "@babel/compat-data@^7.13.12", "@babel/compat-data@^7.13.8":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.13.12.tgz#a8a5ccac19c200f9dd49624cac6e19d7be1236a1"
+  integrity sha512-3eJJ841uKxeV8dcN/2yGEUy+RfgQspPEgQat85umsE1rotuquQ2AbIub4S6j7c50a2d+4myc+zSlnXeIHrOnhQ==
 
-"@babel/core@^7.11.6", "@babel/core@^7.13.10":
+"@babel/core@^7.11.6":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.13.10.tgz#07de050bbd8193fcd8a3c27918c0890613a94559"
   integrity sha512-bfIYcT0BdKeAZrovpMqX2Mx5NrgAckGbwT982AkdS5GNfn3KMGiprlBAtmBcFZRUmpaufS6WZFP8trvx8ptFDw==
@@ -36,6 +36,27 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
+"@babel/core@^7.13.10":
+  version "7.13.14"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.13.14.tgz#8e46ebbaca460a63497c797e574038ab04ae6d06"
+  integrity sha512-wZso/vyF4ki0l0znlgM4inxbdrUvCb+cVz8grxDq+6C9k6qbqoIJteQOKicaKjCipU3ISV+XedCqpL2RJJVehA==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/generator" "^7.13.9"
+    "@babel/helper-compilation-targets" "^7.13.13"
+    "@babel/helper-module-transforms" "^7.13.14"
+    "@babel/helpers" "^7.13.10"
+    "@babel/parser" "^7.13.13"
+    "@babel/template" "^7.12.13"
+    "@babel/traverse" "^7.13.13"
+    "@babel/types" "^7.13.14"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.13.0", "@babel/generator@^7.13.9":
   version "7.13.9"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.9.tgz#3a7aa96f9efb8e2be42d38d80e2ceb4c64d8de39"
@@ -60,12 +81,12 @@
     "@babel/helper-explode-assignable-expression" "^7.12.13"
     "@babel/types" "^7.12.13"
 
-"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.13.10", "@babel/helper-compilation-targets@^7.13.8":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.10.tgz#1310a1678cb8427c07a753750da4f8ce442bdd0c"
-  integrity sha512-/Xju7Qg1GQO4mHZ/Kcs6Au7gfafgZnwm+a7sy/ow/tV1sHeraRUHbjdat8/UvDor4Tez+siGKDk6zIKtCPKVJA==
+"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.13.10", "@babel/helper-compilation-targets@^7.13.13", "@babel/helper-compilation-targets@^7.13.8":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.13.tgz#2b2972a0926474853f41e4adbc69338f520600e5"
+  integrity sha512-q1kcdHNZehBwD9jYPh3WyXcsFERi39X4I59I3NadciWtNDyZ6x+GboOxncFK0kXlKIv6BJm5acncehXWUjWQMQ==
   dependencies:
-    "@babel/compat-data" "^7.13.8"
+    "@babel/compat-data" "^7.13.12"
     "@babel/helper-validator-option" "^7.12.17"
     browserslist "^4.14.5"
     semver "^6.3.0"
@@ -134,34 +155,33 @@
     "@babel/traverse" "^7.13.0"
     "@babel/types" "^7.13.0"
 
-"@babel/helper-member-expression-to-functions@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.0.tgz#6aa4bb678e0f8c22f58cdb79451d30494461b091"
-  integrity sha512-yvRf8Ivk62JwisqV1rFRMxiSMDGnN6KH1/mDMmIrij4jztpQNRoHqqMG3U6apYbGRPJpgPalhva9Yd06HlUxJQ==
+"@babel/helper-member-expression-to-functions@^7.13.0", "@babel/helper-member-expression-to-functions@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz#dfe368f26d426a07299d8d6513821768216e6d72"
+  integrity sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==
   dependencies:
-    "@babel/types" "^7.13.0"
+    "@babel/types" "^7.13.12"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz#ec67e4404f41750463e455cc3203f6a32e93fcb0"
-  integrity sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz#c6a369a6f3621cb25da014078684da9196b61977"
+  integrity sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==
   dependencies:
-    "@babel/types" "^7.12.13"
+    "@babel/types" "^7.13.12"
 
-"@babel/helper-module-transforms@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.13.0.tgz#42eb4bd8eea68bab46751212c357bfed8b40f6f1"
-  integrity sha512-Ls8/VBwH577+pw7Ku1QkUWIyRRNHpYlts7+qSqBBFCW3I8QteB9DxfcZ5YJpOwH6Ihe/wn8ch7fMGOP1OhEIvw==
+"@babel/helper-module-transforms@^7.13.0", "@babel/helper-module-transforms@^7.13.14":
+  version "7.13.14"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.13.14.tgz#e600652ba48ccb1641775413cb32cfa4e8b495ef"
+  integrity sha512-QuU/OJ0iAOSIatyVZmfqB0lbkVP0kDRiKj34xy+QNsnVZi/PA6BoSoreeqnxxa9EHFAIL0R9XOaAR/G9WlIy5g==
   dependencies:
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.13.0"
-    "@babel/helper-simple-access" "^7.12.13"
+    "@babel/helper-module-imports" "^7.13.12"
+    "@babel/helper-replace-supers" "^7.13.12"
+    "@babel/helper-simple-access" "^7.13.12"
     "@babel/helper-split-export-declaration" "^7.12.13"
     "@babel/helper-validator-identifier" "^7.12.11"
     "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.0"
-    lodash "^4.17.19"
+    "@babel/traverse" "^7.13.13"
+    "@babel/types" "^7.13.14"
 
 "@babel/helper-optimise-call-expression@^7.12.13":
   version "7.12.13"
@@ -184,22 +204,22 @@
     "@babel/helper-wrap-function" "^7.13.0"
     "@babel/types" "^7.13.0"
 
-"@babel/helper-replace-supers@^7.12.13", "@babel/helper-replace-supers@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.13.0.tgz#6034b7b51943094cb41627848cb219cb02be1d24"
-  integrity sha512-Segd5me1+Pz+rmN/NFBOplMbZG3SqRJOBlY+mA0SxAv6rjj7zJqr1AVr3SfzUVTLCv7ZLU5FycOM/SBGuLPbZw==
+"@babel/helper-replace-supers@^7.12.13", "@babel/helper-replace-supers@^7.13.0", "@babel/helper-replace-supers@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz#6442f4c1ad912502481a564a7386de0c77ff3804"
+  integrity sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==
   dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.13.0"
+    "@babel/helper-member-expression-to-functions" "^7.13.12"
     "@babel/helper-optimise-call-expression" "^7.12.13"
     "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.0"
+    "@babel/types" "^7.13.12"
 
-"@babel/helper-simple-access@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.12.13.tgz#8478bcc5cacf6aa1672b251c1d2dde5ccd61a6c4"
-  integrity sha512-0ski5dyYIHEfwpWGx5GPWhH35j342JaflmCeQmsPWcrOQDtCN6C1zKAVRFVbK53lPW2c9TsuLLSUDf0tIGJ5hA==
+"@babel/helper-simple-access@^7.12.13", "@babel/helper-simple-access@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz#dd6c538afb61819d205a012c31792a39c7a5eaf6"
+  integrity sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==
   dependencies:
-    "@babel/types" "^7.12.13"
+    "@babel/types" "^7.13.12"
 
 "@babel/helper-skip-transparent-expression-wrappers@^7.12.1":
   version "7.12.1"
@@ -253,11 +273,25 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.13.0", "@babel/parser@^7.13.10", "@babel/parser@^7.5.5", "@babel/parser@^7.9.6":
+"@babel/parser@^7.1.0", "@babel/parser@^7.5.5", "@babel/parser@^7.9.6":
   version "7.13.11"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.11.tgz#f93ebfc99d21c1772afbbaa153f47e7ce2f50b88"
   integrity sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q==
 
+"@babel/parser@^7.12.13", "@babel/parser@^7.13.0", "@babel/parser@^7.13.10", "@babel/parser@^7.13.13":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.13.tgz#42f03862f4aed50461e543270916b47dd501f0df"
+  integrity sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw==
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz#a3484d84d0b549f3fc916b99ee4783f26fabad2a"
+  integrity sha512-d0u3zWKcoZf379fOeJdr1a5WPDny4aOFZ6hlfKivgK0LY7ZxNfoaHL2fWwdGtHyVvra38FC+HVYkO+byfSA8AQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "^7.13.12"
+
 "@babel/plugin-proposal-async-generator-functions@^7.13.8":
   version "7.13.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.13.8.tgz#87aacb574b3bc4b5603f6fe41458d72a5a2ec4b1"
@@ -351,10 +385,10 @@
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.8.tgz#e39df93efe7e7e621841babc197982e140e90756"
-  integrity sha512-hpbBwbTgd7Cz1QryvwJZRo1U0k1q8uyBmeXOSQUjdg/A2TASkhR/rz7AyqZ/kS8kbpsNA80rOYbxySBJAqmhhQ==
+"@babel/plugin-proposal-optional-chaining@^7.13.12", "@babel/plugin-proposal-optional-chaining@^7.13.8":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.12.tgz#ba9feb601d422e0adea6760c2bd6bbb7bfec4866"
+  integrity sha512-fcEdKOkIB7Tf4IxrgEVeFC4zeJSTr78no9wTdBuZZbqF64kzllU0ybo2zrzm7gUQfxGhBgq4E39oRs8Zx/RMYQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
@@ -751,14 +785,15 @@
     "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/preset-env@^7.13.10":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.13.10.tgz#b5cde31d5fe77ab2a6ab3d453b59041a1b3a5252"
-  integrity sha512-nOsTScuoRghRtUsRr/c69d042ysfPHcu+KOB4A9aAO9eJYqrkat+LF8G1yp1HD18QiwixT2CisZTr/0b3YZPXQ==
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.13.12.tgz#6dff470478290582ac282fb77780eadf32480237"
+  integrity sha512-JzElc6jk3Ko6zuZgBtjOd01pf9yYDEIH8BcqVuYIuOkzOwDesoa/Nz4gIo4lBG6K861KTV9TvIgmFuT6ytOaAA==
   dependencies:
-    "@babel/compat-data" "^7.13.8"
+    "@babel/compat-data" "^7.13.12"
     "@babel/helper-compilation-targets" "^7.13.10"
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/helper-validator-option" "^7.12.17"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.13.12"
     "@babel/plugin-proposal-async-generator-functions" "^7.13.8"
     "@babel/plugin-proposal-class-properties" "^7.13.0"
     "@babel/plugin-proposal-dynamic-import" "^7.13.8"
@@ -769,7 +804,7 @@
     "@babel/plugin-proposal-numeric-separator" "^7.12.13"
     "@babel/plugin-proposal-object-rest-spread" "^7.13.8"
     "@babel/plugin-proposal-optional-catch-binding" "^7.13.8"
-    "@babel/plugin-proposal-optional-chaining" "^7.13.8"
+    "@babel/plugin-proposal-optional-chaining" "^7.13.12"
     "@babel/plugin-proposal-private-methods" "^7.13.0"
     "@babel/plugin-proposal-unicode-property-regex" "^7.12.13"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
@@ -817,7 +852,7 @@
     "@babel/plugin-transform-unicode-escapes" "^7.12.13"
     "@babel/plugin-transform-unicode-regex" "^7.12.13"
     "@babel/preset-modules" "^0.1.4"
-    "@babel/types" "^7.13.0"
+    "@babel/types" "^7.13.12"
     babel-plugin-polyfill-corejs2 "^0.1.4"
     babel-plugin-polyfill-corejs3 "^0.1.3"
     babel-plugin-polyfill-regenerator "^0.1.2"
@@ -851,7 +886,21 @@
     "@babel/parser" "^7.12.13"
     "@babel/types" "^7.12.13"
 
-"@babel/traverse@^7.13.0", "@babel/traverse@^7.5.5":
+"@babel/traverse@^7.13.0", "@babel/traverse@^7.13.13":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.13.tgz#39aa9c21aab69f74d948a486dd28a2dbdbf5114d"
+  integrity sha512-CblEcwmXKR6eP43oQGG++0QMTtCjAsa3frUuzHoiIJWpaIIi8dwMyEFUJoXRLxagGqCK+jALRwIO+o3R9p/uUg==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/generator" "^7.13.9"
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-split-export-declaration" "^7.12.13"
+    "@babel/parser" "^7.13.13"
+    "@babel/types" "^7.13.13"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/traverse@^7.5.5":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.0.tgz#6d95752475f86ee7ded06536de309a65fc8966cc"
   integrity sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==
@@ -866,7 +915,7 @@
     globals "^11.1.0"
     lodash "^4.17.19"
 
-"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.3.0", "@babel/types@^7.4.4":
+"@babel/types@^7.0.0", "@babel/types@^7.3.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.0.tgz#74424d2816f0171b4100f0ab34e9a374efdf7f80"
   integrity sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==
@@ -875,6 +924,15 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.13", "@babel/types@^7.13.14", "@babel/types@^7.4.4":
+  version "7.13.14"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.14.tgz#c35a4abb15c7cd45a2746d78ab328e362cbace0d"
+  integrity sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.12.11"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
@@ -1015,16 +1073,16 @@
     wrap-ansi "^7.0.0"
 
 "@nuxt/components@^2.1.2":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@nuxt/components/-/components-2.1.3.tgz#5be51bf3f1aea0aef218abfc12c41a9e733d0d1b"
-  integrity sha512-MXChq9y2VGIwT3DKVrxRhJZT2RqRNjyMtKlMWF+VnOa1vJ82A5tAXFKxCvSv9RfVx+nS7bXYAk1Mpp4Qzqm3zQ==
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@nuxt/components/-/components-2.1.4.tgz#6d3774704be9b3f692a9bb6d994b1261351799d8"
+  integrity sha512-V3AMoZz2ADhI0SbbUoX1U70eulL/xDwWpV5L/PLmoUHN7NuzsvBbOIl8JBXxf+Vp/d5TZwO0I2x7cHiukydfmA==
   dependencies:
     chalk "^4.1.0"
     chokidar "^3.5.1"
     glob "^7.1.6"
-    globby "^11.0.2"
+    globby "^11.0.3"
     scule "^0.1.1"
-    semver "^7.3.4"
+    semver "^7.3.5"
     upath "^2.0.1"
     vue-template-compiler "^2.6.12"
 
@@ -1401,9 +1459,9 @@
     stack-trace "0.0.10"
 
 "@polka/url@^1.0.0-next.9":
-  version "1.0.0-next.11"
-  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.11.tgz#aeb16f50649a91af79dbe36574b66d0f9e4d9f71"
-  integrity sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
+  version "1.0.0-next.12"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.12.tgz#431ec342a7195622f86688bbda82e3166ce8cb28"
+  integrity sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ==
 
 "@rollup/pluginutils@^4.1.0":
   version "4.1.0"
@@ -1585,9 +1643,9 @@
   integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
 
 "@types/node@*":
-  version "14.14.35"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.35.tgz#42c953a4e2b18ab931f72477e7012172f4ffa313"
-  integrity sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag==
+  version "14.14.37"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.37.tgz#a3dd8da4eb84a996c36e331df98d82abd76b516e"
+  integrity sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw==
 
 "@types/node@^12.20.5":
   version "12.20.6"
@@ -1656,10 +1714,17 @@
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
   integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
 
-"@types/tapable@*", "@types/tapable@^1.0.5":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
-  integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
+"@types/tapable@*":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-2.2.2.tgz#1d324b524190954a5700d86b6328bfc57e1fda48"
+  integrity sha512-ujqOVJEeLcwpDVJPnp/k3u1UXmTKq5urJq9fO8aUKg8Vlel5RNOFbVKEfqfh6wGfF/M+HiTJlBJMLC1aDfyf0Q==
+  dependencies:
+    tapable "^2.2.0"
+
+"@types/tapable@^1", "@types/tapable@^1.0.5":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.7.tgz#545158342f949e8fd3bfd813224971ecddc3fac4"
+  integrity sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==
 
 "@types/terser-webpack-plugin@^4.2.0":
   version "4.2.0"
@@ -1713,7 +1778,7 @@
     "@types/source-list-map" "*"
     source-map "^0.7.3"
 
-"@types/webpack@*", "@types/webpack@^4.41.26", "@types/webpack@^4.41.8":
+"@types/webpack@*", "@types/webpack@^4.41.26":
   version "4.41.26"
   resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.26.tgz#27a30d7d531e16489f9c7607c747be6bc1a459ef"
   integrity sha512-7ZyTfxjCRwexh+EJFwRUM+CDB2XvgHl4vfuqf1ZKrgGvcS5BrNvPQqJh3tsZ0P6h6Aa1qClVHaJZszLPzpqHeA==
@@ -1725,6 +1790,18 @@
     "@types/webpack-sources" "*"
     source-map "^0.6.0"
 
+"@types/webpack@^4.41.8":
+  version "4.41.27"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.27.tgz#f47da488c8037e7f1b2dbf2714fbbacb61ec0ffc"
+  integrity sha512-wK/oi5gcHi72VMTbOaQ70VcDxSQ1uX8S2tukBK9ARuGXrYM/+u4ou73roc7trXDNmCxCoerE8zruQqX/wuHszA==
+  dependencies:
+    "@types/anymatch" "*"
+    "@types/node" "*"
+    "@types/tapable" "^1"
+    "@types/uglify-js" "*"
+    "@types/webpack-sources" "*"
+    source-map "^0.6.0"
+
 "@types/xml2js@^0.4.8":
   version "0.4.8"
   resolved "https://registry.yarnpkg.com/@types/xml2js/-/xml2js-0.4.8.tgz#84c120c864a5976d0b5cf2f930a75d850fc2b03a"
@@ -1980,6 +2057,19 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
+"@windicss/plugin-utils@0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-0.11.2.tgz#989a5db170fb22c53804c3f67d1ea9da0fd91a79"
+  integrity sha512-Kq9X0/INSOYzBHO/dgOJx3v2U/F+5/bv9IMCW/ABDLwyZbY1fUuGuHgO5e0CHL79F/zTpxxSv+fAAVyiKAY1Eg==
+  dependencies:
+    debug "^4.3.2"
+    fast-glob "^3.2.5"
+    magic-string "^0.25.7"
+    micromatch "^4.0.2"
+    pirates "^4.0.1"
+    sucrase "^3.17.1"
+    windicss "^2.5.8"
+
 "@windicss/plugin-utils@0.9.4":
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-0.9.4.tgz#6f1212f672257a391e0077a7baf172a55282e631"
@@ -2093,11 +2183,11 @@ ansi-align@^3.0.0:
     string-width "^3.0.0"
 
 ansi-escapes@^4.2.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61"
-  integrity sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
   dependencies:
-    type-fest "^0.11.0"
+    type-fest "^0.21.3"
 
 ansi-html@0.0.7:
   version "0.0.7"
@@ -3084,9 +3174,9 @@ cacache@^12.0.2:
     y18n "^4.0.0"
 
 cacache@^15.0.5:
-  version "15.0.5"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.0.5.tgz#69162833da29170d6732334643c60e005f5f17d0"
-  integrity sha512-lloiL22n7sOjEEXdL8NAjTgv9a1u43xICE9/203qonkZUCj5X1UEWIdf2/Y0d6QcCtMzbKQyhrcDbdvlZTs/+A==
+  version "15.0.6"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.0.6.tgz#65a8c580fda15b59150fb76bf3f3a8e45d583099"
+  integrity sha512-g1WYDMct/jzW+JdWEyjaX2zoBkZ6ZT9VpOyp2I/VMtDsNLffNat3kqPFfi1eDRSK9/SuKGyORDHcQMcPF8sQ/w==
   dependencies:
     "@npmcli/move-file" "^1.0.1"
     chownr "^2.0.0"
@@ -3102,7 +3192,7 @@ cacache@^15.0.5:
     p-map "^4.0.0"
     promise-inflight "^1.0.1"
     rimraf "^3.0.2"
-    ssri "^8.0.0"
+    ssri "^8.0.1"
     tar "^6.0.2"
     unique-filename "^1.1.1"
 
@@ -3214,7 +3304,12 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001181, caniuse-lite@^1.0.30001198:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001181, caniuse-lite@^1.0.30001198:
+  version "1.0.30001205"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001205.tgz#d79bf6a6fb13196b4bb46e5143a22ca0242e0ef8"
+  integrity sha512-TL1GrS5V6LElbitPazidkBMD9sa448bQDDLrumDqaggmKFcuU2JW1wTOHJPukAcOMtEmLcmDJEzfRrf+GjM0Og==
+
+caniuse-lite@^1.0.30000844:
   version "1.0.30001203"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001203.tgz#a7a34df21a387d9deffcd56c000b8cf5ab540580"
   integrity sha512-/I9tvnzU/PHMH7wBPrfDMSuecDeUKerjCPX7D0xBbaJZPxoT9m+yYxt0zCTkcijCkjTdim3H56Zm0i5Adxch4w==
@@ -4238,11 +4333,16 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.649:
+electron-to-chromium@^1.3.47:
   version "1.3.693"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.693.tgz#5089c506a925c31f93fcb173a003a22e341115dd"
   integrity sha512-vUdsE8yyeu30RecppQtI+XTz2++LWLVEIYmzeCaCRLSdtKZ2eXqdJcrs85KwLiPOPVc6PELgWyXBsfqIvzGZag==
 
+electron-to-chromium@^1.3.649:
+  version "1.3.703"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.703.tgz#6d9b9a75c42a40775f5930329e642b22b227317f"
+  integrity sha512-SVBVhNB+4zPL+rvtWLw7PZQkw/Eqj1HQZs22xtcqW36+xoifzEOEEDEpkxSMfB6RFeSIOcG00w6z5mSqLr1Y6w==
+
 elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -4975,10 +5075,10 @@ globals@^9.18.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
   integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
 
-globby@^11.0.2:
-  version "11.0.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.2.tgz#1af538b766a3b540ebfb58a32b2e2d5897321d83"
-  integrity sha512-2ZThXDvvV8fYFRVIxnrMQBipZQDr7MxKAmQK1vujaj9/7eF0efG7BPUKJ7jP7G5SLF37xKDXvO4S/KKLj/Z0og==
+globby@^11.0.2, globby@^11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
+  integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
   dependencies:
     array-union "^2.1.0"
     dir-glob "^3.0.1"
@@ -5069,7 +5169,7 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-has-bigints@^1.0.0:
+has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
   integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
@@ -5084,7 +5184,7 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-symbols@^1.0.0, has-symbols@^1.0.1, has-symbols@^1.0.2:
+has-symbols@^1.0.1, has-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
   integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
@@ -7117,7 +7217,7 @@ nuxt-windicss@^0.4.6:
     vite-plugin-windicss "^0.9.4"
     windicss-webpack-plugin "^0.2.6"
 
-nuxt@^2.14.12:
+nuxt@2.15.3:
   version "2.15.3"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-2.15.3.tgz#6262707de8a824df0718fc88653c74a916aa5122"
   integrity sha512-zeeOr7KxTYE0nbztUvH3YtcU+V5cZxuIhErBFt+ckFJ1R7uiptrfFrtVPouPm2uU4Kj+8MdARCQq+hzdfwUQig==
@@ -8464,13 +8564,20 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
-qs@^6.5.2, qs@^6.9.4:
+qs@^6.5.2:
   version "6.10.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.0.tgz#8b6519121ab291c316a3e4d49cecf6d13d8c7fe5"
   integrity sha512-yjACOWijC6L/kmPZZAsVBNY2zfHSIbpdpL977quseu56/8BZ2LoF5axK2bGhbzhVKt7V9xgWTtpyLbxwIoER0Q==
   dependencies:
     side-channel "^1.0.4"
 
+qs@^6.9.4:
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
+  integrity sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -8510,9 +8617,9 @@ querystring@^0.2.0:
   integrity sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==
 
 queue-microtask@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.2.tgz#abf64491e6ecf0f38a6502403d4cda04f372dfd3"
-  integrity sha512-dB15eXv3p2jDlbOiNLyMabYg1/sXvppd8DP2J3EOCQ0AkuSXCW2tP7mnVouVLJKgUMY6yP0kcQDVpLCN13h4Xg==
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
@@ -8698,9 +8805,9 @@ regjsparser@^0.1.4:
     jsesc "~0.5.0"
 
 regjsparser@^0.6.4:
-  version "0.6.7"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.7.tgz#c00164e1e6713c2e3ee641f1701c4b7aa0a7f86c"
-  integrity sha512-ib77G0uxsA2ovgiYbCVGx4Pv3PSttAx2vIwidqQzbL2U5S4Q+j00HdSAneSBuyVcMvEnTXMjiGgB+DlXozVhpQ==
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.9.tgz#b489eef7c9a2ce43727627011429cf833a7183e6"
+  integrity sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==
   dependencies:
     jsesc "~0.5.0"
 
@@ -8981,9 +9088,9 @@ run-queue@^1.0.0, run-queue@^1.0.3:
     aproba "^1.1.1"
 
 rxjs@^6.6.0:
-  version "6.6.6"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.6.tgz#14d8417aa5a07c5e633995b525e1e3c0dec03b70"
-  integrity sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
   dependencies:
     tslib "^1.9.0"
 
@@ -9119,10 +9226,10 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.2, semver@^7.3.4:
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.4.tgz#27aaa7d2e4ca76452f98d3add093a72c943edc97"
-  integrity sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==
+semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -9465,7 +9572,7 @@ ssri@^6.0.1:
   dependencies:
     figgy-pudding "^3.5.1"
 
-ssri@^8.0.0:
+ssri@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.1.tgz#638e4e439e2ffbd2cd289776d5ca457c4f51a2af"
   integrity sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==
@@ -9765,6 +9872,11 @@ tapable@^1.0.0, tapable@^1.0.0-beta.5, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
+tapable@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.0.tgz#5c373d281d9c672848213d0e037d1c4165ab426b"
+  integrity sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==
+
 tar@^6.0.2:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.0.tgz#d1724e9bcc04b977b18d5c573b333a2207229a83"
@@ -10025,16 +10137,16 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
-type-fest@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
-  integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
-
 type-fest@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
 type-fest@^0.8.0:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
@@ -10059,9 +10171,9 @@ typescript@~4.2:
   integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==
 
 ua-parser-js@^0.7.24:
-  version "0.7.24"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.24.tgz#8d3ecea46ed4f1f1d63ec25f17d8568105dc027c"
-  integrity sha512-yo+miGzQx5gakzVK3QFfN0/L9uVhosXBBO7qmnk7c2iw1IhL212wfA3zbnI54B0obGwC/5NWub/iT9sReMx+Fw==
+  version "0.7.26"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.26.tgz#b3731860e241419abd5b542b1a0881070d92e0ce"
+  integrity sha512-VwIvGlFNmpKbjzRt51jpbbFTrKIEgGHxIwA8Y69K1Bqc6bTIV7TaGGABOkghSFQWsLmcRB4drGvpfv9z2szqoQ==
 
 ufo@^0.6.10:
   version "0.6.10"
@@ -10069,19 +10181,19 @@ ufo@^0.6.10:
   integrity sha512-sMbJnrBcKKsbVyr6++hb0n9lCmrMqkJrNnJIOJ3sckeqY6NMfAULcRGbBWcASSnN1HDV3YqiGCPzi9RVs511bw==
 
 uglify-js@^3.5.1:
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.1.tgz#2749d4b8b5b7d67460b4a418023ff73c3fefa60a"
-  integrity sha512-EWhx3fHy3M9JbaeTnO+rEqzCe1wtyQClv6q3YWq0voOj4E+bMZBErVS1GAHPDiRGONYq34M1/d8KuQMgvi6Gjw==
+  version "3.13.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.3.tgz#ce72a1ad154348ea2af61f50933c76cc8802276e"
+  integrity sha512-otIc7O9LyxpUcQoXzj2hL4LPWKklO6LJWoJUzNa8A17Xgi4fOeDC8FBDOLHnC/Slo1CQgsZMcM6as0M76BZaig==
 
 unbox-primitive@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.0.tgz#eeacbc4affa28e9b3d36b5eaeccc50b3251b1d3f"
-  integrity sha512-P/51NX+JXyxK/aigg1/ZgyccdAxm5K1+n8+tvqSntjOivPt19gvm1VC49RWYetsiub8WViUchdxl/KWHHB0kzA==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
+  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
   dependencies:
     function-bind "^1.1.1"
-    has-bigints "^1.0.0"
-    has-symbols "^1.0.0"
-    which-boxed-primitive "^1.0.1"
+    has-bigints "^1.0.1"
+    has-symbols "^1.0.2"
+    which-boxed-primitive "^1.0.2"
 
 unfetch@^4.2.0:
   version "4.2.0"
@@ -10429,6 +10541,16 @@ vite-plugin-vue2@^1.4.0:
     vue-template-compiler "^2.6.11"
     vue-template-es2015-compiler "^1.9.1"
 
+vite-plugin-windicss@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-0.11.2.tgz#d711638ec39e55a22a1dddebe6067bdfd1d7d03a"
+  integrity sha512-BtgDL/wUygdl+zo0eIAfXG+jz+sXAMoBHyNUrof4oA037aI/BY0s68VSUlWeOqv0lnT7HhMeg5jyJodS50RPZw==
+  dependencies:
+    "@windicss/plugin-utils" "0.11.2"
+    chalk "^4.1.0"
+    debug "^4.3.2"
+    windicss "^2.5.8"
+
 vite-plugin-windicss@^0.9.4:
   version "0.9.7"
   resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-0.9.7.tgz#27840f480c786f920f0130b3058604c97c2d8a69"
@@ -10678,7 +10800,7 @@ webpackbar@^4.0.0:
     text-table "^0.2.0"
     wrap-ansi "^6.0.0"
 
-which-boxed-primitive@^1.0.1:
+which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
   integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
@@ -10738,6 +10860,11 @@ windicss@^2.5.2, windicss@^2.5.3, windicss@^2.5.4:
   resolved "https://registry.yarnpkg.com/windicss/-/windicss-2.5.4.tgz#e89cd614cc4a7c2c13cc5af588642959de6746db"
   integrity sha512-K+w/TOxbY38bIjRyJVgQ29ndZ0xZsbpf4a7wClqyFDQdCTbuCnzChBMpO13BqLmksIaHRzL46TeBRpFyV6n5/A==
 
+windicss@^2.5.8:
+  version "2.5.8"
+  resolved "https://registry.yarnpkg.com/windicss/-/windicss-2.5.8.tgz#254980044de3031276062b90cfce53c13ee489bf"
+  integrity sha512-zHkozdIqv1YTIGHBOHeFGsuZVTN5yAMz6FW5Bp8im9JZxSRZLOLKdJB0K75SL13iLHKXHrC1ukwJjjL8CohrUw==
+
 worker-farm@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"