程序员/设计师个人信息卡模板

GitHub User Card 读取github账号信息。带活跃度波浪线和环形图表动画。

html5, card, template

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1945
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

/*
Home : https://github.com/c0ncept/github-user-card
*/

var GITHUB_USER = 'linuxenko';
var GITHUB_URL = 'https://api.github.com/users/';

Chart.defaults.global = {
    animation: true,
    animationSteps: 50,
    animationEasing: "easeOutBounce",
    scaleLabel: "<%=value%>",
    bezierCurve: true,
    bezierCurveTension: 1,
    scaleIntegersOnly: true,
    scaleBeginAtZero: false,
    maintainAspectRatio: false,
    onAnimationProgress: function onAnimationProgress() {},
    onAnimationComplete: function onAnimationComplete() {}
};

var Repo = function(_React$Component) {
    _inherits(Repo, _React$Component);

function Repo() {
        _classCallCheck(this, Repo);

return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
    }

Repo.prototype.render = function render() {
        var repo = this.props.repo;

return React.createElement(
            'a', {
                className: 'repository',
                href: repo.html_url
            },
            React.createElement(
                'div', {
                    className: 'repo-info'
                },
                React.createElement(
                    'div',
                    null,
                    React.createElement('i', {
                        className: 'fa fa-star'
                    }),
                    React.createElement('span', null),
                    React.createElement(
                        'span', {
                            className: 'title'
                        },
                        repo.name
                    )
                )
            )
        );
    };

return Repo;
}(React.Component);

var DataChart = function(_React$Component2) {
    _inherits(DataChart, _React$Component2);

function DataChart() {
        _classCallCheck(this, DataChart);

return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
    }

DataChart.prototype.eventsRange = function eventsRange(event) {
        var range = [];
        for (var i = 11; i > 0; i--) {
            range.push(moment().subtract(i, 'days').format('YYYY-MM-DD'));
        }
        var evtmp = this.props.events.filter(function(e) {
            return event(e.type);
        }).map(function(e) {
            return e.created_at.match(/^(\d{4}-\d{2}-\d{2}).*/)[1];
        });

return range.map(function(r) {
            return evtmp.reduce(function(p, c) {
                return r === c ? p + 1 : p;
            }, 0);
        });
    };

DataChart.prototype.componentDidMount = function componentDidMount() {
        var pushEvents = this.eventsRange(function(e) {
            return e === 'PushEvent';
        });
        var miscEvents = this.eventsRange(function(e) {
            return e !== 'PushEvent';
        });

var lineChartData = {
            labels: pushEvents,
            datasets: [{
                fillColor: "#7E9BA0",
                strokeColor: "rgba(0,0,0,0)",
                pointColor: "rgba(255, 255, 255, 0)",
                pointStrokeColor: "rgba(255, 255, 255, 0)",
                data: pushEvents
            }, {
                fillColor: "#f06292",
                strokeColor: "rgba(0,0,0,0)",
                pointColor: "rgba(255, 255, 255, 0)",
                pointStrokeColor: "rgba(255, 255, 255, 0)",
                data: miscEvents
            }]
        };

var ctx1 = document.getElementById("chart").getContext("2d");
        this.chart = new Chart(ctx1).Line(lineChartData);
    };

DataChart.prototype.render = function render() {
        return React.createElement(
            'div', {
                className: 'chart'
            },
            React.createElement('canvas', {
                id: 'chart',
                width: '370',
                height: '100'
            })
        );
    };

return DataChart;
}(React.Component);

