Creating an Amazing Portfolio Website with React JS, Framer-motion, and Styled-components
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
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👇
What You’ll Learn
By watching this video tutorial, you will learn the following:
- Complex Styling with
- How to create Page Transition effects using
- How to leverage the advantages of component structure.
- How to use
ParticleJSin ReactJS for awesome background effects.
- Use of
Suspensein 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
For this project, you will use the following libraries:
- CRA (create-react-app)
- 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
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.
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