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>
39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
type ProjectCardProps = {
|
|
title: string
|
|
description: string
|
|
stack: string[]
|
|
href?: string
|
|
}
|
|
|
|
export default function ProjectCard({ title, description, stack, href }: ProjectCardProps) {
|
|
return (
|
|
<div className="group flex h-full flex-col rounded-lg border border-zinc-200 bg-zinc-50 p-6 shadow-sm shadow-black/5 transition-all hover:border-zinc-300 hover:shadow-md hover:shadow-black/10 dark:border-zinc-800 dark:bg-zinc-900 dark:shadow-black/40 dark:hover:border-zinc-600 dark:hover:shadow-black/50">
|
|
<h3 className="font-medium text-zinc-900 dark:text-white">{title}</h3>
|
|
<p className="mt-2 flex-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{description}</p>
|
|
|
|
<ul className="mt-5 flex flex-wrap gap-2">
|
|
{stack.map((tech) => (
|
|
<li
|
|
key={tech}
|
|
className="rounded-sm bg-zinc-200 px-2.5 py-1 font-mono text-xs text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
|
|
>
|
|
{tech}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{href && (
|
|
<Link
|
|
href={href}
|
|
className="mt-6 inline-flex items-center gap-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:hover:text-white"
|
|
>
|
|
View project
|
|
<span className="transition-transform group-hover:translate-x-0.5">→</span>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|