Coder Social home page Coder Social logo

marcpalm / gatsby-theme-jsonresume Goto Github PK

View Code? Open in Web Editor NEW

This project forked from emasuriano/gatsby-theme-jsonresume

0.0 1.0 0.0 5.03 MB

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

Home Page: https://gatsby-theme-jsonresume.netlify.com/

License: MIT License

JavaScript 100.00%

gatsby-theme-jsonresume's Introduction

gatsby-theme-jsonresume

Netlify Status Build Status This project is using Percy.io for visual regression testing.

JSON Resume Heart Gatsby

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

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 --ignore-engines

The reason that you need to run yarn with the --ignore-engines is because resume-cli is hard coding the node engine ...

// 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.

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 --ignore-engines

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.