Translate all the project

src/components/AboutHome.vue

@@ -1,18 +1,18 @@
 <template>
   <section v-if="info && info.age" class="w-full flex items-center justify-center my-12">
     <div class="flex flex-col md:flex-row justify-between items-center">
-      <div class="mb-12 md:mb-0 md:w-1/2 flex justify-center">
-        <img src="@/assets/images/memojies/Hey.png" alt="It's me !" class="w-1/2">
+      <div class="mb-12 md:mb-0 w-full md:w-1/2 flex justify-center">
+        <img src="@/assets/images/memojies/Hey.png" alt="It's me !" class="lg:w-1/2">
       </div>
       <div class="md:w-1/2 text-justify">
         <h2 class="text-4xl font-bold text-center md:text-justify">
-          Who am I ?
+          {{ $t('home.about.title') }}
         </h2>
         <p class="text-xl my-6 text-gray-700 dark:text-gray-400">
-          {{ $t('home.banner.description', {age: info.age}) }}
+          {{ $t('home.about.description', {age: info.age}) }}
         </p>
         <div class="flex justify-center md:justify-start">
-          <Button content="Decouvrir mon profil" link="about"/>
+          <Button content="home.about.about" link="about"/>
         </div>
       </div>
     </div>
@@ -37,7 +37,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>

src/components/Ad.vue

@@ -37,7 +37,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>

src/components/AdHome.vue

@@ -8,10 +8,10 @@
           </div>
           <div>
             <h1 class="font-bold text-black text-4xl">
-              Comment je travaille ?
+              {{ $t('home.ad.uses.title') }}
             </h1>
             <h3 class="px-4 text-xl text-gray-700">
-              Venez decouvrir mon environnement de developpement
+              {{ $t('home.ad.uses.description') }}
             </h3>
           </div>
         </Ad>
@@ -23,10 +23,10 @@
           </div>
           <div>
             <h1 class="font-bold text-black text-4xl">
-              Vous avez un projet ?
+              {{ $t('home.ad.contact.title') }}
             </h1>
             <h3 class="px-4 text-lg text-gray-700">
-              Contactez moi en detaillant votre projet pour debuter notre collaboration.
+              {{ $t('home.ad.contact.description') }}
             </h3>
           </div>
         </Ad>
