feat(portfolio): redesign landing page sections and navv bar

Author: marcus

.impeccable.md

@@ -0,0 +1,17 @@
+## Design Context
+
+### Users
+This portfolio serves three audiences at once: recruiters scanning for clear evidence of capability, clients evaluating taste and execution quality, and engineering peers assessing technical depth. The landing page should help each audience quickly understand Marcus as someone who can both ship production systems and shape polished frontend experiences.
+
+### Brand Personality
+Modern, creative, attractive. The interface should project sharp competence first, then reveal creative range through layout, typography, and interaction detail. It should feel intentional, contemporary, and confidently designed rather than playful for its own sake.
+
+### Aesthetic Direction
+Lean into an editorial-meets-technical visual language: strong typography, asymmetrical compositions, warm amber accents, cool supporting tones, and tactile surface treatment that feels custom rather than generated. Support both light and dark themes. The work should explicitly avoid generic AI-generated aesthetics, especially repetitive card grids, default gradients, and safe templated compositions.
+
+### Design Principles
+1. Lead with competence: every section should communicate clarity, credibility, and production readiness before decoration.
+2. Show creative range through composition: use asymmetry, scale shifts, and varied visual rhythm instead of repetitive modules.
+3. Keep the interface unmistakably authored: avoid anything that looks like stock AI portfolio output.
+4. Let typography do the heavy lifting: use the existing display type confidently and preserve a clear reading hierarchy.
+5. Use motion and accent color sparingly but deliberately: every flourish should reinforce craft, not distract from it.

app/components/MobileMenu.tsx

@@ -4,56 +4,95 @@ import { Camera, CircleUserRound, FolderKanban, Newspaper, X } from "lucide-reac
 import Link from "next/link";
 import Logo from "./Logo";
 
+const navItems = [
+  {
+    title: "About",
+    href: "/about",
+    icon: CircleUserRound,
+  },
+  {
+    title: "Projects",
+    href: "/projects",
+    icon: FolderKanban,
+  },
+  {
+    title: "Blog",
+    href: "/blog",
+    icon: Newspaper,
+  },
+  {
+    title: "Photos",
+    href: "/photos",
+    icon: Camera,
+  },
+];
+
 export default function MobileMenu() {
-  const data = [
-    {
-      title: "About",
-      href: "/about",
-      icon: CircleUserRound,
-    },
-    {
-      title: "Projects",
-      href: "/projects",
-      icon: FolderKanban,
-    },
-    {
-      title: "Blog",
-      href: "/blog",
-      icon: Newspaper,
-    },
-    {
-      title: "Photos",
-      href: "/photos",
-      icon: Camera,
-    },
-  ];
   return (
-    <div>
-      <div className="w-full flex items-center justify-between text-sm py-6 md:px-16 px-6 border-b z-30">
-        <Link href={"/"}>
+    <div className="flex min-h-screen flex-col">
+      <div className="flex items-center justify-between border-b border-border/70 px-6 py-5">
+        <Link href="/" className="flex items-center gap-3">
           <Logo />
         </Link>
-        <SheetClose>
-          <Button variant="outline" size="icon" className="rounded-full w-10 h-10">
+
+        <SheetClose asChild>
+          <Button variant="outline" size="icon" className="h-10 w-10 rounded-full">
             <X />
           </Button>
         </SheetClose>
       </div>
 
-      <div className="grid gap-4 p-4">
-        {data.map((item) => {
-          return (
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-x-0 top-0 h-[28rem] opacity-90"
+        style={{
+          background:
+            "radial-gradient(circle at 18% 12%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 28%), radial-gradient(circle at 82% 18%, color-mix(in oklch, var(--secondary) 14%, transparent), transparent 28%)",
+        }}
+      />
+
+      <div className="relative flex flex-1 flex-col justify-between px-6 py-8">
+        <div className="space-y-3">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+
+            return (
+              <SheetClose asChild key={item.href}>
+                <Link
+                  href={item.href}
+                  prefetch={false}
+                  className="group flex items-center justify-between border-b border-border/65 py-4"
+                >
+                  <div className="flex items-center gap-3">
+                    <span className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-border/70 bg-background/70 text-muted-foreground transition-colors group-hover:text-foreground">
+                      <Icon className="h-5 w-5" />
+                    </span>
+                    <span className="font-incognito text-[2rem] leading-none tracking-[-0.03em]">
+                      {item.title}
+                    </span>
+                  </div>
+                  <span className="text-[0.72rem] uppercase tracking-[0.22em] text-muted-foreground transition-colors group-hover:text-foreground">
+                    Open
+                  </span>
+                </Link>
+              </SheetClose>
+            );
+          })}
+        </div>
+
+        <div className="space-y-4 border-t border-border/65 pt-6">
+          <p className="max-w-sm text-sm leading-7 text-muted-foreground">
+            Browse selected work, writing, and the rest of the portfolio from here.
+          </p>
+          <SheetClose asChild>
             <Link
-              key={item.href}
-              href={item.href}
-              className="font-incognito text-sm font-medium flex gap-2 items-center"
-              prefetch={false}
+              href="#contact"
+              className="inline-flex items-center gap-2 text-[0.78rem] uppercase tracking-[0.22em] text-primary"
             >
-              <item.icon aria-hidden="true" />
-              {item.title}
+              Contact
             </Link>
-          );
-        })}
+          </SheetClose>
+        </div>
       </div>
     </div>
   );

