@trung_nguyen

it’s been a hot minute since the last log. i went home for the holidays and fully unplugged — didn’t touch the repo for like 1 week, so the portfolio just sat there gathering dust. anyway i’m back and i actually shipped a good chunk, so let me catch up.

manifesto: a quiet moment on the site, no webgpu, just four lines of text. i split them with SplitText and clip a gray→ink gradient to the glyphs, then scroll slides the background so the dark ink fills each line in from the left. once they’re all dark the whole section fades to ink and the text flips to cream — it inverts into the footer palette right before it unpins. annoying bug: the pin adds 300% scroll and the footer triggers (created earlier) fired too early, so i sort into document order and refresh after the split.

footer: classic big mailto headline with a hover underline wipe, socials, and a bottom bar. everything reveals on one timeline when it scrolls in. back-to-top routes through lenis for a smooth scroll with an instant fallback.

footer image: the starry-night img has a tiny webgpu canvas on top that copies its object-cover crop, so mousing over it warps the pixels with a little chromatic aberration. the distortion is a cpu grid (base 15, capped 128) — splat pointer velocity into nearby cells, relax back to zero each frame, write it into an 8-bit RG DataTexture the shader samples. and it’s lazy: an IntersectionObserver only mounts the canvas near the viewport, frameloop off when it’s not on screen, plain  as the fallback. costs nothing till you scroll to it.

featured work section: the design is the classic table: four columns — website, category, services, year — with a massive “Featured Work” headline on top. i made the title do a little type trick: “Featured” is just an outline (transparent fill + text-stroke) and “Work” is solid, both bold and stretched to the full width of the screen. cheap to render, looks like i tried way harder than i did.

the fun part is the hover. when you mouse over a row, a preview image of that project fades in and follows your cursor around. i used gsap quickTo for the x/y so the image trails the mouse with this smooth lag instead of being glued to it, and i feed the horizontal mouse velocity into a slight rotation so the card tilts in the direction you’re moving. tiny detail, sells the whole thing. also learned the hard way that you need to snap the preview to the cursor BEFORE the first fade-in, otherwise it flies in from wherever it was last time. one gsap.set and the jank is gone.

the annoying part: this section doesn’t live on the page like a normal section. it sits inside the techstack pin from #4, behind that ink parabola that swallows the screen. so a regular scrolltrigger inside it just fires at the wrong time — the element is pinned at the top of the viewport the entire time, the trigger math is meaningless. took me a minute to accept that the reveal can’t belong to the section at all. it has to be part of the parent timeline. so right after the parabola covers everything, the same scrub that drove the logos now raises the title and cascades the rows in one by one.

projects in the table are mock data with placeholder svgs for now. the site has a featured work section and no actual featured work. next step is filling it with real projects.

so the face particles look great on my machine but the second i opened the site on a cheaper laptop my heart sank. it was chugging. like slideshow chugging. and this whole project has one rule i promised myself: silky on high-end, but still actually usable on low-end. so a section that only runs well on my own gpu is basically a broken section.

i tried everything to save it. dropped the particle count way down, then dropped it again. wired up the frameloop so the canvas only renders when it’s actually on screen and pauses when you scroll away or tab out. all of that helped a bit but not enough — it was still the heaviest thing on the page by a mile and the low-end numbers barely moved. at some point you have to admit the effect just wants more gpu than i’m allowed to spend.

so i’m parking the face for now (code’s still there, i’ll come back to it) and building out the tech stack section instead, something that leans on scroll and layout instead of the gpu.

the idea: your logos stream across the screen as you scroll while a big “Techstack” headline sits locked in the center. but they don’t just slide past in a straight line — each card arcs above or below the center line and curves around the headline, like the text has gravity and the logos are in orbit around it. cards on even positions bend one way, odd ones bend the other, so it reads as this constant weave flowing past the title.

the fun part is the math is all cpu, basically free. the row scrolls horizontally on a pinned scrolltrigger, and every frame i just measure where each card is relative to the headline. the closer a card gets to the title, the more it lifts off the center line to clear it (so nothing ever overlaps the text), and it eases back down as it leaves — that’s the orbit curve. i also give cards a little scale bump right as they cross the middle of the screen so there’s a soft focal point in the center. no shaders, no particles, no webgpu. runs smooth everywhere, which is the whole point.

About me section time. I went looking at how other people do theirs and it’s always the same move: a nice portrait photo, big and confident. which is a problem for me because… I don’t have a single cool picture of myself lol. i’m a bit camera shy and every photo i have looks like a hostage situation.

So instead of just taking a better photo like a normal person, my brain went “why not 3d scan your face?”. found out you can do it with just a phone camera, downloaded polycam, walked around my own head like an idiot for 10 minutes and… it looked TERRIBLE. like melted wax figure terrible. i felt genuinely bad about it ngl.

So i did what i always do when i feel bad: dumb scrolling through awwwards sites of the day. and one of them saved me — a site with a 3d face made entirely of particles. no skin, no texture, just points floating in space. that was it.

Plain particles were kinda monotonous though, everything just sat there dead still. so i ran curl noise over the cloud and now the whole surface drifts like it’s breathing. instant life.

of course nothing works first try. my first version had a depth test problem where the BACK of my head was blending through my face, so i had eyes and hair occupying the same pixels :)). ended up going into blender and rendering out a depth image of just the front of my face, then rebuilt the 3d from that depth map instead of the raw scan. each particle samples the portrait for its position, brightness and size, and instead of a real depth-of-field pass i just fade particles the further they sit from a focus plane — looks like bokeh, costs nothing.

The section hooks into the opening sequence from #2: the shutter bar squares up, expands out to the screen edges and opens straight onto the face. dither background fades itself out on the way so the particles get a clean dark void to float in.

