Deactive unused nav items for now

Fix the topnav for more responsiveness
2026-02-05 17:16:37 +01:00 · 2026-02-05 17:11:17 +01:00 · 2026-02-05 17:05:49 +01:00 · 2026-02-05 16:04:19 +01:00 · 2026-02-05 15:13:32 +01:00 · 2026-02-04 14:51:29 +01:00
42 changed files with 1879 additions and 274 deletions
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@ -18,6 +18,12 @@ RUN bunx prisma generate

 # Uncomment the following line in case you want to disable telemetry during the build.
 ENV NEXT_TELEMETRY_DISABLED=1
+ARG GIT_SHA=unknown
+ARG APP_VERSION=0.0.0
+ARG DEPLOY_ENV=production
+ENV NEXT_PUBLIC_GIT_SHA=$GIT_SHA \
+    NEXT_PUBLIC_APP_VERSION=$APP_VERSION \
+    NEXT_PUBLIC_DEPLOY_ENV=$DEPLOY_ENV
 ARG DATABASE_URL
 ENV DATABASE_URL=$DATABASE_URL

@ -33,6 +39,12 @@ ENV NEXT_TELEMETRY_DISABLED=1
 ENV NODE_ENV=production \
    PORT=3000 \
    HOSTNAME="0.0.0.0"
+ARG GIT_SHA=unknown
+ARG APP_VERSION=0.0.0
+ARG DEPLOY_ENV=production
+ENV NEXT_PUBLIC_GIT_SHA=$GIT_SHA \
+    NEXT_PUBLIC_APP_VERSION=$APP_VERSION \
+    NEXT_PUBLIC_DEPLOY_ENV=$DEPLOY_ENV

 RUN groupadd --system --gid 1001 nodejs && \
    useradd --system --uid 1001 --no-log-init -g nodejs nextjs
--- a/Dockerfile.prod
+++ b/Dockerfile.prod
@ -14,7 +14,6 @@ FROM base AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-# RUN bunx prisma migrate deploy
 RUN bunx prisma generate

 # Uncomment the following line in case you want to disable telemetry during the build.
