61 lines
2.5 KiB
Vue
61 lines
2.5 KiB
Vue
<style scoped src="./Skills.css"/>
|
|
|
|
<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 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>
|
|
<article class="tech-list z-2 card flex-col default-gap 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">
|
|
<li v-for="tech in technologies">
|
|
<Technology v-bind="tech" size="l"/>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
<div class="bottom flex-col margin-top default-gap">
|
|
<h3>Du brauchst was davon? Kein Ding.</h3>
|
|
<Button href="#services" class="cta" label="Lass mal reden" />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { gl, java, jetbrains, njs, nuxt, pcss, react, rust, ts, vitest, vue } from '~/Skills'
|
|
|
|
const technologies = [ts, pcss, vue, react, nuxt, njs, java, rust, vitest, gl, jetbrains]
|
|
|
|
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>
|