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

SEO/a11y: logo links to / instead of #, use Next Link for client-side routing

Browse source
This commit is contained in:
Zac Gaetano 2026-05-04 00:02:15 -04:00
parent 9cc2513b63
commit 24b0842a6e
1 changed files with 52 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/components/Navigation.tsx
View file

@ -3,11 +3,13 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Menu, X } from "lucide-react"; import { Menu, X } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
const navLinks = [ const navLinks = [
{ href: "#about", label: "About" }, { href: "/#about", label: "About" },
{ href: "#projects", label: "Projects" }, { href: "/services", label: "Services" },
{ href: "#contact", label: "Contact" }, { href: "/#projects", label: "Projects" },
{ href: "/#contact", label: "Contact" },
]; ];
export default function Navigation() { export default function Navigation() {
@ -30,7 +32,7 @@ export default function Navigation() {
}`} }`}
> >
<div className="max-w-6xl mx-auto px-6 flex items-center justify-between"> <div className="max-w-6xl mx-auto px-6 flex items-center justify-between">
<a href="#" className="flex items-center gap-3" aria-label="Wild Dragon — back to top"> <Link href="/" className="flex items-center gap-3" aria-label="Wild Dragon — home">
<Image <Image
src="/images/dragon-mark.png" src="/images/dragon-mark.png"
alt="Wild Dragon" alt="Wild Dragon"
@ -45,22 +47,33 @@ export default function Navigation() {
> >
Wild Dragon Wild Dragon
</span> </span>
</a> </Link>
{/* Desktop nav */} {/* Desktop nav */}
<div className="hidden md:flex items-center gap-8" role="list"> <div className="hidden md:flex items-center gap-8">
{navLinks.map((link) => ( {navLinks.map((link) =>
<a link.href.startsWith("/#") ? (
key={link.href} <a
href={link.href} key={link.href}
role="listitem" href={link.href}
className={`text-sm font-medium transition-colors hover:text-accent ${ className={`text-sm font-medium transition-colors hover:text-accent ${
scrolled ? "text-muted" : "text-white/80" scrolled ? "text-muted" : "text-white/80"
}`} }`}
> >
{link.label} {link.label}
</a> </a>
))} ) : (
<Link
key={link.href}
href={link.href}
className={`text-sm font-medium transition-colors hover:text-accent ${
scrolled ? "text-muted" : "text-white/80"
}`}
>
{link.label}
</Link>
)
)}
</div> </div>
{/* Mobile toggle */} {/* Mobile toggle */}
@ -87,20 +100,28 @@ export default function Navigation() {
<div <div
id="mobile-menu" id="mobile-menu"
className="md:hidden bg-white border-t border-neutral-200 px-6 py-4" className="md:hidden bg-white border-t border-neutral-200 px-6 py-4"
role="menu"
aria-label="Mobile navigation"
> >
{navLinks.map((link) => ( {navLinks.map((link) =>
<a link.href.startsWith("/#") ? (
key={link.href} <a
href={link.href} key={link.href}
role="menuitem" href={link.href}
onClick={() => setMobileOpen(false)} onClick={() => setMobileOpen(false)}
className="block py-3 text-sm font-medium text-muted hover:text-primary transition-colors" className="block py-3 text-sm font-medium text-muted hover:text-primary transition-colors"
> >
{link.label} {link.label}
</a> </a>
))} ) : (
<Link
key={link.href}
href={link.href}
onClick={() => setMobileOpen(false)}
className="block py-3 text-sm font-medium text-muted hover:text-primary transition-colors"
>
{link.label}
</Link>
)
)}
</div> </div>
)} )}
</nav> </nav>