--- a/bun.lock
+++ b/bun.lock
@ -5,8 +5,8 @@
    "": {
      "name": "app.gaertan.art",
      "dependencies": {
-        "@aws-sdk/client-s3": "^3.974.0",
-        "@aws-sdk/s3-request-presigner": "^3.974.0",
+        "@aws-sdk/client-s3": "^3.980.0",
+        "@aws-sdk/s3-request-presigner": "^3.980.0",
        "@hookform/resolvers": "^5.2.2",
        "@prisma/adapter-pg": "^7.3.0",
        "@prisma/client": "^7.3.0",
@ -27,15 +27,16 @@
        "lucide-react": "^0.561.0",
        "next": "16.1.6",
        "next-themes": "^0.4.6",
-        "pg": "^8.17.2",
+        "pg": "^8.18.0",
        "react": "19.2.4",
        "react-dom": "19.2.4",
        "react-hook-form": "^7.71.1",
        "react-markdown": "^10.1.0",
-        "simple-icons": "^16.6.0",
+        "simple-icons": "^16.7.0",
        "sonner": "^2.0.7",
        "tailwind-merge": "^3.4.0",
        "zod": "^4.3.6",
+        "zustand": "^5.0.6",
      },
      "devDependencies": {
        "@biomejs/biome": "2.2.0",
@ -944,6 +945,8 @@

    "zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],

+    "zustand": ["zustand@5.0.11", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg=="],
+
    "zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],

    "@aws-crypto/crc32/@aws-sdk/types": ["@aws-sdk/types@3.953.0", "", { "dependencies": { "@smithy/types": "^4.10.0", "tslib": "^2.6.2" } }, "sha512-M9Iwg9kTyqTErI0vOTVVpcnTHWzS3VplQppy8MuL02EE+mJ0BIwpWfsaAPQW+/XnVpdNpWZTsHcNE29f1+hR8g=="],
--- a/package.json
+++ b/package.json
@ -42,6 +42,7 @@
    "simple-icons": "^16.7.0",
    "sonner": "^2.0.7",
    "tailwind-merge": "^3.4.0",
+    "zustand": "^5.0.6",
    "zod": "^4.3.6"
  },
  "devDependencies": {
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@ -47,13 +47,13 @@ model Artwork {
  galleryId String?
  gallery   Gallery? @relation(fields: [galleryId], references: [id])

-  metadata ArtworkMetadata?
+  metadata  ArtworkMetadata?
  timelapse ArtworkTimelapse?

  albums     Album[]
  categories ArtCategory[]
  colors     ArtworkColor[]
-  tags       ArtTag[]
+  tags       Tag[]          @relation("ArtworkTags")
  variants   FileVariant[]

  @@index([colorStatus])
@ -101,43 +101,7 @@ model ArtCategory {
  description String?

  artworks Artwork[]
-  tags     ArtTag[]
-}
-
-model ArtTag {
-  id        String   @id @default(cuid())
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  sortIndex Int      @default(0)
-
-  name             String  @unique
-  slug             String  @unique
-  isParent         Boolean @default(false)
-  showOnAnimalPage Boolean @default(false)
-
-  description String?
-
-  aliases    ArtTagAlias[]
-  artworks   Artwork[]
-  categories ArtCategory[]
-
-  parentId String?
-  parent   ArtTag?  @relation("TagHierarchy", fields: [parentId], references: [id], onDelete: SetNull)
-  children ArtTag[] @relation("TagHierarchy")
-}
-
-model ArtTagAlias {
-  id        String   @id @default(cuid())
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-
-  alias String @unique
-
-  tagId String
-  tag   ArtTag @relation(fields: [tagId], references: [id], onDelete: Cascade)
-
-  @@unique([tagId, alias])
-  @@index([alias])
+  tagLinks TagCategory[]
 }

 model Color {
@ -201,12 +165,12 @@ model ArtworkTimelapse {
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

-  artworkId String @unique
+  artworkId String  @unique
  artwork   Artwork @relation(fields: [artworkId], references: [id], onDelete: Cascade)

  enabled Boolean @default(false)

-  s3Key     String @unique
+  s3Key     String  @unique
  fileName  String?
  mimeType  String?
  sizeBytes Int?
@ -248,6 +212,72 @@ model FileVariant {
  @@unique([artworkId, type])
 }

+model Tag {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  sortIndex Int      @default(0)
+
+  name      String  @unique
+  slug      String  @unique
+  isVisible Boolean @default(true)
+
+  description String?
+
+  aliases               TagAlias[]
+  categoryLinks         TagCategory[]
+  categoryParents       TagCategory[]          @relation("TagCategoryParent")
+  artworks              Artwork[]              @relation("ArtworkTags")
+  commissionTypes       CommissionType[]       @relation("CommissionTypeTags")
+  commissionCustomCards CommissionCustomCard[] @relation("CommissionCustomCardTags")
+  miniatures            Miniature[]            @relation("MiniatureTags")
+}
+
+model TagAlias {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  alias String @unique
+
+  tagId String
+  tag   Tag    @relation(fields: [tagId], references: [id], onDelete: Cascade)
+
+  @@unique([tagId, alias])
+  @@index([alias])
+}
+
+model TagCategory {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  tagId      String
+  categoryId String
+
+  isParent         Boolean @default(false)
+  showOnAnimalPage Boolean @default(false)
+  parentTagId      String?
+
+  tag       Tag         @relation(fields: [tagId], references: [id], onDelete: Cascade)
+  category  ArtCategory @relation(fields: [categoryId], references: [id], onDelete: Cascade)
+  parentTag Tag?        @relation("TagCategoryParent", fields: [parentTagId], references: [id], onDelete: SetNull)
+
+  @@unique([tagId, categoryId])
+  @@index([categoryId])
+  @@index([tagId])
+  @@index([parentTagId])
+  @@index([categoryId, parentTagId])
+}
+
+model Miniature {
+  id        String   @id @default(cuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  tags Tag[] @relation("MiniatureTags")
+}
+
 model Commission {
  id        String   @id @default(cuid())
  createdAt DateTime @default(now())
@ -265,6 +295,8 @@ model CommissionType {

  description String?

+  tags Tag[] @relation("CommissionTypeTags")
+
  options      CommissionTypeOption[]
  extras       CommissionTypeExtra[]
  customInputs CommissionTypeCustomInput[]
@ -279,13 +311,14 @@ model CommissionCustomCard {

  name String

-  description String?
+  description       String?
  referenceImageUrl String?
-  isVisible Boolean @default(true)
-  isSpecialOffer Boolean @default(false)
+  isVisible         Boolean @default(true)
+  isSpecialOffer    Boolean @default(false)

-  options CommissionCustomCardOption[]
-  extras  CommissionCustomCardExtra[]
+  tags     Tag[]                        @relation("CommissionCustomCardTags")
+  options  CommissionCustomCardOption[]
+  extras   CommissionCustomCardExtra[]
  requests CommissionRequest[]

  @@index([isVisible, sortIndex])
@ -301,9 +334,9 @@ model CommissionOption {

  description String?

-  types    CommissionTypeOption[]
+  types       CommissionTypeOption[]
  customCards CommissionCustomCardOption[]
-  requests CommissionRequest[]
+  requests    CommissionRequest[]
 }

 model CommissionTypeOption {
@ -335,8 +368,8 @@ model CommissionExtra {

  description String?

-  requests CommissionRequest[]
-  types    CommissionTypeExtra[]
+  requests    CommissionRequest[]
+  types       CommissionTypeExtra[]
  customCards CommissionCustomCardExtra[]
 }

@ -444,12 +477,12 @@ model CommissionRequest {
  userAgent       String?
  customFields    Json?

-  optionId String?
-  typeId   String?
+  optionId     String?
+  typeId       String?
  customCardId String?
-  option   CommissionOption? @relation(fields: [optionId], references: [id])
-  type     CommissionType?   @relation(fields: [typeId], references: [id])
-  customCard CommissionCustomCard? @relation(fields: [customCardId], references: [id])
+  option       CommissionOption?     @relation(fields: [optionId], references: [id])
+  type         CommissionType?       @relation(fields: [typeId], references: [id])
+  customCard   CommissionCustomCard? @relation(fields: [customCardId], references: [id])

  extras CommissionExtra[]
  files  CommissionRequestFile[]
@ -460,9 +493,9 @@ model CommissionGuidelines {
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

-  markdown String
+  markdown        String
  exampleImageUrl String?
-  isActive Boolean @default(true)
+  isActive        Boolean @default(true)

  @@index([isActive])
 }
@ -491,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
--- a/src/actions/animalStudies/getAnimalStudiesPage.ts
+++ b/src/actions/animalStudies/getAnimalStudiesPage.ts
@ -51,6 +51,7 @@ export async function getAnimalStudiesPage(input: unknown): Promise<AnimalStudie
      id: true,
      name: true,
      altText: true,
+      nsfw: true,
      sortKey: true,
      file: { select: { fileKey: true } },
      variants: {
@ -80,6 +81,7 @@ export async function getAnimalStudiesPage(input: unknown): Promise<AnimalStudie
      id: r.id,
      name: r.name,
      altText: r.altText,
+      nsfw: r.nsfw ?? false,
      fileKey: r.file.fileKey,
      width: w,
      height: h,
--- a/src/actions/portfolio/getPortfolioArtworksPage.ts
+++ b/src/actions/portfolio/getPortfolioArtworksPage.ts
@ -12,6 +12,7 @@ export type PortfolioArtworkItem = {
  id: string;
  name: string;
  altText: string | null;
+  nsfw: boolean;

  sortKey: number | null;
  year: number | null;
@ -113,6 +114,7 @@ export async function getPortfolioArtworksPage(args: {
    id: true,
    name: true,
    altText: true,
+    nsfw: true,
    year: true,
    sortKey: true,
    file: { select: { fileKey: true } },
@ -138,6 +140,7 @@ export async function getPortfolioArtworksPage(args: {
      id: r.id,
      name: r.name,
      altText: r.altText ?? null,
+      nsfw: r.nsfw ?? false,
      sortKey: r.sortKey ?? null,
      year: r.year ?? null,
      fileKey: r.file.fileKey,
--- a/src/actions/portfolio/getTaggedArtworksPage.ts
+++ b/src/actions/portfolio/getTaggedArtworksPage.ts
@ -0,0 +1,176 @@
+"use server";
+
+import type { Prisma } from "@/generated/prisma/browser";
+import { prisma } from "@/lib/prisma";
+
+export type Cursor = {
+  afterSortKey: number | null;
+  afterId: string;
+} | null;
+
+export type TaggedArtworkItem = {
+  id: string;
+  name: string;
+  altText: string | null;
+  nsfw: boolean;
+  sortKey: number | null;
+  year: number | null;
+  fileKey: string;
+  thumbW: number;
+  thumbH: number;
+  dominantHex: string;
+};
+
+type VariantPick = { type: string; width: number; height: number };
+function pickVariant(variants: VariantPick[], type: string) {
+  return variants.find((v) => v.type === type) ?? null;
+}
+
+export async function getTaggedArtworksPage(args: {
+  take?: number;
+  cursor?: Cursor;
+  tagSlugs: string[];
+  onlyPublished?: boolean;
+}): Promise<{
+  items: TaggedArtworkItem[];
+  nextCursor: Cursor;
+  total: number;
+}> {
+  const { take = 60, cursor = null, tagSlugs, onlyPublished = true } = args;
+
+  const filteredSlugs = tagSlugs.map((s) => s.trim()).filter(Boolean);
+  if (filteredSlugs.length === 0) {
+    return { items: [], nextCursor: null, total: 0 };
+  }
+
+  const baseWhere: Prisma.ArtworkWhereInput = {
+    ...(onlyPublished ? { published: true } : {}),
+    tags: { some: { slug: { in: filteredSlugs } } },
+    variants: { some: { type: "thumbnail" } },
+  };
+
+  const total = await prisma.artwork.count({ where: baseWhere });
+
+  const select = {
+    id: true,
+    name: true,
+    altText: true,
+    nsfw: true,
+    year: true,
+    sortKey: true,
+    file: { select: { fileKey: true } },
+    variants: {
+      where: { type: "thumbnail" },
+      select: { type: true, width: true, height: true },
+      take: 1,
+    },
+    colors: {
+      where: { type: "Vibrant" },
+      select: { color: { select: { hex: true } } },
+      take: 1,
+    },
+  } satisfies Prisma.ArtworkSelect;
+
+  type ArtworkRow = Prisma.ArtworkGetPayload<{ select: typeof select }>;
+
+  const mapRow = (r: ArtworkRow): TaggedArtworkItem | null => {
+    const thumb = pickVariant(r.variants, "thumbnail");
+    if (!thumb?.width || !thumb?.height) return null;
+
+    return {
+      id: r.id,
+      name: r.name,
+      altText: r.altText ?? null,
+      nsfw: r.nsfw ?? false,
+      sortKey: r.sortKey ?? null,
+      year: r.year ?? null,
+      fileKey: r.file.fileKey,
+      thumbW: thumb.width,
+      thumbH: thumb.height,
+      dominantHex: r.colors[0]?.color?.hex ?? "#999999",
+    };
+  };
+
+  let items: TaggedArtworkItem[] = [];
+  let nextCursor: Cursor = null;
+
+  const inNullSegment = cursor?.afterSortKey === null;
+
+  if (!inNullSegment) {
+    const whereA: Prisma.ArtworkWhereInput = {
+      AND: [baseWhere, { sortKey: { not: null } }],
+    };
+
+    if (cursor?.afterSortKey != null) {
+      const sk = Number(cursor.afterSortKey);
+      whereA.OR = [
+        { sortKey: { gt: sk } },
+        { AND: [{ sortKey: sk }, { id: { gt: cursor.afterId } }] },
+      ];
+    }
+
+    const rowsA = await prisma.artwork.findMany({
+      where: whereA,
+      orderBy: [{ sortKey: "asc" }, { id: "asc" }],
+      take: Math.min(take, 200),
+      select,
+    });
+
+    items = rowsA.map(mapRow).filter((x): x is TaggedArtworkItem => x !== null);
+
+    if (items.length >= take) {
+      const last = items.at(-1);
+      if (!last || last.sortKey == null) {
+        return { items, nextCursor: null, total };
+      }
+      nextCursor = { afterSortKey: last.sortKey, afterId: last.id };
+      return { items, nextCursor, total };
+    }
+
+    const remaining = take - items.length;
+
+    const whereB: Prisma.ArtworkWhereInput = {
+      AND: [baseWhere, { sortKey: null }],
+    };
+
+    const rowsB = await prisma.artwork.findMany({
+      where: whereB,
+      orderBy: [{ id: "asc" }],
+      take: Math.min(remaining, 200),
+      select,
+    });
+
+    const more = rowsB.map(mapRow).filter((x): x is TaggedArtworkItem => x !== null);
+    items = items.concat(more);
+
+    const last = items[items.length - 1];
+    nextCursor =
+      items.length < take || !last
+        ? null
+        : { afterSortKey: last.sortKey ?? null, afterId: last.id };
+
+    return { items, nextCursor, total };
+  }
+
+  const whereB: Prisma.ArtworkWhereInput = {
+    AND: [baseWhere, { sortKey: null }],
+    ...(cursor ? { id: { gt: cursor.afterId } } : {}),
+  };
+
+  const rowsB = await prisma.artwork.findMany({
+    where: whereB,
+    orderBy: [{ id: "asc" }],
+    take: Math.min(take, 200),
+    select,
+  });
+
+  items = rowsB.map(mapRow).filter((x): x is TaggedArtworkItem => x !== null);
+
+  const last = items[items.length - 1];
+  nextCursor =
+    items.length < take || !last
+      ? null
+      : { afterSortKey: null, afterId: last.id };
+
+  return { items, nextCursor, total };
+}
--- a/src/app/(normal)/about/page.tsx
+++ b/src/app/(normal)/about/page.tsx
@ -0,0 +1,34 @@
+import { prisma } from "@/lib/prisma";
+import Image from "next/image";
+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
+          components={{
+            img: ({ src, alt }) => {
+              if (!src || typeof src !== "string") return null;
+              return (
+                <Image
+                  src={src}
+                  alt={alt ?? ""}
+                  width={1200}
+                  height={800}
+                  className="max-w-full h-auto rounded-md border border-border"
+                />
+              );
+            },
+          }}
+        >
+          {about?.markdown}
+        </ReactMarkdown>
+      </div>
+    </div>
+  );
+}
--- a/src/app/(normal)/artworks/animalstudies/index/page.tsx
+++ b/src/app/(normal)/artworks/animalstudies/index/page.tsx
@ -1,4 +1,4 @@
-import { ArrowLeftIcon } from "lucide-react";
+import { ArrowLeftIcon, ChevronRightIcon } from "lucide-react";
 import Link from "next/link";

 import {
@ -30,14 +30,22 @@ function sortArtworks(a: SimpleArtwork, b: SimpleArtwork) {
 }

 export default async function AnimalListPage() {
-  const tags = await prisma.artTag.findMany({
-    where: { showOnAnimalPage: true },
+  const tags = await prisma.tag.findMany({
+    where: {
+      isVisible: true,
+      categoryLinks: {
+        some: { category: { name: "Animal Studies" }, showOnAnimalPage: true },
+      },
+    },
    select: {
      id: true,
      name: true,
      slug: true,
      sortIndex: true,
-      parentId: true,
+      categoryLinks: {
+        where: { category: { name: "Animal Studies" } },
+        select: { parentTagId: true },
+      },
      artworks: {
        where: {
          published: true,
@ -50,10 +58,15 @@ export default async function AnimalListPage() {
    orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
  });

-  const byId = new Map(tags.map((t) => [t.id, t]));
-  const childrenByParentId = new Map<string, typeof tags>();
+  const tagsWithParents = tags.map((t) => ({
+    ...t,
+    parentId: t.categoryLinks[0]?.parentTagId ?? null,
+  }));

-  for (const t of tags) {
+  const byId = new Map(tagsWithParents.map((t) => [t.id, t]));
+  const childrenByParentId = new Map<string, typeof tagsWithParents>();
+
+  for (const t of tagsWithParents) {
    if (!t.parentId) continue;
    const arr = childrenByParentId.get(t.parentId) ?? [];
    arr.push(t);
@ -64,12 +77,12 @@ export default async function AnimalListPage() {
    childrenByParentId.set(pid, arr.slice().sort(sortBySortIndexName));
  }

-  const parents = tags
+  const parents = tagsWithParents
    .filter((t) => t.parentId === null)
    .slice()
    .sort(sortBySortIndexName);

-  const orphans = tags
+  const orphans = tagsWithParents
    .filter((t) => t.parentId !== null && !byId.has(t.parentId))
    .slice()
    .sort(sortBySortIndexName);
@ -82,16 +95,17 @@ export default async function AnimalListPage() {
    }

    return (
-      <ul className="space-y-1.5">
+      <ul className="space-y-1">
        {list.map((a) => (
          <li key={a.id}>
            <Link
              href={`/artworks/single/${a.id}?from=animal-index`}
              className="
-  inline-flex items-center gap-2
-  rounded-md px-2 py-1
+  group flex w-full items-center gap-2
+  rounded-md px-2 py-1.5
  text-sm font-medium
-  hover:bg-muted
+  hover:bg-muted/60
+  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
 "
            >
              <span
@ -102,7 +116,7 @@ export default async function AnimalListPage() {
            group-hover:translate-x-0.5
          "
              >
-                →
+                <ChevronRightIcon className="h-4 w-4" />
              </span>

              <span className="leading-snug">{a.name}</span>
@ -149,7 +163,7 @@ export default async function AnimalListPage() {
        </div>
      </header>

-      <div className="space-y-6">
+      <div className="space-y-6 sm:space-y-4">
        <Card>
          <CardHeader className="space-y-1">
            <CardTitle className="text-base">
@ -177,15 +191,17 @@ export default async function AnimalListPage() {
                  const isStandalone = children.length === 0;

                  return (
-                    <AccordionItem key={p.id} value={p.id} className="border-b">
+                    <AccordionItem key={p.id} value={p.id} className="py-1 sm:py-1">
                      <AccordionTrigger
                        className="
-                          py-4
+                          py-4 sm:py-3
                          rounded-md px-2 -mx-2
+                          bg-hover text-hover-foreground dark:bg-hover dark:text-hover-foreground
                          transition-colors
-                          hover:bg-muted/60
+                          hover:bg-hover/80 dark:hover:bg-hover/80
+                          font-semibold
                          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-                          data-[state=open]:bg-muted/40
+                          data-[state=open]:bg-muted/90 dark:data-[state=open]:bg-muted/90
                        "
                      >
                        <div className="flex w-full items-center justify-between pr-2">
@ -211,41 +227,44 @@ export default async function AnimalListPage() {
                        </div>
                      </AccordionTrigger>

-                      <AccordionContent className="pb-5">
+                      <AccordionContent className="pb-4 sm:pb-4">
                        {isStandalone ? (
-                          <div className="rounded-md border p-4">
-                            <div className="mb-3 flex items-center justify-between">
-                              <div className="text-sm font-medium">Artworks</div>
+                          <div className="space-y-2">
+                            <div className="flex items-center justify-between text-sm font-medium">
+                              <span>Artworks</span>
                              <Badge variant="outline">{p.artworks.length}</Badge>
                            </div>
-                            <ArtworkList items={p.artworks} />
+                            <div>
+                              <ArtworkList items={p.artworks} />
+                            </div>
                          </div>
                        ) : (
-                          <div className="space-y-4">
+                          <div className="space-y-4 sm:space-y-3">
                            {p.artworks.length > 0 ? (
                              <>
-                                <div className="rounded-md border p-4">
-                                  <div className="mb-3 flex items-center justify-between">
-                                    <div className="text-sm font-medium">{/* Directly tagged */}</div>
+                                <div className="space-y-2">
+                                  <div className="flex items-center justify-between text-sm font-medium">
+                                    <span>Direct artworks</span>
                                    <Badge variant="outline">{p.artworks.length}</Badge>
                                  </div>
-                                  <ArtworkList items={p.artworks} />
+                                  <div>
+                                    <ArtworkList items={p.artworks} />
+                                  </div>
                                </div>

                                <Separator />
                              </>
                            ) : null}

-                            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                            <div className="grid grid-cols-1 gap-4 sm:gap-2 sm:grid-cols-2">
                              {children.map((c) => (
-                                <div key={c.id} className="rounded-md border p-4">
-                                  <div className="mb-3 flex items-center justify-between">
+                                <div key={c.id} className="space-y-2 pt-3">
+                                  <div className="flex items-center justify-between text-sm font-medium">
                                    <div className="min-w-0">
-                                      <div className="truncate text-sm font-medium">{c.name}</div>
+                                      <div className="truncate">{c.name}</div>
                                    </div>
                                    <Badge variant="outline">{c.artworks.length}</Badge>
                                  </div>
-
                                  <ArtworkList items={c.artworks} />
                                </div>
                              ))}
@ -269,12 +288,12 @@ export default async function AnimalListPage() {
                Tags whose parent is not visible (or not configured for the animal page).
              </p> */}
            </CardHeader>
-            <CardContent className="space-y-3">
-              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <CardContent className="space-y-4 sm:space-y-2">
+              <div className="grid grid-cols-1 gap-4 sm:gap-2 sm:grid-cols-2">
                {orphans.map((t) => (
-                  <div key={t.id} className="rounded-md border p-4">
-                    <div className="mb-3 flex items-center justify-between">
-                      <div className="truncate text-sm font-medium">{t.name}</div>
+                  <div key={t.id} className="space-y-2 pt-3">
+                    <div className="flex items-center justify-between text-sm font-medium">
+                      <div className="truncate">{t.name}</div>
                      <Badge variant="outline">{t.artworks.length}</Badge>
                    </div>
                    <ArtworkList items={t.artworks} />
--- a/src/app/(normal)/artworks/animalstudies/page.tsx
+++ b/src/app/(normal)/artworks/animalstudies/page.tsx
@ -17,17 +17,28 @@ function parseTagsParam(tags: string | string[] | undefined): string[] {
 function expandSelectedWithChildren(
  selectedSlugs: string[],
  tagsForFilter: Array<{
+    id: string;
    slug: string;
-    children: Array<{ slug: string }>;
+    parentId: string | null;
  }>,
 ) {
  const bySlug = new Map(tagsForFilter.map((t) => [t.slug, t]));
+  const childrenByParentId = new Map<string, typeof tagsForFilter>();
+
+  for (const t of tagsForFilter) {
+    if (!t.parentId) continue;
+    const arr = childrenByParentId.get(t.parentId) ?? [];
+    arr.push(t);
+    childrenByParentId.set(t.parentId, arr);
+  }
+
  const out = new Set(selectedSlugs);

  for (const slug of selectedSlugs) {
    const t = bySlug.get(slug);
    if (!t) continue;
-    for (const c of t.children ?? []) out.add(c.slug);
+    const children = childrenByParentId.get(t.id) ?? [];
+    for (const c of children) out.add(c.slug);
  }

  return Array.from(out);
@ -41,24 +52,31 @@ export default async function AnimalStudiesPage({
  const { tags } = await searchParams;

  const selectedTagSlugs = parseTagsParam(tags);
-  const tagsForFilter = await prisma.artTag.findMany({
-    where: { showOnAnimalPage: true },
+  const tagLinks = await prisma.tagCategory.findMany({
+    where: {
+      showOnAnimalPage: true,
+      category: { name: "Animal Studies" },
+      tag: { isVisible: true },
+    },
    select: {
-      id: true,
-      name: true,
-      slug: true,
-      sortIndex: true,
-      parentId: true,
-      parent: { select: { id: true, name: true, slug: true, sortIndex: true } },
-      children: {
-        where: { showOnAnimalPage: true },
-        select: { id: true, name: true, slug: true, sortIndex: true, parentId: true },
-        orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
+      parentTagId: true,
+      tag: {
+        select: { id: true, name: true, slug: true, sortIndex: true },
      },
    },
-    orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
+    orderBy: [{ tag: { sortIndex: "asc" } }, { tag: { name: "asc" } }],
  });

+  const tagsForFilter = tagLinks.map((link) => ({
+    id: link.tag.id,
+    name: link.tag.name,
+    slug: link.tag.slug,
+    sortIndex: link.tag.sortIndex,
+    parentId: link.parentTagId,
+    parent: null,
+    children: [],
+  }));
+
  const expandedTagSlugs = expandSelectedWithChildren(selectedTagSlugs, tagsForFilter);

  return (
--- a/src/app/(normal)/artworks/artfight/page.tsx
+++ b/src/app/(normal)/artworks/artfight/page.tsx
@ -0,0 +1,13 @@
+import UnderConstruction from "@/components/global/UnderConstruction";
+
+export default function ArtfightPage() {
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-10">
+      <UnderConstruction
+        title="Artfight Gallery"
+        subtitle="This page is getting ready for its big debut."
+        note="I’m curating attacks, revenges, and progress shots — check back soon."
+      />
+    </div>
+  );
+}
--- a/src/app/(normal)/artworks/single/[id]/page.tsx
+++ b/src/app/(normal)/artworks/single/[id]/page.tsx
@ -1,14 +1,20 @@
 import ArtworkMetaCard from "@/components/artworks/ArtworkMetaCard";
 import ArtworkTimelapseViewer from "@/components/artworks/ArtworkTimelapseViewer";
 import { ContextBackButton } from "@/components/artworks/ContextBackButton";
+import NsfwConsentDialog from "@/components/nsfw/NsfwConsentDialog";
+import NsfwImage from "@/components/nsfw/NsfwImage";
+import NsfwLink from "@/components/nsfw/NsfwLink";
 import { Button } from "@/components/ui/button";
 import { prisma } from "@/lib/prisma";
 import { cn } from "@/lib/utils";
 import { PlayCircle } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";

-export default async function SingleArtworkPage({ params }: { params: { id: string }; searchParams: Record<string, string | string[] | undefined>; }) {
+export default async function SingleArtworkPage({
+  params,
+}: {
+  params: { id: string };
+  searchParams: Record<string, string | string[] | undefined>;
+}) {
  const { id } = await params;
  const artwork = await prisma.artwork.findUnique({
    where: {
@ -24,46 +30,58 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
      tags: true,
      variants: true,
      timelapse: { where: { enabled: true } },
-    }
-  })
+    },
+  });

-  if (!artwork) return <div>Artwork with this ID could not be found</div>
+  if (!artwork) return <div>Artwork with this ID could not be found</div>;

-  const { width, height } = artwork.variants.find((v) => v.type === "resized") ?? { width: 0, height: 0 }
+  const { width, height } = artwork.variants.find(
+    (v) => v.type === "resized",
+  ) ?? { width: 0, height: 0 };

  const colors =
-    artwork.colors?.map((c) => c.color?.hex).filter((hex): hex is string => Boolean(hex)) ?? []
+    artwork.colors
+      ?.map((c) => c.color?.hex)
+      .filter((hex): hex is string => Boolean(hex)) ?? [];

  const gradientColors = colors.length
    ? colors.join(", ")
-    : "rgba(0,0,0,0.1), rgba(0,0,0,0.03)"
-
+    : "rgba(0,0,0,0.1), rgba(0,0,0,0.03)";

  return (
-    <div className="px-8 py-4">
+    <div className="px-4 sm:px-8 py-4">
+      <NsfwConsentDialog hasNsfw={Boolean(artwork.nsfw)} />
      <div className="relative w-full min-h-10 flex items-center mb-4">
-        <div className="z-10"><ContextBackButton /></div>
+        <div className="z-10 hidden sm:block">
+          <ContextBackButton />
+        </div>
        {artwork.name ? (
-          <div className="pointer-events-none absolute left-1/2 -translate-x-1/2 text-center">
-            <div className="pointer-events-auto"><h1 className="text-2xl font-bold mb-4 py-4">{artwork.name}</h1></div>
+          <div className="w-full text-center sm:pointer-events-none sm:absolute sm:left-1/2 sm:-translate-x-1/2">
+            <div className="sm:pointer-events-auto">
+              <h1 className="text-xl sm:text-2xl font-bold mb-2 sm:mb-4 py-2 sm:py-4 px-2 sm:px-0 wrap-break-word">
+                {artwork.name}
+              </h1>
+            </div>
          </div>
        ) : null}
      </div>
      <div className="flex flex-col items-center gap-4">
        <div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background relative">
-          <div className="relative w-full bg-muted items-center justify-center"
+          <div
+            className="relative w-full bg-muted items-center justify-center"
            style={{ aspectRatio: "4 / 3" }}
          >
-            <Link href={`/raw/${artwork.id}`}>
-              <Image
+            <NsfwLink href={`/raw/${artwork.id}`} nsfw={Boolean(artwork.nsfw)}>
+              <NsfwImage
                src={`/api/image/resized/${artwork.file.fileKey}.webp`}
                alt={artwork.altText || "Artwork"}
                fill={!width || !height}
                width={width}
                height={height}
+                nsfw={Boolean(artwork.nsfw)}
                className={cn("object-cover transition duration-300")}
              />
-            </Link>
+            </NsfwLink>
          </div>
        </div>
        {artwork.timelapse?.enabled ? (
@ -94,7 +112,10 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
            tags={artwork.tags}
          />
        </div>
+        <div className="w-full flex justify-center sm:hidden">
+          <ContextBackButton className="mx-auto flex justify-center" />
+        </div>
      </div>
-    </div >
+    </div>
  );
-}
+}
--- a/src/app/(normal)/artworks/tagged/page.tsx
+++ b/src/app/(normal)/artworks/tagged/page.tsx
@ -0,0 +1,48 @@
+import TaggedGallery from "@/components/portfolio/TaggedGallery";
+import { prisma } from "@/lib/prisma";
+
+function parseTagsParam(tags: string | string[] | undefined): string[] {
+  if (!tags) return [];
+  const raw = Array.isArray(tags) ? tags.join(",") : tags;
+  return raw
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+export default async function TaggedPortfolioPage({
+  searchParams,
+}: {
+  searchParams: { tags?: string | string[] };
+}) {
+  const { tags } = await searchParams;
+  const selectedTagSlugs = parseTagsParam(tags);
+
+  const tagsSelected = selectedTagSlugs.length
+    ? await prisma.tag.findMany({
+      where: { slug: { in: selectedTagSlugs } },
+      select: { id: true, name: true, slug: true },
+      orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
+    })
+    : [];
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-8">
+      <header className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div className="space-y-1">
+          <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
+            {tagsSelected.length ? (
+              <div className="flex flex-wrap gap-2">
+                List of artworks tagged with:
+                {tagsSelected.map((t) => (
+                  <span key={t.name.toLowerCase()}> {t.name.toLowerCase()}</span>
+                ))}
+              </div>
+            ) : "No tags selected"}
+          </h1>
+        </div>
+      </header>
+      <TaggedGallery tagSlugs={selectedTagSlugs} />
+    </div>
+  );
+}
--- a/src/app/(normal)/commissions/page.tsx
+++ b/src/app/(normal)/commissions/page.tsx
@ -19,7 +19,11 @@ export default async function CommissionsPage() {
      include: {
        options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
        extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
-        customInputs: { include: { customInput: true }, orderBy: { sortIndex: "asc" } },
+        customInputs: {
+          include: { customInput: true },
+          orderBy: { sortIndex: "asc" },
+        },
+        tags: true,
      },
      orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
    }),
@ -28,6 +32,7 @@ export default async function CommissionsPage() {
      include: {
        options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
        extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
+        tags: true,
      },
      orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
    }),
@ -49,7 +54,7 @@ export default async function CommissionsPage() {
          {guidelines?.exampleImageUrl ? (
            <Dialog>
              <DialogTrigger asChild>
-                <Button variant="secondary">View example</Button>
+                <Button variant="secondary">View type example</Button>
              </DialogTrigger>
              <DialogContent className="flex w-auto! max-w-[95vw]! flex-col p-4 sm:p-6">
                <DialogHeader className="sr-only">
@ -80,7 +85,10 @@ export default async function CommissionsPage() {
        <CommissionGuidelines />
      </div>
      <hr />
-      <h2 id="commission-request-form" className="text-2xl font-semibold scroll-mt-24">
+      <h2
+        id="commission-request-form"
+        className="text-2xl font-semibold scroll-mt-24"
+      >
        Request a Commission
      </h2>
      <CommissionOrderForm types={commissions} customCards={customCards} />
--- a/src/app/(normal)/commissions/status/page.tsx
+++ b/src/app/(normal)/commissions/status/page.tsx
@ -2,9 +2,12 @@ import { Badge } from "@/components/ui/badge";
 import { prisma } from "@/lib/prisma";

 const statusStyles: Record<string, string> = {
-  ACCEPTED: "bg-sky-500/15 text-sky-300 border-sky-500/30",
-  INPROGRESS: "bg-amber-500/15 text-amber-300 border-amber-500/30",
-  COMPLETED: "bg-emerald-500/15 text-emerald-300 border-emerald-500/30",
+  ACCEPTED:
+    "bg-sky-500/20 text-sky-700 border-sky-500/40 dark:bg-sky-500/15 dark:text-sky-300 dark:border-sky-500/30",
+  INPROGRESS:
+    "bg-amber-500/20 text-amber-700 border-amber-500/40 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-500/30",
+  COMPLETED:
+    "bg-emerald-500/20 text-emerald-700 border-emerald-500/40 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-500/30",
 };

 const statusLabels: Record<string, string> = {
--- a/src/app/(normal)/miniatures/page.tsx
+++ b/src/app/(normal)/miniatures/page.tsx
@ -0,0 +1,13 @@
+import UnderConstruction from "@/components/global/UnderConstruction";
+
+export default function MiniaturesPage() {
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-10">
+      <UnderConstruction
+        title="Warhammer Miniatures"
+        subtitle="This page is getting ready for its big debut."
+        note="I’m curating attacks, revenges, and progress shots — check back soon."
+      />
+    </div>
+  );
+}
--- a/src/app/(normal)/page.tsx
+++ b/src/app/(normal)/page.tsx
@ -10,15 +10,23 @@ export default function Home() {
          Welcome to my place!
        </h1>
        <p className="text-muted-foreground max-w-xl text-lg mb-6">
-          I&apos;m an illustrator, character designer, miniature painter, 3d modeller, makeup artist and much more and happy to show you things i&apos;ve created.
+          I&apos;m an illustrator, character designer, miniature painter, 3d
+          modeller, makeup artist and much more and happy to show you things
+          i&apos;ve created.
        </p>
        <p className="text-muted-foreground max-w-xl text-lg mb-6">
-          If you want to commission me<br />you can find all the information you need here:<br /> <Link href="/commissions" className="underline text-primary"  >Commissions</Link>
+          If you want to commission me
+          <br />
+          you can find all the information you need here:
+          <br />{" "}
+          <Link href="/commissions" className="underline text-primary">
+            Commissions
+          </Link>
        </p>
        <div>
          <SocialLinks />
        </div>
      </div>
-    </div >
+    </div>
  );
-}
+}
--- a/src/app/(normal)/tos/page.tsx
+++ b/src/app/(normal)/tos/page.tsx
@ -1,10 +1,10 @@
-import { prisma } from '@/lib/prisma';
-import ReactMarkdown from 'react-markdown';
+import { prisma } from "@/lib/prisma";
+import ReactMarkdown from "react-markdown";

 export default async function TosPage() {
  const tos = await prisma.termsOfService.findFirst({
    orderBy: [{ version: "desc" }],
-  })
+  });

  return (
    <div className="mx-auto w-full max-w-6xl px-4 py-8">
@ -13,4 +13,4 @@ export default async function TosPage() {
      </div>
    </div>
  );
-}
+}
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <main className="relative min-h-screen overflow-hidden">
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute -left-16 top-6 h-60 w-60 rounded-full bg-destructive/15 blur-3xl" />
+        <div className="absolute right-0 bottom-0 h-72 w-72 rounded-full bg-primary/20 blur-3xl" />
+      </div>
+
+      <div className="relative mx-auto flex min-h-screen w-full max-w-3xl flex-col items-center justify-center gap-6 px-6 py-16 text-center">
+        <div className="rounded-full border border-border/60 bg-card px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+          Something went wrong
+        </div>
+        <h1 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl">
+          We hit a snag.
+        </h1>
+        <p className="text-base text-muted-foreground">
+          The page failed to load. You can try again or head back home.
+        </p>
+        <div className="flex flex-wrap items-center justify-center gap-3">
+          <Button size="lg" onClick={reset}>
+            Try again
+          </Button>
+          <Button asChild size="lg" variant="outline">
+            <Link href="/">Go home</Link>
+          </Button>
+        </div>
+        <div className="rounded-2xl border border-border/60 bg-card/70 px-4 py-3 text-xs text-muted-foreground">
+          {error.digest ? `Error ID: ${error.digest}` : "Unexpected error"}
+        </div>
+      </div>
+    </main>
+  );
+}
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <body className="bg-background text-foreground">
+        <main className="relative min-h-screen overflow-hidden">
+          <div className="pointer-events-none absolute inset-0">
+            <div className="absolute -left-24 top-0 h-64 w-64 rounded-full bg-destructive/15 blur-3xl" />
+            <div className="absolute right-0 bottom-0 h-80 w-80 rounded-full bg-primary/20 blur-3xl" />
+          </div>
+
+          <div className="relative mx-auto flex min-h-screen w-full max-w-3xl flex-col items-center justify-center gap-6 px-6 py-16 text-center">
+            <div className="rounded-full border border-border/60 bg-card px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+              Critical error
+            </div>
+            <h1 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl">
+              We could not recover.
+            </h1>
+            <p className="text-base text-muted-foreground">
+              A global error occurred. Try again or return home.
+            </p>
+            <div className="flex flex-wrap items-center justify-center gap-3">
+              <Button size="lg" onClick={reset}>
+                Retry
+              </Button>
+              <Button asChild size="lg" variant="outline">
+                <Link href="/">Go home</Link>
+              </Button>
+            </div>
+            <div className="rounded-2xl border border-border/60 bg-card/70 px-4 py-3 text-xs text-muted-foreground">
+              {error.digest ? `Error ID: ${error.digest}` : "Unexpected error"}
+            </div>
+          </div>
+        </main>
+      </body>
+    </html>
+  );
+}
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -105,6 +105,8 @@
  --border: oklch(0.3289 0.0092 268.3843);
  --input: oklch(0.3289 0.0092 268.3843);
  --ring: oklch(0.6132 0.2294 291.7437);
+  --hover: oklch(0.34 0.02 270);
+  --hover-foreground: var(--foreground);
  --chart-1: oklch(0.8003 0.1821 151.7110);
  --chart-2: oklch(0.6132 0.2294 291.7437);
  --chart-3: oklch(0.8077 0.1035 19.5706);
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@ -0,0 +1,17 @@
+export default function Loading() {
+  return (
+    <main className="relative flex min-h-screen items-center justify-center overflow-hidden">
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute -left-24 -top-24 h-72 w-72 rounded-full bg-primary/20 blur-3xl" />
+        <div className="absolute right-0 bottom-0 h-72 w-72 rounded-full bg-accent/30 blur-3xl" />
+      </div>
+      <div className="relative flex flex-col items-center gap-4 rounded-3xl border border-border/60 bg-card/70 px-10 py-12 shadow-lg">
+        <div className="h-10 w-10 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
+        <div className="text-sm font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+          Loading
+        </div>
+        <div className="text-xs text-muted-foreground">Preparing the gallery.</div>
+      </div>
+    </main>
+  );
+}
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@ -0,0 +1,48 @@
+import Link from "next/link";
+
+import { GameOfLifeMini } from "@/components/global/GameOfLifeMini";
+import { Button } from "@/components/ui/button";
+
+export default function NotFound() {
+  return (
+    <main className="relative min-h-screen overflow-hidden">
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute -left-32 -top-24 h-72 w-72 rounded-full bg-primary/15 blur-3xl" />
+        <div className="absolute right-0 top-10 h-64 w-64 rounded-full bg-accent/40 blur-3xl" />
+        <div className="absolute bottom-0 left-1/2 h-80 w-80 -translate-x-1/2 rounded-full bg-secondary/40 blur-3xl" />
+      </div>
+
+      <div className="relative mx-auto flex min-h-screen w-full max-w-6xl flex-col justify-center gap-10 px-6 py-16 lg:flex-row lg:items-center">
+        <section className="max-w-xl space-y-6">
+          <div className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-card px-3 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+            Lost and Found
+          </div>
+          <h1 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl">
+            Page not found.
+          </h1>
+          <p className="text-base text-muted-foreground">
+            This page wandered off. While we look for it, you can play a quick
+            Game of Life. Click cells to shape the pattern.
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <Button asChild size="lg">
+              <Link href="/">Return home</Link>
+            </Button>
+            <Button asChild variant="outline" size="lg">
+              <Link href="/artworks">Browse artworks</Link>
+            </Button>
+          </div>
+          <div className="rounded-2xl border border-border/60 bg-card/70 p-4 text-sm text-muted-foreground shadow-sm">
+            Tip: The gliders are shy. Try clicking five cells in an L shape.
+          </div>
+        </section>
+
+        <section className="w-full max-w-xl">
+          <div className="rounded-3xl border border-border/60 bg-card/70 p-5 shadow-lg">
+            <GameOfLifeMini />
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}
--- a/src/components/animalStudies/AnimalStudiesGallery.tsx
+++ b/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}
--- a/src/components/artworks/ContextBackButton.tsx
+++ b/src/components/artworks/ContextBackButton.tsx
@ -10,7 +10,7 @@ const FROM_TO_PATH: Record<string, string> = {
  "animal-index": "/artworks/animalstudies/index"
 };

-export function ContextBackButton() {
+export function ContextBackButton({ className }: { className?: string }) {
  const router = useRouter();
  const sp = useSearchParams();
  const from = sp.get("from") ?? "";
@ -19,7 +19,7 @@ export function ContextBackButton() {
  if (!target) return null;

  return (
-    <div className="w-full max-w-xl">
+    <div className={["w-full max-w-xl", className].filter(Boolean).join(" ")}>
      <Link
        href={target}
        className={[
--- a/src/components/commissions/CommissionCard.tsx
+++ b/src/components/commissions/CommissionCard.tsx
@ -1,52 +1,43 @@
-"use client"
+"use client";

-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import type { CommissionExtra, CommissionOption, CommissionType, CommissionTypeExtra, CommissionTypeOption } from "@/generated/prisma/client"
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type {
+  CommissionExtra,
+  CommissionOption,
+  CommissionType,
+  CommissionTypeExtra,
+  CommissionTypeOption,
+  Tag,
+} from "@/generated/prisma/client";
+import Link from "next/link";

 type CommissionTypeWithItems = CommissionType & {
  options: (CommissionTypeOption & {
-    option: CommissionOption | null
-  })[]
+    option: CommissionOption | null;
+  })[];
  extras: (CommissionTypeExtra & {
-    extra: CommissionExtra | null
-  })[]
-}
-
-export function CommissionCard({ commission }: { commission: CommissionTypeWithItems }) {
-  // const [open, setOpen] = useState(false)
+    extra: CommissionExtra | null;
+  })[];
+  tags: Tag[];
+};

+export function CommissionCard({
+  commission,
+}: {
+  commission: CommissionTypeWithItems;
+}) {
  return (
    <div className="flex flex-col h-full">
      <Card className="flex flex-col flex-1">
        <CardHeader>
          <CardTitle className="text-xl font-bold">{commission.name}</CardTitle>
-          <p className="text-muted-foreground text-sm">{commission.description}</p>
+          <p className="text-muted-foreground text-sm">
+            {commission.description}
+          </p>
        </CardHeader>

-        <CardContent className="flex flex-col justify-start gap-4">
-          {/* {examples && examples.length > 0 && (
-            <Collapsible open={open} onOpenChange={setOpen}>
-              <CollapsibleTrigger className="text-sm underline text-muted-foreground">
-                {open ? "Hide Examples" : "See Examples"}
-              </CollapsibleTrigger>
-              <CollapsibleContent asChild>
-                <div className="overflow-hidden transition-all data-[state=closed]:max-h-0 data-[state=open]:max-h-[300px]">
-                  <div className="flex gap-2 mt-2 overflow-x-auto">
-                    {examples.map((src, idx) => (
-                      <Image
-                        key={src + idx}
-                        src={src}
-                        width={100}
-                        height={100}
-                        alt={`${type.name} example ${idx + 1}`}
-                        className="h-24 w-auto rounded border"
-                      />
-                    ))}
-                  </div>
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
-          )} */}
+        <CardContent className="flex flex-col flex-1 justify-start gap-4">
          <div>
            <h4 className="font-semibold">Options</h4>
            <ul className="pl-4 list-disc">
@ -66,7 +57,9 @@ export function CommissionCard({ commission }: { commission: CommissionTypeWithI
          </div>

          <div>
-            {commission.extras.length > 0 && <h4 className="font-semibold">Extras</h4>}
+            {commission.extras.length > 0 && (
+              <h4 className="font-semibold">Extras</h4>
+            )}
            <ul className="pl-4 list-disc">
              {commission.extras.map((extra) => (
                <li key={extra.id}>
@ -82,16 +75,21 @@ export function CommissionCard({ commission }: { commission: CommissionTypeWithI
              ))}
            </ul>
          </div>
-
-          {/* <div className="flex flex-wrap gap-2">
-            {commission.extras.map((extra) => (
-              <Badge variant="outline" key={extra.id}>
-                {extra.extra?.name}
-              </Badge>
-            ))}
-          </div> */}
        </CardContent>
+        {commission.tags.length > 0 ? (
+          <div className="mt-auto px-6 pb-6">
+            <Link
+              href={`/portfolio/tagged?tags=${encodeURIComponent(
+                commission.tags.map((t) => t.slug).join(","),
+              )}`}
+            >
+              <Button variant="secondary" className="w-full">
+                View example artworks
+              </Button>
+            </Link>
+          </div>
+        ) : null}
      </Card>
    </div>
-  )
+  );
 }
--- a/src/components/commissions/CommissionCustomCard.tsx
+++ b/src/components/commissions/CommissionCustomCard.tsx
@ -1,5 +1,6 @@
 "use client";

+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
  Dialog,
@ -8,8 +9,10 @@ import {
  DialogTitle,
  DialogTrigger,
 } from "@/components/ui/dialog";
+import type { Tag } from "@/generated/prisma/client";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
+import Link from "next/link";

 type CustomCardOption = {
  id: string;
@ -33,6 +36,7 @@ export type CommissionCustomCardWithItems = {
  description: string | null;
  referenceImageUrl: string | null;
  isSpecialOffer: boolean;
+  tags: Tag[];
  options: CustomCardOption[];
  extras: CustomCardExtra[];
 };
@ -50,7 +54,7 @@ export function CommissionCustomCard({
            "flex flex-col h-full relative shadow-sm",
            card.isSpecialOffer
              ? "border-2 border-primary/50"
-              : "border-border"
+              : "border-border",
          )}
        >
          {card.isSpecialOffer ? (
@ -143,6 +147,19 @@ export function CommissionCustomCard({
              </ul>
            </div>
          </CardContent>
+          {card.tags.length > 0 ? (
+            <div className="mt-auto px-6 pb-6">
+              <Link
+                href={`/portfolio/tagged?tags=${encodeURIComponent(
+                  card.tags.map((t) => t.slug).join(","),
+                )}`}
+              >
+                <Button variant="secondary" className="w-full">
+                  View example artworks
+                </Button>
+              </Link>
+            </div>
+          ) : null}
        </Card>
      </div>
    </div>
--- a/src/components/gallery/JustifiedGallery.tsx
+++ b/src/components/gallery/JustifiedGallery.tsx
@ -1,6 +1,9 @@
 "use client";

+import NsfwBadge from "@/components/nsfw/NsfwBadge";
+import NsfwConsentDialog from "@/components/nsfw/NsfwConsentDialog";
 import { cn } from "@/lib/utils";
+import { useNsfwStore } from "@/stores/nsfw-store";
 import Image from "next/image";
 import Link from "next/link";
 import {
@ -24,6 +27,9 @@ export type JustifiedGalleryItem = {

  /** Optional: dominant color for hover ring. */
  dominantHex?: string | null;
+
+  /** Optional: NSFW flag */
+  nsfw?: boolean | null;
 };

 type Props = {
@ -44,6 +50,10 @@ type Props = {
  maxRowItems?: number; // desktop
  maxRowItemsMobile?: number; // <640px
  gap?: number; // px
+  gapNarrow?: number; // px for narrower containers
+  gapNarrowMaxWidth?: number; // px breakpoint for gapNarrow
+  gapBreakpoints?: Array<{ maxWidth: number; gap: number }>;
+  debug?: boolean;
  className?: string;
 };

@ -84,11 +94,39 @@ export default function JustifiedGallery({
  maxRowItems = 5,
  maxRowItemsMobile = 3,
  gap = 12,
+  gapNarrow,
+  gapNarrowMaxWidth = 720,
+  gapBreakpoints,
+  debug = false,
  className,
 }: Props) {
+  const consent = useNsfwStore((s) => s.consent);
+  const allowNsfw = consent === "allow";
+  const hasNsfw = useMemo(() => items.some((i) => i.nsfw), [items]);
+
  const containerRef = useRef<HTMLDivElement | null>(null);
  const sentinelRef = useRef<HTMLDivElement | null>(null);
  const [containerWidth, setContainerWidth] = useState(0);
+  const effectiveGap = (() => {
+    if (gapBreakpoints && containerWidth > 0) {
+      const sorted = [...gapBreakpoints].sort(
+        (a, b) => a.maxWidth - b.maxWidth,
+      );
+      for (const bp of sorted) {
+        if (containerWidth <= bp.maxWidth) return bp.gap;
+      }
+    }
+
+    if (
+      gapNarrow != null &&
+      containerWidth > 0 &&
+      containerWidth <= gapNarrowMaxWidth
+    ) {
+      return gapNarrow;
+    }
+
+    return gap;
+  })();

  // Measure container width (responsive)
  useEffect(() => {
@ -125,7 +163,12 @@ export default function JustifiedGallery({

    const isMobile = containerWidth < 640;
    const targetH = isMobile ? targetRowHeightMobile : targetRowHeight;
-    const maxItems = isMobile ? maxRowItemsMobile : maxRowItems;
+    const maxItems = (() => {
+      if (containerWidth < 480) return Math.min(2, maxRowItemsMobile);
+      if (containerWidth < 720) return Math.min(3, maxRowItems);
+      if (containerWidth < 1024) return Math.min(4, maxRowItems);
+      return maxRowItems;
+    })();

    const rowTiles: RowTile[][] = [];
    let current: Array<{ item: JustifiedGalleryItem; aspect: number }> = [];
@ -136,7 +179,7 @@ export default function JustifiedGallery({
    const flush = () => {
      if (current.length === 0) return;

-      const gaps = gap * (current.length - 1);
+      const gaps = effectiveGap * (current.length - 1);
      const widthWithoutGaps = Math.max(0, available - gaps);

      // Compute row height so it exactly fills the row width.
@ -155,21 +198,64 @@ export default function JustifiedGallery({
      aspectSum = 0;
    };

-    for (const it of items) {
+    const workingItems = items.slice();
+
+    for (let i = 0; i < workingItems.length; i += 1) {
+      const it = workingItems[i];
      const a = aspectOf(it);

      current.push({ item: it, aspect: a });
      aspectSum += a;

      // Estimate the row width if we were to keep targetH
-      const estimatedWidth = aspectSum * targetH + gap * (current.length - 1);
+      const estimatedWidth =
+        aspectSum * targetH + effectiveGap * (current.length - 1);

      // If we've filled the row (or reached max items) and have at least 2 tiles, flush.
      if (
        (estimatedWidth >= available || current.length >= maxItems) &&
        current.length > 1
      ) {
-        flush();
+        const gaps = effectiveGap * (current.length - 1);
+        const widthWithoutGaps = Math.max(0, available - gaps);
+        const computedH = widthWithoutGaps / aspectSum;
+
+        // If the row would be shorter than maxRowHeight, reduce items and flush.
+        if (computedH < maxRowHeight && current.length > 1) {
+          const last = current.pop();
+          if (last) {
+            aspectSum -= last.aspect;
+          }
+
+          const limit = widthWithoutGaps / maxRowHeight;
+          let swapped = false;
+
+          for (let look = 1; look <= 2; look += 1) {
+            const idx = i + look;
+            if (idx >= workingItems.length) break;
+            const candidate = workingItems[idx];
+            const candidateAspect = aspectOf(candidate);
+
+            if (aspectSum + candidateAspect <= limit) {
+              workingItems[idx] = last?.item ?? candidate;
+              current.push({ item: candidate, aspect: candidateAspect });
+              aspectSum += candidateAspect;
+              swapped = true;
+              break;
+            }
+          }
+
+          flush();
+          if (!swapped && last) {
+            current = [last];
+            aspectSum = last.aspect;
+          } else {
+            current = [];
+            aspectSum = 0;
+          }
+        } else {
+          flush();
+        }
      }
    }

@ -178,7 +264,7 @@ export default function JustifiedGallery({
  }, [
    items,
    containerWidth,
-    gap,
+    effectiveGap,
    targetRowHeight,
    targetRowHeightMobile,
    maxRowHeight,
@ -192,27 +278,53 @@ export default function JustifiedGallery({
    return `${first}-${last}-${row.length}`;
  }, []);

+  const isSmallScreen = containerWidth < 640;
+
  return (
    <div
      ref={containerRef}
      className={cn("mx-auto w-full max-w-6xl", className)}
    >
+      <NsfwConsentDialog hasNsfw={hasNsfw} />
      <div className="space-y-3">
-        {rows.map((row) => (
-          <div
-            key={getRowKey(row)}
-            className="flex justify-center"
-            style={{ gap }}
-          >
-            {row.map((t) => (
-              <GalleryTile
-                key={t.item.id}
-                tile={t}
-                hrefBase={hrefBase}
-                hrefFrom={hrefFrom}
-                showCaption={showCaption}
-              />
-            ))}
+        {rows.map((row, idx) => (
+          <div key={getRowKey(row)}>
+            <div
+              className={cn(
+                "flex",
+                row.length === 1 && (isSmallScreen || idx !== rows.length - 1)
+                  ? "justify-center"
+                  : idx === rows.length - 1
+                    ? "justify-start"
+                    : "justify-between",
+              )}
+              style={{ columnGap: effectiveGap }}
+            >
+              {row.map((t) => (
+                <GalleryTile
+                  key={t.item.id}
+                  tile={t}
+                  hrefBase={hrefBase}
+                  hrefFrom={hrefFrom}
+                  showCaption={showCaption}
+                  allowNsfw={allowNsfw}
+                />
+              ))}
+            </div>
+            {debug ? (
+              <div className="text-xs text-muted-foreground font-mono">
+                {`row ${idx + 1} | h=${Math.round(row[0]?.h ?? 0)} | w=${Math.round(
+                  row.reduce((sum, t) => sum + t.w, 0) +
+                  effectiveGap * (row.length - 1),
+                )} | items=${row.length} | `}
+                {row
+                  .map(
+                    (t) =>
+                      `${t.item.id}:${Math.round(t.w)}x${Math.round(t.h)} (src ${t.item.width}x${t.item.height})`,
+                  )
+                  .join(" | ")}
+              </div>
+            ) : null}
          </div>
        ))}
      </div>
@ -230,16 +342,20 @@ function GalleryTile({
  hrefBase,
  hrefFrom,
  showCaption,
+  allowNsfw,
 }: {
  tile: RowTile;
  hrefBase: string;
  hrefFrom: string;
  showCaption: boolean;
+  allowNsfw: boolean;
 }) {
  const { item, w, h } = tile;

  const href = `${hrefBase}/${item.id}?from=${encodeURIComponent(hrefFrom)}`;
  const src = `/api/image/gallery/${item.fileKey}.webp`;
+  const isNsfw = Boolean(item.nsfw);
+  const shouldBlur = isNsfw && !allowNsfw;

  const style: CSSProperties & { "--dom"?: string } = {};
  const dom = normalizeColor(item.dominantHex);
@ -274,11 +390,26 @@ function GalleryTile({
        alt={item.altText ?? item.name ?? "Artwork"}
        width={w}
        height={h}
-        className="h-full w-full object-cover"
+        className={cn(
+          "h-full w-full object-cover transition-[filter,transform] duration-200",
+          shouldBlur ? "blur-2xl scale-[1.02]" : "blur-0",
+        )}
        // Tiles are thumbnail-ish; bias Next toward small resources.
        sizes="(max-width: 640px) 90vw, (max-width: 1024px) 50vw, 320px"
      />

+      {isNsfw ? (
+        shouldBlur ? null : (
+          <NsfwBadge className="absolute left-2 bottom-2 z-10" />
+        )
+      ) : null}
+
+      {shouldBlur ? (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/45">
+          <NsfwBadge className="scale-110 shadow-md" />
+        </div>
+      ) : null}
+
      {showCaption ? (
        <div className="pointer-events-none absolute inset-x-0 top-0 bg-black/60 p-3">
          <div className="text-sm font-medium text-white line-clamp-1">
--- a/src/components/global/GameOfLifeMini.tsx
+++ b/src/components/global/GameOfLifeMini.tsx
@ -0,0 +1,200 @@
+"use client";
+
+import type { MouseEvent } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+
+function createGrid(cols: number, rows: number) {
+  return Array.from({ length: rows }, () => Array.from({ length: cols }, () => 0));
+}
+
+function seedRandom(grid: number[][], density: number) {
+  for (let y = 0; y < grid.length; y += 1) {
+    for (let x = 0; x < grid[0].length; x += 1) {
+      grid[y][x] = Math.random() < density ? 1 : 0;
+    }
+  }
+}
+
+function stepGrid(grid: number[][]) {
+  const rows = grid.length;
+  const cols = grid[0]?.length ?? 0;
+  const next = createGrid(cols, rows);
+
+  for (let y = 0; y < rows; y += 1) {
+    const yPrev = (y - 1 + rows) % rows;
+    const yNext = (y + 1) % rows;
+    for (let x = 0; x < cols; x += 1) {
+      const xPrev = (x - 1 + cols) % cols;
+      const xNext = (x + 1) % cols;
+      const neighbors =
+        grid[yPrev][xPrev] +
+        grid[yPrev][x] +
+        grid[yPrev][xNext] +
+        grid[y][xPrev] +
+        grid[y][xNext] +
+        grid[yNext][xPrev] +
+        grid[yNext][x] +
+        grid[yNext][xNext];
+
+      if (grid[y][x]) {
+        next[y][x] = neighbors === 2 || neighbors === 3 ? 1 : 0;
+      } else {
+        next[y][x] = neighbors === 3 ? 1 : 0;
+      }
+    }
+  }
+
+  return next;
+}
+
+export function GameOfLifeMini() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [running, setRunning] = useState(true);
+  const [speed, setSpeed] = useState(6);
+  const cellSize = 10;
+  const width = 420;
+  const height = 260;
+
+  const { rows, cols } = useMemo(
+    () => ({
+      cols: Math.floor(width / cellSize),
+      rows: Math.floor(height / cellSize),
+    }),
+    [],
+  );
+
+  const gridRef = useRef<number[][]>(createGrid(cols, rows));
+
+  useEffect(() => {
+    gridRef.current = createGrid(cols, rows);
+    seedRandom(gridRef.current, 0.22);
+  }, [cols, rows]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let raf = 0;
+    let last = performance.now();
+    const tickMs = 1000 / speed;
+
+    const draw = () => {
+      ctx.clearRect(0, 0, width, height);
+      ctx.fillStyle = "#141414";
+      ctx.fillRect(0, 0, width, height);
+
+      const grid = gridRef.current;
+      ctx.fillStyle = "#f2f2f2";
+      for (let y = 0; y < rows; y += 1) {
+        for (let x = 0; x < cols; x += 1) {
+          if (grid[y][x]) {
+            ctx.fillRect(
+              x * cellSize,
+              y * cellSize,
+              cellSize - 1,
+              cellSize - 1,
+            );
+          }
+        }
+      }
+    };
+
+    const loop = (now: number) => {
+      if (running && now - last >= tickMs) {
+        gridRef.current = stepGrid(gridRef.current);
+        last = now;
+      }
+      draw();
+      raf = requestAnimationFrame(loop);
+    };
+
+    raf = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(raf);
+  }, [running, speed, cols, rows]);
+
+  const handleToggleCell = (event: MouseEvent<HTMLCanvasElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = Math.floor((event.clientX - rect.left) / cellSize);
+    const y = Math.floor((event.clientY - rect.top) / cellSize);
+    if (x < 0 || y < 0 || y >= rows || x >= cols) return;
+    gridRef.current[y][x] = gridRef.current[y][x] ? 0 : 1;
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+            Game of Life
+          </div>
+          <div className="text-xs text-muted-foreground">
+            Click to toggle cells. Space-time improvisation.
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant={running ? "secondary" : "default"}
+            onClick={() => setRunning((prev) => !prev)}
+          >
+            {running ? "Pause" : "Play"}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              gridRef.current = createGrid(cols, rows);
+            }}
+          >
+            Clear
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              gridRef.current = createGrid(cols, rows);
+              seedRandom(gridRef.current, 0.22);
+            }}
+          >
+            Randomize
+          </Button>
+        </div>
+      </div>
+
+      <div className="rounded-2xl border border-border/60 bg-background/60 p-3 shadow-sm">
+        <canvas
+          ref={canvasRef}
+          width={width}
+          height={height}
+          onClick={handleToggleCell}
+          className="h-65 w-full rounded-xl border border-border/40 bg-black"
+        />
+      </div>
+
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <span>Speed</span>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => setSpeed((prev) => Math.max(2, prev - 1))}
+          >
+            -
+          </Button>
+          <span className="min-w-6 text-center tabular-nums">{speed}</span>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => setSpeed((prev) => Math.min(12, prev + 1))}
+          >
+            +
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/global/Header.tsx
+++ b/src/components/global/Header.tsx
@ -1,14 +1,20 @@
 import ModeToggle from "./ModeToggle";
+import NsfwModeToggle from "./NsfwModeToggle";
 import TopNav from "./TopNav";

 export default function Header() {

  return (
    <div className="w-full">
-      <div className="flex items-center justify-between px-4 md:px-8 py-2">
-        <TopNav />
-        <ModeToggle />
+      <div className="flex w-full items-center gap-4 px-4 md:px-8 py-2">
+        <div className="flex-1 min-w-0">
+          <TopNav />
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <NsfwModeToggle />
+          <ModeToggle />
+        </div>
      </div>
    </div>
  );
-}
+}
--- a/src/components/global/NsfwModeToggle.tsx
+++ b/src/components/global/NsfwModeToggle.tsx
@ -0,0 +1,42 @@
+"use client";
+
+import { Eye, EyeOff } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useNsfwStore } from "@/stores/nsfw-store";
+
+export default function NsfwModeToggle() {
+  const consent = useNsfwStore((s) => s.consent);
+  const setConsent = useNsfwStore((s) => s.setConsent);
+
+  const enabled = consent === "allow";
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          {enabled ? (
+            <Eye className="h-[1.2rem] w-[1.2rem]" />
+          ) : (
+            <EyeOff className="h-[1.2rem] w-[1.2rem]" />
+          )}
+          <span className="sr-only">Toggle NSFW mode</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setConsent("allow")}>
+          Allow NSFW Content
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setConsent("deny")}>
+          Hide NSFW Content
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
--- a/src/components/global/TopNav.tsx
+++ b/src/components/global/TopNav.tsx
@ -1,45 +1,222 @@
 "use client"

-import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
-import { Menu } from "lucide-react";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
+import { ChevronDown, Ellipsis, Menu } from "lucide-react";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Button } from "../ui/button";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";

 const links = [
-  { href: "/", label: "Home" },
-  { href: "/artworks", label: "Portfolio" },
-  { href: "/artworks/animalstudies", label: "Animal Studies" },
-  { href: "/commissions", label: "Commissions" },
-  { href: "/commissions/status", label: "Commission Status" },
-  { href: "/tos", label: "Terms of Service" },
-  // { href: "/portfolio/artfight", label: "Artfight" },
-  // { href: "/portfolio/minis", label: "Miniatures" },
-  // { href: "/commissions", label: "Commissions" },
-  // { href: "/ych", label: "YCH / Custom offers" },
-  // { href: "/todo", label: "todo (temp)" },
+  { type: "link" as const, href: "/", label: "Home" },
+  { type: "link" as const, href: "/artworks", label: "Portfolio" },
+  {
+    type: "dropdown" as const,
+    label: "Categories",
+    items: [
+      { href: "/artworks/animalstudies", label: "Animal Studies" },
+      // { href: "/artworks/artfight", label: "Artfight" }
+    ],
+  },
+  // { type: "link" as const, href: "/miniatures", label: "Miniatures" },
+  { 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() {
  const [open, setOpen] = useState(false)
+  const requiredLinks = [
+    links[0], // Home
+    links[1], // Portfolio
+    links[2], // Commissions
+  ];
+  const flexibleLinks = links.filter((link) => !requiredLinks.includes(link));
+  const [visibleCount, setVisibleCount] = useState(flexibleLinks.length);
+  const listRef = useRef<HTMLUListElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const measureListRef = useRef<HTMLUListElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const visibleLinks = [...requiredLinks, ...flexibleLinks.slice(0, visibleCount)];
+  const overflowLinks = flexibleLinks.slice(visibleCount);
+  const showMore = overflowLinks.length > 0;
+
+  useEffect(() => {
+    const containerEl = containerRef.current;
+    if (!containerEl) return;
+    const update = () => {
+      setContainerWidth(containerEl.getBoundingClientRect().width);
+    };
+    const ro = new ResizeObserver(update);
+    ro.observe(containerEl);
+    window.addEventListener("resize", update);
+    update();
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    const measureEl = measureListRef.current;
+    if (!measureEl || !containerWidth) return;
+    const items = Array.from(measureEl.children) as HTMLElement[];
+    if (!items.length) return;
+
+    const moreItem = items[items.length - 1];
+    const moreWidth = moreItem.getBoundingClientRect().width;
+    const itemWidths = items.slice(0, -1).map((el) => el.getBoundingClientRect().width);
+
+    const requiredIndexes = new Set([0, 1, 4]);
+    let requiredWidth = 0;
+    const flexibleWidths: number[] = [];
+    itemWidths.forEach((w, idx) => {
+      if (requiredIndexes.has(idx)) {
+        requiredWidth += w;
+      } else {
+        flexibleWidths.push(w);
+      }
+    });
+
+    const totalFlexibleWidth = flexibleWidths.reduce((a, b) => a + b, 0);
+    let nextVisibleCount = flexibleLinks.length;
+    const safetyPadding = 24;
+
+    if (requiredWidth + totalFlexibleWidth + safetyPadding > containerWidth) {
+      let available = containerWidth - requiredWidth - moreWidth - safetyPadding;
+      if (available < 0) available = 0;
+      let fit = 0;
+      let used = 0;
+      for (const w of flexibleWidths) {
+        if (used + w > available) break;
+        used += w;
+        fit += 1;
+      }
+      nextVisibleCount = fit;
+    }
+
+    if (nextVisibleCount !== visibleCount) {
+      setVisibleCount(nextVisibleCount);
+    }
+
+  }, [containerWidth, flexibleLinks.length, visibleCount]);

  return (
    <div className="w-full flex items-center justify-between">
      {/* Desktop Nav */}
-      <div className="hidden md:flex">
-        <NavigationMenu>
-          <NavigationMenuList>
-            {links.map(({ href, label }) => (
-              <NavigationMenuItem key={href}>
-                <NavigationMenuLink
-                  asChild
-                  className={`${navigationMenuTriggerStyle()} hover:bg-hover data-active:bg-hover focus:bg-hover active:bg-hover`}
-                >
-                  <Link href={href}>{label}</Link>
-                </NavigationMenuLink>
+      <div className="hidden md:flex flex-1 min-w-0">
+        <NavigationMenu
+          viewport={false}
+          delayDuration={0}
+          skipDelayDuration={0}
+          className="w-full min-w-0 max-w-none"
+        >
+          <div ref={containerRef} className="w-full max-w-full min-w-0">
+            <NavigationMenuList
+              ref={listRef}
+              className="w-full flex-nowrap justify-start min-w-0"
+            >
+              {visibleLinks.map((item) => {
+                if (item.type === "dropdown") {
+                  return (
+                    <NavigationMenuItem key={item.label}>
+                      <NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
+                        {item.label}
+                      </NavigationMenuTrigger>
+                      <NavigationMenuContent className="z-50">
+                        <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>
+                );
+              })}
+              {showMore ? (
+                <NavigationMenuItem>
+                  <NavigationMenuTrigger className="hover:bg-hover data-[state=open]:bg-hover">
+                    <Ellipsis className="h-4 w-4" />
+                  </NavigationMenuTrigger>
+                  <NavigationMenuContent className="z-50">
+                    <ul className="min-w-48">
+                      {overflowLinks.map((item) => {
+                        if (item.type === "dropdown") {
+                          return (
+                            <li key={item.label}>
+                              <div className="px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground">
+                                {item.label}
+                              </div>
+                              <ul className="pl-2">
+                                {item.items.map(({ href, label }) => (
+                                  <li key={href}>
+                                    <NavigationMenuLink asChild className="w-full hover:bg-hover">
+                                      <Link href={href}>{label}</Link>
+                                    </NavigationMenuLink>
+                                  </li>
+                                ))}
+                              </ul>
+                            </li>
+                          );
+                        }
+
+                        return (
+                          <li key={item.href}>
+                            <NavigationMenuLink asChild className="w-full hover:bg-hover">
+                              <Link href={item.href}>{item.label}</Link>
+                            </NavigationMenuLink>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+              ) : null}
+            </NavigationMenuList>
+          </div>
+        </NavigationMenu>
+      </div>
+
+      <div className="absolute left-0 top-0 -z-10 opacity-0 pointer-events-none">
+        <NavigationMenu viewport={false} delayDuration={0} skipDelayDuration={0}>
+          <NavigationMenuList ref={measureListRef} className="flex-nowrap">
+            {links.map((item) => (
+              <NavigationMenuItem key={`measure-${item.type === "dropdown" ? item.label : item.href}`}>
+                <div className={navigationMenuTriggerStyle()}>
+                  {item.type === "dropdown" ? (
+                    <span className="inline-flex items-center gap-1">
+                      {item.label}
+                      <ChevronDown className="h-3 w-3" />
+                    </span>
+                  ) : (
+                    item.label
+                  )}
+                </div>
              </NavigationMenuItem>
            ))}
+            <NavigationMenuItem>
+              <div className={navigationMenuTriggerStyle()}>
+                <Ellipsis className="h-4 w-4" />
+              </div>
+            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </div>
@ -56,17 +233,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 }) => (
-                <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>
-              ))}
+              {links.map((item) => {
+                if (item.type === "dropdown") {
+                  return (
+                    <div key={item.label} className="px-2">
+                      <div className="px-2 py-1 text-xs uppercase tracking-wide text-muted-foreground">
+                        {item.label}
+                      </div>
+                      <div className="flex flex-col">
+                        {item.items.map(({ href, label }) => (
+                          <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>
--- a/src/components/global/UnderConstruction.tsx
+++ b/src/components/global/UnderConstruction.tsx
@ -0,0 +1,55 @@
+import { cn } from "@/lib/utils";
+import { Construction } from "lucide-react";
+import Link from "next/link";
+
+export default function UnderConstruction({
+  title = "Under Construction",
+  subtitle = "Artfight is getting its finishing touches.",
+  note = "Check back soon for the full gallery.",
+  actionHref = "/artworks",
+  actionLabel = "Back to Portfolio",
+}: {
+  title?: string;
+  subtitle?: string;
+  note?: string;
+  actionHref?: string;
+  actionLabel?: string;
+}) {
+  return (
+    <section className="relative overflow-hidden rounded-3xl border border-border bg-background/80 px-6 py-10 shadow-sm sm:px-10 sm:py-14">
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,var(--color-muted)_0%,transparent_55%)] opacity-70" />
+      <div className="pointer-events-none absolute left-0 top-0 h-2 w-full bg-[repeating-linear-gradient(135deg,#7f1d1d_0px,#7f1d1d_8px,#ffffff_8px,#ffffff_16px)]" />
+
+      <div className="relative flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
+        <div className="max-w-xl space-y-4">
+          <div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1 text-xs font-medium uppercase tracking-widest text-muted-foreground">
+            <Construction className="h-3.5 w-3.5 text-foreground/70" />
+            Under construction
+          </div>
+          <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
+            {title}
+          </h1>
+          <p className="text-base text-muted-foreground sm:text-lg">
+            {subtitle}
+          </p>
+          <p className="text-sm text-muted-foreground/80">{note}</p>
+          <Link
+            href={actionHref}
+            className={cn(
+              "inline-flex items-center justify-center rounded-full border border-border bg-foreground px-4 py-2 text-sm font-medium text-background",
+              "transition hover:-translate-y-0.5 hover:bg-foreground/90"
+            )}
+          >
+            {actionLabel}
+          </Link>
+        </div>
+
+        <div className="relative mx-auto w-full max-w-md">
+          <div className="relative flex flex-col items-center justify-center gap-4 p-4">
+            <Construction className="h-20 w-20 text-red-800" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/nsfw/NsfwBadge.tsx
+++ b/src/components/nsfw/NsfwBadge.tsx
@ -0,0 +1,19 @@
+"use client";
+
+import { EyeOff } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export default function NsfwBadge({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full bg-black/70 px-2 py-1 text-xs font-semibold text-white shadow-sm",
+        className,
+      )}
+    >
+      <EyeOff className="h-3 w-3" />
+      NSFW
+    </div>
+  );
+}
--- a/src/components/nsfw/NsfwConsentDialog.tsx
+++ b/src/components/nsfw/NsfwConsentDialog.tsx
@ -0,0 +1,75 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { EyeOff } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { useNsfwStore } from "@/stores/nsfw-store";
+
+export default function NsfwConsentDialog({ hasNsfw }: { hasNsfw: boolean }) {
+  const consent = useNsfwStore((s) => s.consent);
+  const setConsent = useNsfwStore((s) => s.setConsent);
+
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!hasNsfw) {
+      setOpen(false);
+      return;
+    }
+    if (consent === "unset") setOpen(true);
+    else setOpen(false);
+  }, [hasNsfw, consent]);
+
+  if (!hasNsfw) return null;
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next && consent === "unset") return;
+        setOpen(next);
+      }}
+    >
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <EyeOff className="h-5 w-5 text-destructive" />
+            Sensitive Content
+          </DialogTitle>
+          <DialogDescription>
+            Sensitive artworks ahead. Confirm you’re 18+ to view it. You can
+            change this anytime with the NSFW toggle in the header.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => {
+              setConsent("deny");
+              setOpen(false);
+            }}
+          >
+            Keep blurred
+          </Button>
+          <Button
+            onClick={() => {
+              setConsent("allow");
+              setOpen(false);
+            }}
+          >
+            I’m 18+ · Show
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/components/nsfw/NsfwImage.tsx
+++ b/src/components/nsfw/NsfwImage.tsx
@ -0,0 +1,47 @@
+"use client";
+
+import Image, { type ImageProps } from "next/image";
+
+import { cn } from "@/lib/utils";
+import { useNsfwStore } from "@/stores/nsfw-store";
+
+import NsfwBadge from "./NsfwBadge";
+
+type NsfwImageProps = ImageProps & {
+  nsfw?: boolean;
+  wrapperClassName?: string;
+};
+
+export default function NsfwImage({
+  nsfw = false,
+  wrapperClassName,
+  className,
+  ...props
+}: NsfwImageProps) {
+  const consent = useNsfwStore((s) => s.consent);
+  const allowNsfw = consent === "allow";
+  const shouldBlur = nsfw && !allowNsfw;
+
+  return (
+    <div>
+      <Image
+        {...props}
+        className={cn(
+          "transition-[filter,transform] duration-200",
+          shouldBlur ? "blur-2xl scale-[1.02]" : "blur-0",
+          className,
+        )}
+      />
+
+      {nsfw ? shouldBlur ? null : (
+        <NsfwBadge className="absolute left-2 bottom-2 z-10" />
+      ) : null}
+
+      {shouldBlur ? (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/45">
+          <NsfwBadge className="scale-110 shadow-md" />
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/src/components/nsfw/NsfwLink.tsx
+++ b/src/components/nsfw/NsfwLink.tsx
@ -0,0 +1,38 @@
+"use client";
+
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { useNsfwStore } from "@/stores/nsfw-store";
+
+export default function NsfwLink({
+  href,
+  nsfw = false,
+  className,
+  children,
+}: {
+  href: string;
+  nsfw?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const consent = useNsfwStore((s) => s.consent);
+  const allowNsfw = consent === "allow";
+  const blocked = nsfw && !allowNsfw;
+
+  if (blocked) {
+    return (
+      <div
+        className={cn("block cursor-not-allowed", className)}
+        aria-disabled="true"
+      >
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <Link href={href} className={cn("block", className)}>
+      {children}
+    </Link>
+  );
+}
--- a/src/components/portfolio/PortfolioGallery.tsx
+++ b/src/components/portfolio/PortfolioGallery.tsx
@ -31,6 +31,12 @@ export default function PortfolioGallery({
  const [items, setItems] = useState<PortfolioArtworkItem[]>([]);
  const [done, setDone] = useState(false);
  const [loading, setLoading] = useState(false);
+  const showScreenDebug = false;
+  const [screen, setScreen] = useState<{
+    width: number;
+    height: number;
+    dpr: number;
+  } | null>(null);

  const inFlight = useRef(false);
  const doneRef = useRef(false);
@ -80,27 +86,48 @@ export default function PortfolioGallery({
    void loadMore();
  }, [loadMore]);

+  useEffect(() => {
+    if (!showScreenDebug) return;
+
+    const update = () => {
+      setScreen({
+        width: window.innerWidth,
+        height: window.innerHeight,
+        dpr: window.devicePixelRatio || 1,
+      });
+    };
+
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("orientationchange", update);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("orientationchange", update);
+    };
+  }, []);
+
  const galleryItems: JustifiedGalleryItem[] = items.map((it) => ({
    id: it.id,
    name: it.name,
    altText: it.altText,
+    nsfw: it.nsfw,
    fileKey: it.fileKey,
    width: it.thumbW,
    height: it.thumbH,
    dominantHex: it.dominantHex,
  }));

-  useEffect(() => {
-    if (items.length === 0) return;
-    // Debug: inspect dominantHex values coming from the server.
-    console.log(
-      "[PortfolioGallery] dominantHex sample",
-      items.slice(0, 5).map((it) => ({
-        id: it.id,
-        dominantHex: it.dominantHex,
-      }))
-    );
-  }, [items]);
+  // useEffect(() => {
+  //   if (items.length === 0) return;
+  //   // Debug: inspect dominantHex values coming from the server.
+  //   console.log(
+  //     "[PortfolioGallery] dominantHex sample",
+  //     items.slice(0, 5).map((it) => ({
+  //       id: it.id,
+  //       dominantHex: it.dominantHex,
+  //     }))
+  //   );
+  // }, [items]);

  if (!loading && done && galleryItems.length === 0) {
    return (
@ -111,17 +138,28 @@ export default function PortfolioGallery({
  }

  return (
-    <div className="w-full">
+    <div className="relative w-full">
+      {showScreenDebug && screen ? (
+        <div className="pointer-events-none absolute right-2 top-2 z-10 rounded border border-border/60 bg-background/80 px-2 py-1 text-[11px] font-mono text-muted-foreground shadow-sm">
+          Screen {screen.width} × {screen.height} · {screen.dpr}x
+        </div>
+      ) : null}
      <JustifiedGallery
        items={galleryItems}
        hrefFrom="portfolio"
        showCaption={false}
+        debug={false}
        targetRowHeight={160}
        targetRowHeightMobile={160}
        maxRowHeight={300}
        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}
--- a/src/components/portfolio/TaggedGallery.tsx
+++ b/src/components/portfolio/TaggedGallery.tsx
@ -0,0 +1,118 @@
+"use client";
+
+import type {
+  Cursor,
+  TaggedArtworkItem,
+} from "@/actions/portfolio/getTaggedArtworksPage";
+import { getTaggedArtworksPage } from "@/actions/portfolio/getTaggedArtworksPage";
+import JustifiedGallery, {
+  type JustifiedGalleryItem,
+} from "@/components/gallery/JustifiedGallery";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+export default function TaggedGallery({ tagSlugs }: { tagSlugs: string[] }) {
+  const normalizedSlugs = useMemo(
+    () => tagSlugs.map((s) => s.trim()).filter(Boolean),
+    [tagSlugs],
+  );
+  const resetKey = useMemo(
+    () => normalizedSlugs.slice().sort().join(","),
+    [normalizedSlugs],
+  );
+
+  const [items, setItems] = useState<TaggedArtworkItem[]>([]);
+  const [done, setDone] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const inFlight = useRef(false);
+  const doneRef = useRef(false);
+  doneRef.current = done;
+  const cursorRef = useRef<Cursor>(null);
+
+  useEffect(() => {
+    void resetKey;
+    setItems([]);
+    setDone(false);
+    doneRef.current = false;
+    inFlight.current = false;
+    cursorRef.current = null;
+  }, [resetKey]);
+
+  const loadMore = useCallback(async () => {
+    if (inFlight.current || doneRef.current || normalizedSlugs.length === 0)
+      return 0;
+    inFlight.current = true;
+    setLoading(true);
+
+    try {
+      const data = await getTaggedArtworksPage({
+        take: 60,
+        cursor: cursorRef.current,
+        tagSlugs: normalizedSlugs,
+        onlyPublished: true,
+      });
+
+      setItems((prev) => {
+        const seen = new Set(prev.map((x) => x.id));
+        const next = data.items.filter((x) => !seen.has(x.id));
+        return prev.concat(next);
+      });
+
+      cursorRef.current = data.nextCursor;
+      if (!data.nextCursor) setDone(true);
+
+      return data.items.length;
+    } finally {
+      setLoading(false);
+      inFlight.current = false;
+    }
+  }, [normalizedSlugs]);
+
+  useEffect(() => {
+    void loadMore();
+  }, [loadMore]);
+
+  const galleryItems: JustifiedGalleryItem[] = items.map((it) => ({
+    id: it.id,
+    name: it.name,
+    altText: it.altText,
+    nsfw: it.nsfw,
+    fileKey: it.fileKey,
+    width: it.thumbW,
+    height: it.thumbH,
+    dominantHex: it.dominantHex,
+  }));
+
+  if (!loading && done && galleryItems.length === 0) {
+    return (
+      <p className="text-muted-foreground text-center py-20">
+        No artworks to display
+      </p>
+    );
+  }
+
+  return (
+    <div className="w-full">
+      <JustifiedGallery
+        items={galleryItems}
+        hrefFrom="portfolio"
+        showCaption={false}
+        debug={false}
+        targetRowHeight={160}
+        targetRowHeightMobile={160}
+        maxRowHeight={300}
+        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}
+      />
+    </div>
+  );
+}
--- a/src/components/ui/button.tsx
+++ b/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"

--- a/src/stores/nsfw-store.ts
+++ b/src/stores/nsfw-store.ts
@ -0,0 +1,30 @@
+"use client";
+
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+export type NsfwConsent = "unset" | "allow" | "deny";
+
+type NsfwStore = {
+  consent: NsfwConsent;
+  setConsent: (consent: NsfwConsent) => void;
+  allow: () => void;
+  deny: () => void;
+  reset: () => void;
+};
+
+export const useNsfwStore = create<NsfwStore>()(
+  persist(
+    (set) => ({
+      consent: "unset",
+      setConsent: (consent) => set({ consent }),
+      allow: () => set({ consent: "allow" }),
+      deny: () => set({ consent: "deny" }),
+      reset: () => set({ consent: "unset" }),
+    }),
+    {
+      name: "gaertan-nsfw-consent",
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);
Author	SHA1	Message	Date
Citali	06d6d2657e	Deactive unused nav items for now	2026-02-05 17:16:37 +01:00
Citali	fce60cf9d9	Deactive unused nav items for now	2026-02-05 17:11:17 +01:00
Citali	dd0c87167c	Fix the topnav for more responsiveness	2026-02-05 17:05:49 +01:00
Citali	6ff04f321d	Fix the about page image display	2026-02-05 16:04:19 +01:00
Citali	41fe9f0345	Add about page	2026-02-05 15:13:32 +01:00
Citali	c07cca0e33	Add an easter egg to the app	2026-02-04 14:51:29 +01:00
Citali	e907de47a4	Add nsfw handling. Add zustand for global store	2026-02-04 01:12:00 +01:00
Citali	c4107718d0	Add tags to commssion types and custom types. Add button for example images to cards	2026-02-02 16:59:27 +01:00
Citali	1a855b2177	Fix moving of tags table	2026-02-02 15:18:26 +01:00
Citali	9121b74ade	Hide debug	2026-02-02 11:45:51 +01:00
Citali	90c27ff60a	Change gap calculation on gallery for better breakpoint on mobile and tablet	2026-02-02 10:51:37 +01:00
Citali	79b186889b	Add debug for screen size	2026-02-02 10:40:12 +01:00
Citali	1952eb89a3	Fix dev Dockerfile	2026-02-02 00:52:23 +01:00
Citali	cee86edf44	Fix animal list display	2026-02-02 00:42:55 +01:00
Citali	26118d2897	Fix responsive layout on commission status for light mode	2026-02-02 00:15:37 +01:00
Citali	d70f00314b	Fix responsive layout on artwork single page	2026-02-02 00:12:11 +01:00
Citali	874aa5f343	Fix responsive layout with max items per row for each breakpoint	2026-02-02 00:05:13 +01:00
Citali	b559b8250f	Fix responsive layout with max items per row for each breakpoint	2026-02-01 23:28:09 +01:00