ÜbersichtCrocodiles Website

Crocodiles Website

Live-Version

Die CrocodilesBurger-Website ist eine moderne, interaktive Webanwendung für ein Burgerrestaurant, vollständig entwickelt mit dem Quasar Framework (basierend auf Vue 3) und in TypeScript umgesetzt. Ziel des Projekts ist es, den Besuchern ein visuell ansprechendes, intuitives Erlebnis zu bieten, mit Fokus auf die Präsentation von Produkten und Zutaten im Stil einer digitalen Speisekarte.

Besonders bemerkenswert:

Dieses Projekt wurde von mir als 17-Jähriger allein entwickelt und umgesetzt. Es war mein erstes großes, gelaunchtes Webprojekt.

Die Seite basiert vollständig auf Quasar-Komponenten – insbesondere dem q-carousel, das den zentralen Inhalt darstellt. Zutaten, Preise und Zusatzinfos wie “wahlweise mit” oder Allergene werden übersichtlich in zwei Spalten dargestellt.

Das Styling ist vollständig in SCSS geschrieben und verwendet viele eigene Media Queries für ein responsives, mobilfreundliches Design. Elemente wie Pfeile, Buttons und Produktbeschreibungen sind anpassbar, teilweise mit Farbsteuerung per --hover-color direkt aus dem Inhalt generiert. Dadurch wirkt die Seite dynamisch, markengerecht und leichtgewichtig.

Komponenten im Einsatz

  • q-carousel für die Produktnavigation
  • Eigene Komponenten wie z.B.:
    • HomeButton.vue
    • FooterComponent.vue
    • BasketballScale.vue
    • FoodLabels.vue

Die Benutzeroberfläche nutzt bewusst große Bilder, auffällige Typografie und eine reduzierte Farbpalette (z.B. Gelb auf Schwarz). Die Navigation funktioniert per Klick. Auch auf kleinen Displays ist die Lesbarkeit und Bedienung durch gezielte Anpassung der Schriftgrößen, Buttonpositionen und Spaltenlogik gewährleistet.

Herausforderungen

  • Komplexes q-carousel mit Navigation, Sliden und direkter Ansteuerung einzelner Produkte.
  • Responsives Design ganz ohne Utility-Framework wie Tailwind CSS zu entwickeln.
  • Dynamisches Mapping von Zutaten in zwei gleichmäßige Spalten.
  • Dynamische Gestaltung der UI-Farben basierend auf Kategorien (z.B. Hover-Farben).
  • Das Projekt modular und wartbar zu gestalten.
  • Bearbeitung sowie Optimierung der Bilder mit Photoshop

Besonderheiten

  • Zutaten aufteilung in zwei Spalten je nach Bildschirmgröße
  • Dynamische Farbanpassung basierend auf Kategorie-Farbe (aus dem DOM gelesen)
  • Fehlermanagement und Ladeanzeigen im Vue-Stil
  • Kombination aus statischem Aufbau & dynamischer Inhaltsanzeige (durch JSON Mapping)
  • vollständig handcodiertes und optimiertes CSS/SCSS
QuasarTypeScriptVueDocker