Personal Portfolio

Web Development

Personal Portfolio - Entwicklung einer modernen, mehrsprachigen Portfolio-Website mit Fokus auf Performance, Ästhetik und einfacher Erweiterbarkeit.

Ausgangspunkt & Herausforderung

Ich wollte eine persönliche Website entwickeln, die nicht nur meine Projekte präsentiert, sondern auch technisch als Referenz überzeugt.

Baukastensysteme konnten weder bei der Performance noch bei der gestalterischen Freiheit mithalten, weshalb ich mich für eine eigene Lösung mit Astro und Tailwind entschieden habe.

Ansatz & Umsetzung

Das Portfolio basiert auf Astro, wodurch die Seite durch statische Auslieferung extrem schnell lädt. TailwindCSS sorgt für ein klares, minimalistisches Design, während GSAP dezente Micro-Animationen beisteuert, die das Nutzererlebnis verfeinern.

Das Hosting erfolgt auf einem privaten VPS mit Plesk, inklusive eines selbst konfigurierten CI/CD-Workflows.

Ergebnis & Wirkung

Das Projekt erreicht die Höchstpunktzahl von 100 in allen Lighthouse-Kategorien: Performance, SEO, Accessibility und Best Practices.

Mit ihrer klaren Struktur, den zweisprachigen Inhalten und der durchdachten SEO-Optimierung ist die Seite zur zentralen Anlaufstelle für meine Projekte, Case Studies und Kontaktanfragen geworden.

Technologie & Ausblick

Technologie-Stack: Astro · TailwindCSS · TypeScript · GSAP · VPS (Plesk)

In Zukunft plane ich ein Blog-Modul, interaktive Projekt-Filter und eine CMS-Integration für noch flexiblere Inhaltsverwaltung.

100
Lighthouse Score
2
Sprachen (DE/EN)
< 1s
Ladezeit

Verwendete Technologien

5 Technologien Web Development
Astro Modernes Static Site Generator für maximale Performance. Erzeugt die statische Website mit optimiertem Ladeverhalten und bestem Lighthouse Score.
Verwendet
TailwindCSS Utility-First CSS-Framework für schnelles, responsives Design. Bietet eine saubere und wartbare CSS-Architektur.
Verwendet
TypeScript TypeScript-Sicherheit für bessere Code-Qualität und bessere Entwicklungserfahrung mit automatischer Typ-Prüfung.
Verwendet
GSAP Premium-Animationen für Micro-Interactions und Scroll-Effekte. Sorgt für professionelle und flüssige User Experience.
Verwendet
VPS (Plesk) Privater Server mit voller Kontrolle über Hosting, Performance und Sicherheit der Website.
Verwendet