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

FIX: some texts and layouts for easy skill explanation

Browse source 
Improving site clarity
This commit is contained in:
webfussel 2025-02-14 14:13:20 +01:00
parent 9642496e5a
commit 9e3a9d38a0
9 changed files with 101 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

14
app/components/Skills.vue
View file

@ -2,26 +2,26 @@
<section id="skills" class="Skills content">
<h2>Meine Expertise.</h2>
<h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
<div class="skill-list margin-top default-gap">
<article class="z-2 card flex-col default-gap" v-for="skill in skills">
<div class="skill-list margin-top gap-default">
<article class="z-2 card flex-col gap-default" v-for="skill in skills">
<h3>{{skill.title}}</h3>
<main>
<p v-for="(t, i) in skill.text" :class="[i === skills.length - 1 && 'margin-top bold']">{{t}}</p>
<p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'margin-top bold']">{{t}}</p>
</main>
</article>
</div>
<article class="tech-list z-2 card flex-col default-gap margin-top">
<article class="tech-list z-2 card flex-col gap-default margin-top">
<h3>Technologien</h3>
<p>Neben den klassischen Webentwicklungsstandards JavaScript, HTML und CSS biete ich außerdem folgende Technologien.</p>
<ul class="default-gap">
<ul class="gap-default">
<li v-for="tech in technologies">
<Technology v-bind="tech" size="l"/>
</li>
</ul>
</article>
<div class="bottom flex-col margin-top default-gap">
<div class="bottom flex-col margin-top gap-default">
<h3>Manche von euch haben hier sicher kein Wort verstanden.</h3>
<Button href="#services" class="cta">
<Button href="#skills_easy" class="cta">
<span class="animate-up-down">
<Icon name="ph:caret-double-down-duotone" size="1.5em" mode="svg" />
</span>