47 lines
1.9 KiB
Vue
47 lines
1.9 KiB
Vue
<style scoped src="./Skills.css"/>
|
|
|
|
<template>
|
|
<section class="Skills content">
|
|
<h2>Meine Expertise.</h2>
|
|
<h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
|
|
<div class="skills-wrapper margin-top default-gap">
|
|
<article class="z-2 card flex-col default-gap" 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>
|
|
</main>
|
|
</article>
|
|
</div>
|
|
<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>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const skills = [
|
|
{
|
|
title: 'Komponenten',
|
|
text: [
|
|
'Komponenten sind die Teile in deiner Applikation, die alles ansehnlich machen.',
|
|
'Mit sauber implementierten, responsiven Bausteinen kannst du deine Seite gut Strukturieren, Daten sauber darstellen und den User einspannen.',
|
|
'Vom kleinen Button bis hin zur Umfangreichen Tabelle bau ich dir (fast) alles.'
|
|
],
|
|
}, {
|
|
title: 'APIs',
|
|
text: [
|
|
'Du hast Daten in einer Datenbank liegen, aber keine Ahnung, wie du da gescheit rankommen sollst?',
|
|
'Liegen deine Daten eventuell sogar verstreut an mehreren Orten, über Datenbanken, Dateien und anderen Storagemöglichkeiten verteilt?',
|
|
'Kein Ding. Ich bau dir eine Schnittstelle, die alles easy zusammenträgt.'
|
|
],
|
|
}, {
|
|
title: 'Headless CMS',
|
|
text: [
|
|
'Wenn man ein Headless CMS anbinden will, dann verknüpft das Komponenten und APIs.',
|
|
'Für eine saubere und dynamische Einbindung reicht die Library, die euch vom Hersteller zur Verfügung gestellt wird, oft nicht aus.',
|
|
'Übersichtliche Projektstruktur und saubere Auflösung der Daten - das gibt\'s bei mir.'
|
|
],
|
|
}
|
|
]
|
|
</script>
|