Implement nuxt-content

2026-01-14 12:14:42 +01:00 · 2020-12-12 14:32:09 +01:00
parent 728a0261af
commit ebe7b2eae3
53 changed files with 1970 additions and 750 deletions
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -11,3 +11,15 @@ img, svg {
  @apply select-none outline-none;
 }

+.nuxt-content {
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply text-black dark:text-white
+  }
+
+  p {
+    @apply text-gray-900 dark:text-gray-900;
+  }
+
+}
+
--- a/assets/img/skills/Css.png
+++ b/assets/img/skills/Css.png
--- a/assets/img/skills/Docker.png
+++ b/assets/img/skills/Docker.png
--- a/assets/img/skills/ElectronJs.png
+++ b/assets/img/skills/ElectronJs.png
--- a/assets/img/skills/Git.png
+++ b/assets/img/skills/Git.png
--- a/assets/img/skills/GoLang.png
+++ b/assets/img/skills/GoLang.png
--- a/assets/img/skills/Html.png
+++ b/assets/img/skills/Html.png
--- a/assets/img/skills/Java.png
+++ b/assets/img/skills/Java.png
--- a/assets/img/skills/JavaScript.png
+++ b/assets/img/skills/JavaScript.png
--- a/assets/img/skills/MariaDB.png
+++ b/assets/img/skills/MariaDB.png
--- a/assets/img/skills/NodeJs.png
+++ b/assets/img/skills/NodeJs.png
--- a/assets/img/skills/NuxtJs.png
+++ b/assets/img/skills/NuxtJs.png
--- a/assets/img/skills/Python.png
+++ b/assets/img/skills/Python.png
--- a/assets/img/skills/RabbitMQ.png
+++ b/assets/img/skills/RabbitMQ.png
--- a/assets/img/skills/Redis.png
+++ b/assets/img/skills/Redis.png
--- a/assets/img/skills/Sass.png
+++ b/assets/img/skills/Sass.png
--- a/assets/img/skills/TailwindCss.png
+++ b/assets/img/skills/TailwindCss.png
--- a/assets/img/skills/TypeScript.png
+++ b/assets/img/skills/TypeScript.png
--- a/assets/img/skills/VueJs.png
+++ b/assets/img/skills/VueJs.png
--- a/components/Experience.vue
+++ b/components/Experience.vue
@@ -8,8 +8,8 @@
    </div>
    <div class="leading-7">
      <p class="text-base dark:text-dark-900 text-gray-800 leading-6">{{ formatDate(begin) }} - {{ formatDate(end) }} <span class="px-3">|</span> {{location}}</p>
-      <h1 class="text-2xl font-bold">{{ $t(title) }} - {{company}}</h1>
-      <h2 class="text-xl">{{ $t(description) }}</h2>
+      <h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
+      <h2 class="text-xl">{{ company }}</h2>
    </div>
  </div>
 </template>
@@ -22,10 +22,6 @@ export default {
      type: String,
      default: "Title"
    },
-    description: {
-      type: String,
-      default: "Description"
-    },
    company: {
      type: String,
      default: "ArtDanjProduction"
@@ -45,8 +41,8 @@ export default {
  },
  methods: {
    formatDate(date) {
-      const dateFormat = new Date(date)
-      return date === 'Today' ? 'Today' : this.$t('month_' + dateFormat.getMonth()) + " " + dateFormat.getFullYear()
+      const dateFormat = date.split('-')
+      return date === 'Today' ? 'Today' : this.$t('month.' + dateFormat[0]) + " " + dateFormat[1]
    }
  }
 }
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -3,7 +3,7 @@
    <div>
      <div class="flex flex-col items-center py-4 text-center ">
        <div class="mb-3">
-          <p class="inline">{{ $t('footer_find_me') }}
+          <p class="inline">{{ $t('footer.find_me') }}
            <br class="md:hidden"/>
            <a class="font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank">
              <img class="inline img" src="@/assets/img/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
@@ -16,7 +16,7 @@
            <a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank">
              <img class="inline img" src="@/assets/img/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
              <span class="link">Twitter</span>
-            </a> {{ $t('footer_separator') }}
+            </a> {{ $t('footer.separator') }}
            <a class="font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank">
              <svg class="inline img" width="20" height="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 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
@@ -25,11 +25,11 @@
              </a>
          </p>
          <span class="inline dark:text-dark-900 text-gray-600 text-xs">
-            {{ $t('footer_links_click') }}
+            {{ $t('footer.links_click') }}
          </span>
        </div>
        <p>
-          {{ $t('footer_credits') }}
+          {{ $t('footer.credits') }}
          <a class="font-semibold" target="_blank" href="https://nuxtjs.org">
            <img class="inline img" src="@/assets/img/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
            <span class="link">NuxtJs</span>
@@ -39,9 +39,9 @@
            <img class="inline img" src="@/assets/img/socials/adonisjs.svg" alt="AdonisJs logo" height="20" width="20" />
            <span class="link">AdonisJs</span>
          </a>
-          {{ $t('footer_credits_separator') }} <span>Arthur DANJOU</span>
+          {{ $t('footer.credits_separator') }} <span>Arthur DANJOU</span>
        </p>
-        <p>{{ $t('footer_copyrights', { date: date }) }}</p>
+        <p>{{ $t('footer.copyrights', { date: date }) }}</p>
      </div>
    </div>
  </footer>
@@ -65,7 +65,7 @@ export default {
  }

  .link {
-    transition-duration: .2s;
+    @apply 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;
--- a/components/Formation.vue
+++ b/components/Formation.vue
@@ -41,8 +41,8 @@ export default {
  },
  methods: {
    formatDate(date) {
-      const dateFormat = new Date(date)
-      return date === 'Today' ? 'Today' : this.$t('month_' + dateFormat.getMonth()) + " " + dateFormat.getFullYear()
+      const dateFormat = date.split('-')
+      return date === 'Today' ? 'Today' : this.$t('month.' + dateFormat[0]) + " " + dateFormat[1]
    }
  }
 }
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -3,7 +3,7 @@
    <div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
      <nuxt-link to="/">
        <div class="left text-2xl font-bold cursor-pointer 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') }}
+          {{ $t('header.title') }}
        </div>
      </nuxt-link>
      <nav class="right">
@@ -31,27 +31,27 @@
            </li>
            <nuxt-link class="red hidden md:inline-block" to="/">
              <li class="hover:text-red-400 font-bold mx-2 cursor-pointer duration-300">
-                {{ $t('part_home') }}
+                {{ $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">
-                {{ $t('part_about') }}
+                {{ $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">
-                {{ $t('part_blog') }}
+                {{ $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('part_work') }}
+                {{ $t('header.work') }}
              </li>
            </nuxt-link>
            <nuxt-link class="purple hidden md:inline-block" to="/contact">
              <li class="hover:text-purple-400 font-bold mx-2 cursor-pointer duration-300">
-                {{ $t('part_contact') }}
+                {{ $t('header.contact') }}
              </li>
            </nuxt-link>
          </ul>
@@ -62,7 +62,7 @@
              <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('part_home') }}
+              {{ $t('header.home') }}
            </li>
          </nuxt-link>
          <nuxt-link to="/about" class="w-1/5 orange">
@@ -70,7 +70,7 @@
              <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('part_about') }}
+              {{ $t('header.about') }}
            </li>
          </nuxt-link>
          <nuxt-link to="/blog" class="w-1/5 green">
@@ -78,7 +78,7 @@
              <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('part_blog') }}
+              {{ $t('header.blog') }}
            </li>
          </nuxt-link>
          <nuxt-link to="/work" class="w-1/5 blue">
@@ -86,7 +86,7 @@
              <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('part_work') }}
+              {{ $t('header.work') }}
            </li>
          </nuxt-link>
          <nuxt-link to="/contact" class="w-1/5 purple">
@@ -95,7 +95,7 @@
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
-              {{ $t('part_contact') }}
+              {{ $t('header.contact') }}
            </li>
          </nuxt-link>
        </ul>
