:octocat: Simple and easy to use widget with your GitHub profile — No dependencies
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
src
test
.gitignore
.jshintrc
CNAME
LICENSE
README.md
_config.yml
bower.json
gulpfile.js
karma.conf.js
package.json
tsconfig.json
tslint.json

README.md

GitHub Profile Card

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

Screenshot

Live demo and configuration

Contents

Main features

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

Changelog

Quick install

Include script and style inside of your <head> tag:

<link rel="stylesheet" href="http://github-profile.com/dist/gh-profile-card.min.css" />
<script type="text/javascript" src="http://github-profile.com/dist/gh-profile-card.min.js"></script>

Include HTML code anywhere you would like to place widget:

<div id="github-card"
     data-username="YOUR_GITHUB_USERNAME">
</div>

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

Download

With bower

bower install github-profile-card

With npm

npm install github-profile-card --save

Main files are in /dist/ directory.

Advanced configuration

Configure widget in HTML:

<div id="github-card"
     data-username="YOUR_GITHUB_USERNAME"
     data-max-repos="3"
     data-sort-by="stars"
     data-header-text="Most starred repositories">
</div>

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
});

widget.init();

Configuration options

HTML option (data- prefix) JavaScript option Type Default Details
username username string GitHub profile username
template string #github-card DOM selector of your widget in HTML
sort-by sortBy stars, updateTime stars Repositories sorting method
max-repos maxRepos int 5 Amount of listed repositories. 0 disables section
header-text headerText string Most starred repositories Text label above repositories list

FAQ

  • 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.

    e.g.

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

Feedback

I love feedback, send me one!

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

gluten-free