Added svg pictures on skills page

src/assets/localization/en/localization.json

@@ -1,26 +1,35 @@
 {
-    "home":{
+  "home":{
-      "greeting": "Hello ! I'm Kévin Taccoen !",
+    "greeting": "Hello ! I'm Kévin Taccoen !",
-      "occupation": {
+    "occupation": {
-        "ai":"AI enthusiast",
+      "ai":"AI enthusiast",
-        "fullstack":"Full-Stack Developer",
+      "fullstack":"Full-Stack Developer",
-        "student":"Master's degree student"
+      "student":"Master's degree student"
+    },
+    "presentationTitle":"Thanks for visiting !",
+    "presentationText": "Hi ! I'm Kévin Taccoen, a Computer Science student currently pursuing a Master's degree at <a href=\"\" target=\"_blank\" rel=\"noopener\">Opal Coast University</a>, France. I'm studying a lot about new technologies, and their potential to shape the Future.<br>Also often playing with Artificial Intelligence, and working on projects using my skills in full-stack development, software conception or data analysis.",
+    "contactMe": "Are you looking to send me a message ?",
+    "contactButton": "Contact",
+    "features": {
+      "projects":{
+        "title": "Always working on new and innovative things",
+        "desc": "Be it for study, work or on my free time, I'm always working on something new. As I love to see how those lines of code can enhance daily life, or make Science moving forward, I strive to always imagine, create and maintain useful things.",
+        "buttonText": "See all projects"
       },
-      "presentationTitle":"Thanks for visiting !",
+      "skills":{
-      "presentationText": "Hi ! I'm Kévin Taccoen, a Computer Science student currently pursuing a Master's degree at <a href=\"\" target=\"_blank\" rel=\"noopener\">Opal Coast University</a>, France. I'm studying a lot about new technologies, and their potential to shape the Future.<br>Also often playing with Artificial Intelligence, and working on projects using my skills in full-stack development, software conception or data analysis.",
+        "title": "Knowledge and Skills",
-      "contactMe": "Are you looking to send me a message ?",
+        "desc": "As part of my projects, I have to master a lot of different fields, like website creation, data analysis, artificial intelligence, or software creation.",
-      "contactButton": "Contact",
+        "buttonText": "More about skills"
-      "features": {
-        "projects":{
-          "title": "Always working on new and innovative things",
-          "desc": "Be it for study, work or on my free time, I'm always working on something new. As I love to see how those lines of code can enhance daily life, or make Science moving forward, I strive to always imagine, create and maintain useful things.",
-          "buttonText": "See all projects"
-        },
-        "skills":{
-          "title": "Knowledge and Skills",
-          "desc": "As part of my projects, I have to master a lot of different fields, like website creation, data analysis, artificial intelligence, or software creation.",
-          "buttonText": "More about skills"
-        }
       }
     }
+  },
+  "skills": {
+    "title": "Skills and knowledge",
+    "subtitle": "As I have worked on various topics, I learned a lot about different technologies. As years and tasks are going by, I always strive to learn more and make a good use of my capacities. Here are some example of fields I already have dealed with :",
+    "skills":{
+      "ai":{
+        "desc":"I'm spending a lot of time learning AI"
+      }
+    }
+  }
 }

src/views/SkillsView.vue

@@ -1,25 +1,47 @@
 <template>
     <Header/>
-    <h1 class="center">Skills</h1>
+    <h1 class="center">{{ $t("skills.title") }}</h1>
-    <p class="center">
+    <p class="center content">{{ $t("skills.subtitle") }}</p>
-      As I have worked on various topics, I learned a lot about different technologies. As years and tasks are going by, I always strive to learn more and make a good use of my capacities.
-    </p>
 
     <FactList v-for="(e,i) in skills" :key="i" :text="e.text" :buttonText="e.buttonText" :link="e.link" :picture="e.picture" class="factList"/>
   </template>
 
 <script setup>
+  import { useI18n } from 'vue-i18n';
+
   import Header from '@/components/header.vue';
   import FactList from '@/components/skills/factList.vue';
 
+  import aIsvg from '@/assets/svg/skills/AI.svg';
+  import analysisSvg from '@/assets/svg/skills/analysis.svg';
+  import devopsSvg from '@/assets/svg/skills/devops.svg';
+  import lowlevelSvg from '@/assets/svg/skills/lowlevel.svg';
+  import webSvg from '@/assets/svg/skills/web.svg';
+
+  const i18n = useI18n();
+
   const skills = [{
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ante turpis, mattis vel tellus nec, porttitor condimentum libero. Fusce ut neque magna.",
+    text: i18n.t("skills.skills.ai.desc"),
-    buttonText: "Click",
+    picture: aIsvg
-    picture: "https://picsum.photos/400/200"
   },{
     text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ante turpis, mattis vel tellus nec, porttitor condimentum libero. Fusce ut neque magna. ",
     buttonText: "Click me",
-    picture: "https://picsum.photos/50",
+    picture: webSvg,
+    link: "google.com"
+  },{
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ante turpis, mattis vel tellus nec, porttitor condimentum libero. Fusce ut neque magna. ",
+    buttonText: "Click me",
+    picture: lowlevelSvg,
+    link: "google.com"
+  },{
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ante turpis, mattis vel tellus nec, porttitor condimentum libero. Fusce ut neque magna. ",
+    buttonText: "Click me",
+    picture: devopsSvg,
+    link: "google.com"
+  },{
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ante turpis, mattis vel tellus nec, porttitor condimentum libero. Fusce ut neque magna. ",
+    buttonText: "Click me",
+    picture: analysisSvg,
     link: "google.com"
   }]
 </script>
@@ -29,10 +51,19 @@
     text-align: center;
   }
 
+  .content{
+    width:80%;
+    margin: auto;
+    margin-bottom: 20px;
+  }
+
   .factList{
     width: 60%;
     margin: auto;
     margin-top: 20px;
+    height: fit-content;
+    padding-top: 20px;
+    padding-bottom: 20px;
   }
   
 </style>