Flavorspace
A premium, Michelin-star digital menu experience.
Overview
A state-of-the-art, premium digital menu experience designed for high-end culinary concepts. It replaces traditional lists with a dynamic, sensory-driven UI that physically reacts to the active dish. The application features complex glassmorphism, fluid bottom sheet architectures for mobile, and a highly interactive swipe-to-confirm checkout flow.
Flavorspace was built to explore how high-end restaurant menus can be reimagined for the digital era. Instead of sterile lists, it aims to create an immersive, sensory-driven experience that reflects the quality of Michelin-star dining.
The entire UI is built on a dynamic sensory engine. When a dish is selected, CSS variables update globally, causing radial gradients, buttons, and ambient glows to instantly shift to match the dish's exact color profile. Extensive use of backdrop-blur provides a luxurious glassmorphism effect.
To ensure the premium feel extended to mobile, standard responsive stacking was abandoned. Instead, selecting a dish on a phone triggers a fluid, framer-motion powered Bottom Sheet overlay. The checkout flow was similarly elevated, replacing standard forms with a physics-based 'Swipe to Confirm' gesture.
Stack
UI / Frontend
Animation / 3D
How it works
Explore
Users navigate a beautifully laid out grid of high-end dishes.
Select
Tapping a dish opens the Signature panel (a Bottom Sheet on mobile), dynamically changing the entire app's color theme.
Add to Cart
Users add the dish to their order, managing quantities in a sleek slide-out Cart sidebar.
Checkout
A full-screen glass overlay prompts the user for their Table Number and completes the order via a Swipe-to-Confirm slider.
More projects
3AM Espresso
A concept marketing website for a late-night coffee shop in Bacolod City, Philippines. Built as a single-page application with five routes covering home, menu, story, reservation, and find us, each driven by scroll-triggered animations and parallax effects. Deployed on Cloudflare Workers with a thin Worker layer that serves the Vite-built client assets and applies security headers. The reservation form is UI-only with no backend submission.
Arch Linux Setup
Switched to Arch Linux in 2023 as the main development machine — built from scratch, no installer hand-holding. Before settling, tried Void Linux for a stretch: musl libc and runit were interesting but the lack of an AUR equivalent meant too much manual work for daily use. Void got shelved. Arch has been the stable choice since.
Strata
A concept landing page for a fictional luxury skeleton watch, built as a single-page React 19 + TypeScript app on Vite. Sections pin and peel over each other using a CSS sticky mechanic driven by one scroll listener setting a custom property — native scroll is never hijacked — while GSAP with SplitText and ScrollTrigger handles masked headline reveals, scene arrivals, and a scrubbed parallax, all gated behind viewport size and prefers-reduced-motion. The site is served by a Cloudflare Worker via Workers Static Assets, which stamps a strict Content-Security-Policy and other security headers on every response and exposes a CORS-open /ping health endpoint.
SIMULACRA
A WebGL-powered interactive manifesto exploring the philosophy and mathematics of simulation through real-time browser physics. Built on React Three Fiber and Rapier (WASM-compiled Rust physics), it runs a 5,000-particle instanced mesh, a Plinko physics sandbox, and a live 4,000-node sorting visualizer — all at 60 FPS in the browser. The UI layer is fully decoupled from the WebGL canvas so DOM routing never interrupts the physics loop. Deployed on Cloudflare Workers with a TypeScript edge worker handling security headers and asset serving.