JSON Resume Theme - GitHub Style


A modern, clean JSON Resume theme based on GitHub's soft dark and light themes with seamless dark/light mode support and mobile-responsive layout using Tailwind CSS.


Features

- GitHub Soft Themes: Authentic recreation of GitHub's soft dark and light color schemes with frosted glass effects
- Dark/Light Mode: Automatic theme detection with manual toggle and localStorage persistence
- Mobile Responsive: Fully optimized for mobile, tablet, and desktop views
- Modern Technology: Built with Tailwind CSS for modern styling
- Self-Contained: All styles and scripts embedded in the template
- Web-First Design: Optimized for screen viewing with beautiful visual effects

Installation

$3

1. Install the theme:
``bash
npm install jsonresume-theme-github-styled
`

2. Create or use your existing resume.json file following the JSON Resume schema

3. Generate your resume:
`bash
npx resume export resume.html --theme github-styled
`

$3

1. Clone or download this repository
2. Install dependencies:
`bash
npm install
`

3. Install resume-cli globally if you haven't already:
`bash
npm install -g resume-cli
`

4. Create a resume.json file with your information

5. Serve your resume locally:
`bash
npx resume serve --theme .
`

6. Open your browser to http://localhost:4000

JSON Resume Schema

Your resume.json should follow the JSON Resume schema. Here's a minimal example:

`json
{
"basics": {
"name": "John Doe",
"label": "Software Engineer",
"image": "",
"email": "john@example.com",
"phone": "(555) 555-5555",
"url": "https://johndoe.com",
"summary": "A passionate software engineer...",
"location": {
"city": "San Francisco",
"region": "CA",
"countryCode": "US"
},
"profiles": [
{
"network": "GitHub",
"username": "johndoe",
"url": "https://github.com/johndoe"
}
]
},
"work": [...],
"education": [...],
"skills": [...],
"projects": [...]
}
`

Theme Features

$3

- ✅ Basics (name, contact, summary, profiles)
- ✅ Work Experience
- ✅ Education
- ✅ Skills
- ✅ Projects
- ✅ Awards
- ✅ Certificates
- ✅ Publications
- ✅ Volunteer Experience
- ✅ Languages
- ✅ Interests
- ✅ References

$3

The theme features GitHub's authentic soft dark and soft light color schemes with frosted glass tile effects. It automatically detects your system's color scheme preference and applies the appropriate theme. You can manually toggle between dark and light modes using the button in the top-right corner. Your preference is saved in localStorage and persists across sessions.

$3

The theme is fully responsive with breakpoints optimized for:
- Mobile devices (< 768px)
- Tablets (768px - 1024px)
- Desktop (> 1024px)

$3

The theme features frosted glass tiles with backdrop blur and subtle shadows, creating a modern, layered visual effect that works beautifully in both dark and light modes. This is a web-first design optimized for screen viewing rather than printing.

Customization

$3

The theme uses GitHub's color palette defined in the Tailwind config. You can customize colors by modifying the tailwind.config section in resume.hbs:

`javascript
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
github: {
// Customize colors here
}
}
}
}
}
`

$3

The template uses Handlebars for templating. You can modify resume.hbs to adjust the layout, add new sections, or change the styling.

Exporting

$3


`bash
npx resume export resume.html --theme github-styled
`

$3

`bash
npx resume export resume.pdf --theme github-styled
``

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Credits

- Design inspired by GitHub
- Built with Tailwind CSS
- Based on JSON Resume