Build and Deploy an Amazing 3D Developer Portfolio in React with Three.js
Let's build a cool 3D website together! You'll learn how to make a portfolio with fun interactive parts, like a floating island and a fox that moves when you type. It'll allow you to show off your skills and get a job!
🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14
🚀 Land your dream programming job in 6 months: jsmastery.pro/masterclass
📙 Three.js Guide - resource.jsmastery.pro/threej...
⭐ Special Black Friday Hosting Deal: hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adrianhajdin/3D_po...
GitHub Gist (code): gist.github.com/adrianhajdin/...
Models & Assets (public folder): drive.google.com/file/d/1TACD...
📩 Emilian's work:
KZread: / @the_rings_of_saturn
LinkedIn: / emilian-kasemi
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 - Intro
00:06:35 - Setup
00:18:58 - Navbar
00:25:17 - HomePage
00:36:05 - Island
00:48:26 - Sky
00:50:42 - Rotation, Bird & Plane
01:27:19 - Popups
01:36:40 - Contact
01:44:14 - Email.JS
01:54:11 - Fox
02:08:04 - Alert
02:13:34 - About Page
02:30:32 - CTA
02:32:44 - Fix Plane and Keyboard handle
02:34:58 - Projects Page
02:44:35 - Adding Sound
02:50:24 - Deployment
Пікірлер: 599
This is insane I would’ve never thought basic 3D programming for web would be so simple.
I've been a .Net developer for a long time, but this is my third build of one of your projects. Although I've dabbled with Node and React for a while, I feel you've helped me ramp up my client-side skill set a lot with these projects. Really excellent work on your part. Thank you so much!
@javascriptmastery
8 ай бұрын
Thanks for sharing!
@brunob.7792
8 ай бұрын
developers? I've built something like this years ago and i was hired as a human resources analyst
@AlThePal78
5 ай бұрын
I prefer .Net over react any day of the week but I understand we need this stuff
@zojirushi1
3 ай бұрын
@@AlThePal78why do you prefer .Net over react?
@huynguyen-dg2sh
23 күн бұрын
Результаты говорят сами за себя - эта связка действительно работает.
The amount of work you put into your tutorials is insane ! Thank you
Best project I've ever worked on 🥰. It was a nightmare thinking about 3d on the web, you made it look so simple. Thank you so much.
You are a great inspiration to me as a beginning programmer from Poland. Cheers man.
@javascriptmastery
8 ай бұрын
That's awesome!
Saw it on your Github tonight and was really excited. Thanks for bringing such amazing content Adrian ❤❤
@javascriptmastery
8 ай бұрын
My pleasure!
What a time to be alive in the world of developers, through you my software development journey is picking a great momentum. Cheers man.
@javascriptmastery
8 ай бұрын
Cheers, enjoy!
@Smurfis
7 ай бұрын
Please ensure you do learning alone with deep thinking this will make sure you’re progressing alone rather than copying
@obed_m16
7 ай бұрын
Thanks for your counsel.
@ElementalRPG-pk7pp
23 күн бұрын
Эта связка стала для меня открытием года, результат превзошел все мои ожидания.
I'm out of words! This is really awesome! Thanks for making this video!
Man i fxcking love you! Your channel its being so helpfull, i just got a job because of this project in this video. I really pray for you achieve the most amazing things in your life and everything you dream about, you're helping the world dude! Im all the way from Brazil and you're blessing so many people here, God bless you bro!
As always, I love your work, will definitely recreate my portfolio with this amaizing inspiration.👏👏
@javascriptmastery
8 ай бұрын
Please do!
@brancode404
8 ай бұрын
Wow great one. Now please do Blog with Cms and Ecommerce with woocommerce nextjs
Absolutely amazed by your content! Keep it up man!
@javascriptmastery
8 ай бұрын
Thanks a ton!
hey, i just wanted to thanks for you to share this project, this is what i looking for my next project, thanks dude
This guy. ☺ Always adding some ingredients to my portfolio!😄😄 Thanks so much for your hard work.🤝🤛 You are a genius.
@javascriptmastery
8 ай бұрын
I appreciate that!
I bet this is the best 3D web project video that is available on KZread💯💯💯
@javascriptmastery
8 ай бұрын
Wow, thanks!
You are the best, and you are one of the reason that I got my first internship. ❤❤❤
@javascriptmastery
8 ай бұрын
Amazing! ❤️
Amazing videos, amazing chanel and author like the God! Thank you so match for your work, Adrian! We are waiting your next projects with impatiens!!!
@javascriptmastery
7 ай бұрын
Wow, thank you!
Dude I love you so much, thank you thank you so much for this free tutorial. I wish you good health and more blessing!
@javascriptmastery
8 ай бұрын
Thank you!
YESS!!! Thank you for this great tutorial well explained! Super fun!
No words for your tremendous work... Hat's off 🎩...❤
@javascriptmastery
8 ай бұрын
Thank you so much 😀
This guy is one of the best teacher out there and i am all in for learning 🙌
@javascriptmastery
8 ай бұрын
Thank you!
Emiljan is the best!! Thanks for your information dude, you rock!
@the_rings_of_saturn
8 ай бұрын
Thank you brother! 😊🙏
I love this MASTER. Quality 100%.
@javascriptmastery
8 ай бұрын
Appreciate it!
In the emailJS section of the tutorial, storing the keys in the .env file doesn't provide much security because anyone can inspect them in the network tab of the Google Developer Tools as part of the payload. To truly protect the keys from being exposed, you should use a backend server. Here's how it works: From the frontend, you send a hashed key to your backend server. The backend server then decrypts this hashed key and provides you with the actual environment key, ensuring that the key remains confidential. The only situation where these keys won't be visible, as shown in the video, is when they are in a Git repository. However, if they are hosted online, anyone can view them by checking the network tab.
@deadeye111
3 ай бұрын
How to hide the keys when deploying on hostinger for example?
I was the first one to give the project star on your github before this video is launched. Big fan of you 🎉🎉🎉❤❤❤
@javascriptmastery
8 ай бұрын
Thank you!
Lovely ! thank u for such amazing portfolio.
you make me fall in love with development, thankyou kind sir
@javascriptmastery
7 ай бұрын
That's amazing!
I have an experience of php laravel . but after watch your videos and learn react js , next js you are rock brother.. Love from pakistan dear..
Man just thinking about adding this to the resume gives goosebumps..
This other day I wanted to join your classes, I proceeded with the steps then boooom I was reminded I am in Africa at the end .🤣🤣 I love all your videos and definitely I will watch this one this weekend. Thank you so much for all the resources you are giving us for free.
@javascriptmastery
8 ай бұрын
Thank you!
We are lucky to have a developer like you.🎉
@javascriptmastery
8 ай бұрын
I'm lucky to have such great audience! :)
I knew it was Emilian work!! Great job buddy, awesome project as usual! 🔥🔥🔥
@javascriptmastery
8 ай бұрын
Yeah, he did it in collaboration with JSM :D
@the_rings_of_saturn
8 ай бұрын
Thank you brother! 🙏
Great Project again, Thank you!!🤩🤩
i was waiting for this projects thanku❤😁
Hi Adrian ! I'm really thankfull to you for sharing this next level project with us, and for that I've come to know so many new features of React as well as ThreeJS. Thanks a ton once again. Inshallah !
thank you so much for this! so excited to get to work 🎉
@javascriptmastery
8 ай бұрын
Good luck!!
Props to this man for animating a 3 hour long video 🙌
Thanks al lot...I completed entire project and it looks amazing at the end
@javascriptmastery
8 ай бұрын
Awesome!
Awesome work Guys, Currently building my new 3d Portfolio. Will share the link soon....
Связка огонь, спасибо за информацию.
Most demanded course❤
@javascriptmastery
8 ай бұрын
Yess!
Love from Nigeria...thank you for giving someone like me an opportunity to do something meaningful In life through CP.❤
@javascriptmastery
8 ай бұрын
You are so welcome
Bro deserves site of the year award this is next level love it 🥰🥰🚀🚀
@javascriptmastery
8 ай бұрын
Appreciate that
Much more will be taught to you in this tutorial. I appreciate your incredible content, sir, and am eager to delve deeper into React through this channel.
At this point.. I want to say. I love you man.. Keep up with the good work
@javascriptmastery
8 ай бұрын
Thanks, will do!
BEST TUTORIAL ON KZread ❤🎉
@javascriptmastery
8 ай бұрын
Thank you!
thanks alot man for this great full tutorial🥰😃
Thanks a lot for your tutorial, it's a cool project.
This is what i looking for Thank You ❤❤❤❤
@javascriptmastery
8 ай бұрын
You're welcome!
great video broh, this was comprehensive yet valuable
@javascriptmastery
7 ай бұрын
Awesome!
The Man is back with another amazing video
@javascriptmastery
8 ай бұрын
Thank you!
Nice one! 🔥
I have been searching for the video since last month😢 thanks to make this😍😍😍😘😘😘
@javascriptmastery
8 ай бұрын
Most welcome 😊
Here we go again with another amazing project!
@javascriptmastery
8 ай бұрын
Thanks again!
Thanks for such amazing Tutorial.
@javascriptmastery
8 ай бұрын
Welcome 😊
Thanks a lot. I hope to get a job with your projects, of course, putting my touch on it
Thanks for the video i am looking for this one............lott of love 🤩🤩🤩
@javascriptmastery
7 ай бұрын
Enjoy!
Adrian, thank you for the exceptional quality of your totorials. Your explanations really changed my understanding. Thank you for going out of your way to provide an exceptional learning experience. I am really lucky to come across your channel.
Thanks for the video 🎉❤
@javascriptmastery
8 ай бұрын
You got it!
WOW this is so creativee!!
@javascriptmastery
8 ай бұрын
Enjoy!
The Legend is back!!!❤
@javascriptmastery
8 ай бұрын
Yess! 🔥
I am very happy that you met Emilian! great job, I worked with Emilian, I was his student and he is an excellent professional! I wish he was more popular on KZread because he deserves much more!
@javascriptmastery
8 ай бұрын
@aogunnaike
8 ай бұрын
Can you share his KZread?
@user-bk9ze2xj4u
8 ай бұрын
@@aogunnaike it’s @the_rings_of_saturn or you can see his coment, it’s pinned
@the_rings_of_saturn
8 ай бұрын
@@aogunnaike It's my channel 😊 Thanks! 🙏
@aogunnaike
8 ай бұрын
@@the_rings_of_saturn you have a new subscriber 😊
Man thankyou for everything 🥰
@javascriptmastery
8 ай бұрын
My pleasure 😊
Big love sir for this project you always make me motivate ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
@javascriptmastery
8 ай бұрын
Thank you so much 😀
Great video, could you make a more in depth tutorial on the method you use to import the 3D models. How you clean up meshes and implement it. Your method is the best and cleaner one i've been able to find. Amazing job :)
I am so happy seeing that I can update my portfolio website with this beautiful 3D website, thanks 🙏 a lot Adrian 🎉 I really appreciate it.
@javascriptmastery
8 ай бұрын
Glad it was helpful!
Wow that's cool. Many Many thanks 😊
@javascriptmastery
8 ай бұрын
You're welcome 😊
This is awesome 🔥🔥
@javascriptmastery
8 ай бұрын
Appreciate it! 🔥
Thank you for the tutorial. Please make a tutorial where you can zoom when clicking a 3D component
This is what I've been looking for
@javascriptmastery
8 ай бұрын
Thanks!
impressive i really enjoy this
give this guy a medal man
@javascriptmastery
8 ай бұрын
🥇
Content as always!!!! JSM coming through 🚀🚀🚀
@javascriptmastery
8 ай бұрын
🙌
When you open a video and like it before even watching it. You know it’s the best.
@javascriptmastery
8 ай бұрын
Thank you!
Thank you so much! 🎉
@javascriptmastery
8 ай бұрын
Thank you! 😊
Man this project is lit🎉
@javascriptmastery
8 ай бұрын
You got it! 🎉
hey you put so much effort in these videos just one request pls make one video using the t3 stack 😃
@javascriptmastery
8 ай бұрын
Will do soon
Sir just listening to your introduction removes all the fear inside of me and motivates me to finish this project You're a live sever for real, thankyou for your hard work 🙏🏿🙏🏿🙏🏿🙏🏿
@javascriptmastery
8 ай бұрын
You can do it!
@akshayKumar-kx9mm
8 ай бұрын
It was absolutely true
This guy is amazing!
Thanks for this. This motivated me to buy domain and upload project. I tweaked the animations to make it look more smooth instead of playing and stopping plane i adjusted speed of animations and also fixed issues with touch. Now thinking of changing island and triggering animations on normalized rotation regions which will be interesting.
God bless you man !
Loved it
@javascriptmastery
8 ай бұрын
Thanks!
Wow. Thankyou ❤
@javascriptmastery
8 ай бұрын
You're welcome 😊
Another banger❤
@javascriptmastery
8 ай бұрын
Thank you!
Wow this is so cool❤
@javascriptmastery
8 ай бұрын
Thanks! ❤️
Thanks so much man
@javascriptmastery
8 ай бұрын
Happy to help
I was waiting for this type of content cheers man ,great work🔥
@javascriptmastery
8 ай бұрын
Hope you enjoyed it!
isso é muito louco cara, ficou top de mais.
great, great, really great!!!
Bro u are the G.O.A.T for me.
@javascriptmastery
8 ай бұрын
🐐
Great work
@javascriptmastery
8 ай бұрын
Thanks
Thank you!
@javascriptmastery
7 ай бұрын
You're welcome!
The project is so great , I might be blind but I didn't find the model revisited for the island
Thanks I learned alot
@javascriptmastery
8 ай бұрын
Very welcome
Omg this is insaneeeeeeee
Adrian thanks
@javascriptmastery
8 ай бұрын
You got it!
You are awesome teacher
@javascriptmastery
8 ай бұрын
Glad you think so!
Can we just appreciate how much work he puts in to his videos 💯🔥💪
@javascriptmastery
8 ай бұрын
Thank you!
Wow❤, that looks amazing. But I am so confused now. I followed a course on you were we built a portfolio and I am also following a course in building a 3d portfolio on your 10 hour dev app course and now this is the third portfolio I am seeing on your channel. Which one should I stick with? Thank you for your amazing content as usual 😊
@javascriptmastery
8 ай бұрын
Whichever one you prefer
Thank you so much
Little late today but good to see you again
@javascriptmastery
8 ай бұрын
You can build it over the weekend! :)