working 🚀

src/components/EnvListItem.vue

@@ -1,8 +1,8 @@
 <template>
   <li>
     {{ 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>
+    <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>
 </template>
 

src/components/EnvTitle.vue

@@ -1,6 +1,6 @@
 <template>
   <h3 class="font-bold text-2xl md:text-4xl mb-2">
-    {{ title }}
+    {{ $t(title) }}
     <slot />
   </h3>
 </template>

src/components/Experience.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="flex flex-row mb-5">
-    <span class="self-center 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 animate-ping ring-green-200"/>
-      <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="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="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">
       <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">{{title}} - {{company}}</h1>
-      <h2 class="text-xl">{{description}}</h2>
+      <h1 class="text-2xl font-bold">{{ $t(title) }} - {{company}}</h1>
+      <h2 class="text-xl">{{ $t(description) }}</h2>
     </div>
   </div>
 </template>
@@ -47,7 +49,7 @@ export default {
         "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
       ];
       const dateFormat = new Date(date)
-      return monthNames[dateFormat.getMonth()] + " " + dateFormat.getFullYear()
+      return date === 'Today' ? 'Today' : monthNames[dateFormat.getMonth()] + " " + dateFormat.getFullYear()
     }
   }
 }

src/components/Formation.vue

@@ -1,13 +1,15 @@
 <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="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="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">
       <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">{{title}}</h1>
-      <h2 class="text-xl">{{description}}</h2>
+      <h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
+      <h2 class="text-xl">{{ $t(description) }}</h2>
     </div>
   </div>
 </template>

src/components/Header.vue

@@ -14,7 +14,7 @@
                 🇫🇷
               </div>
               <div v-else @click="changeLanguage('en')">
-                🇺🇸
+                🇬🇧
               </div>
             </li>
             <li @click="changeColorMode()" class="mx-2 cursor-pointer flex items-center">

src/components/HomeLink.vue

@@ -5,10 +5,10 @@
       :class="color ? 'hover:bg-' + color + '-400 dark:hover:bg-' + color + '-600 active:bg-' + color + '-400 dark:active:bg-' + color + '-600' : ''">
       <div class="ml-4">
         <h1 class="text-3xl font-bold my-2">
-          {{ title }}
+          {{ $t(title) }}
           <slot />
         </h1>
-        <p class="w-5/6 text-gray-900 dark:text-dark-900 text-justify">{{ description }}</p>
+        <p class="w-5/6 text-gray-900 dark:text-dark-900 text-justify">{{ $t(description) }}</p>
       </div>
       <div class="mr-10 arrow duration-300">
         <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

src/components/PageTitle.vue

@@ -3,7 +3,7 @@
     class="mt-16 md:mt-32 font-bold text-4xl mr-2 inline mb-4 border-b-2 border-solid"
     :class="' border-'+ color +'-400'"
   >
-    {{ title }}
+    {{ $t(title) }}
     <slot />
   </h1>
 </template>

src/components/Post.vue

@@ -7,11 +7,11 @@
       <p
         class="text-3xl  font-bold text-justify leading-7 mb-3"
         :class="lightBg === 1 ? 'text-black':'text-white'"
-      >{{title}}</p>
+      >{{ $t(title) }}</p>
       <p
         class="text-lg italic text-justify leading-5"
         :class="lightBg === 1 ? 'text-gray-900':'text-dark-900'"
-      >{{description}}</p>
+      >{{ $t(description) }}</p>
     </div>
     <div
       class="flex justify-between mt-8"
@@ -19,7 +19,7 @@
     >
       <div>
         <div>{{formatDate}}</div>
-        <div>{{reading_time}} min read</div>
+        <div>{{reading_time}} {{ $t('post_reading_time') }}</div>
         <div>{{likes}} ❤</div>
       </div>
       <div class="self-end flex flex-wrap flex-col md:flex-row">
@@ -27,7 +27,7 @@
              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'"
         >
-          #{{tag}}
+          #{{ $t(tag) }}
         </div>
       </div>
     </div>

src/components/Service.vue

@@ -1,7 +1,16 @@
 <template>
-  <div class="flex flex-col items-center m-4 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer">
-    <div>
-      
+  <div class="w-72 h-80 border-2 border-black border-solid rounded-xl">
+    <div class="flex flex-col items-center my-3 border-b-2 border-black border-solid">
+      <img width="85" :src="'http://localhost:5555/files/' + cover" alt="Service Img"/>
+      <h1 class="items-center flex h-16 text-xl font-bold mx-4">
+        {{ title }}
+      </h1>
+    </div>
+    <div class="h-auto">
+      {{description }}
+    </div>
+    <div class="h-auto">
+      {{ price }}
     </div>
   </div>
 </template>
@@ -24,11 +33,12 @@ export default {
     },
     price: {
       default: 0,
-      type: Number
-    },
-    bestSeller: {
-      default: false,
-      type: Boolean
+      type: String
+    }
+  },
+  computed: {
+    hasPrice() {
+      return this.price !== '0'
     }
   }
 }