@@ -121,6 +121,9 @@ export default {
    },
    changeLanguage(lang) {
      this.$i18n.setLocale(lang)
+      if (this.$router.currentRoute.fullPath.includes('blog')) {
+        this.$fetch()
+      }
    },
  },
  mounted() {
--- a/components/HomeLink.vue
+++ b/components/HomeLink.vue
@@ -4,7 +4,7 @@
      class="home-link h-full duration-500 cursor-pointer flex flex-row justify-between py-3 w-full md:w-96 items-center"
      :class="color ? 'hover:bg-' + color + '-400 dark:hover:bg-' + color + '-600 active:bg-' + color + '-400 dark:active:bg-' + color + '-600' : ''">
      <div class="ml-4">
-        <h1 class="text-3xl font-bold my-2">
+        <h1 class="text-2xl md:text-3xl font-bold my-2">
          {{ $t(title) }}
          <slot />
        </h1>
--- a/components/Post.vue
+++ b/components/Post.vue
@@ -5,13 +5,13 @@
  >
    <div>
      <p
-        class="text-3xl  font-bold text-justify leading-7 mb-3"
-        :class="lightBg === 1 ? 'text-black':'text-white'"
-      >{{ $t(title) }}</p>
+        class="text-2xl md:text-3xl font-bold md:text-justify leading-7 mb-3"
+        :class="lightBg ? 'text-black':'text-white'"
+      >{{ title }}</p>
      <p
        class="text-lg italic text-justify leading-5"
-        :class="lightBg === 1 ? 'text-gray-900':'text-dark-900'"
-      >{{ $t(description) }}</p>
+        :class="lightBg ? 'text-gray-900':'text-dark-900'"
+      >{{ description }}</p>
    </div>
    <div
      class="flex justify-between mt-8 items-end"
@@ -20,7 +20,6 @@
      <div>
        <div>{{formatDate}}</div>
        <div>{{reading_time}} min</div>
-        <div>{{likes}} ❤</div>
      </div>
      <div class="self-end flex flex-wrap flex-col md:flex-row">
        <div v-for="tag in tags"
@@ -54,10 +53,6 @@ export default {
      type: String,
      default: "Today"
    },
-    likes: {
-      type: Number,
-      default: 0
-    },
    tags: {
      type: Array,
      default: () => ["Tag1", "Tag2", "Tag3"],
@@ -67,14 +62,14 @@ export default {
      default: "default.png"
    },
    lightBg: {
-      type: Number,
+      type: Boolean,
      default: false
    }
  },
  computed: {
    formatDate() {
-      const date = new Date(this.date)
-      return date.getDate() + " " + this.$t('month_' + date.getMonth()) + " " + date.getFullYear()
+      const dateFormat = this.date.split('-')
+      return dateFormat[0] + " " + this.$t('month.' + dateFormat[1]) + " " + dateFormat[2]
    },
  }
 }
--- a/components/Skill.vue
+++ b/components/Skill.vue
@@ -2,9 +2,9 @@
  <div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-400'">
    <div class="w-full h-full flex flex-col justify-center items-center">
      <div>
-        <img class="rounded-sm" alt="Skill Img" :src="'http://localhost:5555/files/' + cover">
+        <img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">
      </div>
-      <h1 class="md:text-xl text-lg font-bold text-center">{{ $t(skill) }}</h1>
+      <h1 class="md:text-xl text-lg font-bold text-center">{{ skill }}</h1>
    </div>
  </div>
 </template>
