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

Ecommerce Empire Academy

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

✏️ Slobodan developed this course:

πŸ”— Code and assets:
πŸ”— Map library
πŸ”— EmailJS library:
πŸ”— Final version:

Learn:
βœ”οΈ How to draw SVG animation using GSAP and React
βœ”οΈ How to animate letters on hover using Animate.css 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
βœ”οΈ How to add maps to your website in React using Leafleat.js

⭐️ 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

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

61 thoughts on “React Project Tutorial – Build a Portfolio Website w/ Advanced Animations”

    1. Thanks for this Amazing tutorial I will subscribe and wait for the other parts of the project.

    1. Code with Sloba

      Yeah I received a ton of requests. So second part is coming. Sub on my channel so you don’t miss it πŸ˜‰

      Thank you πŸ™

  1. Ashish Kumar Gupta

    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!!!!

    1. Code with Sloba

      Yeah I received a ton of requests. So second part is coming. Sub on my channel so you don’t miss it πŸ˜‰

      Thank you πŸ™

    1. Ayeloja Ibrahim

      Please sir, I’m a rust lover and have learnt the basic on this channel and wanted to improve my skills, if you don’t mind creating Rust application project on this channel that would help a lot sir thanks.

  2. Sreekanth Jagadish

    Slobodan, such a simple and brilliant video for portfolio website. Thank you so much πŸ™. Yes look forward to next part.

  3. Paulo Rabelo de Araujo

    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!

  4. Sherrisa Classon

    I’m learning so much from this tutorial! Thank you for sharing. I have a question about 23 minutes in about the Route to the Home component. I can’t get the sidebar to render when I add this route with index instead of a path.

    1. Sherrisa Classon

      @SINDHU MATHI Are your routes to your Home, About and Contact components inside the route to the Layout component?
      } >
      } />
      } />
      } />

    2. @Sherrisa Classon yes I am using like this, still I am not getting can u help me on this pls

    3. Sherrisa Classon

      @SINDHU MATHI I also needed to remove the word “return” from the useEffect() function in my Home component.

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

  6. Jean Claude Cairoli Gallo

    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!!!!

  7. Breno VerΓ­ssimo

    A very good tutorial. You need to have some background on css and scss, but it gives a good overview on how it’s done.
    And, btw, I couldn’t bear to make those arrays by hand, so I found some js code to make it for me. In case anyone shares the same amount of patience as I do, here it is:

    const title = “Contact me”
    const titleArray = Array.from({length: title.length}, (_, i) => title[i])

    Thanks!

    1. Strings are iterable. Just do this: ‘Contact me’.split(”);
      Result: [‘C’, ‘o’, ‘n’, ‘t’, ‘a’, ‘c’, ‘t’, ‘ ‘, ‘m’, ‘e’]

  8. Hey! Great tutorial.

    I wanted to find out more on how you managed to get that SVG Data you used for the outline for the logo. I want to do something similar, but I am struggling without Adobe Illustrator

  9. 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.

  10. 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.

    1. Aleksandr Kvashenko

      @Tiny Fish Thank you so much!!! You really helped me resolve the same problem πŸ™‚

  11. Vamsi Krishna

    Thank you for the awesome tutorial. A small request, did you create those svgs someplace online? If yes, please share it.

  12. Is anyone else having problems with drawing the S logo? Even when I copy over Slobodans code it’s only fading in.

  13. dylan mathews

    Thank you! For anyone who needs a list of libraries installed, commands are:
    npm i @emailjs/browser
    npm i @fortawesome/free-brands-svg-icons
    npm i @fortawesome/free-solid-svg-icons
    npm i @fortawesome/react-fontawesome
    npm i animate.css
    npm i gsap-trial
    npm i loaders.css
    npm i react-leaflet
    npm i react-loaders
    npm i react-router-dom
    npm i sass

  14. 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!

  15. Email JS has changed since this video uploaded. I needed to create a new template, and use the template ID, just going to the settings of a non created template will generate a new templateID over and over again. Also they have a service ID now which you need to connect your email service to the correct one and input the ID.

    Amazing video though! Even with the errors, Draw SVG conditionally works, EmailJS, and a few others but I managed to resolve most of them with some research and the comments. I think the speed you went at was fine. Definitely a faster paced video but it should be for people who have experience with react.

Comments are closed.