Added svg pictures on skills page

src/assets/localization/en/localization.json

@@ -22,5 +22,14 @@
         "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>