add: better a11y, nowrap for name

This commit is contained in:
webfussel 2024-08-20 13:21:31 +02:00
parent 297ebaa3c5
commit 15ce42b7de
3 changed files with 24 additions and 5 deletions

View file

@ -3,11 +3,11 @@
<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="highlight">Fiona </span><small>Urban</small><span class="dot">.</span></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>
<h3>
<h2>
Component <span class="highlight">&</span> API Entwicklerin
</h3>
</h2>
<p class="fulltext">
Ich helfe Unternehmen dabei, ihre Daten so richtig nice zusammen zu sammeln
und in wunderschöne Komponenten zu gießen.

View file

@ -23,7 +23,9 @@
</div>
<article class="z-2 card flex-col default-gap margin-top">
<h3>Keinen Bock auf Telen? Understandable.</h3>
<p>Dann schreib mir einfach gerne direkt eine E-Mail an <ClientOnly><a class="orange" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de</a></ClientOnly></p>
<p>Dann schreib mir einfach gerne direkt eine E-Mail an
<ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<img :src="mail" aria-hidden="true" alt="" /></a></ClientOnly>
</p>
<h3>Keine Kohle? Kommt vor.</h3>
<p>Meld dich trotzdem. Eventuell ist dein Projekt ja cool genug, dass ich dir da auch entsprechend entgegenkommen kann. :)</p>
</article>
@ -44,6 +46,7 @@
<script setup lang="ts">
import check from 'iconoir/icons/regular/double-check.svg'
import type { Person } from '#components'
import mail from 'iconoir/icons/regular/mail.svg'
const services = [
{