Entwurf und Entwicklung einer vollständig statischen persönlichen Portfolio-Website zur Präsentation von Software-Engineering-Projekten, technischer Erfahrung und beruflicher Kompetenz. Die Website dient als zentrale Plattform zur Präsentation von Projektarbeiten, wobei der Schwerpunkt auf Leistung, Wartbarkeit, Barrierefreiheit und responsivem Design liegt.

Das visuelle Design ist stark von der modernen Ästhetik und den Layout-Prinzipien inspiriert, die auf den öffentlich zugänglichen Websites von Meta zum Einsatz kommen, und wurde in eine schlanke, eigenständig entwickelte Implementierung übertragen.

Überblick

Das Portfolio basiert auf einem modernen, TypeScript-basierten Frontend-Stack und wird während des Build-Prozesses zu statischen Assets kompiliert. Die generierte Website wird über GitHub Pages gehostet, was einen einfachen Deployment-Workflow ermöglicht und gleichzeitig von der Zuverlässigkeit und Skalierbarkeit des statischen Hostings profitiert.

Bei der Konzeption des Projekts lag der Schwerpunkt auf folgenden Aspekten:

• Schnelle Ladezeiten
• Responsive Layouts
• Barrierefreiheit
• Mehrsprachige Inhalte
• Langfristige Wartbarkeit
• Minimale Hosting-Anforderungen

Architektur der statischen Website

Die Website wurde mit Deno, TypeScript, React, Tailwind CSS und Standard-Webtechnologien implementiert.

Der Build-Prozess generiert vollständig statische HTML-, CSS- und JavaScript-Assets, wodurch keine serverseitige Infrastruktur erforderlich ist und gleichzeitig eine moderne Benutzererfahrung gewährleistet bleibt.

Zu den wichtigsten Vorteilen dieses Ansatzes gehören:

• Geringere Komplexität im Betrieb
• Niedrige Hosting-Kosten
• Verbesserte Sicherheit durch statische Bereitstellung
• Hohe Leistung und Caching-Effizienz

Die fertigen Build-Artefakte werden über ein eigenes GitHub-Pages-Repository bereitgestellt.

Responsives Design

Es wurde ein responsives Layout entwickelt, das sich an eine Vielzahl von Bildschirmgrößen und Geräten anpasst.

Zu den Funktionen gehören:

• Für Desktop- und Mobilgeräte optimierte Layouts
• Adaptive Darstellung der Inhalte
• Flexible Größenanpassung der Komponenten
• Touch-freundliche Navigation
• Responsive Projekt- und Inhaltsbereiche

Auf kleineren Bildschirmen wechselt die Hauptnavigation automatisch zu einem Menü im Sidebar-Stil, um die Benutzerfreundlichkeit zu verbessern und den verfügbaren Bildschirmplatz optimal zu nutzen.

Theme-Unterstützung

Es wurde eine automatische Unterstützung für den Hell- und Dunkelmodus implementiert, die sich nach dem Betriebssystem oder den Browsereinstellungen des Nutzers richtet.

Das Theme-System bietet:

• Automatische Erkennung der Einstellungen
• Einheitliches Styling über alle Komponenten hinweg
• Verbesserte Lesbarkeit in verschiedenen Umgebungen
• Nahtloser Themenwechsel ohne zusätzliche Benutzerkonfiguration

Internationalisierung

Die Website wurde mit vollständiger Unterstützung für zweisprachige Inhalte erstellt, sodass Besucher zwischen Englisch und Deutsch wechseln können.

Alle Portfolio-Inhalte werden in beiden Sprachen gepflegt und können dynamisch umgeschaltet werden, ohne dass separate Website-Versionen erforderlich sind.

Dieser Ansatz gewährleistet die Barrierefreiheit sowohl für ein internationales als auch für ein deutschsprachiges Publikum und sorgt gleichzeitig für eine zentralisierte Inhaltsverwaltung.

Workflow zur Inhaltserstellung

Projektbeschreibungen werden im Markdown-Format verfasst, um die Lesbarkeit zu verbessern und eine übersichtliche Inhaltsstruktur zu gewährleisten.

Zur Optimierung des Dokumentationsaufwands:

• Die ersten englischen Projektbeschreibungen wurden mit ChatGPT generiert
• Die Inhalte werden als Markdown gespeichert und gerendert
• Die deutschen Übersetzungen wurden mit DeepL erstellt
• Beide Sprachversionen werden direkt in die Website integriert

Dieser Workflow ermöglicht eine einheitliche Darstellung und reduziert gleichzeitig den Aufwand für die Pflege der mehrsprachigen Projektdokumentation.

Technologien

Frontend

• TypeScript
• React
• Tailwind CSS
• HTML

Build & Bereitstellung

• Deno
• Statische Website-Generierung
• GitHub Pages

Inhaltsverwaltung

• Markdown
• Internationalisierung (i18n)

Wichtigste Erfolge

• Entwurf und Umsetzung einer vollständig statischen Portfolio-Website von Grund auf
• Aufbau eines Deno-basierten Workflows zur statischen Generierung
• Erstellung responsiver Layouts für Desktop- und Mobilgeräte
• Implementierung einer automatischen Unterstützung für Hell- und Dunkelmodus
• Einbindung einer zweisprachigen Inhaltsverwaltung (Englisch und Deutsch)
• Etablierung eines Markdown-basierten Inhalts-Workflows für die Projektdokumentation
• Bereitstellung der Website über GitHub Pages ohne serverseitige Infrastruktur
• Neugestaltung und Anpassung von Designkonzepten, inspiriert vom Webauftritt von Meta