fix: optimize CSS

components/Skills.vue

@@ -0,0 +1,59 @@
+<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>