Skip to content
Unofficial Github profile card made using github api
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit adf2c88 Jul 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md readme update Jul 14, 2019
card.js card language error handling added Jun 18, 2018
cardStyle.css Version bump / Multiple repositories, scrollbar added Jun 15, 2018
example.png Version bump / Multiple repositories, scrollbar added Jun 15, 2018
index.html Readme Update / index link fixed Jun 18, 2018

README.md

Github Profile Card

Unofficial Github profile card for your websites / blogs

Generator : https://apps.saurabhdaware.in/github-profile-card

How to use

  • Enter your username, repository names(seprated by ",") and paste wherever you want your card to appear
    <div username='saurabhdaware' repos='github-profile-card, storm, stormv2,planetZerugoria' class='github-card' id="card"></div>
  • If you want to add all your repositories
    <div username='saurabhdaware' repos='all' class='github-card' id='card'>
  • Paste following code before the end of body tag </body> or in between your <head></head> tags
    <script src='https://saurabhdaware.github.io/github-profile-card/card.js'></script>
  • If you dont want to show repositories you can simply remove those attributes
    <div username='saurabhdaware' class='github-card' id="card"></div>

How to customize

  • These are the original styles of outer div
.github-profile{
    margin:0 !important;
    padding:0;
    display:inline-block;
    border:1px solid black;
    width:300px;
    font-family: 'Play', sans-serif;
    box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
}
  • If your name doesn't fit perfectly in the card you can adjust the width of that card with
.github-profile{
    width:400px !important;
}
  • Adding more than 3 repositories will add a scrollbar in the card if you want to remove that scrollbar you can put following in your css
.github-card-repos{
    max-height:none !important;
    overflow-y: visible !important;
}
  • You can see full css file here If you want to change any style just overwrite them with your css

Example

  • Input
<html>
    <head>
    </head>
    <body>
        <!-- Other html -->
        <div username='saurabhdaware' repos='github-profile-card,storm,stormv2,planetZerugoria' class='github-card' id="card"></div>
        <!-- More html -->
        <script src='https://saurabhdaware.github.io/github-profile-card/card.js'></script>
    </body>
</html>
  • Output

  • Let me know if you find any bug.
You can’t perform that action at this time.