qcv

qcv is a tool to generate HTML resume from JSON template.

Content

• Use cases
• How does it work
• List of the available themes
• Custom HTML themes
• How to install

Use cases

Keeping a JSON resume in Git

The tool allows to have one JSON file where the resume information placed. It can be stored in a git repository to make the updating process more seamless. There could be branching applied for different versions; the diffs are more simpler to track. No more CV_1.pdf, CV_1_updated.pdf, CV_1_updated_for_facebook.pdf.

Controlling and keeping track of the information

No need to move between different services that generate a resume or/and store it.

Generating a simple portfolio website

The tool generates a HTML file based on a HTML template that can be customized.

How does it work

The tool replaces variables in a HTML template (see src/assets/themes) with corresponding values in the JSON template. Example: This is a HTML template

<div>{{basics.name}}<div>

The JSON template is

{
    "basics": {
        "name": "John Doe"
    }
}

So the result will be as follows:

<div>John Doe</div>

Formatting rules

cv.json

This is the JSON template example below. It will be generated by the init command. It creates cv.json file with the similar content:

{
    "basics": {
      "name": "John Doe",
      "label": "Programmer",
      "email": "john@gmail.com",
      "phone": "(912) 555-4321",
      "website": "http://johndoe.com",
      "summary": "A brief summary on who I am",
      "location": {
        "country": "The Johnited States Of Doe",
        "address": "2712 Broadway St",
        "city": "San Francisco"
      },
      "profiles": [{
        "network": "Twitter",
        "username": "john",
        "url": "http://twitter.com/john"
      }]
    },
    "work": [{
      "company": "Company",
      "position": "President",
      "website": "http://company.com",
      "start_date": "2013-01-01",
      "end_date": "2014-01-01",
      "summary": "Description..."
    }],
    "projects": [{
      "name": "An app to track time",
      "description": "A web and mobile application that allowed 2500 people to track their working time"
    }],
    "education": [{
      "institution": "University",
      "area": "Software Development",
      "study_type": "Bachelor",
      "start_date": "2011-01-01",
      "end_date": "2013-01-01",
      "courses": [
        "DB1101 - Basic SQL"
      ],
      "location": "Washington DC, US"
    }],
    "skills": [{ "name": "Web Development" }],
    "languages": [{
      "language": "English",
      "level": "Native speaker"
    }]
  }

Put your information into this file. Then use the build simple command to generate the cv.html output.

Available themes

See themes documentation

Custom HTML themes

There is an ability to build your custom HTML template and generate a resume from it. Example:

$ qcv build-from my_theme.html

Formatting rules for the HTML templates

As a reference, you could use "simple" theme (src/assets/themes/simple/index.html).

Primitive/simple values

A value inside {{ root_key }} in a HTML template looks up for a key root_key in the cv.json file and replaces {{ root_key }} with the corresponding value. Nested keys should be written as {{ root.nested.more_nested }}. Say, we have the following cv.json:

{
    "basics": {
      "name": "John Doe",
      "label": "Programmer",
    },
}

A theme could be:

<section id="main-info">
    <h1>{{ basics.name }}</h1>
    <!-- It doesn't matter if you use wrapping spaces or not inside {{ }} -->
    <h2>{{basics.label}}</h2>
</section>

CSS styles could be inside <style> as well as Javascript code. A template is just a HTML with {{ }} that will be replaced with values from the cv.json.

Arrays

cv.json has arrays with objects. Like:

{
    "basics": {
      "profiles": [{
        "network": "Twitter",
        "username": "john",
        "url": "http://twitter.com/john"
      }]
    }
}

To map array values, the syntax is:

<!-- Point a key which value is an array -->
{! basics.profiles
    <!-- Note the number of braces here: { } not {{ }} -->
    <!-- Number of spaces inside { } also doesn't matter -->
    <div>{network}</div>
    <p>{username}</p>
    <a href="{url}">{url}</a>
!}

Installing

Installing a crate

If you have Cargo installed, download qcv crate and use it globally in a terminal.

$ cargo install qcv
# Usage
$ qcv init
$ qcv build simple

Installing a binary

Download an archive in the releases section. E.g. for Ubuntu, download ...x86_64-unknown-linux-gnu.tar.gz, unpack it, then use as follows:

# Create a JSON template
./qcv init
# Generate HTML file
./qcv build simple

Cloning the repo

Use this method if you have Rust ecosystem installed.

$ git clone <repo>
# Create cv.json template
$ cargo run init

# Build cv.html result based on cv.json
$ cargo run build simple