Added breadcrumbs

components.json

@@ -11,6 +11,6 @@
   },
   "aliases": {
     "components": "~/app/components",
-    "utils": "~/app/utils/styles"
+    "utils": "~/utils/client/styles"
   }
 }

src/app/components/navigation/breadcrumb-nav.tsx

@@ -0,0 +1,48 @@
+import Image from "next/image";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "~/app/components/ui/breadcrumb";
+
+interface BreadcrumbNavProps {
+  routes?: { label: string; href: string }[];
+  page: string;
+}
+
+export const BreadcrumbNav = ({ routes, page }: BreadcrumbNavProps) => {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">
+            <Image
+              src="/rainbow-ring.png"
+              alt="Home"
+              width={24}
+              height={24}
+              className="motion-safe:duration-2000 motion-safe:animate-spin"
+            />
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+
+        {routes?.map(({ label, href }) => (
+          <>
+            <BreadcrumbSeparator>/</BreadcrumbSeparator>
+            <BreadcrumbItem>
+              <BreadcrumbLink href={href}>{label}</BreadcrumbLink>
+            </BreadcrumbItem>
+          </>
+        ))}
+
+        <BreadcrumbSeparator>/</BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>{page}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};

src/app/components/navigation/navigation.tsx

@@ -3,7 +3,7 @@
 import * as Separator from "@radix-ui/react-separator";
 import { cva } from "class-variance-authority";
 import Link from "next/link";
-import { GoHome, GoPerson, GoCommandPalette, GoPencil } from "react-icons/go";
+import { GoHome, GoPerson, GoPencil, GoBook, GoTerminal } from "react-icons/go";
 import {
   Tooltip,
   TooltipContent,
@@ -69,11 +69,16 @@ const links: {
     href: "/about",
     icon: GoPerson,
   },
-  //   {
-  //     tooltip: "Projects",
-  //     href: "/projects",
-  //     icon: GoCommandPalette,
-  //   },
+  {
+    tooltip: "Resources",
+    href: "/resources",
+    icon: GoBook,
+  },
+  {
+    tooltip: "Tools",
+    href: "/tools",
+    icon: GoTerminal,
+  },
   {
     tooltip: "Writing",
     href: "/writing",

src/app/components/ui/breadcrumb.tsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "~/utils/client/styles";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-neutral-500 dark:text-neutral-400 sm:gap-2.5",
+      className,
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        "transition-colors hover:text-neutral-950 dark:hover:text-neutral-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn(
+      "font-normal text-neutral-950 dark:text-neutral-50",
+      className,
+    )}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

src/app/resources/page.tsx

@@ -0,0 +1,9 @@
+import { BreadcrumbNav } from "~/app/components/navigation/breadcrumb-nav";
+
+export default function Resources() {
+  return (
+    <main className="p-24">
+      <BreadcrumbNav page="Resources" />
+    </main>
+  );
+}

src/app/tools/page.tsx

@@ -1,15 +1,9 @@
-import Hero from "~/app/(home)/_sections/hero-section";
-import About from "~/app/(home)/_sections/about-section";
-import Writing from "~/app/(home)/_sections/writing-section";
-import { HeroGraphic } from "~/app/(home)/_sections/hero-graphic";
+import { BreadcrumbNav } from "~/app/components/navigation/breadcrumb-nav";
 
-export default function Home() {
+export default function Tools() {
   return (
-    <main className="flex flex-col gap-y-52 pb-24 pt-72">
-      <HeroGraphic />
-      <Hero />
-      <About />
-      <Writing />
+    <main className="p-24">
+      <BreadcrumbNav page="Tools" />
     </main>
   );
 }

tailwind.config.ts

@@ -55,6 +55,9 @@ export default {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      transitionDuration: {
+        "2000": "2000ms",
+      },
       boxShadow: {
         "cutout-depth-0": "0px 25px 15px 0px rgba(0, 0, 0, 0.25) inset",
         "cutout-depth-1":