<template>
  <section id="intro" class="Intro content full default-gap">
    <div class="intro-text flex-col default-gap">
      <h1 class="flex-col">
        <span class="greeting">Moin. </span>
        <span class="my-name-wrapper">Ich bin <span class="nowrap"><span class="highlight">Fiona </span><small>Urban</small><span class="dot">.</span></span></span>
      </h1>
      <h2>
        Component <span class="highlight">&</span> API Entwicklerin
      </h2>
      <p class="fulltext">
        Ich unterstütze Unternehmen dabei, ihre Daten so richtig nice zusammen zu sammeln
        und in wunderschöne Komponenten zu gießen.
      </p>
      <p class="fulltext">
        Mit über 20 Jahren Erfahrung in der Webentwicklung habe ich
        inzwischen so ziemlich jeden Stuff miterlebt.
      </p>
      <p class="fulltext">
        Du brauchst großartige Komponenten und saubere Schnittstellen?
      </p>
      <Button href="#services" class="cta" label="Lass mal reden" />
    </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>
