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

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 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 for all routes.

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 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 for screen layouts using the YUI grid system and print.css for print-specific styling adjustments.
• js/ — Houses the application engine in githubresume.js alongside vendor dependencies like 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 populates at runtime:

• views/resume.html — Primary template for user résumés with placeholders for name, avatar, repositories, and languages.
• views/resumeOrgs.html — Specialized layout for organization profiles.
• views/job.html — Fragment for rendering popular repository listings.
• views/org.html — Template fragment for organization memberships.
• 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 for any request.
2. Parameter Parsing — 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) 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) 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:

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

When clicked, the client-side script in 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 and update views/resume.html:

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

{{#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 for client-side routing.
• Client-Side Rendering — All GitHub API logic, data shaping, and Mustache template rendering occurs in js/githubresume.js within the browser.
• Modular Templates — The views/ directory contains discrete Mustache fragments (resume.html, job.html, 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. 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, 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.

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 to fetch GitHub data or populate the templates, leaving the user with only the empty HTML skeleton.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}