How I created my JSON Resume?
Abhinav Pandey
Posted on March 14, 2021
Recently I found a new way to create my resume with JSON as the data source. The idea was introduced by http://jsonresume.org.
Put your data into a JSON. Use the JSON to populate whatever template you want. Create an HTML or export to other document types. And it doesn't stop there. You can even use the Json in your own personal website.
Fortunately, this is already popular in the community and some hard working people have created a number of themes and an easy way to use them. Let's have a look at how to do it.
The basics
Creating the JSON from Schema
You can find the boilerplate schema for your JSON here . You can remove the dummy data and replace with your own data.
Alternatively, you can create your JSON from scratch in Visual Code using the extension JSONResume Editor. It validates your schema as you type and provides features such as code completion and hints.
One important point about the schema is that it has evolved over the years and different themes may use a different version of the schema as their base. We will talk more about this point later when we talk about exporting your resume.
Choosing and applying a theme
The JSON you create will be utilized by a theme to create your visual resume - originally in HTML and CSS but exportable to other formats as well. You can find a few themes here. This is not an exhaustive list. As it is open-source, there are a lot of themes developed and in development. You can look around on Github to perform an exhaustive search for all available themes.
Once you have chosen your theme, its time to add it to your JSON. For this, we add a meta object and add a theme field in it
"meta": { "theme": "stackoverflow" } }
Your JSON is now ready and theme is chosen. Let's see how we can render your resume now.
The easy way (Online tools)
Step 1: Create a github gist by the name resume.json. E.g., my gist
Step 2: Go to https://registry.jsonresume.org/{githubUsername} and there it is!- Example
Limitation: the website does not support all available themes so the theme you put in your resume.json should be available on the site in order for you to use it successfully.
You can also try out different themes on the website without editing your json using the URL - https://registry.jsonresume.org/{username}?theme={themeName} - Example
BTW - If you checked both examples, check what we discussed earlier - Different themes, different base JSON - Using "eloquent" theme, I lose on some information of my resume.
One way to be sure that your schema matches or to adjust your schema, go to the Github repo of the theme and find the resume.json that was used to build the theme- Example for eloquent theme
So this was one pretty easy way. However, we saw a limitation here that there are a small set of themes to choose from. Let's see how we can remove this limitation when we do this through NPM.
The developer's way
As I mentioned earlier, you can create your resume with Visual Code. You can also use some npm packages to create your resume locally with the same JSON.
Package 1 - Resume CLI
npm install -g resume-cli
This provides a command line tool to export your JSON. Now we need to find our theme. You can find a long list of npm packages which provide a theme for your resume - NPM search results for theme
Package 2 - Theme stackoverflow
npm install -g jsonresume-theme-stackoverflow
Once both packages are installed, move to the directory where your resume.json (use the same name) is present and run one of the below commands:
For PDF:
resume export resume.pdf --theme=stackoverflow
For HTML:
resume export resume.html --theme=stackoverflow
You can only use the theme you have installed locally but you can install as many themes as you like (326 options on NPM currently).
Moreover, you need not worry too much if the schema is bothering you or if you want to introduce a new section. You can always clone the theme and edit it the way you want. You can also feed this JSON to your portfolio website or to other online profile services like https://gitconnected.com.
Posted on March 14, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.