Jonathan
6b698c5f58
- Add CLAUDE.md with project conventions and architecture notes
- Create Navbar (sticky, backdrop blur, mobile menu) and Footer
- Build homepage sections: Hero, FeaturedProjects, Skills, CurrentWork, CallToAction
- Add /projects, /about, and /contact pages
- Create reusable ProjectCard and Badge components
- Centralise project data in content/projects.json with featured flag
- Add class-based dark mode toggle (default dark, persisted to localStorage)
- Refactor globals.css: remove conflicting prefers-color-scheme media query
- Fix two-instance ThemeToggle sync bug in Navbar
- Fix key={index} anti-pattern in timeline, stale closure in setOpen
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="mx-auto flex min-h-[72vh] max-w-5xl flex-col items-center justify-center px-6 py-32 text-center">
|
|
|
|
{/* Eyebrow label */}
|
|
<div className="mb-10 flex items-center gap-4">
|
|
<span className="h-px w-10 bg-zinc-300 dark:bg-zinc-700" />
|
|
<span className="font-mono text-xs uppercase tracking-[0.2em] text-zinc-500">
|
|
Software Engineer
|
|
</span>
|
|
<span className="h-px w-10 bg-zinc-300 dark:bg-zinc-700" />
|
|
</div>
|
|
|
|
{/* Name */}
|
|
<h1 className="text-7xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-8xl">
|
|
Jonathan
|
|
</h1>
|
|
|
|
{/* Tagline */}
|
|
<p className="mt-6 max-w-md text-base leading-7 text-zinc-600 dark:text-zinc-400">
|
|
I build clean, fast web applications — focused on great user
|
|
experiences and solid engineering.
|
|
</p>
|
|
|
|
{/* Actions */}
|
|
<div className="mt-12 flex flex-wrap items-center justify-center gap-4">
|
|
<Link
|
|
href="/projects"
|
|
className="rounded-sm bg-zinc-900 px-8 py-3 text-sm font-semibold text-white transition-colors hover:bg-zinc-700 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200"
|
|
>
|
|
View Projects
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="rounded-sm border border-zinc-300 px-8 py-3 text-sm font-medium text-zinc-700 transition-colors hover:border-zinc-400 hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-900 dark:hover:text-white"
|
|
>
|
|
Contact Me
|
|
</Link>
|
|
</div>
|
|
|
|
</section>
|
|
)
|
|
}
|