Extra Than a Portfolio: Constructing a Scroll-Pushed 3D World with One thing to Say

The Temporary I Wrote for Myself

For years I’ve been making an attempt to construct one thing greater than an internet web page. Not a scrolling doc. Not a neat stack of playing cards. One thing nearer to a spot — an surroundings the customer truly enters, the place each scene consists with the identical care a movie units a body. That was the transient I wrote for myself in the beginning of this construct: if somebody lands right here, they need to really feel like they arrived someplace, not simply opened a tab.

A scroll-driven 3D surroundings constructed from scratch with Three.js, GSAP, WebGL shaders, and Blender. Three months of targeted work, three weeks of ultimate polish, and three earlier variations of this identical portfolio that by no means left my machine.

However the true purpose I wish to stroll you thru it isn’t the stack. It’s the query the stack was constructed to reply.

5 Years Behind Three Months

This portfolio took three months. It additionally took 5 years.

Since 2021, throughout greater than fifty consumer and private initiatives, I’ve been slowly accumulating the muscle tissues — visible, technical, and cussed — that this web site required. Tutorials have been nearly by no means the automobile. What has at all times labored for me is studying open-source repositories the best way different individuals learn textbooks: clone, break, rebuild, perceive. After which construct one thing of my very own that forces me previous what I already knew.

That’s the solely method I understand how to study, and additionally it is why I routinely go days with out sufficient sleep. There’s something nearly addictive about having the ability to kind code and watch a complete world assemble itself on the opposite aspect of the display. You possibly can form mild. You possibly can select what gravity does. Each element bends to your intention in case you are affected person sufficient with it.

The query that has stored me going, on each web site I’ve ever constructed, is similar one: is that this value sharing? Not is it adequate to ship. Price sharing. These are very completely different requirements.

This portfolio is my trustworthy reply.

Technical Overview

• Three.js + WebGL for the complete 3D surroundings
• GSAP + ScrollTrigger + Observer + SplitText for scroll-driven movement and typography
• Blender for modeling, scene composition, and baking
• KTX2 / Foundation Common compressed textures
• GPU instancing for repeated geometry
• Low-resolution customized shaders for cellular efficiency
• Draco compression for heavier GLTF belongings
• All 3D scenes, environments, media, and core code constructed from scratch

A Scroll-Pushed World

The hero units the tone instantly: an architectural 3D surroundings, lit like an early morning underwater metropolis, with the road “Architect of immersive dimensions — Excessive-end fullstack improvement & AI Integrations” over it. Scroll slightly, and the world shifts. The digicam drifts. The road fades to one thing extra private: “Artistic Software program Engineer & UI/UX designer, follower of Jesus Christ †”.

That second line is just not ornament, and it isn’t there as an announcement. It’s there as a result of it’s the most trustworthy headline I might write about myself, and a portfolio that begins with something much less true than that’s already a lie in regards to the individual behind it.

The remainder of the positioning is constructed on the identical precept. Every part is its personal scene. Every scene consists in order that scroll development maps to digicam motion, object animation, and reveal timing. There aren’t any normal blocks. No conventional grid. What the consumer is basically doing is strolling by means of an area, one beat at a time.

Enter dealing with makes use of GSAP’s Observer as a substitute of uncooked scroll occasions, which unifies mouse, contact, and trackpad into one constant expertise. Mixed with ScrollTrigger, it lets the entire web site really feel like a single digicam take somewhat than a collection of disconnected scrolls.

What Optimization Truly Taught Me

If one factor stretched me on this construct greater than the rest, it was efficiency. Once I began, I knew the names of issues — KTX2, instancing, LOD, Draco. By the top, I truly understood them.

• KTX2 / Foundation Common compression. Customary PNGs and JPGs are brutal on GPU reminiscence. Transferring to KTX2 — decompressed instantly on the GPU — was the distinction between a scene that crawled on mid-range {hardware} and one which ran clean.
• GPU instancing. The floating blocks, the architectural pillars, the particles fields — none of these are particular person draw calls. Instancing collapses them into one. That’s the distinction between 30 FPS and 144.
• Low-resolution shaders for cellular. Not each shader must run at full decision. The atmospheric passes run on a smaller render goal and composite again in. The consumer by no means notices. The telephone does.
• Draco compression for GLTF. Blender exports have been monumental earlier than Draco. After Draco, they dropped to a fraction of the scale with no seen high quality loss.
• Dynamic culling as a substitute of static LODs. As a result of the positioning is camera-pathed, I do know precisely which objects are on-screen and which aren’t at any given body. Moderately than constructing a number of LOD tiers for each asset (which bloats reminiscence), I aggressively cull something outdoors the digicam frustum and solely replace what the consumer can truly see. The result’s that the GPU by no means wastes cycles on geometry the digicam is just not even taking a look at.

