🍜 Sarawak Laksa

An interactive curated reference on Kuching's most iconic dish β€” ingredients, recipe, where to eat, and cultural context

HTML5 CSS3 Vanilla JS IntersectionObserver Static Site

πŸ“‹ Project Overview & Problem Statement

Challenge: Sarawak Laksa is one of Malaysia's most celebrated dishes, yet no single well-designed digital reference brings together its history, recipe, cultural context, and where to eat it β€” in one readable, navigable page.

Solution: A rich, scroll-driven reference site built entirely in HTML, CSS, and vanilla JavaScript. It covers everything a food lover, tourist, or diaspora Sarawakian would want to know β€” from the paste ingredients to Anthony Bourdain's famous quote β€” in a clean, readable format with smooth animations.

Key Benefits

πŸ–₯️ Application Features

🌿 Origin & Overview

Explains what Sarawak Laksa is, how it differs from Penang Asam Laksa and Singapore Laksa, with a quick-facts card and comparison table.

🫚 Ingredient Breakdown

Groups ingredients into Paste, Broth, and Toppings. Each card includes the ingredient, quantity, and its role in the dish.

πŸ“– Step-by-Step Recipe

4-phase recipe (Paste β†’ Broth β†’ Toppings β†’ Assemble) with numbered steps, pro tips, and store-bought paste alternatives.

πŸ—ΊοΈ Regional Variations

Covers Kuching, Sibu, Miri, Home-Style, and Restaurant styles β€” each with flavour profile tags.

πŸ“ Where to Eat Guide

6 real Kuching stalls with address, opening hours, halal status, and what makes each one worth visiting.

🎭 Culture & People

6 cultural context pieces (breakfast ritual, kopitiam setting, diaspora longing) and profiles of key figures including Anthony Bourdain and Gordon Ramsay.

βš™οΈ Technical Architecture & Implementation

Frontend Stack

HTML5 CSS3 Custom Properties Vanilla JavaScript Google Fonts (Playfair Display + Inter) IntersectionObserver API CSS Grid & Flexbox

Architecture Highlights

πŸš€ Deployment

Hosted as a static site on GitHub Pages. No build step required β€” open index.html directly in any browser.

# Clone and open locally git clone https://github.com/lyven81/ai-project.git open ai-project/projects/sarawak-laksa/index.html # Or view live at: # https://lyven81.github.io/ai-project/projects/sarawak-laksa/

πŸ“Š Key Metrics

7
Content Sections
6
Real Kuching Stalls
5
Regional Variations
13
Recipe Steps

Value Delivered