Build a 3D Portfolio with React Three Fiber - Projects Slider

In this final part we will finish building our 3D portfolio with React Three Fiber.
In this fourth chapter, we will:
- Animate our avatar based on the scroll through the different sections
- Add a 3D project slider section
- Add background color animations with gsap
- Add video texture into the computer screen
Get the starter pack here 🔗
github.com/wass08/r3f-portfol...
Our main inspiration for the final portfolio
david-hckh.com/
#threejs #r3f #portfolio
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
lessons.wawasensei.dev/
Final source code
github.com/wass08/r3f-portfol...
Framer motion
www.framer.com/motion/introdu...
Framer motion 3D
www.framer.com/motion/three-i...
GSAP
greensock.com/gsap/
Tailwind
tailwindcss.com/docs/
React Three Fiber documentation
docs.pmnd.rs/react-three-fibe...
Mixamo
www.mixamo.com/
R3F Drei
github.com/pmndrs/drei
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
00:46 - Character position
02:35 - Avatar animation between sections
15:05 - Projects 3D Slider
27:13 - Background animation
32:36 - Video texture
37:11 - Final result
37:45 - Conclusion
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
/ @wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
/ discord
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
💻 My website :
www.wawasensei.dev

[@WawaSensei]

Do you want a 5th part? 🔥 If so, what would you absolutely want me to cover?

[@pulkitmathur9379]

how to receive the messages sent by the viewer to us, and how make it responsive for the mobile as well

[@WawaSensei]

Let's go! By the way for the form, if you're too impatient for next week and want to already make it, I'll be using formspree.io/ 🙌

[@Andrew-Tsegaye]

I 100% definitely agree I don't care if you're even making more than 30+ videos for a precious capstone project. Cuz you're helping us a lot! c u next week with the 5th part, love you! 😘😍🥰

[@roomicnos]

Yes responsive with some animation ideas that we can implement for displaying job experience and education.

[@iamadagostino]

Just enrolled and let me tell you that I’m eager to learn. Thank you for sharing such brilliant content!

[@bharathram89]

You are awesome! I can't wait for the responsive design video! im working on my own profile taking a lot of what you have. Thank you for this!

[@WawaSensei]

Thank you so much! Will be released today 🚀 Please share your portfolio once it's done! 🔥

[@kekkek5516]

This is very cool, I hope you will bring this project to fruition.

[@WawaSensei]

It will be live on Friday and I hope you'll like the final responsive result 🙌

[@thoeni]

thanks a lot and yes, 5th part with responsive would be really awesome! 🙂

[@WawaSensei]

Working on it, will be ready this week 🙌

[@Andrew-Tsegaye]

Perfect! Brother you awesome!

[@WawaSensei]

Owww 🥰 Thank you brother!

[@kansai_gaijin]

Beautiful!

[@WawaSensei]

Not 1% close to how beautiful you are 😍

[@rafalmo5258]

Thank you for making this type of tutorial available for free.

[@WawaSensei]

You're welcome! Thank you very much for your comment 🙏

[@Venkatesh-vm4ll]

This is amazing, thank you

[@WawaSensei]

🤗 thanks for being a great support!

[@HuynhLuong227]

great, thanks for sharing

[@WawaSensei]

Thank you too for the support 😍

[@priyanshusahu4511]

man, you have the most underrated channel in the universe

[@WawaSensei]

🙏 You just warmed my heart 😍

[@andcaru]

Great! Ill try to adapt this workflow to mine !

[@WawaSensei]

💪

[@CommunityAllSeasons]

Definitely need responsive! Would love to see how you'd do theming in react-fiber too.

[@WawaSensei]

Noted! I also want to do it 🤭 Let's make it happen next Friday 🚀

[@ZhengdongPeng]

I'm curious to know how to make the "skill bar" or "progress bar" animation

[@user-zm1of2sf1s]

Cool🎉🎉🎉

[@WawaSensei]

🙌🙌🙌

[@nousuyadagiri96]

i did not understand where u can edit the that 3d model could u please tell me that

[@omarfullstack]

Thank you so much for this video , i have a small question inside 3d slider , can i use slick slider instead of group and add each element to the page instead ? because on mobile the user won't be able to drag the slider to the right and left

[@WawaSensei]

🙏 yes of course likes the skills you can set it into HTML and then add slick to it

[@krish420]

would really love to see the responsive design!!

[@WawaSensei]

Coming soon 🥰 twitter.com/wawasensei/status/1670314893243973633

[@hwapyongedouard]

cool but is it possible to see how you created the starter files and npm not yarn ?

[@WawaSensei]

Hello this is a free lesson on my react three fiber course lessons.wawasensei.dev/courses/react-three-fiber/lessons/setup About npm vs yarn this is literally the same thing but with npm install and npm run dev instead of yarn and yarn dev

[@dcrecords100]

Please, tackle responsiveness, as I think that's very difficult to achieve with such a project. Thank you on behalf of your community!

[@WawaSensei]

You won't be disappointed! Here's a preview 🤭 twitter.com/wawasensei/status/1670314893243973633 (And thanks a lot for your kind comment!)

[@dcrecords100]

@@WawaSensei cannot wait! The way you teach is so easy to understand, I am sure your channel will blow up if you keep up the good work. Again, thank you on behalf of everyone!

[@WawaSensei]

Glad to read this! Thank you so much 😍

[@lucbruyant2832]

Like everyone said, responsive would be perfect :)

[@WawaSensei]

Thanks! I'm preparing it for next week 🙌

[@lucbruyant2832]

@@WawaSensei Nice ! By the way did you ever get R3F working correctly with React Native for the same kind of effects (adding external models with textures and animations) ? I am struggling a lot with this and wondering if this is even functional at all 😅

[@WawaSensei]

@@lucbruyant2832 Hey, sorry never tried yet (while I'm a React Native developer 🤭 maybe I should do a video about it) For now, maybe ask on the pmndrs Discord you should find help 🙏

[@lucbruyant2832]

@@WawaSensei Thanks a lot ! Yes a video would be very cool, there is not so much relevant and up to date content on react native

[@skylake315]

sensei i have an issue in my code while i inspect browser the interface of my character always tpose before i scrolling my browser if i come to top the character is normaly like this video the issue is " errors.mjs:8 You are trying to animate from "undefined" to "0". undefined is not an animatable value - to enable this animation set undefined to a value animatable to 0 via the `style` property. "

[@WawaSensei]

Hey, consider joining the Discord lessons.wawasensei.dev/discord

[@marcellkey]

@@WawaSensei I joined your discord but so far I had no help on few code issues of mine