3D Animated Portfolio Website with React & Motion and Three.js | Beginner React Project Tutorial

React 3d portfolio website tutorial project with Framer Motion animations
Get Hostinger Discount: https://hostinger.com/lamadev Coupon Code: LAMADEV

Join Lama Dev groups
X / Twitter: https://x.com/lamawebdev
Facebook:   / lamadev  
Instagram:   / lamawebdev  
Discord:   / discord  

Source Code:
Start here: https://github.com/safak/3d-animated-...
Completed: https://github.com/safak/3d-animated-...

00:00 Introduction
02:59 Installation
05:49 Creating the Portfolio Website Sections with React Components
10:04 CSS Responsive Layout with Media Query
16:13 Snap Scrolling Effect Using CSS19:45 React Portfolio Website Hero Section Design
41:12 React Typing Animation Tutorial
45:51 Hero Section Background Image
48:40 React Motion Animation Tutorial
54:35 React Motion Variant
57:12 React Motion Stagger Children
01:00:01 Portfolio Page Hero Section Animations with React Motion
01:08:55 React CSS Responsive Design with Media Queries
01:15:39 React Three.js Tutorial (Create 3D Websites)
01:24:00 React 3D Background using Three.js
01:29:50 React Add 3D Models to your Website with Three.js
01:31:33 How to Convert 3D Models to a React Component ( gltf to glb, glb to jsx)
01:35:23 React Three.js Orbit Controls, Stage, Perspective Camera
01:42:08 Portfolio Website Services Section Design
01:50:39 Portfolio Services Section Responsive Design with CSS
01:53:30 Services Section React Motion Animations
01:55:27 React Motion Animation useInView Hook (Animate when Component is Visible)
01:58:23 React Counter Animation with Motion (Increase Numbers with an Animation)
02:03:29 React Animated Portfolio Section Design
02:10:09 React Scroll Animation with Motion (Horizontal Scroll Animation)
02:14:12 React Motion useScroll and useTransform Hooks Tutorial
02:21:25 Portfolio Section Animations with Motion
02:25:49 React Scroll Progress Animation (Progress Percentage Animation)
02:29:09 Portfolio Section Responsive Design
02:32:17 React Portfolio Website Contact Section Design
02:36:52 React Form How to Send an E-Mail?
02:37:22 React Email Js Tutorial
02:44:57 Portfolio Website Contact Section Animations
02:48:27 React SVG Animation Tutorial with Motion
02:55:30 Contact Section Responsive Design
02:57:34 React Lazy Loading and Suspense (Increase React Performance)
03:01:54 How to Deploy a React Website to a Hosting
03:04:13 Outro