GitHub Profile Card

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

Live demo and configuration

Contents

• GitHub Profile Card
  • Main features
  • Live demo and configuration
  • Changelog
• Quick install
  • Download
  • Advanced configuration
  • Configuration options
• FAQ
• Feedback

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!

• show me website on which you're using this widget: leave comment
• ping me on twitter: @constjs
• create new issue

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