var RepoChart = function(_React$Component3) {
    _inherits(RepoChart, _React$Component3);

function RepoChart() {
        _classCallCheck(this, RepoChart);

return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
    }

RepoChart.prototype.componentDidMount = function componentDidMount() {
        var htmlData = [{
            value: this.props.repos[0].stargazers_count,
            color: "#f8bbd0"
        }, {
            value: this.props.repos[1].stargazers_count,
            color: "#ec407a"
        }, {
            value: this.props.repos[2].stargazers_count,
            color: "#fff"
        }];
        var ctx2 = document.getElementById("pie").getContext("2d");
        new Chart(ctx2).Doughnut(htmlData, {
            segmentShowStroke: false,
            percentageInnerCutout: 80
        });
    };

RepoChart.prototype.render = function render() {
        var totals = this.props.repos.reduce(function(p, c) {
            return p + c.stargazers_count;
        }, 0);
        return React.createElement(
            'div', {
                className: 'pie-chart-wrap'
            },
            React.createElement(
                'div', {
                    className: 'pie-chart-totals'
                },
                React.createElement('i', {
                    className: 'fa fa-star'
                }),
                totals
            ),
            React.createElement('canvas', {
                id: 'pie',
                className: 'pie-chart',
                width: '180',
                height: '180'
            })
        );
    };

return RepoChart;
}(React.Component);

var Card = function(_React$Component4) {
    _inherits(Card, _React$Component4);

function Card() {
        _classCallCheck(this, Card);

return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments));
    }

Card.prototype.render = function render() {
        var reposData = this.props.repos.sort(function(a, b) {
            return b.stargazers_count - a.stargazers_count;
        }).slice(0, 3);
        var repos = reposData.map(function(r, i) {
            return React.createElement(Repo, {
                key: i,
                repo: r
            });
        });

var starred = this.props.repos.reduce(function(p, c) {
            return p + Number(c.stargazers_count);
        }, 0);

var forked = this.props.repos.reduce(function(p, c) {
            return p + Number(c.forks_count);
        }, 0);

return React.createElement(
            'div', {
                className: 'card'
            },
            React.createElement(
                'div', {
                    className: 'header'
                },
                React.createElement(
                    'a', {
                        className: 'userlink',
                        href: this.props.user.html_url
                    },
                    this.props.user.login,
                    React.createElement('i', {
                        className: 'fa fa-link'
                    })
                ),
                React.createElement(
                    'div', {
                        className: 'avatar'
                    },
                    React.createElement('img', {
                        src: this.props.user.avatar_url
                    })
                ),
                React.createElement(
                    'span', {
                        className: 'repos-count'
                    },
                    this.props.user.public_repos
                ),
                React.createElement(
                    'div', {
                        className: 'userinfo'
                    },
                    React.createElement(
                        'h2',
                        null,
                        this.props.user.name || this.props.user.login
                    ),
                    React.createElement(
                        'p',
                        null,
                        this.props.user.location
                    )
                )
            ),
            React.createElement(
                'div', {
                    className: 'totals'
                },
                React.createElement(
                    'div',
                    null,
                    this.props.user.followers,
                    React.createElement(
                        'div', {
                            className: 'desc'
                        },
                        'Followers'
                    )
                ),
                React.createElement(
                    'div',
                    null,
                    starred,
                    React.createElement(
                        'div', {
                            className: 'desc'
                        },
                        'Total stars'
                    )
                ),
                React.createElement(
                    'div',
                    null,
                    forked,
                    React.createElement(
                        'div', {
                            className: 'desc'
                        },
                        'Times Forked'
                    )
                )
            ),
            React.createElement(DataChart, {
                events: this.props.events
            }),
            React.createElement('br', null),
            React.createElement('br', null),
            React.createElement(
                'div', {
                    className: 'super-line'
                },
                'TOP Rated'
            ),
            React.createElement(RepoChart, {
                repos: reposData
            }),
            React.createElement(
                'div', {
                    className: 'top-repos'
                },
                repos
            ),
            React.createElement('br', null),
            React.createElement('br', null)
        );
    };

return Card;
}(React.Component);

