Interactive 3D Spatial Universe & Portfolio^®

Transforming personal portfolio presentation into an exploratory 3D spatial archipelago.

Traditional portfolio websites are often flat, static catalogs of project cards and screenshot mockups. For this 2026 flagship project, the vision was to dissolve the boundary between digital portfolio and interactive spatial journey—creating an expansive 3D world that visitors explore in real time. As a Fullstack Designer, I spearheaded every dimension of production: conceptualizing the spatial celestial archipelago, modeling and optimizing 3D assets in Blender, crafting a high-contrast dark visual palette illuminated by warm amber (#ffd685, #ffa550) and cyan rim lights (#50a5ff), and engineering the complete Next.js App Router architecture. Design Architecture Note: The entire universe is intentionally crafted with an exclusive, high-contrast dark spatial atmosphere without a light/dark mode switcher—preserving cinematic immersion, rich volumetric depth, and precise color grading throughout the entire 3D journey.

Sustaining a rock-solid 60 FPS WebGL frame rate with heavy 3D geometry and real-time shaders on consumer hardware.

Rendering a continuous 3D world with multiple high-fidelity models, dynamic water surfaces, atmospheric skyboxes, and smooth camera transitions introduces critical technical hurdles. Uncontrolled polygon counts, unoptimized shadow maps, and uncompressed GLTF files can easily cause GPU throttling, memory spikes, and scroll jank. To ensure flawless cross-device performance, I established a strict optimization workflow: 1. Mesh Decimation & Google Draco Compression: All 3D assets—including the floating island terrain (/floating-island.glb), Atlas statue (/assets/models/cinematic/Atlas-opt.glb), Horse statue (/Asset3d/Horse.glb), Caravel vessel (/Asset3d/caravel_ship-opt.glb), and retro CRT monitor (/models/Work-TV.glb)—underwent aggressive polygon decimation in Blender and were compressed using Google Draco (/draco/). This reduced asset download sizes by over 75% without compromising visual fidelity. 2. Custom Procedural GLSL Shaders: Instead of relying on heavy multi-pass post-processing bloom and screen-space reflections, I authored lightweight custom GLSL shaders: a procedural SkyShader with Rayleigh/Mie atmospheric scattering, and an optimized WaterShader calculating normal ripple displacement, blue-frequency detection, and specular reflection glints in a single GPU pass. 3. Dynamic Loading & Ember Particle Preloader: Engineered an atmospheric preloader featuring 40 animated ember particles, a 3D rotating monogram emblem (/faridlogo-opt.glb), and real-time progress tracking via Three.js DefaultLoadingManager (Unearthing Artifacts...) to guarantee that all assets are GPU-ready before the cinematic hero camera unlocks.

“Fullstack creative development is the intersection where aesthetic conviction meets engineering discipline—every pixel, polygon, and shader uniform built with mathematical purpose.”

Orchestrating Three.js, React Three Fiber, Troika 3D Text, Lenis, and Next.js.

1. 01

   Spatial Concept & 3D Asset Pipeline (Blender & Draco)

   Conceived the spatial layout with 6 primary waypoints (About Me, Ctrl Z History, Stuff I Built, Humble Brags, My Survival Kit, Let’s Grab Coffee). Modeled, retopologized, and baked ambient occlusion for all 3D GLTF models, applying Draco compression for instant web delivery.

2. 02

   React Three Fiber Canvas & Custom GLSL Shaders

   Constructed the declarative 3D scene graph using @react-three/fiber and Drei utilities. Implemented image-based lighting using the Dikhololo 1k HDR environment map, coupled with custom SkyShader and reactive WaterShader materials.

3. 03

   Troika 3D Spatial Typography Engine

   Integrated troika-three-text for GPU-accelerated Signed Distance Field (SDF) typography rendered directly in 3D world space, ensuring razor-sharp legibility at any camera distance and angle.

4. 04

   Kinetic Spline Camera Interpolation & Lenis Scrubbing

   Engineered smooth curved camera dolly paths between spatial waypoints using GSAP and nonlinear lerp mathematics (CAMERA_LERP: 6.5, LOOKAT_LERP: 6, arcPeak parabolas) synchronized with Lenis inertial smooth scrolling.

5. 05

   Spatial Audio Ambiance & Matter.js 2D Rigid Physics

   Integrated ambient oceanic soundscapes (Ocean.mp3 & Backsound.mp3) with an interactive 4-bar equalizer control and custom audio event bus, alongside Matter.js 2D rigid-body physics for throwable interactive badge pills.

6. 06

   Next.js App Router Architecture & Edge Deployment

   Packaged the application with Next.js App Router, configuring dynamic client-side chunk splitting (next/dynamic with ssr: false for 3D bundles), and deployed to Cloudflare Workers edge runtime for sub-second global response times.

Flawless 60 FPS performance, zero-latency transitions, and global edge delivery.

Launched live in 2026 on Cloudflare Workers (https://jrvvoes.faridlaksmana7.workers.dev/), this project stands as a benchmark for modern creative development and fullstack spatial design. The interactive universe provides an unforgettable visitor experience, combining cinematic depth, tactile physics, and rich storytelling without compromising web performance. Key Highlights & Capabilities: • 100% Solo Execution: Complete ownership across art direction, 3D modeling, GLSL shader engineering, physics scripting, and fullstack Next.js deployment. • Dedicated Dark Theme: Purposefully designed in a unified dark spatial palette (no light mode required) to maintain optimal contrast, glowing emissive shaders, and cinematic focus. • Sub-Second Edge Delivery: Instantaneous asset loading powered by Cloudflare Workers and Draco geometry compression. • Fluid 60 FPS Motion: Friction-free camera navigation with zero frame drops across modern desktop and mobile browsers.

• 60 FPSRock-solid WebGL Render Frame Rate
• < 0.8sFast Time to Interactive (TTI)
• 75%Asset Payload Reduction via Draco
• 2026Live Production Release Year