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>
2026-03-26 22:02:30 +01:00
parent 4fa9f280e6
commit 6b698c5f58
18 changed files with 628 additions and 82 deletions
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -13,10 +15,23 @@ const geistMono = Geist_Mono({
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "jonathan.dev",
+  description: "Personal portfolio",
 };

+// Runs before first paint — restores saved theme, defaults to dark
+const themeScript = `
+  (function() {
+    try {
+      if (localStorage.getItem('theme') === 'light') {
+        document.documentElement.classList.remove('dark');
+      } else {
+        document.documentElement.classList.add('dark');
+      }
+    } catch {}
+})();
+`;
+
 export default function RootLayout({
  children,
 }: Readonly<{
@@ -25,9 +40,17 @@ export default function RootLayout({
  return (
    <html
      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${geistSans.variable} ${geistMono.variable} dark h-full antialiased`}
+      suppressHydrationWarning
    >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body className="flex min-h-full flex-col bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
+        <Navbar />
+        <main className="flex-1">{children}</main>
+        <Footer />
+      </body>
    </html>
  );
 }