romanroibu / github-profile-card

Simple and easy to use widget with your GitHub profile — No dependencies

Home Page:

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

GitHub Profile Card

Widget shows your GitHub profile directly on your website.
Show your current projects — always up to date.


Live demo and configuration


Main features

  • Top languages statistics
  • Last updated repositories
  • Configurable in HTML
  • Copy-Paste installation
  • No jQuery and any other libraries required


Quick install

Include script and style just before </body> tag:

<script type="text/javascript" src=""></script>

Include HTML code anywhere you would like to place widget:

<div id="github-card"

Great! Widget will autoload. We're done here.


With npm

npm install github-profile-card --save

Advanced configuration

Configure widget in HTML:

<div id="github-card"
     data-header-text="Most starred repositories">

For special usages, it is possible to configure widget(s) in JavaScript. You have to use different template than #github-card.

var widget = new GitHubCard({
    username: 'YOUR_GITHUB_USERNAME'
    template: '#github-card-demo',
    sortBy: 'stars',
    reposHeaderText: 'Most starred',
    maxRepos: 5,
    hideTopLanguages: false,


Configuration options

HTML option (data- prefix) JavaScript option Default Details
username username None GitHub profile username
template #github-card DOM selector of your widget in HTML
sort-by sortBy stars Repositories sorting method (stars or updateTime)
max-repos maxRepos 5 Amount of listed repositories. 0 disables section
header-text headerText Most starred repositories Text label above repositories list
hide-top-languages hideTopLanguages false Avoids heavy network traffic for calculating Top Languages section. Recommended for profiles with huge amount of repositories.


  • My language statistic is affected by libraries and dependencies

    Consider ignoring them with .gitattributes: My repository is detected as the wrong language

  • How language statistic is build?

    It is sum of all characters written in language you use. One big repository in C# will be ranked higher than many small JavaScript repositories.

    It is based on 10 last updated repositories, to represent your current interests.

  • How to show two or more profiles on page?

    You have to create two widgets with different ID, then initialize each manually in JS.


    <div id="github-card-1" data-username="user1"></div>
    <div id="github-card-2" data-username="user2"></div>
        new GitHubCard({ template: '#github-card-1' }).init();
        new GitHubCard({ template: '#github-card-2' }).init();


I love feedback, send me one!

Remember no other libraries required. It's like gluten free 😉



Simple and easy to use widget with your GitHub profile — No dependencies

License:MIT License


Language:JavaScript 97.4%Language:TypeScript 2.2%Language:CSS 0.4%