From ba92749517b06a874a712d595a555b00ecab03ef Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Tue, 25 Mar 2025 00:45:22 +0100
Subject: [PATCH] Working on skills page

---
 src/assets/localization/en/localization.json |  2 +-
 src/components/home/feature.vue              | 10 +++++++++-
 src/components/home/featuresDisplay.vue      |  2 +-
 src/router/index.js                          |  6 ++++++
 src/views/SkillsView.vue                     | 17 +++++++++++++++++
 5 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 src/views/SkillsView.vue

diff --git a/src/assets/localization/en/localization.json b/src/assets/localization/en/localization.json
index ac1c3cf..1610a66 100644
--- a/src/assets/localization/en/localization.json
+++ b/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"
         }
       }
diff --git a/src/components/home/feature.vue b/src/components/home/feature.vue
index fdba0ea..cdf58a0 100644
--- a/src/components/home/feature.vue
+++ b/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>
diff --git a/src/components/home/featuresDisplay.vue b/src/components/home/featuresDisplay.vue
index 14c8eb5..bf1b861 100644
--- a/src/components/home/featuresDisplay.vue
+++ b/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>
 
diff --git a/src/router/index.js b/src/router/index.js
index 67eb262..fe37ca4 100644
--- a/src/router/index.js
+++ b/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',
diff --git a/src/views/SkillsView.vue b/src/views/SkillsView.vue
new file mode 100644
index 0000000..9befd75
--- /dev/null
+++ b/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>
+  
\ No newline at end of file