2026 Redesign (#2531)

components/layout/footer.tsx

@@ -1,54 +1,26 @@
 import { env } from "@/lib/env";
-import { HeartIcon } from "lucide-react";
 import Link from "@/components/link";
-import { NextjsIcon } from "@/components/icons";
-import { cn } from "@/lib/utils";
 import siteConfig from "@/lib/config/site";
 
-const Footer = ({ className, ...rest }: React.ComponentProps<"footer">) => {
+const Footer = () => {
   return (
-    <footer
-      className={cn("text-foreground/85 text-[0.8rem] leading-loose md:flex md:flex-row md:justify-between", className)}
-      {...rest}
-    >
-      <div>
-        Content{" "}
-        <Link href="/license" prefetch={false} className="text-foreground/85 hover:no-underline">
-          licensed under {siteConfig.license}
-        </Link>
-        ,{" "}
-        <Link
-          href="/previously"
-          prefetch={false}
-          title="Previously on..."
-          className="text-foreground/85 hover:no-underline"
-        >
-          {siteConfig.copyrightYearStart}
-        </Link>{" "}
-        – 2025.
-      </div>
-
-      <div>
-        Made with{" "}
-        <HeartIcon className="animate-heartbeat stroke-destructive fill-destructive mx-px inline size-4 align-text-top" />{" "}
-        and{" "}
-        <Link
-          href="https://nextjs.org/"
-          title="Powered by Next.js"
-          aria-label="Next.js"
-          className="text-foreground/85 hover:text-foreground/60 hover:no-underline"
-        >
-          <NextjsIcon className="mx-px inline size-4 align-text-top" />
-        </Link>
-        .{" "}
-        <Link
-          href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}`}
-          title="View Source on GitHub"
-          className="border-muted-foreground text-foreground/85 hover:border-muted-foreground/60 border-b-1 pb-0.5 hover:no-underline"
-        >
-          View source.
-        </Link>
-      </div>
+    <footer className="text-muted-foreground mt-8 w-full py-6 text-center text-[13px] leading-loose">
+      Content{" "}
+      <Link href="/license" prefetch={false}>
+        licensed under {siteConfig.license}
+      </Link>
+      ,{" "}
+      <Link href="/previously" prefetch={false} title="Previously on...">
+        {siteConfig.copyrightYearStart}
+      </Link>{" "}
+      – 2026.{" "}
+      <Link
+        href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}`}
+        title="View Source on GitHub"
+        className="font-medium underline underline-offset-4"
+      >
+        View source.
+      </Link>
     </footer>
   );
 };

components/layout/header.tsx

@@ -1,36 +1,90 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "@/components/link";
+import Button from "@/components/ui/button";
+import Separator from "@/components/ui/separator";
 import Menu from "@/components/layout/menu";
+import { GitHubIcon } from "@/components/icons";
 import { cn } from "@/lib/utils";
+import authorConfig from "@/lib/config/author";
 import siteConfig from "@/lib/config/site";
+import { MoonIcon, SunIcon } from "lucide-react";
 
 import avatarImg from "@/app/avatar.jpg";
 
-const Header = ({ className, ...rest }: React.ComponentProps<"header">) => {
-  return (
-    <header className={cn("flex items-center justify-between", className)} {...rest}>
-      <Link
-        href="/"
-        rel="author"
-        aria-label={siteConfig.name}
-        className="hover:text-primary text-foreground/85 flex shrink-0 items-center hover:no-underline"
-      >
-        <Image
-          src={avatarImg}
-          alt={`Photo of ${siteConfig.name}`}
-          className="border-ring/40 size-[64px] rounded-full border-2 md:size-[48px] md:border-1"
-          width={64}
-          height={64}
-          quality={50}
-          priority
-        />
-        <span className="mx-3 text-xl leading-none font-medium tracking-[0.01rem] max-md:sr-only">
-          {siteConfig.name}
-        </span>
-      </Link>
+const Header = ({ className }: { className?: string }) => {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const { theme, setTheme } = useTheme();
 
-      <Menu className="w-full max-w-64 sm:max-w-96 md:max-w-none" />
-    </header>
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10);
+    };
+
+    // Check initial scroll position
+    handleScroll();
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <div
+      data-scrolled={isScrolled}
+      className={cn(
+        "sticky top-0 z-50 w-full",
+        "motion-safe:transition-[background-color,backdrop-filter,border-color] motion-safe:duration-200",
+        "bg-background/0 backdrop-blur-none",
+        "data-[scrolled=true]:bg-background/80 data-[scrolled=true]:backdrop-blur-md",
+        "data-[scrolled=true]:border-border/50 data-[scrolled=true]:border-b",
+        className
+      )}
+    >
+      <header className="mx-auto flex w-full max-w-4xl items-center justify-between px-5 py-4">
+        <div className="flex items-center gap-3">
+          <Link
+            href="/"
+            rel="author"
+            aria-label={siteConfig.name}
+            className="hover:text-foreground/85 flex shrink-0 items-center gap-2.5 pr-2 hover:no-underline"
+          >
+            <Image
+              src={avatarImg}
+              alt={`Photo of ${siteConfig.name}`}
+              className="border-ring/30 size-[40px] rounded-full border md:size-[32px]"
+              width={40}
+              height={40}
+              quality={75}
+              priority
+            />
+            <span className="text-[17px] font-medium whitespace-nowrap max-md:sr-only">{siteConfig.name}</span>
+          </Link>
+          <Separator orientation="vertical" className="!h-6" />
+          <Menu />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="sm" aria-label="Open GitHub profile" asChild>
+            <Link href={`https://github.com/${authorConfig.social.github}`}>
+              <GitHubIcon />
+            </Link>
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+            aria-label="Toggle theme"
+            className="group"
+          >
+            <SunIcon className="group-hover:stroke-orange-600 dark:hidden" aria-hidden="true" />
+            <MoonIcon className="not-dark:hidden group-hover:stroke-yellow-400" aria-hidden="true" />
+          </Button>
+        </div>
+      </header>
+    </div>
   );
 };
 

components/layout/menu-item.tsx

@@ -1,48 +0,0 @@
-import Link from "@/components/link";
-import { cn } from "@/lib/utils";
-
-const MenuItem = ({
-  text,
-  href,
-  icon,
-  current,
-  className,
-  ...rest
-}: React.ComponentProps<"div"> & {
-  text?: string;
-  href?: `/${string}`;
-  icon: React.ReactNode;
-  current?: boolean;
-}) => {
-  const item = (
-    <div
-      className={cn(
-        "[&_svg]:stroke-foreground/85 inline-flex items-center [&_svg]:size-7 [&_svg]:md:size-5",
-        className
-      )}
-      {...rest}
-    >
-      {icon}
-      {text && <span className="ml-3 text-sm leading-none font-medium tracking-wide max-md:sr-only">{text}</span>}
-    </div>
-  );
-
-  // allow both navigational links and/or other interactive react components (e.g. the theme toggle)
-  if (href) {
-    return (
-      <Link
-        href={href}
-        prefetch={false}
-        aria-label={text}
-        data-current={current || undefined}
-        className="text-foreground/85 hover:border-b-ring/80 data-current:border-b-primary/60 inline-flex items-center hover:no-underline"
-      >
-        {item}
-      </Link>
-    );
-  }
-
-  return item;
-};
-
-export default MenuItem;

components/layout/menu.tsx

@@ -1,58 +1,38 @@
 "use client";
 
 import { useSelectedLayoutSegment } from "next/navigation";
-import MenuItem from "@/components/layout/menu-item";
-import ThemeToggle from "@/components/theme/theme-toggle";
-import { cn } from "@/lib/utils";
-import { HomeIcon, PencilLineIcon, CodeXmlIcon, MailIcon } from "lucide-react";
+import Button from "@/components/ui/button";
+import Link from "@/components/link";
 
-const menuItems: React.ComponentProps<typeof MenuItem>[] = [
-  {
-    text: "Home",
-    href: "/",
-    icon: <HomeIcon />,
-  },
+const menuItems = [
   {
     text: "Notes",
     href: "/notes",
-    icon: <PencilLineIcon />,
   },
   {
     text: "Projects",
     href: "/projects",
-    icon: <CodeXmlIcon />,
   },
   {
     text: "Contact",
     href: "/contact",
-    icon: <MailIcon />,
   },
-  {
-    icon: <ThemeToggle />,
-  },
-];
+] as const;
 
-const Menu = ({ className, ...rest }: React.ComponentProps<"div">) => {
+const Menu = () => {
   const segment = useSelectedLayoutSegment() || "";
 
   return (
-    <div
-      className={cn(
-        "flex max-w-2/3 flex-row items-center justify-between md:max-w-none md:justify-end md:gap-4",
-        className
-      )}
-      {...rest}
-    >
+    <div className="flex items-center gap-2">
       {menuItems.map((item, index) => {
         const isCurrent = item.href?.split("/")[1] === segment;
 
         return (
-          <div
-            className="inline-flex items-center last:-mr-2.5 max-sm:first:hidden **:[a,button]:border-y-3 **:[a,button]:border-y-transparent **:[a,button]:p-2.5"
-            key={index}
-          >
-            <MenuItem {...item} current={isCurrent} />
-          </div>
+          <Button key={index} variant="ghost" size="sm" asChild>
+            <Link href={item.href} prefetch={false} aria-label={item.text} data-current={isCurrent}>
+              {item.text}
+            </Link>
+          </Button>
         );
       })}
     </div>

components/layout/page-title.tsx

@@ -10,7 +10,10 @@ const PageTitle = ({
   canonical: string;
 }) => {
   return (
-    <h1 className={cn("mt-0 mb-6 text-left text-3xl font-medium tracking-[-0.015em] lowercase", className)} {...rest}>
+    <h1
+      className={cn("mt-0 mb-6 text-left text-4xl font-semibold tracking-tight lowercase sm:text-3xl", className)}
+      {...rest}
+    >
       <Link
         href={canonical}
         className="before:text-muted-foreground before:-mr-0.5 before:tracking-widest before:content-['\002E\002F'] hover:no-underline"