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: https://www.facebook.com/groups/lamadev Instagram: https://www.instagram.com/lamawebdev Discord: https://discord.gg/yKremu4mPr Source Code: Start here: https://github.com/safak/3d-animated-portfolio/tree/starter Completed: https://github.com/safak/3d-animated-portfolio/tree/completed 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