ALL WORKS ARCHIVE·09 VERIFIED COMMISSIONS
3D EXHIBITION➔

INDEX [09]
COMMISSIONS ARCHIVE [11 / 11]

COMMISSIONS

TECHNICAL CASE STUDIES, LIVE SYSTEMS & CODE

01·Highland Tourism, 3D Web & Real-Time AI·2026·Dragon Treasure Castle (Baguio City, PH)

Dragon Treasure Castle

A luxury highland tourism platform featuring Ember—an interactive voice-enabled AI Concierge, a 3D scroll-driven drone video tour, and a custom mountain GIS navigation engine. Scaled to 120,000+ organic monthly visitors with $0.00 cloud hosting costs.

Next.js 16 (App Router)React 19TypeScript 5Tailwind CSS v4GSAP 3 & ScrollTriggerMapbox GL v3Web Speech APIEdge Neural TTSSanity Studio v6Lenis Smooth ScrollVercel Edge Network
CASE STUDYLIVE SITE↗
02·Architectural Builder Platform & Headless CMS·2026·Jiyam Homes Limited (Auckland, NZ)

Jiyam Homes

A high-performance, Swiss-inspired architectural platform for a registered New Zealand builder, featuring smooth GSAP cinematic reveals, headless Sanity CMS integration, and resilient serverless email delivery.

Next.js 16React 19TypeScriptSanity CMSGSAP & ScrollTriggerLenis Smooth ScrollTailwind CSS v4Resend APIZodVercel Edge
CASE STUDYLIVE SITE↗
03·Full-Stack PWA & Geofenced Systems·2026·NIIT Educational Deployment (Student Showcase)

OJT & Attendance Tracking System

A high-integrity Progressive Web App (PWA) featuring GPS geofencing, QR code validation, offline sync, and real-time administrative analytics.

Next.js 16React 19TypeScriptTailwind CSSSupabasePostgreSQLRow Level Security (RLS)PWA & WorkboxGPS GeofencingQR Scanner (@zxing)Supabase RealtimeExcelJS & jsPDFVercel Edge
CASE STUDY
04·3D Geospatial Navigation & Mapping Engine·2026·Dragon Treasure Castle

3D Geospatial Navigation System

A custom, full-screen 3D Geospatial Navigation Platform engineered for travelers navigating the high-altitude terrain of Baguio City (1,450m ASL). Built using Next.js 16, React 19, Mapbox GL, and GeoJSON, the application features live GPS tracking, multi-modal routing (driving vs. walking), turn-by-turn directions, off-screen edge pointers, and dynamic 3D terrain/satellite visualization—backed by multi-key token failover and hardware-aware performance scaling.

Mapbox GL JS v3React Map GL v8Next.js 16React 19TypeScript 5GeoJSON & DEMMapbox Directions APIHTML5 GeolocationSanity Studio v6Tailwind CSS v4Hardware-Aware ScalingVercel Edge Network
CASE STUDYLIVE SITE↗
05·Multimodal AI & Voice Concierge·2026·Dragon Treasure Castle

Ember — Multimodal AI Concierge

Ember is a multimodal AI concierge and virtual tour guide built for Dragon Treasure Castle in Baguio City. Featuring real-time voice-to-text recognition, natural speech synthesis, live Baguio atmospheric/seismic radar ingestion, and on-demand Headless CMS knowledge retrieval, Ember provides instant answers on tickets (₱165), commute directions, and rules—while narrating a dynamic 7-step guided audio walkthrough rendered in an interactive 3D claymorphic UI.

Next.js 16React 19TypeScript 5Tailwind CSS v4Web Speech APIEdge Neural TTSWeb Audio APISanity GROQ RAGTransparent Alpha Video3D ClaymorphismGSAP TimelinesVercel Edge Network
CASE STUDYLIVE SITE↗
06·Scroll-Driven 3D Video & Motion Engine·2026·Dragon Treasure Castle

Scroll-Driven 3D Virtual Video Tour

An immersive Scroll-Bound 3D Virtual Video Experience allowing visitors to virtually walk and fly through Baguio’s Dragon Treasure Castle before visiting in person. Built using GSAP ScrollTrigger, Lenis Inertial Scrolling, and a Pre-Warmed Multi-Video Stack, the engine translates user scroll velocity directly into 60 FPS frame-accurate video playback across 6 distinct aerial and ground perspectives—complete with a dynamic glassmorphic morphing dock and adaptive mobile tiering.

Next.js 16React 19TypeScript 5GSAP 3GSAP ScrollTriggerLenis Smooth ScrollHTML5 Video APIfastSeek() Hardware DecodingTailwind CSS v4Network-Aware PrefetchingLucide IconsVercel Edge Network
CASE STUDYLIVE SITE↗
07·Native iOS & Audiophile Audio Engine·2026·iOS Mobile Application

Sonance Player

Sonance Player is an audiophile-grade iOS music player combining a React Native/Expo UI with a high-performance, custom Swift AVAudioEngine backend. It features a dual-node audio graph for gapless playback and equal-power crossfades, a 10-band hardware equalizer, ReplayGain loudness normalization, and native iOS Lock Screen / Control Center integration.

SwiftAVFoundation (AVAudioEngine)AVAudioPlayerNode & AVAudioUnitEQMediaPlayer (MPNowPlayingInfoCenter)React Native 0.86Expo (SDK 57)TypeScriptSQLite (expo-sqlite)Google Drive REST APIOAuth 2.0GitHub Actions CI/CDEAS OTA
CASE STUDY
08·Spatial 3D WebGL & Creative Engineering·2026·Personal Showcase & Creative Engineering

Jhet Tacalig — Spatial Portfolio

