Bewerberhomepage
Die Homepage verbindet Profil, berufliche Stationen und Projekte zu einer geführten Erzählung. Ein kompakter Überblick führt zu den Themen, die sich anschließend gezielt vertiefen lassen.
Das Menüband bildet eine dauerhaft verständliche Kapitelstruktur. Scrollen, Pfeile und direkte Auswahl führen durch dieselbe Inhaltsfolge und lassen die Website wie eine zusammenhängende Präsentation wirken.
Fünf Inhaltskapitel, die übergreifende Zeitachse, visuelle Akkordeons und flexible Detailraster ordnen Bilder, Hintergründe, Kennwerte und Prozesse. Wiederverwendbare Kacheltypen sichern dabei die gemeinsame Gestaltung, ohne den einzelnen Projekten ihren eigenen Aufbau zu nehmen. Die Informationsarchitektur ist in wiederverwendbaren Templates abgebildet. Neue Projekte und Ansichten lassen sich dadurch ergänzen, ohne Navigation und Interaktionslogik erneut aufbauen zu müssen.
Responsiv statt nur verkleinert
Raster, Navigation und Medien ordnen sich je Breakpoint neu. So bleiben Inhalte auf Smartphone, Tablet und Desktop klar lesbar und zuverlässig bedienbar.
6
Navigationsbereiche
11
Detailthemen
27
Inhaltsabschnitte
3
Navigationswege
Kacheltypen, Akkordeon, Carousel und Navigation bilden wiederverwendbare Bausteine. Jeder besitzt eine klare Aufgabe und definierte Zustände.
Das gemeinsame Raster erlaubt unterschiedliche Gewichtungen von Text, Bild und Prozess. Übergänge erklären Zustandswechsel und halten die Orientierung über alle Projekte hinweg stabil.
Navigation als System
Das Menüband hält die sechs Navigationsbereiche dauerhaft verständlich. In Detailansichten bündelt der Burger-Button dieselben Ziele in einem frei schwebenden Popup; Scrollen und die bewusste Pull-Navigation an den Dokumenträndern ergänzen die direkte Auswahl, ohne eine zweite Inhaltslogik zu erzeugen.
Übergangsanimationen
Weiche Bewegungen verbinden Auswahl, Ansichtswechsel und Ankunft zu einem nachvollziehbaren Übergang.
Ansichten aus einem modularen Raster
Das Kachelgrid kombiniert unterschiedliche Formate frei miteinander. Dadurch lassen sich Texte, Bilder und Prozesse vielseitig an den jeweiligen Projektinhalt anpassen, ohne die gemeinsame Gestaltung aufzugeben.
Vom Akkordeon ins Detail
Die aktive Kachel wächst, während ihre Nachbarn zurücktreten. So führt die Akkordeon-Animation den Blick unmittelbar in die gewählte Detailansicht.
Typografie, Abstände, Navigation und Kachelgeometrie skalieren über gemeinsame Layout- und Lesbarkeitswerte. So bleibt die visuelle Hierarchie erhalten, während sich die verfügbare Fläche zwischen Desktop, Tablet und Smartphone deutlich verändert.
Im kompakten Modus werden Menüband, Passworthinweis und Pull-Navigation als zusammengehörige mobile Bedienelemente behandelt. Bilder, Textkacheln und erweiterte Medien passen ihre Höhe an den tatsächlichen Inhalt und den nutzbaren Viewport an, statt lediglich eine Desktopansicht zu verkleinern.
Auf dem Desktop folgen die Kacheln einem redaktionell gesetzten Achtspaltenraster. Unterhalb von 85rem bindet sich die Komposition zunächst an die volle Viewportbreite, während das Raster achtspaltig bleibt. Unterhalb von 75rem wird daraus ein vierspaltiges Tablet-Raster; Breiten und Höhen werden dafür aus den jeweiligen Kachelverträgen neu bestimmt und auf ein gemeinsames Zeilenmaß quantisiert.
Unterhalb von 46rem wechselt jede Detailgruppe in eine einspaltige, semantisch geordnete Abfolge. Die benötigten Zeilenspannen werden bei der aktuellen Breite aus dem gerenderten Inhalt gemessen. Dadurch können Texte wachsen, ohne nachfolgende Kacheln zu überdecken oder am Ende einer Ansicht abgeschnitten zu werden.
Flask liefert adressierbare Seiten aus. Zentrale Python-Definitionen ordnen Kapitel, Projekte und Detailzustände; Jinja setzt daraus wiederverwendbare Ansichten zusammen. Sensible Informationen und Medien bleiben serverseitig geschützt. Der vollständig eingegebene 9-stellige Zugangscode wird gegen einen serverseitigen Hash geprüft; erst danach gibt die Sitzung die betreffenden Daten und Dateien frei.
Im Browser arbeitet bewusst kein React, Vue oder Svelte. Navigation, Scrollsteuerung, Akkordeons, Carousel, Kachelexpansion und Übergänge sind als modulare Vanilla-JavaScript-Controller umgesetzt. HTML und eigenes CSS bilden Raster und Kacheltypen ohne Bootstrap oder Tailwind.
InhaltsmodellPython-Definitionen
SchutzbereichSQLite & private Assets
FlaskRouten · Zugangscodeprüfung · Freigabe
JinjaTemplates
OberflächeHTML & CSS
InteraktionVanilla JavaScript
From scratch
Raster · Navigation · Akkordeon · Carousel · Scrolllogik · Übergänge · Zugriffsschutz
Geschützte Bilder und Kontaktdaten werden nicht vorab an den Browser ausgeliefert. Die Prüfung des alphanumerischen Zugangscodes findet serverseitig gegen einen Hash statt und ist gegen wiederholte Versuche begrenzt; eine freigeschaltete Sitzung erhält anschließend ausschließlich die vorgesehenen Inhalte. Private Medien werden ohne öffentlichen Cache ausgeliefert. Automatisierte Tests prüfen Seitenstruktur, Kacheltypen, Assets und Schutzregeln. Wiederverwendbare Definitionen halten neue Detailansichten wartbar und verhindern projektspezifische Sonderlösungen.
