Added text for project 1

Also moved projects definitions to their own component

src/assets/localization/en/localization.json

@@ -21,6 +21,23 @@
         "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"
       }
+    },
+    "projects":{
+      "title": "Projects",
+      "desc": "I'm always working on something ! Here is a list of all important projects I worked on :",
+      "project":{
+        "disblock":{
+          "title": "Disblock",
+          "desc": "Disblock is a project about a Discord bot. A large number of users want to customize their Discord servers with bots, but lacks the coding skills. Disblock is a way to assemble easily his own bot using blocks that can describe what to do, and when.",
+          "button_text": "See on Github"
+        }
+      },
+      "tags":{
+        "home": "On my free time",
+        "active": "Active",
+        "bugs_only": "Bug fixes only",
+        "archived": "Archived"
+      }
     }
   },
   "skills": {

src/components/home/libs/projectTag.vue

@@ -24,7 +24,7 @@
         background-color: v-bind(colour);
         width: fit-content;
         height: fit-content;
-        padding: 2px 16px;
+        padding: 2px 8px;
         border-radius: 8px;
     }
     p{

src/components/home/projects.vue

@@ -1,15 +1,15 @@
 <template>
   <div id="projects_summary">
       <div id="projects_summary_text">
-        <h1>Les projets que j'ai déjà fait</h1>
+        <h1>{{ $t("home.projects.title") }}</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis 
+        <p>{{ $t("home.projects.desc") }}</p>
-          lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id 
-          porttitor erat, vitae dapibus velit. Praesent id felis tincidunt.</p>
       </div>
 
       <div id="projects_holder">
 
-        <div v-for="(e,i) in props.projects" :key="i" class="project">
+        <div v-for="(e,i) in projctsInfo" :key="i" class="project">
+            
+            <h2>{{ e.title }}</h2>
             <div class="project_picture">
                 <img :src="e.picture">
             </div>
@@ -20,7 +20,7 @@
                 <article>
                     <p>{{ e.desc }}</p>
                 </article>
-            <a :href="e.buttonLink"><button class="button project_button">{{ e.buttonText }}</button></a>
+                <a :href="e.buttonLink" target="_blank"><button class="button project_button">{{ e.buttonText }}</button></a>
             </div>
         </div>
 
@@ -31,12 +31,29 @@
 <script setup>
     import projectTag from './libs/projectTag.vue';
 
-    const props = defineProps({
+    import disblockSvg from "@/assets/svg/projects/disblock.svg";
-        projects:{
+
-            type:Array,
+    import {useI18n} from 'vue-i18n';
-            required:true
+    const i18n = useI18n();
-        }
+
-    });
+    const tagsColours = {
+        home:'#8a1bc8',
+        active:'#598609',
+        bugs_only:'#7a781f',
+        archived: '#6c5e73'
+    };
+
+    const projctsInfo = [{
+        picture: disblockSvg,
+        title: i18n.t("home.projects.project.disblock.title"),
+        desc:i18n.t("home.projects.project.disblock.desc"),
+        buttonText:i18n.t("home.projects.project.disblock.button_text"),
+        buttonLink:"https://github.com/Disblock/WebApp",
+        tags:[
+            {title:i18n.t("home.projects.tags.home"), colour:tagsColours.home},
+            {title:i18n.t("home.projects.tags.bugs_only"), colour:tagsColours.bugs_only}
+        ]
+    }];
 </script>
 
 <style scoped>
@@ -74,6 +91,11 @@
         border-radius: 8px;
         border: 2px #EAEAEA solid;
     }
+    .project h2{
+        margin:0;
+        margin-top: 10px;
+        text-align: center;
+    }
     .project_picture{
         height: 200px;
         width: 95%;

src/views/HomeView.vue

@@ -8,14 +8,6 @@
   import {useI18n} from 'vue-i18n';
   const i18n = useI18n();
 
-  const projects_info = [{
-    picture:"https://picsum.photos/400/300",
-    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,",
-    buttonText:"Oui !",
-    buttonLink:"#",
-    tags:[{title:"School", colour:"purple"}]
-  }]
 </script>
 <!-- Want to config displayed text ? Have a look inside components !
  You may also want to check assets/localization files -->
@@ -31,7 +23,7 @@
 
     <intersection style="margin-top: 20px;" text="Lorem ipsum dolor sit amet" button-text="En savoir plus" button-link="#" />
 
-    <projects :projects="projects_info"/>
+    <projects/>
 
 </template>