Diese Seite wurde von Grund auf neu gebaut. Neuer Look, neuer Stack, gleiche Idee — ein ruhiges Zuhause für die Arbeit und ein Notizbuch für den Bau-Alltag. Willkommen.
Was sich geändert hat
Die vorherige Seite war eine Nuxt-2-App aus 2021: Vue 2, Tailwind 2, eine Handvoll Plugins, und der Inhalt lebte in den Komponenten. Sie hat ihren Dienst getan, aber das Framework hatte sein Lebensende erreicht und die Inhaltsschicht ließ sich nur schwer erweitern.
Die neue Seite behält den visuellen Charakter — dichte Typografie, großzügiger Weißraum, ein kräftiger Akzent — und schreibt alles darunter neu:
- Inhalt wandert aus den Komponenten in typisierte Collections (
src/content/) mit Zod-Schemas für Home-Texte, Life-Kapitel, rechtliche Seiten und den Blog, den du gerade liest. Beiträge sind MDX. - Seiten werden statisch zur Build-Zeit gerendert und als reines HTML ausgeliefert. Interaktive Teile hydrieren on idle, nicht beim Laden.
- i18n läuft über Routen (
/de/...) statt über ein Plugin, was eine Magie-Schicht aus URLs und SEO entfernt. - Eine Toolchain für Lint, Format und Check (Biome) ersetzt das alte ESLint-+-Prettier-Paar.
Der Stack
- Astro 6 — content-first, überwiegend statisch, Islands nur dort, wo wirklich JavaScript nötig ist.
- React 19 + Motion — die wenigen interaktiven Stellen (Cursor-Effekte, Mobile-Menü, Marquee) sind React-Islands, animiert mit Motion.
- MDX — Langform-Inhalte mit der Option, bei Bedarf Komponenten einzubinden.
- Tailwind 4 zusammen mit einer kleinen Sammlung handgeschriebener CSS-Custom-Properties für Typo- und Farb-Tokens.
- Biome für Lint + Format, Netlify zum Hosten, Resend für das Kontaktformular.
Ein Blick hinein: die Cursor-Spur
Das, was den meisten zuerst auffällt, ist der Streifen, der dem Cursor folgt. Es
ist eine React-Island, die auf pointermove lauscht, die Geschwindigkeit zwischen
zwei Messpunkten ermittelt und kurzlebige Blobs erzeugt, die sich entlang der
Bewegungsrichtung strecken — eine langsame Bewegung hinterlässt also weiche
Punkte, ein schneller Schwenk einen Kometen.
Der Kern ist klein. Ohne das Throttling und das React-State-Drumherum ist die Geometrie genau das hier:
const onMove = (e: PointerEvent) => {
const now = performance.now();
const dx = e.clientX - lastX;
const dy = e.clientY - lastY;
const dt = Math.max(now - lastTime, 1);
// Geschwindigkeit → wie stark der Blob entlang seiner Bahn gestreckt wird.
const speed = Math.sqrt(dx * dx + dy * dy) / dt;
const stretch = 1 + Math.min(speed / FAST_SPEED, 1) * (MAX_STRETCH - 1);
const angle = (Math.atan2(dy, dx) * 180) / Math.PI;
spawn({ x: e.clientX, y: e.clientY, angle, stretch });
lastX = e.clientX;
lastY = e.clientY;
lastTime = now;
};Jede erzeugte Marke ist ein weichgezeichneter Radial-Gradient in einer
AnimatePresence — sie blendet in etwa 700 ms aus und entfernt sich selbst. Der
vollständige Quellcode, inklusive Throttle (MIN_DIST, MIN_INTERVAL),
Reduced-Motion-Abbruch und Coarse-Pointer-Guard, liegt in
src/components/motion/CursorTrail.tsx.
Wenn Bewegung reduzieren im Betriebssystem aktiv ist, wird der Effekt nicht
gerendert — die Komponente liefert dann null zurück. Gleiches gilt für
Touch-Geräte, wo er sowohl sinnlos als auch teuer wäre.
Wie es weitergeht
Weitere Beiträge erscheinen hier, wenn es kleine Tools, Workflow-Notizen oder gelegentlich eine ausführlichere Analyse zu einem Teil der Seite gibt. Nicht nach Plan — nur wenn es etwas gibt, das es wert ist, festgehalten zu werden.
Danke fürs Vorbeischauen.