This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
What I Built
I created Balan Coffee & Roastery, a polished landing page for a fictional Vietnamese comfort café in Saigon.
The concept is inspired by the quiet comfort of slow phin coffee, butter toast, and small sweet treats. Rather than treating coffee as a quick purchase, I wanted the site to feel like a calm daily ritual: slow, warm, familiar, and personal.
Visitors can explore the menu, learn the café story, find visiting information, and interact with a small pixel-art coffee brewing experience.
Highlights:
- Responsive editorial-style coffee shop landing page
- Vietnamese coffee-inspired menu, story, ritual, and visit sections
- Clear navigation and accessible interactive controls
- Consistent number and price typography throughout the site
- A lightweight interactive mini-game: Pixel Phin Brew
- Dose beans into the phin
- Grind the beans
- Bloom the coffee
- Let the phin drip
- Serve the finished cup
- Built without heavy UI, game, or animation libraries
Demo
Live demo: Balan Coffee & Roastery
Source code: GitHub repository
Journey
I wanted to create something that felt more like a coffee ritual than a typical restaurant landing page.
The visual direction uses warm cream tones, deep coffee browns, generous spacing, subtle texture, and an editorial layout inspired by a slow morning at a Saigon café. I paid attention to small details such as consistent tabular numerals for prices and opening hours, responsive layouts, visible interaction states, and reduced-motion support.
The feature I enjoyed building most was Pixel Phin Brew. I wanted the interaction to be understandable instead of just decorative, so each button clearly explains the next brewing action. Every correct step updates the pixel scene, progress indicator, and feedback message until the final cup is served.
The project was built with React, TypeScript, Vinext/Vite, and custom CSS. I kept the implementation lightweight and avoided adding large dependencies for animation or the game.
Assets and Credits
The Manhattan Café illustration assets retain the original creator watermark visible in the source files. The interface design, responsive layout, styling, interactions, and Pixel Phin Brew game were created for this submission.
