## 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. 

## Framer Motion Scroll Animations

This third episode focuses on enhancing our project with a smooth and interactive UI. We’ll integrate TailwindCSS for styling and use Framer Motion to add 2D and 3D scroll animations, making the experience more dynamic and engaging.

## Insights and Skills
In this tutorial, you’ll learn:

- **Set up TailwindCSS** for quick and efficient UI styling
- **Implement 2D & 3D scroll animations** using Framer Motion
- **Create a smooth scrolling experience** with GSAP
- **Animate a custom menu** that interacts with the 3D scene
- **Add camera animations** for a more immersive navigation
- **Customize a mouse cursor** for a polished UX

## Tech Stack
- React Three Fiber 
- Three.js 
- [**Framer Motion**](https://motion.dev/docs/react-quick-start)
- [**Framer Motion 3D**](https://motion.dev/docs/react-quick-start)
- [**GSAP**](https://greensock.com/gsap/)
- [**TailwindCSS**](https://tailwindcss.com/docs/)

## Code links

- [Starter pack](https://github.com/wass08/r3f-vite-starter) 🔗
- [Final code](https://github.com/wass08/r3f-mesh-portal-material) 🔗

## Resources
- [Our main inspiration for the final portfolio](https://david-hckh.com/)
- [React Three Fiber documentation](https://r3f.docs.pmnd.rs/getting-started/introduction)
- [R3F Drei](https://github.com/pmndrs/drei)

  #threejs #portfolio #r3f

Time to build the HTML interface and add scroll animations with framer-motion on our 3D portfolio

Build a 3D Portfolio with React Three Fiber - Framer Motion Scroll Animations

Overview

Framer Motion Scroll Animations

Insights and Skills

Tech Stack

Code links

Resources