Build and Deploy an Amazing 3D Developer Portfolio in React with Three.js

[@specex]

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]

Thanks for sharing!

[@brunob.7792]

developers? I've built something like this years ago and i was hired as a human resources analyst

[@AlThePal78]

I prefer .Net over react any day of the week but I understand we need this stuff

[@zojirushi1]

⁠@@AlThePal78why do you prefer .Net over react?

[@huynguyen-dg2sh]

Результаты говорят сами за себя - эта связка действительно работает.

[@sandman.38]

This is insane I would’ve never thought basic 3D programming for web would be so simple.

[@obed_m16]

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]

Cheers, enjoy!

[@Smurfis]

Please ensure you do learning alone with deep thinking this will make sure you’re progressing alone rather than copying

[@obed_m16]

Thanks for your counsel.

[@ElementalRPG-pk7pp]

Эта связка стала для меня открытием года, результат превзошел все мои ожидания.

[@kissclub]

The amount of work you put into your tutorials is insane ! Thank you

[@ValorantStage]

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!

[@imtiousislam2669]

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.

[@Contentline-i9e]

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 KZbin because he deserves much more!

[@javascriptmastery]

[@aogunnaike]

Can you share his KZbin?

[@Contentline-i9e]

@@aogunnaike it’s @the_rings_of_saturn or you can see his coment, it’s pinned

[@the_rings_of_saturn]

@@aogunnaike It's my channel 😊 Thanks! 🙏

[@aogunnaike]

@@the_rings_of_saturn you have a new subscriber 😊

[@felixboachieyiadom4457]

As someone who learnt blender for 2 years but dropped it because of software engineering This makes me happy.I hope I can remember my practical 3d skills so i can create beautiful assets for my websites now

[@thunder1889]

You are a great inspiration to me as a beginning programmer from Poland. Cheers man.

[@javascriptmastery]

That's awesome!

[@SirXtC]

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]

How to hide the keys when deploying on hostinger for example?

[@OPGAMER.]

Saw it on your Github tonight and was really excited. Thanks for bringing such amazing content Adrian ❤❤

[@javascriptmastery]

My pleasure!

[@BeeBee-fd7ls]

I was the first one to give the project star on your github before this video is launched. Big fan of you 🎉🎉🎉❤❤❤

[@javascriptmastery]

Thank you!

[@fnord_lander]

This is so cool! I’ve been meaning to update my portfolio website and im learning blender and Unreal engine again so this is perfect

[@kurniamassidik5798]

hey, i just wanted to thanks for you to share this project, this is what i looking for my next project, thanks dude

[@AnasOuadi-p2t]

You are the best, and you are one of the reason that I got my first internship. ❤❤❤

[@javascriptmastery]

Amazing! ❤️

[@BeyondNoise9]

Man just thinking about adding this to the resume gives goosebumps..

[@nkrumahdubazana9421]

True!!

[@samuelsamuel8920]

Thank you so much for your content. I really appreciate it. I'm from Argentina, and honestly, this video helped me a lot in making progress with my portfolio. I wish you the best and keep it up 💪

[@RAJUSARKAR-zo7om]

I bet this is the best 3D web project video that is available on KZbin💯💯💯

[@javascriptmastery]

Wow, thanks!

[@olivierbakoyogo1324]

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]

You can do it!

[@akshayKumar-kx9mm]

It was absolutely true

[@totrakuarber8786]

Emiljan is the best!! Thanks for your information dude, you rock!

[@the_rings_of_saturn]

Thank you brother! 😊🙏

[@fiolagbadedaniel6982]

Love from Nigeria...thank you for giving someone like me an opportunity to do something meaningful In life through CP.❤

[@javascriptmastery]

You are so welcome

[@griefandghewar]

you make me fall in love with development, thankyou kind sir

[@javascriptmastery]

That's amazing!

[@codewithmirko1651]

I knew it was Emilian work!! Great job buddy, awesome project as usual! 🔥🔥🔥

[@javascriptmastery]

Yeah, he did it in collaboration with JSM :D

[@the_rings_of_saturn]

Thank you brother! 🙏

[@deviskalo]

This guy. ☺ Always adding some ingredients to my portfolio!😄😄 Thanks so much for your hard work.🤝🤛 You are a genius.

[@javascriptmastery]

I appreciate that!

[@thegreatben27]

At this point.. I want to say. I love you man.. Keep up with the good work

[@javascriptmastery]

Thanks, will do!

[@trade-with-lee]

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]

Thank you!

[@prasathwebby1789]

We are lucky to have a developer like you.🎉

[@javascriptmastery]

I'm lucky to have such great audience! :)

[@harveerSingh-iy9xz]

Bro deserves site of the year award this is next level love it 🥰🥰🚀🚀

[@javascriptmastery]

Appreciate that

[@christopherlonzo]

