webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ADD: projects

Browse source
This commit is contained in:
webfussel 2024-05-21 10:41:00 +02:00
parent ba015d748b
commit e07c708ea8
56 changed files with 487 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

13
components/Skills/Skills.css
View file

@ -4,32 +4,19 @@
background-repeat: no-repeat;
& .skills-wrapper {
margin-top: 3rem;
display: flex;
gap: 3rem;
flex-wrap: wrap;
}
& article {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem;
background: var(--color-black);
border-radius: 20px;
min-width: 300px;
flex: 1;
& p:last-of-type {
margin-top: 2rem;
}
}
& .bottom {
margin-top: 3rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 3rem;
}
}

8
components/Skills/Skills.vue
View file

@ -3,15 +3,15 @@
<template>
<section class="Skills content">
<h2>Meine Expertise.</h2>
<div class="skills-wrapper">
<article class="z-2" v-for="skill in skills">
<div class="skills-wrapper margin-top default-gap">
<article class="z-2 flex-col default-gap" v-for="skill in skills">
<h3>{{skill.title}}</h3>
<main>
<p v-for="t in skill.text">{{t}}</p>
<p v-for="(t, i) in skill.text" :class="[i === skills.length - 1 && 'margin-top bold']">{{t}}</p>
</main>
</article>
</div>
<div class="bottom">
<div class="bottom flex-col margin-top default-gap">
<h3>Du brauchst was davon? Kein Ding.</h3>
<Button class="cta" label="Lass mal reden" />
</div>