import tailwindcss v2

src/components/Experience.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="flex flex-row relative mb-5">
+    <span class="self-center relative h-4 w-4 mr-4">
+      <span v-if="end === 'Today'" class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-green-500"/>
+      <span v-else class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-gray-500"/>
+    </span>
+    <div class="leading-7 relative">
+      <p class="text-base text-gray-800 leading-6">{{begin}} - {{end}} <span class="px-3">|</span> {{location}}</p>
+      <h1 class="text-2xl font-bold">{{title}} - {{company}}</h1>
+      <h2 class="text-xl">{{description}}</h2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Experience",
+  props: {
+    title: {
+      type: String,
+      default: "Title"
+    },
+    description: {
+      type: String,
+      default: "Description"
+    },
+    company: {
+      type: String,
+      default: "ArtDanjProduction"
+    },
+    location: {
+      type: String,
+      default: "France"
+    },
+    begin: {
+      type: String,
+      default: "Now"
+    },
+    end: {
+      type: String,
+      default: "Never"
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Formation.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="flex flex-row relative mb-5">
+    <span class="self-center relative h-4 w-4 mr-4">
+      <span v-if="end === 'Today'" class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-green-500"/>
+      <span v-else class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-gray-500"/>
+    </span>
+    <div class="leading-7 relative">
+      <p class="text-base text-gray-800 leading-6">{{begin}} - {{end}} <span class="px-3">|</span> {{location}}</p>
+      <h1 class="text-2xl font-bold">{{title}}</h1>
+      <h2 class="text-xl">{{description}}</h2>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Formation",
+  props: {
+    title: {
+      type: String,
+      default: "Title"
+    },
+    description: {
+      type: String,
+      default: "Description"
+    },
+    location: {
+      type: String,
+      default: "Location"
+    },
+    begin: {
+      type: String,
+      default: "Now"
+    },
+    end: {
+      type: String,
+      default: "Never"
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Header.vue

@@ -100,6 +100,12 @@ export default {
 
   .header-container {
 
+    .nuxt-link-active {
+      &.green {
+        @apply text-green-400;
+      }
+    }
+
     .nuxt-link-exact-active {
       &.red {
         @apply text-red-400;

src/components/HomePost.vue

@@ -1,5 +1,5 @@
 <template>
-  <article class="border border-solid border-gray-300 w-full lg:w-1/3 h-auto h-blog p-2 flex flex-col justify-between my-5 lg:my-0 lg:mx-5">
+  <article class="border border-solid rounded-xl border-gray-300 w-full lg:w-1/3 h-auto h-blog p-2 flex flex-col justify-between my-5 lg:my-0 lg:mx-5">
     <div>
       <p class="text-3xl font-bold text-justify leading-7 mb-3">{{title}}</p>
       <p class="text-gray-900 text-lg italic text-justify leading-5">{{description}}</p>

src/components/Post.vue

@@ -11,7 +11,9 @@
       </div>
       <div class="self-end flex flex-wrap">
         <div v-for="tag in tagsSplit" class="ml-2 py-1 px-2 rounded bg-black text-white font-semibold">
-          #{{tag}}
+          <nuxt-link :to="'/blog/tags/' + tag.toLowerCase()">
+            #{{tag}}
+          </nuxt-link>
         </div>
       </div>
     </div>

src/components/Skill.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="m-4 md:w-48 h-32 w-2/3 p-1 md:p-2 skill border-gray-900 border-2 bg-gray-300 duration-300 rounded-3xl" :class="'hover:bg-'+color">
+    <div class="w-full h-full flex flex-col justify-center items-center">
+      <div>
+        COVER
+      </div>
+      <h1 class="md:text-2xl text-lg font-bold">{{skill}}</h1>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Skill",
+  props: {
+    skill: {
+      type: String,
+      default: "Rien"
+    },
+    color: {
+      type: String,
+      default: "red-100"
+    },
+    cover: {
+      type: String,
+      default: "https://api.arthurdanjou.fr/files/default.png"
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.skill {
+
+}
+</style>