wf4/app/components/Intro.vue
webfussel 2ac710387e ADD: more icon consistency
More icons and better consistency
2025-02-21 20:45:29 +01:00

37 lines
No EOL
1.6 KiB
Vue

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