DEV Community

loading...

How I created my JSON Resume?

Abhinav Pandey
All things Java!!
・3 min read

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" } }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

For HTML:

resume export resume.html --theme=stackoverflow
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (4)

Collapse
anonymousm profile image
mludovici

hmm nice tool, but seems to be buggy somehow... I installed a theme with "npm install jsonresume-theme-stackoverflow" but when I create a pdf with that theme it says: "You have to install this theme relative to the folder to use it e.g. npm install jsonresume-theme-stackoverflow"

Collapse
abh1navv profile image
Abhinav Pandey Author • Edited

I faced the same problem. The issue here is that "resume-cli" is installed globally and you are installing the theme locally. If you install it with -g, it will work. Resume-cli searches for the theme in the same scope where it is installed.

Collapse
anonymousm profile image
mludovici • Edited

ok thank you, but is there a way to use it all locally? I did it with command: "./node_modules/resume-cli/build/main.js export resume.pdf --theme orbit" ..it worked, but I'd like to use it normally, and don't want to install all themes globally every time... is there some simple npx command for that maybe?

Thread Thread
abh1navv profile image
Abhinav Pandey Author

You can clone resume-cli and change its code. Adjust the way it looks for the theme.