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.
ENGINEERING IMMERSIVE NARRATIVES
Crafting a spatial 3D portfolio that bridges low-level WebGL graphics programming, complex reactive state management, and refined Swiss editorial typography into an unforgettable digital showcase.
[01] EXECUTIVE SUMMARY & SPATIAL ARCHITECTURE
jttacalig.vercel.app is a bespoke spatial portfolio engineered to redefine personal developer websites. Rather than standard vertical scrolling pages, the platform operates as a unified dual-dimension spatial environment: a monumental studio masthead featuring dynamic interactive 3D Cobe globe transitions seamlessly dissolving into a 3D cylindrical curved card carousel powered by Three.js and custom GLSL shaders.
[02] SPATIAL 3D WEBGL CYLINDER & SHADER ENGINEERING
• Curved Cylindrical Geometry: Mathematical vertex deformation maps project cards along an arc radius, creating a tactile physical gallery cylinder with realistic depth perception and atmospheric fog falloff.
• Custom GLSL Fragment & Vertex Shaders: Implements dynamic chromatic aberration, subtle edge displacement ripples, and mouse velocity inertia that organically distorts textures during high-speed drag operations.
• Raycasting & Seamless Page Morphing: Hardware-accelerated Raycaster detects hover targets and coordinates with GSAP to morph 3D curved textures directly into full-bleed 2D project case study viewports.
[03] UNIFIED DUAL-DIMENSION STAGE ENGINE
• Step-Driven Spatial Narrative: Guides visitors through an choreographed 7-step sequence spanning engineering disciplines, live geospatial Cobe globe coordinates, and spatial interactive showcases.
• 4-Corner Swiss Frame Navigation (JesperFrameNav): Persistent architectural HUD rendering real-time project indices [01 / 08], live Manila time (UTC+8), audio status, and keyboard navigation listeners (Arrow Left / Right).
[04] EDITORIAL SWISS TYPOGRAPHY & DESIGN SYSTEM
• Satoshi Display & Inter Sans: Pairs monumental geometric display headings (Satoshi via Fontshare) with ultra-clean, legible interface body copy (Inter).
• JetBrains Mono & Hairline Dividers: Strict monospace alignment for telemetry, coordinates, and indices, paired with pure pitch-black (#000000) canvas and hairline borders (rgba(255, 255, 255, 0.08)).
[05] PERFORMANCE, ACCESSIBILITY & 120 FPS FLUIDITY
• GSAP Ticker & Lenis Synchronization: Decoupled render loop tied to hardware requestAnimationFrame, delivering fluid 60 to 120 FPS performance across modern high-refresh mobile and desktop displays.
• Adaptive Mobile Tiering: Gracefully degrades 3D WebGL scenes to touch-optimized gesture galleries (MobileGallery) on lower-powered devices or reduced motion preferences.
• 100% Serverless Edge Delivery: Powered by Next.js 16 App Router, React 19 Server Components, and On-Demand ISR on the Vercel Edge Network for instant sub-second global page loads.
[06] TECH STACK
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.