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

Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=bmpI252DmiI



Category:
Tutorial
Duration: 1:24:37
596,574 views
15,207


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




Other Videos By freeCodeCamp.org


2022-04-25Python + PyTorch + Pygame Reinforcement Learning – Train an AI to Play Snake
2022-04-20Redux Toolkit Tutorial – JavaScript State Management Library
2022-04-18Python Game Development Project Using OOP – Minesweeper Tutorial (w/ Tkinter)
2022-04-13Low-Code for Freelance Developers & Startups – Tutorial
2022-04-11Learn Terraform (and AWS) by Building a Dev Environment – Full Course for Beginners
2022-04-08Let's Play Break The Code 2 – Code Cracking Game for Developers with Tom and Shaun
2022-04-07Figma Variants – Design a Scalable Mobile App [Full Course]
2022-04-04Full Gitpod Course – ExamPro Cloud Developer Environment Certification
2022-03-31Firebase – Full Course for Beginners
2022-03-30Augmented Reality for Everyone - Full Course
2022-03-29React Project Tutorial – Build a Portfolio Website w/ Advanced Animations
2022-03-24Microservices with FastAPI – Full Course
2022-03-23Taxes for Freelance Developers – Full Course
2022-03-22Learn Go Programming by Building 11 Projects – Full Course
2022-03-21Visual Studio Code Extensions to Improve Your Productivity
2022-03-17Portfolio Website Tutorial – Frontend Development with HTML, CSS, JavaScript
2022-03-16WebGPU Tutorial - Advanced Graphics on the Web Course
2022-03-15Python Tutorial for Beginners
2022-03-14Advanced OpenGL Tutorial – Skeletal Animations with Assimp
2022-03-10CNCF Kubernetes and Cloud Native Associate Certification Course (KCNA) - Pass the Exam!
2022-03-09Vim Tutorial for Beginners