Cover image for Personal website template - an open source project

Personal website template - an open source project

jcoelho profile image José Coelho Updated on ・2 min read

The idea

A few months ago I started looking for a new job and one of the first steps I took was to build my personal webpage with my CV information.

How I did it?

I'm mostly a backend developer so I wanted to explore one of the popular JS frameworks, as I don't have that opportunity at work.

So I decided to go with ReactJS and the CSS framework Bulma for styling.

And here it is the final result: https://jcoelho93.netlify.com

Dev.to latest articles

This app uses the Dev.to REST API to display my latest published articles, so this is a perfect template for anyone who's part of this community ;)

JSON Resume open source initiative standard

One of the requirements I had in mind was that the application should load all the personal information from a json file so that I could easily update the website with my most recent information.

So I found this open-source initiative called JSON Resume, that sets a standard for representing resumes as json. So my app expects the json file to follow this standard.

Make it your own

Recently someone forked my project on GitHub, updated the json file with their personal information and made their own personal webpage.
This made think about promoting my project to anyone who wishes to use it as a base for their own website and make it truly open source community driven.

So here is my project

GitHub logo jcoelho93 / personal-website

My personal website

jcoelho93 Personal website

Quality Gate Status Netlify Status

This is my personal website built using ReactJS and Bulma as the CSS framework. Live here

The personal information on the website is populated from a json file that follows the JSON Resume open source standard.

Customizing it

Feel free to fork this project and update it with your own information and style. Just update the ´src/resume.json´ with your personal information.

If you improve the app in any way a PR would be very apreciated ;)


  1. Clone the repo:
> git clone https://github.com/jcoelho93/personal-website.git
  1. Update the resume.json with your personal information (check JSON Resume)

  2. Install dependencies and run build command:

> npm install
> npm run build

You can also test the app with a development server, just run:

> npm start


Feel free to fork this project and customize with your personal info. If you implement any nice features or improvements I'd really appreciate…

What do you think of the project? And the webpage itself?

If you want you can fork it and make it your own, then send me the link I'd love to have a look at what you did.

Also if you make any improvements on the app a PR would be very appreciated. :)

Posted on by:

jcoelho profile

José Coelho


I'm a DevOps engineer working on Autonomous Driving.


markdown guide

This looks fantastic, and well done on making it portable for any dev to use. I'll definitely recommend this to anyone looking for a quick magic bullet.

I do really like the timeline from the resume JSON, but I will say the skills section with percentages is a trend that's never made much sense to me. Scripting skills are 95% of what? Your overall skill-set? But then Troubleshooting is also 95% so what's the overall value? There is absolutely an importance in demonstrating your proficiency in certain areas, but I don't believe the percentages do the job, just adds confusion.

I did previously have something similar on my site which aggregated from my Github contributions to determine percentages of languages used from all contributions. This is slightly better since there's an absolute value, but even still, it gets skewed (big stylesheet imports can make CSS seem like your top language).

I would say (from my own personal observation, I'm no authority on this topic) that the percentages themselves are often ignored and just an obstacle in the way of reading a skills list. Maybe this could be best converted to a sectioned list of skills with proficiency enumerations like "Beginner, Intermediate, Advanced, Master" similar to LinkedIn?


I wasn't involved with the candidate selection process, but recently I was on an interview panel for a Java role. One candidate's CV listed their skills as percentages. It made no sense. What does 70% Java mean? They know 70% of everything there is to know about Java? Certainly not! So what, then?


I was wondering this same thing. 70% of your projects involve Java? Or, like you say, "they know 70% of everything there is to know about Java?" Unlikely, for sure, and how would you quantify such a thing, whatever the case? Respectfully, it seems like meaningless data.


I see a lot of people don't like the percentages 😄.
It's definetily something to work on for the next releases.

Thanks a lot for the feedback


It isn't that we dislike them, can you tell me, when you say, "Java, 70%", what does that mean to you? What are you saying? Help us understand.


When does the next release will be public pro? :D


This looks great, nice job!
I know the percentage section looks cool, but as others mentioned it I don't know what 95% percent of scripting skill means. I would prefer to see a bullet-pointed list with a short description under it. :) It would make much more sense!
Keep up and welcome to Hungary ;)


Personally I like the progress bars but I see a lot of people don't like them 😄

I need to think of an alternative and make it available on the next release, I like your suggestion about the bullet-point list


Nice work! The updating with a JSON file is brilliant.


Why is piping in from a JSON file easier to update? It’s still a manual process or am I missing something?


As @br3wb0n1k mentioned, with the JSON file the data is separated from the code, hence you don't have to search and go through the code to update your personal information.

Also the Json follows standard which is always good 😏


It's a nicer way of managing the content in one place. It also provides a visible data model for expanding on the project (ie. adding a CMS)


Is there a better way to deal with that? An automation process, for example?


I actually thought about making a command line tool that would assist you in building your own Json file (so you don't have to know the Json Resume standard). But that's the only "automation" I would add.


Man it looks really cool! Bookmarked this and starred it, I wanna try it out.


It's look amazing, I like it very much, I'm going to fork it. Congrats bro.


Thanks a lot bro 😉