Balan Coffee & Roastery — A Slow-Drip Vietnamese Coffee Landing Page

Tuan (Felix) Nguyen — Sun, 16 Aug 2026 20:41:25 +0000

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.

Operation Turing — A Caesar Cipher Codebreaking Game

Tuan (Felix) Nguyen — Sat, 20 Jun 2026 15:18:54 +0000

This is a submission for the June Solstice Game Jam

What I Built

Operation Turing is a Caesar cipher decoding game set in WWII Bletchley Park. You're a codebreaker racing the clock — 60 seconds to decode 5 intercepted enemy messages by finding the correct cipher shift before time runs out.

The game ties directly into the Best Ode to Alan Turing prize category: Turing's most famous achievement was breaking the Enigma cipher during WWII, so the entire core mechanic — sliding through shift values to reveal a hidden message — is a small, playable echo of the codebreaking work he pioneered. The game closes with one of his quotes after each run.

Mechanically it's intentionally simple: a slider from 0–25, real-time decode feedback, a hint system that costs points, and a 60-second timer across 5 rounds. I wanted something polished and complete rather than ambitious and half-finished, given the jam's tight turnaround.

This is actually my first game jam, so I kept things small on purpose — wanted to make sure I had something working end-to-end rather than something ambitious but broken XD.

▶ Play Operation Turing

Video Demo

Code

AIVIETNAM-AIO-felixdoit / operation-turing

🔐 Operation Turing

A Caesar cipher decoding game built for the DEV.to June Solstice Game Jam 2026, honoring Alan Turing and the codebreakers of Bletchley Park.

▶ Play the game

About

WWII, 1942. Enemy messages are flooding in. You're a codebreaker at Bletchley Park, racing against the clock to decode intercepted Caesar cipher transmissions before time runs out.

This game is an ode to Alan Turing — the man who broke the Enigma cipher and laid the foundations of modern computer science. The mechanic itself (finding the right shift to reveal a hidden message) is a small, playable echo of the codebreaking work Turing pioneered.

Built for the jam's Best Ode to Alan Turing bonus prize category.

How to play

Click Start mission
Drag the shift slider (0–25) until the decoded text below turns into readable English
Click Submit decode to lock in your answer
Decode all 5 messages…

View on GitHub

How I Built It

The whole game is vanilla HTML/CSS/JavaScript — no frameworks, no build step, no dependencies. I wanted it to be trivially embeddable and playable directly in the browser for judging.

A few technical notes:

Caesar cipher logic: a single caesar(text, shift) function handles both encoding and decoding — decoding a message is just encoding it with the inverse shift (26 - shift), so I didn't need separate encrypt/decrypt implementations.
Real-time decode preview: as you drag the shift slider, the decoded text updates live and turns green the instant it matches the target phrase, so you get immediate feedback without needing to "submit" to check your guess.
Scoring: each correct decode is worth 20 points, or 10 if you used a hint on that round — so hints don't subtract from your score directly, they just halve what you would've earned for that round.
Polish pass: added small CSS keyframe animations (fade-in on load/new round, a shake on wrong submissions, a green flash on correct ones) to make the feedback loop feel more responsive.
Deployment: static site on GitHub Pages — push to main, zero config.

Prize Category

Submitting for Best Ode to Alan Turing. The game's entire premise — decoding intercepted WWII-era cipher messages under time pressure — is a direct nod to Turing's work breaking Enigma at Bletchley Park. The ending screen also surfaces one of his quotes as a small tribute.

DEV Community: Tuan (Felix) Nguyen

Balan Coffee & Roastery — A Slow-Drip Vietnamese Coffee Landing Page

What I Built

Demo

Journey

Assets and Credits

Operation Turing — A Caesar Cipher Codebreaking Game

What I Built

Video Demo

Code

AIVIETNAM-AIO-felixdoit / operation-turing

🔐 Operation Turing

About

How to play

How I Built It

Prize Category