From 1b63219086dbd3cb74ebaf46f1c12b6dd14cfcaf Mon Sep 17 00:00:00 2001
From: Arthur Danjou <arthurdanjou@outlook.fr>
Date: Thu, 8 Apr 2021 22:47:06 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=BB=20|=20Adapt=20About=20page=20+=20W?=
 =?UTF-8?q?orking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AdHome.vue            |  16 +--
 src/components/EnvGroup.vue          |   4 +-
 src/components/ExperiencesAbout.vue  |  44 +++++++
 src/components/FormationsAbout.vue   |  44 +++++++
 src/components/InterestsAbout.vue    |  67 ++++++++++
 src/components/LanguagesAbout.vue    |  32 +++++
 src/components/Post.vue              |   4 +-
 src/components/PostsHome.vue         |   2 +-
 src/components/PresentationAbout.vue |  25 ++++
 src/components/Project.vue           |   4 +-
 src/components/ProjectsHome.vue      |   4 +-
 src/components/SkillsAbout.vue       |  43 +++++++
 src/pages/about.vue                  | 180 ++-------------------------
 13 files changed, 276 insertions(+), 193 deletions(-)
 create mode 100644 src/components/ExperiencesAbout.vue
 create mode 100644 src/components/FormationsAbout.vue
 create mode 100644 src/components/InterestsAbout.vue
 create mode 100644 src/components/LanguagesAbout.vue
 create mode 100644 src/components/PresentationAbout.vue
 create mode 100644 src/components/SkillsAbout.vue

diff --git a/src/components/AdHome.vue b/src/components/AdHome.vue
index 26cd320..8ef8e5e 100644
--- a/src/components/AdHome.vue
+++ b/src/components/AdHome.vue
@@ -1,11 +1,8 @@
 <template>
-  <div class="w-full my-12">
-    <div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-center">
-      <nuxt-link to="/uses" class="h-84 md:w-1/2">
+  <section class="w-full my-12">
+    <div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-around">
+      <nuxt-link to="/uses" class="h-48 md:w-1/3">
         <Ad color="rose" class="h-full w-full flex flex-col justify-between">
-          <div>
-            ILLUSTRATION
-          </div>
           <div>
             <h1 class="font-bold text-black text-3xl">
               Usages
@@ -16,11 +13,8 @@
           </div>
         </Ad>
       </nuxt-link>
-      <nuxt-link to="/contact" class="h-84 md:w-1/2">
+      <nuxt-link to="/contact" class="h-48 md:w-1/3">
         <Ad color="blue" class="h-full w-full flex flex-col justify-between">
-          <div>
-            ILLUSTRATION
-          </div>
           <div>
             <h1 class="font-bold text-black text-4xl">
               Vous avez un projet ?
@@ -32,7 +26,7 @@
         </Ad>
       </nuxt-link>
     </div>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">
diff --git a/src/components/EnvGroup.vue b/src/components/EnvGroup.vue
index 4edc414..636deeb 100644
--- a/src/components/EnvGroup.vue
+++ b/src/components/EnvGroup.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full mb-10">
+  <section class="w-full mb-10">
     <slot />
-  </div>
+  </section>
 </template>
 
 <script>