var Application = function(_React$Component5) {
    _inherits(Application, _React$Component5);

function Application() {
        _classCallCheck(this, Application);

var _this5 = _possibleConstructorReturn(this, _React$Component5.call(this));

_this5.state = {
            user: {},
            repos: []
        };
        _this5.loadGitHubUser(GITHUB_USER);
        return _this5;
    }

Application.prototype.loadGitHubUser = function loadGitHubUser(user) {
        var _this6 = this;

Promise.all([fetch(GITHUB_URL + user).then(function(r) {
            return r.json();
        }), fetch(GITHUB_URL + user + '/repos').then(function(r) {
            return r.json();
        }), fetch(GITHUB_URL + user + '/events?per_page=300').then(function(r) {
            return r.json();
        })]).then(function(resp) {
            _this6.setState({
                user: resp[0],
                repos: resp[1],
                events: resp[2]
            });
        });
    };

Application.prototype.render = function render() {
        var children = this.state.user.hasOwnProperty('login') ? React.createElement(Card, {
            user: this.state.user,
            repos: this.state.repos,
            events: this.state.events
        }) : React.createElement(
            'div', {
                className: 'loading'
            },
            React.createElement('span', null),
            React.createElement('span', null),
            React.createElement('span', null),
            React.createElement('span', null),
            React.createElement('span', null)
        );

return React.createElement(
            'div', {
                className: 'wrapper'
            },
            children
        );
    };

return Application;
}(React.Component);

ReactDOM.render(React.createElement(Application, null), document.getElementById('application'));

编译

CSS

