<template>
  <section id="skills" class="Skills content">
    <h2>Meine Expertise.</h2>
    <h3>Dies sind meine <Highlight>Spezialgebiete</Highlight> - aber ich bin flexibel!</h3>
    <div class="skill-list margin-top gap-default">
      <Card v-for="skill in skills" :title="skill.title" titleTag="h3">
        <p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'bold']">{{t}}</p>
      </Card>
    </div>
    <Card title="Technologien" titleTag="h3" class="margin-top tech-list">
      <p>Neben den klassischen Webentwicklungsstandards JavaScript, HTML und CSS biete ich außerdem folgende Technologien.</p>
      <ul class="row gap-default margin-top-small">
        <li v-for="tech in technologies">
          <Technology v-bind="tech" size="l"/>
        </li>
      </ul>
    </Card>
    <div class="bottom flex-col margin-top gap-default">
      <h3>Manche von euch haben hier sicher kein Wort verstanden.</h3>
      <Button href="#skills_easy" class="cta">
        <span class="animate-up-down">
          <Icon name="ph:caret-double-down-duotone" size="1.5em" mode="svg" />
        </span>
        Für normale Menschen
      </Button>
    </div>
  </section>
</template>

<script setup lang="ts">

import { gl, njs, nuxt, pcss, react, rust, ts, vitest, vue, webstorm } from '~/utils/skills'

const technologies = [nuxt, ts, pcss, vue, react, njs, vitest, gl, webstorm, rust]

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>
