Creating an Amazing Portfolio Website with React JS, Framer-motion, and Styled-components

#tailwind-CSS#web-app#react-js
136.2k views
3.9k likes
357 comments
watch on YouTube

Overview

Let’s create a stunning ReactJs portfolio website. In this video you will learn how to create portfolio website from scratch. We utilize popular libraries such as framer-motion , styled-components , react-tsparticles to create unique design and animations. With this step-by-step video you will be able to build a portfolio website that showcases your skills and projects. We also add animations, page trasitions and background effects. In this portfolio there are 5 pages home, blog, skills, about and work where you can showcase your projects. Before starting this video you can checkout the following demo link👇

Link🔗: Amazing ReactJS Portfolio Website

What You’ll Learn

By watching this video tutorial, you will learn the following:

  • Complex Styling with Styled-components.
  • How to create Page Transition effects using framer-motion.
  • How to leverage the advantages of component structure.
  • How to use ParticleJS in ReactJS for awesome background effects.
  • Use of Lazy and Suspense in ReactJS to make components load faster.
  • And many awesome pure CSS animations.

Key Features of This Portfolio Website

  • Smooth Page Transitions
  • Cool Background Effects
  • Unique design
  • Multiple Pages
  • Mobile Responsive
  • Unique approach to showcase your projects
  • Speed optimization by code-splitting

Libraries Used

For this project, you will use the following libraries:

  • CRA (create-react-app)
  • Framer-motion
  • Styled-components
  • ParticleJS (deprecated, you can use react-tsparticles instead)

You can find the starter code for this project at: Starter code for reactjs portfolio And, for the final code, there are two links available:

Link-1: Github All code used in the video tutorial: Final code for reactjs portfolio website (Give ⭐ to this repo if you like it)

Link-2: Gumroad: Code with page transitions, responsive, and React lazy loading and suspense for faster page load: Reactjs portfolio website

Resources

You can find all the resources used to make this portfolio from the following:

Time Stamps

The video tutorial has the following time stamps for you to follow along: