2026 Redesign (#2531)

components/code-block.tsx

@@ -1,79 +1,51 @@
-import { CodeIcon, TerminalIcon } from "lucide-react";
+import { codeToHtml } from "shiki";
 import { cacheLife } from "next/cache";
 import CopyButton from "@/components/copy-button";
-import { cn } from "@/lib/utils";
 import reactToText from "react-to-text";
-import { codeToHtml } from "shiki";
 
 interface CodeBlockProps extends React.ComponentProps<"pre"> {
   showLineNumbers?: boolean;
-  showCopyButton?: boolean;
 }
 
-const renderHighlightedCode = async (codeString: string, lang: string) => {
+const renderCode = async (code: string, lang: string): Promise<string> => {
   "use cache";
   cacheLife("max");
 
-  const html = await codeToHtml(codeString, {
+  return codeToHtml(code, {
     lang,
-    themes: {
-      light: "github-light",
-      dark: "github-dark",
-    },
+    themes: { light: "github-light", dark: "github-dark" },
   });
-
-  return html;
 };
 
-const CodeBlock = async (props: CodeBlockProps) => {
-  const { showLineNumbers = false, showCopyButton = true, children, className } = props;
-
-  // escape hatch if this code wasn't meant to be highlighted
+const CodeBlock = async ({ children, className, showLineNumbers = true, ...props }: CodeBlockProps) => {
+  // Escape hatch for non-code pre blocks
   if (!children || typeof children !== "object" || !("props" in children)) {
-    return <pre {...props}>{children}</pre>;
+    return (
+      <pre className={className} {...props}>
+        {children}
+      </pre>
+    );
   }
 
   const codeProps = children.props as React.ComponentProps<"code">;
   const codeString = reactToText(codeProps.children).trim();
+  const lang = codeProps.className?.split("language-")[1] ?? "text";
 
-  // the language set in the markdown is passed as a className
-  const lang = codeProps.className?.split("language-")[1] ?? "";
-
-  const html = await renderHighlightedCode(codeString, lang);
+  const html = await renderCode(codeString, lang);
 
   return (
-    <div className={cn("bg-muted/35 relative isolate rounded-lg border-2 font-mono shadow", className)}>
+    <div className="group not-prose relative">
+      <CopyButton
+        value={codeString}
+        className="absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover:opacity-100"
+      />
       <div
-        className={cn(
-          "grid max-h-[500px] w-full overflow-x-auto overscroll-x-none p-4 **:bg-transparent! data-language:pt-10 md:max-h-[650px] dark:**:text-[var(--shiki-dark)]! [&_pre]:whitespace-normal",
-          "[&_.line]:inline-block [&_.line]:min-w-full [&_.line]:py-1 [&_.line]:leading-none [&_.line]:whitespace-pre [&_.line]:after:hidden",
-          "data-line-numbers:[&_.line]:before:text-muted-foreground data-line-numbers:[counter-reset:line] data-line-numbers:[&_.line]:[counter-increment:line] data-line-numbers:[&_.line]:before:mr-5 data-line-numbers:[&_.line]:before:inline-block data-line-numbers:[&_.line]:before:w-5 data-line-numbers:[&_.line]:before:text-right data-line-numbers:[&_.line]:before:content-[counter(line)]"
-        )}
-        data-language={lang || undefined}
+        data-slot="code-block"
+        data-lang={lang}
         data-line-numbers={showLineNumbers || undefined}
+        className={className}
         dangerouslySetInnerHTML={{ __html: html }}
       />
-      {lang && (
-        <span className="[&_svg]:stroke-primary/90 text-foreground/75 bg-muted/40 absolute top-0 left-0 z-10 flex items-center gap-[8px] rounded-tl-md rounded-br-lg border-r-2 border-b-2 px-[10px] py-[5px] font-mono text-xs font-medium tracking-wide uppercase backdrop-blur-sm select-none [&_svg]:size-[14px] [&_svg]:shrink-0">
-          {["sh", "bash", "zsh", "shell"].includes(lang) ? (
-            <>
-              <TerminalIcon />
-              <span>Shell</span>
-            </>
-          ) : (
-            <>
-              <CodeIcon />
-              <span>{lang}</span>
-            </>
-          )}
-        </span>
-      )}
-      {showCopyButton && (
-        <CopyButton
-          source={codeString}
-          className="text-foreground/75 hover:text-primary bg-muted/40 absolute top-0 right-0 z-10 size-10 rounded-tr-md rounded-bl-lg border-b-2 border-l-2 p-0 backdrop-blur-sm select-none [&_svg]:my-auto [&_svg]:inline-block [&_svg]:size-4.5 [&_svg]:align-text-bottom"
-        />
-      )}
     </div>
   );
 };

components/copy-button.tsx

@@ -1,59 +1,65 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import * as React from "react";
 import copy from "copy-to-clipboard";
-import { ClipboardIcon, CheckIcon } from "lucide-react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import Button from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
-const CopyButton = ({
-  source,
-  timeout = 2000,
+function CopyButton({
+  value,
   className,
-  ...rest
-}: React.ComponentProps<"button"> & {
-  source: string;
-  timeout?: number;
-}) => {
-  const [copied, setCopied] = useState(false);
+  variant = "ghost",
+  tooltip = "Copy to Clipboard",
+  ...props
+}: React.ComponentProps<typeof Button> & {
+  value: string;
+  tooltip?: string;
+}) {
+  const [hasCopied, setHasCopied] = React.useState(false);
+  const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
 
-  const handleCopy: React.MouseEventHandler<React.ComponentRef<"button">> = (e) => {
-    // prevent unintentional double-clicks by unfocusing button
-    e.currentTarget.blur();
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
 
-    // send plaintext to the clipboard
-    const didCopy = copy(source);
+  const handleCopy = () => {
+    copy(value);
+    setHasCopied(true);
 
-    // indicate success
-    setCopied(didCopy);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => setHasCopied(false), 2000);
   };
 
-  useEffect(() => {
-    if (!copied) {
-      return;
-    }
-
-    // reset to original icon after given ms (defaults to 2 seconds)
-    const reset = setTimeout(() => {
-      setCopied(false);
-    }, timeout);
-
-    // cancel timeout to avoid memory leaks if unmounted in the middle of this
-    return () => {
-      clearTimeout(reset);
-    };
-  }, [timeout, copied]);
-
   return (
-    <button
-      onClick={handleCopy}
-      disabled={copied}
-      className={cn("cursor-pointer disabled:cursor-default", className)}
-      {...rest}
-    >
-      {copied ? <CheckIcon className="stroke-success" /> : <ClipboardIcon />}
-      <span className="sr-only">{copied ? "Copied" : "Copy to clipboard"}</span>
-    </button>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          data-slot="copy-button"
+          data-copied={hasCopied}
+          size="icon"
+          variant={variant}
+          className={cn(
+            "bg-code absolute top-3 right-2 z-10 size-7 hover:opacity-100 focus-visible:opacity-100",
+            className
+          )}
+          onClick={handleCopy}
+          aria-label={hasCopied ? "Copied" : tooltip}
+          {...props}
+        >
+          {hasCopied ? <CheckIcon aria-hidden="true" /> : <CopyIcon aria-hidden="true" />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{hasCopied ? "Copied" : tooltip}</TooltipContent>
+    </Tooltip>
   );
-};
+}
 
 export default CopyButton;

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"

components/link.tsx

@@ -1,7 +1,6 @@
 import NextLink from "next/link";
-import { cn } from "@/lib/utils";
 
-const Link = ({ href, rel, target, className, ...rest }: React.ComponentProps<typeof NextLink>) => {
+const Link = ({ href, rel, target, ...rest }: React.ComponentProps<typeof NextLink>) => {
   // This component auto-detects whether or not this link should open in the same window (the default for internal
   // links) or a new tab (the default for external links). Defaults can be overridden with `target="_blank"`.
   const isExternal = typeof href === "string" && !["/", "#"].includes(href[0]);
@@ -10,10 +9,6 @@ const Link = ({ href, rel, target, className, ...rest }: React.ComponentProps<ty
     href,
     target: target || (isExternal ? "_blank" : undefined),
     rel: `${rel ? `${rel} ` : ""}${target === "_blank" || isExternal ? "noopener noreferrer" : ""}`.trim() || undefined,
-    className: cn(
-      "text-primary decoration-primary/40 no-underline decoration-2 underline-offset-4 hover:underline",
-      className
-    ),
     ...rest,
   };
 

components/providers.tsx

@@ -1,19 +1,11 @@
 "use client";
 
-import { ThemeProvider } from "@/components/theme/theme-context";
-import { ProgressProvider } from "@bprogress/next/app";
+import { ThemeProvider } from "next-themes";
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
   return (
-    <ThemeProvider>
-      <ProgressProvider
-        height="calc(var(--spacing) * 1)"
-        color="var(--primary)"
-        options={{ showSpinner: false }}
-        shallowRouting
-      >
-        {children}
-      </ProgressProvider>
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      {children}
     </ThemeProvider>
   );
 };

components/theme/theme-context.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { createContext, useEffect } from "react";
-import { useLocalStorage, useMedia } from "react-use";
-
-export const ThemeContext = createContext<{
-  /**
-   * If the user's theme preference is unset, this returns whether the system preference resolved to "light" or "dark".
-   * If the user's theme preference is set, the preference is returned instead, regardless of their system's theme.
-   */
-  theme: string;
-  /** Update the theme manually and save to local storage. */
-  setTheme: (theme: string) => void;
-}>({
-  theme: "",
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  setTheme: (_) => {},
-});
-
-// provider used once in _app.tsx to wrap entire app
-export const ThemeProvider = ({ children }: React.PropsWithChildren) => {
-  // keep track of if/when the user has set their theme *on this site*
-  const [preferredTheme, setPreferredTheme] = useLocalStorage<string>("theme", undefined, { raw: true });
-  // hook into system `prefers-color-scheme` setting
-  // https://web.dev/prefers-color-scheme/#the-prefers-color-scheme-media-query
-  const isSystemDark = useMedia("(prefers-color-scheme: dark)", false);
-  // Derive system theme directly from media query to avoid setState in effect
-  const systemTheme = isSystemDark ? "dark" : "light";
-
-  // actual DOM updates must be done in useEffect
-  useEffect(() => {
-    // only "light" and "dark" are valid themes
-    const resolvedTheme = preferredTheme && ["light", "dark"].includes(preferredTheme) ? preferredTheme : systemTheme;
-
-    // this is what actually changes the CSS variables
-    document.documentElement.dataset.theme = resolvedTheme;
-
-    // less important, but tells the browser how to render built-in elements like forms, scrollbars, etc.
-    document.documentElement.style?.setProperty("color-scheme", resolvedTheme);
-  }, [preferredTheme, systemTheme]);
-
-  const providerValues = {
-    theme: preferredTheme ?? systemTheme,
-    setTheme: setPreferredTheme,
-  };
-
-  return <ThemeContext.Provider value={providerValues}>{children}</ThemeContext.Provider>;
-};

components/theme/theme-script.tsx

@@ -1,12 +0,0 @@
-// loaded in <head> by layout.tsx to avoid blinding flash of unstyled content (FOUC). irrelevant after the first render
-// when <ThemeProvider /> takes over.
-// unminified JS: https://gist.github.com/jakejarvis/79b0ec8506bc843023546d0d29861bf0
-export const ThemeScript = () => (
-  <script
-    id="restore-theme"
-    dangerouslySetInnerHTML={{
-      __html:
-        "(()=>{try{const e=document.documentElement,t='undefined'!=typeof Storage?window.localStorage.getItem('theme'):null,a=(t&&'dark'===t)??window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';e.dataset.theme=a,e.style.colorScheme=a}catch(e){}})()",
-    }}
-  />
-);

components/theme/theme-toggle.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import { useContext } from "react";
-import { MoonIcon, SunIcon } from "lucide-react";
-import { ThemeContext } from "@/components/theme/theme-context";
-import { cn } from "@/lib/utils";
-
-const ThemeToggle = ({ className, ...rest }: React.ComponentProps<"button">) => {
-  const { theme, setTheme } = useContext(ThemeContext);
-
-  return (
-    <button
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-      aria-label="Toggle theme"
-      className={cn("hover:[&_svg]:stroke-warning block cursor-pointer bg-transparent", className)}
-      {...rest}
-    >
-      <SunIcon className="dark:hidden" />
-      <MoonIcon className="not-dark:hidden" />
-      <span className="sr-only">Toggle theme</span>
-    </button>
-  );
-};
-
-export default ThemeToggle;