jsonresume-theme-stackoverflow

🚀 A Svelte-powered Stack Overflow theme for JSON Resume

🔗 Related

• resuml CLI — Use with resuml CLI for building, previewing, and exporting resumes
• jsonresume-theme-react — React-based JSON Resume theme
• JSON Resume — The open standard for resume data

✨ Features

• Svelte SSR — Server-side rendered with Svelte 5 for fast, clean HTML output
• Dark mode — Automatic light/dark theme via prefers-color-scheme
• Internationalization — 12 languages supported out of the box
• Customizable themes — Override colors and fonts via resume.json meta field
• Section ordering — Reorder resume sections via meta.theme.sectionOrder
• Override CSS — Drop in an override.css for full control
• PDF-ready — Built-in PDF render options with sensible margins
• Zero runtime JS — Pure HTML + CSS output, no client-side JavaScript

📸 Screenshots

| Light Mode | Dark Mode | |:---:|:---:| | | |

📦 Installation

npm install jsonresume-theme-stackoverflow

With resuml (recommended)

npm install -g resuml
resuml init                          # Create a resume.yaml
resuml build -t stackoverflow        # Build HTML
resuml pdf -t stackoverflow          # Export PDF
resuml serve -t stackoverflow        # Live preview

Programmatic Usage

const theme = require('jsonresume-theme-stackoverflow');
const resume = require('./resume.json');

// Optional: set language (default: "en-gb")
theme.changeLanguage('de');

const html = theme.render(resume);

🌍 Supported Languages

| Code | Language | |------|----------| | en-gb / en | English (default) | | de | German / Deutsch | | fr | French / Français | | es | Spanish / Español | | it | Italian / Italiano | | pt | Portuguese / Português | | zh | Chinese / 中文 | | ja | Japanese / 日本語 | | ko | Korean / 한국어 | | nl | Dutch / Nederlands | | pl | Polish / Polski | | ru | Russian / Русский |

const theme = require('jsonresume-theme-stackoverflow');
theme.changeLanguage('fr'); // Set before calling render()
const html = theme.render(resume);

🎨 Theme Customization

Customize colors and fonts by adding a theme object inside meta in your resume.json:

{
  "meta": {
    "theme": {
      "primaryColor": "#2563eb",
      "textColor": "#1e293b",
      "backgroundColor": "#ffffff",
      "fontFamily": "\"Inter\", sans-serif",
      "linkColor": "#2563eb",
      "headingColor": "#0f172a"
    }
  }
}

Available theme properties

| Property | CSS Variable | Description | |----------|-------------|-------------| | primaryColor | --color-accent | Section titles, accents | | textColor | --color-text | Main body text | | textSecondaryColor | --color-text-secondary | Secondary text (companies, dates) | | headingColor | --color-heading | Heading color | | linkColor | --color-link | Link color | | backgroundColor | --color-background | Page background | | backgroundAltColor | --color-background-alt | Summary section background | | borderColor | --color-border | Border colors | | keywordTextColor | --color-keyword-text | Skill/keyword tag text | | keywordBgColor | --color-keyword-bg | Skill/keyword tag background | | fontFamily | --font-family | Base font family |

Override CSS

For full CSS control, create an override.css file alongside your resume. The theme automatically loads it via <link rel="stylesheet" href="./override.css">.

📑 Section Ordering

Control the order of resume sections by adding a sectionOrder array to meta.theme:

{
  "meta": {
    "theme": {
      "sectionOrder": ["basics", "work", "skills", "education", "projects"]
    }
  }
}

Available sections

basics, skills, work, projects, volunteer, education, awards, certificates, publications, languages, interests, references

Default order: basics → skills → work → projects → volunteer → education → awards → certificates → publications → languages → interests → references

Only sections listed in sectionOrder will be rendered. Omit sections to hide them, or include all for full control over ordering.

🛠 Development

git clone https://github.com/phoinixi/jsonresume-theme-stackoverflow.git
cd jsonresume-theme-stackoverflow
npm install
npm run build
npm test

Generating Screenshots

Screenshots require puppeteer (not included in devDependencies to keep installs lean):

npm install puppeteer
node docs/screenshot.js

📄 License

MIT