Github-Profile食用指南

(Updated: )
tips
gif, github, markdown

2020年7月之后, Github向♂交友平台又跨进了一大步, 支持个人页展示了, 通过一个Markdown文件, 你可以在首页显示个人的README栏目.

但是如果希望自己的栏目有点特色, 那就需要自己动手了. 这篇主要是说说如何愉快的DIY动图介绍

0x00. 准备工作

申请一个同名仓库, 就会看到触发彩蛋的提示, 然后创建好之后, 首页就会看到一个几乎空的README文件, 它本质和你hexo网站的about页面是一样的, 用一个markdown渲染你想要的效果即可. (可参考)

各种已有的主题/模板可参考此项目, 但是目前这个还需要一个个点进去看, 并且大部分其实风格(味道)还是有点奇怪… 我全部扫了一遍, 目前只觉得这几款觉得还不错主题, 附上对应的效果

所以总的来说, 不管是喜欢动图介绍, 还是组合拼接, 我们都需要DIY一个符合自己的style.

0x01. 动图制作

我并不希望profile 页面变成一个简历介绍页面, 它应该更加简洁, 有趣. 所以我倾向使用一个独白式的动图, 也不会显得喧宾夺主. 关键问题就是, 我怎么快速做一个自己类似动态几何的动图呢. 下面说一个参考的代码实现方案. 核心是两步:

  1. 得到一个喜欢的动图效果
  2. 嵌入打字机输入效果, 合为一个, 然后截屏动图

A. 背景动画

以上面的几何/粒子图为例, 它的背景使用的是开源的particle.js动画效果, 当然也可以直接使用它的进一步封装版tsparticls. (如果大家熟悉前端/设计可尝试后者, 效果更多)

B. 打字效果

然后我们需要的是一个动态的打印文字变化, 可以用另外一个开源库实现, 你可以在这看到在线效果. 主要的控制代码也不多.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const typewriter = new Typewriter(app, {
  loop: true,
  delay: 75,
  stringSplitter
});

typewriter.pauseFor(2500) // 开始等待2.5s
          .typeString("whoami?")
          .pauseFor(300)
          .typeString("23333🌷")
          .deleteChars(10)
          .typeString("<strong>JS</strong> plugin for a cool typewriter effect and ")
          .typeString('<strong>only <span style="color: #27ae60;">5kb</span> Gzipped!</strong>')
          .pauseFor(1000)
          .start();

C. 组合

现在, 我们有了屠龙刀, 也有了倚天剑, 借助codepen这种在线渲染网站, 我们可以很方便的把html/css/js 嵌入然后看到实时的效果, 无需自己在本地搞鼓.

点此进入particle.js官方默认的底层模板, 然后你可以直接复制我下面调整后的所有代码到对应的代码框, 然后只需要对着注释调整自己喜欢的颜色/样式就可以了, 推荐的颜色表可参考此处.

HTML

你可以自行添加几个div, 然后css中固定, 当然也可以直接用行内样式. (end可选)

1
2
3
4
5
6
7
8
<div id="particles-js">
  <div id="start">I'll  be  back . . .</div>
  <div id="typewriter"></div>
  <div id="end"></div>
</div>

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js">
</script>
CSS

调整背景色是关键, 背景色, 以及div的位置, 大小等主要参数, 其他参考文档, 我不调了. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
body {
  margin: 0;
  font:normal 75% Arial, Helvetica, sans-serif;
}

canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #FDFEFE ;   /* 这里调整背景颜色 */
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

/* ---- stats.js ---- */

.count-particles{
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}

/* 固定文字片段 */
#start {
    position: absolute;
    font-size: 30px;
    font-family: 'B612', sans-serif;
    font-weight: 700;
    width: 1000px;
    margin: 300px 550px;
}

#end {
    position: absolute;
    font-size: 30px;
    font-family: 'B612', sans-serif;
    font-weight: 500;
    width: 1000px;
    margin: 550px 550px;
}

/* 打字机css */
#typewriter {
    position: absolute;
    font-size: 40px;
    font-family: 'B612', sans-serif;
    font-weight: 400;
    width: 1000px;
    margin: 400px 300px;
}
JS

这里主要是控制粒子数目, 以及点和连接线的颜色, 然后编写你希望输入的话. 其他参数太多, 需要的话参考官方文档自行调整.

  • 粒子数也就是下方的number 数, 我已经改为较合适的值了
  • 另外修改两个颜色就行
  • 最后修改想打字机效果表达的文字即可, 这个自己调整.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/* ---- particles.js config ---- */
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 80, // 控制数目较少一些
      "density": {
        "enable": true,
        "value_area": 1000
      }
    },
    "color": {
      "value": "#512E5F"  //粒子颜色
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#4A235A",  // 连接线颜色
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});


/* ---- stats.js config ---- */
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
  stats.begin();
  stats.end();
  if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
    count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
  }
  requestAnimationFrame(update);
};
requestAnimationFrame(update);

/* TypeWrite Config */
const writer = new Typewriter('#typewriter', {
    loop: true
});

    writer.pauseFor(300)
          .typeString('I am <span style="color: #6C3483;">Jin</span> & I love <span style="color: #239B56;">doge</span> ~')
          .pauseFor(50)
          .deleteAll()
          .pauseFor(100)
          .typeString("Focus on <strong>Graph</strong> & <strong>FileSystem</strong> now")
          .pauseFor(100)
          .deleteAll()
          .typeString('<strong>Contact </strong> me with: <span style="color: #27ae60;">0x00@imbajin.com</span>')
          .pauseFor(2300)
          .start();

D. 截图GIF

然后你就可以得到一个动态的效果图了(如下), 然后用GIF图截屏软件, 比如GifCam(256色)等. 最后上传到Github或者图床, 直接丢进README 中就大功告成了~

intro01

参考资料:

  1. Github Profile-zhihu
  2. Create github gif profile
  3. Typewriter UI
  4. Code pen-Pro