The positioning runs at 144 FPS on succesful {hardware} and holds a gentle body charge even on mid-range cellular. None of that was luck. It was self-discipline utilized to each asset, each draw name, each texture — and a whole lot of studying alongside the best way.

Mission Transitions: The Tesseract Unfolding

Opening a challenge on the positioning is just not a click on that hundreds a web page. It’s a transition. Whenever you click on on any challenge card, a tesseract unfolds in entrance of you — a 4D form that expands and dissolves, as if peeling actuality open to disclose the work beneath. The challenge doesn’t “seem.” It emerges.

Actually, the tesseract itself was not the exhausting half. The exhausting half was determining what every challenge transition ought to be within the first place. I didn’t need each challenge to open the identical method. That’s the default in most portfolios — click on, fade, subsequent web page. Carried out. However default is strictly what I used to be making an attempt to not construct. So a whole lot of time went into brainstorming transitions that might really feel distinctive to every piece with out spiraling into chaos, and the tesseract was the primary one which felt proper sufficient to turn into the signature.

The opposite genuinely difficult piece was snap-scroll habits with GSAP’s Observer. As a result of the positioning navigates by full scenes somewhat than free scroll, every part must lock cleanly at its resting level — however with out killing the smoothness of mid-scroll transitions. Getting the snap to really feel intentional (not rubber-banded, not sluggish, not too aggressive) took a whole lot of tuning of thresholds, velocities, and easing curves. It’s a type of issues no one notices when it really works, and all people feels when it doesn’t.

Sound: Vainness, by Hevel

The soundtrack is a tune I wrote and produced myself, below the title Hevel. The monitor is named Vainness, and it isn’t launched wherever else — this portfolio is its dwelling.

Hevel is a Hebrew phrase. It’s the one Solomon makes use of all through Ecclesiastes, normally translated as “vainness” however nearer in which means to breath, vapor, mist. One thing that appears stable however slips by means of your fingers the second you attain for it. An ideal phrase, it seems, for what it feels prefer to construct one thing lovely, ship it, and watch the sensation evaporate sooner than you anticipated. Each artistic I do know has felt some model of that.

The positioning asks the query quietly. The music carries it without having to say it out loud.

The audio runs on a user-controlled toggle — nothing auto-plays, as a result of no one ought to be ambushed by sound on an internet site. However in the event you flip it on, the positioning feels completely different, as a result of the rating was written for this particular stroll.

One small contact I like: once you open a challenge, the soundtrack doesn’t cease or duck in quantity — it will get muffled, as in the event you had stepped by means of a door into an adjoining room and the music have been nonetheless taking part in on the opposite aspect of the wall. Technically it’s a lowpass filter utilized on transition, however perceptually it does one thing far more necessary: it reinforces the sensation that initiatives are locations inside the positioning, not pages that change it. Whenever you shut the challenge, the filter lifts and the total soundtrack returns, such as you walked again out into the primary house.

An Astronaut, a Moon, and a Message I Did Not Plan

One thing occurred just a few weeks after this portfolio went stay that I nonetheless can’t absolutely clarify.

On April 1, 2026, NASA launched Artemis II — the primary crewed mission to the Moon in additional than fifty years. 4 astronauts, a ten-day journey, and a brand new document for the farthest human beings have ever traveled from Earth, surpassing the space set by Apollo 13 in 1970.

The mission’s pilot was Victor Glover. He introduced a Bible with him into deep house. And in the course of the mission, from contained in the Orion capsule because it arced across the Moon, he used his broadcast time to not discuss engineering or the historical past being made — however to level to one thing else.

On Easter Sunday, with the Moon shut and the Earth a small blue level behind him, he instructed viewers again dwelling:

“Once I learn the Bible and I have a look at all the wonderful issues that have been performed for us, who have been created, you may have this wonderful place, this spaceship.”

“Possibly the space we’re from you makes you assume what we’re doing is particular, however we’re the identical distance from you. And I’m making an attempt to inform you — simply belief me — you’re particular.”

“In all of this vacancy — it is a entire bunch of nothing, this factor we name the universe — you may have this oasis, this lovely place that we get to exist collectively.”

A day later, simply earlier than the spacecraft misplaced contact in the course of the far-side lunar blackout, he went additional. From almost 253,000 miles away, he stated:

