Added title on list component

src/assets/localization/en/localization.json

@@ -28,6 +28,7 @@
     "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":{
+        "title": "Artificial Intelligence",
         "desc":"I'm spending a lot of time learning AI"
       }
     }

src/components/skills/factList.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="fact">
     <img :src="picture">
-    <article><p>{{ text }}</p></article>
+    <article>
+        <h2>{{ title }}</h2>
+        <p>{{ desc }}</p>
+    </article>
     <RouterLink v-if="link!='#'" class="router" :to="link"><button class="button">{{ buttonText }}</button></RouterLink>
   </div>
 </template>
@@ -10,7 +13,11 @@
 import { RouterLink } from 'vue-router';
 
 const props = defineProps({
-        text:{
+        title:{
+            type:String,
+            required:true
+        },
+        desc:{
             type:String,
             required:true
         },
@@ -53,13 +60,20 @@ const props = defineProps({
         margin-left: 20px;
     }
 
-    article {
+    article{
         color: white;
         padding: 0 20px;
         display: flex;
+        flex-direction: column;
         justify-content: center;
-        align-items: center;
+        /*align-items: center;*/
         max-width: 50%;
+        gap: 10px;
+    }
+
+    article p, article h2{
+        margin: 0;
+        text-align: left;
     }
 
     .router{

src/views/SkillsView.vue

@@ -3,7 +3,7 @@
     <h1 class="center">{{ $t("skills.title") }}</h1>
     <p class="center content">{{ $t("skills.subtitle") }}</p>
 
-    <FactList v-for="(e,i) in skills" :key="i" :text="e.text" :buttonText="e.buttonText" :link="e.link" :picture="e.picture" class="factList"/>
+    <FactList v-for="(e,i) in skills" :key="i" :title="e.title" :desc="e.desc" :buttonText="e.buttonText" :link="e.link" :picture="e.picture" class="factList"/>
   </template>
 
 <script setup>
@@ -21,25 +21,30 @@
   const i18n = useI18n();
 
   const skills = [{
-    text: i18n.t("skills.skills.ai.desc"),
+    title: i18n.t("skills.skills.ai.title"),
+    desc: i18n.t("skills.skills.ai.desc"),
     picture: aIsvg
   },{
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ante turpis, mattis vel tellus nec, porttitor condimentum libero. Fusce ut neque magna. ",
+    title:"A",
+    desc: "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: 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. ",
+    title:"A",
+    desc: "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. ",
+    title:"A",
+    desc: "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. ",
+    title:"A",
+    desc: "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"