Working on skills page

src/assets/localization/en/localization.json

@@ -18,7 +18,7 @@
         },
         "skills":{
           "title": "Knowledge and Skills",
-          "desc": "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.",
+          "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"
         }
       }

src/components/home/feature.vue

@@ -8,12 +8,16 @@
         <article>
           <p>{{ props.desc }}</p>
         </article>
-        <button class="button feature_button">{{ props.buttonText }}</button>
+        <RouterLink :to="props.link">
+            <button @click="goToTop" class="button feature_button">{{ props.buttonText }}</button>
+        </RouterLink>
       </div>
     </div> <!-- Feature div -->
 </template>
 
 <script setup>
+    import { RouterLink } from 'vue-router';
+
     const props = defineProps({
         title:{
             type:String,
@@ -40,6 +44,10 @@
             required:true
         }
     });
+
+    function goToTop(){
+        window.scrollTo(0, 0);
+    }
 </script>
 
 <style scoped>

src/components/home/featuresDisplay.vue

@@ -30,7 +30,7 @@
         desc: i18n.t("home.features.skills.desc"),
         buttonText: i18n.t("home.features.skills.buttonText"),
         picture: skillsSvg,
-        link: "#"
+        link: "skills"
     }];
 </script>
 

src/router/index.js

@@ -1,6 +1,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'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -15,6 +16,11 @@ const router = createRouter({
       name: 'knowledge',
       component: BaseArticle
     },
+    {
+      path: '/skills',
+      name: 'skills',
+      component: SkillsView
+    },
     {
       path: '/about',
       name: 'about',

src/views/SkillsView.vue

@@ -0,0 +1,17 @@
+<template>
+    <Header/>
+    <h1 class="center">Skills</h1>
+    <p class="center">
+      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.</p>
+  </template>
+
+<script setup>
+    import Header from '@/components/header.vue';
+</script>
+  
+<style scoped>
+  .center{
+    text-align: center;
+  }
+</style>
+