I'm out of words! This is really awesome! Thanks for making this video!

[@showkatali2397]

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..

[@KingofShorts08]

Can we just appreciate how much work he puts in to his videos 💯🔥💪

[@javascriptmastery]

Thank you!

[@umakantshinde1597]

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.

[@danielharrison110]

i appreciate your video, would there be any follow up on how you changed the sky glb so i know in the future how to add a background scene of choice from a 3d model? Also a more indepth process on how to get a 3d model to rotate on a axis would be awesome! i didnt want carbon copy of you page and it would be helpful to get a more indepth answer as to how to make certain objects rotate certain ways

[@adityarajawat3185]

Most demanded course❤

[@javascriptmastery]

Yess!

[@Tanishfilms]

Here he comes with another masterpiece 🫂

[@javascriptmastery]

Appreciate it!

[@aftab_alam48]

The Legend is back!!!❤

[@javascriptmastery]

Yess! 🔥

[@AbhijeetSingh-lf3uu]

the glb file or model isn't loading, i tried different ways but it only still shows a white screen with AH , contacts and about button. if i remember correctly , someone told me to do something with babel idk edit: adjustIslandForScreenSize() was returning a non-iterable object. used chatGPT for proper desstructuring of the function and wrote it like : const adjustedValues = adjustIslandForScreenSize(); const islandScale = adjustedValues.screenScale; const islandPosition = adjustedValues.screenPosition; const islandRotation = adjustedValues.rotation;

[@10zDelek]

give this guy a medal man

[@javascriptmastery]

🥇

[@raulparra4678]

I love this MASTER. Quality 100%.

[@javascriptmastery]

Appreciate it!

[@animeprogrammer]

When you open a video and like it before even watching it. You know it’s the best.

[@javascriptmastery]

Thank you!

[@rohanthakur9159]

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

[@CodeInnovateDyO]

true

[@G_O_J_O_S_A_T_O_R_U]

This guy is one of the best teacher out there and i am all in for learning 🙌

[@javascriptmastery]

Thank you!

[@imheretosleep]

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]

Thank you!

[@sumitrodrigues]

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.

[@helpfull8010]

No words for your tremendous work... Hat's off 🎩...❤

[@javascriptmastery]

Thank you so much 😀

[@rubancharles8998]

Hey guys! I am a developer and trust me, this guy is giving out gold for free. Great value, Thank you so much

[@TocaMarios]

BEST TUTORIAL ON KZbin ❤🎉

[@javascriptmastery]

Thank you!

[@marioalbornoz9962]

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 :)

[@fiona-fifi4866]

As always, I love your work, will definitely recreate my portfolio with this amaizing inspiration.👏👏

[@javascriptmastery]

Please do!

[@brancode404]

Wow great one. Now please do Blog with Cms and Ecommerce with woocommerce nextjs

[@YaswanthKanjarla]

The Man is back with another amazing video

[@javascriptmastery]

Thank you!

[@harissaifi3939]

First comment 😅. Now my portfolio on another level...❤😊

[@javascriptmastery]

Almost!

[@dezignlabs3318]

Thanks for the video i am looking for this one............lott of love 🤩🤩🤩

[@javascriptmastery]

Enjoy!

[@cterogene]

Awesome work Guys, Currently building my new 3d Portfolio. Will share the link soon....

[@Den-yg4wz]

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]

Wow, thank you!

[@ChrisTian-ox5nr]

YESS!!! Thank you for this great tutorial well explained! Super fun!

[@syndg]

Absolutely amazed by your content! Keep it up man!

[@javascriptmastery]

Thanks a ton!

[@untold8718]

I have been searching for the video since last month😢 thanks to make this😍😍😍😘😘😘

[@javascriptmastery]

Most welcome 😊

[@tauqeerhusain7521]

Big love sir for this project you always make me motivate ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤

[@javascriptmastery]

Thank you so much 😀

[@engineer9503]

11:18 pe jo bhi install kraya h mera nahi ho raha, I am stuck in this. This happens with me alot that i face problem in setup can anyone suggest any solution

[@rahulgupta7800]

Lovely ! thank u for such amazing portfolio.

[@razielrodriguesoficial]

Man thak you so much for this project you are really awesome!

[@vedantbalachandra1304]

does this project once hosted are responsive for all phones ?

[@TheNewWebDeveloper]

at 19:01 how did you delete and replace both div with header?

[@innovatespark]

Hi, your description does not list the modified GLB file for the 3d animation model.

[@exploit.6848]

WOW this is so creativee!!

[@javascriptmastery]

Enjoy!

[@dmlaozturk465]

Hello, thank you for your projects and great explanations. I want to learn about how to clean models, how can I simplify?

[@vivekkushwaha9334]

Uncaught Error: R3F: Div is not part of the THREE namespace! Did you forget to extend? See , The above error occurred in the component: errors , any solution?

