"GitHub profile card"
Bootstrap 4.1.1 Snippet by harunpehlivan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title> GitHub profile card</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet' href='https://github-profile.com/dist/gh-profile-card.css?v=2'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="row"> <h1 id="github-profile-card"> <a href="http://github-profile.com/">GitHub Profile Card</a> </h1> <!-- Load your own profile --> <div class="config-section-left"> <!-- Widget template --> <form action="" class="tooltip choose-user"> <input type="text" placeholder="GitHub username" id="gh-uname"/> <input type="submit" id="gh-uname-submit" value="send"/> </form> <form action="" class="tooltip choose-repos-num"> <label for="gh-reposNum">repositories: </label> <input type="number" min="0" max="10" value="5" id="gh-reposNum"/> </form> <form action="" class="tooltip choose-repo-sorting"> <input type="radio" name="repo-sorting" id="last-updated" value=""/> <label for="last-updated">Last updated</label> <br/> <input type="radio" name="repo-sorting" id="most-starred" value="" checked/> <label for="most-starred" class="active">Most starred</label> </form> </div> <div class="content-section"> <div id="github-card-demo" data-username="harunpehlivan"></div> </div> </div> <h2>Use it on your website! - <a href="http://github-profile.com/#quick-install">Guide</a></h2> <div class="row"> <div class="pre"> <textarea id="install-code" readonly="1" rows="6" spellcheck="false" onclick="this.focus(); this.select()"> </textarea> </div> </div> <!-- partial --> <script src='https://github.com/piotrl/github-profile-card/releases/download/2.0.0/gh-profile-card.min.js'></script><script src="./script.js"></script> </body> </html>
/** GitHub Profile Card - v2.0.0 **/ /** * Github widget styles * ------------------------------------------------------------------ */ .gh-profile-card { /* followers number */ /* List of repositories */ } .gh-profile-card { width: 280px; border-radius: 5px; font-size: 16px; font-family: Helvetica; background: #FAFAFA; border-width: 1px 1px 2px; border-style: solid; border-color: #DDD; overflow: hidden; } .gh-profile-card a { text-decoration: none; color: #444; } .gh-profile-card a:hover { color: #4183C4; } .gh-profile-card .name { display: block; font-size: 1.2em; font-weight: bold; color: #222; } .gh-profile-card .error { font-size: 0.8em; color: #444; padding: 10px; } .gh-profile-card .error span { display: block; border-bottom: 1px solid #DDD; padding-bottom: 5px; margin-bottom: 5px; } .gh-profile-card .error span.remain { text-align: center; font-weight: bold; } .gh-profile-card .profile { background: #FFF; overflow: hidden; padding: 15px 10px; padding-bottom: 0; min-height: 135px; } .gh-profile-card .stats { padding: 5px; } .gh-profile-card .languages { position: relative; clear: both; margin: 0 -10px; padding: 10px; border-top: 1px solid #DEDEDE; font-size: 0.8em; } .gh-profile-card .languages::before { position: absolute; top: -0.7em; background: #FFF; padding-right: 5px; content: 'Top languages'; font-style: italic; color: #555; } .gh-profile-card .languages li { display: inline-block; color: #444; font-weight: bold; margin-left: 10px; } .gh-profile-card .languages li::after { content: '\2022'; margin-left: 10px; color: #999; } .gh-profile-card .languages li:last-child::after { content: ''; } .gh-profile-card .followMe { margin-top: 3px; } .gh-profile-card .follow-button { font-size: 0.8em; color: #333; float: left; padding: 0 10px; line-height: 1.5em; border: 1px solid #D5D5D5; border-radius: 3px; font-weight: bold; background: #EAEAEA; background-image: linear-gradient(#FAFAFA, #EAEAEA); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .gh-profile-card .follow-button:hover { color: inherit; background: #DDD; background-image: linear-gradient(#EEE, #DDD); } .gh-profile-card .followMe span { position: relative; background: #FFF; margin-left: 8px; padding: 0 5px; color: #444; font-size: 0.8em; border: 1px solid; border-color: #BBB; } .gh-profile-card .followMe span::before { content: ''; position: absolute; display: block; width: 5px; height: 5px; left: -4px; top: 30%; background: inherit; border-left: 1px solid; border-top: 1px solid; border-color: inherit; transform: rotate(-45deg); } .gh-profile-card .avatar { width: 64px; height: 64px; float: left; margin: 0 10px 15px 0; margin-left: 0; border-radius: 5px; box-shadow: 0 0 2px 0 #DDD; } .gh-profile-card .repos { clear: both; } .gh-profile-card .repos .header { display: block; width: 100%; font-weight: bold; background: #EAEAEA; background-image: linear-gradient(#FAFAFA, #EAEAEA); border: solid #D5D5D5; border-width: 1px 0; color: #555; font-size: 0.8em; padding: 5px 10px; } .gh-profile-card .repos a { position: relative; display: block; padding: 7px 10px; font-size: 0.9em; border-top: 1px solid #DDD; } .gh-profile-card .repos a:first-of-type { border: none; } .gh-profile-card .repos .repo-name { max-width: 280px; font-weight: bold; text-overflow: ellipsis; } .gh-profile-card .repos .updated { display: block; font-size: 0.75em; font-style: italic; color: #777; } .gh-profile-card .repos .star { position: absolute; font-size: 0.9em; right: 0.5em; top: 1.1em; color: #888; } .gh-profile-card .repos .star::after { content: '\a0\2605'; font-size: 1.1em; font-weight: bold; } /* Demo styles */ * { box-sizing: border-box; } body { max-width: 500px; margin: 10px auto; font-size: 18px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #232323; background-color: #FBFAF7; -webkit-font-smoothing: antialiased; } h1 { font-size: 30px; } h1, h2, h3 { display: block; font-family: Arvo, Monaco, serif; line-height: 1.3; font-weight: normal; color: #232323; margin: 36px 0 10px; border-bottom: 1px solid #ccc; padding-bottom: 5px; } a { color: #C30000; font-weight: 200; text-decoration: none; } .row { padding: 5px; margin-top: 20px; overflow: hidden; } .config-section-left, .config-section-right { float: left; max-width: 200px; } .content-section { float: left; } .content-section .choose-user { margin-bottom: 10px; } .content-section .tooltip { margin: 15px 0; position: relative; } .content-section .tooltip::before { display: none; } .content-section input[type="text"] { max-width: 220px; width: 220px; } .pre { border: 1px solid #dddfe2; border-radius: 3px; background-color: #f6f7f9; } .pre textarea { background: none; border: none; box-sizing: border-box; color: #4b4f56; font-family: Menlo,Monaco,Andale Mono,Courier New,monospace; font-size: 14px; height: auto; line-height: 20px; padding: 12px; min-width: 100%; } .tooltip { position: relative; display: block; box-shadow: 0 0 1px 1px #FFF; background: #FFF; border: 1px solid #DDD; padding: 2px 7px; margin-top: 15px; margin-right: 15px; } .tooltip::before { content: ''; position: absolute; display: block; width: 10px; height: 10px; right: -6px; top: 6px; background: inherit; border-right: 1px solid; border-bottom: 1px solid; border-color: inherit; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } .config-section-right { position: relative; top: 180px; } .config-section-right .tooltip { margin-left: 15px; } .config-section-right .tooltip::before { left: -6px; right: auto; border: none; border-top: 1px solid; border-left: 1px solid; border-color: inherit; } input { outline: none; } input[type="text"], input[type="number"], textarea { border: none; max-width: 125px; padding: 5px; font-size: 0.7em; } input[type="number"] { width: 85px; } input[type="submit"] { background: #D14836; color: #FFF; border: none; border-radius: 3px; padding: 3px 5px; font-size: 0.7em; } label { font-size: 0.7em; } .choose-repo-sorting [type="radio"] { display: none; } .active { font-weight: bold; }
(function () { 'use strict'; const attributes = { username: 'data-username', maxRepos: 'data-max-repos', sortBy: 'data-sort-by', headerText: 'data-header-text' }; window.widgetGenerator = { regenerate: regenerate }; function regenerate(options) { const attributesTemplate = Object.keys(options) .map(option => { const attribute = attributes[option]; const value = options[option]; if (!attribute) { return ''; } return `\n\t${attribute}="${value}"`; }) .join(''); return `<div id="github-card" ${attributesTemplate}>\n</div>`; } })(); (function (GitHubCard, widgetGenerator) { "use strict"; // Generating new widget from user input document.addEventListener('DOMContentLoaded', function() { var options = { template: '#github-card-demo', sortBy: 'stars', // possible: 'stars', 'updateTime' headerText: 'Most starred repositories', maxRepos: 5 }; var widget = new GitHubCard(options); widget.init(); regenerate(options); initSortingControl(options, refreshWidget); initRepositoriesControl(options, refreshWidget); initUserControl(options, initWidget); function initWidget(options) { widget = new GitHubCard(options); widget.init(); regenerate(options); } function refreshWidget(updatedOptions) { widget.refresh(updatedOptions); regenerate(updatedOptions); } function regenerate(updatedOptions) { var textarea = document.getElementById("install-code"); textarea.value = widgetGenerator.regenerate(updatedOptions); } }); // Sort repository acording to // radio inputs on website function initSortingControl(options, refreshWidget) { var $sortingRadios = document.querySelectorAll('.choose-repo-sorting label'); // sort by update time $sortingRadios[0].addEventListener('click', function (element) { element.target.classList.add('active'); $sortingRadios[1].classList.remove('active'); options.sortBy = 'updateTime'; options.headerText = element.target.textContent + ' repositories'; refreshWidget(options); }); // sort by starrgazers $sortingRadios[1].addEventListener('click', function (element) { element.target.classList.add('active'); $sortingRadios[0].classList.remove('active'); options.sortBy = 'stars'; options.headerText = element.target.textContent + ' repositories'; refreshWidget(options); }); } // Manipulating the number of repositories function initRepositoriesControl(options, refreshWidget) { var $inputNumber = document.getElementById('gh-reposNum'); $inputNumber.onchange = function() { options.maxRepos = $inputNumber.value; refreshWidget(options); }; } // Creating brand new widget instance // for user that we type in input function initUserControl(options, fn) { var $input = document.getElementById('gh-uname'), $submit = document.getElementById('gh-uname-submit'); $submit.addEventListener('click', function (element) { options.username = $input.value; fn(options); element.preventDefault(); }); } })(window.GitHubCard, window.widgetGenerator);

Related: See More


Questions / Comments: