# Resume.github.com File Structure: A Complete Guide to the Repository Layout

> Understand the resume.github.com file structure. Explore its Rack-based architecture client-side JavaScript dynamic resume generation and Mustache templates.

- Repository: [GitHub resume generator/resume.github.com](https://github.com/resume/resume.github.com)
- Tags: how-to-guide
- Published: 2026-03-04

---

**TLDR:** **The resume.github.com application uses a minimalist Rack-based architecture with `config.ru` serving static files, while all dynamic résumé generation is handled client-side by [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) using Mustache templates stored in the `views/` directory.**

The resume.github.com repository transforms public GitHub profiles into printable résumés through a deliberately flat, lightweight file structure. Understanding the resume.github.com file structure reveals how a single Ruby Rack configuration and logical directory separation power the entire application without server-side rendering.

## Root Directory: Rack Configuration and HTML Shell

The application root contains the entry points that bootstrap the entire system. The `config.ru` file configures Rack to serve static directories and fallback to [`index.html`](https://github.com/resume/resume.github.com/blob/main/index.html) for all routes.

```ruby
use Rack::Static, :urls => ["/css", "/images", "/js", "/views"], :root => "."
run lambda { |env| [200, { 'Content-Type' => 'text/html' }, File.open('index.html', File::RDONLY)] }

```

The [`index.html`](https://github.com/resume/resume.github.com/blob/main/index.html) file provides only a minimal HTML skeleton containing an empty `<div id="resume">` element. According to the resume.github.com source code, the server performs **no server-side rendering**—it simply delivers this shell to the browser, where JavaScript subsequently fetches GitHub data and populates the DOM.

## Asset Directories: CSS, JavaScript, and Images

The repository organizes static resources into three logical directories that `config.ru` exposes via `Rack::Static`:

- **`css/`** — Contains [`resume.css`](https://github.com/resume/resume.github.com/blob/main/resume.css) for screen layouts using the YUI grid system and [`print.css`](https://github.com/resume/resume.github.com/blob/main/print.css) for print-specific styling adjustments.
- **`js/`** — Houses the application engine in [`githubresume.js`](https://github.com/resume/resume.github.com/blob/main/githubresume.js) alongside vendor dependencies like [`js/vendor/jquery-2.1.4.min.js`](https://github.com/resume/resume.github.com/blob/main/js/vendor/jquery-2.1.4.min.js).
- **`images/`** — Stores UI assets including favicons, loader animations, and printable background graphics.

All routing to these paths is handled by the static middleware, allowing the client to request assets directly via standard relative URLs.

## Template System: The Views Directory

Dynamic content rendering relies on Mustache template fragments stored in `views/`. These HTML files contain placeholders that [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) populates at runtime:

- **[`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html)** — Primary template for user résumés with placeholders for name, avatar, repositories, and languages.
- **[`views/resumeOrgs.html`](https://github.com/resume/resume.github.com/blob/main/views/resumeOrgs.html)** — Specialized layout for organization profiles.
- **[`views/job.html`](https://github.com/resume/resume.github.com/blob/main/views/job.html)** — Fragment for rendering popular repository listings.
- **[`views/org.html`](https://github.com/resume/resume.github.com/blob/main/views/org.html)** — Template fragment for organization memberships.
- **[`views/contrib.html`](https://github.com/resume/resume.github.com/blob/main/views/contrib.html)** — Layout for contribution statistics and merged pull requests.

The application loads these templates via AJAX and merges them with a JavaScript view model constructed from GitHub API responses.

## Client-Side Execution Architecture

When a visitor accesses `https://resume.github.com/?username`, the execution follows this path:

1. **Static Delivery** — `config.ru` serves [`index.html`](https://github.com/resume/resume.github.com/blob/main/index.html) for any request.
2. **Parameter Parsing** — [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) reads `window.location.search` to extract the `username` query parameter.
3. **API Integration** — Helper functions `github_user()`, `github_user_repos()`, `github_user_issues()`, and `github_user_orgs()` fetch JSON data via JSONP callbacks.
4. **View Model Construction** — The script builds a `view` object (around line 222 in [`githubresume.js`](https://github.com/resume/resume.github.com/blob/main/githubresume.js)) containing fields like `name`, `location`, `repo counts`, and an `early-adopter` flag.
5. **Template Rendering** — Mustache merges the view object with the appropriate template (e.g., [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html)) and injects the result into `<div id="resume">`.
6. **Conditional Checks** — The `github_user_starred_resume()` function (lines 101-146) verifies if the user has starred the project before displaying the full résumé.

## Practical Code Examples

### Embedding a Résumé Link

Generate a résumé for any GitHub user by appending their username as a query parameter:

```html
<a href="https://resume.github.com/?octocat">View Octocat's Résumé</a>

```

When clicked, the client-side script in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) executes the data fetching and rendering pipeline automatically.

### Extending the View Model

To expose additional GitHub fields, modify the view construction in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) and update [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html):

```javascript
var view = {
  // existing fields...
  company: data.company  // new field
};

```

```mustache
{{#company}}<p>Company: {{company}}</p>{{/company}}

```

This pattern allows customization of the résumé output without touching the server configuration in `config.ru`.

## Summary

- **Flat Architecture** — The resume.github.com file structure keeps all components in a shallow hierarchy: root configuration, asset directories, and template folders.
- **Rack Static Serving** — `config.ru` uses `Rack::Static` to serve `css/`, `js/`, `images/`, and `views/` directories, falling back to [`index.html`](https://github.com/resume/resume.github.com/blob/main/index.html) for client-side routing.
- **Client-Side Rendering** — All GitHub API logic, data shaping, and Mustache template rendering occurs in [`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js) within the browser.
- **Modular Templates** — The `views/` directory contains discrete Mustache fragments ([`resume.html`](https://github.com/resume/resume.github.com/blob/main/resume.html), [`job.html`](https://github.com/resume/resume.github.com/blob/main/job.html), [`org.html`](https://github.com/resume/resume.github.com/blob/main/org.html)) that assemble the final DOM dynamically.
- **Zero Server-Side Logic** — The Ruby layer handles only file delivery; no processing occurs on the server beyond static asset serving.

## Frequently Asked Questions

### What server technology powers resume.github.com?

The application runs on **Rack**, a Ruby web server interface. The `config.ru` file configures a static file server using `Rack::Static` middleware, which serves the HTML, CSS, JavaScript, and template files directly without server-side processing.

### Where is the main application logic located?

All dynamic functionality resides in **[`js/githubresume.js`](https://github.com/resume/resume.github.com/blob/main/js/githubresume.js)**. This single file contains functions like `github_user()`, `github_user_repos()`, and the view model construction logic that calls the GitHub API and renders Mustache templates from the `views/` directory.

### How does resume.github.com handle résumé templates?

Templates are stored as **Mustache fragments** in the `views/` directory (e.g., [`views/resume.html`](https://github.com/resume/resume.github.com/blob/main/views/resume.html), [`views/job.html`](https://github.com/resume/resume.github.com/blob/main/views/job.html)). The JavaScript application loads these via AJAX, merges them with JSON data retrieved from GitHub's API, and injects the resulting HTML into the page shell defined in [`index.html`](https://github.com/resume/resume.github.com/blob/main/index.html).

### Can the application generate résumés without client-side JavaScript?

No. According to the source code architecture, **no server-side rendering** occurs. The Rack server in `config.ru` only delivers static files. If JavaScript is disabled, the application cannot execute [`githubresume.js`](https://github.com/resume/resume.github.com/blob/main/githubresume.js) to fetch GitHub data or populate the templates, leaving the user with only the empty HTML skeleton.