An award-winning spatial 3D WebGL portfolio and creative engineering showcase built with Next.js 16, React 19, Three.js, GSAP, and Tailwind CSS v4. Features an interactive 3D curved gallery cylinder, seamless Cobe globe transitions, custom GLSL chromatic aberration shaders, and an architectural Swiss typography system.

Next.js 16 (App Router)React 19TypeScript 5Three.js & WebGLGLSL Custom ShadersGSAP 3 & ScrollTriggerLenis Smooth ScrollTailwind CSS v4Cobe Interactive GlobeSanity Studio v6Vercel Edge Network
CASE STUDYLIVE SITE↗
09·Distributed Media Systems & SaaS·2026·Distributed Media Infrastructure & SaaS

Sonance Studio

A full-stack, distributed cloud video mastering and transcoding SaaS engineered to eliminate quality degradation and compression artifacts on short-form video platforms (TikTok, Instagram Reels, and YouTube Shorts) using Next.js 16, FFmpeg, Cloudflare R2/Queues, and Supabase.

Next.js 16 (App Router)React 19TypeScript 5Node.jsFFmpeg Coreffprobe TelemetryCloudflare R2Cloudflare QueuesSupabase (PostgreSQL 15)Row Level Security (RLS)PayMongo API (QRPH/Cards)Tailwind CSS v4TurborepoVercel Edge Network
CASE STUDYLIVE SITE↗
10·Curated Portfolio Archive & Developer Community·2026·DEV/STATION

DEV-STATION

DEV/STATION is a curated archive for developer portfolios. I designed its editorial interface and built the system for submissions, live previews, structured ratings, saved work, weekly selections, and Discord-linked membership. It uses Next.js, Supabase, Cloudflare R2, Discord, and Vercel.

Next.js 16 (App Router)React 19TypeScript 5Supabase (PostgreSQL & Auth)Cloudflare R2Discord OAuthTailwind CSS v4Vercel Edge Network
CASE STUDYLIVE SITE↗
11·Mobile Workspace & Portfolio Ecosystem·2026·DEV/STATION (Mobile Ecosystem)

DEV/STATION Android

A dedicated mobile workspace for developer portfolios. Built with React Native and Expo, featuring floating dock navigation, SQLite cached browsing, encrypted on-device local drafts (24h retention), client-side image compression, and automated Android release pipelines.

React NativeExpo SDKTypeScript 5SQLite (Offline Storage)Supabase (Auth & PostgreSQL)Cloudflare R2Discord OAuthGitHub Actions (CI/CD)
CASE STUDYLIVE SITE↗
HOW WE IMPLEMENT & DELIVER PROJECTS

4-PHASE DISTRIBUTED ENGINEERING FLOW

Scroll down through each phase of our lifecycle. The 3D globe continuously weaves with 3D spatial depth—alternating in front of and behind translucent cards before centering behind the collaboration CTA.

01
PHASE 01 // DISCOVERY & STRATEGY
STAGE 01

RESEARCH & WEBSITE RECOMMENDATION

BUSINESS AUDIT, TARGET CUSTOMERS & ARCHITECTURAL DIRECTION

We learn about the client’s business, target customers, competitors, current online presence, and goals. From this, we recommend the website structure, features, technologies, integrations, and overall direction.

COMPETITOR & MARKET AUDITINFORMATION ARCHITECTURETECH STACK & INTEGRATIONS ROADMAPFEATURE & SCOPE SPECIFICATION
STRATEGIC ALIGNMENT · 100% TAILORED ARCHITECTURE · VERIFIED
02
PHASE 02 // DESIGN & ARCHITECTURE
STAGE 02

PLANNING, UI/UX & PROTOTYPE

SITEMAP, PAGE STRUCTURE, CONTENT FLOW & WIREFRAMES

We create the sitemap, page structure, content flow, wireframes, and visual direction. The client reviews the proposed design and user experience before full development begins.

SITEMAP & CONTENT FLOWHIGH-FIDELITY WIREFRAMESINTERACTIVE PROTOTYPESDESIGN SYSTEM & TYPOGRAPHY
CLIENT REVIEW SIGN-OFF · DESIGN SYSTEM ALIGNED · READY FOR DEV
03
PHASE 03 // FULL-STACK BUILD
STAGE 03

DEVELOPMENT & INTEGRATION

RESPONSIVE WEBSITE, CMS, APIS, CRM & CUSTOM FEATURES

We build the responsive website and implement the required functionality, such as contact forms, CMS, booking systems, CRM integrations, analytics, SEO foundations, security, and other custom features.

RESPONSIVE NEXT.JS ENGINEHEADLESS CMS & SCHEMASCRM & BOOKING INTEGRATIONSSEO & ANALYTICS FOUNDATIONS
SUB-100MS TTFB · PRODUCTION GRADE SECURITY · ACTIVE
04
PHASE 04 // LAUNCH & OPERATIONS
STAGE 04

TESTING, LAUNCH & SUPPORT

CROSS-DEVICE QA, CDN DEPLOYMENT, HANDOVER & MAINTENANCE

We test the website across desktop and mobile devices, optimize performance and security, fix issues, configure the domain and hosting, and launch the website. After launch, we provide documentation, handover, and optional maintenance or future improvements.

CROSS-DEVICE & BROWSER QAPERFORMANCE & SECURITY OPTIMIZATIONDOMAIN & HOSTING PROVISIONINGDOCUMENTATION & HANDOVER
100/100 LIGHTHOUSE SCORE · ZERO DOWNTIME LAUNCH · HANDED OVER

INITIATE COLLABORATION

HAVE AN AMBITIOUS VISION?
LET'S BUILD IT.

GET IN TOUCH➔DIRECT INQUIRY↗