@@ -40,7 +40,3 @@ export default {
   name: "AdPreview"
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>

src/components/Banner.vue

@@ -2,16 +2,17 @@
   <section class="my-16 md:my-32 w-full flex items-center justify-center">
     <div class="text-center flex flex-col items-center">
       <h1 class="text-6xl font-bold text-gray-700 dark:text-gray-400">
-        Hello, I am <span class="text-black dark:text-white">Arthur Danjou</span> 👋,
+        {{ $t('home.banner.hello') }} <span class="text-black dark:text-white">Arthur Danjou</span> 👋,
       </h1>
       <h2 class="my-6 text-4xl text-black dark:text-white">
-        a <strong>Web</strong> and <strong>Software Developer</strong>. <br />
-        I am also a <strong>Student</strong>.
+        <strong>{{ $t('home.banner.role') }}</strong>. <br />
+        {{ $t('home.banner.student.main') }} <strong>{{ $t('home.banner.student.strong') }}</strong>.
       </h2>
-      <p class="mt-4 text-lg text-gray-800 mb-10 dark:text-gray-300">You can follow me on <span class="link">Twitter</span>,
+      <p class="mt-4 text-lg text-gray-800 mb-10 dark:text-gray-300">{{ $t('home.banner.contact.follow') }} <span class="link">Twitter</span>,
         <span class="link">Twitch</span>
-        and <span class="link">Github</span>.
-        Here is my <nuxt-link to="contact" class="link">Contact</nuxt-link> page.
+        {{ $t('home.banner.contact.and') }} <span class="link">Github</span>
+        {{ $t('home.banner.contact.spacer') }}
+        <nuxt-link to="contact" class="link">{{ $t('home.banner.contact.contact') }}</nuxt-link> {{ $t('home.banner.contact.me') }}
       </p>
     </div>
   </section>

src/components/Button.vue

@@ -1,7 +1,7 @@
 <template>
   <nuxt-link :to="link" class="duration-150 transform hover:scale-105">
     <div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-indigo-600 hover:(bg-indigo-600 text-white) dark:hover:text-black text-indigo-600 duration-300">
-      {{ content }}
+      {{ $t(content) }}
     </div>
   </nuxt-link>
 </template>

src/components/ContactForm.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="w-full flex items-center justify-center flex-col">
     <h2 class="text-center mb-10 font-bold text-gray-700 text-2xl md:text-3xl my-4 dark:text-gray-400">
-      Fill in the form or <br class="lg:hidden"/><a class="email text-black dark:text-white" href="mailto:me@arthurdanjou.fr" target="_blank">Send an email</a> 📬
+      {{ $t('contact.form.title.main') }} <br class="lg:hidden"/><a class="email text-black dark:text-white" href="mailto:me@arthurdanjou.fr" target="_blank">{{ $t('contact.form.title.email') }}</a> 📬
     </h2>
     <form class="w-full lg:w-1/2">
       <div class="w-full lg:flex lg:space-x-4 justify-center mb-8 lg:mb-12">
@@ -13,7 +13,7 @@
             placeholder=" "
             class="form-input-half w-full"
           />
-          <label for="name" class="form-label"> What is your name ?</label>
+          <label for="name" class="form-label">{{ $t('contact.form.name') }}</label>
         </div>
         <div class="form-div lg:w-1/2">
           <input
@@ -23,7 +23,7 @@
             placeholder=" "
             class="form-input-half w-full"
           />
-          <label for="email" class="form-label">What is your email ?</label>
+          <label for="email" class="form-label">{{ $t('contact.form.email') }}</label>
         </div>
       </div>
       <div class="form-div w-full mb-8 lg:mb-12">
@@ -34,7 +34,7 @@
           placeholder=" "
           class="form-input w-full"
         />
-        <label for="subject" class="form-label">Why are you contacting me?</label>
+        <label for="subject" class="form-label">{{ $t('contact.form.subject') }}</label>
       </div>
       <div class="form-div w-full">
           <textarea
@@ -45,12 +45,12 @@
             minlength="30"
             rows="4"
           />
-        <label for="content" class="form-label">Tell me about your project</label>
+        <label for="content" class="form-label">{{ $t('contact.form.content') }}</label>
       </div>
     </form>
     <div class="my-12">
       <div class="font-bold px-6 py-3 border-2 rounded-full border-indigo-600 text-indigo-600 hover:(bg-indigo-600 text-white) hover:dark:text-black duration-300 cursor-pointer">
-        Envoyer
+        {{ $t('contact.form.submit') }}
       </div>
     </div>
   </section>

src/components/PageTitle.vue

@@ -1,6 +1,6 @@
 <template>
   <h1
-    class="mt-16 md:mt-32 font-bold text-3xl md:text-5xl mr-2 inline mb-4 border-b-3 border-solid border-indigo-600"
+    class="mt-16 md:mt-32 font-bold text-2xl md:text-5xl mr-2 inline mb-4 border-b-3 border-solid border-indigo-600"
   >
     {{ this.$t(title) }}
     <slot />

src/components/PostsHome.vue

@@ -3,10 +3,10 @@
     <div class="flex flex-col items-center text-center">
       <div class="flex flex-col items-center">
         <h2 class="font-bold text-3xl">
-          Derniers articles
+          {{ $t('blog.latest') }}
         </h2>
         <p class="text-gray-700 dark:text-gray-400 text-xl md:w-2/3 mt-4">
-          Je redige des articles concernant ma vie, le developpement et mes passions.
+          {{ $t('blog.description') }}
         </p>
       </div>
       <div class="my-8 lg:flex w-full lg:space-x-6">
@@ -23,7 +23,7 @@
         </div>
       </div>
       <div class="flex">
-        <Button content="Voir plus d'articles" link="blog"/>
+        <Button content="blog.see_more" link="blog"/>
       </div>
     </div>
   </section>

src/components/Project.vue

@@ -26,9 +26,9 @@ import {computed} from "@nuxtjs/composition-api";
 interface ProjectProp {
   title: string,
   cover: string,
-  slug: string,
   tags: Array<String>,
   description: string,
+  url: string,
 }
 
 export default {
@@ -42,10 +42,6 @@ export default {
       type: String,
       default: "artapi.png"
     },
-    slug: {
-      type: String,
-      default: "slug"
-    },
     description: {
       type: String,
       default: "Description"

src/components/ProjectsHome.vue

@@ -3,10 +3,10 @@
     <div class="flex flex-col items-center text-center">
       <div class="flex flex-col items-center">
         <h2 class="font-bold text-3xl">
-          Derniers projets
+          {{ $t('projects.latest') }}
         </h2>
         <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.
+          {{ $t('projects.description') }}
         </p>
       </div>
       <div class="my-8 lg:flex w-full lg:space-x-8">
@@ -15,14 +15,13 @@
             :title="project.title"
             :cover="project.cover"
             :description="project.description"
-            :slug="project.slug"
             :tags="project.tags"
-            :company="project.company"
+            :url="project.url"
           />
         </div>
       </div>
       <div class="flex">
-        <Button content="Voir plus de projets" link="projects"/>
+        <Button content="projects.see_more" link="projects"/>
       </div>
     </div>
   </section>

src/components/Skill.vue

@@ -72,6 +72,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-</style>

src/components/SkillsAbout.vue

@@ -37,7 +37,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/Tag.vue

@@ -22,7 +22,3 @@ export default {
   },
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>

src/components/Work.vue

@@ -1,62 +0,0 @@
-<template>
-  <div class="mb-3 mr-3 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer"
-       :class="getColor">
-    <div class="w-full h-full flex flex-col justify-center items-center">
-      <div class="text-center">
-        <img alt="Project Img" class="rounded-md" width="150" :src="getCoverLink">
-      </div>
-      <div class="text-center">
-        <h1 class="md:text-2xl text-lg font-bold">{{ title }}</h1>
-        <a :href="url" :class="'text-' + color + '-500'">{{ formatLink }}</a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {computed} from '@nuxtjs/composition-api'
-
-interface WorkProps {
-  title: string,
-  url: string,
-  cover: string,
-  color: string
-}
-
-export default {
-  name: "Work",
-  props: {
-    title: {
-      type: String,
-      default: 'Title'
-    },
-    url: {
-      type: String,
-      default: 'https://arthurdanjou.fr'
-    },
-    cover: {
-      type: String,
-      default: 'default.png'
-    },
-    color: {
-      type: String,
-      default: 'white'
-    }
-  },
-  setup(props: WorkProps) {
-    const formatLink = computed(() => props.url.replace('https://', '').replace('http://', ''))
-    const getColor = computed(() => `hover:bg-${props.color}-600`)
-    const getCoverLink = computed(() => `@/assets/images/works/${props.cover}.png`)
-
-    return {
-      formatLink,
-      getColor,
-      getCoverLink
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/WorkSkill.vue

@@ -1,54 +0,0 @@
-<template>
-  <div
-    class="m-2 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25"
-    :class="getColor"
-  >
-    <div class="w-full h-full flex flex-col justify-center items-center">
-      <div>
-        <img class="rounded-sm" alt="Skill Img" :src="getCoverLink">
-      </div>
-      <h1 class="md:text-xl text-lg font-bold text-center">{{ skill }}</h1>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {computed} from '@nuxtjs/composition-api'
-
-interface WorkSkillProps {
-  skill: string,
-  color: string,
-  cover: string
-}
-
-export default {
-  name: "WorkSkill",
-  props: {
-    skill: {
-      type: String,
-      default: "Rien"
-    },
-    color: {
-      type: String,
-      default: "red-100"
-    },
-    cover: {
-      type: String,
-      default: "logo.jpg"
-    }
-  },
-  setup(props: WorkSkillProps) {
-    const getColor = computed(() => `hover:bg-${props.color}-600`)
-    const getCoverLink = computed(() => require(`@/assets/images/skills/${props.cover}.png`))
-
-    return {
-      getColor,
-      getCoverLink
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>