Tech stack and skills section
Contact me section
Ashievements section
Projects section
About me section
Home/landing section

Inspiration

Seemed like a fun hackathon to participate in after taking a break from my development side, also needed a portfolio website too and this seemed like the perfect opportunity to kill 2 birds with one stone while at the same time competing with others.

What it does

It's my personal portfolio site, but with a twist. The home page is a live 3D "Particle Nebula" (built with three.js) that you can move around with your mouse.

As you scroll down, you "fly out" of that 3D space, and the rest of my content fades in smoothly. It's got all the required sections: a bit about me, my main projects (with all the details), my tech skills, my coding achievements, and a full page of all my contact/profile links.

How I built it

It's just vanilla HTML, CSS, and JavaScript.

The star of the show is three.js, which runs the 3D particle scene.

For the fade-in-on-scroll animations, I used an IntersectionObserver. It's way more efficient than just checking the scroll position all the time.

There's also a simple scroll listener that adds a .scrolled class to the body. This is the trick I used to make the 3D canvas fade to the background so you can actually read the text.

Challenges we ran into

My biggest challenge was getting the 3D three.js canvas and the 2D HTML content to not hate each other.

The 3D canvas was just a giant, angry block that shoved all my text and projects off the screen. It was a long fight with position: fixed, z-index, and pointer-events to finally get the 2D content to scroll over the 3D background like it's supposed to.

Accomplishments that I'm proud of

I'm honestly just proud that it works. Getting a 3D library to fit nicely into a normal scrolling website (and not just be a full-screen demo) was totally new for me. I'm stoked with how it came out.

I built a portfolio from scratch that's 100% me, and it's a project I'd actually put in my portfolio

What we learned

I learned that IntersectionObserver is a total game-changer for scroll animations. It's so much cleaner. I also learned that while three.js is awesome, making it play nice with a normal, content-first website is way harder than it looks.

What's next for Portfolio

I'm definitely going to add the real video of my AI Dashcam project instead of the placeholder image. It would also be cool to make the 3D particles change color or react even more as you scroll to different sections.