From 25f5969d69b1efb360ebdd722fb335851d2bed49 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Fri, 4 Dec 2020 19:29:35 +0100
Subject: [PATCH] =?UTF-8?q?Translate=20every=20texts=20=F0=9F=8C=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                       |   8 +--
 assets/css/tailwind.css    |   2 +-
 components/EnvListItem.vue |   2 +-
 components/Experience.vue  |   9 +--
 components/Footer.vue      |  15 +++--
 components/Formation.vue   |  13 ++--
 components/Header.vue      |  10 ++--
 components/Post.vue        |  14 ++---
 pages/about.vue            | 119 ++++++++++++++++---------------------
 pages/blog/_id.vue         |  93 +++++++++++++++++++++++++----
 pages/blog/index.vue       |  61 +++++++++----------
 pages/contact.vue          |  40 ++++++++-----
 pages/index.vue            |   2 +-
 pages/work/index.vue       |  10 +---
 14 files changed, 219 insertions(+), 179 deletions(-)

diff --git a/.env b/.env
index 6f0f01e..a749c47 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
-NGROK_AUTHTOKEN=
-NGROK_AUTH_USER=
-NGROK_AUTH_PASS=
-NGROK_PORT=
+NGROK_AUTHTOKEN=1j9ChbeTgXGJCwljwaWe8YHAE2E_53SDci36mXTRGuiyeW2vH
+NGROK_AUTH_USER=admin
+NGROK_AUTH_PASS=admin
+NGROK_PORT=3333
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index b7684af..38191fb 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
-@import "style.scss";
+@import "./style.scss";
 
 @tailwind base;
 @tailwind components;
diff --git a/components/EnvListItem.vue b/components/EnvListItem.vue
index ab49cb8..d0dce30 100644
--- a/components/EnvListItem.vue
+++ b/components/EnvListItem.vue
@@ -1,6 +1,6 @@
 <template>
   <li>
-    {{ title }}:
+    {{ $t(title) }}:
     <a class="duration-300 text-orange-400 font-medium border-b-2 border-opacity-0 hover:border-opacity-100 border-orange-400 border-solid" v-if="link" :href="link" target="_blank">{{ content }}</a>
     <span v-else>{{ content }}</span>
   </li>
diff --git a/components/Experience.vue b/components/Experience.vue
index 4045181..2541b53 100644
--- a/components/Experience.vue
+++ b/components/Experience.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-row mb-5">
     <div class="self-center flex h-4 w-4 mr-4 relative">
-      <span v-if="end === 'Today'" class="animate-ping relative inline h-full w-full rounded-full bg-orange-400 opacity-75"></span>
-      <span v-else class="inline relative h-full w-full rounded-full bg-gray-400 opacity-75"></span>
+      <span v-if="end === 'Today'" class="animate-ping relative inline h-4 w-4 rounded-full bg-orange-400 opacity-75"></span>
+      <span v-else class="inline relative h-4 w-4 rounded-full bg-gray-400 opacity-75"></span>
       <span v-if="end === 'Today'" class="inline absolute rounded-full h-4 w-4 bg-orange-500"></span>
       <span v-else class="inline absolute rounded-full h-4 w-4 bg-gray-500"></span>
     </div>
@@ -45,11 +45,8 @@ export default {
   },
   methods: {
     formatDate(date) {
-      const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
-        "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
-      ];
       const dateFormat = new Date(date)
-      return date === 'Today' ? 'Today' : monthNames[dateFormat.getMonth()] + " " + dateFormat.getFullYear()
+      return date === 'Today' ? 'Today' : this.$t('month_' + dateFormat.getMonth()) + " " + dateFormat.getFullYear()
     }
   }
 }
diff --git a/components/Footer.vue b/components/Footer.vue
index 2171488..b9e695a 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -3,10 +3,10 @@
     <div>
       <div class="flex flex-col items-center py-4 text-center ">
         <div class="mb-3">
