jsonresume-theme-eventide

Table of Contents

• jsonresume-theme-eventide
  • Overview
  • Installation
  • Usage
    • With resume-toolkit
    • With resume-cli
    • With Resumed
    • Standalone usage
  • Options
    • Colors
    • Icons
    • Certificate, work and education badges and logos
    • Footer
    • Grouping projects by type
    • Sections
      • Ordering
      • Custom Labels
    • Table of contents
    • Floating links
    • Note fields
  • Under the hood

Overview

A flat JSON Resume theme, compatible with the latest resume schema. Fork of jsonresume-theme-even. See resume-toolkit if you want to generate both HTML and PDF from a JSON Resume file.

[!TIP] Examples:

• Author's CV: https://zzamboni.org/vita/
• Interactive editor: https://zzamboni.github.io/jsonresume-theme-eventide/

Features:

• 💄 Markdown support in all text fields
• 📐 CSS grid layout
• 🌗 Light and dark modes
• 🎨 Customizable colors
• 🖼️ Support for FontAwesome and Feather icons
• 🏅 Support for certificate badges, company and school logos
• 📝 Support for "note" entries in publications, certificates and projects
• 🗂️ Auto-grouping of project entries by type
• 🏷️ Customizable section labels and ordering
• 📚 Table of contents
• 🔗 Configurable floating links in the bottom-right of the theme
• 🧩 Standalone CLI
• 📦 ESM and CommonJS builds
• 🤖 TypeScript typings

Repository →

Installation

npm install jsonresume-theme-eventide

Usage

With resume-toolkit

This theme is bundled and automatically used by resume-toolkit, which produces both HTML and PDF outputs:

wget https://raw.githubusercontent.com/zzamboni/resume-toolkit/refs/heads/main/build-resume.sh
chmod a+rx build-resume.sh
./build-resume resume.json --serve # Access at https://localhost:8080/

When used through resume-toolkit, some meta.themeOptions values are preprocessed before Eventide renders the HTML:

• meta.themeOptions.links gets sensible defaults when omitted
• meta.themeOptions.footer_right gets a resume-toolkit default when omitted
• <resume> and <publications> placeholders in floating-link URLs are expanded before rendering

resume-toolkit also reuses some meta.themeOptions values in its PDF renderer, notably:

• sections
• sectionLabels
• projectsByType

With resume-cli

resume-cli does not bundle this fork, so install it explicitly and select it by name:

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

With Resumed

Resumed requires you to install the theme, since it does not come with any by default. It will then automatically load and use Eventide when rendering a resume:

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

Standalone usage

Eventide comes with a barebones CLI that reads resumes from stdin and outputs HTML to stdout. This allows usage without any resume builder tools:

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

Options

Colors

You can override theme colors via the .meta.themeOptions.colors resume field. Each entry defines a tuple of light and (optional) dark color values. If only one array value is defined, it will be used in both light and dark modes.

Here's an example using the default theme colors:

{
  "meta": {
    "themeOptions": {
      "colors": {
        "background": ["#ffffff", "#191e23"],
        "dimmed": ["#f3f4f5", "#23282d"],
        "primary": ["#191e23", "#fbfbfc"],
        "secondary": ["#6c7781", "#ccd0d4"],
        "accent": ["#0073aa", "#00a0d2"]
      }
    }
  }
}

Icons

By default, Font Awesome icons are used for the profile and contact links. You can switch to Feather icons by setting the .meta.themeOptions.icons resume field to "feather":

{
  "meta": {
    "themeOptions": {
      "icons": "feather"
    }
  }
}

Certificate, work and education badges and logos

If a certificate, work or education entry contains an image field, it is used as the URL of an image to display next to the entry.

Footer

The theme renders a footer with left and right text blocks, styled similarly to the Blowfish footer.

• .meta.themeOptions.footer_left defaults to © <name from JSONResume> <current year>
• .meta.themeOptions.footer_right defaults to Powered by [Eventide](https://github.com/zzamboni/jsonresume-theme-eventide)

Both fields accept Markdown, so you can include links in either side of the footer.

Grouping projects by type

If the .meta.themeOptions.projectsByType is true, project entries are rendered as separate sections according to their type field, instead of as a single section. Per-type sections can also be reordered and configured with custom labels by specifying them as projects:<type>.

Sections

Ordering

You can override what sections are displayed, and in what order, via the .meta.themeOptions.sections resume field.

Here's an example with all available sections in their default order:

{
  "meta": {
    "themeOptions": {
      "sections": [
        "work",
        "volunteer",
        "education",
        "projects",
        "awards",
        "certificates",
        "publications",
        "skills",
        "languages",
        "interests",
        "references"
      ]
    }
  }
}

Any sections not in the above list are not registered and won't be displayed in the final render.

Custom Labels

You can override the default section labels. Particularly useful if you want to translate a resume into another language.

{
  "meta": {
    "themeOptions": {
      "sectionLabels": {
        "work": "Jobs",
        "projects": "Projekter"
      }
    }
  }
}

If .meta.themeOptions.projectsByType is true, you can also break out project types into individually ordered/labeled sections by using projects:<type> entries. For example:

{
  "meta": {
    "themeOptions": {
      "projectsByType": true,
      "sections": ["work", "projects:application", "projects:library", "skills"],
      "sectionLabels": {
        "projects:application": "Apps",
        "projects:library": "Libraries"
      }
    }
  }
}

Table of contents

The floating table of contents is enabled by default. You can disable it by setting .meta.themeOptions.showTableOfContents to false:

{
  "meta": {
    "themeOptions": {
      "showTableOfContents": false
    }
  }
}

The table of contents automatically includes links to all resume sections that have content, plus a "Top" link to return to the beginning of the document. The active section is highlighted as you scroll through the resume. On narrower screens it moves behind a hamburger button in the top-right corner, and it remains hidden in print mode.

Floating links

You can add floating action links in the bottom-right corner by setting .meta.themeOptions.links to an array of { name, url, icon } objects. The icon value can be a plain Font Awesome name like github, or a full Font Awesome class-style string such as fa-regular fa-file-pdf or fa-brands fa-github.

On narrower screens, floating links are hidden by default and only appear when the full-screen table-of-contents overlay is open.

{
  "meta": {
    "themeOptions": {
      "links": [
        { "name": "PDF", "url": "/vita/zamboni-vita.pdf", "icon": "file-pdf" },
        { "name": "GitHub", "url": "https://github.com/zzamboni", "icon": "github" }
      ]
    }
  }
}

Note fields

The theme supports lightweight "note-style" entries in a few places. These are useful for linking to a fuller external list, adding a short explanatory entry, or including a simple item without the full metadata normally associated with that section.

• In certificates, an entry with name and optionally url, but without issuer, date, or image, is treated as a note entry and rendered at the top of the certificates list.
• In publications, an entry with name and optionally url, but without publisher, releaseDate, or summary, is treated as a note entry and rendered at the top of the publications list.
• In projects, project note entries can be rendered by omitting all fields except for description and type if needed.

Examples:

{
  "certificates": [{ "name": "Full certificate list", "url": "https://example.com/certificates" }],
  "publications": [{ "name": "Full publication list", "url": "https://example.com/publications" }],
  "projects": [
    {
      "name": "Side project archive",
      "url": "https://example.com/projects",
      "description": "A collection of smaller experiments and prototypes."
    }
  ]
}

Under the hood

To publish a new release, bump the package version and push the commit together with its tag:

npm version patch
git push --follow-tags

Pushing a v* tag triggers the GitHub Actions publish workflow, which runs the checks and publishes the package to npm automatically.

You can automate the normal release flow with mise:

mise run release patch