CS / 05Case-Study
Dieses Portfolio: Next.js App Router, Dark-only-Designsystem, technische Case-Studies, strukturierte SEO-Daten, validierter Kontaktweg und Coolify-Deployment.
01 / System
01 / Kontext
Kein Content-Management-System und keine Datenbank, weil beides für diesen Umfang nur Betriebsaufwand wäre. Typisierte Inhalte erzeugen Case-Studies, Leistungsseiten, Metadaten und Sitemap aus konsistenten Quellen; Tests prüfen Vollständigkeit, Kontraste und Links.
02 / Problem
Ein Portfolio soll nicht nur Projekte auflisten. Es braucht schnelle, zugängliche Seiten, strukturierte Inhalte, einen verlässlichen Kontaktweg und eine Grundlage, die sich später erweitern lässt. Dafür muss heute noch keine Datenbank betrieben werden.
03 / Umsetzung
Next.js App Router erzeugt Portfolio, Leistungsseiten und Case-Studies statisch. Farb-, Typografie-, Abstands- und Bewegungsebene werden zentral über CSS-Custom-Properties gesteuert. Das feste dunkle Farbsystem, die monochrome Bildsprache und bewusst reduzierte Radien bilden eine konsistente Oberfläche; Docker und Coolify liefern denselben Build reproduzierbar aus.
02 / Decisions
Nicht nur was gebaut wurde, sondern warum das System genau diese Form bekommen hat.
Ein Test liest die Token-Datei, konvertiert jede oklch-Farbe nach sRGB und prüft jedes Textpaar gegen 4.5:1 und jeden Bedienelementrand gegen 3:1. Ein zu blasser Grauton fällt damit im Testlauf auf, nicht beim Nutzer.
Die gesamte visuelle Sprache ist für einen kontrollierten dunklen Grund entworfen. Dadurch bleiben Liniengrafiken, Tiefenstaffelung und die warme monochrome Typografie konsistent, während das Markenorange nur die Identität kennzeichnet.
Ohne konfiguriertes SMTP meldet es einen Fehler und bietet den direkten Mailto-Weg an, statt eine grüne Bestätigung für eine Nachricht anzuzeigen, die nie versendet wurde.
Damit ist eine fehlende Case-Study-Sektion ein Typfehler und ein toter Link ein fehlgeschlagener Test. Solche Fehler werden nicht erst zufällig beim Durchklicken entdeckt.
03 / Delivery
Technologien
Ehrliche Grenze
Diese Seite hat bewusst kein CMS und keine Datenbank. Serverseitig existieren nur Healthcheck und Kontaktversand; Buchungen, Zahlungen und ein Adminbereich sind nicht vorhanden.
Nächstes Projekt
PA-IT-Services