<template>
  <section id="intro" class="Intro content full gap-default">
    <div class="intro-text flex-col gap-default">
      <h1 class="flex-col">
        <span class="greeting inline-flex-row">Moin. <Icon name="ph:hand-peace-duotone" mode="svg"/></span>
        <span class="my-name-wrapper">Ich bin <Highlight>Fiona</Highlight>.</span>
      </h1>
      <h2>
        Component
        <Highlight>&</Highlight>
        API Entwicklerin
      </h2>
      <p class="fulltext">
        Ich unterstütze Unternehmen dabei, ihre Daten von verschiedenen Endpunkten sauber aufzubereiten
        und anschließend in einer Webapplication schön zu verpacken.
      </p>
      <p class="fulltext">
        Mit über 20 Jahren Erfahrung in der Webentwicklung habe ich
        inzwischen so ziemlich jeden Stuff miterlebt.
      </p>
      <p class="fulltext">
        Egal, ob Komponenten, Schnittstellen oder Anbindung an Headless CMS.
        Ich biete dir genau das, was du brauchst, um eine individuelle WebApp in Fahrt zu bringen, deren Inhalte einfach zu verändern sind.
      </p>
      <Button class="cta" href="#skills">
        <Icon name="ph:lightbulb-duotone" size="1.5em" mode="svg"/>
        Fussel erklärt's dir
      </Button>
    </div>
    <div class="intro-img">
      <picture>
        <source width="750" height="866" media="(min-width: 431px)" srcset="/img/profile_big.webp"/>
        <img width="430" height="866" src="/img/profile_small.webp" alt="Bild von Fiona Urban"/>
      </picture>
    </div>
  </section>
</template>
<script setup lang="ts">
</script>