@deadrat/jsonresume-theme-stackoverflow

⚠️ Note: This is a customized, private fork of the original theme maintained. (It specifically contains custom typography adjustments and tailored ordering suited to my resume). Most users should check out and use the original, excellent upstream repository at phoinixi/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 @deadrat/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 → work → education → projects → volunteer → awards → certificates → publications → skills → 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