adding appearance toggle (light/dark mode)

app/page.tsx

@@ -27,6 +27,7 @@ import Link from "next/link";
 import React, { useMemo, useState } from "react";
 import { site } from "@/content";
 import { openCookieBanner } from "@/components/CookieBanner";
+import ThemeToggle from "@/components/ThemeToggle";
 
 // Type for the mouse-pointer position used to move the background glow.
 type PointerState = { x: number; y: number };
@@ -212,15 +213,19 @@ export default function HomePage() {
                 Contact
                 <span aria-hidden="true">→</span>
               </a>
+              <ThemeToggle />
             </nav>
 
-            {/* Mobile-only Contact pill — replaces the full nav on small screens */}
-            <a
-              href="#contact"
-              className="inline-flex items-center rounded-full border border-[var(--border-strong)] px-3 py-1.5 text-xs text-[var(--text)] transition-colors hover:border-[var(--accent)] hover:text-[var(--accent)] sm:hidden"
-            >
-              Contact
-            </a>
+            {/* Mobile controls — simplified for smaller screens */}
+            <div className="flex items-center gap-2 sm:hidden">
+              <ThemeToggle className="text-xs" />
+              <a
+                href="#contact"
+                className="inline-flex items-center rounded-full border border-[var(--border-strong)] px-3 py-1.5 text-xs text-[var(--text)] transition-colors hover:border-[var(--accent)] hover:text-[var(--accent)]"
+              >
+                Contact
+              </a>
+            </div>
           </div>
         </header>