I Built a 3D Developer Portfolio Website // Three.js + React + Tailwind

Поделиться
HTML-код
  • Опубликовано: 30 май 2024
  • Host your website with Hostinger (use code FORREST): hostinger.com/forrestknight
    I built myself a 3D developer portfolio website to replace my minimal portfolio and compliment my GitHub profile page and terminal website. This is a custom website I've been wanting to build for a while, that has the "wow" factor of my terminal website thanks to three.js 3D graphics, interactive animations, and parallax, while maintaining an easy-to-use and intuitive design. This website gives a prospective client or employer a quick look at me and my work as a developer, showing them what I can do with not just the projects listed, but the website itself. And yes, I know the parallax gets tricky when shrinking the window, but I'll fix that... one day... maybe. Maybe one of y'all can fix it for me.
    If you're reading this part, let me know what you think of this new video style I'm trying out, and comment "SPACEMAN!!!" below.
    Technologies:
    Vite - Build tool for the boilerplate and structure
    JavaScript - Programming language
    React - JavaScript library for building user interfaces
    Tailwind - CSS framework
    Three.js - Animated 3D graphics
    Framer Motion - Interactive animations
    Hostinger - Web hosting platform
    GitHub - Version control & CI/CD
    Extra Resources:
    Code Repo by me - github.com/ForrestKnight/3d-p...
    Spaceman by wallmasterr - sketchfab.com/3d-models/tenhu...
    Planet Surface by jongjawi - stock.adobe.com/images/landsc...
    Position Animation by Teshank - github.com/teshank2137/portfolio
    If you're a developer, sign up to my free newsletter Dev Notes 👉 www.devnotesdaily.com/
    If you're a student, checkout my Notion template Studious: notionstudent.com
    Don't know why you'd want to follow me on other socials. I don't even post. But here you go.
    🐱‍🚀 GitHub: github.com/forrestknight
    🐦 Twitter: / forrestpknight
    💼 LinkedIn: / forrestpknight
    📸 Instagram: / forrestpknight

