refactor: redesign home page, remove old video pages, migrate to @tailwindcss/typography

- Replace root page with new (home) route featuring a project showcase (Domainstack, Sofa, Versioneer, Snoozle)
- Remove /birthday and /hillary video pages
- Replace custom hand-rolled .prose styles with @tailwindcss/typography via a .markdown utility class
- Remove heading-anchor component and .nvmrc

components/heading-anchor.tsx

@@ -1,28 +0,0 @@
-import { LinkIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const HeadingAnchor = ({
-  id,
-  title,
-  className,
-}: {
-  id: string;
-  title: string;
-  className?: string;
-}) => (
-  <a
-    href={`#${id}`}
-    className={cn(
-      "text-muted-foreground hover:text-primary ml-2 inline-block px-2 align-baseline hover:no-underline",
-      className,
-    )}
-    aria-hidden="true"
-    tabIndex={-1}
-  >
-    <LinkIcon className="inline-block size-[0.75em] align-baseline" />
-    <span className="sr-only">Permalink to &ldquo;{title}&rdquo;</span>
-  </a>
-);
-
-export { HeadingAnchor };

components/layout/footer.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import siteConfig from "@/lib/config/site";
 
 const Footer = () => (
-  <footer className="text-muted-foreground mt-8 w-full py-6 text-center text-[13px] leading-loose">
+  <footer className="text-muted-foreground border-border mt-8 w-full border-t py-6 text-xs leading-loose">
     All content is licensed under{" "}
     <Link href="/license" className="underline underline-offset-4">
       {siteConfig.license}

components/layout/header.tsx

@@ -39,11 +39,11 @@ const Header = ({ className }: { className?: string }) => {
         "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",
+        "data-[scrolled=true]:border-border/70 data-[scrolled=true]:border-b",
         className,
       )}
     >
-      <header className="mx-auto mt-2 flex w-full max-w-[720px] items-center justify-between px-5 py-4">
+      <header className="mt-2 flex w-full items-center justify-between py-4">
         <div className="flex items-center gap-3">
           <Link
             href="/"
@@ -64,14 +64,14 @@ const Header = ({ className }: { className?: string }) => {
               {siteConfig.name}
             </span>
           </Link>
-          <Separator orientation="vertical" className="!h-6" />
+          <Separator orientation="vertical" className="!h-7" />
           <Menu />
         </div>
 
         <div className="flex items-center gap-2.5">
           <Button
             variant="ghost"
-            size="sm"
+            size="icon"
             nativeButton={false}
             aria-label="Email Me"
             render={<a href={`mailto:${authorConfig.email}`} />}
@@ -80,7 +80,7 @@ const Header = ({ className }: { className?: string }) => {
           </Button>
           <Button
             variant="ghost"
-            size="sm"
+            size="icon"
             nativeButton={false}
             aria-label="Open GitHub profile"
             render={
@@ -95,7 +95,7 @@ const Header = ({ className }: { className?: string }) => {
           </Button>
           <Button
             variant="ghost"
-            size="sm"
+            size="icon"
             onClick={() => setTheme(theme === "light" ? "dark" : "light")}
             aria-label="Toggle theme"
             className="group"

components/layout/menu.tsx

@@ -32,7 +32,7 @@ const Menu = () => {
             nativeButton={false}
             aria-label={item.text}
             data-current={isCurrent || undefined}
-            className="data-current:bg-accent/60 data-current:text-accent-foreground text-[15px] leading-none"
+            className="data-current:bg-accent/60 data-current:text-accent-foreground text-sm leading-none"
             render={<Link href={item.href} />}
           >
             {item.text}

components/ui/button.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "group/button focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {