Table of Contents
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
npm install jsonresume-theme-eventideThis 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.linksgets sensible defaults when omittedmeta.themeOptions.footer_rightgets aresume-toolkitdefault 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:
sectionssectionLabelsprojectsByType
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-eventideResumed 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-eventideEventide 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.htmlYou 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"]
}
}
}
}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"
}
}
}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.
The theme renders a footer with left and right text blocks, styled similarly to the Blowfish footer.
.meta.themeOptions.footer_leftdefaults to© <name from JSONResume> <current year>.meta.themeOptions.footer_rightdefaults toPowered by [Eventide](https://github.com/zzamboni/jsonresume-theme-eventide)
Both fields accept Markdown, so you can include links in either side of the footer.
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>.
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.
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"
}
}
}
}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.
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" }
]
}
}
}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 withnameand optionallyurl, but withoutissuer,date, orimage, is treated as a note entry and rendered at the top of the certificates list. - In
publications, an entry withnameand optionallyurl, but withoutpublisher,releaseDate, orsummary, 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 fordescriptionandtypeif 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."
}
]
}To publish a new release, bump the package version and push the commit together with its tag:
npm version patch
git push --follow-tagsPushing 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