gatsby-theme-jsonresume

A Gatsby Theme with JSONResume to host your Resume in HTML and PDF

Usage no npm install needed!

<script type="module">
  import gatsbyThemeJsonresume from 'https://cdn.skypack.dev/gatsby-theme-jsonresume';
</script>

README

gatsby-theme-jsonresume

Netlify Status

JSON Resume Heart Gatsby

A Gatsby Theme with JSONResume to host your Resume in HTML and PDF ✨

Live Example 🔥

Installation 📦

This package is a Gatsby Theme, therefore you need a project using Gatsby v2 installed to use it. You can check the official documentation to bootstrap a Gatsby project.

> yarn add gatsby-theme-jsonresume
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-jsonresume`,
      options: {
        resumeJson: { // ...JSON Resume Schema }
      },
    },
  ],
};

Usage 🔋

To generate your resume your need to provide a valid JSON object with your information. You can find more information about the schema in this link.

I highly recommend using LinkedIn to JSON Resume that can generate a valid JSON schema from your LinkedIn information.

The way this theme adds a new route in your application is by generating a plain html file, as well as the pdf file, and placing them inside the static folder.

The way Gatsby works with static files is they are going to be copied on the build step, they won't be accessible during development. But it will be obviously accessible after you deploy your site.

The last step is then to build and serve your serve. At this point, you should be able to access the new route.

> gatsby build
> gatsby serve
info gatsby serve running at: http://localhost:9000/

Configuration 🛠

Name Description Required Default Value
resumeJson Data for resume true
theme Theme to be used in JSONResume false "flat"
name Name/Route for the resulting CV false "resume"

Using a different Theme 🌈

In case you want to change how your CV looks, JSONResume does a very good jobs regarding theming. Check the official documentation for more information: JSONResume themes.

To use a different theme you need to first install it inside your project, and then send only the name of the theme (not the whole name of the library) as an option of the theme inside your gatsby-config.

Example:

> yarn add jsonresume-theme-orbit
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-jsonresume`,
      options: {
        resumeJson: { // ...JSON Resume Schema },
        theme: 'orbit',
      },
    },
  ],
};

Changing Route 🛣

By default, the plugin will host your resume under a route called resume. In case you want to change it, you can specify it inside the name property. This change will apply for the html and pdf format.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-jsonresume`,
      options: {
        resumeJson: { // ...JSON Resume Schema },
        name: 'cv',
      },
    },
  ],
};

Development 👷‍♂️

This repository is using Yarn Workspaces. The structure is the following:

  • /example: Demo project which shows how to use the theme.
  • /gatsby-theme-jsonresume: the theme itself.

In order to start, you need to install the dependencies in the root which will install the dependencies for both folders and link the projects.

> yarn

Available scripts:

  • start: Build the demo project and host it in localhost.
  • test: Build the demo project and run tests.

Contributing 🙌

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License 🗒

MIT