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>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import Badge from '@/components/Badge'
|
|
|
|
const skills = [
|
|
{
|
|
category: 'Programming',
|
|
items: ['TypeScript', 'JavaScript', 'Go', 'Python', 'SQL'],
|
|
},
|
|
{
|
|
category: 'Tools',
|
|
items: ['React', 'Next.js', 'Tailwind CSS', 'Node.js', 'PostgreSQL', 'Docker', 'Git'],
|
|
},
|
|
{
|
|
category: 'Focus Areas',
|
|
items: ['Web Performance', 'Developer Experience', 'API Design', 'UI Engineering'],
|
|
},
|
|
]
|
|
|
|
export default function Skills() {
|
|
return (
|
|
<section className="mx-auto max-w-5xl px-6 py-16">
|
|
<h2 className="mb-8 text-2xl font-semibold text-zinc-900 dark:text-white">Skills</h2>
|
|
<dl className="flex flex-col gap-6">
|
|
{skills.map(({ category, items }) => (
|
|
<div key={category} className="flex flex-col gap-3 sm:flex-row sm:gap-8">
|
|
<dt className="w-36 shrink-0 pt-0.5 text-sm text-zinc-500">{category}</dt>
|
|
<dd>
|
|
<ul className="flex flex-wrap gap-2">
|
|
{items.map((item) => (
|
|
<li key={item}>
|
|
<Badge label={item} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</section>
|
|
)
|
|
}
|