A zero-framework, cinematic web experience inspired by the symmetrical, pastel aesthetic of Wes Anderson’s The Grand Budapest Hotel.
This project is more than just a visual homage—it is an experiment in advanced AI orchestration. By chaining multiple AI models to handle distinct phases of the software development lifecycle, this blazing-fast static site was built from concept to production-ready code in record time.
This project was built by treating AI not just as a code generator, but as specialized team members across the development lifecycle:
-
Information Architecture & Prompt Engineering (Claude.ai) Instead of jumping straight to code, Claude acted as an Information Architect to design the site structure, content strategy, and color palette. It then engineered a highly constrained technical prompt demanding strict Tailwind styling and a specific component structure.
-
Rapid Prototyping (Google Stitch) Feeding the engineered prompt into Stitch yielded a highly accurate visual draft. This environment was used to iterate rapidly on layout, typography, and CSS variables to lock in the cinematic aesthetic.
-
Refactoring & Polish (Google AI Studio) The codebase was moved to AI Studio for technical optimization. Heavy React dependencies were stripped out in favor of lightweight Vanilla HTML/JS. Custom
IntersectionObserverlogic was implemented for performant scroll animations, and a stylized SVG map of the fictional city of "Nebelsbad" was generated using pure code.
- Zero-Framework Architecture: Built entirely with Vanilla HTML5 and JavaScript (ES6+) for maximum performance.
- Cinematic UI/UX: Heavily customized Tailwind CSS configuration to achieve a strict pastel color palette and symmetrical layout.
- Performant Animations: Uses native
IntersectionObserverfor scroll-spy navigation and fade-in animations without the bloat of external animation libraries. - Procedural SVG Art: Features a 100% code-generated, stylized SVG map of the fictional town of Nebelsbad.
- Fully Responsive: Mobile-first design that scales beautifully to ultra-wide desktop displays.
- Frontend: HTML5, Vanilla JavaScript
- Styling: Tailwind CSS
- Build Tool: Vite (for Tailwind processing and production bundling)