Bernie's Restaurant
A nostalgic American-diner showcase for a real Upper Thomson restaurant - a searchable, filterable photo-led menu, a parallax hero and a live open / closed status pill.
- Role
- Design + build
- Services
- UI/UX design · Creative frontend · Motion design
- Year
- 2026
- Status
- Concept build
Overview
The brief
Take a much-loved local restaurant with great food photography and give it a modern, appetite-first site that still works perfectly with no JavaScript.
An independent, unofficial concept for a real restaurant, built from its public listing. Food and interior photography belongs to its original uploaders and would need to be cleared or replaced before any live use. Not affiliated with or endorsed by the restaurant. Reference: Restaurant on Instagram.
Approach
How I built it
Built a photo-card menu from the restaurant's real dishes with live search and category filtering, and prices pulled from its public listing.
Added a GSAP parallax hero and a live open / closed pill driven by trading hours.
Vendored GSAP and Lenis locally so the motion stack has no runtime CDN dependency.
Made every piece of content visible without JavaScript through reveal fail-safes.
Key features
What makes it work
- Photo-led menu with live search + category filtering
- Parallax hero with live open / closed status
- Gallery lightbox and a WhatsApp reservation request
- Vendored motion stack and full progressive-enhancement fallback
Gallery
A closer look
Build
Under the hood
- All content stays readable without JavaScript through reveal fail-safes
- GSAP and Lenis vendored locally - no runtime CDN for the motion stack
- Menu search and category filtering run entirely client-side
Reflection
Looking back
A reminder that the safest motion stack is one you host yourself. Photography belongs to its original uploaders and must be cleared or replaced before any live use.