I Built a 3D Developer Portfolio Website // Three.js + React + Tailwind
HTML-код
- Опубликовано: 30 май 2024
- 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
the tutorial will generate more views than you expected
WoW, your video's are always good, but this one is another level
I teach a personal development programming class at a local university (not towards a degree) and I always refer people to your RUclips. The new site looks awesome. Great stuff, man!
And I cloned it
😂
😂😂
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 ^^
I love the layered scroll.
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.
I love this style of presentation. Excellent video Forrest.
love the new style
I honestly didn’t know I needed a video like this
Forrest, been subscribed for some time now. Love your sense of humor. Please do a full tutorial!
This is amazing. You are amazing. Very inspiring and motivating, as well.
You blew my head up bro. Literally. Congrats Bro!! you are a Genius!! Keep going!! Greets from Argentina!!
I loved this format
New style goes hard
had me cracking up the whole vid! LOVE IT.
Man that's such a good video. It really inspires
That's an awesome project bro, Just keep making more
We definitely need the tutorial for this website. Amazing work dude !!
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!
Great video! Definitely think your tutorial will go very well.
ouu your videos are so interesting ...love to watch more
WoW, you are the first and most effictive mentor for me....
first software engineering mentor i had 🔥
best video i have watched so far
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 !
Looks really awesome
Great video, thanks for sharing! 😁
I'd love to get the tutorial. KEEP IT UP!!!
I commented this video(for RUclips algorithms) because this montage is so cool and I want everybody to see this
It was amazing and fun.
omg, this is so genius
Can’t wait for the tutorial
earned my subscribe, that content is dope
The hero section or the parallax section is awesome, the rest seems i also can do it.
You got it,amma be watching it every night . Just do it give it to uuus
you are doing awesome
Great Video, I hope a tutorial soon !
Who's this guy😂, learnt more than expected. Thanks mate 🙌
Great Video!
nice!!! very cool
Damn Forrest, this is amazing! Please do the tutorial
I look forward to the tutorial
brooo!
I thought this video was about 2 years old!!!
Your content is nice.
You have my subscribe.
And you got 90k! 😂😂
Bro this is really great. If possible please make a complete tutorial
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
Cool video!!
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
100 percent representation of web developer
That tutorial will be ready awesome. You better be working on the tutorial.
Gotta make the tut soon
I’d like to see the tutorial. I want to take a similar project with my personal website
amazing work ! full tutorial plzzz
Great style! Looking forward to more. Perhaps a missed opportunity to make your 3D character move more in 3D?
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.
I'm sharing this with everyone I know and their mother so we get the tutorial
Amazing
This looks great. We need a tutorial please🙏
TUTORIAL GANG!
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...
hell yeah man need the tutorial
Full tutorial 🙌🙌
well sir i am very much waiting for the tutorial
Well that was ahhhhhhh !!!!!!!!!!!!
Make the tutorial for this man. It's really cool and inspiring.
The theme you used is very beautiful, can I ask for its name?
Chop chop tutorial boy 👨🏽🍳
You got 60 k so....i hope you keep your word
Make a full tutorial bro with working contact section!!
As a backend dev I'm impressed. Any reason I shouldn't be?
I feel like I should try learning this too.
SPACEMAN!!!
Nice Hero background. ;)
"wham bam alakazam your 3D models IN MY RAM"
-ForrestKnight
YES YES YES
GIMME THE TUTORIAL U ARE REALLY GOOD AT THIS AND IM BEGGINER WHOS TRYING TO LEARN
Good project name, but it needs more power.
Could you kick up the 4d3d3d3?
can you make full tutorial on it
Haz el tutorial, con gusto me lo veré.
make some tutorail vedios based on thre.js and react...it will be helpful to understand the new tecnologies on web-dev
I see a tutorial in my near future
im subscribing
Alritgh we need the tutorial please. And where is the live link ????
which software use for screen recording please tell me
Man you make React JS looks super easy LOL
50k almost there
Waiting
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
50k views, time for the tut :))
pls does anyone know what theme he uses?
What icon theam you r using
I learn data science so no matter what is happening here but the VS Code theme ?
I need that tuto
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."
🙂
I need the turtorial
❤
I will share this video to everyone, even my mom.. Tutorial pleeeeease!!
Why are u not using typescript?
64k views ,u gotta make that tutorial man😁
please what did he use to create the svg layers.
Adobe illustrator I think
Make the tutorial please 🙏
Kamu lucu, cara memberikan penjelasan sangat menyenangkan😂🎉