WildDragonLLC/wilddragon-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Zac Gaetano 2026-04-30 21:52:47 -04:00
parent 014d6d8375
commit 2e070e2331
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Hero.tsx
View file

@ -53,7 +53,7 @@ export default function Hero() {
<div className="absolute inset-0"> <div className="absolute inset-0">
<Image <Image
src="/images/photos/production-switcher.jpg" src="/images/photos/production-switcher.jpg"
alt="Production switcher panel" alt="Production switcher panel in a broadcast control room"
fill fill
className="object-cover opacity-20" className="object-cover opacity-20"
priority priority
@ -87,7 +87,7 @@ export default function Hero() {
> >
<Image <Image
src="/images/wild-dragon-logo.png" src="/images/wild-dragon-logo.png"
alt="Wild Dragon" alt="Wild Dragon — Zachary Gaetano"
width={220} width={220}
height={62} height={62}
className="mx-auto logo-silhouette opacity-90" className="mx-auto logo-silhouette opacity-90"
@ -95,16 +95,21 @@ export default function Hero() {
/> />
</div> </div>
{/* Animated role tagline */} {/* Animated role tagline — static version for crawlers */}
<div <div
className={`h-5 mb-10 transition-all duration-1000 delay-150 ease-out ${ className={`h-5 mb-10 transition-all duration-1000 delay-150 ease-out ${
loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6" 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} {displayText}
<span className="animate-pulse ml-0.5 text-accent/40">|</span> <span className="animate-pulse ml-0.5 text-accent/40">|</span>
</p> </p>
{/* Screen-reader / crawler accessible static version */}
<p className="sr-only">
{roles.join(" · ")}
</p>
</div> </div>
{/* Name */} {/* Name */}
@ -159,6 +164,7 @@ export default function Hero() {
{/* Scroll indicator */} {/* Scroll indicator */}
<a <a
href="#clients" 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 ${ 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" loaded ? "opacity-100" : "opacity-0"
}`} }`}