feat: plakat redesign phase 2 (desk with throwable objects, mobile card deck) (#75)
- New "Tisch" section replaces the old projects block on the home page - Objects: project cards from Directus (flip on tap, link to detail page), thesis ticket with countdown, server card, currently-reading book from Hardcover (with skeleton), polaroid photo, sticker - Desktop: Framer Motion drag with momentum, elastic table edges, tilt that follows throw velocity, bring-to-front, "Tidy up" and "Mess it up" - Mobile: card deck, swipe the top card away (distance or velocity), prev/next buttons, live counter, tap to flip - Both layouts are server rendered and switched by CSS, so content is visible without JavaScript and nothing jumps on hydration - Taps after a drag no longer flip cards - New named colors polaroid/bookcover instead of raw hex classes - Texts in de/en, i18n key check extended Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
denshooter
@@ -137,6 +137,7 @@ const STATIC_KEYS: Record<string, Record<string, string[]>> = {
|
||||
},
|
||||
consent: { ConsentBanner: ["title", "description", "essential", "chat", "alwaysOn", "acceptAll", "acceptSelected", "rejectAll", "hide"] },
|
||||
"home.hero": { Hero: ["kicker", "claim", "intro", "countdown", "ctaWork", "ctaContact"] },
|
||||
"home.tisch": { TischSection: ["title", "allProjects", "hintBoard", "hintDeck", "tidy", "mess", "flip", "details", "prev", "next", "ticketTitle", "ticketDays", "ticketJob", "ticketStub", "serverTitle", "servers.ingress.name", "servers.ingress.detail", "servers.mail.name", "servers.mail.detail", "servers.home.name", "servers.home.detail", "serverNote", "bookLabel", "bookFallback", "photoCaption", "sticker"] },
|
||||
"home.about": { About: ["title", "p1", "p2", "p3", "funFactTitle", "funFactBody", "hobbiesTitle"] },
|
||||
"home.about.activity": { ActivityFeed: ["idleStatus", "codingNow", "gaming", "inGame", "listening"] },
|
||||
"home.about.currentlyReading": { CurrentlyReading: ["title", "progress"] },
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
import Header from "../components/Header.server";
|
||||
import Hero from "../components/Hero";
|
||||
import TischSection from "../components/tisch/TischSection";
|
||||
import ScrollFadeIn from "../components/ScrollFadeIn";
|
||||
import Script from "next/script";
|
||||
import {
|
||||
getAboutTranslations,
|
||||
getProjectsTranslations,
|
||||
getContactTranslations,
|
||||
getFooterTranslations,
|
||||
} from "@/lib/translations-loader";
|
||||
import {
|
||||
AboutClient,
|
||||
ProjectsClient,
|
||||
ContactClient,
|
||||
FooterClient,
|
||||
} from "../components/ClientWrappers";
|
||||
@@ -21,9 +20,8 @@ interface HomePageServerProps {
|
||||
|
||||
export default async function HomePageServer({ locale }: HomePageServerProps) {
|
||||
// Parallel laden aller Translations (hero translations handled by Hero server component)
|
||||
const [aboutT, projectsT, contactT, footerT] = await Promise.all([
|
||||
const [aboutT, contactT, footerT] = await Promise.all([
|
||||
getAboutTranslations(locale),
|
||||
getProjectsTranslations(locale),
|
||||
getContactTranslations(locale),
|
||||
getFooterTranslations(locale),
|
||||
]);
|
||||
@@ -90,14 +88,12 @@ export default async function HomePageServer({ locale }: HomePageServerProps) {
|
||||
<Header locale={locale} />
|
||||
<main className="relative">
|
||||
<Hero locale={locale} />
|
||||
<TischSection locale={locale} />
|
||||
|
||||
<ScrollFadeIn>
|
||||
<AboutClient locale={locale} translations={aboutT} />
|
||||
</ScrollFadeIn>
|
||||
|
||||
<ScrollFadeIn>
|
||||
<ProjectsClient locale={locale} translations={projectsT} />
|
||||
</ScrollFadeIn>
|
||||
|
||||
<ScrollFadeIn>
|
||||
<ContactClient locale={locale} translations={contactT} />
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useRef, useState, type RefObject } from "react";
|
||||
import {
|
||||
animate,
|
||||
motion,
|
||||
useMotionValue,
|
||||
useReducedMotion,
|
||||
useSpring,
|
||||
useTransform,
|
||||
useVelocity,
|
||||
type MotionValue,
|
||||
} from "framer-motion";
|
||||
import ObjectFace from "./ObjectFace";
|
||||
import { BOARD_SIZE, BOARD_SPOTS, type TischLabels, type TischObject } from "./types";
|
||||
|
||||
interface Handle {
|
||||
el: HTMLDivElement;
|
||||
x: MotionValue<number>;
|
||||
y: MotionValue<number>;
|
||||
base: MotionValue<number>;
|
||||
spotRotation: number;
|
||||
}
|
||||
|
||||
interface BoardProps {
|
||||
objects: TischObject[];
|
||||
labels: TischLabels;
|
||||
}
|
||||
|
||||
const TABLE_HEIGHT = 1080;
|
||||
const SETTLE = { type: "spring", bounce: 0, duration: 0.6 } as const;
|
||||
|
||||
/** Desktop: freier Tisch. Objekte lassen sich werfen, federn am Rand zurück und lassen sich aufräumen. */
|
||||
export default function Board({ objects, labels }: BoardProps) {
|
||||
const tableRef = useRef<HTMLDivElement>(null);
|
||||
const handles = useRef(new Map<string, Handle>());
|
||||
const [order, setOrder] = useState(() => objects.map((o) => o.id));
|
||||
|
||||
const bringToFront = useCallback((id: string) => {
|
||||
setOrder((prev) => (prev[prev.length - 1] === id ? prev : [...prev.filter((x) => x !== id), id]));
|
||||
}, []);
|
||||
|
||||
const tidy = () => {
|
||||
const table = tableRef.current;
|
||||
if (!table) return;
|
||||
const width = table.clientWidth;
|
||||
const gap = 22;
|
||||
let cx = 0;
|
||||
let cy = 28;
|
||||
let rowH = 0;
|
||||
objects.forEach((obj, i) => {
|
||||
const h = handles.current.get(obj.id);
|
||||
if (!h) return;
|
||||
const { w, h: oh } = BOARD_SIZE[obj.kind];
|
||||
if (cx + w > width && cx > 0) {
|
||||
cx = 0;
|
||||
cy += rowH + gap;
|
||||
rowH = 0;
|
||||
}
|
||||
const tx = cx - h.el.offsetLeft;
|
||||
const ty = cy - h.el.offsetTop;
|
||||
cx += w + gap;
|
||||
rowH = Math.max(rowH, oh);
|
||||
const delay = i * 0.03;
|
||||
animate(h.x, tx, { ...SETTLE, delay });
|
||||
animate(h.y, ty, { ...SETTLE, delay });
|
||||
animate(h.base, 0, { ...SETTLE, delay });
|
||||
});
|
||||
};
|
||||
|
||||
const mess = () => {
|
||||
objects.forEach((obj, i) => {
|
||||
const h = handles.current.get(obj.id);
|
||||
if (!h) return;
|
||||
const delay = i * 0.03;
|
||||
animate(h.x, 0, { type: "spring", bounce: 0.2, duration: 0.6, delay });
|
||||
animate(h.y, 0, { type: "spring", bounce: 0.2, duration: 0.6, delay });
|
||||
animate(h.base, h.spotRotation, { type: "spring", bounce: 0.2, duration: 0.6, delay });
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-4 flex flex-wrap items-center justify-between gap-3 px-4 sm:px-6 lg:px-10">
|
||||
<p className="font-mono text-[13px]">{labels.hintBoard}</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={mess}
|
||||
className="rounded-full px-5 py-3 text-[15px] font-semibold shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]"
|
||||
>
|
||||
{labels.mess}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={tidy}
|
||||
className="rounded-full bg-ink px-5 py-3 text-[15px] font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]"
|
||||
>
|
||||
{labels.tidy}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={tableRef}
|
||||
className="relative mx-4 border-t-2 border-ink bg-[radial-gradient(circle_at_1px_1px,rgb(var(--plakat-ink)/0.16)_1px,transparent_0)] [background-size:22px_22px] sm:mx-6 lg:mx-10"
|
||||
style={{ height: TABLE_HEIGHT }}
|
||||
>
|
||||
{objects.map((obj, i) => (
|
||||
<BoardItem
|
||||
key={obj.id}
|
||||
obj={obj}
|
||||
labels={labels}
|
||||
spot={BOARD_SPOTS[i % BOARD_SPOTS.length]}
|
||||
z={order.indexOf(obj.id) + 1}
|
||||
tableRef={tableRef}
|
||||
onFront={() => bringToFront(obj.id)}
|
||||
register={(h) => {
|
||||
if (h) handles.current.set(obj.id, h);
|
||||
else handles.current.delete(obj.id);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface BoardItemProps {
|
||||
obj: TischObject;
|
||||
labels: TischLabels;
|
||||
spot: { x: number; y: number; r: number };
|
||||
z: number;
|
||||
tableRef: RefObject<HTMLDivElement | null>;
|
||||
onFront: () => void;
|
||||
register: (h: Handle | null) => void;
|
||||
}
|
||||
|
||||
function BoardItem({ obj, labels, spot, z, tableRef, onFront, register }: BoardItemProps) {
|
||||
const reduce = useReducedMotion();
|
||||
const [flipped, setFlipped] = useState(false);
|
||||
const [lifted, setLifted] = useState(false);
|
||||
// Framer meldet nach einem Wurf trotzdem einen Tap; der soll die Karte nicht umdrehen
|
||||
const dragged = useRef(false);
|
||||
const x = useMotionValue(0);
|
||||
const y = useMotionValue(0);
|
||||
const base = useMotionValue(spot.r);
|
||||
// Neigung folgt der Wurfgeschwindigkeit, geglättet über eine Feder
|
||||
const vx = useVelocity(x);
|
||||
const tilt = useSpring(useTransform(vx, [-1600, 0, 1600], [-10, 0, 10]), { stiffness: 300, damping: 30 });
|
||||
const rotate = useTransform(() => base.get() + (reduce ? 0 : tilt.get()));
|
||||
|
||||
const { w, h } = BOARD_SIZE[obj.kind];
|
||||
const canFlip = obj.kind === "project";
|
||||
const radius = { sticker: "rounded-full", photo: "rounded-md", book: "rounded-[6px_14px_14px_6px]" }[obj.kind as string] ?? "rounded-2xl";
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={(el) => register(el ? { el, x, y, base, spotRotation: spot.r } : null)}
|
||||
drag
|
||||
dragConstraints={tableRef}
|
||||
dragElastic={0.18}
|
||||
dragTransition={{ power: 0.35, timeConstant: 320, bounceStiffness: 260, bounceDamping: 22 }}
|
||||
whileDrag={{ scale: 1.05 }}
|
||||
onPointerDown={() => {
|
||||
dragged.current = false;
|
||||
onFront();
|
||||
}}
|
||||
onDragStart={() => {
|
||||
dragged.current = true;
|
||||
setLifted(true);
|
||||
}}
|
||||
onDragEnd={() => setLifted(false)}
|
||||
onTap={canFlip ? () => !dragged.current && setFlipped((f) => !f) : undefined}
|
||||
onKeyDown={
|
||||
canFlip
|
||||
? (e) => {
|
||||
if (e.key === " ") {
|
||||
e.preventDefault();
|
||||
setFlipped((f) => !f);
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
tabIndex={canFlip ? 0 : undefined}
|
||||
role={canFlip ? "button" : undefined}
|
||||
aria-pressed={canFlip ? flipped : undefined}
|
||||
aria-label={canFlip && obj.kind === "project" ? obj.title : undefined}
|
||||
className={`absolute cursor-grab touch-none select-none active:cursor-grabbing ${radius} transition-shadow duration-200 ease-out ${
|
||||
lifted ? "shadow-[14px_16px_0_rgb(var(--plakat-ink))]" : "shadow-[6px_6px_0_rgb(var(--plakat-ink))]"
|
||||
}`}
|
||||
style={{
|
||||
x,
|
||||
y,
|
||||
rotate,
|
||||
width: w,
|
||||
height: h,
|
||||
left: `min(${spot.x * 100}%, calc(100% - ${w}px))`,
|
||||
top: spot.y,
|
||||
zIndex: z,
|
||||
}}
|
||||
>
|
||||
<ObjectFace obj={obj} labels={labels} flipped={flipped} />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { AnimatePresence, motion, useMotionValue, useTransform, type PanInfo, type Variants } from "framer-motion";
|
||||
import ObjectFace from "./ObjectFace";
|
||||
import type { TischLabels, TischObject } from "./types";
|
||||
|
||||
interface DeckProps {
|
||||
objects: TischObject[];
|
||||
labels: TischLabels;
|
||||
}
|
||||
|
||||
const VISIBLE = 4;
|
||||
// Ab dieser Strecke oder Geschwindigkeit fliegt die Karte weg (Emil: ein kurzer Wisch reicht)
|
||||
const DISTANCE = 110;
|
||||
const VELOCITY = 500;
|
||||
const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, "0");
|
||||
|
||||
type Exit = { kind: "fly"; dir: 1 | -1 } | { kind: "fade" };
|
||||
|
||||
// Bekommt den aktuellen Exit-Modus über `custom` von AnimatePresence
|
||||
const exitVariants: Variants = {
|
||||
leave: (e: Exit) =>
|
||||
e.kind === "fly"
|
||||
? { x: e.dir * 460, rotate: e.dir * 18, opacity: 0, transition: { duration: 0.3, ease: EASE_OUT } }
|
||||
: { scale: 0.85, opacity: 0, transition: { duration: 0.2, ease: EASE_OUT } },
|
||||
};
|
||||
|
||||
/** Handy: Kartenstapel. Oberste Karte zur Seite wischen, antippen zum Umdrehen. */
|
||||
export default function Deck({ objects, labels }: DeckProps) {
|
||||
const [order, setOrder] = useState(() => objects.map((_, i) => i));
|
||||
// Wie die Karte geht, die den sichtbaren Stapel verlässt: oben weggeworfen oder hinten ausgeblendet
|
||||
const [exit, setExit] = useState<Exit>({ kind: "fly", dir: 1 });
|
||||
|
||||
const next = (d: 1 | -1 = 1) => {
|
||||
setExit({ kind: "fly", dir: d });
|
||||
setOrder((o) => [...o.slice(1), o[0]]);
|
||||
};
|
||||
const prev = () => {
|
||||
setExit({ kind: "fade" });
|
||||
setOrder((o) => [o[o.length - 1], ...o.slice(0, -1)]);
|
||||
};
|
||||
|
||||
const visible = order.slice(0, VISIBLE);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className="mb-2 px-4 font-mono text-[13px] sm:px-6">{labels.hintDeck}</p>
|
||||
<div className="relative h-[440px] overflow-hidden">
|
||||
<AnimatePresence initial={false} custom={exit}>
|
||||
{visible
|
||||
.map((idx, depth) => (
|
||||
<DeckCard
|
||||
key={objects[idx].id}
|
||||
obj={objects[idx]}
|
||||
labels={labels}
|
||||
depth={depth}
|
||||
enteringFromLeft={depth === 0 && exit.kind === "fade"}
|
||||
onDismiss={next}
|
||||
/>
|
||||
))
|
||||
.reverse()}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className="flex items-center justify-between px-4 pb-10 pt-1 sm:px-6">
|
||||
<RoundButton label={labels.prev} onClick={prev}>
|
||||
←
|
||||
</RoundButton>
|
||||
<span className="font-mono text-[13px] [font-variant-numeric:tabular-nums]" aria-live="polite">
|
||||
{pad(order[0] + 1)} / {pad(objects.length)}
|
||||
</span>
|
||||
<RoundButton label={labels.next} onClick={() => next(1)}>
|
||||
→
|
||||
</RoundButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RoundButton({ label, onClick, children }: { label: string; onClick: () => void; children: React.ReactNode }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={label}
|
||||
onClick={onClick}
|
||||
className="grid h-[52px] w-[52px] place-items-center rounded-full border-2 border-ink bg-paper text-xl font-semibold transition-[background-color,transform] duration-150 ease-out active:scale-95 active:bg-paper-2"
|
||||
>
|
||||
<span aria-hidden="true">{children}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
interface DeckCardProps {
|
||||
obj: TischObject;
|
||||
labels: TischLabels;
|
||||
depth: number;
|
||||
enteringFromLeft: boolean;
|
||||
onDismiss: (dir: 1 | -1) => void;
|
||||
}
|
||||
|
||||
function DeckCard({ obj, labels, depth, enteringFromLeft, onDismiss }: DeckCardProps) {
|
||||
const [flipped, setFlipped] = useState(false);
|
||||
const dragged = useRef(false);
|
||||
const x = useMotionValue(0);
|
||||
const dragRotate = useTransform(x, [-220, 0, 220], [-14, 0, 14]);
|
||||
const isTop = depth === 0;
|
||||
const canFlip = obj.kind === "project";
|
||||
const restRotate = depth === 0 ? 0 : depth % 2 ? 3 : -3;
|
||||
|
||||
const handleDragEnd = (_: unknown, info: PanInfo) => {
|
||||
if (Math.abs(info.offset.x) > DISTANCE || Math.abs(info.velocity.x) > VELOCITY) {
|
||||
onDismiss(info.offset.x > 0 ? 1 : -1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="absolute inset-x-0 top-4 mx-auto h-[390px] w-[min(300px,82vw)]"
|
||||
style={{ zIndex: 10 - depth }}
|
||||
initial={enteringFromLeft ? { x: -420, rotate: -14, opacity: 0 } : { scale: 0.85, y: 3 * 14, opacity: 0 }}
|
||||
animate={{ x: 0, scale: 1 - Math.min(depth, 3) * 0.05, y: Math.min(depth, 3) * 14, rotate: restRotate, opacity: 1 }}
|
||||
variants={exitVariants}
|
||||
exit="leave"
|
||||
transition={{ type: "spring", bounce: 0, duration: 0.45 }}
|
||||
>
|
||||
<motion.div
|
||||
className={`h-full w-full ${obj.kind === "sticker" ? "rounded-full" : "rounded-2xl"} shadow-[6px_6px_0_rgb(var(--plakat-ink))] ${isTop ? "cursor-grab" : "pointer-events-none"}`}
|
||||
style={{ x, rotate: dragRotate, touchAction: "pan-y" }}
|
||||
drag={isTop ? "x" : false}
|
||||
dragSnapToOrigin
|
||||
dragElastic={0.9}
|
||||
onPointerDown={() => {
|
||||
dragged.current = false;
|
||||
}}
|
||||
onDragStart={() => {
|
||||
dragged.current = true;
|
||||
}}
|
||||
onDragEnd={handleDragEnd}
|
||||
onTap={isTop && canFlip ? () => !dragged.current && setFlipped((f) => !f) : undefined}
|
||||
tabIndex={isTop && canFlip ? 0 : -1}
|
||||
role={canFlip ? "button" : undefined}
|
||||
aria-pressed={canFlip ? flipped : undefined}
|
||||
aria-hidden={!isTop}
|
||||
>
|
||||
<ObjectFace obj={obj} labels={labels} flipped={flipped} />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import type { TischLabels, TischObject } from "./types";
|
||||
|
||||
interface ObjectFaceProps {
|
||||
obj: TischObject;
|
||||
labels: TischLabels;
|
||||
flipped?: boolean;
|
||||
}
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, "0");
|
||||
|
||||
// Rand und Rundung, die alle Objekte teilen
|
||||
const edge = "h-full w-full overflow-hidden rounded-2xl border-2 border-ink";
|
||||
|
||||
/** Zeichnet ein Objekt. Größe und Position bestimmt der Container (Tisch oder Stapel). */
|
||||
export default function ObjectFace({ obj, labels, flipped = false }: ObjectFaceProps) {
|
||||
switch (obj.kind) {
|
||||
case "project":
|
||||
return (
|
||||
<div className="h-full w-full [perspective:1200px]">
|
||||
<div
|
||||
className={`relative h-full w-full rounded-2xl transition-transform duration-[560ms] ease-in-out [transform-style:preserve-3d] ${
|
||||
flipped ? "[transform:rotateY(180deg)]" : ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`${edge} absolute inset-0 flex flex-col justify-between p-4 [backface-visibility:hidden]`}
|
||||
style={{ background: obj.color, color: obj.textColor }}
|
||||
>
|
||||
<div className="flex justify-between font-mono text-xs">
|
||||
<span>({pad(obj.index + 1)})</span>
|
||||
<span>{obj.year}</span>
|
||||
</div>
|
||||
<h3 className="font-display text-[2.4rem] font-extrabold leading-[0.88] tracking-[-0.045em] [overflow-wrap:anywhere] [font-variation-settings:'wdth'_78] [color:inherit]">
|
||||
{obj.title}
|
||||
</h3>
|
||||
<div className="font-mono text-xs leading-snug">
|
||||
<div>{obj.tags.slice(0, 3).join(" · ")}</div>
|
||||
<div className="mt-2 opacity-70">{labels.flip} ↻</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`${edge} absolute inset-0 flex flex-col justify-between bg-paper p-4 text-ink [backface-visibility:hidden] [transform:rotateY(180deg)]`}
|
||||
>
|
||||
<div className="flex justify-between font-mono text-xs">
|
||||
<span className="truncate pr-2">{obj.title}</span>
|
||||
<span>{obj.year}</span>
|
||||
</div>
|
||||
<p className="line-clamp-6 text-[15px] leading-snug">{obj.description}</p>
|
||||
<Link
|
||||
href={obj.href}
|
||||
className="inline-flex w-fit items-center gap-1.5 rounded-full bg-ink px-3.5 py-2 text-sm font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]"
|
||||
onPointerDownCapture={(e) => e.stopPropagation()}
|
||||
>
|
||||
{labels.details} <span aria-hidden="true">→</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "ticket":
|
||||
return (
|
||||
<div className={`${edge} grid grid-cols-[1fr_76px] bg-ink text-paper`}>
|
||||
<div className="flex flex-col justify-between p-4">
|
||||
<span className="font-mono text-[11.5px] uppercase tracking-wide">{labels.ticketTitle}</span>
|
||||
<div>
|
||||
<div className="font-display text-[4.4rem] font-extrabold leading-[0.8] tracking-[-0.05em] text-signal [font-variant-numeric:tabular-nums]">
|
||||
{obj.daysLeft}
|
||||
</div>
|
||||
<div className="mt-1 text-sm font-semibold">{labels.ticketDays}</div>
|
||||
</div>
|
||||
<span className="font-mono text-[11.5px] leading-snug">{labels.ticketJob}</span>
|
||||
</div>
|
||||
<div className="grid place-items-center border-l-2 border-dashed border-paper/30 font-mono text-[11px] uppercase tracking-[0.12em] text-signal [transform:rotate(180deg)] [writing-mode:vertical-rl]">
|
||||
{labels.ticketStub}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "server":
|
||||
return (
|
||||
<div className={`${edge} flex flex-col gap-3 bg-paper p-4 text-ink`}>
|
||||
<h3 className="font-display text-2xl font-extrabold leading-none tracking-[-0.03em]">{labels.serverTitle}</h3>
|
||||
{labels.servers.map((s) => (
|
||||
<div key={s.name} className="grid grid-cols-[10px_1fr] items-center gap-2.5 text-sm">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-ok shadow-[0_0_0_3px_rgb(var(--plakat-ok)/0.2)]" aria-hidden="true" />
|
||||
<span>
|
||||
{s.name}
|
||||
<span className="block font-mono text-[11.5px] opacity-75">{s.detail}</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<p className="mt-auto border-t-2 border-ink/15 pt-2.5 font-mono text-[11.5px] leading-snug">{labels.serverNote}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "book":
|
||||
return <BookFace href={obj.href} labels={labels} />;
|
||||
|
||||
case "photo":
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col rounded-md border-2 border-ink bg-polaroid p-2.5 pb-0 text-polaroid-ink">
|
||||
<div className="relative w-full flex-1 overflow-hidden rounded-sm bg-paper-2">
|
||||
<Image src="/images/me.jpg" alt="Dennis Konkol" fill sizes="220px" className="object-cover" draggable={false} />
|
||||
</div>
|
||||
<div className="py-2.5 text-center font-display text-lg font-bold">{labels.photoCaption}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "sticker":
|
||||
return (
|
||||
<div className="grid h-full w-full place-items-center rounded-full border-2 border-ink bg-signal p-6 text-center font-display text-xl font-extrabold leading-[0.98] tracking-[-0.02em] text-ink">
|
||||
{labels.sticker}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface CurrentBook {
|
||||
title: string;
|
||||
authors: string[];
|
||||
image: string | null;
|
||||
progress: number;
|
||||
}
|
||||
|
||||
// Tisch und Stapel zeigen das Buch beide; so wird es nur einmal geladen
|
||||
let bookRequest: Promise<CurrentBook | null> | null = null;
|
||||
function loadCurrentBook(): Promise<CurrentBook | null> {
|
||||
if (!bookRequest) {
|
||||
bookRequest = fetch("/api/n8n/hardcover/currently-reading")
|
||||
.then((res) => (res.ok ? res.json() : null))
|
||||
.then((data) => {
|
||||
const list = data?.currentlyReading;
|
||||
const first = Array.isArray(list) ? list[0] : list;
|
||||
return first ?? null;
|
||||
})
|
||||
.catch(() => null);
|
||||
}
|
||||
return bookRequest;
|
||||
}
|
||||
|
||||
function BookFace({ href, labels }: { href: string; labels: TischLabels }) {
|
||||
const [book, setBook] = useState<CurrentBook | null | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
loadCurrentBook().then((b) => {
|
||||
if (alive) setBook(b);
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const progress = book && Number.isFinite(book.progress) ? Math.max(0, Math.min(100, book.progress)) : 0;
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-full overflow-hidden rounded-[6px_14px_14px_6px] border-2 border-ink bg-bookcover text-bookcover-text shadow-[inset_6px_0_0_rgba(255,255,255,0.08)]">
|
||||
{book?.image && (
|
||||
<Image src={book.image} alt="" fill sizes="200px" className="object-cover opacity-40" draggable={false} />
|
||||
)}
|
||||
<div className="relative flex h-full flex-col justify-between p-4">
|
||||
<span className="font-mono text-xs uppercase tracking-wide">{labels.bookLabel}</span>
|
||||
{book === undefined ? (
|
||||
<div className="space-y-2" aria-hidden="true">
|
||||
<div className="h-7 w-4/5 animate-pulse rounded bg-white/15" />
|
||||
<div className="h-4 w-1/2 animate-pulse rounded bg-white/10" />
|
||||
</div>
|
||||
) : book ? (
|
||||
<div>
|
||||
<div className="line-clamp-3 font-display text-[1.9rem] font-extrabold leading-[0.92] tracking-[-0.03em]">{book.title}</div>
|
||||
<div className="mt-1.5 font-mono text-xs">{book.authors.join(", ")}</div>
|
||||
</div>
|
||||
) : (
|
||||
<Link href={href} className="font-display text-2xl font-extrabold leading-tight underline decoration-2 underline-offset-4">
|
||||
{labels.bookFallback}
|
||||
</Link>
|
||||
)}
|
||||
<div>
|
||||
<div className="font-mono text-xs">{book ? `${progress} %` : " "}</div>
|
||||
<div className="mt-1.5 h-1 overflow-hidden rounded bg-white/20">
|
||||
<div className="h-full origin-left bg-signal" style={{ transform: `scaleX(${progress / 100})` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { getProjects } from "@/lib/directus";
|
||||
import Board from "./Board";
|
||||
import Deck from "./Deck";
|
||||
import { PROJECT_COLORS, type TischLabels, type TischObject } from "./types";
|
||||
|
||||
interface TischSectionProps {
|
||||
locale: string;
|
||||
}
|
||||
|
||||
// Abgabe der Masterarbeit, Grundlage für das Ticket
|
||||
const THESIS_DEADLINE = new Date("2027-02-15T12:00:00+01:00");
|
||||
|
||||
/**
|
||||
* Der Tisch: Projekte und ein paar Dinge aus meinem Alltag als Objekte.
|
||||
* Desktop zeigt den freien Tisch, das Handy einen Kartenstapel. Beides wird
|
||||
* serverseitig gerendert und per CSS umgeschaltet, damit nichts springt.
|
||||
*/
|
||||
export default async function TischSection({ locale }: TischSectionProps) {
|
||||
const t = await getTranslations({ locale, namespace: "home.tisch" });
|
||||
const projects = (await getProjects(locale, { published: true, limit: 6 }).catch(() => null)) ?? [];
|
||||
const daysLeft = Math.max(0, Math.ceil((THESIS_DEADLINE.getTime() - Date.now()) / 86_400_000));
|
||||
|
||||
const labels: TischLabels = {
|
||||
hintBoard: t("hintBoard"),
|
||||
hintDeck: t("hintDeck"),
|
||||
tidy: t("tidy"),
|
||||
mess: t("mess"),
|
||||
flip: t("flip"),
|
||||
details: t("details"),
|
||||
prev: t("prev"),
|
||||
next: t("next"),
|
||||
ticketTitle: t("ticketTitle"),
|
||||
ticketDays: t("ticketDays"),
|
||||
ticketJob: t("ticketJob"),
|
||||
ticketStub: t("ticketStub"),
|
||||
serverTitle: t("serverTitle"),
|
||||
servers: [
|
||||
{ name: t("servers.ingress.name"), detail: t("servers.ingress.detail") },
|
||||
{ name: t("servers.mail.name"), detail: t("servers.mail.detail") },
|
||||
{ name: t("servers.home.name"), detail: t("servers.home.detail") },
|
||||
],
|
||||
serverNote: t("serverNote"),
|
||||
bookLabel: t("bookLabel"),
|
||||
bookFallback: t("bookFallback"),
|
||||
photoCaption: t("photoCaption"),
|
||||
sticker: t("sticker"),
|
||||
};
|
||||
|
||||
const projectObjects: TischObject[] = projects.map((p, i) => {
|
||||
const color = PROJECT_COLORS[i % PROJECT_COLORS.length];
|
||||
return {
|
||||
kind: "project",
|
||||
id: `project-${p.slug}`,
|
||||
index: i,
|
||||
title: p.title,
|
||||
description: p.description,
|
||||
year: p.created_at ? String(new Date(p.created_at).getFullYear()) : "",
|
||||
tags: p.tags?.length ? p.tags : p.technologies ?? [],
|
||||
href: `/${locale}/projects/${p.slug}`,
|
||||
color: color.bg,
|
||||
textColor: color.text,
|
||||
};
|
||||
});
|
||||
|
||||
// Reihenfolge = Startplätze auf dem Tisch; Projekte zuerst, damit sie oben liegen
|
||||
const objects: TischObject[] = [
|
||||
...projectObjects,
|
||||
{ kind: "ticket", id: "ticket", daysLeft },
|
||||
{ kind: "server", id: "server" },
|
||||
{ kind: "book", id: "book", href: `/${locale}/books` },
|
||||
{ kind: "photo", id: "photo" },
|
||||
{ kind: "sticker", id: "sticker" },
|
||||
];
|
||||
// Im Stapel wäre der runde Sticker eine Ellipse und wiederholt nur den Claim
|
||||
const deckObjects = objects.filter((o) => o.kind !== "sticker");
|
||||
|
||||
return (
|
||||
<section id="projects" className="border-b-2 border-ink pb-16 pt-14 md:pt-16" aria-labelledby="tisch-title">
|
||||
<div className="flex flex-wrap items-end justify-between gap-4 px-4 pb-4 sm:px-6 lg:px-10">
|
||||
<h2
|
||||
id="tisch-title"
|
||||
className="font-display text-[clamp(2.4rem,6vw,5rem)] font-extrabold leading-[0.92] tracking-[-0.045em] [font-variation-settings:'wdth'_82]"
|
||||
>
|
||||
{t("title")}
|
||||
</h2>
|
||||
<Link
|
||||
href={`/${locale}/projects`}
|
||||
className="inline-flex items-center gap-2 rounded-full px-5 py-3 text-[15px] font-semibold shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]"
|
||||
>
|
||||
{t("allProjects")} <span aria-hidden="true">↗</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block">
|
||||
<Board objects={objects} labels={labels} />
|
||||
</div>
|
||||
<div className="md:hidden">
|
||||
<Deck objects={deckObjects} labels={labels} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
// Objekte auf dem Tisch. Der Server baut die Liste, die Client-Komponenten zeichnen sie.
|
||||
|
||||
export interface TischProject {
|
||||
kind: "project";
|
||||
id: string;
|
||||
index: number;
|
||||
title: string;
|
||||
description: string;
|
||||
year: string;
|
||||
tags: string[];
|
||||
href: string;
|
||||
color: string;
|
||||
textColor: string;
|
||||
}
|
||||
|
||||
export interface TischTicket {
|
||||
kind: "ticket";
|
||||
id: "ticket";
|
||||
daysLeft: number;
|
||||
}
|
||||
|
||||
export interface TischServer {
|
||||
kind: "server";
|
||||
id: "server";
|
||||
}
|
||||
|
||||
export interface TischBook {
|
||||
kind: "book";
|
||||
id: "book";
|
||||
href: string;
|
||||
}
|
||||
|
||||
export interface TischPhoto {
|
||||
kind: "photo";
|
||||
id: "photo";
|
||||
}
|
||||
|
||||
export interface TischSticker {
|
||||
kind: "sticker";
|
||||
id: "sticker";
|
||||
}
|
||||
|
||||
export type TischObject = TischProject | TischTicket | TischServer | TischBook | TischPhoto | TischSticker;
|
||||
|
||||
export interface TischLabels {
|
||||
hintBoard: string;
|
||||
hintDeck: string;
|
||||
tidy: string;
|
||||
mess: string;
|
||||
flip: string;
|
||||
details: string;
|
||||
prev: string;
|
||||
next: string;
|
||||
ticketTitle: string;
|
||||
ticketDays: string;
|
||||
ticketJob: string;
|
||||
ticketStub: string;
|
||||
serverTitle: string;
|
||||
servers: { name: string; detail: string }[];
|
||||
serverNote: string;
|
||||
bookLabel: string;
|
||||
bookFallback: string;
|
||||
photoCaption: string;
|
||||
sticker: string;
|
||||
}
|
||||
|
||||
// Breite und Höhe je Objektart auf dem Desktop-Tisch (px)
|
||||
export const BOARD_SIZE: Record<TischObject["kind"], { w: number; h: number }> = {
|
||||
project: { w: 236, h: 312 },
|
||||
ticket: { w: 320, h: 180 },
|
||||
server: { w: 270, h: 290 },
|
||||
book: { w: 176, h: 262 },
|
||||
photo: { w: 210, h: 250 },
|
||||
sticker: { w: 180, h: 180 },
|
||||
};
|
||||
|
||||
// Startpositionen: Anteil der Tischbreite, Abstand von oben in px, Neigung in Grad
|
||||
export const BOARD_SPOTS: { x: number; y: number; r: number }[] = [
|
||||
{ x: 0.02, y: 60, r: -6 },
|
||||
{ x: 0.23, y: 120, r: 4 },
|
||||
{ x: 0.45, y: 50, r: -3 },
|
||||
{ x: 0.67, y: 110, r: 6 },
|
||||
{ x: 0.04, y: 480, r: 5 },
|
||||
{ x: 0.28, y: 510, r: -5 },
|
||||
{ x: 0.52, y: 440, r: 3 },
|
||||
{ x: 0.8, y: 60, r: 8 },
|
||||
{ x: 0.76, y: 450, r: -7 },
|
||||
{ x: 0.42, y: 800, r: 7 },
|
||||
{ x: 0.12, y: 800, r: -4 },
|
||||
];
|
||||
|
||||
// Farbfelder für Projektkarten, abwechselnd hell und dunkel
|
||||
export const PROJECT_COLORS: { bg: string; text: string }[] = [
|
||||
{ bg: "#2f5bea", text: "#f6f3f1" },
|
||||
{ bg: "#1d1b3d", text: "#f6f3f1" },
|
||||
{ bg: "#0f6e66", text: "#f6f3f1" },
|
||||
{ bg: "#f2b531", text: "#140c0b" },
|
||||
{ bg: "#140c0b", text: "#e8402f" },
|
||||
{ bg: "#3f8a4a", text: "#f6f3f1" },
|
||||
];
|
||||
@@ -33,6 +33,42 @@
|
||||
"ctaWork": "Projekte ansehen",
|
||||
"ctaContact": "Schreib mir"
|
||||
},
|
||||
"tisch": {
|
||||
"title": "Der Tisch.",
|
||||
"allProjects": "Alle Projekte",
|
||||
"hintBoard": "Alles hier lässt sich anfassen. Werfen, stapeln, Karten umdrehen.",
|
||||
"hintDeck": "Wisch die Karten zur Seite, tipp zum Umdrehen.",
|
||||
"tidy": "Aufräumen",
|
||||
"mess": "Durcheinander",
|
||||
"flip": "tippen zum Umdrehen",
|
||||
"details": "Zum Projekt",
|
||||
"prev": "Vorherige Karte",
|
||||
"next": "Nächste Karte",
|
||||
"ticketTitle": "Masterarbeit · Abgabe 15.02.2027",
|
||||
"ticketDays": "Tage bis zur Abgabe",
|
||||
"ticketJob": "ab 02/2027 fest als M365-Administrator",
|
||||
"ticketStub": "Jetzt",
|
||||
"serverTitle": "Was bei mir läuft",
|
||||
"servers": {
|
||||
"ingress": {
|
||||
"name": "netcup · Eingang",
|
||||
"detail": "Traefik, Dokploy, diese Seite"
|
||||
},
|
||||
"mail": {
|
||||
"name": "IONOS · Post und Fotos",
|
||||
"detail": "mailcow, Immich"
|
||||
},
|
||||
"home": {
|
||||
"name": "Zuhause · Raspberry Pi",
|
||||
"detail": "Home Assistant, Paperless"
|
||||
}
|
||||
},
|
||||
"serverNote": "Gesichert mit CrowdSec, tägliche Backups mit restic.",
|
||||
"bookLabel": "Lese gerade",
|
||||
"bookFallback": "Zur Bibliothek",
|
||||
"photoCaption": "Das bin ich.",
|
||||
"sticker": "Läuft auf eigenen Servern."
|
||||
},
|
||||
"about": {
|
||||
"title": "Hinter den Kulissen",
|
||||
"p1": "Schon seit ich meinen ersten eigenen Server aufgesetzt habe, lässt mich das Thema Infrastruktur nicht mehr los. Als Student in Osnabrück verbringe ich meine Zeit am liebsten damit, moderne Web-Apps mit Next.js zu bauen oder mobile Lösungen mit Flutter zu entwickeln.",
|
||||
|
||||
@@ -33,6 +33,42 @@
|
||||
"ctaWork": "See projects",
|
||||
"ctaContact": "Write me"
|
||||
},
|
||||
"tisch": {
|
||||
"title": "The desk.",
|
||||
"allProjects": "All projects",
|
||||
"hintBoard": "Everything here can be touched. Throw it, stack it, flip the cards.",
|
||||
"hintDeck": "Swipe the cards aside, tap to flip.",
|
||||
"tidy": "Tidy up",
|
||||
"mess": "Mess it up",
|
||||
"flip": "tap to flip",
|
||||
"details": "Open project",
|
||||
"prev": "Previous card",
|
||||
"next": "Next card",
|
||||
"ticketTitle": "Master's thesis · due 15 Feb 2027",
|
||||
"ticketDays": "days until submission",
|
||||
"ticketJob": "from 02/2027: M365 administrator",
|
||||
"ticketStub": "Now",
|
||||
"serverTitle": "What I run",
|
||||
"servers": {
|
||||
"ingress": {
|
||||
"name": "netcup · front door",
|
||||
"detail": "Traefik, Dokploy, this site"
|
||||
},
|
||||
"mail": {
|
||||
"name": "IONOS · mail and photos",
|
||||
"detail": "mailcow, Immich"
|
||||
},
|
||||
"home": {
|
||||
"name": "Home · Raspberry Pi",
|
||||
"detail": "Home Assistant, Paperless"
|
||||
}
|
||||
},
|
||||
"serverNote": "Guarded by CrowdSec, daily backups with restic.",
|
||||
"bookLabel": "Reading now",
|
||||
"bookFallback": "To the library",
|
||||
"photoCaption": "That's me.",
|
||||
"sticker": "Runs on my own servers."
|
||||
},
|
||||
"about": {
|
||||
"title": "Behind the Code",
|
||||
"p1": "Ever since I set up my first home server, I've been hooked on infrastructure. Currently studying in Osnabrück, I split my time between developing modern web apps with Next.js and building mobile experiences with Flutter.",
|
||||
|
||||
@@ -96,6 +96,9 @@ export default {
|
||||
2: "rgb(var(--plakat-paper-2) / <alpha-value>)",
|
||||
},
|
||||
ok: "rgb(var(--plakat-ok) / <alpha-value>)",
|
||||
// Feste Objektfarben auf dem Tisch, unabhängig vom Theme
|
||||
polaroid: { DEFAULT: "#fbfaf8", ink: "#140c0b" },
|
||||
bookcover: { DEFAULT: "#2b1a14", text: "#f3e7dc" },
|
||||
// Warm brown palette
|
||||
cream: "#FAF8F3",
|
||||
sand: "#EFEBE9",
|
||||
|
||||
Reference in New Issue
Block a user