Leon Beyer

Portfolio Architektur

Eine skalierbare Web-Applikation als modulares Fundament für die Präsentation meiner Projekte und technischen Experimente.

Backend Ruby on Rails / SQLite
Frontend Tailwind CSS v4
Hosting Self-Hosted Docker

Zusammenfassung

Statt einer statischen Seite bietet dieses Portfolio ein robustes Ruby on Rails Backend mit einem eigenen Design-System auf Tailwind CSS v4. Ziel war es, ein modulares System zu schaffen, das mit meinen Anforderungen wächst und neue Case Studies in kürzester Zeit ermöglicht.

Modulares Design & Skalierbarkeit

Die komplette Oberfläche läuft inzwischen auf Tailwind CSS v4 statt auf verstreutem Vanilla-CSS – mit wiederverwendbaren Partials für Karten, Badges und Buttons, angelehnt an die Komponenten von railsblocks.com. Die sieben Projekt-Detailseiten waren vorher sieben fast identische, von Hand kopierte Templates; jetzt bauen alle auf denselben vier Partials auf (Hero, TL;DR, Bildergalerie, Textabschnitt) und unterscheiden sich nur noch in den Inhalten, nicht mehr im Code.

Entwicklungsprozess & KI-Synergie

Ein wichtiger Teil meines Workflows ist der gezielte Einsatz von KI-Coding-Tools – für Rapid Prototyping, komplexere Styling-Ansätze oder, wie beim Tailwind-Umbau dieser Seite, auch für größere, mehrstufige Refactorings. Dabei behalte ich die Kontrolle: Jede Änderung wird von mir geprüft, im Browser getestet und erst dann freigegeben. Dieser Ansatz lässt mich deutlich mehr umsetzen, ohne den Überblick über die eigene Architektur zu verlieren.

Herausforderung

Die größte Herausforderung beim Redesign war, die Seite während der laufenden Migration funktionsfähig zu halten: Tailwind und die alte CSS mussten mehrere Phasen lang parallel existieren, ohne sich gegenseitig zu überschreiben. Gelöst habe ich das über CSS Cascade Layers – die alten Styles liegen in einem niedriger priorisierten Layer, sodass neue Tailwind-Klassen automatisch gewinnen, sobald eine Seite umgestellt ist. Am Ende des Umbaus waren die alten Stylesheets komplett überflüssig und konnten gelöscht werden.

Technische Eckpunkte