60 lines
2.5 KiB
Vue
Executable file
60 lines
2.5 KiB
Vue
Executable file
<template>
|
|
<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 gap-default">
|
|
<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>
|
|
</Card>
|
|
</div>
|
|
<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 margin-top-small">
|
|
<li v-for="tech in technologies">
|
|
<Technology v-bind="tech" size="l"/>
|
|
</li>
|
|
</ul>
|
|
</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">
|
|
<span class="animate-up-down">
|
|
<Icon name="ph:caret-double-down-duotone" size="1.5em" mode="svg" />
|
|
</span>
|
|
Für normale Menschen
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { gl, njs, nuxt, pcss, react, rust, ts, vitest, vue, webstorm } from '~/utils/skills'
|
|
|
|
const technologies = [nuxt, ts, pcss, vue, react, njs, vitest, gl, webstorm, rust]
|
|
|
|
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 - mit Fusselgarantie.'
|
|
],
|
|
}
|
|
]
|
|
</script>
|