Citali/v2.app.gaertan.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add an easter egg to the app

Browse Source
This commit is contained in:
Citali
2026-02-04 14:51:29 +01:00
parent e907de47a4
commit c07cca0e33
7 changed files with 375 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/(normal)/page.tsx
View File

@ -10,15 +10,23 @@ export default function Home() {
Welcome to my place! Welcome to my place!
</h1> </h1>
<p className="text-muted-foreground max-w-xl text-lg mb-6"> <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>
<p className="text-muted-foreground max-w-xl text-lg mb-6"> <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> </p>
<div> <div>
<SocialLinks /> <SocialLinks />
</div> </div>
</div> </div>
</div > </div>
); );
} }

8
src/app/(normal)/tos/page.tsx
View File

@ -1,10 +1,10 @@
import { prisma } from '@/lib/prisma'; import { prisma } from "@/lib/prisma";
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from "react-markdown";
export default async function TosPage() { export default async function TosPage() {
const tos = await prisma.termsOfService.findFirst({ const tos = await prisma.termsOfService.findFirst({
orderBy: [{ version: "desc" }], orderBy: [{ version: "desc" }],
}) });
return ( return (
<div className="mx-auto w-full max-w-6xl px-4 py-8"> <div className="mx-auto w-full max-w-6xl px-4 py-8">
@ -13,4 +13,4 @@ export default async function TosPage() {
</div> </div>
</div> </div>
); );
} }

45
src/app/error.tsx Normal file
View File

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

49
src/app/global-error.tsx Normal file
View File

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

17
src/app/loading.tsx Normal file
View File

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

48
src/app/not-found.tsx Normal file
View File

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

200
src/components/global/GameOfLifeMini.tsx Normal file
View File

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