New route and schoolDisplay.vue

src/assets/localization/en/localization.json

@@ -100,6 +100,11 @@
       }
     }
   },
+  "education": {
+    "title": "Education and certifications",
+    "subtitle": "The steps for my learning journey",
+    "introduction": "Before reaching my current level, I had a long time learning various concepts in some nice institutions who accepted me as a student. I'm really grateful towards all of them, as I wouldn't be like I am without their help."
+  },
   "contact": {
     "title": "Send me a message !",
     "subtitle": "Thanks for your interest ! If you want to contact me, the easiest way is by Email.",

src/assets/main.css

@@ -29,6 +29,10 @@ a:visited{
   text-align: center;
 }
 
+.subtitle{
+  font-size: 1.3em;
+}
+
 #app{
   height: 100%;
   margin: 0;

src/components/education/schoolDisplay.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="school_display">
+        <div class="school_picture">
+            <img :src="img"/>
+        </div>
+
+        <div class="school_info">
+            <p class="school_name">{{ name }}</p>
+            <p class="school_about">{{ desc }}</p>
+            <a :href="link" v-if="link!=undefined"><button class="button">Website</button></a>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    defineProps({
+        name:{
+            type:String,
+            required:true
+        },
+        desc:{
+            type:String,
+            required:true
+        },
+        img:{
+            type:String,
+            required:true
+        },
+        link:{
+            type:String,
+            required:false
+        }
+    })
+</script>
+
+<style scoped>
+    .school_display{
+        width: 100%; /*Should be in a <article> covering 80% of vw*/
+        max-width: 1000px;
+        background-color: rgb(61, 61, 61);
+        margin: auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        /*align-items: center;*/
+        justify-content: center;
+    }
+
+    .school_picture{
+        width: fit-content;
+        height: fit-content;
+        flex: 1 1 30%;
+        margin: 15px;
+        overflow: hidden;
+    }
+    .school_picture img{
+        width: 100%;
+    }
+
+    .school_info{
+        height: 80%;
+        width: 60%;
+        margin-left: 10px;
+        margin-right: 10px;
+        display: flex;
+        flex-direction: column;
+    }
+    .school_name{
+        font-size: 1.5em;
+        margin-top: 15px;
+        margin-bottom: 5px;
+    }
+    .school_about{
+        margin: 0;
+    }
+    .school_info button{
+        margin-top: 15px;
+        margin-block: 15px;
+        background-color: rgb(51, 143, 230);
+        font-size: 1.1em;
+        width: 150px;
+        color:black;
+    }
+</style>

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import BaseArticle from '@/views/BaseArticle.vue'
 import SkillsView from '@/views/SkillsView.vue'
+import EducationView from '@/views/EducationView.vue'
 import ContactView from '@/views/ContactView.vue'
 
 const router = createRouter({
@@ -22,6 +23,11 @@ const router = createRouter({
       name: 'skills',
       component: SkillsView
     },
+    {
+      path: '/education',
+      name: 'education',
+      component: EducationView
+    },
     {
       path: '/contact',
       name: 'contact',

src/views/EducationView.vue

@@ -0,0 +1,72 @@
+<template>
+    <Header/>
+    <h1 class="center">{{ $t("education.title") }}</h1>
+    <p class="center content subtitle">{{ $t("education.subtitle") }}</p>
+
+    <article>
+      <p>{{ $t("education.introduction") }}</p> 
+
+        <schoolDisplay name="My school" desc="Before reaching my current level, I had a long time learning various concepts in some nice institutions who accepted me as a student. I'm really grateful towards all of them, as I wouldn't be like I am without their help." 
+        img="https://picsum.photos/600/400"/>
+    </article>
+
+  </template>
+
+<script setup>
+  import { useI18n } from 'vue-i18n';
+
+  import Header from '@/components/header.vue';
+  import schoolDisplay from '@/components/education/schoolDisplay.vue';
+  import SkillsList from '@/components/skills/skillsList.vue';
+
+  const i18n = useI18n();
+
+  /*const skills = [{
+    title: i18n.t("skills.skills.ai.title"),
+    desc: i18n.t("skills.skills.ai.desc"),
+    picture: aIsvg
+  },{
+    title: i18n.t("skills.skills.web.title"),
+    desc: i18n.t("skills.skills.web.desc"),
+    buttonText: "Click me",
+    picture: webSvg,
+    link: "google.com"
+  },{
+    title: i18n.t("skills.skills.low_level.title"),
+    desc: i18n.t("skills.skills.low_level.desc"),
+    buttonText: "Click me",
+    picture: lowlevelSvg,
+    link: "google.com"
+  },{
+    title: i18n.t("skills.skills.devops.title"),
+    desc: i18n.t("skills.skills.devops.desc"),
+    buttonText: "Click me",
+    picture: devopsSvg,
+    link: "google.com"
+  },{
+    title: i18n.t("skills.skills.data.title"),
+    desc: i18n.t("skills.skills.data.desc"),
+    buttonText: "Click me",
+    picture: analysisSvg,
+    link: "google.com"
+  }]*/
+</script>
+  
+<style scoped>
+  .center{
+    text-align: center;
+  }
+
+  .content{
+    width:80%;
+    margin: auto;
+    margin-bottom: 20px;
+  }
+
+  article{
+    width: 80%;
+    margin: auto;
+  }
+  
+</style>
+