-          <p class="inline">Retrouvez moi sur :
+          <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="18" width="18" />
+              <img class="inline img" src="@/assets/img/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
               <span class="link">Twitch</span>
             </a>,
             <a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank">
@@ -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> et par
+            </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,12 +25,11 @@
               </a>
           </p>
           <span class="inline dark:text-dark-900 text-gray-600 text-xs">
-            (Clique c'est gratuit 🔗)
+            {{ $t('footer_links_click') }}
           </span>
         </div>
         <p>
-          Développé et conçu avec ❤ en utilisant
-
+          {{ $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>
@@ -40,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>
-          par <span>Arthur DANJOU</span>
+          {{ $t('footer_credits_separator') }} <span>Arthur DANJOU</span>
         </p>
-        <p>© Copyright {{date}} - Tous droits réservés</p>
+        <p>{{ $t('footer_copyrights', { date: date }) }}</p>
       </div>
     </div>
   </footer>
diff --git a/components/Formation.vue b/components/Formation.vue
index 2aef62d..febf312 100644
--- a/components/Formation.vue
+++ b/components/Formation.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-row relative mb-5">
+  <div class="flex flex-row mb-5">
     <div class="self-center flex h-4 w-4 mr-4 relative">
-      <span v-if="end === 'Today'" class="animate-ping relative inline h-full w-full rounded-full bg-orange-400 opacity-75"></span>
-      <span v-else class="inline relative h-full w-full rounded-full bg-gray-400 opacity-75"></span>
+      <span v-if="end === 'Today'" class="animate-ping relative inline h-4 w-4 rounded-full bg-orange-400 opacity-75"></span>
+      <span v-else class="inline relative h-4 w-4 rounded-full bg-gray-400 opacity-75"></span>
       <span v-if="end === 'Today'" class="inline absolute rounded-full h-4 w-4 bg-orange-500"></span>
       <span v-else class="inline absolute rounded-full h-4 w-4 bg-gray-500"></span>
     </div>
-    <div class="leading-7 relative">
+    <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) }}</h1>
       <h2 class="text-xl">{{ $t(description) }}</h2>
@@ -41,11 +41,8 @@ export default {
   },
   methods: {
     formatDate(date) {
-      const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
-        "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
-      ];
       const dateFormat = new Date(date)
-      return monthNames[dateFormat.getMonth()] + " " + dateFormat.getFullYear()
+      return this.$t('month_' + dateFormat.getMonth()) + " " + dateFormat.getFullYear()
     }
   }
 }
diff --git a/components/Header.vue b/components/Header.vue
index ca883bf..6e3fdd1 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -57,7 +57,7 @@
           </ul>
         </div>
         <ul class="dark:text-white dark:bg-dark-200 z-index-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 class="red" to="/">
+          <nuxt-link class="w-1/5 red" to="/">
             <li class="font-bold flex flex-col items-center justify-center">
               <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
@@ -65,7 +65,7 @@
               {{ $t('part_home') }}
             </li>
           </nuxt-link>
-          <nuxt-link to="/about" class="orange">
+          <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="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
@@ -73,7 +73,7 @@
               {{ $t('part_about') }}
             </li>
           </nuxt-link>
-          <nuxt-link to="/blog" class="green">
+          <nuxt-link to="/blog" class="w-1/5 green">
             <li class="font-bold flex flex-col items-center justify-center">
               <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
@@ -81,7 +81,7 @@
               {{ $t('part_blog') }}
             </li>
           </nuxt-link>
-          <nuxt-link to="/work" class="blue">
+          <nuxt-link to="/work" class="w-1/5 blue">
             <li class="font-bold flex flex-col items-center justify-center">
               <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
@@ -89,7 +89,7 @@
               {{ $t('part_work') }}
             </li>
           </nuxt-link>
-          <nuxt-link to="/contact" class="purple">
+          <nuxt-link to="/contact" class="w-1/5 purple">
             <li class="font-bold flex flex-col items-center justify-center">
               <svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
