I Built a 3D Developer Portfolio Website // Three.js + React + Tailwind

Host your website with Hostinger (use code FORREST): hostinger.com/forrestknight
I built myself a 3D developer portfolio website to replace my minimal portfolio and compliment my GitHub profile page and terminal website. This is a custom website I've been wanting to build for a while, that has the "wow" factor of my terminal website thanks to three.js 3D graphics, interactive animations, and parallax, while maintaining an easy-to-use and intuitive design. This website gives a prospective client or employer a quick look at me and my work as a developer, showing them what I can do with not just the projects listed, but the website itself. And yes, I know the parallax gets tricky when shrinking the window, but I'll fix that... one day... maybe. Maybe one of y'all can fix it for me.
If you're reading this part, let me know what you think of this new video style I'm trying out, and comment "SPACEMAN!!!" below.
Technologies:
Vite - Build tool for the boilerplate and structure
JavaScript - Programming language
React - JavaScript library for building user interfaces
Tailwind - CSS framework
Three.js - Animated 3D graphics
Framer Motion - Interactive animations
Hostinger - Web hosting platform
GitHub - Version control & CI/CD
Extra Resources:
Code Repo by me - github.com/ForrestKnight/3d-p...
Spaceman by wallmasterr - sketchfab.com/3d-models/tenhu...
Planet Surface by jongjawi - stock.adobe.com/images/landsc...
Position Animation by Teshank - github.com/teshank2137/portfolio
If you're a developer, sign up to my free newsletter Dev Notes 👉 www.devnotesdaily.com/
If you're a student, checkout my Notion template Studious: notionstudent.com
Don't know why you'd want to follow me on other socials. I don't even post. But here you go.
🐱‍🚀 GitHub: github.com/forrestknight
🐦 Twitter: / forrestpknight
💼 LinkedIn: / forrestpknight
📸 Instagram: / forrestpknight

[@dennisdegraphicsdynamo_999]

the tutorial will generate more views than you expected

[@h4unt3dfx]

I teach a personal development programming class at a local university (not towards a degree) and I always refer people to your KZbin. The new site looks awesome. Great stuff, man!

[@user-ri1wu3ll8k]

WoW, your video's are always good, but this one is another level

[@negasonicteenagewarhead]

And I cloned it

[@skillsnwokoloanthony7557]

😂

[@seekknowledge1928]

😂😂

[@protojerry]

Really awesome stuff. I was running out of ideas for a game website, this just nudged me in the right direction. Love the presentation style! Can't wait for a full tutorial on this ^^

[@amenu.youtube]

I’m interested to the project but I like the way the guy talk easygoing and make it fun. Honestly keep it up like that bro.

[@DJRanoia]

I love the layered scroll.

[@kylebaker8548]

Forrest, been subscribed for some time now. Love your sense of humor. Please do a full tutorial!

[@terrellp133]

Wow this was amazing, I lack confidence when creating a project so much that I even don't start haha, but watching videos like this and being able to pause and add my own creativity to it is amazing and gives me more confidence when you even state how you don't know what you're doing. I used to use Photoshop and Illistrator like 17 years ago almost everyday on internet forums and used to hack video games but now I see how beneficial it is to just go through a walkthrough similar to this and to keep watching walkthroughs as well. I always enjoyed your content thank you for making this!

[@ypathan420]

love the new style

[@lic.sebastianrodrigonajle964]

You blew my head up bro. Literally. Congrats Bro!! you are a Genius!! Keep going!! Greets from Argentina!!

[@chrisjones8829]

This is amazing. You are amazing. Very inspiring and motivating, as well.

[@ikoniiick]

I love this style of presentation. Excellent video Forrest.

[@theailab754]

I honestly didn’t know I needed a video like this

[@Joggll]

Man that's such a good video. It really inspires

[@YannisBABINENI]

We definitely need the tutorial for this website. Amazing work dude !!

[@TannerBarcelos]

New style goes hard

[@GrahamBillington]

I loved this format

[@rayanfernandes2631]

That's an awesome project bro, Just keep making more

[@Iamzeku]

had me cracking up the whole vid! LOVE IT.

[@instiinct_defi]

Great video! Definitely think your tutorial will go very well.

[@mohamedazizkefi5533]

I think this is the first Time commenting on a video / tutorial on youtube ! AND DAMN MY MAN YOU NAILED IT ! Sick of all these youtubers acting like shit is easy and saying things we don't really understand and they don't break out , but here you send the message : ALL of us are not 100% sure of wtf we are doing , but the we are doing it anyway , and the fact that we keep pushing toward doing it , even tho it might be confusing sometimes , this is all what programming is about !

[@wecanfixitnow]

WoW, you are the first and most effictive mentor for me....

[@sheilasharon2283]

first software engineering mentor i had 🔥

[@javifontalva7752]

I'd love to get the tutorial. KEEP IT UP!!!

[@KnuffelChiisai]

Looks really awesome

[@DARKLABIB]

ouu your videos are so interesting ...love to watch more

[@ariyoujahan9662]

It was amazing and fun.

[@Carlos-gj1wj]

Great video, thanks for sharing! 😁

[@alfianrsa]

best video i have watched so far

[@iamnotahuman2172]

earned my subscribe, that content is dope

[@isaacoyeniyi9117]

brooo! I thought this video was about 2 years old!!! Your content is nice. You have my subscribe. And you got 90k! 😂😂

[@dFuZe_Dev]

nice!!! very cool

[@user-ww4gz7wx4t]

The hero section or the parallax section is awesome, the rest seems i also can do it.

[@TomaNeagu]

Great Video!

[@anhngocle738]

omg, this is so genius

[@shahzadsheikh1459]

you are doing awesome

[@samirhilario1436]

Can’t wait for the tutorial

