52 lines
2.7 KiB
Vue
52 lines
2.7 KiB
Vue
<template>
|
|
<section id="skills_easy" class="Skills content">
|
|
<h2>Jetzt mal ganz konkret.</h2>
|
|
<h3>In diesem Abschnitt jetzt mal ganz <span class="highlight">ohne Technik-Blabla</span>.</h3>
|
|
<div class="flex-col margin-top gap-default">
|
|
<article class="z-2 card flex-row gap-default" v-for="(skill, skillIndex) in skills" :class="[skillIndex % 2 && 'reverse']">
|
|
<img :src="skill.img" alt="" class="card-img z-4" />
|
|
<div class="flex-col gap-default">
|
|
<h3>{{skill.title}}</h3>
|
|
<main class="flex-col gap-sm">
|
|
<p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'margin-top bold']">{{t}}</p>
|
|
</main>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
const skills = [
|
|
{
|
|
img: 'https://picsum.photos/550/350.webp?random=1',
|
|
title: 'Das, was du sehen kannst',
|
|
text: [
|
|
'Die meisten Anwendungen haben eine grafische Benutzeroberfläche - die so genannte GUI. Wenn etwas graphisch ist, ' +
|
|
'dann bedeutet das auch natürlich, dass es sinnvoll dargestellt werden muss. Dafür verwenden wir kleine Bausteine, die wir Komponenten nennen.',
|
|
'Grundsätzlich lassen sich komplette Anwendungen und auch einfache Webseiten ziemlich cool über Komponenten aufbauen, sodass wir wiederkehrende Elemente ' +
|
|
'wie Buttons, Textabschnitte, Links oder Teaser immer wieder verwenden können - selbst wenn sich diese in ihren Details wie Farben oder Icons unterscheiden.',
|
|
'Diese Komponenten so zu entwickeln, dass sie wirklich flexibel sind und auch perfekt mit dem Design übereinstimmen ist gar nicht so einfach, denn oft sollten sie ' +
|
|
'auch mehr können als im Design kurzfristig ersichtlich ist.',
|
|
'Diese Voraussicht, für den Fall der Fälle vorzusorgen: Die gibt\'s bei mir dazu. Fussel-Ehrenwort.'
|
|
],
|
|
}, {
|
|
img: 'https://picsum.photos/550/350.webp?random=2',
|
|
title: 'Da, wo du eintragen kannst',
|
|
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.'
|
|
],
|
|
}, {
|
|
img: 'https://picsum.photos/550/350.webp?random=3',
|
|
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>
|