diff --git a/src/components/ExperiencesAbout.vue b/src/components/ExperiencesAbout.vue
new file mode 100644
index 0000000..0a0c7a8
--- /dev/null
+++ b/src/components/ExperiencesAbout.vue
@@ -0,0 +1,44 @@
+<template>
+  <section class="w-full mb-10">
+    <h3 class="font-bold text-2xl md:text-4xl mb-3">
+      {{ $t('about.title.experiences') }}
+      <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
+      </svg>
+    </h3>
+    <div v-if="experiences" v-for="experience in experiences">
+      <Experience
+        :title="experience.title"
+        :company="experience.company"
+        :location="experience.location"
+        :begin="experience.begin_date"
+        :end="experience.end_date" />
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import {useAsync, useContext} from "@nuxtjs/composition-api";
+import {Experience} from "../../@types/types";
+
+export default {
+  name: "ExperiencesAbout",
+  setup() {
+    const {$content} = useContext()
+
+    const experiences = useAsync(() => {
+      return $content('experiences')
+        .sortBy('end_date', 'desc')
+        .fetch<Experience>()
+    })
+
+    return {
+      experiences
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/FormationsAbout.vue b/src/components/FormationsAbout.vue
new file mode 100644
index 0000000..4476404
--- /dev/null
+++ b/src/components/FormationsAbout.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="w-full mb-10">
+    <h3 class="font-bold text-2xl md:text-4xl mb-3">
+      {{ $t('about.title.formations') }}
+      <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
+      </svg>
+    </h3>
+    <div v-if="formations" v-for="formation in formations">
+      <Formation
+        :title="formation.title"
+        :description="formation.description"
+        :location="formation.location"
+        :begin="formation.begin_date"
+        :end="formation.end_date" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {useAsync, useContext} from "@nuxtjs/composition-api";
+import {Formation} from "../../@types/types";
+
+export default {
+  name: "FormationsHome",
+  setup() {
+    const {$content} = useContext()
+
+    const formations = useAsync(() => {
+      return $content('formations')
+        .sortBy('end_date', 'desc')
+        .fetch<Formation>()
+    })
+
+    return {
+      formations
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/InterestsAbout.vue b/src/components/InterestsAbout.vue
new file mode 100644
index 0000000..825ee42
--- /dev/null
+++ b/src/components/InterestsAbout.vue
@@ -0,0 +1,67 @@
+<template>
+  <section class="w-full mb-10">
+    <h3 class="font-bold text-2xl md:text-4xl">
+      {{ $t('about.title.interests') }}
+      <svg height="32" width="32" class="inline icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
+      </svg>
+    </h3>
+    <div>
+      <ul class="text-xl">
+        <li class="my-2">
+          {{ $t('about.title.technologies') }}
+          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+          </svg>
+        </li>
+        <li class="my-2">
+          {{ $t('about.interests.dev') }}
+          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+          </svg>
+        </li>
+        <li class="my-2">
+          {{ $t('about.interests.devops') }}
+          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+          </svg>
+        </li>
+        <li class="my-2">
+          {{ $t('about.interests.startups') }}
+          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+          </svg>
+        </li>
+        <li class="my-2">
+          {{ $t('about.interests.sysadmin') }}
+          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+          </svg>
+        </li>
+        <li class="my-2">
+          {{ $t('about.interests.trips') }}
+          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+          </svg>
+        </li>
+        <li class="my-2">
+          {{ $t('about.interests.moto') }}
+          <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+          </svg>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "InterestsAbout"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/LanguagesAbout.vue b/src/components/LanguagesAbout.vue
new file mode 100644
index 0000000..fefdbc8
--- /dev/null
+++ b/src/components/LanguagesAbout.vue
@@ -0,0 +1,32 @@
+<template>
+  <section class="w-full mb-10">
+    <h3 class="font-bold text-2xl md:text-4xl">
+      {{ $t('about.title.languages') }}
+      <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
+      </svg>
+    </h3>
+    <div>
+      <table class="text-base text-xl">
+        <tr>
+          <td class="font-bold py-2 pr-4">{{ $t('about.languages.fr')}} 🇫🇷</td>
+          <td class="py-2 px-4">{{ $t('about.languages.native') }}</td>
+        </tr>
+        <tr>
+          <td class="font-bold py-2 pr-4">{{ $t('about.languages.en')}} 🇬🇧</td>
+          <td class="py-2 px-4">{{ $t('about.languages.fluent') }}</td>
+        </tr>
+      </table>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "LanguagesAbout"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Post.vue b/src/components/Post.vue
index 8dca738..24078ed 100644
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -1,6 +1,6 @@
 <template>
   <nuxt-link :to="`/blog/${slug}`">
-    <div class="rounded-lg shadow-lg h-116 w-full md:w-100 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 md:mb-0">
+    <div class="rounded-lg shadow-lg h-116 w-full lg:w-100 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
       <div class="h-2/5 post rounded-t-lg"
            :style="{ backgroundImage: `url(${getBackgroundCover})` }">
       </div>
@@ -8,7 +8,7 @@
         <div>
           <div class="flex space-x-2 mb-2">
             <div v-for="tag in tags">
-              <TagPreview :content="tag" :pill="true"/>
+              <Tag :content="tag" :pill="true"/>
             </div>
           </div>
           <h1 class="text-2xl font-bold">{{ title }}</h1>
diff --git a/src/components/PostsHome.vue b/src/components/PostsHome.vue
index 575e833..3433038 100644
--- a/src/components/PostsHome.vue
+++ b/src/components/PostsHome.vue
@@ -9,7 +9,7 @@
           Je redige des articles concernant ma vie, le developpement et mes passions.
         </p>
       </div>
-      <div class="my-8 md:flex w-full md:space-x-6">
+      <div class="my-8 lg:flex w-full lg:space-x-6">
         <div v-for="post in posts">
           <Post
             :title="post.title"
diff --git a/src/components/PresentationAbout.vue b/src/components/PresentationAbout.vue
new file mode 100644
index 0000000..15d140c
--- /dev/null
+++ b/src/components/PresentationAbout.vue
@@ -0,0 +1,25 @@
+<template>
+  <section class="flex flex-col md:flex-row justify-center items-center py-8">
+    <div class="md:mr-12">
+      <img class="logo-img rounded-full my-5 shadow-lg" src="@/assets/images/Logo.jpg" alt="It's me !" />
+    </div>
+    <div class="ml-2 text-lg leading-6 md:w-2/3 text-justify dark:text-gray-400 text-gray-700">
+      <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>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "SkillsAbout"
+}
+</script>
+
+<style scoped lang="scss">
+.logo-img {
+  height: 25rem;
+}
+</style>
diff --git a/src/components/Project.vue b/src/components/Project.vue
index 962a55f..d18ca3a 100644
--- a/src/components/Project.vue
+++ b/src/components/Project.vue
@@ -1,6 +1,6 @@
 <template>
   <nuxt-link :to="`/projects/${slug}`">
-    <div class="rounded-lg shadow-lg w-full md:w-72 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-4 md:mb-0">
+    <div class="rounded-lg shadow-lg w-full md:w-72 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-4 lg:mb-0">
       <div class="h-40 post rounded-t-lg"
            :style="{ backgroundImage: `url(${getBackgroundCover})` }">
       </div>
@@ -10,7 +10,7 @@
         </h1>
         <div class="flex space-x-2 mt-2">
           <div v-for="tag in tags">
-            <TagPreview :content="tag" :pill="false"/>
+            <Tag :content="tag" :pill="false"/>
           </div>
         </div>
       </div>
diff --git a/src/components/ProjectsHome.vue b/src/components/ProjectsHome.vue
index 59d21ea..54a4db2 100644
--- a/src/components/ProjectsHome.vue
+++ b/src/components/ProjectsHome.vue
@@ -5,11 +5,11 @@
         <h2 class="font-bold text-3xl">
           Derniers projets
         </h2>
-        <p class="text-gray-700 dark:text-gray-400 text-xl md:w-2/3 mt-4">
+        <p class="text-gray-700 dark:text-gray-400 text-xl lg:w-2/3 mt-4">
           Quelques projets que j'ai realise dans ma vie de developpeur.
         </p>
       </div>
-      <div class="my-8 md:flex w-full md:space-x-8">
+      <div class="my-8 lg:flex w-full lg:space-x-8">
         <div v-for="project in projects">
           <Project
             :title="project.title"
diff --git a/src/components/SkillsAbout.vue b/src/components/SkillsAbout.vue
new file mode 100644
index 0000000..c94b0de
--- /dev/null
+++ b/src/components/SkillsAbout.vue
@@ -0,0 +1,43 @@
+<template>
+  <section class="w-full mb-10 mt-4">
+    <h3 class="font-bold text-2xl md:text-4xl mb-3">
+      {{ $t('about.title.skills') }}
+      <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+      </svg>
+    </h3>
+    <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
+      <div v-if="skills" v-for="skill in skills">
+        <Skill
+          :skill="skill.title"
+          :color="skill.color"
+          :cover="skill.cover"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import {useAsync, useContext} from "@nuxtjs/composition-api";
+import {Skill} from "../../@types/types";
+
+export default {
+  name: "SkillsAbout",
+  setup() {
+    const {$content} = useContext()
+
+    const skills = useAsync(() => {
+      return $content('skills').fetch<Skill>()
+    })
+
+    return {
+      skills
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 9897146..ddd5059 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -8,155 +8,17 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
       </svg>
     </PageTitle>
-    <div class="flex flex-col md:flex-row justify-around items-center py-8">
-      <div>
-        <img class="logo-img rounded-full my-5" src="@/assets/images/Logo.jpg" alt="It's me !" />
-      </div>
-      <div class="ml-2 text-lg leading-6 md:w-2/3 text-justify">
-        <p>{{ $t('about.banner.hello') }} <span class="text-orange-400 font-bold">Arthur DANJOU</span> 👋.</p> <br/>
-        <p>{{ $t('about.banner.1')}}</p> <br/>
-        <p>{{ $t('about.banner.2') }}</p> <br/>
-        <p>{{ $t('about.banner.3') }}</p>
-      </div>
-    </div>
-    <div class="w-full mb-10 mt-4">
-      <h3 class="font-bold text-2xl md:text-4xl mb-3">
-        {{ $t('about.title.skills') }}
-        <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-        </svg>
-      </h3>
-      <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
-        <div v-if="skills" v-for="skill in skills">
-          <Skill
-            :skill="skill.title"
-            :color="skill.color"
-            :cover="skill.cover"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="w-full mb-10">
-      <h3 class="font-bold text-2xl md:text-4xl">
-        {{ $t('about.title.interests') }}
-        <svg height="32" width="32" class="inline icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
-        </svg>
-      </h3>
-      <div>
-        <ul class="text-xl">
-          <li class="my-2">
-            {{ $t('about.title.technologies') }}
-            <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
-            </svg>
-          </li>
-          <li class="my-2">
-            {{ $t('about.interests.dev') }}
-            <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-            </svg>
-          </li>
-          <li class="my-2">
-            {{ $t('about.interests.devops') }}
-            <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-            </svg>
-          </li>
-          <li class="my-2">
-            {{ $t('about.interests.startups') }}
-            <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
-            </svg>
-          </li>
-          <li class="my-2">
-            {{ $t('about.interests.sysadmin') }}
-            <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
-            </svg>
-          </li>
-          <li class="my-2">
-            {{ $t('about.interests.trips') }}
-            <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
-            </svg>
-          </li>
-          <li class="my-2">
-            {{ $t('about.interests.moto') }}
-            <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-            </svg>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="w-full mb-10">
-      <h3 class="font-bold text-2xl md:text-4xl">
-        {{ $t('about.title.languages') }}
-        <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
-        </svg>
-      </h3>
-      <div>
-        <table class="text-base text-xl">
-          <tr>
-            <td class="font-bold py-2 pr-4">{{ $t('about.languages.fr')}} 🇫🇷</td>
-            <td class="py-2 px-4">{{ $t('about.languages.native') }}</td>
-          </tr>
-          <tr>
-            <td class="font-bold py-2 pr-4">{{ $t('about.languages.en')}} 🇬🇧</td>
-            <td class="py-2 px-4">{{ $t('about.languages.fluent') }}</td>
-          </tr>
-        </table>
-      </div>
-    </div>
-    <div class="w-full mb-10">
-      <h3 class="font-bold text-2xl md:text-4xl mb-3">
-        {{ $t('about.title.formations') }}
-        <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
-        </svg>
-      </h3>
-      <div v-if="formations" v-for="formation in formations">
-        <Formation
-          :title="formation.title"
-          :description="formation.description"
-          :location="formation.location"
-          :begin="formation.begin_date"
-          :end="formation.end_date" />
-      </div>
-    </div>
-    <div class="w-full mb-10">
-      <h3 class="font-bold text-2xl md:text-4xl mb-3">
-        {{ $t('about.title.experiences') }}
-        <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
-        </svg>
-      </h3>
-      <div v-if="experiences" v-for="experience in experiences">
-        <Experience
-          :title="experience.title"
-          :company="experience.company"
-          :location="experience.location"
-          :begin="experience.begin_date"
-          :end="experience.end_date" />
-      </div>
-    </div>
-    <nuxt-link to="/cv" class="mb-12">
-      <div class="flex justify-center items-center font-bold py-4 px-6 bg-orange-400 hover:bg-orange-600 cursor-pointer duration-500 rounded-full dark:text-black">
-        {{ $t('about.cv') }}
-        <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
-        </svg>
-      </div>
-    </nuxt-link>
+    <PresentationAbout />
+    <SkillsAbout />
+    <InterestsAbout />
+    <LanguagesAbout />
+    <FormationsAbout />
+    <ExperiencesAbout />
+    <Button content="about.cv" link="/cv" />
   </main>
 </template>
 
 <script lang="ts">
-import {useAsync, useContext} from "@nuxtjs/composition-api";
-import {Experience, Formation, Skill} from "../../@types/types";
 
 export default {
   name: "about",
@@ -164,37 +26,9 @@ export default {
     return {
       title: 'About me - Arthur Danjou'
     }
-  },
-  setup() {
-    const {$content} = useContext()
-
-    const skills = useAsync(() => {
-      return $content('skills').fetch<Skill>()
-    })
-    const experiences = useAsync(() => {
-      return $content('experiences')
-        .sortBy('end_date', 'desc')
-        .fetch<Experience>()
-    })
-    const formations = useAsync(() => {
-      return $content('formations')
-        .sortBy('end_date', 'desc')
-        .fetch<Formation>()
-    })
-
-    return {
-      skills,
-      experiences,
-      formations
-    }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.about {
-  .logo-img {
-    height: 20rem;
-  }
-}
 </style>