
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