Ember & Bean | Café Website

Problem Statement

Most café websites are generic templates that feel the same. Ember & Bean needed a premium brand experience that matched a real artisan coffee house, with fast load times and a strong mobile experience.

Solution

Designed and built a premium editorial-style website with subtle glassmorphism, Playfair Display + Inter typography, and a warm espresso/cream palette. Menu is data-driven with category filtering, search and empty states. Gallery uses a masonry layout with a full keyboard- and swipe-friendly lightbox.

Features

• Cinematic full-screen hero with floating glass spec card
• Data-driven menu with category tabs, search, vegetarian and popular badges
• Masonry gallery with lightbox supporting keyboard and touch navigation
• Reservations form with full validation and loading, success and error states
• Scroll-reveal animations, number counters and reduced-motion support
• SEO-ready with Open Graph tags and CafeOrCoffeeShop structured data

My Contributions

• Designed the full visual system, colors and typography
• Built all six pages and every reusable component from scratch
• Implemented forms, filters, lightbox and animations without extra libraries

Challenges

• Building a polished gallery lightbox with keyboard and mobile swipe support
• Creating a design system with CSS variables and consistent glassmorphism
• Keeping the bundle lean and images lazy-loaded for fast performance