import tailwindcss v2

config/ColorMode.ts

@@ -2,5 +2,5 @@ export default {
   preference: 'system',
   fallback: 'dark',
   classPrefix: '',
-  classSuffix: '-mode',
+  classSuffix: '',
 }

config/Tailwind.ts

@@ -1,7 +1,5 @@
 export default {
-  config: {
+  cssPath: './assets/css/tailwind.css',
-    plugins: [
+  configPath: 'tailwind.config.js',
-      require('tailwindcss-dark-mode')
+  exposeConfig: true
-    ]
-  }
 }

nuxt.config.js

@@ -14,10 +14,6 @@ export default {
   plugins: [
   ],
 
-  purgeCSS: {
-    whitelist: ["dark-mode"]
-  },
-
   components: true,
 
   buildModules: [
@@ -41,7 +37,8 @@ export default {
     store: 'store',
   },
 
-  build: {},
+  build: {
+  },
 
   pageTransition: {
     name: 'page',

package.json

@@ -20,7 +20,7 @@
     "@nuxt/types": "^2.14.6",
     "@nuxt/typescript-build": "^2.0.3",
     "@nuxtjs/color-mode": "^2.0.0",
-    "tailwindcss-dark-mode": "^1.1.7",
+    "@nuxtjs/tailwindcss": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^3.2.0"
+    "tailwindcss": "^2.0.1-compat"
   }
 }

src/assets/css/style.scss

@@ -2,7 +2,3 @@ img, svg, path, g {
   z-index: 0;
 }
 
-.dark-mode {
-  @apply bg-gray-800;
-  @apply text-white;
-}

src/assets/css/tailwind.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
-
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
 @import "./style.scss";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

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>

src/tailwind.config.js

@@ -4,12 +4,11 @@ module.exports = {
     purgeLayersByDefault: false,
   },
   purge: [],
-  target: 'relaxed',
   prefix: '',
   important: false,
   separator: ':',
+  darkMode: 'class',
   theme: {
-    darkSelector: '.dark-mode',
     screens: {
       sm: '640px',
       md: '768px',
@@ -715,7 +714,7 @@ module.exports = {
     appearance: ['responsive'],
     backgroundAttachment: ['responsive'],
     backgroundClip: ['responsive'],
-    backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', 'hover', 'responsive'],
+    backgroundColor: ['hover', 'responsive'],
     backgroundImage: ['responsive'],
     gradientColorStops: ['responsive', 'hover', 'focus'],
     backgroundOpacity: ['responsive', 'hover', 'focus'],
@@ -723,7 +722,7 @@ module.exports = {
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
     borderCollapse: ['responsive'],
-    borderColor: ['dark', 'dark-focus', 'dark-focus-within', 'hover', 'responsive'],
+    borderColor: ['hover', 'responsive'],
     borderOpacity: ['responsive', 'hover', 'focus'],
     borderRadius: ['responsive'],
     borderStyle: ['responsive'],
@@ -786,7 +785,7 @@ module.exports = {
     strokeWidth: ['responsive'],
     tableLayout: ['responsive'],
     textAlign: ['responsive'],
-    textColor: ['dark', 'dark-hover', 'dark-active', 'hover', 'responsive'],
+    textColor: ['hover', 'responsive'],
     textOpacity: ['responsive', 'hover', 'focus'],
     textDecoration: ['responsive', 'hover', 'focus'],
     textTransform: ['responsive'],
@@ -820,8 +819,5 @@ module.exports = {
     transitionDuration: ['responsive'],
     transitionDelay: ['responsive'],
     animation: ['responsive'],
-  },
+  }
-  plugins: [
-    require('tailwindcss-dark-mode')()
-  ],
 }

src/templates/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Header />
-    <Nuxt class="pt-16 lg:pt-24"/>
+    <Nuxt class="content pt-16 lg:pt-24"/>
     <Footer />
   </div>
 </template>
@@ -15,5 +15,7 @@ export default {
 </script>
 
 <style scoped>
-
+.content {
+  min-height: calc(100vh - (118px + 96px));
+}
 </style>

src/templates/pages/about.vue

@@ -27,13 +27,48 @@
       </div>
     </div>
     <div class="w-full mb-10 mt-4">
-      <h3 class="font-bold text-2xl md:text-4xl">
+      <h3 class="font-bold text-2xl md:text-4xl mb-3">
         Compétences Techniques
         <img class="inline skill-img" src="@/assets/img/about/wrench.svg" alt="Skills logo" height="32" width="32"/>
       </h3>
-      <div>
+      <div class="flex flex-col items-center md:items-start md:justify-between md:flex-row flex-wrap">
-        <!-- TODO -->
+        <!-- TODO Insert Skills -->
-        TODO Insert Skills
+        <Skill
+          skill="Java"
+          color="white" />
+        <Skill
+          skill="JavaScript"
+          color="white" />
+        <Skill
+          skill="Java"
+          color="white" />
+        <Skill
+          skill="Java"
+          color="white" />
+        <Skill
+          skill="Java"
+          color="white" />
+        <Skill
+          skill="Java"
+          color="white" />
+        <Skill
+          skill="Java"
+          color="white" />
+        <Skill
+          skill="Java"
+          color="white" />
+        <Skill
+          skill="Java"
+          color="white" />
+        <Skill
+          skill="Java"
+          color="white" />
+        <Skill
+          skill="Java"
+          color="white" />
+        <Skill
+          skill="Java"
+          color="white" />
       </div>
     </div>
     <div class="w-full mb-10">
@@ -60,6 +95,10 @@
             Startups & Entreprises innovantes
             <img class="inline" src="@/assets/img/about/rocket.svg" alt="Dev icon" height="25" width="25" />
           </li>
+          <li class="my-2">
+            Administration système
+            <img class="inline" src="@/assets/img/about/server.svg" alt="Dev icon" height="25" width="25" />
+          </li>
           <li class="my-2">
             Voyage
             <img class="inline" src="@/assets/img/about/airplane.svg" alt="Dev icon" height="25" width="25" />
@@ -90,23 +129,47 @@
       </div>
     </div>
     <div class="w-full mb-10">
-      <h3 class="font-bold text-2xl md:text-4xl">
+      <h3 class="font-bold text-2xl md:text-4xl mb-3">
         Formation
         <img class="inline formation-img" src="@/assets/img/about/formation.svg" alt="Formations logo" height="32" width="32"/>
       </h3>
       <div>
-        <!-- TODO -->
+        <!-- TODO Insert Formations-->
-        TODO Insert Formations
+        <Formation
+          title="Autodidacte"
+          description="Apprentissage en autodidacte et en pratiquant"
+          location="At Home 🏠"
+          begin="2015"
+          end="Today" />
+        <Formation
+          title="Baccalauréat"
+          description="Examen spécialités maths & Pc"
+          location="At Passy"
+          begin="2020"
+          end="2021" />
       </div>
     </div>
     <div class="w-full mb-10">
-      <h3 class="font-bold text-2xl md:text-4xl">
+      <h3 class="font-bold text-2xl md:text-4xl mb-3">
         Expériences
         <img class="inline experience-img" src="@/assets/img/about/experience.svg" alt="Experience logo" height="32" width="32"/>
       </h3>
       <div>
-        <!-- TODO -->
+        <!-- TODO Insert Experiences-->
-        TODO Insert Experiences
+        <Experience
+          title="Junior Developer"
+          company="Erisium"
+          description="Chargé des mini-jeux et de l'infrastructure"
+          location="At Home 🏠"
+          begin="2019"
+          end="Today" />
+        <Experience
+          title="FullStack Software & Web Developer"
+          company="ArtDanjProduction"
+          description="Création d'applications web et développement de l'infrastructure"
+          location="At Home 🏠"
+          begin="2019"
+          end="2020" />
       </div>
     </div>
     <nuxt-link to="/cv">
@@ -130,7 +193,7 @@
         Editeurs de texte
         <img class="inline experience-img" src="@/assets/img/about/code.svg" alt="Editor logo" height="32" width="32"/>
       </h3>
-      <ul class="list-disc ml-10 text-gray-800">
+      <ul class="list-disc ml-10 text-gray-800 text-xl">
         <li>
           Editeur Java: <span>Intellij Idea Ultimate</span>
         </li>
@@ -165,7 +228,7 @@
         Apps & Logiciels
         <img class="inline experience-img" src="@/assets/img/about/software.svg" alt="Software logo" height="32" width="32"/>
       </h3>
-      <ul class="list-disc ml-10 text-gray-800">
+      <ul class="list-disc ml-10 text-gray-800  text-xl">
         <li>
           Email: <span>Courrier by Microsoft</span>
         </li>
@@ -194,7 +257,7 @@
         Hébergement
         <img class="inline-block experience-img" src="@/assets/img/about/server.svg" alt="Server logo" height="32" width="32"/>
       </h3>
-      <ul class="list-disc ml-10 text-gray-800">
+      <ul class="list-disc ml-10 text-gray-800  text-xl">
         <li>
           Hébergeur VPS: <span>PulseHeberg</span>
         </li>
@@ -208,7 +271,7 @@
         Setup bureautique
         <img class="inline experience-img" src="@/assets/img/about/lamp.svg" alt="Desktop logo" height="32" width="32"/>
       </h3>
-      <ul class="list-disc ml-10 text-gray-800">
+      <ul class="list-disc ml-10 text-gray-800  text-xl">
         <li>
           Bureau: <span>Ikea en bois</span>
         </li>
@@ -240,7 +303,7 @@
 
 <script lang="ts">
 export default {
-name: "about"
+  name: "about",
 }
 </script>
 

src/templates/pages/blog/_id.vue

@@ -0,0 +1,66 @@
+<template>
+  <main class="blog flex flex-col items-center mt-16 md:mt-32 px-5 xl:px-64">
+    <h1 class="title font-bold text-4xl mr-2 inline mb-4">
+      Blog
+      <img class="inline blog-img" src="@/assets/img/sections/quill.svg" height="40" width="40" alt="Blog Logo" />
+    </h1>
+    <div class="flex flex-col justify-around items-center py-8 w-full bg-red-100">
+      <!-- TODO Insert blog's posts -->
+      <h1>
+        TITLE
+      </h1>
+      <div class="w-1/2">
+        <div class="flex flex-row justify-between">
+          <div>
+            4 min. read
+          </div>
+          <div>
+            14 aout 2020
+          </div>
+        </div>
+        <div class="flex justify-center">
+          COVER
+        </div>
+      </div>
+      <h3>
+        DESCRIPTION
+      </h3>
+      <p>
+        CONTENT
+      </p>
+      <div class="my-10 border-t border-black border-solid w-full" />
+      <p class="text-center">
+        Merci d'avoir lu jusqu'au bout ! 😊<br class="md:hidden"/>
+        Hésite surtout pas à partager l'article sur Twitter
+      </p>
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+  name: "blog",
+  data() {
+    return {
+      id: this.$route.params.id
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.blog {
+  .blog-img {
+    transform: translate(3px, -10px);
+  }
+
+  .title:after {
+    margin-top: 0.1rem;
+    content: '';
+    height: 2px;
+    width: 100%;
+    display: block;
+    @apply bg-green-400;
+  }
+}
+</style>

src/templates/pages/blog/index.vue

@@ -6,11 +6,13 @@
     </h1>
     <div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
       <!-- TODO Insert blog's posts -->
-      <Post
+      <nuxt-link to="/blog/1">
-        title="Il était une nouvelle fois la vie"
+        <Post
-        reading_time="4"
+          title="Il était une nouvelle fois la vie"
-        description="Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi."
+          reading_time="4"
-        tags="Dev Tech Vie"/>
+          description="Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi."
+          tags="Dev Tech Vie"/>
+      </nuxt-link>
       <Post reading_time="12"/>
       <Post />
     </div>
@@ -19,7 +21,7 @@
 
 <script>
 export default {
-name: "blog"
+  name: "blog"
 }
 </script>
 

src/templates/pages/blog/tags/_id.vue

@@ -0,0 +1,50 @@
+<template>
+  <main class="blog flex flex-col items-center mt-16 md:mt-32 px-5 xl:px-64">
+    <h1 class="title font-bold text-4xl mr-2 inline mb-4">
+      #{{this.getCapitalizedTag}}
+    </h1>
+    <div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
+      <!-- TODO Insert blog's posts -->
+      <nuxt-link to="/blog/1">
+        <Post
+          title="Il était une nouvelle fois la vie"
+          reading_time="4"
+          description="Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi."
+          tags="Dev Tech Vie"/>
+      </nuxt-link>
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+  name: "blog",
+  data() {
+    return {
+      tag: this.$route.params.id
+    }
+  },
+  computed: {
+    getCapitalizedTag() {
+      return this.tag[0].toUpperCase() + this.tag.slice(1)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.blog {
+  .blog-img {
+    transform: translate(3px, -10px);
+  }
+
+  .title:after {
+    margin-top: 0.1rem;
+    content: '';
+    height: 2px;
+    width: 100%;
+    display: block;
+    @apply bg-green-400;
+  }
+}
+</style>

src/templates/pages/index.vue

@@ -1,12 +1,12 @@
 <template>
   <main class="index mt-10 md:mt-32 bg-gray-100 px-5 xl:px-64">
-    <section class="banner w-full flex justify-between flex-col lg:flex-row-reverse items-center mb-16">
+    <section class="banner w-full flex justify-between flex-col lg:flex-row-reverse items-center mb-16 dark:bg-black">
       <div class="hidden lg:block flex justify-center items-center lg:w-1/2">
         <img src="@/assets/img/computer.png" alt="It's me !" class="me-img" />
       </div>
       <div class="title flex justify-center flex-col lg:w-1/2 pr-3">
         <div class="mb-4 md:mb-10">
-          <h1 class="text-4xl md:text-5xl text-left font-bold md:w-3/4">
+          <h1 class="text-4xl md:text-5xl text-left font-bold md:w-3/4 dark:text-white">
             Bonjour, je suis <br />
             <span class="text-red-700 font-black">Arthur Danjou</span> 👋
           </h1>