Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

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

via freeCodeCamp

Overview

Build a React portfolio website from scratch with advanced animations in this comprehensive tutorial. Learn to create SVG animations using GSAP, animate letters on hover with Animate.css, implement page loading animations with React-Loaders, and add a Pacman animation. Master custom 3D CSS animations, integrate font icons, and create a functional contact form using EmailJS. Explore how to incorporate maps into your website using Leaflet.js. Follow along as the instructor guides you through setting up a React app, installing necessary libraries, defining global styles, creating routes, and constructing various components including a left sidebar, home page, about page, and contact page. Gain hands-on experience in drawing SVG logo animations and building page loaders to enhance your portfolio's visual appeal and functionality.

Syllabus

) Intro.
) Create React app with npx.
) Instaling libraries.
) Define global styles.
) Create routes.
) Building left sidebar.
) Building site layout.
) Building Home page.
) Draw SVG Logo animation.
) Build About page.
) Build page loader.
) Build Contact page.

Taught by

freeCodeCamp.org

Reviews

Start your review of React Project Tutorial – Build a Portfolio Website w/ Advanced Animations

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.