< 950ms
Gemini Flash AI LatencyFast streaming REST inference via gemini-1.5-flash-latest
24 Terms
Bilingual Whitelist GatingRestricts queries to Indonesian & English cultural keywords
8 Cities
3D Parallax Tilt CardsInteractive mouse-tracking perspective transforms in Vue.js
9 Domains
Tourism Category FiltersVolcanoes, heritage temples, crater lakes, coastlines, palaces
60 FPS
Fluid CSS Motion EngineInfinite marquee carousel and floating ambient cloud drift
100%
Viewport AdaptabilityFluid layout across mobile, tablet, and widescreen displays
The Operational Mandate
Context & High-Stakes Constraints
Java Island possesses an extraordinarily rich tapestry of historical kingdoms, UNESCO-recognized performing arts, diverse culinary traditions, and world-class natural landmarks. However, online representations of Javanese culture often remain fragmented across disparate blogs or dry academic repositories. JavaIsland was conceived to bridge this gap: an engaging, modern digital portal that introduces visitors to the depth of Java through interactive visual motion and accessible generative AI.
Core Mandate: Build an interactive, visually stunning cultural tourism platform that combines modern frontend techniques (3D mouse parallax, infinite marquees) with a responsive AI assistant equipped with strict cultural domain guardrails.
02CULTURAL & TOURISM INTERFACES
The JavaIsland Digital Experience in Action
Explore the key interactive touchpoints of JavaIsland — bridging conversational AI cultural guidance, reactive 3D mouse parallax city cards, ancient imperial chronicles, and traditional gastronomy.
🔒javaisland.local/index.html
01 / 05Official Brand Presentation
Official Project Showcase & Cultural Flyer
Official project presentation flyer showcasing JavaIsland's digital cultural ecosystem, interactive tourism guides, and rich historical heritage archives across Java.
◆ Comprehensive Javanese Cultural Archiving◆ Next-Gen Tourism Interactive Storytelling◆ Rich Multimedia & Historical Documentation
03CAPABILITIES & WORKFLOW
Core Capabilities & Cultural Exploration Workflow
JavaIsland balances rich visual storytelling with low-latency generative AI to deliver an immersive travel and heritage companion.
Gemini 1.5 Flash AI Concierge
Integrated low-latency LLM endpoint delivering culturally accurate answers with bilingual keyword gating and graceful error recovery.
Reactive 3D Parallax Card Engine
Vue.js mathematical pointer tracking generating real-time 3D isometric rotation and depth illusions without heavy WebGL overhead.
Cultural Heritage & Historical Archives
Comprehensive documentation of imperial Javanese history, royal court ceremonies, and UNESCO-recognized intangible cultural traditions.
Gastronomy & Destination Discovery
Dedicated culinary origin breakdowns paired with multi-parameter destination filters for prospective domestic and international travelers.
8 Mission-Critical Modules
Each module is engineered with robust transactional boundaries, modular isolation, and comprehensive audit trails.
MODULE // 01 OF 08Conversational AI
Bilingual Gemini 1.5 Flash AI Assistant ('Tanya Jawa')
Interactive floating consultation interface allowing users to inquire about Javanese folklore, historical landmarks, traditional ceremonies, and local customs in real time.
- Direct integration with Google's high-throughput gemini-1.5-flash-latest generative endpoint
- Automated conversational state tracking with autoscrolling chatbox message list
- Visual animated 'Thinking...' loading bubbles indicating upstream API generation
- Graceful network exception interception with courteous user error feedback
AI Cultural Inquiry & Visitor Guidance Lifecycle
From user inquiry to verified cultural recommendations — each interaction passes through bilingual domain evaluation and deterministic LLM generation.
Stage 01Visitor Prompt & Gating
Bilingual Whitelist Evaluation
Visitor enters a query into the 'Tanya Jawa' chat interface. The client script evaluates the input against the 24-keyword Indonesian and English cultural dictionary.
Whitelist Filter Verification (24 Keywords)
Stage 02Gemini 1.5 Flash LLM
Low-Latency Generative Processing
Valid prompts are dispatched via HTTPS POST to Google's gemini-1.5-flash-latest model. The model produces culturally accurate, context-rich historical and travel responses.
POST /gemini-1.5-flash-latest:generateContent
Stage 03DOM Delivery & Cross-Linking
Sanitized DOM Insertion & Triage
The response is injected safely into the chat stream via textContent. If the query touches upon destination logistics, the assistant suggests relevant regional exploration pages.
Sanitized DOM Update & Chatbox Autoscroll
Cultural Safety & Academic Authenticity Guarantee
JavaIsland is dedicated to educational appreciation and cultural preservation. The platform enforces bilingual lexical domain guardrails, verified historical references, and polite deflection algorithms to ensure AI conversations remain respectful, culturally grounded, and academically authentic.
04SYSTEM ANATOMY & ARCHITECTURE
Vue-Enhanced Hybrid Client & Generative AI BaaS
Engineered with a clean separation between multi-page semantic HTML5 views, Tailwind CSS styling, a reactive Vue.js 3D motion module, and Google's Generative AI REST endpoint.
Pattern: Vue-Enhanced Semantic Web + Generative AI BaaS
Protocol: HTTPS REST (JSON / Google Generative Language)
Presentation & Semantic Layout Layer
HTML5 + Tailwind CSS + Silvertones FontMulti-page semantic portal (index, culture, explore, askjava, detail pages) styled with modern Tailwind CSS utilities and custom brand typography.
Reactive 3D Motion & Component Layer
Vue.js 2.x Component MathSelf-contained Vue.js component calculating cursor offset mathematics (mousePX, mousePY) and dynamic 3D rotational transforms (rotateX, rotateY).
Cultural Domain Guardrail Layer
Bilingual Lexical WhitelistClient-side keyword validator screening queries across 24 Indonesian and English terms prior to API dispatch.
AI Generative Engine Layer
Google Gemini 1.5 Flash REST APIAsynchronous fetch pipeline connecting to generativelanguage.googleapis.com, delivering rapid generative answers for cultural inquiries.
Media & Asset Distribution Layer
High-Res Photography & YouTube EmbedsOptimized cultural image assets, local SVG iconography, and embedded YouTube cultural video players.
Curated Technology Stack
A modern engineering stack combining high-throughput user interfaces, modular backend architecture, and resilient data layers.
Frontend & UI Architecture
HTML5Semantic Markup across 9 Cultural Portals
Tailwind CSSUtility-First Responsive Styling & Grid Layouts
CSS3 KeyframesHardware-Accelerated 60 FPS Marquee & Parallax Animations
Vue.jsReactive Mathematical 3D Mouse Parallax Card Component
JavaScript (ES6+)DOM Manipulation, Modal Dialogs & Asynchronous Fetch
Silvertones TypographyCustom Display Font ('dapik') & Google Fonts
AI & External Integrations
Google Gemini 1.5 FlashGenerative AI LLM for Cultural Tourism Consultations
REST API EndpointDirect HTTPS POST Request Pipeline
Bilingual Whitelist GuardrailClient-Side 24-Keyword Cultural Filter (ID & EN)
YouTube Iframe APIEmbedded High-Definition Cultural Video Showcase
Tooling & Deployment
VS Code Live ServerLocal Development Server on Port 5501
Git & GitHubVersion Control & Open-Source Collaboration
Vercel / Static EdgeGlobal Edge CDN Static File Hosting
Codebase Structure & Data Models
Clear boundary separation between system components, paired with modular schemas and structured repositories.
📁 Root Directory (Core Application Portals)
├──index.html — Main landing gateway with hero, 3D parallax cities, and marquee
├──culture.html — Historical chronicles, Majapahit Empire, and performing arts
├──explore.html — Tourism destinations, category filters, and booking simulator
├──askjava.html — Tanya Jawa: Bilingual Gemini Flash AI conversational concierge
├──detailwayang.html — In-depth Wayang Kulit shadow puppetry heritage profile
├──detailgudeg.html — Gudeg Yogyakarta historical origin & culinary recipe lore
├──detailrawon.html — Rawon Ponorogo black beef soup recipe & kluwek nut history
├──detailsotokudus.html — Soto Kudus central Javanese shredded chicken soup profile
├──detaillontong.html — Lontong Sayur coconut vegetable stew culinary breakdown
Database Entities & Schema Models
Data Model: HeritageChronicle
Represents historical eras and kingdoms (Majapahit, Mataram, Yogyakarta Sultanate) with historical epoch, leadership, cultural contributions, and archival media.
Data Model: CulinaryHeritage
Stores traditional food items with regional origin, historical invention lore, signature herbs, slow-braising cooking steps, and taste profile.
Data Model: TouristDestination
Captures landmark profiles categorized across 9 tourism domains with geographic coordinates, historical era, admission guidelines, and photo galleries.
Data Model: CulturalAIInteraction
Manages visitor session state in 'Tanya Jawa': user prompt, bilingual whitelist match status, Gemini 1.5 Flash payload, and response latency.
05SECURITY, API & PRODUCTION IMPACT
Hardened Perimeter & Cultural Safety Standards
Multi-layered client-side security architecture combining bilingual lexical domain whitelisting, sanitized DOM insertion, and encrypted REST transmission.
API Endpoints & Routing Architecture
AI Tourism Concierge (Google Generative Language)
POST/v1beta/models/gemini-1.5-flash-latest:generateContentDispatches user cultural prompt to Google Gemini 1.5 Flash with real-time generative responses
Cultural Portals & Historical Exploration
GET/culture.htmlServes imperial historical chronicles and interactive performing arts media modals
GET/explore.htmlDelivers tourism destination discovery engine with 9 category filters and trip planner
GET/detailgudeg.htmlRenders in-depth gastronomy history and centuries-old recipe origin for Gudeg Yogyakarta
Enterprise Security & Governance Standards
Bilingual Domain Keyword Whitelisting
Screens prompt submissions across 24 Indonesian and English cultural terms, immediately deflecting off-topic or malicious prompt injections before API dispatch.
Sanitized DOM Insertion
Model-generated text is injected strictly using textContent properties, protecting client browsers against Cross-Site Scripting (XSS) from untrusted tokens.
Encrypted HTTPS API Transport
All client-to-API communication flows over TLS 1.3 encrypted HTTPS channels directly to Google Generative Language endpoints.
Graceful Upstream Error Recovery
Catch blocks intercept network anomalies or quota limits, displaying polite error diagnostics without disrupting page UI or crashing script threads.
Engineering Challenges & Production Results
How critical technical bottlenecks were overcome and verified under real production conditions.
Challenge // 01
Implementing realistic 3D mouse parallax tilting with natural damping across different screen resolutions. Solved by structuring a reactive Vue.js component that continuously calculates cursor offsets relative to the element's bounding box, coupled with a 1000ms mouseleave timeout to smoothly reset the card to equilibrium.
Challenge // 02
Enforcing cultural topic fidelity in the AI assistant without adding a dedicated backend proxy. Solved by authoring a dual-language substring search covering 24 critical cultural and geographic keywords in Indonesian and English, deflecting non-cultural inquiries immediately on the client.
Challenge // 03
Constructing an infinite photographic marquee that remains silky-smooth across high-refresh-rate displays. Achieved through pure CSS keyframe translations (slide-right, slide-left) that bypass DOM reflows and offload rendering entirely to the browser GPU.