React Project Tutorial – Build a Portfolio Website w/ Advanced Animations

In this video, you will learn how to build React portfolio website from scratch with advanced animations.

Learn:
✔️ How to draw SVG animation using GSAP and React
✔️ How to add page loading animation using React-Loaders
✔️ How to add Pacman animation in React
✔️ How to create custom 3D CSS animations
✔️ How to implement font icons in React
✔️ How to create and implement contact form in React using EmailJS

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:43) Create React app with npx
⌨️ (0:01:01) Instaling libraries
⌨️ (0:03:56) Define global styles
⌨️ (0:06:56) Create routes
⌨️ (0:09:01) Building left sidebar
⌨️ (0:20:31) Building site layout
⌨️ (0:23:01) Building Home page
⌨️ (0:40:51) Draw SVG Logo animation
⌨️ (0:48:29) Build About page
⌨️ (1:03:56) Build page loader
⌨️ (1:06:11) Build Contact page

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

--

[PauloRabelo]

Slobodan, thank you, a lot for sharing this amazing tutorial content. And yes, we need the 2nd/3rd/4th and beyond parts for this project. Once again thanks a lot my friend!

[quincylarsonmusic]

That is one amazing-looking portfolio. Once again, Slobodan is the hero we need.

[preciso]

For those who face problem in useEffect, setTimeout 40:06
remove return from setTimeout and add return in setLetterClass.
I hope this will solve your problem
.
.
.
if this don't work, try this
remove the return from setLetterClass also.

[joshcastrillo]

For anyone who needs help setting up the emailJS portion:
The format for 1:16:13 should be as follows: sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY') After creating an account, can find your service ID in the email services tab, your template ID in the email templates tab, and your public key within the Account tab under API Keys.

[ashishkumargupta]

Hey Slobodan, thank you for sharing this amazing tutorial content. And yes, we need the 2nd/3rd/4th part for this project. Once again thanks a lot!!!!

[zarinasekerdag]

Thank you for sharing this amazing tutorial. And yes, we need the second part for this project.

[mohamadybr]

Well, I am doing my portfolio in React at the moment, I was really thankful for learning about emailJS. Thanks a lot

[adamzulfikar]

on my way learning to code with React and come across this gold. Thanks a lot is not enough, many many thanks. Please upload more..

[Hacking-NASSA-with-HTML]

Excellent job! Thank you so much, Slobodan 🤝

[FelipeSantosDev]

Amazing! Thanks for the everything! Please, second part! 😅😅😅

[toufiqislamswoad]

Thanks Slobodan for this content, I'll be waiting for the next sequel of this part.

[codybui]

Amazing tutorial, Thank you very much FCC and Slobodan. P/S: 1, 5h but actually took me the whole day to complete. But very happy with what i learnt. Cheers!

[AdityaSingh-qlim]

Thank you for this amazing tutorial... and YES WE NEED ALL THE PARTS OF IT... Love your work

[andifaizal]

You are really amazing, explain detail and smooth animation. 🎉

[yuriribeiro]

We need as many parts as you can do! Thanks for everything!

[SynapseNervosa]

Thank you for the tutorial. I would love to see a 2nd version.

[vaibhav-bhavsar]

one of the best portfolio website I have seen, want to make one like this.
Please make the 2nd part as soon as possible and include sections like projects, blogs, education and work history,
Looking forward😍😍❤❤

[sunithat]

second part please, this is amazing thank you so much fcc for valuable content.

[b.alan.thirdgenerationstudios]

I want to make a portfolio page with the same cube but add links on eaech side of the cube that leads to each project. Any ideas on how to execute this?

[prathamnpriyal]

Hi Sloba and freecodechamp, I am getting oops trial version of DrawSVGPlugin deployed. Can you tell what to do here to remove this?