My Inspiration for This Project

For quite some time, I've yearned to create more than just a simplistic webpage. I wasn't aiming for a typical scrollable document or a tidy arrangement of cards. My vision was to craft an immersive experience—an environment that visitors could truly enter, where every scene reflects the same thoughtful artistry akin to a well-composed film frame. The brief I set for this endeavor was simple yet profound: when someone visits this space, they should feel as though they've genuinely arrived, rather than merely opening another tab.

This vision materialized into a scroll-driven 3D environment fashioned entirely with tools like Three.js, GSAP, WebGL shaders, and Blender. Three months went into intense development, followed by three weeks dedicated to refinement, along with the lessons learned from three previous iterations of this portfolio that remained on my machine, undisclosed.

Yet, the heart of my journey isn't about the tech stack; it's about the underlying inquiry guiding its creation.

The Journey: Three Months and Five Years

While the development arc of this portfolio spans just three months, it is the culmination of five years of growth.

Since 2021, through over fifty client and personal projects, I've been diligently honing the visual, technical, and persistent skills that this project required. Unlike many, I found my learning pathway through exploring open-source repositories, treating them like textbooks: cloning, experimenting, reconstructing, and absorbing the lessons to build my unique creations.

This deep-rooted methodology not only reveals my commitment but also drives me to work long hours with little rest. The thrill of typing code and watching a digital universe take shape is intoxicating. Each facet of that space is shaped by my intentions, reinforcing the beauty of creative control.

Every website I have built has challenged me with one fundamental question: is this worth sharing? This isn't merely about meeting a standard of quality to launch something; it’s about gauging its true value in sharing my intent and vision with the world. And this portfolio serves as my earnest answer to that inquiry.

Technical Breakdown

• Three.js + WebGL to create the full 3D environment.
• GSAP + ScrollTrigger + Observer + SplitText for scroll-driven animations and typography enhancements.
• Blender for 3D modeling and scene composition.
• KTX2 / Basis Universal for optimized texture compression.
• GPU instancing used to streamline repeated geometry.
• Low-resolution custom shaders tailored for better mobile performance.
• Draco compression applied to complex GLTF assets.
• All visual elements and code were crafted from the ground up.

Experiencing a Scroll-Driven World

At the outset, the environment captivates with an architectural 3D setting, bathed in evocative lighting akin to dawn in an underwater city, topped with the phrase: “Architect of immersive dimensions — High-end fullstack development & AI Integrations.” A slight scroll transitions the experience, shifting the camera and replacing that line with something deeply personal: “Creative Software Engineer & UI/UX designer, follower of Jesus Christ †.”

This second statement is far from mere embellishment; it reflects the core of my identity. Any portfolio that begins with anything less genuine would fail to represent the individual behind it.

Each segment of the site adheres to this principle, meticulously crafted so that scroll navigation rhythmically corresponds with camera movements, animations, and object reveals. It breaks free from the constraints of standard blocks and traditional grids; rather, users navigate through a tangible space, each section unfolding in time with their scrolls.

I employed GSAP’s Observer for input response, merging mouse, touch, and trackpad interactions into a unified experience. The synergy with ScrollTrigger enables the entire site to flow like a continuous camera shot, rather than fragments of disconnected scrolling.

What I Learned About Optimization

Through this build, performance emerged as the greatest challenge. At the beginning, I recognized the terminology—KTX2, instancing, LOD, Draco—but by the end, those concepts became ingrained with true understanding.

• KTX2 / Basis Universal compression: Traditional image formats can severely tax GPU resources. Transitioning to KTX2, which decompresses directly on the GPU, drastically improved performance on mid-range systems.
• GPU instancing: Elements like floating blocks and architectural supports are not separate draw calls. Instancing reduces multiple elements into a single draw call, drastically increasing frame rates.
• Low-resolution shaders for mobile: Many shaders don’t need to render at full resolution; atmospheric effects utilize smaller targets, yielding efficiency without sacrificing user perception.
• Draco compression for GLTF: Projects created in Blender often resulted in large file sizes until Draco reduced them significantly without compromising quality.
• Dynamic culling versus static LODs: Because our site navigates predetermined camera paths, I efficiently cull objects outside the view, preventing the GPU from wasting resources.

The site runs smoothly at 144 FPS on capable hardware and maintains steady performance even on mid-range mobile devices. This achievement stems from meticulous attention to every asset, render call, and texture—a culmination of careful discipline and extensive learning.

Navigating Project Transitions: The Emergence of Unique Experiences

