Portfolio Website knaack.it
Entwicklung einer hochperfomanten Portfolio-Seite mit modernem Web-Stack, optimiert für Edge-Deployment.
- Astro 5
- TypeScript
- Tailwind CSS
- Cloudflare
Die Herausforderung
Als Software Architekt benötigte ich eine digitale Präsenz, die nicht nur Informationen vermittelt, sondern meine technischen Prinzipien direkt demonstriert: kompromisslose Performance, Wartbarkeit und Skalierbarkeit. Standard-Baukästen oder Wordpress-Installationen kamen nicht in Frage, da sie oft Bloatware mit sich bringen, die die User Experience (UX) negativ beeinflusst. Das Ziel war ein Google Lighthouse Score von 100/100 in allen Kategorien bei gleichzeitiger Mehrsprachigkeit und modernem Developer Experience (DX).
Die Lösung
Nach einer Evaluierung aktueller Frameworks fiel die Wahl auf Astro 5. Astro's "Islands Architecture" erlaubt es, interaktive Komponenten (sofern nötig) selektiv zu laden, während der Großteil der Seite als statisches HTML ausgeliefert wird.
Architektur & Stack
- Frontend: Astro 5 für Server-Side Rendering (SSR) in der Edge und Static Site Generation (SSG).
- Styling: Tailwind CSS für Utility-First Styling, das zu minimalen CSS-Dateigrößen kompiliert wird.
- Content Management: Astro Content Collections bieten Type-Safety für Markdown-Dateien und validieren Metadaten bereits beim Build-Prozess.
- Infrastructure: Deployment via Cloudflare Pages. Dies gewährleistet eine globale Verteilung im CDN und millisekundenschnelle Ladezeiten durch Edge-Caching.
Hauptfunktionen
- Performance-First: Kein ungenutztes JavaScript im Client durch Astro's Zero-JS Standard.
- Internationalisierung (i18n): Volle Unterstützung für Deutsch und Englisch, inkl. Routing-Logik und SEO-Tags.
- PDF-Generierung: Automatisierte Erstellung von Lebensläufen aus denselben Datenquellen, die auch die Webseite befüllen.
- CI/CD: Vollautomatische Deployments bei jedem Git-Push.
Das Ergebnis
Die Webseite erreicht konsistent perfekte Ergebnisse in Core Web Vitals und Lighthouse-Audits. Sie dient als lebendes Beispiel für modernen, effizienten Webbau und ermöglicht schnelle Iterationen neuer Inhalte durch die strukturierte Content-Pipeline.