How I created my JSON Resume?
Tags: resume, npm, career, productivity
Published: 2021-03-14 14:10:16

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](https://jsonresume.org/schema/) . 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](https://marketplace.visualstudio.com/items?itemName=reflog.jsonresume). 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](https://jsonresume.org/themes/). 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](https://www.npmjs.com/search?q=jsonresume-theme-*).

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
```json
 "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](https://gist.github.com/Abh1navv/e878564dd3349989dc0b6d678adc4cc9)

Step 2: Go to https://registry.jsonresume.org/{githubUsername} and there it is!- [Example](https://registry.jsonresume.org/Abh1navv)

**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](https://registry.jsonresume.org/Abh1navv?theme=eloquent)

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](https://github.com/thibaudcolas/jsonresume-theme-eloquent/blob/master/test/resume.json)

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**
```bash
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](https://npmsearch.com/?q=jsonresume-theme)

**Package 2 - Theme stackoverflow**
```bash
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:
```bash
resume export resume.pdf --theme=stackoverflow
```
For HTML:
```bash
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.