New route and schoolDisplay.vue

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>
+