Build a 3D Portfolio with React Three Fiber - Responsive

Опубликовано: 23 Июнь 2023
на канале: 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

Смотрите видео Build a 3D Portfolio with React Three Fiber - Responsive онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Wawa Sensei 23 Июнь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 20,439 раз и оно понравилось 493 людям.

47,698