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

> Learn how to build a professional portfolio website using React JS, Framer-motion, and Styled-components. Follow this step-by-step guide and create next level React JS portfolio website!

- **Source:** DevDreaming (https://devdreaming.com)
- **Canonical URL:** https://devdreaming.com/videos/build-stunning-portfolio-website-react-js-framer-motion
- **Author:** CodeBucks
- **Published:** 2021-11-01
- **Topics:** React Js, Web App, Tailwind CSS

---

**[▶ Watch on YouTube](https://www.youtube.com/watch?v=jcohAIaSy2M)**

### 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](https://react-portfolio-sigma.vercel.app/)

### 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](https://github.com/codebucks27/React-Portfolio-starter-code-files)
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](https://github.com/codebucks27/react-portfolio-final) (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](https://codebucks.gumroad.com/l/hsTPD)

### Resources

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

- Design in [Figma](https://www.figma.com/).
- Svg Icons from [Font Awesome](https://fontawesome.com/).
- Spaceman 3D Image from [Vectary 3D Elements](https://www.figma.com/community/plugin/769588393361258724/Vectary-3D-Elements) .
- Audio Music by [Jonas](https://pixabay.com/users/itswatr-12344345/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=1167) from [Pixabay](https://pixabay.com/music//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=1167).
- Background Photo by [Patrick Tomasso](https://unsplash.com/@impatrickt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/news-paper?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).

### Time Stamps

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

- Channel Intro: [@0:00:00](https://www.youtube.com/watch?v=jcohAIaSy2M&t=0s)
- Demo [@0:00:10](https://www.youtube.com/watch?v=jcohAIaSy2M&t=10s)
- Setup & Installation [@4:12](https://www.youtube.com/watch?v=jcohAIaSy2M&t=252s)
- Creating GlobalStyles [@9:20](https://www.youtube.com/watch?v=jcohAIaSy2M&t=560s)
- Creating Themes [@13:09](https://www.youtube.com/watch?v=jcohAIaSy2M&t=789s)
- Creating Required files for each sections [@16:00](https://www.youtube.com/watch?v=jcohAIaSy2M&t=960s)
- Main Page [@20:30](https://www.youtube.com/watch?v=jcohAIaSy2M&t=1230s)
- Blog Page [@1:27:20](https://www.youtube.com/watch?v=jcohAIaSy2M&t=5240s)
- MySkills Page [@2:04:30](https://www.youtube.com/watch?v=jcohAIaSy2M&t=7470s)
- About Page [@2:23:45](https://www.youtube.com/watch?v=jcohAIaSy2M&t=8625s)
- Work Page [@2:33:47](https://www.youtube.com/watch?v=jcohAIaSy2M&t=9227s)
- Creating SoundBar component [@3:13:02](https://www.youtube.com/watch?v=jcohAIaSy2M&t=11582s)

---

## Related on DevDreaming

- [All Video Tutorials](https://devdreaming.com/videos)
- [Blog & Tutorials](https://devdreaming.com/blogs)
- [Free Developer Tools](https://devdreaming.com/tools)

---

_This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._