diff --git a/app/layout.tsx b/app/layout.tsx
index 5dc7a210..b21fdae7 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,7 +4,7 @@ import { Analytics } from "@vercel/analytics/next";
 import { ThemeProvider, ThemeScript } from "@/components/layout/theme-context";
 import Header from "@/components/layout/header";
 import Footer from "@/components/layout/footer";
-import { SkipNavLink, SkipNavTarget } from "@/components/layout/skip-nav";
+import SkipNavButton, { SKIP_NAV_ID } from "@/components/layout/skip-nav";
 import { defaultMetadata } from "@/lib/metadata";
 import { GeistMono, GeistSans } from "@/lib/fonts";
 import siteConfig from "@/lib/config/site";
@@ -64,13 +64,12 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
 
       <body className="bg-background text-foreground font-sans antialiased">
         <ThemeProvider>
-          <SkipNavLink />
+          <SkipNavButton />
 
           <div className="mx-auto w-full max-w-4xl px-5">
             <Header className="mt-4 mb-6 w-full" />
 
-            <main>
-              <SkipNavTarget />
+            <main id={SKIP_NAV_ID} tabIndex={-1}>
               {children}
             </main>
 
diff --git a/app/notes/[slug]/page.tsx b/app/notes/[slug]/page.tsx
index 556022fc..d2d17e79 100644
--- a/app/notes/[slug]/page.tsx
+++ b/app/notes/[slug]/page.tsx
@@ -85,17 +85,17 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
         }}
       />
 
-      <div className="text-foreground/70 -mt-1 flex flex-wrap justify-items-start space-x-4 text-[0.8rem] leading-9 tracking-wide md:text-[0.85rem]">
+      <div className="text-foreground/70 -mt-1 flex flex-wrap justify-items-start gap-x-4 text-[0.8rem] leading-9 tracking-wide md:text-[0.85rem]">
         <Link
           href={`/${POSTS_DIR}/${frontmatter!.slug}`}
