Diese Portfolio-Seite
Die Seite, auf der Sie gerade sind. Sie ist dazu da um einen Teil meiner Skills zu präsentieren.
Die Seite, die Sie gerade lesen. Sie ist als Bewerbungsseite gebaut, sollte die Fähigkeiten aus dem Lebenslauf aber nicht nur behaupten, sondern vorführen: Der Node-Graph auf der Startseite ist die Navigation und gleichzeitig ein Beispiel für eine Systemintegrationen. Die Deployment-Grafik zeigt echte Daten aus dem letzten Deployment des Repos in der sich der Code dieser Seite befindet.
Warum so gebaut: Ursprünglich hatte ich reines Next.js geplant. Dann kam der Einfall, dass ja nicht alles durch React laufen muss und somit die Webseite performativer sein kann. Der Informationsteil ist ein reiner statischer Inhalt, nichts soll ablenken. Mit Next.js hätte ich den React-Runtime auch für Seiten ausgeliefert, die ihn nie brauchen. Deshalb Astro mit React-Islands. Die Projektseiten und das Impressum laden kein einziges JavaScript-Bundle — nur wenige Zeilen Inline-Skript für Theme-Umschalter und Scroll-Animation. React wird ausschließlich auf der Startseite für den Node-Graph und die Deployment-Grafik geladen, und dank client:visible auch dort erst, wenn die Komponenten tatsächlich ins Sichtfeld scrollen. React also nur da, wo es benötigt wird.
Technisch interessant: Die „Live”-Daten entstehen zur Build-Zeit, nicht im Browser. Zwei Skripte laufen über den npm-prebuild-Hook und schreiben JSON nach src/data: eines liest Commit, Branch und Zeitstempel aus den GitHub-Actions-Umgebungsvariablen (mit Fallback auf git log, damit es lokal genauso funktioniert), das andere holt Sterne, Sprache und letzten Push über die GitHub-API. Welche Repos abgefragt werden ist nirgends fest verdrahtet. Das Skript liest die Frontmatter aller Projekt-MDX-Dateien und leitet die Liste daraus ab. Es reicht also einfach eine neue Projektdatei anzulegen. Graph-Knoten, Unterseite und API-Abfrage entstehen von selbst. Genau so ist auch diese Seite hier hinzugekommen. Die Projekttexte liegen als typisierte Content Collection mit Zod-Schema vor: Ein Tippfehler im Frontmatter bricht den Build, statt live eine kaputte Seite zu erzeugen. Ein bewusst verworfener Ansatz war ein echter Live-Ticker für die Deployment-Daten. Deployments finden ja nicht durchgehend statt, ein „Live”-Widget stünde also meistens still. Stattdessen werden die echten Daten bei jedem Seitenaufruf als Animation abgespielt.
Deployment: Azure Static Web Apps auf dem kostenlosen Tarif, ausgelöst per GitHub Actions bei jedem Push auf main, inklusive Preview-Umgebungen für Pull Requests. Die Deployment-Grafik auf der Startseite zeigt nicht irgendeine Beispiel-Pipeline, sondern die Daten aus genau diesem Workflow-Lauf.