Skip to content
Projekte
Bereitstellung und WebStatus: Umgesetzt2025

Engineering-Portfolio-Plattform

Entwickelt eine mehrsprachige Portfolio-Plattform mit strukturierten Inhalten, CI-gestuetztem Deployment und wartbaren Publishing-Workflows.

WebPlattformCI/CD

Kurzüberblick

Rolle

Plattform-Verantwortung: Frontend-Umsetzung, Deployment-Workflow, Inhaltsstruktur, CI-Validierung und Production Delivery.

Umfang

Ich habe die Seite mit Next.js App Router, TypeScript, leichtgewichtigem i18n, wiederverwendbaren Inhaltskomponenten und GitHub-gekoppeltem Deployment umgesetzt. Das Ergebnis ist eine wartbare Publishing-Plattform für Projekte,...

Rahmenbedingungen

Ein gemanagtes Deployment-Modell, minimale Backend-Oberfläche und ein kontrollierter Content-Workflow halten die öffentliche Plattform einfacher und sicherer im Betrieb. Versionskontrollierte Inhalte und Preview-Deployments...

Evidenz

Eine stärkere professionelle Plattform für technisches Storytelling geschaffen

Architektur

Systemdesign-Ablauf

Node

Der Browser erhält ein performance-orientiertes Frontend für Projekterkundung und professionelle Positionierung.

Edge

Vercel übernimmt Auslieferung, Preview-Deployments und Hosting für die öffentliche Site-Erfahrung.

Cloud

GitHub fungiert als Source-of-Truth für Versionskontrolle und deploymentgesteuerte Aktualisierungen.

Technische Diagramme

Die Architekturdiagramme dienen als Review-Artefakte, damit Systemgrenzen, Runtime-Flüsse und operative Entscheidungen schnell prüfbar sind.

1 Technische Diagramme

System-, Deployment- und Content-Flow

End-to-End-Architekturansicht der Portfolio-Plattform: lokale Content-Arbeit, GitHub als Source of Truth, CI-Validierung, Vercel-Deployment, öffentliche Routen und optionale privacy-first Analytics.

Diagramm öffnen
System-, Deployment- und Content-Flow diagram for Engineering Portfolio Platform

Review-Fokus

  • Zeigt Source Control, strukturierte Inhalte, CI-Validierung, Preview-Deployment, Produktionsauslieferung und Besucherzugriff in einem Review-Artefakt
  • Passt zum realen Plattform-Stack: Next.js, TypeScript, Tailwind CSS, GitHub Actions, Vercel und Plausible Analytics
  • Macht das Projekt als entwickelte Publishing-Plattform bewertbar statt nur als statische persönliche Website

Technische Entscheidungen

  • Mehrsprachiges Inhaltsmodell für Projekte, CV und Fachtexte
  • Wiederverwendbare Komponentenstruktur für wartbare Weiterentwicklung
  • GitHub-gekoppelter Deployment-Workflow
  • SEO- und Accessibility-bewusste öffentliche Präsentation

Herausforderungen

  • Eine persoenliche Website muss schnell, wartbar und über mehrere Inhaltsbereiche hinweg leicht aktualisierbar sein, ohne dass jede Aenderung zu manueller Mehrarbeit wird.
  • Ein gemanagtes Deployment-Modell, minimale Backend-Oberfläche und ein kontrollierter Content-Workflow halten die öffentliche Plattform einfacher und sicherer im Betrieb.
  • Versionskontrollierte Inhalte und Preview-Deployments reduzieren Publishing-Risiken und machen Site-Aenderungen vor dem Release besser pruefbar.

Lessons Learned

  • Eine stärkere professionelle Plattform für technisches Storytelling geschaffen
  • Den Aufwand für neue Fallstudien und Portfolio-Updates reduziert
  • Eine wiederverwendbare Web-Delivery-Basis parallel zur Self-Hosted-Variante aufgebaut

Nächste Verbesserungen

  • Diagramme bei größeren Architekturänderungen aktualisieren.
  • Dokumentation weiter verdichten: README, Architekturentscheidungen und Screenshots synchron halten.

Tech-Stack

Next.jsTypeScriptTailwind CSSVercelGitHub

Artefakte

Verwandtes Projekt

Die angrenzende Fallstudie zeigt, wie dieses Projekt in die größere Portfolio-Story passt.

Hybrid-Cloud-Delivery-Plattform

Elkaza.at läuft auf einer self-hosted Hybrid-Delivery-Plattform, bei der vps1 den öffentlichen Ingress und die CI/CD-Steuerung übernimmt, während debian-core das gehärtete statische Frontend, Analytics, Observability und Backups über Docker ausliefert.