Umsetzung einer dynamischen Projektvorschau auf der Hauptseite

Um die Hauptseite meiner Webseite sowohl klar und schlank zu halten, aber gleichzeitig interaktiver und ansprechender zu gestalten, habe ich mich entschieden, eine dezent integrierte Projektvorschau mit dynamischen Elementen einzuführen. Der Fokus liegt darauf, Besuchern die Möglichkeit zu geben, erste Eindrücke von Projekten direkt auf der Hauptseite zu gewinnen, ohne dabei die Gradlinigkeit zu verlieren.

Die drei Buttons im Footer repräsentieren jeweils ein Projekt und ermöglichen den direkten Zugriff auf dessen Präsentationsvideo. Die Interaktion läuft wie folgt ab:

• Beim Klick auf einen Button wird das Video dieses Projekts im Hero-Bereich angezeigt.
• Der Hero-Bereich passt sich dynamisch an den ausgewählten Button an:
  • Das Video wird ersetzt.
  • Der Titel und der Call-to-Action-Link („Mehr erfahren“) ändern sich und führen direkt zur detaillierten Projektseite.

Beispiele:

• Button 1: Projekt „VR Roller Coaster“ – Das Präsentationsvideo wird im Hero-Bereich abgespielt. Call-to-Action-Button: „Zu VR Roller Coaster“ führt zur Projektseite.
• Button 2: Projekt „3D Design Environment“ – Das Präsentationsvideo wird im Hero-Bereich abgespielt. Call-to-Action-Button: „Zu 3D Design Environment“ führt zur Projektseite.
• Button 3: Projekt „Sound Design Showcase“ – Das Präsentationsvideo wird im Hero-Bereich abgespielt. Call-to-Action-Button: „Zu Sound Design Showcase“ führt zur Projektseite.

• Keine Details: Die Buttons und Videos im Footer dienen nur als Vorschau. Für weitere Informationen wird der Besucher auf die separate Projektseite geleitet, wo die Projekte ausführlich dargestellt werden.
• Klares Design: Die Buttons im Footer bleiben dezent.
  • Ein statisches Vorschaubild oder ein einfaches Symbol repräsentiert jedes Projekt.
  • Kurze Titel geben an, welches Projekt gezeigt wird.

Der Hero-Bereich wird dynamisch aktualisiert, wenn einer der Footer-Buttons angeklickt wird:

• Das präsentierte Video im Hero-Bereich wird durch das Video des ausgewählten Projekts ersetzt.
• Der Titel und der Call-to-Action-Button („Mehr erfahren“) passen sich entsprechend an und leiten zur detaillierten Projektseite weiter.

Hero-Bereich:

Der Hero-Bereich zeigt das ausgewählte Projektvideo an. Besucher können:

• Das Video direkt ansehen.
• Über den Call-to-Action-Button zur detaillierten Projektseite gelangen.

Header-Navigation:

Der Link „Projekte“ im Header führt zur Projektübersichtsseite, die alle Projekte übersichtlich darstellt.

Footer-Buttons:

Die drei Buttons im Footer bieten einen schnellen Einstieg zu den Präsentationsvideos der Projekte.

• HTML/CSS:
  • Der Hero-Bereich wird so gestaltet, dass er Videos dynamisch einbinden kann.
  • Die Footer-Buttons lösen eine Änderung im Hero-Bereich aus (z. B. durch ID-Wechsel oder Klassenänderung).
• JavaScript:
  • Beim Klick auf einen Footer-Button wird das entsprechende Video geladen.
  • Der Text und der Call-to-Action-Button im Hero-Bereich werden ebenfalls dynamisch angepasst.
• Fallback: Falls JavaScript deaktiviert ist, führen die Buttons direkt zur jeweiligen Projektseite.

1. Der Besucher landet auf der Hauptseite und sieht ein Video im Hero-Bereich, das entweder ein Standard-Projekt oder eine Übersicht über alle Projekte anteasert.
2. Footer-Buttons: Der Besucher klickt z. B. auf „VR Roller Coaster“.
   • Der Hero-Bereich zeigt nun das Video zu „VR Roller Coaster“.
   • Ein Button „Mehr erfahren“ führt direkt zur Projektseite.
3. Header-Navigation: Alternativ kann der Besucher über „Projekte“ zur Projektübersichtsseite gelangen, wo alle Projekte detailliert gelistet sind.

• Gradlinigkeit bleibt erhalten: Die Hauptseite bleibt schlank und klar strukturiert, bietet aber gleichzeitig interaktive Elemente.
• Fokus auf Projekte: Besucher bekommen durch die Videos einen schnellen und direkten Eindruck von meiner Arbeit.
• Flexible Navigation: Besucher können entweder direkt über den Hero-Bereich oder die Header-Navigation tiefer in die Inhalte einsteigen.