Building my first-ever portfolio website

Building my first-ever portfolio website

Shoutout to Fireship.io, the only tech channel I keep binging on (even in the bathroom), for introducing me to threejs, and also because I'm using their video thumbnail as my cover.

Every job form in this hiring/layoff frenzy market has a section - "Personal Website". Initially, I thought that just meant I should link my GitHub here. But from online content, I quickly learned how this 'portfolio' is a way to set yourself apart from the crowd.

For context, I am a Master's in CS student in the US, soon graduating - which basically translates to an unemployed bloke diving headfirst into the crazy job market. I am going to be honest with you, I do have a job to look forward to - a return offer from a company I interned in the summer of 2023. Before I get called out, if you've been on Reddit (especially r/csmajors), you know the chances of people getting their offers rescinded are pretty decent, unfortunately. That's what makes me paranoid, and that's why I want to be able to set myself apart, in case a situation like this befalls upon me. My fear is fuelled by the insane student debt I have accumulated over the past two years and wanting to pay it back ASAP and then build on it.

Enough about me. Let's talk tech. While researching a little on how easily I could make portfolio websites while doing a bit of challenging development, and with minimal experience in frontend dev, I came across the amazing websites people have created with threejs, I knew I had to ride that wave.

Now you can't blame me, I turned to the best resource currently available right now - Chatgpt. I explained to it the project idea, with detailed prompts. Let's explain it here so that we can refer to it during my entire journey. It is as follows -

" When a user enters the website, they can control a 3D aeroplane. This aeroplane can move around the scene freely (third-person view). The scene - is basically an animated terrain with different landing zones. The user can control the aircraft (realistically) and make it land on the different LZs. These LZs correspond to different experiences and projects I have contributed to. Once they're at the LZ, they can access those experiences and projects."

Sounds fun and easy right? Maybe it isn't. Maybe I'll change it in the future to something more simple. Because an idea that requires a paragraph to explain, isn't really that simple is it? But that's the idea we're going with for now.

My initial approach was to set a basic scene, which would obviously be a placeholder, and import a 3D aeroplane (using GLTF, downloaded from SketchFab, very cool). After doing that, I wanted to deal with the mechanics of flight movement and camera movements. Well, flight movements are relatively simple - The aeroplane is initially in motion, but when "W" is pressed and held, it should accelerate, and decelerate until it reaches the minimum speed when "S" is pressed and held. When the user lifts their finger off the "W", it should maintain the speed it reached after accelerating. For directions, I wanted to incorporate mouse movement. Not too complex.

After setting all this up properly, with Chatgpt writing 90% of the code, I was optimistic. But then I got to camera movements. And that's when my confidence plummeted. The idea was to have a third-person camera - which would be fixed a little away from the tail of the aeroplane and would keep moving with the aeroplane. For the love of god, I CANNOT nail this. I drew up plans, and read manuals but there wasn't an easy way to make the camera follow the object. I'm second-guessing the way I am cheating and writing code. But I have too much time on my hands to give up now.

As per the next plan - find more tutorials. I am really entertaining the possibility of starting this project from scratch but let's say my mind is not willing to throw away all the code that's done. I'll keep you posted. Cheers!