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:
UA-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
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
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.
Saw it on your Github tonight and was really excited.
Thanks for bringing such amazing content Adrian ❤❤
My pleasure!
You are a great inspiration to me as a beginning programmer from Poland. Cheers man.
That's awesome!
I'm out of words! This is really awesome! Thanks for making this video!
Absolutely amazed by your content! Keep it up man!
Thanks a ton!
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.👏👏
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!
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!
Man just thinking about adding this to the resume gives goosebumps..
No words for your tremendous work... Hat's off 🎩...❤
Thank you so much 😀
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!
You are the best, and you are one of the reason that I got my first internship. ❤❤❤
Amazing! ❤️
Props to this man for animating a 3 hour long video 🙌
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!
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..
I bet this is the best 3D web project video that is available on UA-cam💯💯💯
Wow, thanks!
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.
Lovely ! thank u for such amazing portfolio.
I was the first one to give the project star on your github before this video is launched. Big fan of you 🎉🎉🎉❤❤❤
Thank you!
Great Project again, Thank you!!🤩🤩
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! 🙏
i was waiting for this projects thanku❤😁
This guy is one of the best teacher out there and i am all in for learning 🙌
Thank you!
I love this MASTER. Quality 100%.
Appreciate it!
you make me fall in love with development, thankyou kind sir
That's amazing!
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.
We are lucky to have a developer like you.🎉
I'm lucky to have such great audience! :)
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 !
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.
Emiljan is the best!! Thanks for your information dude, you rock!
Thank you brother! 😊🙏
Thank you for the tutorial.
Please make a tutorial where you can zoom when clicking a 3D component
thank you so much for this! so excited to get to work 🎉
Good luck!!
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!
Awesome work Guys, Currently building my new 3d Portfolio. Will share the link soon....
Thanks a lot. I hope to get a job with your projects, of course, putting my touch on it
Thanks a lot for your tutorial, it's a cool project.
thanks alot man for this great full tutorial🥰😃
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 al lot...I completed entire project and it looks amazing at the end
Awesome!
Nice one! 🔥
great video broh, this was comprehensive yet valuable
Awesome!
Here we go again with another amazing project!
Thanks again!
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 ?
Thanks for such amazing Tutorial.
Welcome 😊
BEST TUTORIAL ON UA-cam ❤🎉
Thank you!
This is what i looking for Thank You ❤❤❤❤
You're welcome!
The Man is back with another amazing video
Thank you!
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.
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 UA-cam because he deserves much more!
Can you share his UA-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 😊
AMAZING PORTFOLIO. THANK YOU
Glad you like it! :)
The project is so great , I might be blind but I didn't find the model revisited for the island
Great tutorial! Wich vs theme are you using? Can´t find it and it looks superb
Love from Nigeria...thank you for giving someone like me an opportunity to do something meaningful In life through CP.❤
You are so welcome
At this point.. I want to say. I love you man.. Keep up with the good work
Thanks, will do!
I was waiting for this type of content cheers man ,great work🔥
Hope you enjoyed it!
Bro deserves site of the year award this is next level love it 🥰🥰🚀🚀
Appreciate that
Thanks for the video i am looking for this one............lott of love 🤩🤩🤩
Enjoy!
Wow that's cool. Many Many thanks 😊
You're welcome 😊
hey you put so much effort in these videos just one request pls make one video using the t3 stack
😃
Will do soon
impressive i really enjoy this
Most demanded course❤
Yess!
This is what I've been looking for
Thanks!
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 😊
Whichever one you prefer
WOW this is so creativee!!
Enjoy!
Thanks for the video 🎉❤
You got it!
Can we just appreciate how much work he puts in to his videos 💯🔥💪
Thank you!
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
The Legend is back!!!❤
Yess! 🔥
Man thankyou for everything 🥰
My pleasure 😊
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!
isso é muito louco cara, ficou top de mais.
I have been searching for the video since last month😢 thanks to make this😍😍😍😘😘😘
Most welcome 😊
When you open a video and like it before even watching it. You know it’s the best.
Thank you!
give this guy a medal man
🥇
Hello there, I am not able to find the links to the updated 3D model with less lines of code in your videos description, could you please provide the same. Really Appreciate your teaching! Thank you.
Big love sir for this project you always make me motivate ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
Thank you so much 😀
Content as always!!!! JSM coming through 🚀🚀🚀
🙌
Thank you so much! 🎉
Thank you! 😊
This is awesome 🔥🔥
Appreciate it! 🔥
9:15 what is that extension that is giving you suggestions while coding ?? btw very nice work
The video was awesome👌👋!!
Can you tell us from where you are picking the icons and css files which are required for the project ??
and from next video onwards pls write the css in the video only🙏
Just from the internet :)
Man this project is lit🎉
You got it! 🎉
Thank you so much
Thanks I learned alot
Very welcome
Nice 3D portfolio website. I'm learning new things from you and eagerly waiting for your 3D digital agency website toutorial video. Make a video on it it's my humble request to you. Thanks
Great suggestion!
Thanks so much man
Happy to help
Wow. Thankyou ❤
You're welcome 😊
I really loved your videos, can you make a JavaScript course like from beginner, i reaaly want to learn that
Yes, soon
Thank you!
You're welcome!
Hey first of all thank you for the lesson.
I want to ask how are you able to get the prompts of auto complete in the VSCode terminal please share the technology that you are using for the same. I searched but couldn't find any resource related to it.
GitHub Copilot
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.
Little late today but good to see you again
You can build it over the weekend! :)
Great work
Thanks