app/components/Navbar.tsx

@@ -1,47 +1,33 @@
-// import Logo from "@/public/logo.png";
-import Link from "next/link";
-import Theme from "./Theme";
-// import UnmountStudio from "./Unmount";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { MenuIcon } from "lucide-react";
+import Link from "next/link";
 import Logo from "./Logo";
 import MobileMenu from "./MobileMenu";
+import Theme from "./Theme";
 
-export default function Navbar() {
-  const data = [
-    {
-      title: "About",
-      href: "/about",
-    },
-    {
-      title: "Projects",
-      href: "/projects",
-    },
-    {
-      title: "Blog",
-      href: "/blog",
-    },
-    {
-      title: "Photos",
-      href: "/photos",
-    },
-  ];
+const navItems = [
+  { title: "About", href: "/about" },
+  { title: "Projects", href: "/projects" },
+  { title: "Blog", href: "/blog" },
+  { title: "Photos", href: "/photos" },
+];
 
+export default function Navbar() {
   return (
-    <header className="flex justify-center items-center fixed top-3 w-full z-50 px-6">
-      <div className="w-full max-w-6xl mx-auto items-center justify-between flex gap-1 p-2 border dark:border-white/20 border-black/20 rounded-lg bg-background/80 backdrop-blur-lg supports-[backdrop-filter]:bg-background/30 shadow-lg">
-        <Link href="/">
+    <header className="pointer-events-none fixed inset-x-0 top-0 z-50 px-4 pt-4 md:px-6 md:pt-5">
+      <div className="pointer-events-auto mx-auto flex w-full max-w-6xl items-center justify-between gap-4 rounded-[1.7rem] border border-border/70 bg-background/88 px-4 py-3 shadow-[0_10px_40px_rgba(0,0,0,0.08)] backdrop-blur-xl supports-[backdrop-filter]:bg-background/72 md:px-5">
+        <Link href="/" className="flex min-w-0 items-center gap-3">
           <Logo />
         </Link>
 
-        <nav className="md:block hidden">
-          <ul className="flex items-center gap-x-8">
-            {data.map((link, id) => (
-              <li key={id}>
+        <nav className="hidden md:block">
+          <ul className="flex items-center gap-2 px-2 py-1.5">
+            {navItems.map((link) => (
+              <li key={link.href}>
                 <Link
                   href={link.href}
-                  className="font-incognito dark:text-white duration-300 text-base"
+                  className="inline-flex rounded-full px-4 py-2 text-[0.78rem] uppercase tracking-[0.22em] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
                 >
                   {link.title}
                 </Link>
@@ -50,15 +36,23 @@ export default function Navbar() {
           </ul>
         </nav>
 
-        <div className="flex items-center gap-4 sm:gap-0">
-          <Theme />
+        <div className="flex items-center gap-2">
+          <div className="shrink-0">
+            <Theme />
+          </div>
+
           <Sheet>
             <SheetTrigger asChild>
-              <Button variant="outline" size="icon" className="rounded-full w-10 h-10 md:hidden">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-10 w-10 rounded-full md:hidden"
+                aria-label="Open menu"
+              >
                 <MenuIcon />
               </Button>
             </SheetTrigger>
-            <SheetContent className="w-screen">
+            <SheetContent className="w-screen border-none bg-background/96 p-0 shadow-none">
               <MobileMenu />
             </SheetContent>
           </Sheet>

app/globals.css

@@ -155,7 +155,7 @@ html {
 }
 
 body {
-  background-image: url("../public/noise.png");
+  /* background-image: url("../public/noise.png"); */
   overflow-x: hidden !important;
 }