<style scoped src="./Skills.css"/>

<template>
  <section class="Skills content">
    <h2>Meine Expertise.</h2>
    <div class="skills-wrapper">
      <article class="z-2" v-for="skill in skills">
        <h3>{{skill.title}}</h3>
        <main>
          <p v-for="t in skill.text">{{t}}</p>
        </main>
      </article>
    </div>
    <div class="bottom">
      <h3>Du brauchst was davon? Kein Ding.</h3>
      <Button class="cta" label="Lass mal reden" />
    </div>
  </section>
</template>

<script setup lang="ts">
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 Anbindung',
    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>
