seo: add sr-only static role text so crawler sees content that animated typewriter hides

This commit is contained in:
Zac Gaetano 2026-04-30 21:52:47 -04:00
parent 014d6d8375
commit 2e070e2331

View file

@ -53,7 +53,7 @@ export default function Hero() {
<div className="absolute inset-0">
<Image
src="/images/photos/production-switcher.jpg"
alt="Production switcher panel"
alt="Production switcher panel in a broadcast control room"
fill
className="object-cover opacity-20"
priority
@ -87,7 +87,7 @@ export default function Hero() {
>
<Image
src="/images/wild-dragon-logo.png"
alt="Wild Dragon"
alt="Wild Dragon — Zachary Gaetano"
width={220}
height={62}
className="mx-auto logo-silhouette opacity-90"
@ -95,16 +95,21 @@ export default function Hero() {
/>
</div>
{/* Animated role tagline */}
{/* Animated role tagline — static version for crawlers */}
<div
className={`h-5 mb-10 transition-all duration-1000 delay-150 ease-out ${
loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
}`}
>
<p className="font-mono text-[10px] tracking-[0.35em] uppercase text-accent/80">
{/* Visible animated text */}
<p className="font-mono text-[10px] tracking-[0.35em] uppercase text-accent/80" aria-hidden="true">
{displayText}
<span className="animate-pulse ml-0.5 text-accent/40">|</span>
</p>
{/* Screen-reader / crawler accessible static version */}
<p className="sr-only">
{roles.join(" · ")}
</p>
</div>
{/* Name */}
@ -159,6 +164,7 @@ export default function Hero() {
{/* Scroll indicator */}
<a
href="#clients"
aria-label="Scroll to clients"
className={`absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 transition-all duration-1000 delay-[800ms] ease-out ${
loaded ? "opacity-100" : "opacity-0"
}`}