Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Build and Deploy an Awwwards Winning 3D Web Developer Portfolio with React, Three JS and GSAP

JavaScript Mastery via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
This comprehensive tutorial guides you through building an Awwwards-worthy 3D web developer portfolio using React, Three.js, and GSAP. Over 3.5 hours, learn to create an interactive portfolio that combines stunning 3D graphics with smooth performance. Start with setting up a React project and configuring TailwindCSS v4, then progress through creating hero sections with 3D models, implementing animations, building a showcase, navbar, and various components like logo showcases and feature cards. Master advanced techniques for experience sections, tech stack displays, testimonials, and contact forms with EmailJS integration. The tutorial concludes with deployment instructions, providing everything needed to create a professional portfolio that stands out. JavaScript Mastery offers additional resources including code, design files, and repositories to support your development journey.

Syllabus

00:00:00 — Intro
00:05:45 — Create React.js Project
00:13:04 — Install and configure TailwindCSS v4
00:21:24 — Hero Text & Layout
00:37:20 — Hero 3D Model
01:09:05 — Title Animation, Scroll and Counter
01:21:41 — Showcase
01:34:43 — Navbar
01:42:49 — LogoShowcase
01:48:01 — FeatureCards
01:53:39 — Experience
02:25:53 — TechStack
02:45:58 — Testimonials
02:54:40 — Contact
03:16:06 — EmailJS Integration
03:24:07 — Footer
03:29:49 — Deployment

Taught by

JavaScript Mastery

Reviews

Start your review of Build and Deploy an Awwwards Winning 3D Web Developer Portfolio with React, Three JS and GSAP

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.