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

ADD: Components

Browse source 
Teaser, Card
This commit is contained in:
webfussel 2025-05-29 13:11:15 +02:00
parent 8943512328
commit c8e4bf4a14
8 changed files with 127 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/components/Section/Skills.vue
View file

@ -3,20 +3,18 @@
<h2>Meine Expertise.</h2>
<h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
<div class="skill-list margin-top gap-default">
<article class="z-2 card flex-col gap-sm" v-for="skill in skills">
<h3>{{skill.title}}</h3>
<Card v-for="skill in skills" :title="skill.title" titleTag="h3">
<p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'bold']">{{t}}</p>
</article>
</Card>
</div>
<article class="tech-list z-2 card flex-col gap-default margin-top">
<h3>Technologien</h3>
<Card title="Technologien" titleTag="h3" class="margin-top">
<p>Neben den klassischen Webentwicklungsstandards JavaScript, HTML und CSS biete ich außerdem folgende Technologien.</p>
<ul class="gap-default">
<ul class="gap-default margin-top-small">
<li v-for="tech in technologies">
<Technology v-bind="tech" size="l"/>
</li>
</ul>
</article>
</Card>
<div class="bottom flex-col margin-top gap-default">
<h3>Manche von euch haben hier sicher kein Wort verstanden.</h3>
<Button href="#skills_easy" class="cta">