@@ -19,7 +19,7 @@ export default {
    },
    color: {
      type: String,
-      default: "red-100"
+      default: "red"
    },
    cover: {
      type: String,
--- a/components/Work.vue
+++ b/components/Work.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
+  <div class="mb-3 mr-3 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
    <div class="w-full h-full flex flex-col justify-center items-center">
-      <div>
+      <div class="text-center">
        <img alt="Project Img" class="rounded-md" width="150" :src="'http://localhost:5555/files/' + cover">
      </div>
      <div class="text-center">
-        <h1 class="md:text-2xl text-lg font-bold">{{ $t(title) }}</h1>
+        <h1 class="md:text-2xl text-lg font-bold">{{ title }}</h1>
        <a :href="url" :class="'text-' + color + '-500'">{{ formatLink }}</a>
      </div>
    </div>
--- a/components/WorkSkill.vue
+++ b/components/WorkSkill.vue
@@ -2,9 +2,9 @@
  <div class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
    <div class="w-full h-full flex flex-col justify-center items-center">
      <div>
-        <img class="rounded-sm" alt="Skill Img" :src="'http://localhost:5555/files/' + cover">
+        <img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">
      </div>
-      <h1 class="md:text-xl text-lg font-bold text-center">{{ $t(skill) }}</h1>
+      <h1 class="md:text-xl text-lg font-bold text-center">{{ skill }}</h1>
    </div>
  </div>
 </template>
--- a/config/Content.ts
+++ b/config/Content.ts
@@ -0,0 +1,4 @@
+export default {
+  apiPrefix: 'api',
+  nestedProperties: ['categories.slug'],
+}
--- a/config/Ngrok.ts
+++ b/config/Ngrok.ts
@@ -1,7 +0,0 @@
-export default {
-  authtoken: process.env.NGROK_AUTHTOKEN,
-  auth: process.env.NGROK_AUTH_USER + ':' + process.env.NGROK_AUTH_PASS,
-  region: 'eu',
-  addr: process.env.NGROK_PORT,
-  proto: 'http',
-}
--- a/config/Translation.ts
+++ b/config/Translation.ts
@@ -3,12 +3,14 @@ export default {
    {
      code: 'en',
      name: 'English',
+      iso: 'en-Us',
      file: 'en-US.ts',
    },
    {
      code: 'fr',
-      name: 'Français',
+      iso: 'fr-FR',
      file: 'fr-FR.ts',
+      name: 'Français'
    },
  ],
  strategy: 'no_prefix',
@@ -19,4 +21,5 @@ export default {
  vueI18n: {
    fallbackLocale: 'en',
  },
+  differentDomains: (process.env.NODE_ENV === 'production')
 }
--- a/config/index.ts
+++ b/config/index.ts
@@ -3,6 +3,6 @@ import Head from './Head'
 import ColorMode from './ColorMode'
 import Tailwind from './Tailwind'
 import Translation from './Translation'
-import Ngrok from './Ngrok'
+import Content from './Content'

-export { Axios, Head, ColorMode, Tailwind, Translation, Ngrok }
+export { Axios, Head, ColorMode, Tailwind, Translation, Content }
--- a/content/articles/fr/test-1.md
+++ b/content/articles/fr/test-1.md
@@ -0,0 +1,21 @@
+---
+slug: test-1
+title: Mon premier Article
+description: C'est un article écrit pour tester mon super système
+reading_time: 15
+tags: ["tags.dev", "tags.life"]
+cover: 'default'
+date: 12-04-2020
+background: false
+---
+
+Hey bro
+Whats'up
+I'am fine 
+
+## hey bro
+
+# Hey
+
+Faut bien test hein
+
--- a/content/experiences.json
+++ b/content/experiences.json
@@ -0,0 +1,34 @@
+[
+  {
+    "slug": "erisium",
+    "title": "experiences.erisium",
+    "company": "Erisium",
+    "location": "Remote",
+    "begin_date": "02-2019",
+    "end_date": "11-2020"
+  },
+  {
+    "slug": "freelance",
+    "title": "experiences.freelance",
+    "company": "ArtDanjProduction",
+    "location": "France",
+    "begin_date": "09-2015",
+    "end_date": "Today"
+  },
+  {
+    "slug": "idemia",
+    "title": "experiences.idemia",
+    "company": "Idemia",
+    "location": "France",
+    "begin_date": "06-2019",
+    "end_date": "06-2019"
+  },
+  {
+    "slug": "la-salle-a-manger",
+    "title": "experiences.lsam",
+    "company": "La Salle à manger",
+    "location": "France",
+    "begin_date": "04-2018",
+    "end_date": "04-2018"
+  }
+]
--- a/content/formations.json
+++ b/content/formations.json
@@ -0,0 +1,26 @@
+[
+  {
+    "slug": "freelance",
+    "title": "formations.freelance.title",
+    "description": "formations.freelance.description",
+    "location": "Remote",
+    "begin_date": "04-2015",
+    "end_date": "Today"
+  },
+  {
+    "slug": "dnb",
+    "title": "formations.dnb.title",
+    "description": "formations.dnb.description",
+    "location": "France",
+    "begin_date": "09-2017",
+    "end_date": "09-2018"
+  },
+  {
+    "slug": "bac",
+    "title": "formations.bac.title",
+    "description": "formations.bac.description",
+    "location": "France",
+    "begin_date": "09-2020",
+    "end_date": "Today"
+  }
+]
--- a/content/infos.json
+++ b/content/infos.json
@@ -0,0 +1,7 @@
+{
+  "age": 17,
+  "hiring": {
+    "status": "not_available",
+    "color": "red"
+  }
+}
--- a/content/skills.json
+++ b/content/skills.json
@@ -0,0 +1,110 @@
+[
+  {
+    "title": "Java",
+    "color": "blueGray",
+    "cover": "Java",
+    "slug": "java"
+  },
+  {
+    "title": "TypeScript",
+    "color": "cyan",
+    "cover": "TypeScript",
+    "slug": "typescript"
+  },
+  {
+    "title": "JavaScript",
+    "color": "yellow",
+    "cover": "JavaScript",
+    "slug": "javascript"
+  },
+  {
+    "title": "Python",
+    "color": "amber",
+    "cover": "Python",
+    "slug": "python"
+  },
+  {
+    "title": "Go",
+    "color": "cyan",
+    "cover": "GoLang",
+    "slug": "go"
+  },
+  {
+    "title": "NuxtJs",
+    "color": "emerald",
+    "cover": "NuxtJs",
+    "slug": "nuxtjs"
+  },
+  {
+    "title": "VueJs",
+    "color": "emerald",
+    "cover": "VueJs",
+    "slug": "VueJs"
+  },
+  {
+    "title": "Html",
+    "color": "orange",
+    "cover": "Html",
+    "slug": "html"
+  },
+  {
+    "title": "Css",
+    "color": "lightBlue",
+    "cover": "Css",
+    "slug": "css"
+  },
+  {
+    "title": "NodeJs",
+    "color": "lime",
+    "cover": "NodeJs",
+    "slug": "nodejs"
+  },
+  {
+    "title": "ElectronJs",
+    "color": "teal",
+    "cover": "ElectronJs",
+    "slug": "electronjs"
+  },
+  {
+    "title": "Git",
+    "color": "orange",
+    "cover": "Git",
+    "slug": "git"
+  },
+  {
+    "title": "MariaDB",
+    "color": "blue",
+    "cover": "MariaDB",
+    "slug": "mariadb"
+  },
+  {
+    "title": "RabbitMQ",
+    "color": "orange",
+    "cover": "RabbitMQ",
+    "slug": "rabbitmq"
+  },
+  {
+    "title": "Redis",
+    "color": "red",
+    "cover": "Redis",
+    "slug": "redis"
+  },
+  {
+    "title": "Sass",
+    "color": "rose",
+    "cover": "Sass",
+    "slug": "sass"
+  },
+  {
+    "title": "TailwindCss",
+    "color": "teal",
+    "cover": "TailwindCss",
+    "slug": "tailwind"
+  },
+  {
+    "title": "Docker",
+    "color": "cyan",
+    "cover": "Docker",
+    "slug": "docker"
+  }
+]
--- a/content/tags.json
+++ b/content/tags.json
@@ -0,0 +1,11 @@
+[
+  {
+    "slug": "tags.dev"
+  },
+  {
+    "slug": "tags.tech"
+  },
+  {
+    "slug": "tags.life"
+  }
+]
--- a/content/works.json
+++ b/content/works.json
@@ -0,0 +1,35 @@
+[
+  {
+    "slug": "artsite",
+    "title": "arthurdanjou.fr",
+    "description": "works.artsite",
+    "url": "https://arthurdanjou.fr",
+    "cover": "artsite",
+    "color": "gray",
+    "skills": [
+      "typescript",
+      "nuxtjs",
+      "vuejs",
+      "git",
+      "tailwindcss",
+      "sass"
+    ]
+  },
+  {
+    "slug": "artapi",
+    "title": "api.arthurdanjou.fr",
+    "description": "works.artapi",
+    "url": "https://api.arthurdanjou.fr",
+    "cover": "artapi",
+    "color": "gray",
+    "skills": [
+      "typescript",
+      "adonisjs",
+      "git",
+      "docker",
+      "nodejs",
+      "redis",
+      "mariadb"
+    ]
+  }
+]
--- a/locales/en-US.ts
+++ b/locales/en-US.ts
@@ -1,12 +1,170 @@
-import axios from "axios";
-import {Axios} from "../config";
+export default {
+  test: 'Test',

-export default async function () {
-  let informations = {}
-  const {data: translations} = await axios.get(Axios.baseURL + 'translations')
-  translations.map((item: any) => {
-    const { code, en } = item
-    informations = { ...informations, [code]: en }
-  })
-  return informations
+  header: {
+    title: 'Arthur Danjou',
+    home: 'Home',
+    about: 'About',
+    blog: 'Blog',
+    work: 'Work',
+    contact: 'Contact'
+  },
+
+  footer: {
+    find_me: 'Retrouvez moi sur :',
+    separator: 'et par',
+    links_click: '(Clique c\'est gratuit 🔗)',
+    credits: 'Développé et conçu avec ❤ en utilisant',
+    credits_separator: 'par',
+    copyrights: '© Copyright %date% - Tous droits réservés'
+  },
+
+  part: {
+    about: 'A Propos',
+    blog: 'Mon Blog',
+    work: 'Mon Travail',
+    contact: 'Me Contacter',
+    about_description: 'Apprenez en plus à mon propos, comment je travaille et qui je suis',
+    blog_description: 'Je rédige des articles concernant ma vie, le développement et mes passions',
+    work_description: 'Découvrez mes créations pour avoir une idée de mes compétences',
+    contact_description: 'Trouvez le service qui vous correspond le plus pour collaborer ensemble'
+  },
+
+  home: {
+    banner: {
+      role: 'Développeur & étudiant ',
+      hello: 'Bonjour, je suis',
+      description: 'Je suis un jeune développeur autodidacte de 17 ans. J\'habite à Paris 🇫🇷. J\'adore créer des applications et des logiciels plus ou moins utiles. J\'utilise des technologies modernes pour obtenir le meilleur résultat possible ✨',
+    },
+  },
+
+  blog: {
+    read: {
+      back: 'Retour en arrière',
+      thanks: 'Merci d\'avoir lu jusqu\'au bout !',
+      time: 'Lecture'
+    },
+    tweet: 'J\'aime un nouvel article d\'@ArthurDanj, venez le découvrir ici :',
+    no_posts: 'Malheureusement il n\'y a pas encore d\'articles disponibles. Reviens plus tard 😉',
+    tags: {
+      search: 'Vous recherchez un type d\'article en particulier ? Tester la recherche par tag 🏷',
+      back: 'Revenir à tous les articles',
+    },
+    pagination: {
+      prev: 'Précédent',
+      next: 'Suivant'
+    }
+  },
+
+  about: {
+    banner: {
+      hello: 'Bonjour, je suis',
+      1: 'Je suis un jeune développeur créatif qui aime bricoler et toucher à tout ! Je m\'intéresse beaucoup aux nouvelles technologies, au développement et à l\'informatique.',
+      2: 'J\'adore partager mes connaissances et aider les autres à travers des lives sur Twitchs, des articles techniques sur mon blog, des projets open-sources ou encore en relisant du code de la communauté. Tant que je partage mes passions, je continuerai à faire ça.',
+      3: 'Je suis capable d\'apprendre rapidement des nouvelles technologies pour répondre aux besoins des différents projets. J\'identifie souvent le besoin de nouveaux systèmes ou outils pour améliorer l\'efficacité du flux de travail. Je suis toujours motivé par un défi et j\'aime être bien organisé pour produire des résultats cohérents.',
+    },
+    title: {
+      skills: 'Compétences Techniques',
+      interests: 'Intérêts',
+      technologies: 'Technologies',
+      languages: 'Langues',
+      formations: 'Formations',
+      experiences: 'Expériences'
+    },
+    interests: {
+      dev: 'Développement',
+      devops: 'DevOps',
+      startups: 'Startups & Entreprises innovantes',
+      sysadmin: 'Administration système',
+      trips: 'Voyage',
+      moto: 'Moto'
+    },
+    languages: {
+      fr: 'Français',
+      en: 'Anglais',
+      native: 'Natal',
+      fluent: 'Courant'
+    },
+    cv: 'Télécharger mon CV',
+    environment: 'Mon Environnement',
+    env: {
+      description: 'Mon environnement de développement permet de gagner en productivité. En effet, je m\'organise de la sorte à toujours optimiser mon temps de réflexion et de développement. Voici donc une liste de tous mes logiciels que j\'utilise au quotidien et de mon setup.',
+      ide: 'Editeurs de texte',
+      apps: 'Apps & Logiciels',
+      hosting: 'Hébergement',
+      setup: 'Setup bureautique'
+    },
+    ide: {
+      java: 'Editeur Java',
+      python: 'Editeur Python',
+      web: 'Editeur Web',
+      go: 'Editeur Go',
+      db: 'Editeur Bases de données',
+      all: 'All-In-One'
+    },
+    vpn_client: 'Client VPN',
+    ftp_client: 'Client FTP',
+    web_client: 'Navigateur Web',
+    design_tool: 'Création / Graphisme',
+    hosting: {
+      vps: 'Hébergeur VPS',
+      ndd: 'Nom de domaine'
+    },
+    setup: {
+      desk: 'Bureau',
+      phone: 'Téléphone',
+      computer: 'Ordinateur fixe',
+      screen: 'Ecran',
+      keyboard: 'Clavier',
+      mouse: 'Souris',
+      headphone: 'Ecouteurs',
+      microphone: 'Casque / Micro'
+    }
+  },
+
+  work: {
+    no_work: 'Malheureusement il n\'y a pas encore de projets disponibles. Reviens plus tard 😉',
+    description: 'Voici les différents projets auxquels j\'ai pu participer dans mon passé !'
+  },
+
+  contact: {
+    newsletter: {
+      title: 'Software & Tech Newsletter 📬',
+      description: 'Abonnez vous pour ne pas louper mes prochaines offres, mes prochains articles et mes nouveaux projets.',
+      unfollow: 'Pas de spam. Désabonnement quand vous voulez'
+    },
+    form: {
+      name: 'Prénom',
+      mail: 'Adresse Mail',
+      submit: 'S\'abonner',
+      error: 'Erreur dans le formulaire !',
+      success: 'nscription confirmée pour %email% !'
+    },
+    how_to: {
+      title: 'Comment me contacter ? ✉',
+      description: 'N\'hésitez pas à me contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous discuter ✌️'
+    },
+    available: {
+      title: 'Suis-je disponible ? 🚩',
+      description: 'Ce status sera mis à jour en temps réel pour vous indiquer si je suis disponible pour du travail.',
+      start: 'Je suis actuellement',
+      end: 'pour du travail'
+    }
+  },
+
+  copied: 'Copié',
+  month: {
+    1: 'Janvier',
+    2: 'Février',
+    3: 'Mars',
+    4: 'Avril',
+    5: 'Mai',
+    6: 'Juin',
+    7: 'Juillet',
+    8: 'Août',
+    9: 'Septembre',
+    10: 'Octobre',
+    11: 'Novembre',
+    12: 'Décembre',
+  }
 }
--- a/locales/fr-FR.ts
+++ b/locales/fr-FR.ts
@@ -1,12 +1,218 @@
-import axios from "axios";
-import {Axios} from "../config";
+export default {
+  test: 'Test',

-export default async function () {
-  let informations = {}
-  const {data: translations} = await axios.get(Axios.baseURL + 'translations')
-  translations.map((item: any) => {
-    const { code, fr } = item
-    informations = { ...informations, [code]: fr }
-  })
-  return informations
+  header: {
+    title: 'Arthur Danjou',
+    home: 'Accueil',
+    about: 'Moi',
+    blog: 'Blog',
+    work: 'Travail',
+    contact: 'Contact'
+  },
+
+  footer: {
+    find_me: 'Retrouvez moi sur :',
+    separator: 'et par',
+    links_click: '(Clique c\'est gratuit 🔗)',
+    credits: 'Développé et conçu avec ❤ en utilisant',
+    credits_separator: 'par',
+    copyrights: '© Copyright {date} - Tous droits réservés'
+  },
+
+  part: {
+    about: 'A Propos',
+    blog: 'Mon Blog',
+    work: 'Mon Travail',
+    contact: 'Me Contacter',
+    about_description: 'Apprenez en plus à mon propos, comment je travaille et qui je suis',
+    blog_description: 'Je rédige des articles concernant ma vie, le développement et mes passions',
+    work_description: 'Découvrez mes créations pour avoir une idée de mes compétences',
+    contact_description: 'Trouvez le service qui vous correspond le plus pour collaborer ensemble'
+  },
+
+  home: {
+    banner: {
+      role: 'Développeur & étudiant ',
+      hello: 'Bonjour, je suis',
+      description: 'Je suis un jeune développeur autodidacte de {age} ans. J\'habite à Paris 🇫🇷. J\'adore créer des applications et des logiciels plus ou moins utiles. J\'utilise des technologies modernes pour obtenir le meilleur résultat possible ✨',
+    },
+  },
+
+  blog: {
+    read: {
+      back: 'Retour en arrière',
+      thanks: 'Merci d\'avoir lu jusqu\'au bout !',
+      time: 'Lecture'
+    },
+    tweet: 'J\'aime un nouvel article d\'@ArthurDanj, venez le découvrir ici :',
+    no_posts: 'Malheureusement il n\'y a pas encore d\'articles disponibles. Reviens plus tard 😉',
+    tags: {
+      search: 'Vous recherchez un type d\'article en particulier ? Tester la recherche par tag 🏷',
+      back: 'Revenir à tous les articles',
+      current: 'Liste des articles possédant le tag \'{tag}\' :'
+    },
+    pagination: {
+      prev: 'Précédent',
+      next: 'Suivant'
+    }
+  },
+
+  about: {
+    banner: {
+      hello: 'Bonjour, je suis',
+      1: 'Je suis un jeune développeur créatif qui aime bricoler et toucher à tout ! Je m\'intéresse beaucoup aux nouvelles technologies, au développement et à l\'informatique.',
+      2: 'J\'adore partager mes connaissances et aider les autres à travers des lives sur Twitchs, des articles techniques sur mon blog, des projets open-sources ou encore en relisant du code de la communauté. Tant que je partage mes passions, je continuerai à faire ça.',
+      3: 'Je suis capable d\'apprendre rapidement des nouvelles technologies pour répondre aux besoins des différents projets. J\'identifie souvent le besoin de nouveaux systèmes ou outils pour améliorer l\'efficacité du flux de travail. Je suis toujours motivé par un défi et j\'aime être bien organisé pour produire des résultats cohérents.',
+    },
+    title: {
+      skills: 'Compétences Techniques',
+      interests: 'Intérêts',
+      technologies: 'Technologies',
+      languages: 'Langues',
+      formations: 'Formations',
+      experiences: 'Expériences'
+    },
+    interests: {
+      dev: 'Développement',
+      devops: 'DevOps',
+      startups: 'Startups & Entreprises innovantes',
+      sysadmin: 'Administration système',
+      trips: 'Voyage',
+      moto: 'Moto'
+    },
+    languages: {
+      fr: 'Français',
+      en: 'Anglais',
+      native: 'Natal',
+      fluent: 'Courant'
+    },
+    cv: 'Télécharger mon CV',
+    environment: 'Mon Environnement',
+    env: {
+      description: 'Mon environnement de développement permet de gagner en productivité. En effet, je m\'organise de la sorte à toujours optimiser mon temps de réflexion et de développement. Voici donc une liste de tous mes logiciels que j\'utilise au quotidien et de mon setup.',
+      ide: 'Editeurs de texte',
+      apps: 'Apps & Logiciels',
+      hosting: 'Hébergement',
+      setup: 'Setup bureautique'
+    },
+    ide: {
+      java: 'Editeur Java',
+      python: 'Editeur Python',
+      web: 'Editeur Web',
+      go: 'Editeur Go',
+      db: 'Editeur Bases de données',
+      all: 'All-In-One'
+    },
+    police: 'Police d\'Ecriture',
+    console: 'Console',
+    wsl_2: 'WSL 2',
+    email_client: 'Client Email',
+    vpn_client: 'Client VPN',
+    ftp_client: 'Client FTP',
+    web_client: 'Navigateur Web',
+    design_tool: 'Création / Graphisme',
+    communication_tool: 'Outil de Communication',
+    organisation_tool: 'Outil d\'Organisation',
+    hosting: {
+      vps: 'Hébergeur VPS',
+      ndd: 'Nom de domaine'
+    },
+    setup: {
+      desk: 'Bureau',
+      phone: 'Téléphone',
+      computer: 'Ordinateur fixe',
+      screen: 'Ecran',
+      keyboard: 'Clavier',
+      mouse: 'Souris',
+      headphone: 'Ecouteurs',
+      microphone: 'Casque / Micro'
+    }
+  },
+
+  work: {
+    no_work: 'Malheureusement il n\'y a pas encore de projets disponibles. Reviens plus tard 😉',
+    description: 'Voici les différents projets auxquels j\'ai pu participer dans mon passé !',
+    tech_used: 'Listes des compétences utilisées',
+    go_back: 'Retour en arrière'
+  },
+
+  contact: {
+    newsletter: {
+      title: 'Software & Tech Newsletter 📬',
+      description: 'Abonnez vous pour ne pas louper mes prochaines offres, mes prochains articles et mes nouveaux projets.',
+      unfollow: 'Pas de spam. Désabonnement quand vous voulez'
+    },
+    form: {
+      name: 'Prénom',
+      mail: 'Adresse Mail',
+      submit: 'S\'abonner',
+      error: 'Erreur dans le formulaire !',
+      success: 'nscription confirmée pour %email% !'
+    },
+    how_to: {
+      title: 'Comment me contacter ? ✉',
+      description: 'N\'hésitez pas à me contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous discuter ✌️'
+    },
+    available: {
+      title: 'Suis-je disponible ? 🚩',
+      description: 'Ce status sera mis à jour en temps réel pour vous indiquer si je suis disponible pour du travail.',
+      start: 'Je suis actuellement',
+      end: 'pour du travail'
+    }
+  },
+
+  copied: 'Copié',
+  month: {
+    '01': 'Janvier',
+    '02': 'Février',
+    '03': 'Mars',
+    '04': 'Avril',
+    '05': 'Mai',
+    '06': 'Juin',
+    '07': 'Juillet',
+    '08': 'Août',
+    '09': 'Septembre',
+    10: 'Octobre',
+    11: 'Novembre',
+    12: 'Décembre',
+  },
+  hiring: {
+    status: {
+      not_available: 'non disponible',
+      available: 'disponible'
+    }
+  },
+
+  tags: {
+    life: 'Vie',
+    dev: 'Dev',
+    tech: 'Tech'
+  },
+
+  experiences: {
+    erisium: 'Développeur Junior',
+    freelance: 'Développement FullStack Software & Web FullStack',
+    idemia: 'Découverte du secteur IT & du data-center',
+    lsam: 'Nettoyage de la salle – Serveur – Prise de commandes – Accueil des clients'
+  },
+
+  formations: {
+    freelance: {
+      title: 'Auto-apprentissage',
+      description: 'Java, TypeScript, Go, Python, etc...'
+    },
+    dnb: {
+      title: 'Diplôme National du Brevet',
+      description: 'Obtention du Brevet mention Très Bien'
+    },
+    bac: {
+      title: 'Baccalauréat',
+      description: 'Baccalauréat Général Physique/Chimie & Mathématiques'
+    }
+  },
+
+  works: {
+    artapi: 'ArtApi est mon API personnelle connectée à mes diverses instances',
+    artsite: 'ArtSite est mon site personnel créant un point de contact unique'
+  }
 }
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,4 +1,4 @@
-import { Axios, Head, ColorMode, Tailwind, Translation, Ngrok } from './config'
+import { Axios, Head, ColorMode, Tailwind, Translation, Content } from './config'

 export default {
  head: Head,
@@ -20,12 +20,12 @@ export default {
    '@nuxt/typescript-build',
    ['@nuxtjs/tailwindcss', Tailwind],
    ['@nuxtjs/color-mode', ColorMode],
-    ['@nuxtjs/ngrok', Ngrok]
  ],

  modules: [
    ['@nuxtjs/axios', Axios],
-    ['nuxt-i18n', Translation]
+    ['nuxt-i18n', Translation],
+    ['@nuxt/content', Content]
  ],

  buildDir: 'build',
--- a/package.json
+++ b/package.json
@@ -9,9 +9,10 @@
    "generate": "nuxt-ts generate"
  },
  "dependencies": {
+    "@nuxt/content": "^1.11.1",
    "@nuxt/typescript-runtime": "^2.0.0",
    "@nuxtjs/axios": "5.12.3",
-    "@nuxtjs/ngrok": "^2.0.0",
+    "@tailwindcss/typography": "^0.3.1",
    "core-js": "^3.8.0",
    "nuxt": "^2.14.6",
    "nuxt-i18n": "^6.15.4",
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1,7 +1,7 @@
 <template>
  <main class="about flex flex-col items-center px-5 xl:px-64">
    <PageTitle
-      title="home_link_about"
+      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">
@@ -13,15 +13,15 @@
        <img class="logo-img rounded-full my-5" src="@/assets/img/Logo.jpg" alt="It's me !" />
      </div>
      <div class="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>
+        <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') }}
+        {{ $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>
@@ -29,16 +29,16 @@
      <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">
          <Skill
-            :skill="skill.title.code"
+            :skill="skill.title"
            :color="skill.color"
-            :cover="skill.cover.file_name"
+            :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') }}
+        {{ $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" />
@@ -47,43 +47,43 @@
      <div>
        <ul class="text-xl">
          <li class="my-2">
-            {{ $t('about_title_technologies') }}
+            {{ $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') }}
+            {{ $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') }}
+            {{ $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') }}
+            {{ $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') }}
+            {{ $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') }}
+            {{ $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') }}
+            {{ $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>
@@ -93,7 +93,7 @@
    </div>
    <div class="w-full mb-10">
      <h3 class="font-bold text-2xl md:text-4xl">
-        {{ $t('about_title_languages') }}
+        {{ $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>
@@ -101,27 +101,27 @@
      <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>
+            <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>
+            <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') }}
+        {{ $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-for="formation in formations">
        <Formation
-          :title="formation.title.code"
-          :description="formation.description.code"
+          :title="formation.title"
+          :description="formation.description"
          :location="formation.location"
          :begin="formation.begin_date"
          :end="formation.end_date" />
@@ -129,16 +129,15 @@
    </div>
    <div class="w-full mb-10">
      <h3 class="font-bold text-2xl md:text-4xl mb-3">
-        {{ $t('about_title_experiences') }}
+        {{ $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-for="experience in experiences">
        <Experience
-          :title="experience.title.code"
+          :title="experience.title"
          :company="experience.company"
-          :description="experience.description.code"
          :location="experience.location"
          :begin="experience.begin_date"
          :end="experience.end_date" />
@@ -146,7 +145,7 @@
    </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') }}
+        {{ $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>
@@ -154,77 +153,77 @@
    </nuxt-link>
    <div class="mt-10 border-t-2 border-black dark:border-white border-solid w-full" />
    <PageTitle
-      title="about_part_environment"
+      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>
+    <p class="text-lg leading-6 text-justify pb-8">{{ $t('about.env.description') }}</p>
    <EnvGroup>
-      <EnvTitle title="about_env_ide">
+      <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="java_ide" content="Intellij Idea Ultimate" link="https://www.jetbrains.com/fr-fr/idea/"/>
-        <EnvListItem title="python_ide" content="PyCharm Ultimate" link="https://www.jetbrains.com/fr-fr/pycharm/"/>
-        <EnvListItem title="web_ide" content="WebStorm" link="https://www.jetbrains.com/fr-fr/webstorm/"/>
-        <EnvListItem title="go_ide" content="GoLand" link="https://www.jetbrains.com/fr-fr/go/"/>
-        <EnvListItem title="db_ide" content="DataGrip" link="https://www.jetbrains.com/fr-fr/datagrip/"/>
-        <EnvListItem title="all_ide" content="Jetbrains Toolbox" link="https://www.jetbrains.com/toolbox-app/"/>
-        <EnvListItem title="Police" content="Jetbrains Mono" link="https://www.jetbrains.com/lp/mono/"/>
-        <EnvListItem title="Console" content="HyperJs" link="https://hyper.is/"/>
-        <EnvListItem title="WSL 2" content="Ubuntu 20.04" link="https://www.microsoft.com/en-us/p/ubuntu-2004-lts/9n6svws3rx71?activetab=pivot:overviewtab"/>
+        <EnvListItem title="about.ide.java" content="Intellij Idea Ultimate" link="https://www.jetbrains.com/fr-fr/idea/"/>
+        <EnvListItem title="about.ide.python" content="PyCharm Ultimate" link="https://www.jetbrains.com/fr-fr/pycharm/"/>
+        <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="HyperJs" link="https://hyper.is/"/>
+        <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">
+      <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="Email" content="Courrier by Microsoft" link="https://www.microsoft.com/fr-fr/p/courrier-et-calendrier/9wzdncrfhvqm?activetab=pivot:overviewtab"/>
-        <EnvListItem title="vpn_client" content="Pritunl" link="https://pritunl.com/"/>
-        <EnvListItem title="ftp_client" content="WinSCP" link="https://winscp.net/eng/download.php"/>
-        <EnvListItem title="web_client" content="FireFox Developer Edition" link="https://www.mozilla.org/fr/firefox/developer/"/>
-        <EnvListItem title="Organisation" content="Notion" link="https://www.notion.so/"/>
-        <EnvListItem title="Organisation" content="Trello" link="https://www.trello.com/"/>
-        <EnvListItem title="design_tool" content="Affinity Designer" link="https://affinity.serif.com/fr/designer/"/>
-        <EnvListItem title="Communication" content="Slack" link="https://slack.com/intl/fr-fr/"/>
-        <EnvListItem title="Communication" content="Discord" link="https://www.discord.com/"/>
-        <EnvListItem title="Communication" content="Mattermost" link="https://mattermost.com/"/>
+        <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">
+      <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="vps_hosting" content="PulseHeberg" link="https://pulseheberg.com/"/>
-        <EnvListItem title="ndd_hosting" content="OVH" link="https://ovh.com/"/>
+        <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">
+      <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="setup_desk" content="Ikea en bois"/>
-        <EnvListItem title="setup_phone" content="Samsung Galaxy Note 8" link="https://www.samsung.com/smartphones/galaxy-note8/"/>
-        <EnvListItem title="setup_computer" content="Asus i5, 8Go Ram, GTX 950, 1To HDD"/>
-        <EnvListItem title="setup_screen" content="iiyama ProLite E2283HS" link="https://iiyama.com/fr_fr/produits/prolite-e2283hs-b3/"/>
-        <EnvListItem title="setup_keyboard" content="Microsoft"/>
-        <EnvListItem title="setup_mouse" content="Roccat Kova" link="https://fr.roccat.org/Mice/Kova-AIMO"/>
-        <EnvListItem title="setup_headphone" content="Apple Airpods" link="https://www.apple.com/fr/airpods/"/>
-        <EnvListItem title="setup_microphone" content="Turtle Beach px22" link="https://www.amazon.fr/Turtle-Beach-PX22-casque-gaming/dp/B00BDS415I"/>
+        <EnvListItem title="about.setup.desk" content="Ikea en bois"/>
+        <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>
@@ -247,17 +246,15 @@ export default {
      title: 'About me - Arthur Danjou'
    }
  },
-  data() {
-    return {
-      skills: [],
-      experiences: [],
-      formations: []
-    }
-  },
-  async asyncData({ $axios }) {
-    const {data: skills} = await $axios.get('/skills')
-    const {data: experiences} = await $axios.get('experiences')
-    const {data: formations} = await $axios.get('/formations')
+  async asyncData({ $content }) {
+    const skills = await $content('skills').fetch()
+    const experiences = await $content('experiences')
+      .sortBy('end_date', 'desc')
+      .fetch()
+    const formations = await $content('formations')
+      .sortBy('end_date', 'desc')
+      .fetch()
+
    return {
      skills,
      experiences,
--- a/pages/blog/_slug.vue
+++ b/pages/blog/_slug.vue
@@ -10,16 +10,16 @@
              </svg>
            </div>
            <div class="ml-2">
-              {{ $t('blog_read_back') }}
+              {{ $t('blog.read.back') }}
            </div>
          </nuxt-link>
        </div>
      </div>
      <h1 class="text-3xl md:text-5xl font-bold">
-        {{ $t(title) }}
+        {{ post.title }}
      </h1>
      <h3 class="text-xl text-gray-800 dark:text-dark-900 my-4 md:mt-8">
-        {{ $t(description) }}
+        {{ post.description }}
      </h3>
      <div class="flex flex-row justify-between w-full md:w-2/3 mb-12">
        <div>
@@ -27,24 +27,28 @@
          <p>{{ formatDate }}</p>
        </div>
        <div>
-          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">{{ $t('blog_read_time') }}</p>
-          <p>{{ reading_time }} min</p>
+          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">{{ $t('blog.read.time') }}</p>
+          <p>{{ post.reading_time }} min</p>
        </div>
        <div>
-          <p :class="tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Tags</p>
+          <p :class="post.tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">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="'http://localhost:5555/files/'+cover.file_name" alt="Cover Img" />
+          <img class="w-full h-auto" :src="'http://localhost:5555/files/'+post.cover" alt="Cover Img" />
        </div>
      </div>
      <p class="my-6 md:my-12 text-gray-800 dark:text-dark-900">
-        {{ $t(content) }}
+
      </p>
+      <nuxt-content
+        :document="post"
+        class="prose prose-sm sm:prose lg:prose-lg xl:prose-2xl my-6 md:my-12"
+      />
      <p class="mb-3">
-        {{ $t('blog_read_thanks') }}
+        {{ $t('blog.read.thanks') }}
      </p>
      <div class="flex items-center">
        <div
@@ -59,7 +63,7 @@
        </div>
        <a
          target="_blank"
-          :href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Farthurdanjou.fr%2Fblog%2F' + id + '&text=' + $t('blog_tweet') + ' ' + $t(title) +'&via=ArthurDanj'"
+          :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 end-blog cursor-pointer duration-300 text-3xl p-3 border-solid border border-gray-400 dark:border-dark-800 mr-2 hover:border-cyan-500 dark:hover:border-cyan-500"
        >
          <img class="inline img icon-hover" src="@/assets/img/socials/twitter.svg" alt="Twitter logo" height="40" width="40" />
@@ -89,43 +93,29 @@ export default {
  name: "blog",
  head() {
    return {
-      title: 'Blog - Arthur Danjou'
+      title: 'Blog - Arthur Danjou - ' + this.post.title
    }
  },
  data() {
    return {
-      id: this.$route.params.id,
-      title: '',
-      description: '',
-      content: '',
-      tags: [],
      likes: 0,
-      date: '',
-      cover: '',
-      reading_time: 0,
+      post: null,

      isCopied: false,
      liked: false
    }
  },
-  async asyncData({ params, $axios }) {
-    const {data: post} = await $axios.get('/posts/' + params.id)
-    const {data: liked} = await $axios.get('/post/' + params.id + '/isLiked')
+  async asyncData({ params, $content, app }) {
+    const post = await $content(`articles/${app.i18n.locale}/`, params.slug).fetch()
+    const liked = false
    return {
-      title: post.title.code,
-      description: post.description.code,
-      content: post.content.code,
-      tags: post.tags,
-      likes: post.likes,
-      date: post.created_at,
-      reading_time: post.reading_time,
-      cover: post.cover,
-      liked: liked !== 0
+      post,
+      liked: liked
    }
  },
  methods: {
    copyToClipBoard() {
-      navigator.clipboard.writeText('https://arthurdanjou.fr/blog/' + this.id)
+      navigator.clipboard.writeText('https://arthurdanjou.fr/blog/' + this.post.slug)
      this.isCopied = true
      setTimeout(() => {
        this.isCopied = false
@@ -133,13 +123,13 @@ export default {
    },
    async handleLike() {
      if (this.liked) {
-        const {data} = await this.$axios.get('/post/' + this.id  + '/unlike')
+        const {data} = await this.$axios.get('/post/' + this.post.slug  + '/unlike')
        if (data.code === 200) {
          this.liked = false
          this.likes = data.post.likes
        }
      } else {
-        const {data} = await this.$axios.get('/post/' + this.id  + '/like')
+        const {data} = await this.$axios.get('/post/' + this.post.slug  + '/like')
        if (data.code === 200) {
          this.liked = true
          this.likes = data.post.likes
@@ -149,16 +139,13 @@ export default {
  },
  computed: {
    formatDate() {
-      const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
-        "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
-      ];
-      const date = new Date(this.date)
-      return date.getDate() + " " + monthNames[date.getMonth()] + " " + date.getFullYear()
+      const dateFormat = this.post.date.split('-')
+      return dateFormat[0] + " " + this.$t('month.' + dateFormat[1]) + " " + dateFormat[2]
    },
    formatTags() {
      let tags = ""
-      this.tags.map(tag => {
-        tags += this.$t(tag.label.code) + ", "
+      this.post.tags.map(tag => {
+        tags += this.$t(tag) + ", "
      })
      return tags.substring(0, tags.length - 2)
    },
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -1,7 +1,7 @@
 <template>
  <main class="blog flex flex-col items-center px-5 xl:px-64">
    <PageTitle
-      title="home_link_blog"
+      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">
@@ -12,52 +12,56 @@
      <h1
        v-if="current_tag === ''"
        class="text-lg mb-2"
-      >{{ $t('blog_tags_search') }}</h1>
+      >{{ $t('blog.tags.search') }}</h1>
      <div
        @click="resetPosts"
        v-if="current_tag !== ''"
-        class="w-full home-arrow flex cursor-pointer font-bold"
+        class="w-full"
      >
-        <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 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>
-        {{ $t('blog_tags_search_back') }}
      </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.label.code)"
+            @click="fetchPostsByTag(tag.slug)"
          >
-            {{ $t(tag.label.code) }}
+            {{ $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 md:w-1/2" v-else>
+    <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.id">
+          <nuxt-link :to="'/blog/' + post.slug">
            <Post
-              :title="post.title.code"
+              :title="post.title"
              :reading_time="post.reading_time"
-              :description="post.description.code"
+              :description="post.description"
              :tags="displayTags(post.tags)"
-              :cover="post.cover.file_name"
-              :date="post.created_at"
-              :likes="post.likes"
-              :lightBg="post.light_back_ground"
+              :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="postsCount > 5">
+      <div class="relative flex flex-row justify-between w-full mb-4" v-if="next || prev">
        <div
-          class="duration-500 flex w-1/2 px-5 py-4 justify-center items-center"
-          :class="page > 1 ? 'opacity-100' : 'opacity-0'"
+          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">
@@ -65,15 +69,15 @@
                <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 class="inline ml-4 font-bold">{{ $t('blog.pagination.prev') }}</div>
          </div>
        </div>
        <div
-          class="duration-500 flex w-1/2 px-5 py-4 justify-center items-center"
-          :class="hasNextPage ? 'opacity-100' : 'opacity-0'"
+          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="ml-4 font-bold">{{ $t('blog_pagination_next') }}</div>
+            <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" />
@@ -99,50 +103,140 @@ export default {
  },
  data () {
    return {
-      posts: [],
      postsCount: 0,
-      page: 1,
+      page: 0,
      current_tag: '',
-      tags: [],
-      hasNextPage: false,
+      posts: []
    }
  },
  methods: {
    displayTags(tags) {
      const tags_label = []
      tags.map(tag => {
-        tags_label.push(tag.label.code)
+        tags_label.push(tag)
      })
      return tags_label
    },
    async fetchPostsByTag(tag) {
      this.current_tag = tag
-      const {data} = await this.$axios.get('/post/' + tag + '?page=1')
-      this.posts = data.data
-      this.hasNextPage = data.meta.next_page_url !== null
+      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 = ''
-      const {data} = await this.$axios.get('/posts?page=1')
-      this.posts = data.data
-      this.hasNextPage = data.meta.next_page_url !== null
+      this.posts = await this.$content(`articles/${this.$i18n.locale}`)
+        .sortBy('date', 'asc')
+        .limit(5)
+        .fetch()
    },
-    nextPage() {
+    async nextPage() {
      this.page++
+      await this.fetchPosts()
+      await this.fetchPrevAndNext()
+
+      window.scrollTo({
+        top: 100,
+        behavior: "smooth"
+      })
    },
-    prevPage() {
+    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 ({ $axios }) {
-    const {data: count} = await $axios.get('/posts/size')
-    const {data} = await $axios.get('/posts?page=1')
-    const {data: tags} = await $axios.get('/tags')
+  async asyncData ({ $content, app }) {
+    const tags = await $content('tags').fetch()
+    const postsTemp = await $content(`articles/${app.i18n.locale}`)
+      .sortBy('date', 'asc')
+      .limit(5)
+      .fetch()
+
+    const posts = []
+    postsTemp.map(post => {
+      posts.push(post)
+    })
+
+    const [_, next] = await $content(`articles/${app.i18n.locale}`)
+      .surround(posts[posts.length - 1].slug, {
+        before: 1,
+        after: 1
+      })
+      .fetch()
+    const [prev, __] = await $content(`articles/${app.i18n.locale}`)
+      .surround(posts[0].slug, {
+        before: 1,
+        after: 1
+      })
+      .fetch()
+
    return {
-      posts: data.data,
-      postsCount: count,
+      posts,
+      postsCount: posts.length,
      tags,
-      hasNextPage: data.meta.next_page_url !== null
+      prev,
+      next
    }
  }
 }
--- a/pages/contact.vue
+++ b/pages/contact.vue
@@ -1,7 +1,7 @@
 <template>
  <main class="contact flex flex-col items-center px-5 xl:px-64">
    <PageTitle
-      title="home_link_contact"
+      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">
@@ -10,10 +10,10 @@
      </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-900">{{ $t('contact_newsletter') }}</h1>
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">{{ $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>
+        {{ $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">
@@ -21,7 +21,7 @@
            <input v-model="form.name"
                   class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg"
                   type="text"
-                   :placeholder="$t('contact_form_name')"
+                   :placeholder="$t('contact.form.name')"
                   required
                   id="name"/>
          </div>
@@ -29,14 +29,14 @@
            <input v-model="form.email"
                   class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg"
                   type="email"
-                   :placeholder="$t('contact_form_mail')"
+                   :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')}}
+            {{ $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>
@@ -45,21 +45,21 @@
      </form>
      <div v-if="error" class="flex">
        <div class="rounded-xl px-3 py-2 bg-red-300 font-bold ">
-          {{ $t('contact_form_error') }}
+          {{ $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 ">
-          {{ $t('contact_form_success', { email: form.email }) }}
+          {{ $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-900">
-        {{ $t('contact_how_to') }}
+        {{ $t('contact.how_to.title') }}
      </h1>
      <h3 class="text-md md:text-lg">
-        {{ $t('contact_how_to_description') }}
+        {{ $t('contact.how_to.description') }}
      </h3>
      <div class="mt-4 email text-lg duration-300 text-purple-500 hover:text-purple-700 cursor-pointer flex">
        <a class="mr-2" href="mailto:contact@arthurdanjou.fr?subject=Please enter here your project name">
@@ -74,13 +74,20 @@
    </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-900">
-        {{ $t('contact_available') }}
+        {{ $t('contact.available.title') }}
      </h1>
      <h3 class="text-lg md:text-lg">
-        {{ $t('contact_available_description') }}
+        {{ $t('contact.available.description') }}
      </h3>
      <div class="my-4 text-purple-500">
-        {{ $t('contact_available_start') }} <span class="py-1 px-2 font-bold rounded-xl" :class="'bg-' +hiringColor+ '-200 text-' +hiringColor+ '-500'">{{ $t(hiringStatus.code) }}</span> {{ $t('contact_available_end') }}
+        {{ $t('contact.available.start') }}
+        <span
+          class="py-1 px-2 font-bold rounded-xl"
+          :class="'bg-' +color+ '-200 text-' +color+ '-500'"
+        >
+          {{ $t('hiring.status.' + status) }}
+        </span>
+        {{ $t('contact.available.end') }}
      </div>
    </div>
  </main>
@@ -93,8 +100,8 @@ export default {
  components: {PageTitle},
  data () {
    return {
-      hiringStatus: '',
-      hiringColor: '',
+      status: '',
+      color: '',
      form: {
        name: '',
        email: ''
@@ -103,11 +110,11 @@ export default {
      error: false
    }
  },
-  async asyncData({ $axios }) {
-    const {data: me} = await $axios.get('/me')
+  async asyncData({ $content }) {
+    const infos = await $content('infos').fetch()
    return {
-      hiringStatus: me.hiringStatus,
-      hiringColor: me.hiring_color
+      status: infos.hiring.status,
+      color: infos.hiring.color
    }
  },
  methods: {
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,22 +7,22 @@
        </div>
        <div class="mb-4 md:mb-10 lg:w-1/2 self-center">
          <h1 class="text-4xl md:text-5xl text-left font-bold md:w-3/4">
-            {{ $t('home_banner_hello') }} <br />
+            {{ $t('home.banner.hello') }} <br />
            <span class="text-red-700 font-black">Arthur Danjou</span> 👋
          </h1>
          <p class="text-2xl md:text-3xl my-5 font-semibold">
-            {{ $t('home_banner_role') }}
+            {{ $t('home.banner.role') }}
          </p>
          <p class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700 dark:text-dark-900">
-            {{ $t('home_banner_description', { age: age }) }}
+            {{ $t('home.banner.description', { age: age }) }}
          </p>
        </div>
      </div>
      <div class="flex flex-col items-center w-full">
        <div class="flex flex-col md:flex-row justify-around w-full md:mb-8">
          <HomeLink
-            title="home_link_about"
-            description="home_link_about_description"
+            title="part.about"
+            description="part.about_description"
            color="orange"
            link="/about"
            >
@@ -31,8 +31,8 @@
            </svg>
          </HomeLink>
          <HomeLink
-            title="home_link_blog"
-            description="home_link_blog_description"
+            title="part.blog"
+            description="part.blog_description"
            color="green"
            link="/blog"
          >
@@ -43,8 +43,8 @@
        </div>
        <div class="flex flex-col md:flex-row justify-around w-full">
          <HomeLink
-            title="home_link_work"
-            description="home_link_work_description"
+            title="part.work"
+            description="part.work_description"
            color="blue"
            link="/work"
          >
@@ -53,8 +53,8 @@
            </svg>
          </HomeLink>
          <HomeLink
-            title="home_link_contact"
-            description="home_link_contact_description"
+            title="part.contact"
+            description="part.contact_description"
            color="purple"
            link="/contact"
          >
@@ -80,15 +80,10 @@ export default Vue.extend({
      title: 'Arthur Danjou - Web & Software Developer'
    }
  },
-  data () {
+  async asyncData({ $content }) {
+    const infos = await $content('infos').fetch()
    return {
-      age: 0
-    }
-  },
-  async asyncData({$axios}) {
-    const {data: me} = await $axios.get('/me')
-    return {
-      age: me.age
+      age: infos.age
    }
  }
 })
--- a/pages/work/_slug.vue
+++ b/pages/work/_slug.vue
@@ -11,35 +11,35 @@
                </svg>
              </div>
              <div class="ml-2">
-                {{ $t('work_go_back') }}
+                {{ $t('work.go_back') }}
              </div>
            </nuxt-link>
          </div>
        </div>
-        <img class="w-4/5 rounded-xl" :src="'http://localhost:5555/files/' + cover" alt="Project Img" />
+        <!--<img class="w-4/5 rounded-xl" :src="require(`@/assets/img/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="'bg-' + color + '-400 hover:bg-' + color + '-600'"
-          :href="url"
-        >{{formatLink}}</a>
+          :class="'bg-' + work.color + '-400 hover:bg-' + work.color + '-600'"
+          :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">
-          {{ $t(title) }}
+          {{ $t(work.title) }}
        </h1>
        <p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-900">
-          {{ $t(description) }}
+          {{ $t(work.description) }}
        </p>
        <div>
          <h3 class="text-md lg:text-lg font-bold">
-            {{ $t('work_tech_used') }}
+            {{ $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.code"
+                :skill="skill.title"
                :color="skill.color"
-                :cover="skill.cover.file_name"
+                :cover="skill.cover"
              />
            </div>
          </div>
@@ -52,7 +52,6 @@
 <script>
 import WorkSkill from "~/components/WorkSkill";
 export default {
-  name: "_id",
  components: {WorkSkill},
  head() {
    return {
@@ -61,29 +60,20 @@ export default {
  },
  data() {
    return {
-      id: this.$route.params.id,
-      title: '',
-      description: '',
-      skills: [],
-      color: '',
-      cover: '',
-      url: ''
+      work: null
    }
  },
-  async asyncData({ params, $axios }) {
-    const {data: project} = await $axios.get('/projects/' + params.id)
+  async asyncData({ params, $content }) {
+    let work
+    try {
+      work = await $content('works', params.slug).fetch()
+    } catch (e) {
+      return error({ message: 'Work not found' })
+    }
+    const skills = await $content('skills').where({ slug: { $in: work.skills } }).fetch()
    return {
-      title: project.title.code,
-      description: project.description.code,
-      skills: project.skills,
-      color: project.color,
-      cover: project.cover.file_name,
-      url: project.url
-    }
-  },
-  computed: {
-    formatLink() {
-      return this.url.replace('https://', '').replace('http://', '')
+      work,
+      skills
    }
  }
 }
--- a/pages/work/index.vue
+++ b/pages/work/index.vue
@@ -1,24 +1,24 @@
 <template>
  <main class="work flex flex-col items-center px-5 xl:px-64">
    <PageTitle
-      title="home_link_work"
+      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>
+    <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 md:space-x-4">
+      <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.id">
+          <nuxt-link :to="'/work/' + work.slug">
            <Work
-              :title="work.title.code"
+              :title="work.title"
              :url="work.url"
              :color="work.color"
-              :cover="work.cover.file_name"
+              :cover="work.cover"
            />
          </nuxt-link>
        </div>
@@ -38,13 +38,8 @@ export default {
      title: 'Work - Arthur Danjou'
    }
  },
-  data () {
-    return {
-      works: []
-    }
-  },
-  async asyncData({ $axios }) {
-    const {data: works} = await $axios.get('/projects')
+  async asyncData({ $content }) {
+    const works = await $content('works').fetch()
    return {
      works
    }
--- a/store/index.js
+++ b/store/index.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -51,7 +51,7 @@ module.exports = {
        200: '#121212',
        700: 'rgb(112,112,112)',
        800: '#212121',
-        900: 'rgba(255,255,255,0.6)'
+        900: 'rgba(150, 150, 150)'
      },
    },
    spacing: {
@@ -865,5 +865,7 @@ module.exports = {
    wordBreak: ['responsive'],
    zIndex: ['responsive', 'focus-within', 'focus'],
  },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
 }
--- a/yarn.lock
+++ b/yarn.lock