Add an easter egg to the app

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=="],

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": {

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,

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,

src/actions/portfolio/getTaggedArtworksPage.ts

@@ -12,6 +12,7 @@ export type TaggedArtworkItem = {
   id: string;
   name: string;
   altText: string | null;
+  nsfw: boolean;
   sortKey: number | null;
   year: number | null;
   fileKey: string;
@@ -54,6 +55,7 @@ export async function getTaggedArtworksPage(args: {
     id: true,
     name: true,
     altText: true,
+    nsfw: true,
     year: true,
     sortKey: true,
     file: { select: { fileKey: true } },
@@ -79,6 +81,7 @@ export async function getTaggedArtworksPage(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,

src/app/(normal)/artworks/single/[id]/page.tsx

@@ -1,12 +1,13 @@
 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,
@@ -49,6 +50,7 @@ export default async function SingleArtworkPage({
 
   return (
     <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 hidden sm:block">
           <ContextBackButton />
@@ -69,16 +71,17 @@ export default async function SingleArtworkPage({
             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 ? (

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>
   );
 }

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">

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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 = {
@@ -94,12 +100,18 @@ export default function JustifiedGallery({
   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);
+      const sorted = [...gapBreakpoints].sort(
+        (a, b) => a.maxWidth - b.maxWidth,
+      );
       for (const bp of sorted) {
         if (containerWidth <= bp.maxWidth) return bp.gap;
       }
@@ -273,6 +285,7 @@ export default function JustifiedGallery({
       ref={containerRef}
       className={cn("mx-auto w-full max-w-6xl", className)}
     >
+      <NsfwConsentDialog hasNsfw={hasNsfw} />
       <div className="space-y-3">
         {rows.map((row, idx) => (
           <div key={getRowKey(row)}>
@@ -294,6 +307,7 @@ export default function JustifiedGallery({
                   hrefBase={hrefBase}
                   hrefFrom={hrefFrom}
                   showCaption={showCaption}
+                  allowNsfw={allowNsfw}
                 />
               ))}
             </div>
@@ -328,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);
@@ -372,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">

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>
+  );
+}

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>
   );
 }

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

src/components/portfolio/PortfolioGallery.tsx

@@ -110,6 +110,7 @@ export default function PortfolioGallery({
     id: it.id,
     name: it.name,
     altText: it.altText,
+    nsfw: it.nsfw,
     fileKey: it.fileKey,
     width: it.thumbW,
     height: it.thumbH,

src/components/portfolio/TaggedGallery.tsx

@@ -30,6 +30,7 @@ export default function TaggedGallery({ tagSlugs }: { tagSlugs: string[] }) {
   const cursorRef = useRef<Cursor>(null);
 
   useEffect(() => {
+    void resetKey;
     setItems([]);
     setDone(false);
     doneRef.current = false;
@@ -75,6 +76,7 @@ export default function TaggedGallery({ tagSlugs }: { tagSlugs: string[] }) {
     id: it.id,
     name: it.name,
     altText: it.altText,
+    nsfw: it.nsfw,
     fileKey: it.fileKey,
     width: it.thumbW,
     height: it.thumbH,

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),
+    },
+  ),
+);