Build & Deploy an Amazing 3D Portfolio with React.js & Three.js | Beginner Three.js Tutorial

Learn how to build 3D websites from scratch with the Three.js Crash Course. It’s a fun and practical way to create a portfolio that really pops!

⭐ WebStorm: https://jb.gg/JSMastery

⭐ Hostinger – https://hostinger.com/mastery10
Coupon Code (91% off): JAVASCRIPTMASTERY

🌟 Codeium – https://codeium.com/?utm_source=youtube&utm_campaign=js-mastery

📒 Three.js Guide – https://resource.jsmastery.pro/threejs-guide
🎨 3D Portfolio Figma Design – https://resource.jsmastery.pro/3d-portfolio-design
🤖 Special Discord Forum – https://resource.jsmastery.pro/3d-portfolio-discord

🌟 Become a top 1% Next.js 14 developer: https://jsmastery.pro/next14
🚀 Skyrocket your career: https://jsmastery.pro/dev-career-accelerator

📚 Materials/References:
GitHub Repository (give it a star ⭐): https://github.com/adrianhajdin/threejs-portfolio
README (assets & code): https://github.com/adrianhajdin/threejs-portfolio/blob/main/README.md

💻 Join our Discord Community: https://discord.com/invite/n6EdbFJ
🐦 Follow us on Twitter: https://x.com/jsmasterypro
🖼️ Follow us on Instagram: https://instagram.com/javascriptmastery
🔗 Follow us on LinkedIn: https://linkedin.com/company/javascriptmastery/

💼 Business Inquiries: contact@jsmastery.pro

Time Stamps 👇
00:00:00 — Intro
00:05:36 — Theory
00:39:00 — Practical Demo – HTML, Vite
01:08:15 — React Three Fiber and Drei
01:22:56 — Hosting Setup
01:27:21 — Project Setup
01:33:07 — Navbar
01:38:09 — Hero Section
02:46:45 — Bento Grid
03:05:50 — Projects Section
03:34:04 — Clients Section
03:41:24 — Contact Section
03:56:36 — Footer
04:00:15 — Work Experience
04:26:05 — Deployment