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.

โœ๏ธ 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

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

You May Also Like