An Awwwards-level portfolio website

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!