[@the_rings_of_saturn]

Typically, occurs when you’re trying to use a DOM element (like a div) inside the Canvas component. Canvas is meant to contain only THREE.js objects. No idea why and how are you following the tutorial here, however R3F provides a helper component called Html from @react-three/drei that allows you to include HTML content inside the Canvas.

[@khaled-0]

9:06 what are you using to get inline hints like that?

[@Echo-bk4qu]

In the 3d assests, the 3d island glb file is a wasp model. Where can we file island glb file?

[@shuioso]

Getting stuck on the navbar. As soon as I turn it from a string “Home” to an imported tag it will blank out my navbar. Everything is imported from the right places and all.

[@JolomiTee]

Content as always!!!! JSM coming through 🚀🚀🚀

[@javascriptmastery]

🙌

[@CyrilSalamite]

The project is so great , I might be blind but I didn't find the model revisited for the island

[@yourinterest5188]

We really appreciate it ❤️but you gave already made written CSS for Styling. Please also tell how to write that CSS and that styling. The way you give everything ready makes the learning so frustrating. Please take it in notice 👈 Thanks

[@javascriptmastery]

Noted

[@MrAssi225]

ri8

[@vivekkumar-pc1xy]

there is code issue 1:10:18, you commit some mistakes in passing the props in Island.jsx inside the models.

[@nirbhaymishra4222]

Thanks for the video 🎉❤

[@javascriptmastery]

You got it!

[@Kat8dev]

instead of sky I get small circle of the sky. not an extended image as in a tutorial. how do I fix this ? thank you

[@lefikamoalosi]

Props to this man for animating a 3 hour long video 🙌

[@bulelaniquinton7272]

great video broh, this was comprehensive yet valuable

[@javascriptmastery]

Awesome!

[@bakabanana009]

how do i fix Text is not allowed in the R3F tree! This could be stray whitespace or characters.

[@fwluff7515]

From where you get all those ideas and all the inspiration? I saw some other KZbinrs they have the same style in all their projects and all of them looks alike, but I've checked your videos and all of them are different and all are very complex... Nice work. ✌️💪

[@CodeInnovateDyO]

Thanks a lot. I hope to get a job with your projects, of course, putting my touch on it

[@developingfaizaan]

Nice one! 🔥

[@mk9999ful]

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.

[@PetrandoRichard]

5:48 "Nextjs is just good old react" no. I have been playing with react three, some of the drei component - namely Text component - cannot be called in nextJs 14, since it seems it is not SSR friendly. Also I tried this tutorial in nextJs - alot of warning messages popping up at the browser console, I don't bother continue, let alone hosting at vercel. That being said, nice tutorial man, thank you😊

[@Yesar1]

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

[@javascriptmastery]

Great suggestion!

[@briannguyen2464]

This is awesome project!

[@javascriptmastery]

Glad you think so!

[@AREESHA-rh3nh]

hey sir why npm template is not working on my vs code

[@uditdakua8495]

Uncaught SyntaxError: The requested module '/@vite/client' does not provide an export named 'injectQuery' (at @react-refresh:2:7) getting this error in 41.14 time stamp

[@badhonbiswas3751]

This is what i looking for Thank You ❤❤❤❤

[@javascriptmastery]

You're welcome!

[@patrickpeko]

can't find the 3d cleaned up model in the description and because of that i cannot continue this video.. i've learnt alot from this video already but at this point i am stuck!

[@bobbyG883]

Great Project again, Thank you!!🤩🤩

[@KashishSingh-q3p]

Thanks al lot...I completed entire project and it looks amazing at the end

[@javascriptmastery]

Awesome!

[@HarsheelKashyap]

hey you put so much effort in these videos just one request pls make one video using the t3 stack 😃

[@javascriptmastery]

Will do soon

[@mikasa-knowles]

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]

Whichever one you prefer

[@peachsprite]

Great video, but where did you get the svg icons from so i can change them and add my own?

[@2553banksia]

What extension do you use for the auto complete and suggestions? its almost ai like Cursor IDE? PLEASE ANSWER MEEEEE i need to knowwwww

[@SaIdin-gw9pp]

Связка огонь, спасибо за информацию.

[@kajalverma5612]

I am facing issue in the first line itself...i did as you said but App is not coming in the hosted window.

[@__skyler]

same, did u figure it out?

[@User8v45-1s2]

Hey I got it because the react is not rendering which means react is not taking over the root #div as expected, thats why issue with main jsx in react setup..do or paste the following in main.jsx after removing the present code import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; ReactDOM.createRoot(document.getElementById('root')).render( ); Now save it and run nmp run dev it should show the text now.

[@davidterrel777]

All of the books in the resources section are not loading it says those files do not exist, is that just for me or is it a problem with the files?

[@KhushiGarg-ux7hd]

where is the link of the site where we have to drop the skechfaab models? can you please provide it.