LEACB एक साधारण स्टैटिक पेज से शुरू हुआ और एक पूरे 3D इंटरैक्टिव अनुभव में बदल गया। आर्किटेक्चर जान-बूझकर वनीला है — कोई React नहीं, कोई Next.js नहीं, कोई बिल्ड टूल नहीं। बस ES मॉड्यूल, Three.js और हाथ से लिखा CSS। हर बाइट सोच-समझकर है।
LEACB started as a simple static page and evolved into a full 3D interactive experience. The architecture is deliberately vanilla — no React, no Next.js, no build tools. Just ES modules, Three.js, and hand-written CSS. Every byte is intentional.
मॉड्यूल एक झरने की तरह लोड होते हैं: loader.js लोडिंग स्क्रीन और
प्रोग्रेस बार शुरू करता है, scene.js Three.js रेंडरर, कैमरा और पोस्ट-प्रोसेसिंग पाइपलाइन
सेट करता है, ui.js सारे DOM इंटरैक्शन सँभालता है, और navigation.js पैनल के
ट्रांज़िशन का संचालन करता है।
The module system loads in a waterfall: loader.js initialises the
loading screen and progress bar, scene.js sets up the Three.js renderer, camera, and
post-processing pipeline, ui.js manages all DOM interactions, and
navigation.js orchestrates panel transitions.
3D सीन LEACB की धड़कन है। बीच में एक TorusKnot वायरफ़्रेम घूमता है। उसके चारों ओर: एक आइकोसाहेड्रॉन, ऑक्टाहेड्रॉन, डोडेकाहेड्रॉन और दो टोरस रिंग — सब अलग-अलग रफ़्तार और अक्ष के मेल पर घूमते हुए। पृष्ठभूमि में 3000 पार्टिकल तैरते हैं।
The 3D scene is the heartbeat of LEACB. A TorusKnot wireframe rotates at the center. Surrounding it: an icosahedron, octahedron, dodecahedron, and two torus rings — all rotating at different speeds and axis combinations. 3000 particles float in the background.
पोस्ट-प्रोसेसिंग Three.js के EffectComposer के ज़रिए UnrealBloomPass सँभालता है। ब्लूम हर चीज़ को वह ख़ास साइ-फ़ाई चमक देता है। 0.045 घनत्व वाला फ़ॉग दूर की चीज़ों को शून्य में घोल देता है।
Post-processing is handled by UnrealBloomPass via the Three.js EffectComposer. The bloom gives everything that signature sci-fi glow. Fog at density 0.045 fades distant objects into the void.
हर सेक्शन — परिचय, प्रोजेक्ट्स, स्किल्स, ब्लॉग, प्लेग्राउंड, संपर्क — सीन में एक
तैरता 3D प्लेन है। नेविगेट करने पर कैमरा lerp के ज़रिए लक्ष्य पैनल तक सहजता से पहुँचता
है। पैनल की टेक्स्चर कैनवस एलिमेंट के रूप में बनती हैं, अपनी टाइपोग्राफ़ी और कोने के अलाइनमेंट मार्कर
के साथ।
Each section — about, projects, skills, blog, playground, contact — is a floating
3D plane in the scene. On navigation, the camera smoothly interpolates to the target panel using
lerp. The panel textures are rendered as canvas elements with custom typography and
corner alignment markers.
UI लेयर पूरी तरह ग्लास-मॉर्फ़िज़्म है: पारभासी गहरे बैकग्राउंड पर
backdrop-filter: blur(20px)। बॉर्डर पर CSS कस्टम प्रॉपर्टीज़ से हल्की चमक। हर
ट्रांज़िशन में cubic-bezier(0.23, 1, 0.32, 1) — वही चुस्त-मगर-मुलायम एहसास।
The UI layer is entirely glass-morphism: backdrop-filter: blur(20px)
over translucent dark backgrounds. Borders use subtle glow effects via CSS custom properties. Every
transition uses cubic-bezier(0.23, 1, 0.32, 1) for that snappy-but-smooth feel.
“सबसे अच्छा इंटरफ़ेस वह है जो रोशनी से बना लगे।”
"The best interface is one that feels like it's made of light."
भारी विज़ुअल के बावजूद LEACB का लक्ष्य 60fps है। डीबगिंग के लिए FPS काउंटर HUD में दिखता है। मुख्य अनुकूलन: वायरफ़्रेम जियोमेट्री, फ़्रस्टम कलिंग, ब्लूम थ्रेशोल्ड की ट्यूनिंग, और पार्टिकल की संख्या संतुलित रखना। मोबाइल पर एनिमेशन हल्के कर दिए जाते हैं।
Despite the heavy visuals, LEACB targets 60fps. The FPS counter is displayed in the HUD for debugging. Key optimisations: wireframe geometry, frustum culling, bloom threshold tuning, and keeping particle counts balanced. On mobile, animations are simplified.
LEACB आगे भी बदलता रहेगा। योजना में शामिल है: शेडर-आधारित बैकग्राउंड, कंप्यूट शेडर से GPGPU पार्टिकल सिस्टम, और इंटरैक्टिव 3D प्रोजेक्ट शोकेस जहाँ हर प्रोजेक्ट अपने ही मिनी-सीन में रहे।
LEACB will continue evolving. Planned additions include shader-based backgrounds, GPGPU particle systems via compute shaders, and interactive 3D project showcases where each project lives in its own mini-scene.