Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 just before </body> tag:

<script type="text/javascript" src="https://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 npm

npm install github-profile-card --save

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,
    hideTopLanguages: false,
});

widget.init();

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.

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

You can’t perform that action at this time.