From 26f774ad4cb2e2fd2a074023a000ec20c51061d0 Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Tue, 25 Mar 2025 17:44:36 +0100
Subject: [PATCH] New list component

No great name ideas came for this one
---
 src/components/skills/factList.vue | 76 ++++++++++++++++++++++++++++++
 src/views/SkillsView.vue           | 26 +++++++++-
 2 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 src/components/skills/factList.vue

diff --git a/src/components/skills/factList.vue b/src/components/skills/factList.vue
new file mode 100644
index 0000000..2a433fb
--- /dev/null
+++ b/src/components/skills/factList.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="fact">
+    <img :src="picture">
+    <article><p>{{ text }}</p></article>
+    <RouterLink v-if="link!='#'" class="router" :to="link"><button class="button">{{ buttonText }}</button></RouterLink>
+  </div>
+</template>
+
+<script setup>
+import { RouterLink } from 'vue-router';
+
+const props = defineProps({
+        text:{
+            type:String,
+            required:true
+        },
+        buttonText:{
+            type:String,
+            required:false,
+            default:undefined
+        },
+        link:{
+            type:String,
+            required:false,
+            default: "#"
+        },
+        picture:{
+            type:String,
+            required:true
+        }
+    });
+</script>
+
+<style scoped>
+    .fact{
+        background-color: #302c2c;
+        border: 2px solid #EAEAEA;
+        border-radius: 16px;
+        display: flex;
+        flex-direction: row;
+        flex-basis: content;
+        height: 200px;
+        /*justify-content: space-between;*/
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    img{
+        height: 150px;
+        width: 30%;
+        min-width: 100px;
+        margin-left: 20px;
+    }
+
+    article {
+        color: white;
+        padding: 0 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        max-width: 50%;
+    }
+
+    .router{
+        margin-right: 20px;
+        min-width: 50px;
+    }
+
+    .router button{
+        background-color: aqua;
+        font-size: 1.3em;
+        width: fit-content;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/views/SkillsView.vue b/src/views/SkillsView.vue
index 9befd75..3e57cdc 100644
--- a/src/views/SkillsView.vue
+++ b/src/views/SkillsView.vue
@@ -2,16 +2,38 @@
     <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>
+      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>
+
+    <FactList v-for="(e,i) in skills" :key="i" :text="e.text" :buttonText="e.buttonText" :link="e.link" :picture="e.picture" class="factList"/>
   </template>
 
 <script setup>
-    import Header from '@/components/header.vue';
+  import Header from '@/components/header.vue';
+  import FactList from '@/components/skills/factList.vue';
+
+  const skills = [{
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ante turpis, mattis vel tellus nec, porttitor condimentum libero. Fusce ut neque magna.",
+    buttonText: "Click",
+    picture: "https://picsum.photos/400/200"
+  },{
+    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ante turpis, mattis vel tellus nec, porttitor condimentum libero. Fusce ut neque magna. ",
+    buttonText: "Click me",
+    picture: "https://picsum.photos/50",
+    link: "google.com"
+  }]
 </script>
   
 <style scoped>
   .center{
     text-align: center;
   }
+
+  .factList{
+    width: 60%;
+    margin: auto;
+    margin-top: 20px;
+  }
+  
 </style>
   
\ No newline at end of file