From 7f6faaa0b3d01cfd0bd55430893162ada757c5ba Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Tue, 25 Mar 2025 19:52:15 +0100
Subject: [PATCH] Added title on list component

---
 src/assets/localization/en/localization.json |  1 +
 src/components/skills/factList.vue           | 22 ++++++++++++++++----
 src/views/SkillsView.vue                     | 17 +++++++++------
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/assets/localization/en/localization.json b/src/assets/localization/en/localization.json
index 4a66ba3..804617b 100644
--- a/src/assets/localization/en/localization.json
+++ b/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"
       }
     }
diff --git a/src/components/skills/factList.vue b/src/components/skills/factList.vue
index 2a433fb..591cd83 100644
--- a/src/components/skills/factList.vue
+++ b/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{
diff --git a/src/views/SkillsView.vue b/src/views/SkillsView.vue
index dc49c5b..f3e3175 100644
--- a/src/views/SkillsView.vue
+++ b/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"