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

✏️ Slobodan developed this course: https://www.youtube.com/channel/UCBu5ulO4d-d47lAVybpRTkw

🔗 Code and assets: https://github.com/bobangajicsm/react-portfolio-website
🔗 Map library https://react-leaflet.js.org/
🔗 EmailJS library: https://www.emailjs.com/docs/examples/reactjs/
🔗 Final version: https://bobangajicsm.github.io/portfolio

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: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

source

41 thoughts on “React Project Tutorial – Build a Portfolio Website w/ Advanced Animations”
  1. .tags{

    color: whitesmoke;

    opacity: 0.6;

    position: absolute;

    bottom:0;

    left:120px;

    font-size: 20px;

    font-family: 'La Belle Aurore';

    }
    i used above code for changing the font of tags but its not working plz suggest trobleshoot

  2. I have a doubt about the SVG logo animation. In my code, I cannot display the DrawSVG animation by following the code in this tutorial. But when I replace drawSVG: 0 by drawSVG: 1, the code suddenly works. I wonder why this happen?

  3. The narrator is just reading the code out loud without giving much context. I was hoping for explanations on how to do animations. I'm struggling to even finish the course because I found it so misleading in what it promises.

  4. Regarding /Logo/index.js I've spent some time but for me drawSVG: 0, didn't work to draw the outline, I've checked the doc and I used drawSVG: "0 100" then it works. Cheers.

  5. 1:05:50 if u see this problem with the rotating cube as well the solution is to decrease all rotateY decreas by 0.1 or increase just dnt let it set at 90 180 270 etc… because it will break i couldn't know where the problem is becasue i tried the code on codepen with just colored faces of cube and it worked correctly so problem maybe scss react or even font awesome idk

  6. With respect for the author and freecodecamp, this is the worst portfolio project its 0% responsive and 0% use for flexbox
    who still do something like this ??
    it's good to learn code but not to build a portfolio in this way

  7. Any one has solution for this !!!

    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

    SassError: Can't find stylesheet to import.



    4 │ @import '~loaders.css/src/animations/pacman.scss';

    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  8. When following along the tutorial I get this error:

    srcApp.js

    Line 13:37: 'About' is not defined react/jsx-no-undef

    I even have the source code in another window for comparisons and it still will not work when they are exactly identical. Does anyone have a solution?

  9. If you are having trouble getting the name, email address, and message to show up when testing EmailJS, make sure that your template email variables match the form variable names in your Contact.js file

Leave a Reply

Your email address will not be published. Required fields are marked *