HM fictional_portfolio – Logo
Zurück zu den Projekten
Fast fertig 2023 37 Commits

fictional_portfolio

Eine interaktive Seite in reinem Vanilla-JavaScript – mit eigener Physik-Engine für fliegende Raketen, Pacman-Button, animierten Diagrammen und per AJAX nachgeladenen Kapiteln.

fictional_portfolio ist eine interaktive Portfolio-Seite in reinem Vanilla JavaScript – kein Framework, kein Build-Schritt. Der komplette Inhalt wird zur Laufzeit aus einer JSON-Datei aufgebaut (assets/data.json, geladen per XMLHttpRequest), und als verspielte Ebene darüber liegt ein kleines „Raketen”-Spiel mit eigener Physik-Engine. Sämtliche Inhalte sind fiktive Demo-Daten.

Die einzelnen Bausteine – vom datengetriebenen Rendering über animierte Diagramme und Markdown-Blöcke bis zum physikbasierten Raketen-System – sind in der Galerie unten im Detail beschrieben.

Die Medien in der Galerie wurden automatisch aus der laufenden Seite aufgenommen (Playwright + ffmpeg), inklusive sichtbarem Mauszeiger und Klick-Visualisierung.

Galerie

Einblicke

  • Datengetriebenes Rendering: Die Seite ist im HTML praktisch leer – alles entsteht zur Laufzeit aus assets/data.json, geladen per XMLHttpRequest. Pro Kapitel bestimmt das Feld „type“ den Renderer.
  • Skills als animiertes Balkendiagramm: Die Balken skalieren auf ihren Wert und bekommen zufällige Farben; beim Überfahren verbreitert sich ein Balken und blendet die zugehörige Projektnotiz ein.
  • Interessensgebiete erscheinen als farbige Badges – datengetrieben aus derselben JSON-Quelle.
  • Zertifikate & Berufserfahrung als Logo-+-Text-Blöcke, deren Beschreibung mit marked.js zur Laufzeit aus Markdown gerendert wird.
  • Projekt-Slider: Jedes Projekt ist eine Karte mit eigenem Medien-Slider, der per Klick und automatisch (alle 15–19 s) weiterschaltet – Bilder, Videos (.mp4) und GitHub-Badges via shields.io.
  • Das Raketen-System: Ein Klick aufs Pacman-Icon spawnt vier Raketen, die der Maus mit echter Physik folgen (Beschleunigung, Dämpfung, Maximalgeschwindigkeit, Zufallslenkung) und sich in Flugrichtung drehen.
  • Effekte beim Überfliegen: Je nach Raketentyp wackeln, entsättigen, rotieren oder verdunkeln die überflogenen Elemente.
  • Treffer / Zerstören: Ein Klick auf eine Rakete löst eine Explosions-Animation aus.
  • Reparatur-Menü: Der Rechtsklick ist umgemünzt – statt des Browser-Menüs erscheint ein eigenes Menü, das zerstörte Raketen auflistet und per Klick wieder zum Leben erweckt.
  • Responsives Layout (breit): Auf breiten Screens liegen die Kapitel im Flex-Wrap-Raster nebeneinander.
  • Responsives Layout (mobil): Auf dem Smartphone stapeln sich die Kapitel und der Header bricht sauber um.
Weiter stöbern

Weitere Projekte

Dashboard mit der filter- und sortierbaren Tabelle aller Bewerbungen

Automatische Bewerbungen
work-together – Übersicht der Projekt-Marktplatz-Plattform

work-together
prayer-time-graphs – gestapeltes Balkendiagramm der Gebetszeiten

prayer-time-graphs