jsonresume-theme-reactive

A flat and reactive JSON Resume theme.

• 🤖 strongly typed with TypeScript
• 📑 templated with JSX/TSX
• 💅 styled with UnoCSS
• 📄 Markdown support
• 🌗 Light and dark mode
• 📱 Responsive design
• 🎨 Customizable colors
• 💬 Customizable labels
• 📦 ESM and CommonJS build

🖼️ Example

📦 Installation

Install the package with your preferred package manager (e.g. npm)

npm i -D jsonresume-theme-reactive

💻 Usage

With resume-cli

Install resume-cli and this theme to render your resume.

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

With resumed

Install resumed and this theme to render your resume.

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

⚙️ Options

Tip: specify the theme in your resume.json under meta

{
  // ...
  "meta": {
    "theme": "jsonresume-theme-reactive",
    // ...
  }
}

Change colors

You can override theme colors in your resume.json under meta.themeOptions.colors.

{
  // ...
  "meta": {
    "themeOptions": {
      "colors": {
        "primary": "#3F51B5",
        "secondary": "#AD1457",
      }
    }
    // ...
  }
}

Change labels

You can override theme labels in your resume.json under meta.themeOptions.i18n.

{
  // ...
  "meta": {
    "themeOptions": {
      "i18n": {
        "sections.awards": "Awards",
        "sections.education": "Education",
        "sections.interests": "Interests",
        "sections.languages": "Languages",
        "sections.projects": "Projects",
        "sections.publications": "Publications",
        "sections.references": "References",
        "sections.skills": "Skills",
        "sections.volunteer": "Volunteer",
        "sections.work": "Work",
        "timeRange.openEnd": "Present"
      }
    }
    // ...
  }
}

💕 Thanks

This project is heavily inspired by and relies on other awesome projects:

• JSON Resume
• JSON Resume Schema
• jsonresume-theme-even