“As we proceed to unlock the mysteries of the cosmos, I want to remind you of probably the most necessary mysteries there on Earth, and that’s love. Christ stated, in response to what was the best command, that it was to like God with all that you’re.”

Glover has been open about his religion for years. He as soon as stated, plainly: “We’d like Jesus — whether or not right here on earth or orbiting the moon. Jesus is that bridge that spans sin and provides us an opportunity of going to heaven.”

Now here’s what stops me. 😳

Months earlier than any of this — earlier than Artemis II launched, earlier than Glover’s broadcast, earlier than the blackout, earlier than the Pacific splashdown — I had already positioned a small astronaut on the middle of crucial scene in my portfolio. A tiny determine, alone in an unlimited house, standing in the midst of a message a few Creator who loves us and a Savior who got here for us. I didn’t know what Victor Glover was about to say from 253,000 miles away. I simply knew I wished an astronaut there.

After which, weeks later, an actual astronaut stated — from deep house, on stay broadcast, to the complete world — the precise factor my fictional one was pointing towards.

I couldn’t have scripted that. I don’t assume I used to be presupposed to. It’s the type of factor that, once you discover it, you begin to surprise if possibly the story is being written by somebody larger than any of us.

The Scene That Is Not Just like the Others

About midway by means of the positioning, the surroundings adjustments. The palette shifts to deep purple. Rose petals drift by means of fog. A small astronaut determine stands in the midst of a area of roses. Then the scene breaks — fractured statues, cracks of lava, the astronaut now drifting by means of the particles.

Technically, this was probably the most demanding sequence in the complete web site. A number of of the items that made it exhausting:

• Modeling a breaking ground in Blender. The transition from the rose area to the lava scene is actually the bottom cracking open beneath the astronaut. Sculpting that fracture sample so it reads appropriately from a number of digicam angles, then organising the mesh so it might collapse on cue, was one of many longest Blender classes of the entire challenge. Each rock, each edge, each shard needed to really feel earned — not randomly generated.
• Two utterly completely different particle methods. The rose area runs a particle system of drifting petals, tuned for softness and gradual vertical movement. The lava scene runs a second, completely separate particle system for rising embers and sparks — sooner, hotter, with completely different emission patterns and shader habits. Getting each to take a seat inside the identical efficiency funds with out one ravenous the opposite took actual tuning.
• Switching scroll modes mid-site. The remainder of the portfolio makes use of a free, steady scroll really feel. However this sequence wants one thing completely different — snap-block scrolling, the place every of the 4 moments locks into place and the consumer advances beat by beat, like turning the pages of a small guide. Implementing that with out it feeling jarring (and with out breaking the free-scroll habits in adjoining sections) meant writing logic that swaps scroll modes dynamically primarily based on which scene the consumer is in. GSAP’s Observer handles the enter unification, however the mode-switching state machine on high of it was its personal rabbit gap.
• Cross-fading animation states on the astronaut character. This was in all probability the toughest half. The astronaut has 4 distinct animation states throughout the 4 moments of the sequence — falling, strolling ahead, strolling backward (when turning away and returning), and idling. Transitioning between them with out seen pops or awkward interpolation is just not trivial. Every state needed to mix easily into the following, timed to the precise beat of the snap scroll, which meant customized transition curves for each crossfade.

Each different scene within the portfolio serves this one. I constructed it this manner on function. As a result of the textual content that seems right here is crucial textual content in the complete web site, and I wished the medium to match the load of the message.

The sequence is a brief, trustworthy walkthrough of the information I most wish to share with anybody who reaches this a part of the positioning:

You have been made on function, by a Creator who loves you and has good plans for you — “plans to prosper you and to not hurt you, plans to provide you hope and a future” (Jeremiah 29:11).

One thing in humanity has damaged that connection, and all of us really feel it at some stage — even in the midst of our greatest work. Jesus is the way it will get repaired. Not as a faith. Not as a rulebook. As a One that closed a distance none of us might shut ourselves.

The one verse I wish to go away with you, as a result of it’s the one which has held me collectively greater than another, is that this:

“I’m the best way, the reality, and the life. Nobody involves the Father besides by means of me.”
— Jesus (John 14:6)

That isn’t an conceited sentence whether it is true. It’s the most beneficiant sentence ever spoken, as a result of it means there’s a method dwelling, and He has instructed us the place it’s.

In case you are studying this and none of it lands, that’s okay. You didn’t skip it, which is already greater than I might ask. And if any a part of it stays with you after you shut this tab, that’s not me — that’s Somebody who has been drawing you for longer than you understand.

The Contact Menu — and a Small Trick I Cherished

The positioning has no navbar. The one CTA is a single “CLICK TO CONTACT” within the top-right nook. However clicking it isn’t a dropdown.

The menu opens with a WebGL shader transition I name Ink Bleed — a burning-paper / ink-spreading impact, as if the web page have been being consumed and one thing new have been coming by means of from beneath. A traditional dropdown would have labored tremendous. It additionally would have betrayed the whole lot else. If each pixel elsewhere was crafted, the menu couldn’t be a compromise.

Inside: socials, WhatsApp, Gmail, and the methods to succeed in me. Clear, fast, in the identical design language as the remainder.

The NDC Trick

There may be one small factor on this shader I wish to name out, as a result of it’s the type of element that solely issues if in case you have tried to construct one thing prefer it and hit the same old wall.

The positioning lives inside a Three.js scene, which implies each mesh usually will get projected by means of the digicam. For a full-screen 2D overlay like this one, that may be a waste — you’re preventing the 3D pipeline to do a 2D factor. The cleanest resolution is to skip the projection fully and write instantly into normalized machine coordinates.

The vertex shader does precisely that:

various vec2 vUv;
void most important() {
    vUv = uv;
    // ✨ NDC MAGIC: Ignore projectionMatrix and modelViewMatrix.
    // Place the vertices instantly on the 2D display.
    gl_Position = vec4(place.xy, 0.0, 1.0);
}

By assigning gl_Position straight from place.xy, the quad is pinned to the display no matter what the digicam is doing. No projection, no transforms, no surprises when the hero scene strikes round beneath. The overlay is of the positioning however outdoors the 3D house, which is strictly what you desire a contact menu to be.

The Fragment: Ink That Behaves Like Ink

The growth itself is pushed by fractal Brownian movement (fBM) over simplex noise, with two inputs shaping the texture: uHover for idle respiratory and uClick for the precise opening.

float noise = fbm(vUv * 4.0 - uTime * 0.4);

float radius = (uHover * 0.45) + (uClick * 4.5);

// ✨ ORGANIC MAGIC:
// As you click on, noise impacts the perimeters extra strongly,
// simulating ink "splashing" because it expands rapidly.
float dynamicNoise = noise * (0.8 + uClick * 1.5);
float edge = dist + dynamicNoise;

// ✨ DYNAMIC SOFTENING:
// At relaxation (hover), the sting is extra outlined.
// Whereas touring throughout the display, the sting will get softer and blurrier.
float softness = 1.2 + (uClick * 1.0);

float alpha = 1.0 - smoothstep(radius - softness, radius, edge);

Two selections right here that I feel make the impact really feel alive:

1. Dynamic noise amplitude. At relaxation, the noise is delicate — the ink “breathes” quietly across the button. On click on, the noise amplitude scales up with uClick, which makes the perimeters splash outward somewhat than increase cleanly. Ink in the true world doesn’t advance in an ideal circle. This shader doesn’t both.
2. Dynamic softness. The sting is crisp when the menu is idle and softer when it’s actively spreading. That matches how your eye reads movement: fast-moving issues blur, nonetheless issues sharpen. The shader bakes that bodily instinct instantly into the smoothstep vary.

None of that is technically troublesome. It’s a small shader. However the purpose I’m displaying it’s that these are the sorts of particulars that separate an impact that appears generated from one that appears crafted. A contact button might have been a dropdown. As an alternative, it grew to become one in all my favourite ten seconds in the entire web site.

Closing Ideas

Someplace between month one and month three of this construct, I ended fascinated with the positioning as a portfolio in any respect. It grew to become a small world I used to be tending, including rooms to, cleansing up, strolling by means of to see if it nonetheless felt trustworthy. The code was the instrument. The world was the purpose. And the world existed to hold one thing I truly wished to provide away.

In case you stroll away from this text with one factor, I hope it’s this: your creativity comes from someplace. In my life, I imagine it comes from a Creator who has been affected person with me, who has good plans for me even within the seasons I walked away from Him, and who has at all times been there after I got here again. Something value something in what you simply learn got here from Him, not from me.

Thanks for studying. Thanks to Manoela and the Codrops workforce for giving this work a spot to land. And to each developer and designer on the market nonetheless preventing for craft — maintain going. Construct one thing you truly wish to share. The work will probably be higher, and so will you.

“I’ll reward you, Lord, with all my coronary heart; I’ll inform of all of the marvelous issues you may have performed.”
— Psalm 9:1