~rogeruiz/jsonresume-theme-sumi

#A JSON Resume theme named Sumi

This project is a JSON Resume theme named Sumi that leverages Catppuccin for colors, Nerd Fonts for iconography, and Google Fonts as Display, Copy, & Monospaced options.

Sumi is compatible with the latest resume schema.

Inspired by rbardini/jsonresume-theme-even.

#Installation

npm i jsonresume-theme-sumi

#Usage

#Using `resume-cli`

npm install resume-cli jsonresume-theme-sumi
npx resume export resume.html

#Using `resumed`

npm install resumed jsonresume-theme-sumi
npx resumed render --theme jsonresume-theme-sumi

#Using the theme itself

You can leverage the theme package itself to read from stdin and output HTML to stdout. This allows you to use this theme without any resume builder tools.

npx jsonresume-theme-sumi < resume.json > resume.html

#Options

The following options can be set by adding a meta.themeOptions in the resume JSON. Each key of the themeOptions field that can modify the theme is explained below.

#Colors

You can override the Catppuccin colors via the colors key if you'd like. Each property of the colors object is a property representing a tuple for the light and (optional) dark color CSS values. If the second item is missing, the first will be used for both light & dark modes. You're able to override which flavors get loaded up for either light or dark modes. You're also able to override individual colors areas with light and dark variants as well if you would like to customize things even further.

{
  "meta": {
    "themeOptions": {
      "colors": {
        "flavors": [ "latte", "mocha" ],
        "background": [ "#eff1f5", "#1e1e2e" ],
        "dimmed": [ "#dce0e8", "#11111b" ],
        "primary": [ "#4c4f69", "#cdd6f4" ],
        "secondary": [ "#6c6f85", "#a6adc8" ],
        "accent": [ "#1e66f5", "#89b4fa" ],
        "icon": [ "#8839ef", "#cba6f7" ]
      }
    }
  }
}

#Fonts

You can set custom fonts from Google Fonts using the same web embed code query parameter that Google Fonts sets within their Embed code page. Below are some examples of the necessary string structure. There are automated tests in place to ensure that these query parameter strings remain valid. With the static property set to true, the theme will download each font and modify the CSS to reference the downloaded fonts. This is useful for deploying to servers with restrictive CORS headers.

{
  "meta": {
    "themeOptions": {
      "fonts": {
        "google-fonts": {
          "display": "family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap",
          "copy": "family=Sanchez:ital@0;1&display=swap",
          "monospaced": "family=IBM+Plex+Mono:ital@0;1&display=swap",
          "enabled": true,
          "static": true
        }
      }
    }
  }
}

#Icons

Nerd Fonts are batteries included and opinionated for now. If this should change in the future, please let me know what kind of functionality you have in mind. The current options are enabled by default and include enabling the option completely. With the static property set to true, the theme will download the Nerd Font CSS and symbol font modifying the CSS to reference the downloaded font. This is useful for deploying to servers with restrictive CORS headers.

{
  "meta": {
    "themeOptions": {
      "icons": {
        "nerd-fonts": {
          "enabled": true,
          "static": true
        }
      }
    }
  }
}

refs

clone