Personal website template - an open source project

jcoelho

José Coelho

Posted on December 31, 2019

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

💖 💪 🙅 🚩
jcoelho
José Coelho

Posted on December 31, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related