How Programming Languages Are Aggregated and Displayed in the Resume

The resume generator aggregates programming languages by counting the language field from each non-forked public repository, sorts them by popularity, limits the display to the top nine, and renders them as percentage-based links in the Languages section.

The open-source project resume/resume.github.com automatically builds a visual summary of a developer's coding profile by analyzing their public GitHub repositories. Understanding how programming languages are aggregated and displayed in the resume reveals the simple yet effective JavaScript pipeline that transforms raw API data into a structured language breakdown.

Step 1: Collecting Language Data from GitHub Repositories

The aggregation begins in js/githubresume.js where the script iterates over the repository list returned by the GitHub API. During this loop, the code inspects each repository's language property while explicitly excluding forked repositories from the count.

// githubresume.js lines 25-30
$.each(data, function(i, repo) {
    if (repo.fork !== false) { return; }          // ignore forks
    if (repo.language) {
        if (repo.language in languages) {
            languages[repo.language]++;           // increment existing count
        } else {
            languages[repo.language] = 1;         // first occurrence
        }
    }
});

This creates a plain object called languages that maps each programming language name to the number of repositories using it. The fork exclusion ensures that only original work influences the language statistics, preventing skewed results from contributed third-party code.

Step 2: Sorting and Limiting the Language List

Once the counts are gathered, the sortLanguages function converts the object into an array, calculates the total repository count, and applies a configurable limit. By default, the system displays only the top nine languages to maintain visual clarity.

// githubresume.js lines 43-49, 152-156
function sortLanguages(languages, limit) {
    var sorted_languages = [];
    var languageTotal = 0;
    for (var lang in languages) {
        if (typeof(lang) !== "string") { continue; }
        sorted_languages.push({
            name: lang,
            popularity: languages[lang],
            toString: function() {
                return '<a href="https://github.com/search?q=user%3A' +
                       username + '&l=' + encodeURIComponent(this.name) + '">' +
                       this.name + '</a>';
            }
        });
        languageTotal += languages[lang];
    }
    if (limit) { sorted_languages = sorted_languages.slice(0, limit); }
    return sorted_languages.sort(sortByPopularity);
}

// Called with default limit of 9
languages = sortLanguages(languages, maxLanguages);

The function returns objects containing the language name, popularity count, and a custom toString method that generates a search link. The maxLanguages parameter defaults to 9, though this can be adjusted when calling the function.

Step 3: Rendering the Language Section

The final rendering phase calculates percentages and injects structured HTML into the resume template. The code constructs <ul class="talent"> lists containing list items that display the language name as a clickable GitHub search link followed by its percentage of the total.

// githubresume.js rendering logic
$.each(languages, function(i, lang) {
    var percent = parseInt((lang.popularity / languageTotal) * 100);
    var li = $('<li>' + lang.toString() + ' ('+percent+'%)</li>');
    // Every third item closes the current <ul>
    if (i % 3 == 0 || (languages.length < 3 && i == languages.length - 1)) {
        li.attr('class', 'last');
        ul.append(li);
        $('#content-languages').append(ul);
        ul = $('<ul class="talent"></ul>');
    } else {
        ul.append(li);
        $('#content-languages').append(ul);
    }
});

The generated markup is inserted into the #content-languages placeholder defined in the HTML views. This placeholder exists in both views/resume.html and views/resumeOrgs.html, ensuring consistent language display across personal and organization resume types.

The resulting HTML structure follows this pattern:

<div class="yui-u" id="content-languages">
  <ul class="talent">
    <li><a href="https://github.com/search?q=user%3Ausername&l=JavaScript">JavaScript</a> (45%)</li>
    <li><a href="https://github.com/search?q=user%3Ausername&l=Python">Python</a> (30%)</li>
    <li class="last"><a href="https://github.com/search?q=user%3Ausername&l=Go">Go</a> (15%)</li>
  </ul>
</div>

Summary

• Aggregation occurs in js/githubresume.js where the script counts repo.language values from non-forked repositories only.
• Sorting and limiting happen via the sortLanguages function, which defaults to displaying the top 9 languages by repository count.
• Percentage calculations are derived by dividing individual language counts by the total repository count.
• Rendering targets #content-languages in views/resume.html or views/resumeOrgs.html, producing linked language names with percentage labels.
• GitHub search integration is built into every language link, allowing viewers to see specific repositories using that language.

Frequently Asked Questions

How does the resume generator handle repositories with multiple programming languages?

The system uses the primary language field provided by the GitHub API, which returns only the dominant language for each repository as determined by GitHub's Linguist library. Secondary languages are not counted in this aggregation, meaning each repository contributes to exactly one language statistic.

Why are forked repositories excluded from language statistics?

According to the source code in js/githubresume.js line 26, the condition if (repo.fork !== false) { return; } immediately skips any forked repository. This prevents third-party projects that a user has forked but not significantly modified from artificially inflating their language proficiency metrics.

Can I change how many programming languages appear on my resume?

Yes, the maxLanguages variable controls this limit and defaults to 9. While the public instance uses this default, modifying the call to sortLanguages(languages, maxLanguages) in js/githubresume.js allows you to display more or fewer languages when running a self-hosted version.

Where does the language data originate?

The data comes from the GitHub REST API's repository endpoint, specifically the language property on each repository object. This property is powered by GitHub Linguist, which analyzes repository contents to determine the primary programming language through file extension analysis and heuristics.

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