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>
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
const links = [
|
|
{
|
|
label: 'Email',
|
|
value: 'jonathan@example.com',
|
|
href: 'mailto:jonathan@example.com',
|
|
},
|
|
{
|
|
label: 'GitHub',
|
|
value: 'github.com/jonathan',
|
|
href: 'https://github.com/jonathan',
|
|
},
|
|
]
|
|
|
|
export default function ContactPage() {
|
|
return (
|
|
<div className="mx-auto max-w-3xl px-6 py-16">
|
|
<h1 className="mb-3 text-3xl font-semibold text-zinc-900 dark:text-white">Contact</h1>
|
|
<p className="mb-12 text-sm text-zinc-600 dark:text-zinc-400">
|
|
The best way to reach me is by email. I'm also on GitHub.
|
|
</p>
|
|
<ul className="divide-y divide-zinc-200 border-y border-zinc-200 dark:divide-zinc-800 dark:border-zinc-800">
|
|
{links.map(({ label, value, href }) => (
|
|
<li key={label} className="flex flex-col gap-1 py-5 sm:flex-row sm:items-center sm:gap-8">
|
|
<span className="w-24 shrink-0 text-sm text-zinc-500">{label}</span>
|
|
<a
|
|
href={href}
|
|
className="text-sm text-zinc-700 transition-colors hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
|
|
{...(href.startsWith('http') ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
|
|
>
|
|
{value}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|