Ok so this section basically ate my whole week lol. like 15 hours for ONE page?? and the crazy part is i wasn’t even doing design, i just kept trying random ideas until one felt right.
The whole thing is based on “The Creation of Adam” (that famous painting with the two hands almost touching). I thought it’d be sick to have two hands slide in from both sides while the hero closes, kinda like the split second before the fingers touch.i built the hands like 3 times ngl:

• first in 3d with three.js. looked cool but felt way too heavy and kinda too on the nose
• then i did an ascii version where the letters react to your mouse. way more my style but still not it
• and finally pixels, which is the one i kept. each hand is a grid of pixels that twinkle by themselves and light up when you hover, and the pixel sizes give it this little depth thing.
  This one just clickedalso threw in two lines of giant scrolling text with gsap, hellos on top and a lil manifesto on the bottom, they slide in when the shutter covers the hero.
  The one thing killing me rn is the colors. they’re just kinda mid honestly. so i think i’m gonna do some research, and repaint the whole site properly.

I’ve been working on my portfolio for quite some time now. It’s not just about coding — it also involves design, research, and many other details. Choosing the right color palette, fonts, and sizes turned out to be much harder than I expected.
Even though the planning phase took a while, I’ve finally started coding. So far, I’ve completed the preloader and the hero section.

Preloader

The preloader features a smooth loading bar. Once it fills up, it expands and fades out gracefully, revealing the hero section with a nice fade-in transition.

Hero Section (My Favorite Part!)

This is the section I’m most proud of. I used GSAP for all the text animations and Three.js for the interactive background.
The background combines a dithered Bayer effect with a beautiful liquid flow simulation that reacts to mouse movement. The trailing effect feels incredibly smooth and immersive — it really makes the whole hero section feel special and unique.
I already have plans for the upcoming sections and I’m really excited to bring them to life!

ok it moves now. and honestly it slaps.
didnt end up adding a car, turns out you dont need one. dropped the camera real low like youre sitting in a cockpit and just scroll the whole world toward you instead of moving forward. made two copies of the terrain and when one slides behind you it teleports back to the horizon, so the road never ends. you cant tell its only two chunks looping which is the whole trick.
steering is just the mouse. moving it left/right slides the camera into the next lane and banks it a little so it feels like the car is leaning into the turn. added a tiny bit of yaw too so the world tilts with you. small thing but it makes it feel real.best part is the turbo. hold left click and everything lerps into warp mode, the pink grid goes solar gold, the cyan stars stretch into red hyperdrive streaks, the sun flares crimson, and the whole camera starts rumbling like the engine cant take it. cruise is a chill 0.35, turbo overclocks to like 12x. let go and it eases back down to vibing speed. the lerp on everything is what sells it, nothing snaps.threw a HUD on top in orbitron, fake telemetry that flips to WARP_DRIVE ENGAGED when you boost. pure decoration but it ties the whole synthwave thing together.
thats the project. simple little infinite cyber-drive. no engine, no car model, just shaders and loops and a mouse. exactly the vibe i wanted.

today i just started building a vaporwave driving scene.

got react three fiber running on webgpu. the road is just a flat plane but i used some shader magic to push the edges up so they look like neon pink mountains while the middle stays flat for driving. then i threw a big glowy sun in the back and some floating particles to make it feel alive. sunset lighting ties it all together

next im tryna make it actually move so it feels like youre driving. maybe add a car idk.

last day was a grind, added the dynamic background transitions so the sky changes between chapters, did parallax for some depth (this little touch makes it feel so much more alive), and added the nav buttons so u can actually jump between scenes instead of just scrolling.

new scene!! the ocean one with the island. this was probably the most fun so far. made an ocean wrapping around the island, added foam near the shore and scattered some rocks around so it doesnt look empty.

improved the water movement too, reused some stuff from the lake which saved me. coastal mountains in the back tie it together. starting to feel like a real place which is sick

added a LAKE today. the meadow scene needed water and omg the reflections were a nightmare. like genuinely the water looked like cursed plastic for hours before i got it looking semi decent.

stuff i did:

added the lake
water reflections + surface (the pain)
blended the terrain around the shore so it doesnt just clip into the water
threw in some fog for depth, instantly made it look 10x better honestly
fog is so underrated it hides all my sins

2 of the 4 scenes are basically done now lets gooo. spent today on lighting mostly, the first version looked super flat and depressing so i messed with it til it had some actual mood to it.

also kept tweaking materials (probably spent too long on this, i keep going back and changing tiny things nobody will notice). and i adjusted the camera framing so each scene actually looks composed n not random. feeling good about progress

short one today, was kinda busy w school. mostly worked on the transitions between sections, getting the camera to glide instead of snapping. took way longer than expected, transitions are deceptively annoying. polished a few other things and called it.

todays the day it started feeling like an actual project. did the clouds!! they’re procedural which sounds fancy but i basically just spent 4 hours fighting with noise functions until something cloud shaped appeared.

animated them with TSL (still kinda new to me ngl) and wrote a custom material so they render right. also went back n refined the mountain peaks cause they looked too smooth/fake before. the vibe is slowly coming together, im hyped

ok so i finally started the three.js thing ive been putting off for like 2 weeks lol. spent most of today just getting the boilerplate going, canvas + camera + renderer blah blah. honestly the boring part but u gotta do it.

got my first glb model loaded in and it showed up as a giant black blob until i realized i had zero lights in the scene classic. added some lighting and boom theres my mountain. also made the canvas resize properly cause i hate when stuff looks stretched on different screens.

not much to look at yet but the bones are there. excited to actually make it pretty later