start i18n

12 months ago · 3a5bde9f1b
parent 3772454316
commit 3a5bde9f1b
8 changed files with 151 additions and 17 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
  },
--- a/public/i18n/en.json
+++ b/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": ""
+    }
+  }
+}
--- a/public/i18n/fr.json
+++ b/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."
+    }
+  }
+}
--- a/src/App.vue
+++ b/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>
--- a/src/components/Header.vue
+++ b/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>
--- a/src/components/HeroContainer.vue
+++ b/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">
-          Développeur &<br>designer d'application.
+         text-transparent leading-tight pt-5" v-html="$t('catch-phrase')">
        </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>
--- a/src/main.js
+++ b/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'

-
-createApp(App).use(Vue3Lottie).mount('#app')
+const i18n = createI18n({
+    locale: 'fr',
+    fallbackLocale: 'fr',
+    messages: {
+        en: en,
+        fr: fr
+    }
+})
+createApp(App).use(Vue3Lottie).use(i18n).mount('#app')