html,
body {
    height: 100%;
    font-family: Roboto;
    font-size: 1em;
    background: -webkit-linear-gradient(transparent, #f3f3f3 10%, transparent);
    background: linear-gradient(transparent, #f3f3f3 10%, transparent);
    background-size: 4px;
}
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.application {
    height: 100%;
    background-size: cover;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.super-line {
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    position: relative;
}
.super-line:before {
    content: "";
    display: inline-block;
    border-bottom: 1px solid #fff;
    margin-bottom: 3px;
    margin-right: 20px;
    width: 80px;
}
.super-line:after {
    content: "";
    display: inline-block;
    border-bottom: 1px solid #fff;
    margin-bottom: 3px;
    margin-left: 20px;
    width: 80px;
}
.super-line.b {
    background: #fff;
    color: #7E9BA0;
}
.super-line.b:before,
.super-line.b:after {
    border-bottom: 1px solid #7E9BA0;
}
.wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.wrapper > .loading {
    margin: auto;
    width: 200px;
    text-align: center;
}
.wrapper > .loading span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #880e4f;
    margin: 0px 10px;
    opacity: 0.1;
}
.wrapper > .loading span:nth-child(1) {
    -webkit-animation: blink 1.3s infinite;
    animation: blink 1.3s infinite;
    -webkit-animation-delay: .300s;
    animation-delay: .300s;
}
.wrapper > .loading span:nth-child(2) {
    -webkit-animation: blink 1.3s infinite;
    animation: blink 1.3s infinite;
    -webkit-animation-delay: .400s;
    animation-delay: .400s;
}
.wrapper > .loading span:nth-child(3) {
    -webkit-animation: blink 1.3s infinite;
    animation: blink 1.3s infinite;
    -webkit-animation-delay: .500s;
    animation-delay: .500s;
}
.wrapper > .loading span:nth-child(4) {
    -webkit-animation: blink 1.3s infinite;
    animation: blink 1.3s infinite;
    -webkit-animation-delay: .600s;
    animation-delay: .600s;
}
.wrapper > .loading span:nth-child(5) {
    -webkit-animation: blink 1.3s infinite;
    animation: blink 1.3s infinite;
    -webkit-animation-delay: .700s;
    animation-delay: .700s;
}
@-webkit-keyframes blink {
    0% {
        opacity: 1;
        background: #880e4f;
    }
    50% {
        opacity: 1;
        background: #fff;
    }
    100% {
        opacity: 0.1;
        background: #fff;
    }
}
@keyframes blink {
    0% {
        opacity: 1;
        background: #880e4f;
    }
    50% {
        opacity: 1;
        background: #fff;
    }
    100% {
        opacity: 0.1;
        background: #fff;
    }
}
.wrapper > .card {
    margin: auto;
    width: 360px;
    border-radius: 5px 5px 0px 0px;
    background: #f06292;
    box-shadow: 6px 6px 8px #999;
}
.wrapper > .card .header {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 5px 5px 0px 0px;
    height: 200px;
}
.wrapper > .card .header .avatar,
.wrapper > .card .header .avatar > img {
    width: 100px;
    height: 100px;
}
.wrapper > .card .header .avatar {
    overflow: hidden;
    border-radius: 100%;
    border: 3px solid #eee;
    margin: auto;
}
.wrapper > .card > .header {
    background: #fff;
}
.wrapper > .card > .header span.repos-count {
    position: absolute;
    left: 130px;
    top: 90px;
    background: #f06292;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    display: block;
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
}
.wrapper > .card > .header span.repos-count:after {
    content: "repos";
    position: absolute;
    color: #7E9BA0;
    text-transform: uppercase;
    font-size: 8px;
    bottom: -20px;
    left: 0px;
}
.wrapper > .card > .header a.userlink {
    background: #7E9BA0;
    color: #fff;
    padding: 4px 10px;
    position: absolute;
    right: 0px;
    top: 0px;
    text-decoration: none;
}
.wrapper > .card > .header a.userlink:hover {
    background: #f06292;
}
.wrapper > .card > .header a.userlink i {
    font-size: 12px;
    margin: 0px 0px 0px 5px;
}
.wrapper > .card > .header .userinfo {
    text-align: center;
    padding: 0px 0px 20px 0px;
}
.wrapper > .card > .header .userinfo h2 {
    color: #7E9BA0;
}
.wrapper > .card > .header .userinfo p {
    color: #7E9BA0;
}
.wrapper > .card > .top-repos {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 10px 0px 0px 0px;
    background: #f06292;
    text-align: center;
}
.wrapper > .card > .top-repos .repository {
    margin: 5px 0px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
}
.wrapper > .card > .top-repos .repository i {
    display: block;
    margin-bottom: 5px;
    font-size: 8px;
}
.wrapper > .card > .top-repos .repository .title {
    text-transform: uppercase;
    font-size: 12px;
}
.wrapper > .card > .pie-chart-wrap {
    position: relative;
    text-align: center;
}
.wrapper > .card > .pie-chart-wrap .pie-chart {
    margin-top: 40px;
}
.wrapper > .card > .pie-chart-wrap .pie-chart-totals {
    position: absolute;
    top: 100px;
    width: 100%;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
}
.wrapper > .card > .pie-chart-wrap .pie-chart-totals i {
    display: block;
    margin-bottom: 10px;
}
.wrapper > .card > .chart {
    position: relative;
    border: none;
    background: #fff;
    width: 360px;
    overflow: hidden;
    height: 100px;
}
.wrapper > .card > .chart canvas {
    border: none;
    position: absolute;
    left: -5px;
    bottom: -9px;
}
.wrapper > .card > .activity-line {
    padding-top: 40px;
}
.wrapper > .card > .totals {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 10px 0px 5px 0px;
    background: #fff;
}
.wrapper > .card > .totals > div {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
    font-size: 16px;
    color: #7E9BA0;
}
.wrapper > .card > .totals > div:nth-child(2) {
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}
.wrapper > .card > .totals > div .desc {
    text-transform: uppercase;
    font-size: 9px;
}

HTML

GitHub User Card 读取github账号信息。带活跃度波浪线和环形图表动画。

html5, card, template

编辑器支持Emmet

快捷键

GitHub User Card 读取github账号信息。 带活跃度波浪线和环形图表动画。

html5, card, template

一款很棒的设计师个人主页模板

极客风格的设计师个人主页模板（带马赛克图片动画特效）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

GitHub User Card 读取github账号信息。带活跃度波浪线和环形图表动画。