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

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)

Code Links

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:

• Design in Figma.
• Svg Icons from Font Awesome.
• Spaceman 3D Image from Vectary 3D Elements .
• Audio Music by Jonas from Pixabay.
• Background Photo by Patrick Tomasso on Unsplash.

Time Stamps

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

• Channel Intro: @0:00:00
• Demo @0:00:10
• Setup & Installation @4:12
• Creating GlobalStyles @9:20
• Creating Themes @13:09
• Creating Required files for each sections @16:00
• Main Page @20:30
• Blog Page @1:27:20
• MySkills Page @2:04:30
• About Page @2:23:45
• Work Page @2:33:47
• Creating SoundBar component @3:13:02