How to Build a Professional 3D Portfolio with React 3 Fiber - Part 3

Overview

• Create HTML content with Tailwind CSS
• Display custom mouse cursor
• Add 2D/3D scroll animations using Framer Motion

HTML Interface Setup

• Recreate interface: menu, cursor, scroll animations
• Start from base project
• Run commands: git clone <repo> and yarn commands
• Install Tailwind CSS: yarn add -D tailwindcss and setup
• Configure Tailwind: Modify tailwind.config.js

Tailwind CSS Configuration

• Add initial three lines to index.css
• Verify setup: Create a sample component in app.jsx

HTML Structure

• Define menu: Home, About, Work, Contact (four pages)
• Use ScrollControls to enable scrollable content
• Wrap content inside ScrollControls and Scroll components

Section Components

• Create sections: Home, About, Skills, Projects, Contact
• Use className for Tailwind CSS styling
• Organize layout: Center sections vertically and horizontally
• Create individual components for each section

About Section

• Render title, text, and buttons
• Example Tailwind classes for styling

Skills Section

• Render skills with progress bars
• Example loop over skills array

Contact Section

• Render form with name, email, and message fields
• Submit button setup

Tailwind CSS useful tips

• Use Tailwind extension: Tailwind Intellisense

Animation with Framer Motion

• Add Framer Motion: yarn add framer-motion
• Use motion components: motion.div, motion.p, etc.
• Define animations: Initial state, while in view state, transitions
• Example: fade-in effect for section components
• Using variants for managing complex animations

Scroll Manager Component

• Create ScrollManager to handle section transitions
• Use gsap for smooth scroll animations
• Modify useFrame to check scroll positions
• Use useCallback to handle state updates

Interactive Menu

• Create and style menu component: Open/close logic
• Use Tailwind for styling
• Handle section transitions on menu click

Integrate 3D Models

• Import and use 3D assets
• Load models using useLoader
• Setting ambient light, background color, etc.

Animate 3D Elements

• Use motion.group for animating 3D objects
• Transition elements based on section state
• Animate specific objects: lava lamp, rug, Pokémon, etc.

Cursor Component

• Custom cursor with conditional styling based on element hover
• Smooth follow mouse movements

Additional Features

• Combine 2D/3D elements for interactive experience
• Animate camera based on menu state
• Performance considerations

Closing

• Summary and encouragement to like, subscribe and support the channel
• Teaser for next (final) episode