Тёмный

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

ForrestKnight
Подписаться 563 тыс.
Просмотров 225 тыс.
50% 1

Host your website with Hostinger (use code FORREST): hostinger.com/...
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/For...
Spaceman by wallmasterr - sketchfab.com/...
Planet Surface by jongjawi - stock.adobe.co...
Position Animation by Teshank - github.com/tes...
If you're a developer, sign up to my free newsletter Dev Notes 👉 www.devnotesda...
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/for...
🐦 Twitter: / forrestpknight
💼 LinkedIn: / forrestpknight
📸 Instagram: / forrestpknight

Опубликовано:

 

25 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 270   
@dennisdegraphicsdynamo_999
@dennisdegraphicsdynamo_999 3 месяца назад
the tutorial will generate more views than you expected
@LuckyLootTube
@LuckyLootTube Месяц назад
I agree!! @ForrestKnight did you already make one?
@drewonthebeat3678
@drewonthebeat3678 Месяц назад
"Wam, Bam, alakazam your 3D model is in my RAM" - this is the most elegant form of petty theft, I love it.
@h4unt3dfx
@h4unt3dfx 3 месяца назад
I teach a personal development programming class at a local university (not towards a degree) and I always refer people to your RU-vid. The new site looks awesome. Great stuff, man!
@DavidJ-k9o
@DavidJ-k9o 3 месяца назад
WoW, your video's are always good, but this one is another level
@amenu.youtube
@amenu.youtube 3 месяца назад
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.
@protojerry
@protojerry 3 месяца назад
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 ^^
@DJRanoia
@DJRanoia 3 месяца назад
I love the layered scroll.
@terrellp133
@terrellp133 3 месяца назад
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!
@kylebaker8548
@kylebaker8548 3 месяца назад
Forrest, been subscribed for some time now. Love your sense of humor. Please do a full tutorial!
@iconiiiick
@iconiiiick 3 месяца назад
I love this style of presentation. Excellent video Forrest.
@calebfatiaki8498
@calebfatiaki8498 2 месяца назад
This is an amazing video. Clicked it for the portfolio... but watched it several times for the editing and the humor. Keep it coming bro.
@wecanfixitnow
@wecanfixitnow 3 месяца назад
WoW, you are the first and most effictive mentor for me....
@sheilasharon2283
@sheilasharon2283 3 месяца назад
first software engineering mentor i had 🔥
@negasonicteenagewarhead
@negasonicteenagewarhead 3 месяца назад
And I cloned it
@slliks4
@slliks4 3 месяца назад
😂
@seekknowledge1928
@seekknowledge1928 3 месяца назад
😂😂
@jordy8124
@jordy8124 2 месяца назад
😂😂😂😂
@joelhenry9030
@joelhenry9030 2 месяца назад
😂😂😂
@deathnote8660
@deathnote8660 Месяц назад
Using what
@igorgaiduk5536
@igorgaiduk5536 3 дня назад
Could not stop watching until the end 😂
@lic.sebastianrodrigonajle964
@lic.sebastianrodrigonajle964 3 месяца назад
You blew my head up bro. Literally. Congrats Bro!! you are a Genius!! Keep going!! Greets from Argentina!!
@davida8216
@davida8216 3 месяца назад
I commented this video(for RU-vid algorithms) because this montage is so cool and I want everybody to see this
@mohamedazizkefi5533
@mohamedazizkefi5533 3 месяца назад
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 !
@javifontalva7752
@javifontalva7752 3 месяца назад
I'd love to get the tutorial. KEEP IT UP!!!
@YannisBABINENI
@YannisBABINENI 3 месяца назад
We definitely need the tutorial for this website. Amazing work dude !!
@hecker688
@hecker688 2 месяца назад
amazing video! not too technical and very fun to watch, subscribed.
@dominiquecampitelli611
@dominiquecampitelli611 2 месяца назад
this is exactly what I was looking for and I came across the best teaching, I love funny classes
@Novemtails
@Novemtails 2 месяца назад
It seems like a Dani's Unity 3d videos. I love your work dude
@johno8760
@johno8760 3 месяца назад
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
@hello_ozzz
@hello_ozzz 16 дней назад
Legend, looking forward to a tutorial 🎉
@matrixv01
@matrixv01 Месяц назад
Great tutorial and thanks for the discount.
@Iamzeku
@Iamzeku 3 месяца назад
had me cracking up the whole vid! LOVE IT.
@egedesolomon7454
@egedesolomon7454 3 месяца назад
Who's this guy😂, learnt more than expected. Thanks mate 🙌
@theailab754
@theailab754 3 месяца назад
I honestly didn’t know I needed a video like this
@blender1927
@blender1927 2 месяца назад
Your vs code theme is beautiful.
@chrisjones8829
@chrisjones8829 3 месяца назад
This is amazing. You are amazing. Very inspiring and motivating, as well.
@nipungrover7058
@nipungrover7058 3 месяца назад
You got 60 k so....i hope you keep your word
@sherumov6472
@sherumov6472 3 месяца назад
100 percent representation of web developer
@jameydyar2333
@jameydyar2333 3 месяца назад
I’d like to see the tutorial. I want to take a similar project with my personal website
@honkhonk8009
@honkhonk8009 2 месяца назад
this is possibly the best tutorial iv seen as of yet. Dude seriously, you should make more of these in the exact same style. I hate how bloated and gay these other tutorials are. 30 minutes to do what you did in like 10 seconds with perfectly conciseness
@isaacoyeniyi9117
@isaacoyeniyi9117 3 месяца назад
brooo! I thought this video was about 2 years old!!! Your content is nice. You have my subscribe. And you got 90k! 😂😂
@ercrapa75
@ercrapa75 23 дня назад
The website was not showed and it didn't even seem like a 3d one? Am I missing something ?
@rayanfernandes2631
@rayanfernandes2631 3 месяца назад
That's an awesome project bro, Just keep making more
@TannerBarcelos
@TannerBarcelos 3 месяца назад
New style goes hard
@SwapnaRoyGhosh
@SwapnaRoyGhosh 3 месяца назад
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...
@ypathan420
@ypathan420 3 месяца назад
love the new style
@merabet.faycal
@merabet.faycal 3 месяца назад
You got it,amma be watching it every night . Just do it give it to uuus
@Lordmaryo
@Lordmaryo 3 месяца назад
Chop chop tutorial boy 👨🏽‍🍳
@nathandavidhill8939
@nathandavidhill8939 Месяц назад
I need the tutorial to this fire website! 🔥
@ねこ-p1b7o
@ねこ-p1b7o 3 месяца назад
The hero section or the parallax section is awesome, the rest seems i also can do it.
@ashutoshgorke9244
@ashutoshgorke9244 2 месяца назад
Hey, Please make tutorial video. The protfolio looks awesome!!!
@UjjwalSharma.861
@UjjwalSharma.861 5 дней назад
Bro is asking for 50k views and here is we have 200k+ Views , awesome 😎👍🏻
@LongThanh-xg5uf
@LongThanh-xg5uf 3 месяца назад
The theme you used is very beautiful, can I ask for its name?
@DustinYoung-dr4df
@DustinYoung-dr4df 3 месяца назад
Great style! Looking forward to more. Perhaps a missed opportunity to make your 3D character move more in 3D?
@joshr96
@joshr96 3 месяца назад
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." 🙂
@abolfazleabolghasemi-cd7qy
@abolfazleabolghasemi-cd7qy 2 месяца назад
your technique in dev is so usefull
@GoodBalak
@GoodBalak 3 месяца назад
As a backend dev I'm impressed. Any reason I shouldn't be? I feel like I should try learning this too.
@GrahamBillington
@GrahamBillington 3 месяца назад
I loved this format
@instiinct_defi
@instiinct_defi 3 месяца назад
Great video! Definitely think your tutorial will go very well.
@sairajpoojari2490
@sairajpoojari2490 2 месяца назад
Bro this is really great. If possible please make a complete tutorial
@Joggll
@Joggll 3 месяца назад
Man that's such a good video. It really inspires
@ghofranedarragi5601
@ghofranedarragi5601 3 месяца назад
amazing work ! full tutorial plzzz
@juanmacias5922
@juanmacias5922 3 месяца назад
Nice Hero background. ;)
@iiindexxx
@iiindexxx 3 месяца назад
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
@SaifulIslam-pe3hn
@SaifulIslam-pe3hn 3 месяца назад
That tutorial will be ready awesome. You better be working on the tutorial.
@PetrandoRichard
@PetrandoRichard 3 месяца назад
Why you install three.js and react-three/fiber if you never use them?
@pandeygSundaram
@pandeygSundaram 3 месяца назад
I have a noobie question What's the point of using a 3d model if there's no interactivity Like simple add another image and it will use less resources
@pratheekr524
@pratheekr524 3 месяца назад
"wham bam alakazam your 3D models IN MY RAM" -ForrestKnight
@kaushalkishore4661
@kaushalkishore4661 3 месяца назад
well sir i am very much waiting for the tutorial
@ashutosh_tiwari
@ashutosh_tiwari 3 месяца назад
Make a full tutorial bro with working contact section!!
@yousefosman8094
@yousefosman8094 3 месяца назад
I'm sharing this with everyone I know and their mother so we get the tutorial
@DARKLABIB
@DARKLABIB 3 месяца назад
ouu your videos are so interesting ...love to watch more
@okok-om1lw
@okok-om1lw 29 дней назад
how did you split the image into multiple layers
@nathanbrews9951
@nathanbrews9951 2 месяца назад
This was fun
@mohamedelbougrfaoui
@mohamedelbougrfaoui 3 месяца назад
Man you make React JS looks super easy LOL
@shridhar_singh
@shridhar_singh 3 месяца назад
Damn Forrest, this is amazing! Please do the tutorial
@lesamir2010
@lesamir2010 3 месяца назад
Make the tutorial for this man. It's really cool and inspiring.
@rappingtornado1417
@rappingtornado1417 3 месяца назад
please what did he use to create the svg layers.
@air-ick5578
@air-ick5578 3 месяца назад
Adobe illustrator I think
@ELY-qg2vn
@ELY-qg2vn 3 месяца назад
You broke Wallmasters sketchfab page man
@samirhilario1436
@samirhilario1436 3 месяца назад
Can’t wait for the tutorial
@shahzadsheikh1459
@shahzadsheikh1459 3 месяца назад
which software use for screen recording please tell me
@SawantShruti-hg2ok
@SawantShruti-hg2ok 2 месяца назад
How to deploy this portfolio website through netlify? Please guide
@alextrotman9317
@alextrotman9317 3 месяца назад
I look forward to the tutorial
@Carlos-gj1wj
@Carlos-gj1wj 3 месяца назад
Great video, thanks for sharing! 😁
@cfcoachkev
@cfcoachkev Месяц назад
Tutorial! Let’s go! 😂
@DKSubconscious
@DKSubconscious 3 месяца назад
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.
@KnuffelChiisai
@KnuffelChiisai 3 месяца назад
Looks really awesome
@iamnotahuman2172
@iamnotahuman2172 3 месяца назад
earned my subscribe, that content is dope
@everyDev-everyDay
@everyDev-everyDay Месяц назад
bro you good content and developer
@TRLYx
@TRLYx 3 месяца назад
Good project name, but it needs more power. Could you kick up the 4d3d3d3?
@shivayramrathy300
@shivayramrathy300 3 месяца назад
This looks great. We need a tutorial please🙏
@rendi__rm
@rendi__rm 2 месяца назад
This is brilliant!
@mandongpedroza7486
@mandongpedroza7486 3 месяца назад
50k views, time for the tut :))
@quixxate8659
@quixxate8659 3 месяца назад
I see a tutorial in my near future
@MominAhmed-y6w
@MominAhmed-y6w 3 месяца назад
I learn data science so no matter what is happening here but the VS Code theme ?
@toanduongthanh8625
@toanduongthanh8625 3 месяца назад
RU-vid recommendation algorithm is better
@alfianrsa
@alfianrsa 3 месяца назад
best video i have watched so far
@ankitdas2197
@ankitdas2197 3 месяца назад
50k almost there
@namanbagrecha4809
@namanbagrecha4809 Месяц назад
50 k views done , when will we get the toturial
@shuya89100
@shuya89100 3 месяца назад
Great Video, I hope a tutorial soon !
@porettouqp2684
@porettouqp2684 3 месяца назад
64k views ,u gotta make that tutorial man😁
@anhngocle738
@anhngocle738 3 месяца назад
omg, this is so genius
@ariyoujahan9662
@ariyoujahan9662 3 месяца назад
It was amazing and fun.
@jesusalvarezaguilar
@jesusalvarezaguilar 3 месяца назад
What happened to the dev platform?
@alivdas2242
@alivdas2242 3 месяца назад
make some tutorail vedios based on thre.js and react...it will be helpful to understand the new tecnologies on web-dev
@marekcvoliga3813
@marekcvoliga3813 3 месяца назад
GIMME THE TUTORIAL U ARE REALLY GOOD AT THIS AND IM BEGGINER WHOS TRYING TO LEARN
Далее
I found more incredible 3D personal portfolios!!!
19:12
Top 2024 Web Design Trends
5:32
Просмотров 605 тыс.
Reacting to 21 Design Portfolios in 22 Minutes
22:41
Просмотров 599 тыс.
So, you want to build apps & websites?
9:34
Просмотров 182 тыс.
The Easy Way to Design Top Tier Websites
11:54
Просмотров 429 тыс.
These Personal Websites are just WOW...
22:09
Просмотров 1,1 млн
world's shortest UI/UX design course
6:53
Просмотров 1,2 млн
Only Noobs Build Beautiful Websites
18:13
Просмотров 136 тыс.