← back to projects
September 2026

Secawan Cafe Website

An artisan F&B web experience built with a zero-framework Vanilla Web Stack (HTML5, CSS3, ES Modules) and fluid Lenis momentum scrolling. Designed with warm editorial aesthetics, interactive menu filtering, and full WCAG AA accessibility compliance.

hellomychesster.my.id
Live ↗
Most hospitality and boutique café websites suffer from bloated third-party template frameworks, heavy JavaScript bundles, and slow mobile loading speeds that undermine user engagement. Visually, standard templates often look generic and sterile, completely failing to reflect the physical warmth, tactile craftsmanship, and serene atmosphere of a specialty café. Furthermore, many boutique websites break down on mobile screens: navigation drawers often exhibit jarring gaps, sticky headers collide with scroll animations, and image galleries wrap into uneven, ragged grids with empty white voids. Accessibility is also routinely neglected, leading to poor color contrast ratios, missing keyboard navigation focus states, and clunky modal experiences that frustrate users.
Secawan Cerita is a bespoke web portfolio project engineered around the philosophy of slow living, community warmth, and digital craftsmanship for an artisan café in Bangsar, Kuala Lumpur. The project serves as an architectural showcase demonstrating that modern, fluid, and visually stunning web experiences do not require heavy full-stack frameworks or bloated page-builders.

Rather than relying on multi-megabyte JavaScript bundles, the architecture is constructed entirely with a Zero-Dependency Vanilla Web Stack (semantic HTML5, modern CSS3 custom properties, and modular ES6+ JavaScript). The design pairs editorial serif typography (Playfair Display) with clean human-centric sans-serif (Plus Jakarta Sans), evoking the tactile feel of an independent print publication while delivering near-instant First Contentful Paint (FCP) and rock-solid 60fps animations.

Key technical highlights include an embedded Lenis momentum smooth scrolling engine with frame-rate collision guards, real-time operating hours synchronization, interactive category-filtered menus, native <dialog> modal lightbox with backdrop detection, and a seamless full-viewport mobile navigation designed from the ground up to eliminate visual layout shifts and disjointed gaps. Every element adheres strictly to WCAG AA color contrast standards across an artisan coffee-inspired HSL palette.

What's inside

Interactive menu with instant category filtering (Coffee, Mains, Desserts)
Real-time operating hours sync based on current visitor day and time
Fluid momentum smooth scrolling powered by embedded Lenis engine
Scroll-triggered reveal micro-animations via IntersectionObserver
Symmetrical 3x2 photo exhibition grid with uniform 4:3 aspect ratios
Fullscreen accessible image lightbox dialog with keyboard navigation
Seamless full-viewport mobile drawer navigation with dedicated brand header
One-click address copy to clipboard with instant visual feedback
Direct Google Maps directions and WhatsApp concierge chat integration
WCAG AA accessible coffee-toned color palette (minimum 4.5:1 contrast)
Zero-dependency vanilla architecture (HTML5, Modern CSS, ES Modules)
Zero build step required with near-instant First Contentful Paint (FCP)

The Challenge

Most hospitality and boutique café websites suffer from bloated third-party template frameworks, heavy JavaScript bundles, and slow mobile loading speeds that undermine user engagement. Visually, standard templates often look generic and sterile, completely failing to reflect the physical warmth, tactile craftsmanship, and serene atmosphere of a specialty café. Furthermore, many boutique websites break down on mobile screens: navigation drawers often exhibit jarring gaps, sticky headers collide with scroll animations, and image galleries wrap into uneven, ragged grids with empty white voids. Accessibility is also routinely neglected, leading to poor color contrast ratios, missing keyboard navigation focus states, and clunky modal experiences that frustrate users.

The Solution

The project was engineered with a Zero-Dependency Vanilla Web Architecture (semantic HTML5, pure CSS custom properties, and modular ES6+ JavaScript) to guarantee sub-second First Contentful Paint (FCP) and eliminate runtime overhead completely. To deliver a high-end tactile feel without sacrificing performance, I integrated a local Lenis momentum scroll engine synchronized with CSS scroll-margin-top anchors and IntersectionObserver scroll reveals, resolving frame-jitter and sticky header collisions. The mobile experience was overhauled into an integrated, seamless full-viewport navigation overlay featuring a dedicated brand bar and 44x44px touch targets to eliminate disjointed visual gaps. The visual presentation was stabilized using a symmetrical 3x2 photo exhibition grid with uniform 4:3 aspect ratios paired with a native HTML5 <dialog> modal lightbox. Finally, accessibility was built into the core design system by curating a warm coffee-inspired HSL palette meeting strict WCAG AA contrast compliance (minimum 4.5:1), visible keyboard focus rings, and background-scroll locks.

← Back to all projects