start i18n

package-lock.json

@@ -11,6 +11,7 @@
         "lottie-vuejs": "^0.4.0",
         "vite-svg-loader": "^5.1.0",
         "vue": "^3.4.21",
+        "vue-i18n": "^9.13.1",
         "vue-svg-loader": "^0.16.0",
         "vue3-lottie": "^3.3.0"
       },
@@ -415,6 +416,47 @@
         "node": ">=12"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.13.1.tgz",
+      "integrity": "sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.13.1",
+        "@intlify/shared": "9.13.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.13.1.tgz",
+      "integrity": "sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==",
+      "dependencies": {
+        "@intlify/shared": "9.13.1",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.13.1.tgz",
+      "integrity": "sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -819,6 +861,11 @@
         "@vue/shared": "3.4.26"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+      "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.4.26",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.26.tgz",
@@ -3950,6 +3997,25 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.13.1.tgz",
+      "integrity": "sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==",
+      "dependencies": {
+        "@intlify/core-base": "9.13.1",
+        "@intlify/shared": "9.13.1",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-svg-loader": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "lottie-vuejs": "^0.4.0",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.21",
+    "vue-i18n": "^9.13.1",
     "vue-svg-loader": "^0.16.0",
     "vue3-lottie": "^3.3.0"
   },

public/i18n/en.json

@@ -0,0 +1,29 @@
+{
+  "cv": "CV",
+  "personal-email": "Delanierlucas@gmail.com",
+  "copy": "Copy",
+  "about": "About",
+  "skills": "Skills",
+  "experiences": "Experience",
+  "projects": "Projects",
+  "welcome-message": "Hey, I'm Lucas",
+  "catch-phrase": "Developer & <br> Designer of applications",
+  "banner": {
+    "experience": "YEAR <br> EXPERIENCE",
+    "projects": "ACHIEVED <br> PROJECTS",
+    "skills": "FRONT-END <br> BACK-END",
+    "ui-ux": "UI/UX <br> DESIGNER"
+  },
+  "social-media": {
+    "linkedin": "LinkedIn",
+    "github": "Github",
+    "mail": "Mail"
+  },
+  "skills-list": {
+    "title" : {
+      "start": "My expertise is based on",
+      "highlight": " six essential pillars",
+      "end": ""
+    }
+  }
+}

public/i18n/fr.json

@@ -0,0 +1,29 @@
+{
+  "cv": "CV",
+  "personal-email": "Delanierlucas@gmail.com",
+  "copy": "Copier",
+  "about": "À propos",
+  "skills": "Compétences",
+  "experiences": "Expérience",
+  "projects": "Projets",
+  "welcome-message": "Salut, je suis Lucas",
+  "catch-phrase": "Developpeur & <br> Designer d'applications",
+  "banner": {
+    "experience": "ANNEE <br> D'EXPERIENCE",
+    "projects": "PROJETS <br> REALISES",
+    "skills": "FRONT-END <br> BACK-END",
+    "ui-ux": "UI/UX <br> DESIGNER"
+  },
+  "social-media": {
+    "linkedin": "LinkedIn",
+    "github": "Github",
+    "mail": "Mail"
+  },
+  "skills-list": {
+    "title" : {
+      "start": "Mon expertise repose sur",
+      "highlight": " six piliers",
+      "end": "essentiels."
+    }
+  }
+}

src/App.vue

@@ -149,12 +149,12 @@ onUnmounted(() => {
   <div class="flex-col flex pt-24 sm:pt-48 pb-28 z-10 relative" id="skills">
     <span class="mx-4 text-3xl sm:text-4xl text-center font-medium bg-gradient-to-r from-grey-50
     to-grey-100 bg-clip-text text-transparent px-10 ">
-      Mon expertise repose sur
+      {{ $t('skills-list.title.start')}}
       <span class="bg-blue text-white hover:bg-transparent hover:text-grey-75 ease-in-out transition-all duration-1000">
-        six piliers
+        {{ $t('skills-list.title.highlight')}}
       </span>
       <br>
-      essentiels.
+      {{ $t('skills-list.title.end')}}
     </span>
     <GridSkill class="mx-8 sm:mx-28 py-28"/>
   </div>

src/components/Header.vue

@@ -33,28 +33,28 @@ function copyEmail(event) {
 <template>
     <header class="flex w-full p-12 justify-between items-center">
         <div class="flex items-center gap-7">
-            <p class="selectable hidden lg:block">Delanierlucas@gmail.com</p>
+            <p class="selectable hidden lg:block">{{ $t('personal-email')}}</p>
             <div class="relative parent hidden lg:block">
               <PrimaryButton text="Copier" @click="copyEmail"/>
               <Vue3Lottie ref="copyAnimation" :animationData="CopyJson" :height="180" :width="180"
                           class="absolute z-10 pointer-events-none child" :auto-play="false" :loop="false"
                           v-show="display"/>
             </div>
-            <PrimaryButton text="Cv" @click="openCV"/>
+            <PrimaryButton :text="$t('cv')" @click="openCV"/>
         </div>
         <div class=" hidden sm:block">
             <BreadCrumb>
                 <template v-slot:first>
-                    <BreadCrumbCell url="about">A propos</BreadCrumbCell>
+                    <BreadCrumbCell url="about">{{ $t('about')}}</BreadCrumbCell>
                 </template>
                 <template v-slot:second>
-                    <BreadCrumbCell url="skills">Compétences</BreadCrumbCell>
+                    <BreadCrumbCell url="skills">{{ $t('skills')}}</BreadCrumbCell>
                 </template>
               <template v-slot:third>
-                <BreadCrumbCell url="experiences">Experiences</BreadCrumbCell>
+                <BreadCrumbCell url="experiences">{{ $t('experiences')}}</BreadCrumbCell>
               </template>
                 <template v-slot:fourth>
-                    <BreadCrumbCell url="projects">Projets</BreadCrumbCell>
+                    <BreadCrumbCell url="projects">{{ $t('projects')}}</BreadCrumbCell>
                 </template>
             </BreadCrumb>
         </div>

src/components/HeroContainer.vue

@@ -8,27 +8,26 @@ import RedirectLogo from './../assets/icons/redirect.svg';
              alt="Lucas Delanier">
         <div class="flex flex-row items-center gap-1">
           <p class="pt-2">
-            Salut, je suis Lucas
+            {{ $t('welcome-message')}}
           </p>
           <p class="hover:scale-150 transition-all ease-in duration-300 hover:rotate-12">
             👋
           </p>
         </div>
         <h1 class="text-center text-3xl sm:text-5xl font-medium bg-gradient-to-r from-grey-50 to-grey-100 bg-clip-text
-         text-transparent leading-tight pt-5">
+         text-transparent leading-tight pt-5" v-html="$t('catch-phrase')">
-          Développeur &<br>designer d'application.
         </h1>
         <div class="flex scale-90 sm:scale-100 flex-row gap-3 pt-8 flex-wrap items-center justify-center">
           <LinkButton url="https://www.linkedin.com/in/lucas-delanier/">
-            Linkedin
+            {{ $t('social-media.linkedin')}}
             <RedirectLogo/>
           </LinkButton>
           <LinkButton url="https://github.com/WINK3R">
-            Github
+            {{ $t('social-media.github')}}
             <RedirectLogo/>
           </LinkButton>
           <LinkButton url="mailto:delanierlucas@gmail.com">
-            Mail
+            {{ $t('social-media.mail')}}
             <RedirectLogo/>
           </LinkButton>
         </div>

src/main.js

@@ -2,6 +2,16 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './style.css'
 import {Vue3Lottie} from "vue3-lottie";
+import { createI18n } from 'vue-i18n';
+import fr from '../public/i18n/fr.json'
+import en from '../public/i18n/en.json'
 
-
+const i18n = createI18n({
-createApp(App).use(Vue3Lottie).mount('#app')
+    locale: 'fr',
+    fallbackLocale: 'fr',
+    messages: {
+        en: en,
+        fr: fr
+    }
+})
+createApp(App).use(Vue3Lottie).use(i18n).mount('#app')