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

FIX: mpa, nuxt4 future, improvements in intro and services

Browse source 
Added mpa support, nuxt4 future compatibility, improvements in intro and services
This commit is contained in:
webfussel 2025-02-12 13:18:55 +01:00
parent 078d4bfd82
commit 9642496e5a
35 changed files with 324 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

59
components/Skills.vue
View file

@ -1,59 +0,0 @@
<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, webstorm, njs, nuxt, pcss, react, rust, ts, vitest, vue } from '~/Skills'
const technologies = [nuxt, ts, pcss, vue, react, njs, vitest, gl, webstorm]
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>