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

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!

Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.

📚 Materials/References:

In this course, you'll learn the following:
- ThreeJS - a powerful 3D graphics library for rendering and animating the 3D model
- React Three Fiber - a popular library for creating 3D graphics with ThreeJS in React
- TailwindCSS - a popular utility-first CSS styling framework
- Framer Motion - the most popular library used to bring your React website to life with animations
You'll also learn how to:
- Load, create and customize stunning 3D models and geometries with various lights, as well as understand the 3D world with a camera and positioning of an object in space.
- Make your code reusable and scalable using Higher Order Components (HOCs) and other industry-standard best practices
- Implement sending emails through a form on the website
- Ensure responsiveness across all devices and improve your site's performance using Suspense and Preload.

👇 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

[javascriptmastery]

Want to land your dream programming job in 3 - 6 months?
Become a Software Engineer. Guaranteed.

[tanayvaishnav]

👇 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

Thanks for the Awesome Video!

[terratales]

This is the first time you're making a not so beginner-friendly app, but it's still superb. Thank you so much always coming through with the best tutorials.

[kellslte]

I had just been thinking about learning 3D web development for the front end and you already have a free course on it! I am blown away by your consistency! Thank you so much, Adrian, thank you!

[abusalekarman]

This is fantastic! Thanks, Adrian, for the time and effort you put into the production of such first-class content.

[alexthehumane]

👇 Time Stamps Below! :
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:34:23 Tech Section
01:44:33 Projects Section
02:01:01 Testimonials
02:13:15 Contact
02:32:09 3D Stars
02:49:09 Deployment

Thanks for the Amazing Video Adrian! I am currently going along with it and then I'll be making my changes to it.

[rodrigoaraujoei]

I'm finishing my Computer Science Degree, and I'm doing a portfolio with some projects and this content is a HUGE HELP, thank you so much love all your videos!

[Shubham-Lal]

Hey everyone, just to leave a heads up that we can use react-parallax-tilt instead of react-tilt so that we don't have to face library peer dependency issues while deploying the project.

Edit:
At 12:00, use react-parallax-tilt instead of react-tilt and remove --legacy-peer-deps from the command.
Also wherever you are using: import Tilt from "react-tilt", replace it with your new library like this: import Tilt from "react-parallax-tilt".

And some of you might be facing an error: Could not resolve three (something like this), the fix is to add "three" along with other libraries while npm installation.

[dannertech]

Also, at 1:08:22 the second line in About has to be changed to import { Tilt } from 'react-tilt' or else it will throw an error (at least it did for me)

[philipreynolds]

This tutorial was great and I hope to see more 3JS in the future! One thing I do wish is that you could show us the creation of assets that you use in these projects. It's one thing to take preconceived assets and put them together, but a whole other thing to create assets from scratch.

[jaylee]

This was so simple to follow and also extremely informative on how I can adapt and build other projects with similar features. Thank you 😊

[compiversity]

I've been learning Reactjs and I just make use of framer motions but I've been interested in Threejs, I'm happy you make this course 😍

[arturkrant]

i can't stress this enough, your teaching, rhythm and editing is out of this world

[kvtys]

"if we save that.... everything breaks" was my favorite part of the tutorial. thank you for posting this, it truly was very informative and extremely useful. hoping good things come your way.

[Kevin-jcfx]

Adrian uploads nothing short of high end and over the top quality content. Thank you very much bro. I learn a whole lot from you.

[blockstarter]

If anyone is having trouble with a deprecation warning on "react-tilt", I suggest using "react-parallax-tilt" instead and defining the variables something like this:
<motion.div variants={fadeIn("up", "spring", index * 0.5, 0.75)}>
<ParallaxTilt
tiltMaxAngleX={45}
tiltMaxAngleY={45}
scale={1}
transitionSpeed={450}
className="bg-tertiary p-5 rounded-2xl sm:w-[360px] w-full"
>
{/* ... rest of the component */}
</ParallaxTilt>
</motion.div>

[aayushupadhyay]

Use import { Tilt } from 'react-tilt' ; instead of import Tilt from 'react-tilt'; to avoid white screen problem thank you ❤

[prodigymuj]

Followed and loved it from start to finish. It's a lot to take in honestly but I'm gonna start one from scratch and add a twist to the design and 3D models. Thanks so much Adrian! (Would love to see more of three.js and motion stuff)

[grimfunk]

For anywone who can't get the balls to float in the Experience section at 01:42:22, this is what worked for me.

In the Ball.jsx file in the BallCanvas component delete the `frameloop="demand"` property. Should work now 😁

[peoplease_need]

i love how you said words carefully and clearly, english is my scnd language and this really helps. thankyou!