diff --git a/components/Post.vue b/components/Post.vue
index 3b7b5e7..b8a5d36 100644
--- a/components/Post.vue
+++ b/components/Post.vue
@@ -14,16 +14,16 @@
       >{{ $t(description) }}</p>
     </div>
     <div
-      class="flex justify-between mt-8"
+      class="flex justify-between mt-8 items-end"
       :class="lightBg ? 'text-gray-900':'text-dark-900'"
     >
       <div>
         <div>{{formatDate}}</div>
-        <div>{{reading_time}} {{ $t('post_reading_time') }}</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"
+        <div v-for="tag in tags"
              class="my-1 md:my-0 ml-2 py-1 px-2 rounded font-semibold"
              :class="lightBg ? 'bg-black text-white':'bg-white text-black'"
         >
@@ -72,15 +72,9 @@ export default {
     }
   },
   computed: {
-    tagsSplit() {
-      return this.tags.keys
-    },
     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()
+      return date.getDate() + " " + this.$t('month_' + date.getMonth()) + " " + date.getFullYear()
     },
   }
 }
diff --git a/pages/about.vue b/pages/about.vue
index 018d0ce..7804cc6 100644
--- 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="A propos"
+      title="home_link_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,26 +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>
-          Bonjour, je suis <span class="text-orange-400 font-bold">Arthur DANJOU</span> 👋.
-        </p> <br/>
-        <p>
-          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.
-        </p> <br/>
-        <p>
-          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.
-        </p> <br/>
-        <p>
-          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.
-        </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">
-        Compétences Techniques
+        {{ $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>
@@ -49,7 +38,7 @@
     </div>
     <div class="w-full mb-10">
       <h3 class="font-bold text-2xl md:text-4xl">
-        Intérêts
+        {{ $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" />
@@ -58,43 +47,43 @@
       <div>
         <ul class="text-xl">
           <li class="my-2">
-            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">
-            Développement
+            {{ $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">
-            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">
-            Startups & Entreprises innovantes
+            {{ $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="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" />
+              <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">
-            Administration système
+            {{ $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">
-            Voyage
+            {{ $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">
-            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>
@@ -104,27 +93,27 @@
     </div>
     <div class="w-full mb-10">
       <h3 class="font-bold text-2xl md:text-4xl">
-        Langues
+        {{ $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.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          <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">Français 🇫🇷</td>
-            <td class="py-2 px-4">Natal</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">Anglais 🇬🇧</td>
-            <td class="py-2 px-4">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">
-        Formation
+        {{ $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>
@@ -140,7 +129,7 @@
     </div>
     <div class="w-full mb-10">
       <h3 class="font-bold text-2xl md:text-4xl mb-3">
-        Expériences
+        {{ $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>
@@ -157,7 +146,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élécharger mon 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>
@@ -165,81 +154,77 @@
     </nuxt-link>
     <div class="mt-10 border-t-2 border-black dark:border-white border-solid w-full" />
     <PageTitle
-      title="Environnement"
+      title="about_part_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="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" />
+        <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">
-      Mon environnement de développement permet de gagner en productivité.
-      En effet, je m'organise de la sorte à toujours optimiser mon temps de réflexion et de développement.
-      Voici donc une liste de tous mes logiciels que j'utilise au quotidien et de mon setup.
-    </p>
+    <p class="text-lg leading-6 text-justify pb-8">{{ $t('about_env_description') }}</p>
     <EnvGroup>
-      <EnvTitle title="Editeurs de texte">
+      <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="Editeur Java" content="Intellij Idea Ultimate" link="https://www.jetbrains.com/fr-fr/idea/"/>
-        <EnvListItem title="Editeur Python" content="PyCharm Ultimate" link="https://www.jetbrains.com/fr-fr/pycharm/"/>
-        <EnvListItem title="Editeur Web" content="WebStorm" link="https://www.jetbrains.com/fr-fr/webstorm/"/>
-        <EnvListItem title="Editeur Go" content="GoLand" link="https://www.jetbrains.com/fr-fr/go/"/>
-        <EnvListItem title="Editeur de bases de données" content="DataGrip" link="https://www.jetbrains.com/fr-fr/datagrip/"/>
-        <EnvListItem title="All-In-One" content="Jetbrains Toolbox" link="https://www.jetbrains.com/toolbox-app/"/>
+        <EnvListItem title="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"/>
       </EnvList>
     </EnvGroup>
     <EnvGroup>
-      <EnvTitle title="Apps & Logiciels">
+      <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="Client VPN" content="Pritunl" link="https://pritunl.com/"/>
-        <EnvListItem title="Client FTP" content="WinSCP" link="https://winscp.net/eng/download.php"/>
-        <EnvListItem title="Navigateur Web" content="FireFox Developer Edition" link="https://www.mozilla.org/fr/firefox/developer/"/>
+        <EnvListItem title="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="Création / graphisme" content="Affinity Designer" link="https://affinity.serif.com/fr/designer/"/>
+        <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/"/>
       </EnvList>
     </EnvGroup>
     <EnvGroup>
-      <EnvTitle title="Hébergement">
+      <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="Hébergeur VPS" content="PulseHeberg" link="https://pulseheberg.com/"/>
-        <EnvListItem title="Nom de domaine" content="OVH" link="https://ovh.com/"/>
+        <EnvListItem title="vps_hosting" content="PulseHeberg" link="https://pulseheberg.com/"/>
+        <EnvListItem title="ndd_hosting" content="OVH" link="https://ovh.com/"/>
       </EnvList>
     </EnvGroup>
     <EnvGroup>
-      <EnvTitle title="Setup bureautique">
+      <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="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" />
+          <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="Bureau" content="Ikea en bois"/>
-        <EnvListItem title="Téléphone" content="Samsung Galaxy Note 8" link="https://www.samsung.com/smartphones/galaxy-note8/"/>
-        <EnvListItem title="Ordinateur fixe" content="Asus i5, 8Go Ram, GTX 950, 1To HDD"/>
-        <EnvListItem title="Ecran" content="iiyama ProLite E2283HS" link="https://iiyama.com/fr_fr/produits/prolite-e2283hs-b3/"/>
-        <EnvListItem title="Clavier" content="Microsoft"/>
-        <EnvListItem title="Souris" content="Roccat Kova" link="https://fr.roccat.org/Mice/Kova-AIMO"/>
-        <EnvListItem title="Ecouteurs" content="Apple Airpods" link="https://www.apple.com/fr/airpods/"/>
-        <EnvListItem title="Casque/Micro" content="Turtle Beach px22" link="https://www.amazon.fr/Turtle-Beach-PX22-casque-gaming/dp/B00BDS415I"/>
+        <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"/>
       </EnvList>
     </EnvGroup>
   </main>
diff --git a/pages/blog/_id.vue b/pages/blog/_id.vue
index e3128a5..086eede 100644
--- a/pages/blog/_id.vue
+++ b/pages/blog/_id.vue
@@ -10,16 +10,16 @@
               </svg>
             </div>
             <div class="ml-2">
-              Retour en arrière
+              {{ $t('blog_read_back') }}
             </div>
           </nuxt-link>
         </div>
       </div>
       <h1 class="text-3xl md:text-5xl font-bold">
-        {{ title }}
+        {{ $t(title) }}
       </h1>
       <h3 class="text-xl text-gray-800 dark:text-dark-900 my-4 md:mt-8">
-        {{ description }}
+        {{ $t(description) }}
       </h3>
       <div class="flex flex-row justify-between w-full md:w-2/3 mb-12">
         <div>
@@ -27,12 +27,12 @@
           <p>{{ formatDate }}</p>
         </div>
         <div>
-          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">Time</p>
+          <p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-900">{{ $t('blog_read_time') }}</p>
           <p>{{ 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>{{formatTags}}</p>
+          <p>{{ formatTags }}</p>
         </div>
       </div>
       <div class="w-full">
@@ -41,13 +41,45 @@
         </div>
       </div>
       <p class="my-6 md:my-12 text-gray-800 dark:text-dark-900">
-        {{ content }}
+        {{ $t(content) }}
       </p>
-      <p class="text-center">
-        Merci d'avoir lu jusqu'au bout ! 😊<br class="md:hidden"/>
-        Hésite surtout pas à partager l'article sur Twitter
-        <!-- Todo : replace par des buttons : - Likes, - Twitter (proposition de tweet), - partage (lien) -->
+      <p class="mb-3">
+        {{ $t('blog_read_thanks') }}
       </p>
+      <div class="flex items-center">
+        <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-800' : 'border-gray-400 dark:border-dark-800 hover:border-red-500 dark:hover:border-red-500'"
+        >
+          <div class="mr-2">
+            {{ 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' + id + '&text=' + $t('blog_tweet') + ' ' + $t(title) +'&via=ArthurDanj'"
+          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" />
+        </a>
+
+        <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-800 hover:border-dark-200 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>
   </main>
 </template>
@@ -71,10 +103,14 @@ export default {
       date: '',
       cover: '',
       reading_time: 0,
+
+      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')
     return {
       title: post.title.code,
       description: post.description.code,
@@ -84,6 +120,31 @@ export default {
       date: post.created_at,
       reading_time: post.reading_time,
       cover: post.cover,
+      liked: liked !== 0
+    }
+  },
+  methods: {
+    copyToClipBoard() {
+      navigator.clipboard.writeText('https://arthurdanjou.fr/blog/' + this.id)
+      this.isCopied = true
+      setTimeout(() => {
+        this.isCopied = false
+      }, 7000)
+    },
+    async handleLike() {
+      if (this.liked) {
+        const {data} = await this.$axios.get('/post/' + this.id  + '/unlike')
+        if (data.code === 200) {
+          this.liked = false
+          this.likes = data.post.likes
+        }
+      } else {
+        const {data} = await this.$axios.get('/post/' + this.id  + '/like')
+        if (data.code === 200) {
+          this.liked = true
+          this.likes = data.post.likes
+        }
+      }
     }
   },
   computed: {
@@ -97,11 +158,11 @@ export default {
     formatTags() {
       let tags = ""
       this.tags.map(tag => {
-        tags += tag.label.code + ", "
+        tags += this.$t(tag.label.code) + ", "
       })
       return tags.substring(0, tags.length - 2)
     },
-  }
+  },
 }
 </script>
 
@@ -114,5 +175,13 @@ export default {
   .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/pages/blog/index.vue b/pages/blog/index.vue
index bc49386..eb97d2b 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -1,41 +1,40 @@
 <template>
   <main class="blog flex flex-col items-center px-5 xl:px-64">
     <PageTitle
-      title="Blog"
+      title="home_link_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>
-    <h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">
-      Malheureusement il n'y a pas encore d'articles disponibles. Reviens plus tard 😉
-    </h1>
+    <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>
-      <!-- TODO improve design research by tag -->
-      <div class="flex flex-col mt-8">
-        <h1>
-          Classer les articles par tag :
-        </h1>
-        <div class="flex flex-row">
-          <div
-            @click="resetPosts"
-            v-if="current_tag !== ''"
-            class="home-arrow flex cursor-pointer"
-          >
-            <div class="arrow duration-300">
-              <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>
-            Tous les articles
+      <div class="flex flex-col mt-8 w-full">
+        <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 home-arrow flex cursor-pointer font-bold"
+        >
+          <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>
-          <div v-else v-for="tag in tags"
-               @click="fetchPostsByTag(tag.label.code)"
-               :class="tag.label.code === current_tag ? 'border-solid border-black border-2' : ''"
-               class="hover:bg-gray-500 duration-300 cursor-pointer px-3 py-3 rounded-xl bg-gray-300 font-black mr-3"
-          >
-            {{tag.label.code}}
+          {{ $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)"
+            >
+              {{ $t(tag.label.code) }}
+            </div>
           </div>
         </div>
       </div>
@@ -66,9 +65,7 @@
                 <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">
-              Précédent
-            </div>
+            <div class="inline ml-4 font-bold">{{ $t('blog_pagination_prev') }}</div>
           </div>
         </div>
         <div
@@ -76,9 +73,7 @@
           :class="hasNextPage ? 'opacity-100' : 'opacity-0'"
         >
           <div class="flex items-center duration-300 suiv-arrow" @click="nextPage">
-            <div class="ml-4 font-bold">
-              Suivant
-            </div>
+            <div class="ml-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" />
diff --git a/pages/contact.vue b/pages/contact.vue
index ee7ee7b..1c19f73 100644
--- 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="Contact"
+      title="home_link_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,25 +10,33 @@
       </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">
-        Software & Tech Newsletter
-      </h1>
+      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">{{ $t('contact_newsletter') }}</h1>
       <h3 class="text-md md:text-lg">
-        Abonnez vous pour ne pas louper mes prochaines offres, mes prochains articles et mes nouveaux projets. <br>
-        <span class="font-bold self-start">Pas de spam. Désabonnement quand vous voulez</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">
           <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-100 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-200 border border-solid border-purple-700 rounded-lg" type="text" placeholder="Prénom" required id="name"/>
+            <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')"
+                   required
+                   id="name"/>
           </div>
           <div class="mb-3 lg:mr-4 w-full md:w-auto">
-            <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="Adresse Mail" required id="email"/>
+            <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')"
+                   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">
-            S'abonner
+            {{ $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>
@@ -37,21 +45,21 @@
       </form>
       <div v-if="error" class="flex">
         <div class="rounded-xl px-3 py-2 bg-red-300 font-bold ">
-          Erreur dans le formulaire !
+          {{ $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 ">
-          Inscription confirmée pour {{ 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">
-        Comment me contacter ?
+        {{ $t('contact_how_to') }}
       </h1>
       <h3 class="text-md md:text-lg">
-        N'hésitez pas à me contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous discuter ✌️
+        {{ $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">
@@ -66,13 +74,13 @@
     </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">
-        Suis-je disponible ?
+        {{ $t('contact_available') }}
       </h1>
       <h3 class="text-lg md:text-lg">
-        Ce status sera mis à jour en temps réel pour vous indiquer si je suis disponible pour du travail.
+        {{ $t('contact_available_description') }}
       </h3>
       <div class="my-4 text-purple-500">
-        Je suis actuellement <span class="py-1 px-2 font-bold rounded-xl" :class="'bg-' +hiringColor+ '-300 text-' +hiringColor+ '-500'">{{$t(hiringStatus.code)}}</span> pour du travail.
+        {{ $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') }}
       </div>
     </div>
   </main>
diff --git a/pages/index.vue b/pages/index.vue
index feaafcb..1ecc1c0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,7 +14,7 @@
             {{ $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>
diff --git a/pages/work/index.vue b/pages/work/index.vue
index dcfe15b..0f49c06 100644
--- a/pages/work/index.vue
+++ b/pages/work/index.vue
@@ -1,20 +1,16 @@
 <template>
   <main class="work flex flex-col items-center px-5 xl:px-64">
     <PageTitle
-      title="Mon travail"
+      title="home_link_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">
-      Malheureusement il n'y a pas encore de projets disponibles. Reviens plus tard 😉
-    </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">
-        Voici les différents projets auxquels j'ai pu participer dans mon passé !
-      </h1>
+      <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-x-4">
         <div v-for="work in works">
           <nuxt-link :to="'/work/' + work.id">