Build and Deploy an Amazing 3D Developer Portfolio in React with Three.js
ฝัง
- เผยแพร่เมื่อ 21 พ.ค. 2024
- 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:
TH-cam: / @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
![ChatGPT Can Now Talk Like a Human [Latest Updates]](http://i.ytimg.com/vi/ID5tc61iksY/mqdefault.jpg)
![MOBYE - มีใจทำไมไม่จีบ (ASAP) [Official MV]](http://i.ytimg.com/vi/dCOdz92FU18/mqdefault.jpg)
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!
Thanks for sharing!
developers? I've built something like this years ago and i was hired as a human resources analyst
I prefer .Net over react any day of the week but I understand we need this stuff
@@AlThePal78why do you prefer .Net over react?
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.
The amount of work you put into your tutorials is insane ! Thank you
Saw it on your Github tonight and was really excited.
Thanks for bringing such amazing content Adrian ❤❤
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.
Cheers, enjoy!
Please ensure you do learning alone with deep thinking this will make sure you’re progressing alone rather than copying
Thanks for your counsel.
I'm out of words! This is really awesome! Thanks for making this video!
You are a great inspiration to me as a beginning programmer from Poland. Cheers man.
That's awesome!
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!
Absolutely amazed by your content! Keep it up man!
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
YESS!!! Thank you for this great tutorial well explained! Super fun!
As always, I love your work, will definitely recreate my portfolio with this amaizing inspiration.👏👏
Please do!
Wow great one. Now please do Blog with Cms and Ecommerce with woocommerce nextjs
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.
How to hide the keys when deploying on hostinger for example?
This guy. ☺ Always adding some ingredients to my portfolio!😄😄 Thanks so much for your hard work.🤝🤛 You are a genius.
I appreciate that!
Dude I love you so much, thank you thank you so much for this free tutorial. I wish you good health and more blessing!
Thank you!
Man just thinking about adding this to the resume gives goosebumps..
I was the first one to give the project star on your github before this video is launched. Big fan of you 🎉🎉🎉❤❤❤
Thank you!
i was waiting for this projects thanku❤😁
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..
Great Project again, Thank you!!🤩🤩
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!!!
Wow, thank you!
Lovely ! thank u for such amazing portfolio.
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 !
No words for your tremendous work... Hat's off 🎩...❤
Thank you so much 😀
I bet this is the best 3D web project video that is available on TH-cam💯💯💯
Wow, thanks!
I knew it was Emilian work!! Great job buddy, awesome project as usual! 🔥🔥🔥
Yeah, he did it in collaboration with JSM :D
Thank you brother! 🙏
Props to this man for animating a 3 hour long video 🙌
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.
you make me fall in love with development, thankyou kind sir
That's amazing!
You are the best, and you are one of the reason that I got my first internship. ❤❤❤
Amazing! ❤️
I love this MASTER. Quality 100%.
Appreciate it!
Awesome work Guys, Currently building my new 3d Portfolio. Will share the link soon....
thank you so much for this! so excited to get to work 🎉
Good luck!!
Thanks a lot for your tutorial, it's a cool project.
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.
Emiljan is the best!! Thanks for your information dude, you rock!
Thank you brother! 😊🙏
thanks alot man for this great full tutorial🥰😃
Thanks al lot...I completed entire project and it looks amazing at the end
Awesome!
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 a lot. I hope to get a job with your projects, of course, putting my touch on it
great video broh, this was comprehensive yet valuable
Awesome!
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.
Thank you!
Nice one! 🔥
We are lucky to have a developer like you.🎉
I'm lucky to have such great audience! :)
Here we go again with another amazing project!
Thanks again!
This guy is one of the best teacher out there and i am all in for learning 🙌
Thank you!
The Man is back with another amazing video
Thank you!
BEST TUTORIAL ON TH-cam ❤🎉
Thank you!
This is what i looking for Thank You ❤❤❤❤
You're welcome!
At this point.. I want to say. I love you man.. Keep up with the good work
Thanks, will do!
Thanks for such amazing Tutorial.
Welcome 😊
AMAZING PORTFOLIO. THANK YOU
Glad you like it! :)
impressive i really enjoy this
I was waiting for this type of content cheers man ,great work🔥
Hope you enjoyed it!
Most demanded course❤
Yess!
I have been searching for the video since last month😢 thanks to make this😍😍😍😘😘😘
Most welcome 😊
Thank you for the tutorial.
Please make a tutorial where you can zoom when clicking a 3D component
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 TH-cam because he deserves much more!
Can you share his TH-cam?
@@aogunnaike it’s @the_rings_of_saturn or you can see his coment, it’s pinned
@@aogunnaike It's my channel 😊 Thanks! 🙏
@@the_rings_of_saturn you have a new subscriber 😊
WOW this is so creativee!!
Enjoy!
Thanks for the video i am looking for this one............lott of love 🤩🤩🤩
Enjoy!
Love from Nigeria...thank you for giving someone like me an opportunity to do something meaningful In life through CP.❤
You are so welcome
This is what I've been looking for
Thanks!
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.
Glad it was helpful!
The Legend is back!!!❤
Yess! 🔥
Wow that's cool. Many Many thanks 😊
You're welcome 😊
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 🙏🏿🙏🏿🙏🏿🙏🏿
You can do it!
It was absolutely true
Thanks for the video 🎉❤
You got it!
Man thankyou for everything 🥰
My pleasure 😊
Bro deserves site of the year award this is next level love it 🥰🥰🚀🚀
Appreciate that
This guy is amazing!
great, great, really great!!!
Content as always!!!! JSM coming through 🚀🚀🚀
🙌
Thank you so much
isso é muito louco cara, ficou top de mais.
Thank you so much! 🎉
Thank you! 😊
Big love sir for this project you always make me motivate ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
Thank you so much 😀
The project is so great , I might be blind but I didn't find the model revisited for the island
At 2:32:18 in the video, using min-h-[100vh] will give better results than using h-[100vh].
Otherwise, about section does not get the styling of main page for its full height
true
Hello Adrian,
I am really enjoying course/videos. Just fyi, in the video when developing the Fox.jsx you refer to creating a const Fox arrow function but the github file has an export function Fox. I tried both, and it seems that the export function Fox works best. Everytime I refresh the const arrow function for Fox my app breaks but the export function for Fox seems to be working with no problem.
God bless you man !
Omg this is insaneeeeeeee
This is awesome 🔥🔥
Appreciate it! 🔥
Man this project is lit🎉
You got it! 🎉
Amazing video.
Thank you so much these amazing tutorials, I am currently trying to implement a 3d section in Next.js project, can I do the entire project in next.js without any dependency complications ?
Wow. Thankyou ❤
You're welcome 😊
thank you so much
Thanks I learned alot
Very welcome
give this guy a medal man
🥇
When you open a video and like it before even watching it. You know it’s the best.
Thank you!
Thanks so much man
Happy to help
Little late today but good to see you again
You can build it over the weekend! :)
Can we just appreciate how much work he puts in to his videos 💯🔥💪
Thank you!
hey you put so much effort in these videos just one request pls make one video using the t3 stack
😃
Will do soon
Three js wow , tanks ❤
You got it!
Great tutorial! Wich vs theme are you using? Can´t find it and it looks superb
Thank you!
You're welcome!
Truly amazing what web development has come to and yet devs are still pushing boundaries. Whats also amazing is that no matter how impressive the portfolio, you will still have to program your way out of a paper bag to join a team of devs at company.
Great work
Thanks