src/components/Skill.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="m-4 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
+  <div class="p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
         <img alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
       </div>
-      <h1 class="md:text-2xl text-lg font-bold">{{skill}}</h1>
+      <h1 class="md:text-xl text-lg font-bold text-center">{{ $t(skill) }}</h1>
     </div>
   </div>
 </template>

src/components/Work.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="m-4 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
+  <div class="p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
         <img alt="Project Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
       </div>
       <div class="text-center">
-        <h1 class="md:text-2xl text-lg font-bold">{{ title }}</h1>
+        <h1 class="md:text-2xl text-lg font-bold">{{ $t(title) }}</h1>
         <a :href="url" :class="'text-' + color + '-500'">{{ formatLink }}</a>
       </div>
     </div>

src/components/WorkSkill.vue

@@ -4,7 +4,7 @@
       <div>
         <img alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
       </div>
-      <h1 class="md:text-2xl text-lg font-bold">{{skill}}</h1>
+      <h1 class="md:text-2xl text-lg font-bold">{{ $t(skill) }}</h1>
     </div>
   </div>
 </template>

src/tailwind.config.js

@@ -212,7 +212,7 @@ module.exports = {
     },
     fontFamily: {
       sans: [
-        '"Raleway"',
+        'Raleway',
         'ui-sans-serif',
         'system-ui',
         '-apple-system',

src/templates/pages/about.vue

@@ -37,7 +37,7 @@
           <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">
+      <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden space-x-4">
         <div v-for="skill in skills">
           <Skill
             :skill="skill.title.code"
@@ -56,7 +56,6 @@
         </svg>
       </h3>
       <div>
-        <!-- TODO -->
         <ul class="text-xl">
           <li class="my-2">
             Technologies

src/templates/pages/contact.vue

@@ -9,12 +9,27 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
       </svg>
     </PageTitle>
-    <div class="flex flex-col justify-around items-center py-10 w-full">
-      <h1 class="text-xl font-bold text-center mb-8">
+    <div class="flex flex-col items-center text-center py-10 w-full">
+      <h1 class="text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900 mb-8">
         Vous voulez collaborer avec moi ? Voici mes différentes offres !
       </h1>
-      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full">
-        <!-- Insert Services -->
+      <div class="flex flex-row w-full overflow-x-auto space-x-4 mb-6">
+        <!-- Todo Insert Services -->
+        <Service
+          title="Développement d'application"
+          cover="Logo.jpg"
+          price="0"
+        />
+        <Service
+          title="Maintenance Linux"
+          cover="Logo.jpg"
+          price="120"
+        />
+        <Service
+          title="Conseil en développement"
+          cover="Logo.jpg"
+          price="0"
+        />
       </div>
       <div class="flex flex-col items-center w-full md:w-2/3">
         <h1 class="text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-900">
@@ -74,9 +89,10 @@
 
 <script>
 import PageTitle from "~/components/PageTitle";
+import Service from "~/components/Service";
 export default {
   name: "contact",
-  components: {PageTitle},
+  components: {Service, PageTitle},
   data () {
     return {
       services: [],

src/templates/pages/dev.vue

@@ -1,16 +0,0 @@
-<template>
-  <main>
-    Dev page
-  </main>
-</template>
-
-<script>
-export default {
-  name: "dev",
-  layout: 'dev'
-}
-</script>
-
-<style scoped>
-
-</style>

src/templates/pages/index.vue

@@ -21,8 +21,8 @@
       <div class="flex flex-col items-center w-full">
         <div class="flex flex-col md:flex-row justify-around w-full md:mb-8">
           <HomeLink
-            :title="$t('home_link_about')"
-            :description="$t('home_link_about_description')"
+            title="home_link_about"
+            description="home_link_about_description"
             color="orange"
             link="/about"
             >
@@ -31,8 +31,8 @@
             </svg>
           </HomeLink>
           <HomeLink
-            :title="$t('home_link_blog')"
-            :description="$t('home_link_blog_description')"
+            title="home_link_blog"
+            description="home_link_blog_description"
             color="green"
             link="/blog"
           >
@@ -43,8 +43,8 @@
         </div>
         <div class="flex flex-col md:flex-row justify-around w-full">
           <HomeLink
-            :title="$t('home_link_work')"
-            :description="$t('home_link_work_description')"
+            title="home_link_work"
+            description="home_link_work_description"
             color="blue"
             link="/work"
           >
@@ -53,8 +53,8 @@
             </svg>
           </HomeLink>
           <HomeLink
-            :title="$t('home_link_contact')"
-            :description="$t('home_link_contact_description')"
+            title="home_link_contact"
+            description="home_link_contact_description"
             color="purple"
             link="/contact"
           >

src/templates/pages/work/index.vue

@@ -12,7 +12,7 @@
       <h1 class="text-xl font-bold text-center mb-8">
         Voici les différents projets auxquels j'ai pu participer dans mon passé !
       </h1>
-      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full">
+      <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">
             <Work