-          className={"text-foreground/70 flex items-center space-x-2 whitespace-nowrap hover:no-underline"}
+          className={"text-foreground/70 flex flex-nowrap items-center gap-x-2 whitespace-nowrap hover:no-underline"}
         >
           <CalendarDaysIcon className="inline size-4 shrink-0" />
           <Time date={frontmatter!.date} format="MMMM d, y" />
         </Link>
 
         {frontmatter!.tags && (
-          <div className="flex flex-wrap items-center space-x-2 whitespace-nowrap">
+          <div className="flex flex-wrap items-center gap-x-2 whitespace-nowrap">
             <TagIcon className="inline size-4 shrink-0" />
             {frontmatter!.tags.map((tag) => (
               <span
@@ -113,13 +113,13 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
         <Link
           href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}/blob/main/${POSTS_DIR}/${frontmatter!.slug}/index.mdx`}
           title={`Edit "${frontmatter!.title}" on GitHub`}
-          className={"text-foreground/70 flex items-center space-x-2 whitespace-nowrap hover:no-underline"}
+          className={"text-foreground/70 flex flex-nowrap items-center gap-x-2 whitespace-nowrap hover:no-underline"}
         >
           <SquarePenIcon className="inline size-4 shrink-0" />
           <span>Improve This Post</span>
         </Link>
 
-        <div className="flex min-w-14 items-center space-x-2 whitespace-nowrap">
+        <div className="flex min-w-14 flex-nowrap items-center gap-x-2 whitespace-nowrap">
           <EyeIcon className="inline size-4 shrink-0" />
           <Suspense
             // when this loads, the component will count up from zero to the actual number of hits, so we can simply
diff --git a/app/notes/page.tsx b/app/notes/page.tsx
index 95a47181..8877298d 100644
--- a/app/notes/page.tsx
+++ b/app/notes/page.tsx
@@ -37,7 +37,7 @@ const Page = async () => {
 
   Object.entries(postsByYear).forEach(([year, posts]) => {
     sections.push(
-      <section className="my-8 first-of-type:mt-0" key={year}>
+      <section className="my-8 first-of-type:mt-6 last-of-type:mb-6" key={year}>
         <h2 className="mt-0 mb-4 text-3xl font-bold md:text-4xl">{year}</h2>
         <ul className="space-y-4">
           {posts.map(({ slug, date, title, htmlTitle, views }) => (
@@ -50,7 +50,7 @@ const Page = async () => {
                   dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
                 />
                 {views > 0 && (
-                  <span className="bg-muted text-muted-foreground inline-flex h-5 flex-nowrap items-center space-x-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
+                  <span className="bg-muted text-muted-foreground inline-flex h-5 flex-nowrap items-center gap-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
                     <EyeIcon className="inline-block size-4 shrink-0" />
                     <span className="inline-block leading-5">
                       {Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(views)}
diff --git a/app/page.tsx b/app/page.tsx
index 47547772..fe86ef4f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -191,15 +191,15 @@ const Page = () => {
         <Link href="/contact" title="Send an email" className="[--primary:#de0c0c] dark:[--primary:#ff5050]">
           email
         </Link>{" "}
-        <sup className="mx-0.5 text-[0.6rem]">
+        <sup className="mx-[3px] text-[0.6rem]">
           <Link
             href="https://jrvs.io/pgp"
             rel="pgpkey"
             title="My Public Key"
             className="text-nowrap decoration-1 [--primary:var(--muted-foreground)]"
           >
-            <LockIcon className="mr-0.5 inline size-3 align-text-top" />
-            <code className="mx-0.5 tracking-wider text-wrap [word-spacing:-0.25em]">2B0C 9CF2 51E6 9A39</code>
+            <LockIcon className="mr-[5px] inline size-3 align-text-top" />
+            <code className="tracking-wider text-wrap [word-spacing:-3px]">2B0C 9CF2 51E6 9A39</code>
           </Link>
         </sup>
         ,{" "}
diff --git a/app/previously/page.mdx b/app/previously/page.mdx
index cbbbc69c..71d80263 100644
--- a/app/previously/page.mdx
+++ b/app/previously/page.mdx
@@ -1,5 +1,6 @@
 import PageTitle from "@/components/layout/page-title";
 import Marquee from "@/components/marquee";
+import Comments from "@/components/comments";
 import { createMetadata } from "@/lib/metadata";
 import { ComicNeue } from "@/lib/fonts";
 
@@ -11,7 +12,7 @@ export const metadata = createMetadata({
 
 export const WarningMarquee = () => (
   <Marquee>
-    <span className="leading-none select-none">
+    <span className="leading-none">
       🚨 Trigger warning: excessive marquees, animated GIFs, Comic Sans, popups,{" "}
       <code className="text-[0.9rem] font-normal">
         color: <span style={{ color: "#32cd32" }}>limegreen</span>
@@ -148,3 +149,7 @@ _[April 2018](https://hungry-mayer-40e790.netlify.app/) ([view source](https://g
 
 ![March 2020](./images/2020_03.png)
 _[March 2020](https://quiet-truffle-92842d.netlify.app/) ([view source](https://github.com/jakejarvis/jarv.is-hugo))_
+
+---
+
+<Comments title="Previously on..." />
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 0bd6fd0a..5917dcc6 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -57,16 +57,16 @@ const Page = async () => {
 
       <div className="row-auto grid w-full grid-cols-none gap-4 md:grid-cols-2">
         {repos?.map((repo) => (
-          <div key={repo!.name} className="border-ring/65 h-fit space-y-1.5 rounded-2xl border-1 px-4 py-3">
+          <div key={repo!.name} className="border-ring/65 h-fit space-y-1.5 rounded-2xl border-1 px-4 py-3 shadow-xs">
             <Link href={repo!.url} className="inline-block text-base leading-relaxed font-semibold">
               {repo!.name}
             </Link>
 
             {repo!.description && <p className="text-foreground/85 text-sm leading-relaxed">{repo!.description}</p>}
 
-            <div className="flex flex-wrap space-x-4 *:inline-flex *:flex-nowrap *:items-center *:text-[0.825rem] *:leading-loose *:whitespace-nowrap">
+            <div className="flex flex-wrap gap-x-4 text-[0.825rem] leading-loose whitespace-nowrap">
               {repo!.primaryLanguage && (
-                <div className="text-muted-foreground space-x-2">
+                <div className="text-muted-foreground inline-flex flex-nowrap items-center gap-2">
                   {repo!.primaryLanguage.color && (
                     <span
                       className="inline-block size-4 rounded-full"
@@ -81,7 +81,7 @@ const Page = async () => {
                 <Link
                   href={`${repo!.url}/stargazers`}
                   title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)} ${repo!.stargazerCount === 1 ? "star" : "stars"}`}
-                  className="text-muted-foreground hover:text-primary space-x-2 hover:no-underline"
+                  className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
                 >
                   <StarIcon className="inline-block size-4 shrink-0" />
                   <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)}</span>
@@ -92,7 +92,7 @@ const Page = async () => {
                 <Link
                   href={`${repo!.url}/network/members`}
                   title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)} ${repo!.forkCount === 1 ? "fork" : "forks"}`}
-                  className="text-muted-foreground hover:text-primary space-x-2 hover:no-underline"
+                  className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
                 >
                   <GitForkIcon className="inline-block size-4" />
                   <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)}</span>
diff --git a/components/activity-calendar.tsx b/components/activity-calendar.tsx
index 3605a07c..86fd00a8 100644
--- a/components/activity-calendar.tsx
+++ b/components/activity-calendar.tsx
@@ -48,7 +48,7 @@ const Calendar = ({
           <Tooltip>
             <TooltipTrigger asChild>{block}</TooltipTrigger>
             <TooltipContent>
-              <span className="text-xs font-medium">{`${activity.count === 0 ? "No" : activity.count} ${noun}${activity.count === 1 ? "" : "s"} on ${format(activity.date, "MMMM do")}`}</span>
+              <span className="text-[0.825rem] font-medium">{`${activity.count === 0 ? "No" : activity.count} ${noun}${activity.count === 1 ? "" : "s"} on ${format(activity.date, "MMMM do")}`}</span>
             </TooltipContent>
           </Tooltip>
         )}
diff --git a/components/code-block.tsx b/components/code-block.tsx
index 6fa49edf..7aaa3580 100644
--- a/components/code-block.tsx
+++ b/components/code-block.tsx
@@ -1,6 +1,6 @@
 import { codeToHtml } from "shiki";
 import reactToText from "react-to-text";
-import { CodeIcon } from "lucide-react";
+import { CodeIcon, TerminalIcon } from "lucide-react";
 import CopyButton from "@/components/copy-button";
 import { cn } from "@/lib/utils";
 import type { ComponentProps, ComponentPropsWithoutRef } from "react";
@@ -38,37 +38,11 @@ const CodeBlock = async ({
     },
   });
 
-  const getFullLang = (lang: string) => {
-    // replace the file extension with the full language name when it makes sense to
-    switch (lang.toLowerCase()) {
-      case "js":
-        return "JavaScript";
-      case "jsx":
-        return "JavaScript (JSX)";
-      case "ts":
-        return "TypeScript";
-      case "tsx":
-        return "TypeScript (JSX)";
-      case "sh":
-      case "bash":
-      case "zsh":
-        return "Shell";
-      case "py":
-        return "Python";
-      case "md":
-        return "Markdown";
-      case "mdx":
-        return "Markdown (MDX)";
-      default:
-        return lang;
-    }
-  };
-
   return (
-    <div className={cn("bg-muted/35 relative isolate rounded-lg border-2 font-mono", className)}>
+    <div className={cn("bg-muted/35 relative isolate rounded-lg border-2 font-mono shadow", className)}>
       <div
         className={cn(
-          "grid max-h-[500px] w-full overflow-x-auto p-4 **:bg-transparent! data-language:pt-9 md:max-h-[650px] dark:**:text-[var(--shiki-dark)]! [&_pre]:whitespace-normal",
+          "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)]"
         )}
@@ -77,15 +51,24 @@ const CodeBlock = async ({
         dangerouslySetInnerHTML={{ __html: codeHighlighted }}
       />
       {lang && (
-        <span className="text-foreground/75 bg-muted/40 absolute top-0 left-0 flex items-center rounded-tl-md rounded-br-lg border-r-2 border-b-2 py-[5px] pr-[10px] font-mono text-xs font-medium tracking-wide uppercase backdrop-blur-xs select-none">
-          <CodeIcon className="stroke-primary/90 mr-[8px] ml-[10px] inline-block size-[14px]" />
-          <span>{getFullLang(lang)}</span>
+        <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-xs select-none [&_svg]:size-[14px] [&_svg]:shrink-0">
+          {["sh", "bash", "zsh"].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 size-10 rounded-tr-md rounded-bl-lg border-b-2 border-l-2 p-0 backdrop-blur-xs select-none [&_svg]:my-auto [&_svg]:inline-block [&_svg]:size-4.5 [&_svg]:align-text-bottom"
+          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-xs select-none [&_svg]:my-auto [&_svg]:inline-block [&_svg]:size-4.5 [&_svg]:align-text-bottom"
         />
       )}
     </div>
diff --git a/components/heading-anchor.tsx b/components/heading-anchor.tsx
index f7ad5676..55625d61 100644
--- a/components/heading-anchor.tsx
+++ b/components/heading-anchor.tsx
@@ -13,7 +13,7 @@ const HeadingAnchor = ({ id, title, className }: { id: string; title: string; cl
       aria-hidden="true"
       tabIndex={-1}
     >
-      <LinkIcon className="inline-block size-4 align-baseline" />
+      <LinkIcon className="inline-block size-[0.75em] align-baseline" />
       <span className="sr-only">Permalink to &ldquo;{reactToText(title)}&rdquo;</span>
     </a>
   );
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 3f184d34..60370456 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -25,7 +25,7 @@ const Footer = ({ className, ...rest }: ComponentPropsWithoutRef<"footer">) => {
 
       <div>
         Made with{" "}
-        <HeartIcon className="animate-heartbeat stroke-destructive fill-destructive mx-0.5 inline size-4 align-text-top" />{" "}
+        <HeartIcon className="animate-heartbeat stroke-destructive fill-destructive mx-[1px] inline size-4 align-text-top" />{" "}
         and{" "}
         <Link
           href="https://nextjs.org/"
@@ -39,7 +39,7 @@ const Footer = ({ className, ...rest }: ComponentPropsWithoutRef<"footer">) => {
             stroke="currentColor"
             strokeWidth="0"
             viewBox="0 0 24 24"
-            className="mx-0.5 inline size-4 align-text-top"
+            className="mx-[1px] inline size-4 align-text-top"
           >
             <path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" />
           </svg>
diff --git a/components/layout/header.tsx b/components/layout/header.tsx
index 03b5f8a5..a1ab076f 100644
--- a/components/layout/header.tsx
+++ b/components/layout/header.tsx
@@ -31,7 +31,7 @@ const Header = ({ className, ...rest }: ComponentPropsWithoutRef<"header">) => {
         </span>
       </Link>
 
-      <Menu className="ml-6 w-full max-w-64 sm:ml-4 sm:max-w-96 md:ml-0 md:max-w-none" />
+      <Menu className="w-full max-w-64 sm:max-w-96 md:ml-0 md:max-w-none" />
     </header>
   );
 };
diff --git a/components/layout/menu.tsx b/components/layout/menu.tsx
index 25b52139..dc045b8b 100644
--- a/components/layout/menu.tsx
+++ b/components/layout/menu.tsx
@@ -13,7 +13,7 @@ const Menu = ({ className, ...rest }: ComponentPropsWithoutRef<"ul">) => {
   return (
     <ul
       className={cn(
-        "flex max-w-2/3 flex-row justify-between md:max-w-none md:justify-end md:space-x-4 max-sm:[&>li]:first-of-type:hidden",
+        "flex max-w-2/3 flex-row justify-between md:max-w-none md:justify-end md:gap-4 max-sm:[&>li]:first-of-type:hidden",
         className
       )}
       {...rest}
diff --git a/components/layout/skip-nav.tsx b/components/layout/skip-nav.tsx
index d3fed507..3723ae61 100644
--- a/components/layout/skip-nav.tsx
+++ b/components/layout/skip-nav.tsx
@@ -1,8 +1,8 @@
 import Button from "@/components/ui/button";
 
-const SKIP_NAV_ID = "skip-nav";
+export const SKIP_NAV_ID = "skip-nav";
 
-export const SkipNavLink = () => {
+const SkipNavButton = () => {
   return (
     <Button
       asChild
@@ -14,8 +14,4 @@ export const SkipNavLink = () => {
   );
 };
 
-export const SkipNavTarget = () => {
-  return <div id={SKIP_NAV_ID} />;
-};
-
-export default SkipNavLink;
+export default SkipNavButton;
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index 766260af..b1f3d868 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -35,13 +35,13 @@ const TooltipContent = ({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-black px-3 py-1.5 text-xs text-balance text-white/90 shadow-sm select-none",
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-black px-3 py-1.5 text-xs text-balance text-white/90 shadow select-none",
           className
         )}
         {...rest}
       >
         {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-black fill-black shadow-sm" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-black fill-black shadow" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );
diff --git a/mdx-components.tsx b/mdx-components.tsx
index bc93b572..06cd051a 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -41,15 +41,16 @@ export const useMDXComponents = (components: MDXComponents): MDXComponents => {
       <figcaption className={cn("text-muted-foreground mt-3.5 text-[0.875em] leading-snug", className)} {...rest} />
     ),
     blockquote: ({ className, ...rest }) => (
-      <blockquote className={cn("border-border text-muted-foreground mt-6 border-l-4 pl-4", className)} {...rest} />
+      <blockquote className={cn("text-muted-foreground mt-6 border-l-4 pl-4", className)} {...rest} />
     ),
     h1: ({ className, id, children, ...rest }) => (
       <h1
         className={cn(
-          "group mt-6 mb-4 scroll-m-4 text-3xl leading-snug font-extrabold md:text-4xl [&_strong]:font-black [&+*]:mt-0",
+          "group mt-6 mb-4 scroll-mt-4 text-3xl leading-snug font-extrabold md:text-4xl [&_strong]:font-black [&+*]:mt-0",
           className
         )}
         id={id}
+        tabIndex={-1}
         {...rest}
       >
         {children}
@@ -59,10 +60,11 @@ export const useMDXComponents = (components: MDXComponents): MDXComponents => {
     h2: ({ className, id, children, ...rest }) => (
       <h2
         className={cn(
-          "group mt-6 mb-4 scroll-m-4 text-xl leading-snug font-bold first:mt-0 md:text-2xl [&_code]:text-[0.875em] [&_strong]:font-extrabold [&+*]:mt-0",
+          "group mt-6 mb-4 scroll-mt-4 text-xl leading-snug font-bold first:mt-0 md:text-2xl [&_code]:text-[0.875em] [&_strong]:font-extrabold [&+*]:mt-0",
           className
         )}
         id={id}
+        tabIndex={-1}
         {...rest}
       >
         {children}
@@ -72,10 +74,11 @@ export const useMDXComponents = (components: MDXComponents): MDXComponents => {
     h3: ({ className, id, children, ...rest }) => (
       <h3
         className={cn(
-          "group mt-6 mb-4 scroll-m-4 text-lg leading-relaxed font-semibold md:text-xl [&_code]:text-[0.9em] [&_strong]:font-bold [&+*]:mt-0",
+          "group mt-6 mb-4 scroll-mt-4 text-lg leading-relaxed font-semibold md:text-xl [&_code]:text-[0.9em] [&_strong]:font-bold [&+*]:mt-0",
           className
         )}
         id={id}
+        tabIndex={-1}
         {...rest}
       >
         {children}
@@ -84,12 +87,19 @@ export const useMDXComponents = (components: MDXComponents): MDXComponents => {
     ),
     h4: ({ className, ...rest }) => (
       <h4
-        className={cn("mt-6 mb-2 scroll-m-4 leading-normal font-semibold [&_strong]:font-bold [&+*]:mt-0", className)}
+        className={cn(
+          "mt-6 mb-2 scroll-mt-4 text-base leading-normal font-semibold [&_strong]:font-bold [&+*]:mt-0",
+          className
+        )}
         {...rest}
       />
     ),
-    h5: ({ className, ...rest }) => <h5 className={cn("mt-6 mb-2 scroll-m-4 leading-normal", className)} {...rest} />,
-    h6: ({ className, ...rest }) => <h6 className={cn("mt-6 mb-2 scroll-m-4 leading-normal", className)} {...rest} />,
+    h5: ({ className, ...rest }) => (
+      <h5 className={cn("mt-6 mb-2 scroll-mt-4 text-base leading-normal font-medium", className)} {...rest} />
+    ),
+    h6: ({ className, ...rest }) => (
+      <h6 className={cn("mt-6 mb-2 scroll-mt-4 text-sm leading-normal font-normal", className)} {...rest} />
+    ),
     ul: ({ className, ...rest }) => <ul className={cn("my-5 list-disc pl-7 [&>li]:pl-1.5", className)} {...rest} />,
     ol: ({ className, ...rest }) => <ol className={cn("my-5 list-decimal pl-7 [&>li]:pl-1.5", className)} {...rest} />,
     li: ({ className, ...rest }) => (
@@ -102,7 +112,7 @@ export const useMDXComponents = (components: MDXComponents): MDXComponents => {
       />
     ),
     hr: ({ className, ...rest }) => (
-      <hr className={cn("border-border mx-auto my-6 w-11/12 border-t-2 [&+*]:mt-0", className)} {...rest} />
+      <hr className={cn("mx-auto my-6 w-11/12 border-t-2 [&+*]:mt-0", className)} {...rest} />
     ),
 
     // third-party embeds:
diff --git a/next.config.ts b/next.config.ts
index 29b891ba..4cc4fe0a 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -36,15 +36,6 @@ const nextConfig = {
   },
   productionBrowserSourceMaps: true,
   experimental: {
-    optimizePackageImports: [
-      "date-fns",
-      "@date-fns/tz",
-      "@date-fns/utc",
-      "lucide-react",
-      "@radix-ui/react-label",
-      "@radix-ui/react-slot",
-      "@radix-ui/react-tooltip",
-    ],
     reactCompiler: true,
     ppr: "incremental",
     dynamicOnHover: true,
diff --git a/package.json b/package.json
index ed5d2c17..0870bcb2 100644
--- a/package.json
+++ b/package.json
@@ -44,12 +44,10 @@
     "html-entities": "^2.6.0",
     "lucide-react": "0.508.0",
     "next": "15.4.0-canary.26",
-    "prop-types": "^15.8.1",
     "react": "19.1.0",
     "react-activity-calendar": "^2.7.11",
     "react-countup": "^6.5.3",
     "react-dom": "19.1.0",
-    "react-is": "19.1.0",
     "react-lite-youtube-embed": "^2.5.1",
     "react-schemaorg": "^2.0.0",
     "react-timeago": "^8.2.0",
@@ -86,11 +84,9 @@
     "@jakejarvis/eslint-config": "^4.0.7",
     "@tailwindcss/postcss": "^4.1.5",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^22.15.15",
-    "@types/prop-types": "^15.7.14",
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.3",
-    "@types/react-is": "^19.0.0",
+    "@types/node": "^22.15.16",
+    "@types/react": "19.1.3",
+    "@types/react-dom": "19.1.3",
     "babel-plugin-react-compiler": "19.0.0-beta-af1b7da-20250417",
     "cross-env": "^7.0.3",
     "eslint": "^9.26.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c129538b..a448529a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -86,9 +86,6 @@ importers:
       next:
         specifier: 15.4.0-canary.26
         version: 15.4.0-canary.26(@babel/core@7.26.10)(babel-plugin-react-compiler@19.0.0-beta-af1b7da-20250417)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
-      prop-types:
-        specifier: ^15.8.1
-        version: 15.8.1
       react:
         specifier: 19.1.0
         version: 19.1.0
@@ -101,9 +98,6 @@ importers:
       react-dom:
         specifier: 19.1.0
         version: 19.1.0(react@19.1.0)
-      react-is:
-        specifier: 19.1.0
-        version: 19.1.0
       react-lite-youtube-embed:
         specifier: ^2.5.1
         version: 2.5.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -208,20 +202,14 @@ importers:
         specifier: ^2.0.13
         version: 2.0.13
       '@types/node':
-        specifier: ^22.15.15
-        version: 22.15.15
-      '@types/prop-types':
-        specifier: ^15.7.14
-        version: 15.7.14
+        specifier: ^22.15.16
+        version: 22.15.16
       '@types/react':
-        specifier: ^19.1.3
+        specifier: 19.1.3
         version: 19.1.3
       '@types/react-dom':
-        specifier: ^19.1.3
+        specifier: 19.1.3
         version: 19.1.3(@types/react@19.1.3)
-      '@types/react-is':
-        specifier: ^19.0.0
-        version: 19.0.0
       babel-plugin-react-compiler:
         specifier: 19.0.0-beta-af1b7da-20250417
         version: 19.0.0-beta-af1b7da-20250417
@@ -1242,20 +1230,14 @@ packages:
   '@types/nlcst@2.0.3':
     resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}
 
-  '@types/node@22.15.15':
-    resolution: {integrity: sha512-R5muMcZob3/Jjchn5LcO8jdKwSCbzqmPB6ruBxMcf9kbxtniZHP327s6C37iOfuw8mbKK3cAQa7sEl7afLrQ8A==}
-
-  '@types/prop-types@15.7.14':
-    resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
+  '@types/node@22.15.16':
+    resolution: {integrity: sha512-3pr+KjwpVujqWqOKT8mNR+rd09FqhBLwg+5L/4t0cNYBzm/yEiYGCxWttjaPBsLtAo+WFNoXzGJfolM1JuRXoA==}
 
   '@types/react-dom@19.1.3':
     resolution: {integrity: sha512-rJXC08OG0h3W6wDMFxQrZF00Kq6qQvw0djHRdzl3U5DnIERz0MRce3WVc7IS6JYBwtaP/DwYtRRjVlvivNveKg==}
     peerDependencies:
       '@types/react': ^19.0.0
 
-  '@types/react-is@19.0.0':
-    resolution: {integrity: sha512-71dSZeeJ0t3aoPyY9x6i+JNSvg5m9EF2i2OlSZI5QoJuI8Ocgor610i+4A10TQmURR+0vLwcVCEYFpXdzM1Biw==}
-
   '@types/react@19.1.3':
     resolution: {integrity: sha512-dLWQ+Z0CkIvK1J8+wrDPwGxEYFA4RAyHoZPxHVGspYmFVnwGSNT24cGIhFJrtfRnWVuW8X7NO52gCXmhkVUWGQ==}
 
@@ -3476,9 +3458,6 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
-  react-is@19.1.0:
-    resolution: {integrity: sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==}
-
   react-lite-youtube-embed@2.5.1:
     resolution: {integrity: sha512-qH/0RumywPtzSx5SmWX/cUGvB3mSB7zMx3VrDe1UwyCEQ0SX785xnjRAodEel1pu3A3EhZyzSjwmLpfcaUN6KQ==}
     peerDependencies:
@@ -5221,7 +5200,7 @@ snapshots:
 
   '@types/concat-stream@2.0.3':
     dependencies:
-      '@types/node': 22.15.15
+      '@types/node': 22.15.16
 
   '@types/debug@4.1.12':
     dependencies:
@@ -5257,20 +5236,14 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
-  '@types/node@22.15.15':
+  '@types/node@22.15.16':
     dependencies:
       undici-types: 6.21.0
 
-  '@types/prop-types@15.7.14': {}
-
   '@types/react-dom@19.1.3(@types/react@19.1.3)':
     dependencies:
       '@types/react': 19.1.3
 
-  '@types/react-is@19.0.0':
-    dependencies:
-      '@types/react': 19.1.3
-
   '@types/react@19.1.3':
     dependencies:
       csstype: 3.1.3
@@ -7977,8 +7950,6 @@ snapshots:
 
   react-is@16.13.1: {}
 
-  react-is@19.1.0: {}
-
   react-lite-youtube-embed@2.5.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -8799,7 +8770,7 @@ snapshots:
       '@types/concat-stream': 2.0.3
       '@types/debug': 4.1.12
       '@types/is-empty': 1.2.3
-      '@types/node': 22.15.15
+      '@types/node': 22.15.16
       '@types/unist': 3.0.3
       concat-stream: 2.0.0
       debug: 4.4.0
diff --git a/renovate.json b/renovate.json
index 1eb5a724..4e693052 100644
--- a/renovate.json
+++ b/renovate.json
@@ -16,9 +16,10 @@
       "matchPackageNames": [
         "react",
         "react-dom",
-        "react-is",
         "babel-plugin-react-compiler",
-        "eslint-plugin-react-compiler"
+        "eslint-plugin-react-compiler",
+        "@types/react",
+        "@types/react-dom"
       ],
       "groupName": "react",
       "rangeStrategy": "pin"
@@ -70,10 +71,6 @@
   "ignoreDeps": [
     "@jakejarvis/eslint-config",
     "@types/node",
-    "@types/react",
-    "@types/react-dom",
-    "@types/react-is",
-    "@types/prop-types",
     "lucide-react"
   ]
 }
