3AM Espresso
A late-night coffee shop that never closes.
Overview
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.
3AM Espresso is a fictional late-night cafe concept built as a portfolio piece to demonstrate frontend craft, specifically dark UI design, animation-driven storytelling, and responsive layout across five distinct pages.
Each page is built as a full-bleed visual experience using Framer Motion for scroll-linked parallax, whileInView staggered entrances, and AnimatePresence page transitions. Typography is split between Playfair Display for editorial headings and IBM Plex Mono for labels and UI text, served locally via @fontsource to avoid external font requests.
Cloudflare Workers was chosen for deployment to serve the static Vite output with a thin Worker that injects security headers and handles SPA fallback routing. The reservation form uses react-hook-form for state management but intentionally has no backend - on submit it transitions to a confirmation state to complete the UX story.
The entire site uses a hand-rolled CSS variable palette with a global film grain overlay applied via a body::after SVG pseudo-element. The custom SVG map on the Find Us page replaces any third-party mapping library, keeping the bundle lean and the aesthetic fully on-brand.
Stack
UI / Frontend
Animation / 3D
Infra / Deploy
How it works
Land on Home
Visitor hits / and sees the full-viewport hero with parallax image and animated AWAKE heading.
Browse Hero Sections
Scroll past the quote section and teaser menu, with staggered entrance animations triggering on viewport entry.
Navigate via Nav
Click a nav link on desktop or open the hamburger overlay on mobile to trigger a client-side route change with AnimatePresence fade transition.
Explore Pages
Menu shows three drink categories with scroll-triggered reveals. Story renders a four-era timeline. Find Us shows address, hours, and a custom pulsing SVG map.
Reserve a Table
Fill out the form on /reserve and submit - react-hook-form captures state locally and AnimatePresence swaps the form for an animated confirmation message.
More projects
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.
CampusBytes backend
Backend API for the CampusBytes food delivery platform — order management, menu serving, and delivery state.