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