Build a 3D Portfolio with React Three Fiber - Responsive

Wawa Sensei
Wawa Sensei
17.4 هزار بار بازدید - پارسال - Let's focus on responsive with
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: discord

📸 Instagram :
Instagram: wawa.sensei

🎎 Facebook :
Facebook: wawasenseiyt

🐦Twitter :
Twitter: wawasensei

🐦TikTok :
TikTok: wawasensei08

💻 My website :
https://www.wawasensei.dev
پارسال در تاریخ 1402/04/02 منتشر شده است.
17,408 بـار بازدید شده
... بیشتر