Back to videos

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

Overview

In this tutorial, we will walk through the process of building a professional-looking 3D portfolio using Three.js and React Three Fiber. Inspired by the sleek style of David Heckhoff’s portfolio, we’ll put our own spin on it with interactive features like avatar animations.

Projects Slider

In this fourth episode, we will bring everything together and complete the project by adding the final interactive elements.

We’ll integrate a 3D projects slider, enhance the scene with GSAP background animations, and even add video textures to the computer screen for a dynamic, polished look. By the end of this

Insights and Skills

In this tutorial, you’ll learn:

• Animate a 3D avatar based on scroll position

• Create an interactive 3D project slider

• Add dynamic background color transitions with GSAP

• Use video textures on a 3D object

Tech Stack

• React Three Fiber

• Three.js

• Framer Motion

• Framer Motion 3D

• GSAP

• TailwindCSS

• Mixamo

Code links

• Starter pack 🔗

• Final code 🔗

Resources

• Our main inspiration for the final portfolio

• React Three Fiber documentation

• R3F Drei

  #threejs #portfolio #r3f

Need help with this tutorial? Join our Discord community!