Kevin/website
1
0
Fork 0
mirror of https://github.com/LJ5O/website.git synced 2026-08-11 22:54:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

New list component

Browse Source 
No great name ideas came for this one
This commit is contained in:
LJ5O
2025-03-25 17:44:36 +01:00
parent ba92749517
commit 26f774ad4c
2 changed files with 100 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/SkillsView.vue
View File

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