Aurantia Restaurant
A premium fine dining restaurant website with an immersive SPA experience — showcasing the full menu, enabling table reservations, and presenting the restaurant's story and ambiance.
What needed solving
Fine dining restaurants with premium offerings are consistently underserved by generic website templates — visually flat, lacking atmosphere, and unable to convey the sensory experience of the brand. A high-end restaurant needs a digital presence that matches the quality of the physical experience and drives direct reservations.
How I solved it
Built a fully custom SPA restaurant website with cinematic full-screen video hero, dynamic JSON-driven menu system with category filtering, real-time reservation form validation, and premium micro-interactions throughout. Architected as a true SPA with instant section switching and smooth transitions — no page reloads, no template constraints.
A look at the product
Key Features
- Full-screen hero video background with smooth crossfade transitions — under 4MB with HD quality
- Dynamic menu system loaded from JSON with category filtering and food-type indicators
- Table reservation form with real-time validation and confirmation feedback
- Premium micro-interactions — cursor glow, magnetic buttons, price shimmer, stagger reveal animations
- SPA architecture — instant section switching with smooth image and video transitions
- Fully responsive across desktop, tablet, and mobile with consistent premium experience
Architecture
- 01Pure HTML5, SCSS, and Vanilla JS — no framework overhead, maximum performance
- 02Vite 5 build tool for fast development server and optimised production builds
- 03Custom GSAP-style JS animations with CSS transitions for smooth micro-interactions
- 04JSON-driven menu system — content fully separated from presentation logic
- 05HTML5 native video with MP4/H.264 encoding — hero video under 4MB with HD quality
- 06Deployed on Vercel with auto-deploy on every Git push
Results & Outcomes
Lighthouse Performance score 90+ with optimised assets and fast load times
Hero video under 4MB maintaining HD visual quality
Full SPA experience with zero page reloads and instant section transitions
Premium micro-interactions delivering a hospitality-grade digital experience
Live on Vercel with production deployment and auto-deploy pipeline
Want a similar solution?
I'm available for new projects. Let's talk.