Bistro Bliss
High-Performance Restaurant Landing Page
The Goal
In the highly competitive hospitality industry, a restaurant's website is often its first impression. The goal of Bistro Bliss was to translate a high-fidelity Figma design into a living, breathing application with zero visual compromise.
Beyond aesthetics, the critical requirement was speed. We aimed for perfect Google Lighthouse scores to ensure SEO ranking and immediate load times on mobile networks.
Engineering Focus
01. Component-Driven Development
Adopted an atomic design methodology. Reusable UI tokens (colors, typography, spacing) were abstracted into a Tailwind configuration, ensuring consistency and making theme updates instant across the entire application.
02. Performance Optimization
Achieved a 100/100 Performance score by implementing:
- Lazy loading for images and non-critical routes.
- Code splitting via Vite to minimize bundle size.
- Font subsetting to reduce CLS (Cumulative Layout Shift).
03. Adaptive Responsiveness
Designed a fluid layout system that adapts gracefully from 320px mobile screens to 4k desktops, using modern CSS Grid and Flexbox patterns instead of rigid media queries.