<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>
