Build a 3D Portfolio with React Three Fiber - Responsive

Published: 23 June 2023
on channel: Wawa Sensei

20,439

493

Let's focus on responsive with React Three Fiber and three.js

In this fifth bonus chapter, we will:
Make our 3D portfolio responsive
Add a loading screen
Fine-tune animations
Connect the contact form

Final result demo
https://r3f-portfolio-responsive.verc...

Get the starter pack here 🔗
https://github.com/wass08/r3f-portfol...

Our main inspiration for the final portfolio
https://david-hckh.com/

#threejs #r3f #portfolio

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/

Final source code
https://github.com/wass08/r3f-portfol...

FormSpree
https://formspree.io/

Framer motion
https://www.framer.com/motion/introdu...

Framer motion 3D
https://www.framer.com/motion/three-i...

GSAP
https://greensock.com/gsap/

Tailwind
https://tailwindcss.com/docs/

React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...

Mixamo
https://www.mixamo.com/

R3F Drei
https://github.com/pmndrs/drei

▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00 - Intro
00:37 - UI Responsive
07:09 - Cursor
08:04 - Wireframe mode skills
08:49 - Smoothen animations
09:58 - 3D Responsive
21:02 - Loading screen
27:11 - Contact form
30:52 - Final result
31:16 - 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 :
https://www.wawasensei.dev

Watch video Build a 3D Portfolio with React Three Fiber - Responsive online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 23 June 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 20,439 once and liked it 493 people.