Build portfolio site with Next.js, Tailwind CSS, and dark mode

- 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>

components/Skills.tsx

@@ -0,0 +1,40 @@
+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>
+  )
+}