shpetimgashi.com, Portfolio & Lebenslauf
Die Website, die Sie gerade lesen. Eine einzige, per Schema validierte Datendatei steuert den gerenderten Lebenslauf, seine Druckfassung und die Projektübersicht.
Überblick
Diese Website. Ein klassischer Lebenslauf kann Frontend-Arbeit beschreiben, aber nicht vorführen, und wer dieselben Karrieredaten in einem PDF, einer Webseite und etwas Interaktivem pflegt, sorgt zuverlässig dafür, dass die drei auseinanderlaufen. Das Portfolio sollte beide Probleme zugleich lösen: Es ist selbst der Nachweis, und es gibt genau einen Ort, an dem die Daten liegen.
Architektur
Eine einzige Datenquelle
Berufserfahrung, Ausbildung, Kenntnisse und die Projektliste liegen alle in einer einzigen Datei cv.yaml. Ein Zod-Schema prüft sie beim Build, sodass ein fehlerhaftes Datum oder ein fehlendes Pflichtfeld den Build scheitern lässt, statt online zu gehen. Jede Darstellung des Lebenslaufs liest aus dieser einen Datei:
- Der gerenderte HTML-Lebenslauf und sein Druck-Stylesheet
- Die Projektübersicht, nach Bereichen gruppiert
Die ausführlichen Fallstudien sind eigene Seiten. Innerhalb des Lebenslaufs kann nichts unbemerkt von etwas anderem abweichen.
Designsystem
Eine tokenbasierte CSS-Schicht mit dunklem und hellem Farbschema, ein eigenes Druck-Stylesheet, damit die Seite ein sauberes PDF ergibt, und durchgehende Berücksichtigung von prefers-reduced-motion.
Engineering-Praxis
- CI-Pipeline: Lint, Typprüfung, Unit-Tests, Build, Prüfungen der gebauten Ausgabe und End-to-End-Tests in Chromium, Firefox und WebKit, bei jeder Änderung
- Tests: Vitest für die Datenschicht, mit Prüfungen zu Reihenfolge und Chronologie und einer Schutzprüfung, die den Build bei Inhalten scheitern lässt, die nicht veröffentlicht werden dürfen, dazu Playwright für Reflow-, Smoke- und Barrierefreiheitstests gegen die gebaute Website
- Prüfungen der gebauten Ausgabe: ein zweiter Vertraulichkeits-Scan über alles, was ausgeliefert wird, die Security-Header, die die Website tatsächlich sendet, ein JavaScript-Budget und E-Mail-Links, die das Umschreiben durch den Hoster überstehen
- Deployment: Cloudflare Pages, veröffentlicht aus dem Main-Branch und erst, nachdem alle Prüfungen bestanden sind
Gestaltungsprinzip
Hier wiederholt sich dasselbe Prinzip wie beim Werkzeug zur Materialoptimierung und bei der Plattform für Komfort-Feedback: die Antwort zuerst, die Tiefe darunter für alle, die sie suchen. Der Lebenslauf ist in einer halben Minute gelesen; die Fallstudien und die Druckansicht sind für alle da, die weitergehen möchten.