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]

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

[@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!

[@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?

[@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 😊

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

[@kissclub]

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

[@OPGAMER.]

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

[@javascriptmastery]

My pleasure!

[@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

[@BeyondNoise2235]

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

[@thunder1889]

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

[@javascriptmastery]

That's awesome!

[@AnasOuadi-p2t]

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

[@javascriptmastery]

Amazing! ❤️

[@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

[@prasathwebby1789]

We are lucky to have a developer like you.🎉

[@javascriptmastery]

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

[@kurniamassidik5798]

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

[@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!

[@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!

[@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 💪

[@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

[@RAJUSARKAR-zo7om]

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

[@javascriptmastery]

Wow, thanks!

[@animeprogrammer]

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

[@javascriptmastery]

Thank you!

[@harveerSingh-iy9xz]

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

[@javascriptmastery]

Appreciate that

[@adityarajawat3185]

Most demanded course❤

[@javascriptmastery]

Yess!

[@griefandghewar]

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

[@javascriptmastery]

That's amazing!

[@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!

[@10zDelek]

give this guy a medal man

[@javascriptmastery]

🥇

[@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

[@KingofShorts08]

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

[@javascriptmastery]

Thank you!

[@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!

[@chrisalonzo1252]

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

[@thegreatben27]

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

[@javascriptmastery]

Thanks, will do!

[@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! 🙏

[@helpfull8010]

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

[@javascriptmastery]

Thank you so much 😀

[@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

[@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;

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

[@TocaMarios]

BEST TUTORIAL ON KZbin ❤🎉

[@javascriptmastery]

Thank you!

[@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

[@syndg]

Absolutely amazed by your content! Keep it up man!

[@javascriptmastery]

Thanks a ton!

[@CyrilSalamite]

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

[@raulparra4678]

I love this MASTER. Quality 100%.

[@javascriptmastery]

Appreciate it!

[@thomasgurchiek3301]

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.

[@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!

[@shuioso5105]

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.

[@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😊

[@aftab_alam48]

The Legend is back!!!❤

[@javascriptmastery]

Yess! 🔥

[@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!

[@harissaifi3939]

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

[@javascriptmastery]

Almost!

[@dmlaozturk465]

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

[@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. ✌️💪

[@lefikamoalosi]

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

[@Tanishfilms]

Here he comes with another masterpiece 🫂

[@javascriptmastery]

Appreciate it!

[@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!

[@developingfaizaan]

Nice one! 🔥

[@orliyah-kotelo]

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

[@nirbhaymishra4222]

Thanks for the video 🎉❤

[@javascriptmastery]

You got it!

[@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

[@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

[@cterogene]

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

[@Pulsemastery]

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]

Glad it was helpful!

[@devilsenpai9546]

anyone having problem while working with typescript, animate property is throwing error solution: try to install @three/types

[@vivekkumar-pc1xy]

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

[@MorphTW]

Are you recording from Croatia? At 04:06 mark, your country is set to Croatia. Welcome my friend! Enjoy your holidays ❤

[@JoeMox-p8i]

He is from croatia bro

[@MorphTW]

​@@JoeMox-p8i Wow! Never could tell that. His english is perfect.

[@godzillazxy2805]

can we choose a different 3D model ??😅

[@Worldfood228]

I just want another video of three js but its very cool portfolio i want another portfolio can you please made it another video on it thank you 🎉❤❤

[@the_rings_of_saturn]

Check my channel for other Three.js projects.

[@Worldfood228]

@@the_rings_of_saturn thanks yeah great content I love this 💥💥

[@axela.5138]

Thank you for the tutorial. Please make a tutorial where you can zoom when clicking a 3D component

[@suhailsayyed3210]

Sir what is the pre requisite for this amazing 😍 project ..?

[@javascriptmastery]

React :)

[@jojo-gg1iz]

love it when the link is supposed to be in the description but its not @34:25

[@gordonli888]

Can you make a booking app for salon/spa

[@AtticusColdfield]

Thank you a thousand times, Adrian! I followed your tutorial and made my own first web-site! (I remodeled the island and changed some logic, but everything else is almost the same)

[@sumitrodrigues1988]

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.

[@ChrisTian-ox5nr]

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

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

[@rubancharles8998]

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

[@CodeInnovateDyO]

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

[@rahulgupta7800]

Lovely ! thank u for such amazing portfolio.

[@YaswanthKanjarla]

The Man is back with another amazing video

[@javascriptmastery]

Thank you!

[@digitaldupo]

problem with this is the loading and processing time to load such a website. Will it take less than 5 seconds to load the entire website asset, etc. It's hard to assume processing time nowadays, such 3d websites can't be inclusive. But 3d websites are quite unique and very innovative as a first step towards the future.

[@helviohild7384]

Other way to create jsx file from model is using npx gltfjsx

[@48_subhambanerjee22]

THE LITERAL GOD OF JAVASCRIPT ☠️☠️☠️💀💀💀💀

[@outerspacesoph4522]

thank you so much for this! so excited to get to work 🎉

[@javascriptmastery]

Good luck!!

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

[@BramSyah-qg1fc]

Pls more content like this, please...

[@javascriptmastery]

More to come!

[@dezignlabs3318]

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

[@javascriptmastery]

Enjoy!

[@akshayKumar-kx9mm]

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🙏

[@javascriptmastery]

Just from the internet :)

[@KashishSingh-q3p]

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

[@javascriptmastery]

Awesome!

[@meheraabarvy4134]

Here we go again with another amazing project!

[@javascriptmastery]

Thanks again!

[@SZBrosOfficial]

Thanks for such amazing Tutorial.

[@javascriptmastery]

Welcome 😊

[@Ba-dastooor]

I also wanna learning making such websites please make a whole playlist of threejs

[@javascriptmastery]

Will do!

[@tauqeerhusain7521]

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

[@javascriptmastery]

Thank you so much 😀

[@badhonbiswas3751]

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

[@javascriptmastery]

You're welcome!

[@untold8718]

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

[@javascriptmastery]

Most welcome 😊

[@bulelaniquinton7272]

great video broh, this was comprehensive yet valuable

[@javascriptmastery]

Awesome!

[@exploit.6848]

WOW this is so creativee!!

[@javascriptmastery]

Enjoy!

[@Kokouvi_el_mejor]

Adrian thanks

[@javascriptmastery]

You got it!

[@deepakjamra5502]

Thank you so much Sir ❤

[@SaIdin-gw9pp]

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