DEV Community

Cover image for Personal website template - an open source project
José Coelho
José Coelho

Posted on • Edited on

Personal website template - an open source project

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.

Use Node v16.15.1

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 ;)

Build

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

  2. Install dependencies and run build command:

> npm install
> npm run build
Enter fullscreen mode Exit fullscreen mode

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

> npm start
Enter fullscreen mode Exit fullscreen mode

Contributing

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

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. :)

Top comments (18)

Collapse
 
codespent profile image
Patrick Hanford

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?

Collapse
 
philrod1 profile image
Phil

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?

Collapse
 
begrafx profile image
BEGRAFX • Edited

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.

Collapse
 
jcoelho profile image
José Coelho

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

Collapse
 
ngvntoan profile image
Toan Nguyen

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

Collapse
 
begrafx profile image
BEGRAFX • Edited

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.

Collapse
 
khrisl33t profile image
kHRISl33t

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 ;)

Collapse
 
jcoelho profile image
José Coelho

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

Collapse
 
tifflabs profile image
tiff

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

Collapse
 
jcoelho profile image
José Coelho

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 😏

Collapse
 
br3wb0n1k profile image
Eric Breuers

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)

Collapse
 
alaztetik profile image
Alaz Tetik

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

Collapse
 
jcoelho profile image
José Coelho

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.

Collapse
 
roninjosue profile image
Reynaldo Josué Cano Bárcenas

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

Collapse
 
jcoelho profile image
José Coelho

Thanks a lot bro 😉

Collapse
 
leob profile image
leob

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

Collapse
 
jcoelho profile image
José Coelho

Thanks a lot 😉

Collapse
 
jcoelho profile image
José Coelho

Thanks :)