Комментарии • 209

  • @dennisdegraphicsdynamo_999
    @dennisdegraphicsdynamo_999 28 дней назад +186

    the tutorial will generate more views than you expected

  • @user-ri1wu3ll8k
    @user-ri1wu3ll8k 28 дней назад +41

    WoW, your video's are always good, but this one is another level

  • @h4unt3dfx
    @h4unt3dfx 27 дней назад +21

    I teach a personal development programming class at a local university (not towards a degree) and I always refer people to your RUclips. The new site looks awesome. Great stuff, man!

  • @negasonicteenagewarhead
    @negasonicteenagewarhead 19 дней назад +110

    And I cloned it

  • @protojerry
    @protojerry 25 дней назад +12

    Really awesome stuff. I was running out of ideas for a game website, this just nudged me in the right direction.
    Love the presentation style! Can't wait for a full tutorial on this ^^

  • @DJRanoia
    @DJRanoia 25 дней назад +6

    I love the layered scroll.

  • @amenu.youtube
    @amenu.youtube 24 дня назад +9

    I’m interested to the project but I like the way the guy talk easygoing and make it fun. Honestly keep it up like that bro.

  • @perylize
    @perylize 2 дня назад

    I love this style of presentation. Excellent video Forrest.

  • @ypathan420
    @ypathan420 28 дней назад +4

    love the new style

  • @theailab754
    @theailab754 24 дня назад +1

    I honestly didn’t know I needed a video like this

  • @kylebaker8548
    @kylebaker8548 25 дней назад +3

    Forrest, been subscribed for some time now. Love your sense of humor. Please do a full tutorial!

  • @chrisjones8829
    @chrisjones8829 28 дней назад +1

    This is amazing. You are amazing. Very inspiring and motivating, as well.

  • @lic.sebastianrodrigonajle964
    @lic.sebastianrodrigonajle964 22 дня назад

    You blew my head up bro. Literally. Congrats Bro!! you are a Genius!! Keep going!! Greets from Argentina!!

  • @GrahamBillington
    @GrahamBillington 24 дня назад +1

    I loved this format

  • @TannerBarcelos
    @TannerBarcelos 28 дней назад +3

    New style goes hard

  • @Iamzeku
    @Iamzeku 22 дня назад +1

    had me cracking up the whole vid! LOVE IT.

  • @Joggll
    @Joggll 24 дня назад

    Man that's such a good video. It really inspires

  • @rayanfernandes2631
    @rayanfernandes2631 21 день назад

    That's an awesome project bro, Just keep making more

  • @YannisBABINENI
    @YannisBABINENI 26 дней назад +1

    We definitely need the tutorial for this website. Amazing work dude !!

  • @terrellp133
    @terrellp133 21 час назад

    Wow this was amazing, I lack confidence when creating a project so much that I even don't start haha, but watching videos like this and being able to pause and add my own creativity to it is amazing and gives me more confidence when you even state how you don't know what you're doing. I used to use Photoshop and Illistrator like 17 years ago almost everyday on internet forums and used to hack video games but now I see how beneficial it is to just go through a walkthrough similar to this and to keep watching walkthroughs as well. I always enjoyed your content thank you for making this!

  • @instiinct_defi
    @instiinct_defi 22 дня назад

    Great video! Definitely think your tutorial will go very well.

  • @DARKLABIB
    @DARKLABIB 22 дня назад

    ouu your videos are so interesting ...love to watch more

  • @wecanfixitnow
    @wecanfixitnow 20 дней назад +1

    WoW, you are the first and most effictive mentor for me....

    • @sheilasharon2283
      @sheilasharon2283 19 дней назад

      first software engineering mentor i had 🔥

  • @alfianrsa
    @alfianrsa 23 дня назад

    best video i have watched so far

  • @mohamedazizkefi5533
    @mohamedazizkefi5533 19 дней назад +1

    I think this is the first Time commenting on a video / tutorial on youtube ! AND DAMN MY MAN YOU NAILED IT !
    Sick of all these youtubers acting like shit is easy and saying things we don't really understand and they don't break out , but here you send the message :
    ALL of us are not 100% sure of wtf we are doing , but the we are doing it anyway , and the fact that we keep pushing toward doing it , even tho it might be confusing sometimes , this is all what programming is about !

  • @KnuffelChiisai
    @KnuffelChiisai 9 дней назад

    Looks really awesome

  • @Carlos-gj1wj
    @Carlos-gj1wj 21 день назад

    Great video, thanks for sharing! 😁

  • @javifontalva7752
    @javifontalva7752 27 дней назад +5

    I'd love to get the tutorial. KEEP IT UP!!!

  • @davida8216
    @davida8216 15 дней назад

    I commented this video(for RUclips algorithms) because this montage is so cool and I want everybody to see this

  • @ariyoujahan9662
    @ariyoujahan9662 22 дня назад

    It was amazing and fun.

  • @anhngocle738
    @anhngocle738 12 дней назад

    omg, this is so genius

  • @samirhilario1436
    @samirhilario1436 15 дней назад

    Can’t wait for the tutorial

  • @iamnotahuman2172
    @iamnotahuman2172 16 дней назад

    earned my subscribe, that content is dope

  • @user-ww4gz7wx4t
    @user-ww4gz7wx4t 22 дня назад

    The hero section or the parallax section is awesome, the rest seems i also can do it.

  • @merabet.faycal
    @merabet.faycal 22 дня назад

    You got it,amma be watching it every night . Just do it give it to uuus

  • @shahzadsheikh1459
    @shahzadsheikh1459 25 дней назад

    you are doing awesome

  • @shuya89100
    @shuya89100 28 дней назад

    Great Video, I hope a tutorial soon !

  • @egedesolomon7454
    @egedesolomon7454 8 дней назад

    Who's this guy😂, learnt more than expected. Thanks mate 🙌

  • @TomaNeagu
    @TomaNeagu 28 дней назад

    Great Video!

  • @dFuZe_Dev
    @dFuZe_Dev 28 дней назад

    nice!!! very cool

  • @shridhar_singh
    @shridhar_singh 26 дней назад

    Damn Forrest, this is amazing! Please do the tutorial

  • @alextrotman9317
    @alextrotman9317 5 дней назад

    I look forward to the tutorial

  • @isaacoyeniyi9117
    @isaacoyeniyi9117 15 дней назад

    brooo!
    I thought this video was about 2 years old!!!
    Your content is nice.
    You have my subscribe.
    And you got 90k! 😂😂

  • @sairajpoojari2490
    @sairajpoojari2490 11 часов назад

    Bro this is really great. If possible please make a complete tutorial

  • @flwless3226
    @flwless3226 17 дней назад

    Page looks great, i would love a tutorial
    i am trying to build my own personal / portfolio website with some 3D stuff right now, so the tutorial would come in handy

  • @icyrealm7
    @icyrealm7 27 дней назад

    Cool video!!

  • @johno8760
    @johno8760 7 дней назад

    Whenever youre doing the tutorial, please provide helpful concepts for us to expand on these resources/tools so we can at least learn to apply it to our own ideas

  • @sherumov6472
    @sherumov6472 23 дня назад +1

    100 percent representation of web developer

  • @SaifulIslam-pe3hn
    @SaifulIslam-pe3hn 24 дня назад

    That tutorial will be ready awesome. You better be working on the tutorial.

  • @hussainbhagat8855
    @hussainbhagat8855 24 дня назад

    Gotta make the tut soon

  • @jameydyar2333
    @jameydyar2333 19 дней назад +1

    I’d like to see the tutorial. I want to take a similar project with my personal website

  • @ghofranedarragi5601
    @ghofranedarragi5601 10 дней назад

    amazing work ! full tutorial plzzz

  • @DustinYoung-dr4df
    @DustinYoung-dr4df 15 дней назад

    Great style! Looking forward to more. Perhaps a missed opportunity to make your 3D character move more in 3D?

  • @DKSubconscious
    @DKSubconscious 23 дня назад

    Great video 👍 I’m 5 mins in and still wondering why you need react and vite though. Node, sass and a template engine with a json file acting as a fake db to pass into the templates if you want to get crazy would compile beautifully into static html and hardly any download time.

  • @yousefosman8094
    @yousefosman8094 25 дней назад

    I'm sharing this with everyone I know and their mother so we get the tutorial

  • @vinitgirde
    @vinitgirde 20 дней назад

    Amazing

  • @shivayramrathy300
    @shivayramrathy300 27 дней назад

    This looks great. We need a tutorial please🙏

  • @somesh6216
    @somesh6216 18 дней назад

    TUTORIAL GANG!

  • @SwapnaRoyGhosh
    @SwapnaRoyGhosh 28 дней назад +1

    Make a tutorial on easiest way to create parallax effect, it will be great to introduce us with a new js library also which make this stuff lots more easier...

  • @ayushmaangupta5956
    @ayushmaangupta5956 21 день назад

    hell yeah man need the tutorial

  • @mushkansingh5757
    @mushkansingh5757 21 день назад

    Full tutorial 🙌🙌

  • @kaushalkishore4661
    @kaushalkishore4661 16 дней назад

    well sir i am very much waiting for the tutorial

  • @user-jt7ro7gq6i
    @user-jt7ro7gq6i 25 дней назад

    Well that was ahhhhhhh !!!!!!!!!!!!

  • @lesamir2010
    @lesamir2010 28 дней назад +1

    Make the tutorial for this man. It's really cool and inspiring.

  • @LongThanh-xg5uf
    @LongThanh-xg5uf 13 дней назад

    The theme you used is very beautiful, can I ask for its name?

  • @Lordmaryo
    @Lordmaryo 12 дней назад

    Chop chop tutorial boy 👨🏽‍🍳

  • @nipungrover7058
    @nipungrover7058 20 дней назад +1

    You got 60 k so....i hope you keep your word

  • @ashutosh_tiwari
    @ashutosh_tiwari 23 дня назад +1

    Make a full tutorial bro with working contact section!!

  • @GoodBalak
    @GoodBalak 6 дней назад

    As a backend dev I'm impressed. Any reason I shouldn't be?
    I feel like I should try learning this too.

  • @craig9910
    @craig9910 26 дней назад +1

    SPACEMAN!!!

  • @juanmacias5922
    @juanmacias5922 12 дней назад

    Nice Hero background. ;)

  • @pratheekr524
    @pratheekr524 5 дней назад

    "wham bam alakazam your 3D models IN MY RAM"
    -ForrestKnight

  • @Arshiyasheoran
    @Arshiyasheoran 12 дней назад

    YES YES YES

  • @marekcvoliga3813
    @marekcvoliga3813 15 дней назад

    GIMME THE TUTORIAL U ARE REALLY GOOD AT THIS AND IM BEGGINER WHOS TRYING TO LEARN

  • @TRLYx
    @TRLYx 24 дня назад

    Good project name, but it needs more power.
    Could you kick up the 4d3d3d3?

  • @omsakhare08
    @omsakhare08 24 дня назад

    can you make full tutorial on it

  • @ep4r4
    @ep4r4 15 дней назад

    Haz el tutorial, con gusto me lo veré.

  • @alivdas2242
    @alivdas2242 19 дней назад

    make some tutorail vedios based on thre.js and react...it will be helpful to understand the new tecnologies on web-dev

  • @quixxate8659
    @quixxate8659 15 дней назад

    I see a tutorial in my near future

  • @popnx
    @popnx 15 дней назад

    im subscribing

  • @amandubey5287
    @amandubey5287 26 дней назад

    Alritgh we need the tutorial please. And where is the live link ????

  • @shahzadsheikh1459
    @shahzadsheikh1459 25 дней назад

    which software use for screen recording please tell me

  • @mohamedelbougrfaoui
    @mohamedelbougrfaoui 23 дня назад

    Man you make React JS looks super easy LOL

  • @ankitdas2197
    @ankitdas2197 22 дня назад

    50k almost there

  • @increase-chrisalaede4813
    @increase-chrisalaede4813 17 дней назад

    Waiting

  • @sethhollistah8504
    @sethhollistah8504 25 дней назад

    I hesitate to put some feedback because deez skillz still ain't shat but the sites a little laggy when I scroll by the spaceman and also the section about dev notes didn't actually link me to the dev notes newsletter but also I may just be stupid

  • @mandongpedroza7486
    @mandongpedroza7486 22 дня назад

    50k views, time for the tut :))

  • @_akiaura
    @_akiaura 21 день назад

    pls does anyone know what theme he uses?

  • @latakantsharma3134
    @latakantsharma3134 27 дней назад

    What icon theam you r using

  • @user-yt4gx7ts7w
    @user-yt4gx7ts7w 22 дня назад

    I learn data science so no matter what is happening here but the VS Code theme ?

  • @AngelGabriel70
    @AngelGabriel70 22 дня назад

    I need that tuto

  • @joshr96
    @joshr96 23 дня назад +1

    Think you hit a quota on your contact form or something since it stopped working. So I'll just drop my quick message here...
    "Nice website! Enjoyed the video and gave me some inspiration for building out my own portfolio site."
    🙂

  • @thepathofthinkers
    @thepathofthinkers 5 дней назад

    I need the turtorial

  • @ajinomoto-tf9zr
    @ajinomoto-tf9zr 25 дней назад +1

  • @adsonmettler3046
    @adsonmettler3046 24 дня назад

    I will share this video to everyone, even my mom.. Tutorial pleeeeease!!

  • @rajaark5643
    @rajaark5643 26 дней назад

    Why are u not using typescript?

  • @porettouqp2684
    @porettouqp2684 20 дней назад

    64k views ,u gotta make that tutorial man😁

  • @rappingtornado1417
    @rappingtornado1417 17 дней назад +1

    please what did he use to create the svg layers.

    • @air-ick5578
      @air-ick5578 10 дней назад

      Adobe illustrator I think

  • @yadahdaka1039
    @yadahdaka1039 28 дней назад +1

    Make the tutorial please 🙏

  • @athaanggoro3974
    @athaanggoro3974 27 дней назад

    Kamu lucu, cara memberikan penjelasan sangat menyenangkan😂🎉