# How to Customize Resume Templates in resume.github.com: A Complete Guide
> Customize resume.github.com templates by editing HTML and CSS without backend code. Learn how to personalize your resume layout and appearance for free.
- Repository: [GitHub resume generator/resume.github.com](https://github.com/resume/resume.github.com)
- Tags: how-to-guide
- Published: 2026-03-04
---
**You can customize resume templates in resume.github.com by editing the Mustache HTML templates in `views/`, extending the view model in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js), and modifying styles in [`css/resume.css`](https://github.com/resume/resume.github.com/blob/main/css/resume.css)—all without touching backend code.**
The open-source project **resume.github.com** generates professional résumés directly from GitHub profile data. If you need to customize how these resume templates display your information, the repository provides a flexible three-layer architecture that allows full client-side customization.
## Understanding the Resume Template Architecture
### The Three-Layer System
The resume templates consist of three integrated components working together in the browser:
1. **Template (HTML + Mustache)** – Static markup with `{{…}}` placeholders that are filled at runtime
2. **Styling (CSS)** – Visual appearance including print-friendly layouts
3. **Data Injection (JavaScript)** – Fetches GitHub API data, builds the view model, and renders the Mustache template
### Key Source Files
| File | Role |
|------|------|
| [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) | Fetches GitHub data, assembles the `view` object, and renders templates |
| [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html) | Mustache template for individual developer résumés |
| [`views/resumeOrgs.html`](https://github.com/resume/resume.github.com/blob/main/views/resumeOrgs.html) | Mustache template for GitHub organization résumés |
| [`css/resume.css`](https://github.com/resume/resume.github.com/blob/main/css/resume.css) | All styling for screen and print media |
| [`views/job.html`](https://github.com/resume/resume.github.com/blob/main/views/job.html) | Partial template for repository entries |
| [`views/contrib.html`](https://github.com/resume/resume.github.com/blob/main/views/contrib.html) | Partial template for contribution entries |
| [`views/org.html`](https://github.com/resume/resume.github.com/blob/main/views/org.html) | Partial template for organization entries |
## How to Customize Resume Templates
### Modifying the Mustache Template Structure
The HTML structure lives in [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html) (for users) and [`views/resumeOrgs.html`](https://github.com/resume/resume.github.com/blob/main/views/resumeOrgs.html) (for organizations). These files contain Mustache syntax where `{{variable}}` outputs escaped text and `{{{variable}}}` outputs raw HTML (used for repository descriptions that may contain emoji images).
To customize the layout:
1. Edit the HTML structure in [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html)
2. Add new `{{variable}}` placeholders where you want dynamic data to appear
3. The template is loaded via AJAX at lines 298-304 in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js)
### Extending the View Model with Custom Data
The `view` object is assembled starting at line 222 in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js). This object is passed to `Mustache.to_html` at line 298 to populate the template.
To add custom data:
1. Locate the view model construction around line 222 in [`githubresume.js`](https://github.com/resume/resume.github.com/blob/main/githubresume.js)
2. Add new properties to the `view` object
3. Reference these properties in the Mustache template using `{{newProperty}}`
### Styling Customizations with CSS
All visual styling is controlled by [`css/resume.css`](https://github.com/resume/resume.github.com/blob/main/css/resume.css). The stylesheet includes both screen and print media queries, making it ideal for creating print-friendly résumés.
Key selectors to modify:
- `.yui-gf h2` and `.yui-gf h3` – Section headings
- `header` – Header background and spacing
- `@media print` – Print-specific layout adjustments
## Practical Customization Examples
### Adding a Personal Tagline Field
This example adds a tagline using the GitHub bio field.
**Step 1: Extend the view model in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js)**
```javascript
// After line 222 where the view object is built
view.tagline = data.bio ? data.bio : '';
```
**Step 2: Update the template in [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html)**
```html
{{#tagline}}{{tagline}}
{{/tagline}}
```
**Result:** The résumé displays the GitHub bio as a tagline under the user status.
### Changing the Header Background Color
**Edit [`css/resume.css`](https://github.com/resume/resume.github.com/blob/main/css/resume.css):**
```css
/* Header background */
header {
background-color: #f0f8ff; /* light azure */
margin: 2.5em 0 3em 0;
padding-bottom: 1.5em;
border-bottom: 1px solid #ccc;
}
```
### Adding a Static Skills List from JSON
**Step 1: Create [`data/skills.json`](https://github.com/resume/resume.github.com/blob/main/data/skills.json)**
```json
{
"skills": ["JavaScript", "Node.js", "HTML5", "CSS3", "Git"]
}
```
**Step 2: Load the JSON in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js)**
```javascript
$.getJSON('data/skills.json', function(skillData) {
view.skills = skillData.skills;
// Continue with rendering after skills are loaded
renderResume(view);
});
```
**Step 3: Add the Mustache block to [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html)**
```html
{{#skills}}
Skills
{{#skills}}- {{.}}
{{/skills}}
{{/skills}}
```
**Step 4: Style the list in [`css/resume.css`](https://github.com/resume/resume.github.com/blob/main/css/resume.css)**
```css
/* Skills list */
ul { list-style: disc inside; margin-left: 1em; }
li { line-height: 1.5em; }
```
## Summary
- **resume.github.com** uses a three-layer architecture: Mustache templates (`views/`), CSS styling ([`css/resume.css`](https://github.com/resume/resume.github.com/blob/main/css/resume.css)), and JavaScript data injection ([`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js)).
- Customize resume templates by editing the HTML structure in [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html) or [`views/resumeOrgs.html`](https://github.com/resume/resume.github.com/blob/main/views/resumeOrgs.html) and adding new `{{variable}}` placeholders.
- Extend the `view` object in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) (starting at line 222) to add custom data fields that populate your template placeholders.
- Modify [`css/resume.css`](https://github.com/resume/resume.github.com/blob/main/css/resume.css) to change fonts, colors, spacing, and print layouts without affecting the data structure.
- All customization happens client-side; no backend changes are required.
## Frequently Asked Questions
### What is Mustache.js and why does resume.github.com use it?
Mustache.js is a logic-less template syntax that uses `{{variable}}` tags to insert data into HTML. The resume.github.com project uses Mustache because it allows clean separation between the HTML structure (in [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html)) and the data model (assembled in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js)). This separation makes it easy to customize resume templates without writing complex JavaScript logic.
### Can I customize resume templates without modifying JavaScript?
Yes, you can make visual and structural changes without touching JavaScript. You can edit the HTML structure in [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html) to rearrange sections, and modify [`css/resume.css`](https://github.com/resume/resume.github.com/blob/main/css/resume.css) to change colors, fonts, and layouts. However, if you want to display data that isn't already provided by the GitHub API (such as a custom skills list), you will need to extend the view model in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js).
### How do I add new sections to the resume template?
To add new sections, first extend the `view` object in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) (around line 222) to include your new data property. Then add a Mustache block to [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html) using the syntax `{{#propertyName}}...{{/propertyName}}` to conditionally render the section. Finally, add corresponding CSS rules to [`css/resume.css`](https://github.com/resume/resume.github.com/blob/main/css/resume.css) to style your new section appropriately.
### Will my customizations persist when the repository updates?
Customizations you make to a forked or cloned repository will persist in your own copy, but they may conflict with upstream changes if you pull updates from the original resume.github.com repository. To maintain your customizations through updates, consider creating a separate branch for your changes, or store custom data (like skills JSON) in separate files that won't be overwritten by core template updates.