Selecting a project card launches a dynamic experience, marked by a tesseract unfolding to showcase the work beneath. The projects don’t simply appear—they naturally emerge.

The tesseract was not the difficult factor; rather, conceptualizing unique transitions for each project was the challenge. I aimed to deviate from the cliched "click, fade, next page" routine. Instead, I sought transitions that would resonate uniquely with each showcased piece while avoiding chaotic distractions. The tesseract consequently became the signature I cherished.

Another intricate aspect was achieving snap-scroll behavior with GSAP’s Observer. Given the site’s scene-driven navigation, ensuring a clean lock-in at each section without sacrificing mid-scroll fluidity proved a balancing act. Creating that “feel” of intentionality—neither too rigid nor overly relaxed—required extensive tuning of thresholds, velocities, and easing parameters. This is one of those details that might go unnoticed if executed well, yet significantly impact the entire user experience if it falters.

Musical Accompaniment: Vanity by Hevel

Complementing the visual elements is a soundtrack that I composed under the name Hevel. The track, titled Vanity, resides exclusively within this portfolio.

Hevel translates from Hebrew, a term Solomon frequently uses in Ecclesiastes, often rendered as “vanity” but more accurately signifying breath, vapor, mist—an ephemeral quality that captures the essence of creating something beautiful, only to witness its momentary existence. Many creatives resonate with this sentiment.

The site softly poses this question, with the music enhancing the experience without overt declaration.

Sound is user-controlled—a deliberate choice to prevent auditory surprises. Engaging the music changes the entire ambiance, as it was tailored for this journey. One intricate detail I value is that, upon opening a project, the soundtrack doesn’t halt or decrease in volume; instead, it becomes muffled, simulating the sensation of stepping into a different room with the music still echoing from afar. That effect is achieved through a lowpass filter during transitions, reinforcing that projects represent distinct places within the site rather than pages that replace one another. When exiting a project, the filter dissipates, seamlessly restoring the full auditory experience.

A Remarkable Coincidence: An Astronaut and a Message I Didn't Anticipate

A striking incident occurred a few weeks post-launch, the significance of which remains unfathomable.

On April 1, 2026, NASA embarked on Artemis II—marking the first human mission to the Moon in over half a century. Featuring four astronauts, the mission set distance records beyond any previously achieved by Apollo 13 in 1970.

Among them was Victor Glover, who ventured into deep space with a Bible. During the mission, he chose to use his broadcast time not to delve into technical details but to communicate something deeper.

On Easter Sunday, alongside the Moon, he conveyed a vital message to viewers back on Earth:

“When I read the Bible and I look at all of the amazing things that were done for us, who were created, you have this amazing place, this spaceship.”

“Maybe the distance we are from you makes you think what we’re doing is special, but we’re the same distance from you. And I’m trying to tell you—just trust me—you are special.”

“In all of this emptiness—this is a whole bunch of nothing, this thing we call the universe—you have this oasis, this beautiful place that we get to exist together.”

The next day, just before losing contact during their lunar flyby, he extended his message:

“As we continue to unlock the mysteries of the cosmos, I would like to remind you of one of the most important mysteries there on Earth, and that’s love. Christ said, in response to what was the greatest command, that it was to love God with all that you are.”

Glover has openly shared his faith, stating, “We need Jesus—whether here on earth or orbiting the moon. Jesus is that bridge that spans sin and gives us a chance of going to heaven.”

Now here’s where the story takes an unexpected turn. Prior to any of these events—before Artemis II launched, before Glover's impactful remarks, before the lunar blackout, even before the capsule's splashdown—I had positioned a small astronaut in a pivotal scene in my portfolio. A tiny figure, all on its own, set against an expansive backdrop hinting at themes of love and creation. I was unaware of Glover's impending speech. I simply felt compelled to include an astronaut.

Weeks later, a real astronaut broadcasted to the world from nearly 253,000 miles away, articulating the very sentiments that my fictional representation implied.

This is serendipity I couldn’t script. I dare say it’s as if the narrative is being authored by a greater force beyond our understanding.

A Unique Scene Amidst the Rest

Midway through the site, the atmosphere transforms dramatically. The color scheme darkens to a deep crimson, as rose petals drift through the haze, where a lone astronaut figure stands amidst a field of roses. Suddenly, the scene ruptures—fractured sculptures, cracks of molten lava, and now the astronaut floats adrift through the chaos.

This section proved to be the most technically demanding aspect of the entire project. Several challenging elements contributed to this complexity: