That is the fifth model of my portfolio. This time, I took an actual break. I put all shopper tasks on maintain and at last gave myself some area.
Creativity took over: no briefs, no KPIs, no guidelines. Simply me, my concepts, and a number of code.
In at this time’s digital panorama, we frequently mistake “creativity” for a guidelines of developments: cursor followers, outsized sort, or flashy results. Whereas these outline the present aesthetic, I’ve realized that true creativity isn’t about following patterns. It’s about constructing a coherent narrative.
On this gentle, each animation stops being mere ornament and turns into a device in service of the story. This portfolio isn’t about textbook UX or taking part in it secure. It’s about standing out and breaking the sample.
My purpose is straightforward: if somebody closes the browser and nonetheless thinks about this web site… then I hit the goal.
The Blueprint: Mixing Cult Classics into Canvas
This isn’t a chilly resumé. It’s a chunk of me. That’s why I wished area for the life that occurs exterior work, past requirements and conventions.
I didn’t need only a clear checklist of tasks and a “contact me” button. I wished the remaining too: the human facet that normally stays hidden. I’m not the man who goes for a run within the morning. I’m a sofa man, the kind who spends evenings wrapped in a blanket, watching the identical film for the tenth time. And it’s precisely from these films that I drew inspiration. Those I can rewatch with out ever getting drained.
Talking of being human, my avatar was born as a joke within the fourth model of the positioning. At first it was simply an experiment to be taught Blender, however I obtained used to it. As we speak it’s a everlasting presence. It has its personal persona, it’s immediately recognizable, and it has change into an necessary a part of my private model.
Scene One: About Me
Amongst all of them, there’s one I by no means get bored with watching: Blade Runner, the 1982 authentic. A neo-noir masterpiece directed by Ridley Scott.
My portfolio begins proper there. The second you open the positioning, you’re pulled right into a scene impressed by the movie’s closing sequence: the long-lasting “Tears in Rain” monologue.
It’s pouring rain. Neon lights shimmer throughout puddles. Roy Batty sits on the rooftop, his voice cracking as he remembers the unbelievable issues he’s seen: “Assault ships on hearth off the shoulder of Orion…” Then, simply earlier than he fades away, he releases a white dove into the gray sky.
In these few seconds there’s all the things: deep melancholy, poetry, a flicker of hope, and that thick, moist, electrical cyberpunk ambiance that has all the time fascinated me.
I wished my portfolio to open like this. Not with a basic hero part. Not with a 180 pixels headline. However with this precise vibe. A picture that stays with you, similar to that monologue stays with anybody who loves the movie:
Since he’s an android, I beloved the concept that he wouldn’t keep static. I wished him to react like an actual online game character. Hover over the “About” button and he out of the blue lifts his head, curious. “What’s occurring?” he appears to ask.
On click on, the digital camera glides easily. The world round him dissolves, and he stays alone below the highlight. That’s the About web page.
Enjoyable reality: The rusty yellow signal on the constructing is the Japanese translation of “Giulio.”
Scene Two: Works
Then all the things adjustments. Within the second scene, the android finds himself once more. He rediscovers his energy, his skills, all the things he has constructed over time. He unleashes a robust, glowing power that cuts throughout the display. That explosion is the right metaphor for the abilities and experiences I’ve gathered by the years.
To seize this second, I stole an concept from Dragon Ball (sure, the cartoon). I used to be obsessive about it after I was a child. That reminiscence by no means light. The Tremendous Saiyan transformation, that precise prompt when the character releases all his hidden potential, was exactly what I wished to convey.
And when the transformation explodes, the tasks seem. As if the avatar, after unlocking his interior energy, was saying: “That is what I can do.”
A collection of tasks of every kind (those that meant one thing to me, that challenged me or taught me one thing necessary) seem.
Scene Three: Room of Reminiscences
Again within the early 2000s, after I launched the primary model of my portfolio, the guestbook web page was extremely standard. You shared your web site hyperlink and other people may depart you a message, a dedication, or only a easy hiya. I believed it was lovely, and I’m a bit unhappy it has nearly disappeared at this time.
So I made a decision to carry it again. In my very own approach.
I turned it into the Room of Reminiscences: an immersive room suspended in darkness, the place guests’ messages float by infinite area like fragments of sunshine.
The thought got here from an iconic scene in The Matrix (the unique 1999 one). Neo and Trinity enter the weapons program: an unlimited, sterile white warehouse with limitless racks that materialize out of nowhere.
I took that feeling of “limitless area” and flipped it fully. No white. Solely deep darkness, comfortable neon glows, and 1000’s of messages drifting slowly round you, like reminiscences suspended within the void.
A cyberpunk guestbook.
The identify “Room of Reminiscences” is instantly linked to the primary scene that impressed the entire portfolio (the one from Blade Runner). It echoes Roy Batty’s well-known final phrases earlier than he fades away: “All these moments can be misplaced in time, like tears in rain.”
Scene 4: Contact
I introduced again one other nice fantasy from my childhood: the DeLorean.
The melancholic ambiance of the primary scene returns like a comfortable echo. Identical delicate soundtrack, similar mild neon rain. Rain falls endlessly. The avatar stands there, again turned, respiratory slowly. Able to set off on some new journey.
You then see it coming, in silence. The DeLorean descends from the sky with a blue glow and lands softly. The door opens. The mission is over.
It’s time to go house.
The Inventive Course of
My job is being a developer, and an enormous a part of my work is discovering the precise workflow, one that mixes velocity and effectiveness. That’s why the design section was principally considering. I solely used Figma as my private notepad: post-its, screenshots, and fast concepts.
In spite of everything, since right here I’m each designer and developer in a single individual, I didn’t want shareable information or excellent co-working instruments. I may go straight from thought to code.
Most of my time was spent deciding which inspirations to carry to life, in what order they need to seem, and easy methods to join them. Every time an concept felt robust, I famous it down instantly to a digital post-it or a fast sketch.
Later, I’d pull up screenshots from films or concepts saved on Pinterest to begin making the customer’s journey concrete, even when solely in my head.
The Textual content Downside
I wished an immersive, cinematic expertise that also had clear 2D textual content. The difficulty appeared instantly: whenever you overlay textual content on a deep 3D scene, readability collapses. I didn’t wish to clear up it with the standard darkish overlay or semi-transparent background. That will break the immersion and create two separate “worlds”.
So I appeared for a compromise.
I introduced the textual content content material instantly into the 3D scene and unified all the things with shared results:
- mouse motion that influences each the setting and the textual content
- a delicate noise texture on the texts that makes them mix naturally with the background
This fashion, the textual content doesn’t cowl the scene. It turns into a part of the scene.
The Tech Stack
As I discussed earlier, for this portfolio I took an actual break from shopper work. I wished it to be the right likelihood to experiment with one thing new.
Blender
It’s essentially the most highly effective open-source software program on the earth for 3D modeling, texturing, rigging, and rendering. I used it to create and put together all of the fashions and scenes within the portfolio. Some fashions have been downloaded from Sketchfab, for instance, the avatar, the buildings and the DeLorean.
WebGPU
WebGPU drastically reduces the overhead between JavaScript and the GPU, delivering extra secure framerates and extra performant shaders. I explored Three.js’ shader language (TSL), which may compile to each WGSL and GLSL (with a WebGL fallback). It was a reasonably powerful technical leap, however extraordinarily satisfying.
React
Though you solely see the canvas aspect on display, the DOM continues to be working behind the scenes. It handles all of the sections, the textual content place inside them, and scroll habits. That’s why I used React and React Router.
Three.js
R3F is cool and handy, however in a earlier undertaking the combo between React’s declarative code and Three.js’ crucial nature drove me loopy. Some operations with THREE.RenderTarget have been notably tough. Realizing this portfolio would require a number of RenderTargets and full management over the rendering pipeline, I made a decision to return to pure Three.js to maintain all the things extra constant and below management.
GSAP
Merely irreplaceable. I used it for all scroll-based animations (together with the audio ones) and to create exact timelines on materials uniforms.
Lenis + Customized Logic for Scrolling
The principle scroll is dealt with by Lenis, clean and performant. For snapping between sections, although, I didn’t depend on Lenis Snap or CSS Snap. A 50% viewport peak threshold felt like an impediment for the UX. So I wrote a customized logic that triggers the scene change at 30% of the viewport peak. Now the transition feels way more pure and intuitive.
Monorepo
Because it’s a single-page expertise with 4 Three.js scenes stacked on prime of one another, I organized all the things with Turborepo.
This allowed me to work on every scene independently, with out unnecessarily loading belongings from the others, whereas nonetheless sharing lessons and belongings throughout the undertaking.
/apps
├── about
├── contact
├── doc
├── folio-2026 <- full undertaking for manufacturing
├── room-of-memories
└── works
/ packages
├── browser-location
├── content material
├── eslint-config
├── expertise
├── menu
├── prettier-config
├── assets
├── part
├── section-contact
├── section-guestbook
├── section-loader
├── section-works
├── shared
├── textual content
└── ts-configSoundtrack
I wished the portfolio to hold the identical melancholic, neo-noir soul as Vangelis’ “Tears in Rain.” That synth rain, that futuristic nostalgia that has all the time struck me.
The issue? My sound design abilities are mainly non-existent. I cease at trimming and Audacity’s preset results.
So I turned to AI. I used Suno to generate the ambiance I had in thoughts. I’ve to be sincere: it wasn’t an thrilling expertise. Suno turned out to be fairly restricted and repetitive. To get even near what I wished, I needed to write dozens of prompts, tweaks, and variations. A protracted and considerably irritating course of.
Ultimately although, a monitor got here out that works. Deep, atmospheric, with that retro-futuristic taste I used to be on the lookout for. It’s not Vangelis, nevertheless it completely captures the temper of my android.
Technical Hurdles
Rendering pipeline
The entire thing is contained inside a THREE.Scene managed by the SectionTransition class.
SectionTransition additionally holds a THREE.OrthographicCamera and a THREE.PostProcessing object. On each replace, it calls the replace of 1 or two scenes (relying on whether or not a scene transition is going on or not).
Every Part object incorporates all the weather of that part: the avatar, the DeLorean, the buildings… and instantiates its personal TextScene. One per Part, in order that they’re all affected by the transitions between sections.
The TextScene object takes care of making and updating all of the 2D parts like texts and buttons. It additionally creates the WatercolorBrush object, which, utilizing a ping/pong accumulator approach, information the mouse motion historical past and shops it in a low-resolution texture.
TextScene then makes use of the feel generated by WatercolorBrush to distort the UVs of the texts and barely alter their brightness. The ultimate result’s saved into one other texture.
The Part object applies varied post-processing results to its scene and blends the scene’s output with the feel coming from TextScene.
Lastly, SectionTransition takes the output textures from one (or two) sections to create the graceful transition impact between scenes.
Part transition
Discovering the transition between sections that I preferred essentially the most took a number of time and lots of makes an attempt, as a result of I didn’t have a transparent one in thoughts.
This transition jogged my memory of the helicopter within the film The Matrix when it crashes into the constructing, creating that shockwave that exposed the digital nature of the Matrix.
Yuri Artiukh’s video, “Shader Picture Transition” was an enormous assist in creating this transition:
The shader handles the transition between two textures, A and B, utilizing masks and multiplier bands that transfer from backside to prime (when scrolling down). As a substitute of a clear line, the masks is made irregular utilizing a perlin noise, which causes the transition to progress in another way at each level.
In the course of the transition, a bounce impact is launched: an extra band designed to multiply these irregularities, making the motion really feel extra dynamic. Across the transition entrance, a UV distortion (lens-like impact) is utilized inside a wider band; this causes all the things close to the sting to deform extra intensely, whereas areas additional away stay secure.
Moreover, scrolling triggers an additional UV displacement and a slight velocity-based zoom-out. Lastly, close to the middle, a delicate RGB break up (chromatic aberration) is added to realize a extra “glitchy/chromatic” look.
Belongings loader
For the positioning loading, I selected to optimize the belongings as a lot as attainable and load all the things upfront. This method let me significantly simplify the loading logic and keep away from any unwanted effects attributable to lacking belongings. The complete expertise, together with 3D fashions and textures, clocks in at simply 12.5 MB.
The belongings lists are outlined globally and likewise on the particular person part degree. Every thing is dealt with by a single THREE.LoadingManager, which robotically manages the progress proportion as properly.
Dolly animation
When the customer presses Enter, a digital camera animation launches and catapults them straight into the primary scene. It’s that spine-tingling motion you typically see in films: the Dolly Zoom, often known as the Vertigo Impact. Whereas the digital camera gently strikes towards the topic, the sphere of view slowly widens. The result’s that the background appears to “breathe” and develop, whereas the topic stays completely within the foreground.
In a 3D setting it’s technically fairly easy to realize, however visually it delivers a extremely satisfying influence. That’s precisely why I selected it because the entry level to the portfolio: slightly cinematic punch.
Android animations
The avatar assumes totally different poses all through the positioning’s sections. Animating such a fancy object requires a particular execution pipeline: an armature (bones) is added to the 3D mannequin. This course of known as rigging. Utilizing the Weight Portray device, every bone’s affect is mapped to particular vertices to make sure synchronized and fluid deformation.
Then, animations are generated as Animation Actions on the timeline utilizing Blender’s Dope Sheet panel. To make sure compatibility with THREE.js, these actions should be despatched to the NLA Editor utilizing the Push Down perform. The mannequin is exported in the usual .glb format. As soon as imported, the THREE.AnimationMixer object accesses the out there THREE.AnimationClip information, permitting for exact playback management.
Along with controlling animation playback, you may fade two animations and programmatically handle the progress of every particular person AnimationAction.
The Skyway
There isn’t any cyberpunk scene with out flying automobiles. In my case, they soar between skyscrapers proper within the opening scene. The automobiles within the background of the primary scene are dealt with as a THREE.InstancedMesh with solely 100 cases. The geometry of the automobiles is all the time the identical and really primary; because the bokeh impact utilized in post-processing blurs them out, losing polygons could be pointless.
As soon as the flying automobiles have been created, I needed to construct their path. For the reason that skyscrapers have been organized in Blender, I created a curve inside the software program to hint the trajectory for the automobiles.
Utilizing a Blender plugin, I exported the checklist of curve factors and imported them into the app, changing them right into a THREE.CatmullRomCurve3 parametric curve. At this level, I constructed a perform that returns the coordinates and the tangent at any given proportion alongside the curve. I then set an offset for every automobiles in each course and unfold them throughout the complete path. As soon as they attain the tip of the route, they loop again to the start.
I used the identical approach for the flying police automobile, too.
Optimizations
In a single-page software that includes 4 totally different scenes, optimization is important.
Belongings
All belongings should be optimized to save lots of bandwidth. GLTF fashions with supplies and animations can simply change into heavy. Due to this, all fashions move by a customized gltf-transform pipeline, which simplifies the geometry and downsizes textures to a most decision of 1024px.
The 3D fashions are ultimately transformed to KTX2, using {hardware} compression (Foundation Common) supported instantly by GPUs. This ensures textures stay compressed even when loaded into reminiscence, considerably decreasing VRAM utilization. Moreover, textures and different photographs are compressed utilizing the AVIF format.
Replace of the sections
The location’s scroll place determines which scene ought to replace and render. Ideally, just one scene is energetic at a time, or two throughout a transition. That is basic to keep away from working the render loop and post-processing for scenes that aren’t at present seen on display.
Shaders e draw calls
A trick to keep away from overloading the shaders is to bake noise features right into a texture and pattern that texture as a substitute of calculating the noise perform at runtime. Whereas this method has its limits, by scaling and offsetting the feel UVs, it’s typically attainable to realize outcomes almost similar to a real noise perform. On this undertaking, I managed to keep away from executing a single noise perform at runtime by utilizing solely three textures: Perlin noise, Fractional Brownian Movement (fBm), and Random noise.
Lastly, I centered closely on optimizing draw calls. Rain, automobiles, buildings, and lots of different objects are applied as InstancedMesh, permitting the GPU to deal with their transformations and translations in a single draw name.
Conclusion
Firstly of the undertaking I had many concepts however no closing design. To optimize my time, I selected to work instantly on the code. This technique proved efficient because it sped up improvement. Nevertheless, in some instances, I needed to rewrite sure elements after testing their performance. With interactive web sites, it’s important to check options early to make sure you are heading in the right direction.
Regardless of these challenges, I’m very glad with the ultimate consequence. The suggestions I’ve acquired thus far has been solely constructive.
I discover it thrilling to learn the messages within the Room of Reminiscences part. There are at present a number of hundred, principally greetings. I’ve shared a couple of beneath that notably stood out to me.
“That is higher than spaghetti bolognese!”
“That is the very best web site i’ve seen until at this time. I’ve no phrases to clarify how this web site has impressed me to do extra artistic work.”
“Thanks for proving people have been price designing”
“Wonderful Web site man , by no means ever thought off – extremely artistic and all the things matches – even the sound. Kudos man actually 🙌🙌🔥🔥”
“No Feedback about The Work Thanks For this Such a Creativity Work, Phrases won’t ever describe this Work. However i say that is extra THAN AMAZING”
“This makes me consider that i can create what I’m at present struggling to make it merely takes persistence and follow becuase that is wonderful man.”
“Is that this the best function I’ve seen on a portfolio? YES.
Who doesn’t like facet quests.”
“For i’m an Everlasting being dwelling in limitless solitude, trapped on this limitless void of Information.”
“have you ever seen the sky? i wish to dwell everytime i see it”
Because of everybody leaving a reminiscence, it’ll be enjoyable to learn them in twenty years 🙂
When you have any questions or are simply curious, I invite you to observe me on social media. I can be glad to reply your questions and join with you.