[@egedesolomon7454]

Who's this guy😂, learnt more than expected. Thanks mate 🙌

[@DustinYoung-dr4df]

Great style! Looking forward to more. Perhaps a missed opportunity to make your 3D character move more in 3D?

[@davida8216]

I commented this video(for KZbin algorithms) because this montage is so cool and I want everybody to see this

[@shuya89100]

Great Video, I hope a tutorial soon !

[@shridhar_singh]

Damn Forrest, this is amazing! Please do the tutorial

[@merabet.faycal]

You got it,amma be watching it every night . Just do it give it to uuus

[@icyrealm7]

Cool video!!

[@flwless3226]

Page looks great, i would love a tutorial i am trying to build my own personal / portfolio website with some 3D stuff right now, so the tutorial would come in handy

[@sairajpoojari2490]

Bro this is really great. If possible please make a complete tutorial

[@alextrotman9317]

I look forward to the tutorial

[@johno8760]

Whenever youre doing the tutorial, please provide helpful concepts for us to expand on these resources/tools so we can at least learn to apply it to our own ideas

[@ghofranedarragi5601]

amazing work ! full tutorial plzzz

[@SaifulIslam-pe3hn]

That tutorial will be ready awesome. You better be working on the tutorial.

[@SwapnaRoyGhosh]

Make a tutorial on easiest way to create parallax effect, it will be great to introduce us with a new js library also which make this stuff lots more easier...

[@vinitgirde]

Amazing

[@DKSubconscious]

Great video 👍 I’m 5 mins in and still wondering why you need react and vite though. Node, sass and a template engine with a json file acting as a fake db to pass into the templates if you want to get crazy would compile beautifully into static html and hardly any download time.

[@shivayramrathy300]

This looks great. We need a tutorial please🙏

[@LongThanh-xg5uf]

The theme you used is very beautiful, can I ask for its name?

[@hussainbhagat8855]

Gotta make the tut soon

[@sherumov6472]

100 percent representation of web developer

[@yousefosman8094]

I'm sharing this with everyone I know and their mother so we get the tutorial

[@pratheekr524]

"wham bam alakazam your 3D models IN MY RAM" -ForrestKnight

[@mushkansingh5757]

Full tutorial 🙌🙌

[@ayushmaangupta5956]

hell yeah man need the tutorial

[@somesh6216]

TUTORIAL GANG!

[@jameydyar2333]

I’d like to see the tutorial. I want to take a similar project with my personal website

[@lesamir2010]

Make the tutorial for this man. It's really cool and inspiring.

[@Lordmaryo]

Chop chop tutorial boy 👨🏽‍🍳

[@shahzadsheikh1459]

which software use for screen recording please tell me

[@kaushalkishore4661]

well sir i am very much waiting for the tutorial

[@GoodBalak]

As a backend dev I'm impressed. Any reason I shouldn't be? I feel like I should try learning this too.

[@joshr96]

Think you hit a quota on your contact form or something since it stopped working. So I'll just drop my quick message here... "Nice website! Enjoyed the video and gave me some inspiration for building out my own portfolio site." 🙂

[@ashutosh_tiwari]

Make a full tutorial bro with working contact section!!

[@juanmacias5922]

Nice Hero background. ;)

[@nipungrover7058]

You got 60 k so....i hope you keep your word

[@mohamedelbougrfaoui]

Man you make React JS looks super easy LOL

[@user-jt7ro7gq6i]

Well that was ahhhhhhh !!!!!!!!!!!!

[@marekcvoliga3813]

GIMME THE TUTORIAL U ARE REALLY GOOD AT THIS AND IM BEGGINER WHOS TRYING TO LEARN

[@alivdas2242]

make some tutorail vedios based on thre.js and react...it will be helpful to understand the new tecnologies on web-dev

[@craig9910]

SPACEMAN!!!

[@mandongpedroza7486]

50k views, time for the tut :))

[@TRLYx]

Good project name, but it needs more power. Could you kick up the 4d3d3d3?

[@rajaark5643]

Why are u not using typescript?

[@PetrandoRichard]

Why you install three.js and react-three/fiber if you never use them?

[@porettouqp2684]

64k views ,u gotta make that tutorial man😁

[@latakantsharma3134]

What icon theam you r using

[@quixxate8659]

I see a tutorial in my near future

[@benjidaniel5595]

If you’re going to make a 3D website and a video about, maybe make it actually show off the 3D, like having the 3D models rotate in a much more obvious way

[@amandubey5287]

Alritgh we need the tutorial please. And where is the live link ????

[@popnx]

im subscribing

[@ankitdas2197]

50k almost there

[@adsonmettler3046]

I will share this video to everyone, even my mom.. Tutorial pleeeeease!!

[@Arshiyasheoran]

YES YES YES

[@franzxd6903]

Yea it might not work on the mobile device. But otherwise really good job for a full stack dev !!

[@rappingtornado1417]

please what did he use to create the svg layers.

[@air-ick5578]

Adobe illustrator I think

[@primearchitech]

You are so funny lol. Hope you will do the tutorial. Cmon 50k views😊

[@_akiaura]

pls does anyone know what theme he uses?

[@user-yt4gx7ts7w]

I learn data science so no matter what is happening here but the VS Code theme ?

[@ep4r4]

Haz el tutorial, con gusto me lo veré.

[@adith_dosar]

Can this be made on Flask?

[@athaanggoro3974]

Kamu lucu, cara memberikan penjelasan sangat menyenangkan😂🎉

[@sethhollistah8504]

I hesitate to put some feedback because deez skillz still ain't shat but the sites a little laggy when I scroll by the spaceman and also the section about dev notes didn't actually link me to the dev notes newsletter but also I may just be stupid

[@DevSofo]

Plz do more 3d stuff videos