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

Поділитися
Вставка
  • Опубліковано 16 січ 2025

КОМЕНТАРІ • 654

  • @specex
    @specex Рік тому +61

    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
      @javascriptmastery  Рік тому +1

      Thanks for sharing!

    • @brunob.7792
      @brunob.7792 Рік тому +4

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

    • @AlThePal78
      @AlThePal78 Рік тому +2

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

    • @zojirushi1
      @zojirushi1 9 місяців тому

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

    • @huynguyen-dg2sh
      @huynguyen-dg2sh 7 місяців тому

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

  • @sandman.38
    @sandman.38 Рік тому +62

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

  • @kissclub
    @kissclub Рік тому +12

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

  • @imtiousislam2669
    @imtiousislam2669 10 місяців тому +17

    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.

  • @ValorantStage
    @ValorantStage Рік тому +20

    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!

  • @obed_m16
    @obed_m16 Рік тому +104

    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
      @javascriptmastery  Рік тому +5

      Cheers, enjoy!

    • @Smurfis
      @Smurfis Рік тому +6

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

    • @obed_m16
      @obed_m16 Рік тому

      Thanks for your counsel.

    • @ElementalRPG-pk7pp
      @ElementalRPG-pk7pp 7 місяців тому

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

  • @SirXtC
    @SirXtC Рік тому +14

    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
      @deadeye111 10 місяців тому

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

  • @thunder1889
    @thunder1889 Рік тому +6

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

  • @fnord_lander
    @fnord_lander 4 місяці тому +4

    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
    @kurniamassidik5798 Рік тому +5

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

  • @Contentline-i9e
    @Contentline-i9e Рік тому +11

    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!

  • @totrakuarber8786
    @totrakuarber8786 Рік тому +6

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

  • @OPGAMER.
    @OPGAMER. Рік тому +12

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

  • @felixboachieyiadom4457
    @felixboachieyiadom4457 3 місяці тому +1

    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

  • @AnasOuadi-p2t
    @AnasOuadi-p2t Рік тому +5

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

  • @Tanishfilms
    @Tanishfilms Рік тому +1

    Here he comes with another masterpiece 🫂

  • @BeeBee-fd7ls
    @BeeBee-fd7ls Рік тому +4

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

  • @griefandghewar
    @griefandghewar Рік тому +3

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

  • @samuelsamuel8920
    @samuelsamuel8920 4 місяці тому

    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 💪

  • @adityarajawat3185
    @adityarajawat3185 Рік тому +5

    Most demanded course❤

  • @RAJUSARKAR-zo7om
    @RAJUSARKAR-zo7om Рік тому +1

    I bet this is the best 3D web project video that is available on UA-cam💯💯💯

  • @BeyondNoise9
    @BeyondNoise9 9 місяців тому +2

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

  • @christopherlonzo
    @christopherlonzo Рік тому +3

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

  • @rohanthakur9159
    @rohanthakur9159 Рік тому +2

    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

  • @helpfull8010
    @helpfull8010 Рік тому +5

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

  • @animeprogrammer
    @animeprogrammer Рік тому +2

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

  • @danielharrison110
    @danielharrison110 7 місяців тому +2

    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

  • @harveerSingh-iy9xz
    @harveerSingh-iy9xz Рік тому +2

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

  • @codewithmirko1651
    @codewithmirko1651 Рік тому +2

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

  • @fiolagbadedaniel6982
    @fiolagbadedaniel6982 Рік тому +1

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

  • @tauqeerhusain7521
    @tauqeerhusain7521 Рік тому +1

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

  • @dezignlabs3318
    @dezignlabs3318 Рік тому +1

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

  • @deviskalo
    @deviskalo Рік тому +3

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

  • @raulparra4678
    @raulparra4678 Рік тому +1

    I love this MASTER. Quality 100%.

  • @G_O_J_O_S_A_T_O_R_U
    @G_O_J_O_S_A_T_O_R_U Рік тому +5

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

  • @TocaMarios
    @TocaMarios Рік тому +1

    BEST TUTORIAL ON UA-cam ❤🎉

  • @thegreatben27
    @thegreatben27 Рік тому +1

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

  • @harissaifi3939
    @harissaifi3939 Рік тому +2

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

  • @imheretosleep
    @imheretosleep Рік тому +1

    Dude I love you so much, thank you thank you so much for this free tutorial. I wish you good health and more blessing!

  • @showkatali2397
    @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..

  • @fiona-fifi4866
    @fiona-fifi4866 Рік тому +7

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

    • @javascriptmastery
      @javascriptmastery  Рік тому

      Please do!

    • @brancode404
      @brancode404 Рік тому

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

  • @10zDelek
    @10zDelek Рік тому +2

    give this guy a medal man

  • @prasathwebby1789
    @prasathwebby1789 Рік тому +4

    We are lucky to have a developer like you.🎉

  • @nirbhaymishra4222
    @nirbhaymishra4222 Рік тому +3

    Thanks for the video 🎉❤

  • @ChrisTian-ox5nr
    @ChrisTian-ox5nr Рік тому

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

  • @umakantshinde1597
    @umakantshinde1597 11 місяців тому

    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.

  • @marioalbornoz9962
    @marioalbornoz9962 6 місяців тому

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

  • @PetrandoRichard
    @PetrandoRichard 10 місяців тому +1

    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😊

  • @trade-with-lee
    @trade-with-lee Рік тому +1

    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.

  • @badhonbiswas3751
    @badhonbiswas3751 Рік тому +1

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

  • @48_subhambanerjee22
    @48_subhambanerjee22 Рік тому +1

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

  • @Den-yg4wz
    @Den-yg4wz Рік тому +2

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

  • @syndg
    @syndg Рік тому +4

    Absolutely amazed by your content! Keep it up man!

  • @olivierbakoyogo1324
    @olivierbakoyogo1324 Рік тому +18

    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 🙏🏿🙏🏿🙏🏿🙏🏿

  • @rahulgupta7800
    @rahulgupta7800 Рік тому +1

    Lovely ! thank u for such amazing portfolio.

  • @SaIdin-gw9pp
    @SaIdin-gw9pp 7 місяців тому

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

  • @taiwojolomi
    @taiwojolomi Рік тому

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

  • @MohammadShariq-y2y
    @MohammadShariq-y2y 11 місяців тому

    thanks alot man for this great full tutorial🥰😃

  • @bjol_Dg
    @bjol_Dg Рік тому

    01:20:00 - this needs checking:
    useFrame(({ clock, camera }) => {
    // Ensure birdRef.current is defined before accessing its properties
    if (birdRef.current) {
    birdRef.current.position.y = Math.sin(clock.elapsedTime) * 0.2 + 2;
    }

  • @prathamsawant2754
    @prathamsawant2754 Рік тому +2

    Man thankyou for everything 🥰

  • @RajvardhanPawar
    @RajvardhanPawar 27 днів тому

    Thank you bro, great one !

  • @sumitrodrigues
    @sumitrodrigues Рік тому +2

    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.

  • @aftab_alam48
    @aftab_alam48 Рік тому +2

    The Legend is back!!!❤

  • @khaled-0
    @khaled-0 11 місяців тому

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

  • @jeb1231
    @jeb1231 11 місяців тому

    Thanks a lot for your tutorial, it's a cool project.

  • @pungushe
    @pungushe Рік тому +1

    Wow that's cool. Many Many thanks 😊

  • @untold8718
    @untold8718 Рік тому

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

  • @KingofShorts08
    @KingofShorts08 Рік тому +41

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

  • @bobbyG883
    @bobbyG883 Рік тому

    Great Project again, Thank you!!🤩🤩

  • @fwluff7515
    @fwluff7515 5 місяців тому

    From where you get all those ideas and all the inspiration? I saw some other UA-camrs 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. ✌️💪

  • @YashwantIIITD
    @YashwantIIITD Рік тому

    i was waiting for this projects thanku❤😁

  • @peachsprite
    @peachsprite 7 місяців тому

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

  • @chairilaliart
    @chairilaliart Рік тому +1

    This is awesome 🔥🔥

  • @exploit.6848
    @exploit.6848 Рік тому +1

    WOW this is so creativee!!

  • @developingfaizaan
    @developingfaizaan 8 місяців тому +2

    Nice one! 🔥

  • @deepakjamra5502
    @deepakjamra5502 4 місяці тому

    Thank you so much Sir ❤

  • @HarsheelKashyap
    @HarsheelKashyap Рік тому +1

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

  • @PranavaKumar-u4u
    @PranavaKumar-u4u Місяць тому

    Hey dude! Thanks for teaching us such awesome contents. Can you please tell me which extension you use for the vscode. Since i does autocomplete of the code and is pretty cool.

  • @vivekkumar-pc1xy
    @vivekkumar-pc1xy Рік тому +1

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

  • @cterogene
    @cterogene Рік тому

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

  • @bulelaniquinton7272
    @bulelaniquinton7272 Рік тому

    great video broh, this was comprehensive yet valuable

  • @SZBrosOfficial
    @SZBrosOfficial Рік тому +1

    Thanks for such amazing Tutorial.

  • @KashishSingh-q3p
    @KashishSingh-q3p Рік тому

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

  • @cod3r.mirza1
    @cod3r.mirza1 Рік тому

    So Beautiful, So Elegant, Just Looking Like A Wowwwwwwwwwww😀😀😀😀😀😀😀 Amazing

  • @outerspacesoph4522
    @outerspacesoph4522 Рік тому +1

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

  • @CyrilSalamite
    @CyrilSalamite Рік тому +1

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

  • @arhampersonal
    @arhampersonal 11 місяців тому

    00:33:32 - 3d Models

  • @mk9999ful
    @mk9999ful Рік тому +1

    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.

  • @YaswanthKanjarla
    @YaswanthKanjarla Рік тому

    The Man is back with another amazing video

  • @mikasa-knowles
    @mikasa-knowles Рік тому +3

    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 😊

  • @yourinterest5188
    @yourinterest5188 Рік тому +2

    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

  • @gurvinder1613
    @gurvinder1613 Рік тому

    9:15 what is that extension that is giving you suggestions while coding ?? btw very nice work

  • @Yesar1
    @Yesar1 Рік тому +1

    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

  • @jkfuturetech-education6086
    @jkfuturetech-education6086 Рік тому

    Good Day Adrian, do a video on utilizing openai function calls to access the web etc

  • @dmlaozturk465
    @dmlaozturk465 4 місяці тому

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

  • @gonzalodiez1718
    @gonzalodiez1718 Рік тому

    Amazing what you have done!!! Can you share how to modify the flag on the airplane?

  • @briannguyen2464
    @briannguyen2464 Рік тому +1

    This is awesome project!

  • @CodeInnovateDyO
    @CodeInnovateDyO Рік тому

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

  • @jackullator3516
    @jackullator3516 Рік тому

    Great tutorial! Wich vs theme are you using? Can´t find it and it looks superb

  • @welldiness
    @welldiness 5 місяців тому

    hello @adraian i noticed you didnt implement the footer in contact that has github linkedin etc