Add an easter egg to the app

Add nsfw handling. Add zustand for global store
Add tags to commssion types and custom types. Add button for example images to cards
2026-02-04 14:51:29 +01:00 · 2026-02-04 01:12:00 +01:00 · 2026-02-02 16:59:27 +01:00 · 2026-02-02 15:18:26 +01:00 · 2026-02-02 11:45:51 +01:00 · 2026-02-02 10:51:37 +01:00
35 changed files with 1507 additions and 235 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
@ -53,7 +53,7 @@ model Artwork {
  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 {
@ -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[]
@ -284,6 +316,7 @@ model CommissionCustomCard {
  isVisible         Boolean @default(true)
  isSpecialOffer    Boolean @default(false)

+  tags     Tag[]                        @relation("CommissionCustomCardTags")
  options  CommissionCustomCardOption[]
  extras   CommissionCustomCardExtra[]
  requests CommissionRequest[]
--- 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)/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>
+                            <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>
+                                  <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/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,6 +112,9 @@ 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>
  );
--- 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)/page.tsx
+++ b/src/app/(normal)/page.tsx
@ -10,10 +10,18 @@ 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 />
--- 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">
--- 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/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
      ) {
+        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,17 +278,27 @@ 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) => (
+        {rows.map((row, idx) => (
+          <div key={getRowKey(row)}>
            <div
-            key={getRowKey(row)}
-            className="flex justify-center"
-            style={{ gap }}
+              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
@ -211,9 +307,25 @@ export default function JustifiedGallery({
                  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,4 +1,5 @@
 import ModeToggle from "./ModeToggle";
+import NsfwModeToggle from "./NsfwModeToggle";
 import TopNav from "./TopNav";

 export default function Header() {
@ -7,8 +8,11 @@ export default function Header() {
    <div className="w-full">
      <div className="flex items-center justify-between px-4 md:px-8 py-2">
        <TopNav />
+        <div className="flex items-center gap-2">
+          <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/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/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	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