Add about page

prisma/schema.prisma

@@ -524,6 +524,15 @@ model TermsOfService {
   version  Int    @default(autoincrement())
 }
 
+model About {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  markdown String
+  version  Int    @default(autoincrement())
+}
+
 model User {
   id            String    @id
   name          String

src/app/(normal)/about/page.tsx

@@ -0,0 +1,16 @@
+import { prisma } from "@/lib/prisma";
+import ReactMarkdown from "react-markdown";
+
+export default async function AboutPage() {
+  const about = await prisma.about.findFirst({
+    orderBy: [{ version: "desc" }],
+  });
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-8">
+      <div className="markdown text-center">
+        <ReactMarkdown>{about?.markdown}</ReactMarkdown>
+      </div>
+    </div>
+  );
+}

src/components/animalStudies/AnimalStudiesGallery.tsx

@@ -68,6 +68,11 @@ export default function AnimalStudiesGallery({
       maxRowItems={5}
       maxRowItemsMobile={1}
       gap={12}
+      gapBreakpoints={[
+        { maxWidth: 685, gap: 6 },
+        { maxWidth: 910, gap: 8 },
+        { maxWidth: 1130, gap: 10 },
+      ]}
       onLoadMore={done ? undefined : () => void loadMore()}
       hasMore={!done}
       isLoadingMore={loading}

src/components/global/TopNav.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
 import { Menu } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
@@ -8,17 +8,20 @@ import { Button } from "../ui/button";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
 
 const links = [
-  { href: "/", label: "Home" },
+  { type: "link" as const, href: "/", label: "Home" },
-  { href: "/artworks", label: "Portfolio" },
+  { type: "link" as const, href: "/artworks", label: "Portfolio" },
-  { href: "/artworks/animalstudies", label: "Animal Studies" },
+  {
-  { href: "/commissions", label: "Commissions" },
+    type: "dropdown" as const,
-  { href: "/commissions/status", label: "Commission Status" },
+    label: "Categories",
-  { href: "/tos", label: "Terms of Service" },
+    items: [
-  // { href: "/portfolio/artfight", label: "Artfight" },
+      { href: "/artworks/animalstudies", label: "Animal Studies" },
-  // { href: "/portfolio/minis", label: "Miniatures" },
+      { href: "/artworks/artfight", label: "Artfight" }
-  // { href: "/commissions", label: "Commissions" },
+    ],
-  // { href: "/ych", label: "YCH / Custom offers" },
+  },
-  // { href: "/todo", label: "todo (temp)" },
+  { type: "link" as const, href: "/commissions", label: "Commissions" },
+  { type: "link" as const, href: "/commissions/status", label: "Commission Status" },
+  { type: "link" as const, href: "/tos", label: "Terms of Service" },
+  { type: "link" as const, href: "/about", label: "About Me" },
 ]
 
 export default function TopNav() {
@@ -28,18 +31,41 @@ export default function TopNav() {
     <div className="w-full flex items-center justify-between">
       {/* Desktop Nav */}
       <div className="hidden md:flex">
-        <NavigationMenu>
+        <NavigationMenu viewport={false} delayDuration={0} skipDelayDuration={0}>
           <NavigationMenuList>
-            {links.map(({ href, label }) => (
+            {links.map((item) => {
-              <NavigationMenuItem key={href}>
+              if (item.type === "dropdown") {
-                <NavigationMenuLink
+                return (
-                  asChild
+                  <NavigationMenuItem key={item.label}>
-                  className={`${navigationMenuTriggerStyle()} hover:bg-hover data-active:bg-hover focus:bg-hover active:bg-hover`}
+                    <NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
-                >
+                      {item.label}
-                  <Link href={href}>{label}</Link>
+                    </NavigationMenuTrigger>
-                </NavigationMenuLink>
+                    <NavigationMenuContent>
-              </NavigationMenuItem>
+                      <ul className="min-w-48">
-            ))}
+                        {item.items.map(({ href, label }) => (
+                          <li key={href}>
+                            <NavigationMenuLink asChild className="w-full hover:bg-hover">
+                              <Link href={href}>{label}</Link>
+                            </NavigationMenuLink>
+                          </li>
+                        ))}
+                      </ul>
+                    </NavigationMenuContent>
+                  </NavigationMenuItem>
+                );
+              }
+
+              return (
+                <NavigationMenuItem key={item.href}>
+                  <NavigationMenuLink
+                    asChild
+                    className={`${navigationMenuTriggerStyle()} hover:bg-hover data-active:bg-hover focus:bg-hover active:bg-hover`}
+                  >
+                    <Link href={item.href}>{item.label}</Link>
+                  </NavigationMenuLink>
+                </NavigationMenuItem>
+              );
+            })}
           </NavigationMenuList>
         </NavigationMenu>
       </div>
@@ -56,17 +82,42 @@ export default function TopNav() {
               <SheetTitle className="text-lg">Navigation</SheetTitle>
             </SheetHeader>
             <nav className="mt-4 flex flex-col gap-2">
-              {links.map(({ href, label }) => (
+              {links.map((item) => {
-                <Link
+                if (item.type === "dropdown") {
-                  key={href}
+                  return (
-                  href={href}
+                    <div key={item.label} className="px-2">
-                  onClick={() => setOpen(false)}
+                      <div className="px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground">
-                  className="block px-4 py-2 rounded-md text-sm font-medium transition-colors
+                        {item.label}
-                  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      </div>
-                >
+                      <div className="flex flex-col">
-                  {label}
+                        {item.items.map(({ href, label }) => (
-                </Link>
+                          <Link
-              ))}
+                            key={href}
+                            href={href}
+                            onClick={() => setOpen(false)}
+                            className="block px-4 py-2 rounded-md text-sm font-medium transition-colors
+                            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                          >
+                            {label}
+                          </Link>
+                        ))}
+                      </div>
+                    </div>
+                  );
+                }
+
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setOpen(false)}
+                    className="block px-4 py-2 rounded-md text-sm font-medium transition-colors
+                    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    {item.label}
+                  </Link>
+                );
+              })}
             </nav>
           </SheetContent>
         </Sheet>

src/components/ui/button.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"