Started to add some real text

Also worked on the translation system

src/assets/localization/en/localization.json

@@ -1,5 +1,21 @@
 {
-    "message": {
-      "hello": "hello world"
+    "home":{
+      "greeting": "Hello ! I'm Kévin Taccoen !",
+      "occupation": {
+        "ai":"AI enthusiast",
+        "fullstack":"Full-Stack Developer",
+        "student":"Master's degree student"
+      },
+      "presentationTitle":"Thanks for visiting !",
+      "presentationText": "I'm Kévin Taccoen, TODO",
+      "contactMe": "Are you looking to send me a message ?",
+      "contactButton": "Contact",
+      "features": {
+        "projects":{
+          "title": "Always working on some projects",
+          "desc": "As you will see a little below, I'm always working on something.",
+          "buttonText": "See all projects"
+        }
+      }
     }
 }

src/components/home/presentation.vue

@@ -1,18 +1,9 @@
 <template>
   <div id="presentation_div" class="">
       <div id="presentation_text">
-        <h1>Thanks for coming !</h1>
+        <h1>{{ $t("home.presentationTitle") }}</h1>
         <article>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-            Aenean nec ante tristique, tincidunt dolor a, maximus nisl. 
-            Curabitur ut metus accumsan, vestibulum ex vitae, pretium enim.
-            Etiam tincidunt mauris quis elit egestas, vel viverra justo 
-            efficitur. Nulla facilisi. Cras porttitor odio a massa pretium 
-            varius. Vivamus felis risus, luctus vel mollis nec, lacinia non 
-            libero. Proin mattis, ante vitae mattis sollicitudin, turpis 
-            erat auctor arcu, vel fringilla arcu diam aliquam urna. 
-          </p>
+          <p>{{ $t("home.presentationText") }}</p>
         </article>
       </div>
       <div id="presentation_img"><img :src="welcomeImg"></div>

src/components/home/welcome.vue

@@ -7,7 +7,7 @@
            
             <div id="name_div_right_container">
               <div class="test" id="welcome_text_div">
-                <h1>Hello ! I'm {{ $t('message.hello') }} </h1>
+                <h1> {{ $t('home.greeting') }} </h1>
                 <dynamicOccupation id="dynamic_occupation" :sentences="occupations" />
               </div>
               <div id="social_networks" class="test">
@@ -29,8 +29,14 @@
 
 <script setup>
   import dynamicOccupation from './dynamicOccupation.vue';
+  import {useI18n} from 'vue-i18n';
 
-  const occupations = ["AI enthousiast", "I don't know", "Test Hello World"]
+  const i18n = useI18n();
+
+  const occupations = [
+  i18n.t('home.occupation.ai'), i18n.t('home.occupation.fullstack'),
+  i18n.t('home.occupation.student')
+  ]
 </script>
 
 <style scoped>

src/main.js

@@ -17,9 +17,11 @@ if(userLanguage.split("-")[0] == "fr") userLanguage = "fr";
 else if(userLanguage.split("-")[0] == "jp" || userLanguage.split("-")[0] == "ja") userLanguage = "ja";
 else userLanguage = "en";
 
+console.warn("Locale forced to english !");
+
 const i18n = createI18n({
     legacy:false,
-    locale: userLanguage,
+    locale: 'en',//userLanguage,
     fallbackLocale: 'en',
     messages: {
       en: en,

src/views/HomeView.vue

@@ -5,17 +5,16 @@
   import feature from '@/components/home/feature.vue';
   import projects from '@/components/home/projects.vue';
 
+  import {useI18n} from 'vue-i18n';
+  const i18n = useI18n();
+
+  import projectsSvg from '@/assets/svg/projets.svg';
+
   const features = [{
-    title:"Hello World !",
-    desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis \
-            lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id \
-            porttitor erat, vitae dapibus velit. Praesent id felis tincidunt, \
-            efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt, \
-            suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor. \
-            Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam. \
-            Aenean faucibus neque id nibh facilisis auctor. ",
-    buttonText: "Click me !",
-    picture: "https://picsum.photos/600/400",
+    title: i18n.t("home.features.projects.title"),
+    desc: i18n.t("home.features.projects.desc"),
+    buttonText: i18n.t("home.features.projects.buttonText"),
+    picture: projectsSvg,
     link: "#"
   },{
     title:"Hello World !",
@@ -44,7 +43,7 @@
 
     <welcome/>
 
-    <intersection text="Lorem ipsum dolor sit amet" button-text="En savoir plus" button-link="#"/>
+    <intersection :text="i18n.t('home.contactMe')" :button-text="i18n.t('home.contactButton')" button-link="#"/>
 
     <presentation/>