Stop wasting your time building a web dev portfolio!
Tags: webdev, beginners, react, portfolio
Published: 2022-07-22 23:47:25

> Because I did that for you already 😀 

---

### I created a beginner friendly, responsive and easily editable **portfolio** in React, for the community!
Oh and you have a blog now! Nothing fancy. No markdown, no headless CMS. Just JSON. Simply edit your JSON files, and React handles the rest!

If you guys enjoy the template, or run into any issues, please let me know on [Twitter!](https://www.twitter.com/hyggedev) 

--- 

![Blogfolio example of the homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77v77hwwgkaix9jv4d7n.png))

![Featured posts of blogfolio homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy49v9cql2zhb660f8ff.png)

![Blogfolio example of blog post heading section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ta8q98up8q6go33ddm2.png)

![Blogfolio example of over section of blog post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r5sj44a7jg7webaos06.png)

![Blogfolio example of the projects section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qd7pgl4rk4udiiti81n.png)

![Blogfolio example of the projects gallery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w2rx9qx5a14x4wpbqlr.png)

![Blogfolio example of the projects over heading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbqg36i2bdd5x5r7sa0p.png)

![Blogfolio example of the about section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijg7bud0cx7uu2osi5ys.png)

![Blogfolio example of the skills section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hglrw51srqa8stixkg1i.png)

---

### Is it for you?

Look, if you are just starting out, then building a portfolio of your own is probably a good idea. It's fun and is great practice. But if you have some projects already, and you're struggling to maintain a consistent portfolio, then don't sweat it. Give it a try.

--- 

### Check out the demo ⤵️

[DEMO](react-blogfolio.netlify.app/)

### How to use the template

1. Visit [Repo](https://github.com/chansen17/react-blogfolio)
2. Clone the repo by clicking the green button
3. In your terminal paste the command 
4. Enter the project
5. Install dependencies
6. Edit your JSON file. 
7. That's it! 

---

## That's a wrap guys! I hope the template serves you well! Happy coding 👋

---

### Follow me on [Twitter](https://www.twitter.com/hyggedev) 
 for byte-sized web dev content! 

---

<a href="https://www.buymeacoffee.com/hyggedev" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

--- 

### Check out these other beginner friendly articles also written by me! ⤵️

{% link https://dev.to/hyggedev/great-beginner-friendly-api-s-to-start-practicing-frontend-development-52kl %}

{% link https://dev.to/hyggedev/how-to-stay-focused-as-a-self-taught-frontend-web-developer-7gp %}

{% link https://dev.to/hyggedev/no-fuss-dark-mode-toggle-with-react-styled-components-3nd4 %}

{% link https://dev.to/hyggedev/how-to-build-a-responsive-react-navigation-menu-with-styled-components-3682 %}

{% link https://dev.to/hyggedev/filter-your-react-data-with-basic-javascript-4i9
 %}