Tag Archives: 3d web

Build and Deploy an Amazing 3D Web Developer Portfolio in React JS | Beginner Three.js Tutorial

Video

Video Description

If this video made you think, “I wish I could build this,” this is for you.
We just launched Motion Authority, built to help devs move from
“it works.” → “This feels finished.”

GSAP Animations fundamentals + real career positioning
25% off + PPP ⌛
👉 Get access here: https://jsm.dev/yt-motion-bundle

The most impressive websites in the world use 3D graphics and animations to bring their content to life. Learn how to build your own ThreeJS 3D Developer Portfolio today!

Hostinger: https://hostinger.com/javascriptmastery + coupon code JAVASCRIPTMASTERY

⭐ Join JS Mastery Pro: https://jsmastery.com
💎 Ultimate Next.js Course: https://jsmastery.com/course/the-ultimate-next-js-15-course
🧪 Ultimate Testing Course: https://jsmastery.com/course/the-complete-next-js-testing-course
📗 GSAP Pro Course: https://jsmastery.com/course/gsap-animations-course
📕 Three.js 3D Pro Course: https://jsmastery.com/course/vanilla-three-js-course
📙 JavaScript Pro Course: https://jsmastery.com/course/complete-path-to-javascript-mastery
🚀 Launch Your SaaS Pro Course: https://jsmastery.com/course/build-launch-your-saas-in-under-7-days

📁 FREE Video Kit (Code, Figma, etc.): https://jsmastery.com/video-kit/d8d459a8-d572-44ee-b699-41e4df96f443

Rate us on TrustPilot: https://jsm.dev/trustpilot

https://discord.com/invite/n6EdbFJ https://twitter.com/jsmasterypro https://instagram.com/javascriptmastery https://linkedin.com/company/javascriptmastery

Business Inquiries: contact@jsmastery.pro

Time Stamps:
00:17:55 Layout
00:21:07 Navigation bar
00:40:57 Hero Section
01:07:41 About Section
01:17:09 Higher Order Component
01:23:28 Experience Section
01:44:33 Projects Section
02:01:01 Testimonials
02:13:15 Contact
02:32:09 3D Stars
02:49:09 Deployment

Build and Deploy a Unique 3D Web Developer Portfolio with React, Three JS & GSAP

Video

Video Description

Build your unique 3D portfolio with React.js and Three.js! Learn to combine interactive 3D graphics and smooth web performance to showcase your skills in an engaging way.

Hostinger: https://jsm.dev/pfolio25-hostinger
WebStorm: https://jsm.dev/pfolio25-webstorm
Junie: https://jsm.dev/pfolio25-junie

⭐ Join JS Mastery Pro: https://jsm.dev/pfolio25-jsmasterypro
📗 Master GSAP: https://jsm.dev/pfolio25-gsap
💎Get the Motion Bundle: https://jsm.dev/yt-motion-bundle
🎁 Video Kit (Codebase, and more): https://jsm.dev/pfolio25-kit

https://discord.com/invite/n6EdbFJ https://twitter.com/jsmasterypro https://instagram.com/javascriptmastery https://linkedin.com/company/javascriptmastery

Business Inquiries: contact@jsmastery.pro

Time Stamps:
00:00:00 — Intro
00:05:45 — Create React.js Project
00:13:04 — Install and configure TailwindCSS v4
00:21:24 — Hero Text u0026 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