/
index.pug
342 lines (338 loc) · 12.1 KB
/
index.pug
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
doctype html
html
head(lang='zh-cmn-Hans')
meta(charset='UTF-8')
meta(name='viewport' content='user-scalable=no,initial-scale=1,width=device-width')
meta(name='format-detection' content='telephone=no')
// web meta begin
// 优先使用 IE 最新版本和 Chrome
meta(http-equiv='X-UA-Compatible' content='IE=edge,chrome=1')
// 页面描述
meta(name='description' content='你好，我是Meathill，全栈工程师，产品经理。有家有口有狗，爱吃爱玩爱旅游。')
// 页面关键词
meta(name='keywords' content='meathill,肉山,个人主页,简历')
meta(name='author' content='Meathill <meathill@gmail.com>')
// 搜索引擎抓取
meta(name='robots' content='index,follow')
// web meta end
link(
rel="stylesheet",
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css",
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3",
crossorigin="anonymous"
)
link(rel='shortcut icon' type='image/png' href=require('./img/meathill.png'))
title 你好，我是Meathill。
body
a(name="hello")
nav.navbar.navbar-expand-md.navbar-dark.fixed-top#top-bar(role='navigation')
.container
button.navbar-toggler.navbar-toggler-right.collapsed(type='button' data-toggle='collapse' data-target='#top-bar-inner' aria-controls='top-bar-inner' aria-expanded='false' aria-label='收放导航')
i.fa.fa-bars
|
span.sr-only 导航
a.navbar-brand(href='/') Meathill
.collapse.navbar-collapse#top-bar-inner
ul.navbar-nav.ms-auto
li.nav-item.active
a.nav-link(href='#main-slide')
| 你好
span.sr-only (current)
li.nav-item
a.nav-link(href='#about-me') 自我介绍
li.nav-item
a.nav-link(href='#skills') 技能
li.nav-item
a.nav-link(href='#works') 作品集
li.nav-item.blog
a.nav-link(href='#blog') 近期博文
li.nav-item
a.nav-link(href='https://weibo.com/meathill/' target='_blank') 联系我
#main-slide.carousel.slide(data-bs-ride='carousel' data-interval='8000')
.carousel-indicators
button.active(
type="button",
data-bs-target='#main-slide',
data-bs-slide-to='0',
aria-current="true",
aria-label="hello, I'm Meathill",
)
button(
type="button",
data-bs-target='#main-slide',
data-bs-slide-to='1',
aria-label="视频",
)
.carousel-inner(role='listbox')
.carousel-item.slide-1.active
img.img-circle.img-thumbnail(
src='https://qiniu.meathill.com/gravatar.jpg',
alt='Meathill',
loading="eager",
)
h1 你好，我是 Meathill
p.lead 全栈工程师，产品经理
p 有家有口有狗，爱吃爱玩爱旅游
.socials
a(href='https://weibo.com/meathill')
i.fa.fa-weibo
a(href='https://twitter.com/meathill1')
i.bi.bi-twitter
a(href='https://blog.meathill.com/')
i.fa.fa-user
a(href='https://github.com/meathill/')
i.bi.bi-github
.carousel-item.slide-2
h2 我正努力分享我的知识
p.lead 近期目标：肉山全栈小课堂
p 未来是视频的时代，很多知识都会用视频的形式重新发明一遍。我希望也能贡献一部分。我每个工作日都会在B站5126601直播，欢迎光临
p.mt-3
a.btn.btn-primary.btn-lg(href='https://space.bilibili.com/7409098' target='_blank')
i.fa.fa-video-camera.me-2
| B 站视频
a.btn.btn-info.btn-lg(href='mailto:meathill@gmail.com')
i.fa.fa-envelope
| 您希望看什么内容？
button.carousel-control-prev(
type="button",
data-bs-target='#main-slide',
data-bs-slide='prev',
)
span.carousel-control-prev-icon(aria-hidden='true')
span.sr-only 上一张
button.carousel-control-next(
type="button",
data-bs-target='#main-slide',
data-bs-slide='next',
)
span.carousel-control-next-icon(aria-hidden='true')
span.sr-only 下一张
#about-me
.container.py-4
.row
.col-md-2.col-5
img.img-circle.gravatar.img-thumbnail(
src='https://avatars0.githubusercontent.com/u/437409?s=460&v=4',
alt="Meathill",
)
.col-md-6.col-12.intro
h2 宅肉山
p 爱学习，爱吐槽，爱创造，爱分享。
p 爱开发，现在主要投身 Web 技术，HTML、CSS、JavaScript、PHP、Node.js，以及国内避不开的微信开发。同时，身为资深宅男，各种深度用户，我对互联网产品也有很多独特的看法。
p 这个网站用来自我介绍，兼列举以往的作品和一时兴起建立的项目，大部分都已开源，我也很愿意分享它们。我对未来的设计是，成为一名 Freelancer，在东南亚的某个海岛上，SOHO、写书、编程、游泳、遛狗。
p
| 我的个人生活和开发经验，请移步
a.ms-1(href='https://blog.meathill.com') https://blog.meathill.com/
| 。
.weibo
a(href='https://weibo.com/meathill' target='_blank')
img(
src='https://service.t.sina.com.cn/widget/qmd/1401537047/a4b56a6a/1.png',
alt="weibo",
)
.col-md-4.col-12
ul.resume
li
time
| 2017.08
i.fa.fa-github
| 加入 OpenResty Inc.
li
time
| 2016.12
i.fa.fa-video-camera
| 做直播，寻觅新机会
li
time
| 2012.04
i.fa.fa-flag
| Dianjoy 创业
li
time
| 2011.07
i.fa.fa-gamepad
| 加入磁聚乐，职业生涯新起点
li
time
| 2006.09
i.fa.fa-paper-plane-o
| 加入 ZOL，从这里起飞
li
time
| 2002.09
i.fa.fa-graduation-cap
| 中国地质大学（武汉）
a.btn.btn-info(href='https://www.linkedin.com/in/meathill/' target='_blank')
i.fa.fa-linkedin
| 完整简历
#skills.py-4
.page-header
h2 技能
.container
.row
.col-md-3.col-6.item
header
img.logo.img-thumbnail(
src='src/img/html5.svg',
alt="HTML",
)
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
h3 HTML
.col-md-3.col-6.item
header
img.logo.img-thumbnail(
src='src/img/css3.png',
alt='CSS',
)
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
h3 CSS
.col-md-3.col-6.item
header
img.logo.img-thumbnail(
src='src/img/js.png',
alt='JavaScript',
)
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
h3 JavaScript
.col-md-3.col-6.item
header
img.logo.img-thumbnail(
src='src/img/php.png',
alt='PHP',
)
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
h3 PHP
.col-md-3.col-6.item
header
img.logo.img-thumbnail(
src='src/img/nodejs.png',
alt='Node.js',
)
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
h3 Node.js
.col-md-3.col-6.item
header
img.logo.img-thumbnail(
src='src/img/wxapp.png',
alt='微信小程序',
)
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
h3 小程序
.col-md-3.col-6.item
header
img.logo.img-thumbnail(
src='src/img/pm.jpg',
alt='产品经理',
)
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star
h3 产品经理
.col-md-3.col-6.item
header
img.logo.img-thumbnail(
src='src/img/linux.jpg',
alt='Linux',
)
i.fa.fa-star
i.fa.fa-star
i.fa.fa-star-half-o
h3 Linux
#works.py-4
.page-header
h2 作品集
.container
.row
.col-12.col-sm-6
ul
li
a(href="https://segmentfault.com/u/meathill/lives?type=started") 我的视频讲座
li
a(href="https://search.bilibili.com/all?keyword=meathill") 肉山全栈小课堂
li
a(href="https://github.com/meathill") GitHub
.col-12.col-sm-6
ul
li
a(href="https://meathill.gitbooks.io/javascript-async-tutorial/content/") JavaScript 异步开发全攻略
li
a(href="https://meathill.com/gitbook-design-patterns-in-jquery/") 从 jQuery 里学习设计模式
li
a(href="https://meathill.com/gitbook-webpack-for-multi-pages/") 使用 Webpack 开发多页面站点
li
a(href="https://meathill.com/gitbook-nuxt-generate-static-site/") 使用 Nuxt.js 发布纯静态网站
li
a(href="https://meathill.com/gitbook-path-to-advanced-vuer/") 走出 Vue 新手村
#blog.py-4
.page-header
h2 近期博文
.container
#blog-grid.row(data-latest='{{latest}}')
.blog-link
a.btn.btn-danger.btn-lg(href='https://blog.meathill.com/')
i.fa.fa-book
| 访问博客
footer#footer.py-4
.socials
a(href='https://weibo.com/meathill')
i.fa.fa-weibo
a(href='https://twitter.com/meathill1')
i.fa.fa-twitter
a(href='https://github.com/meathill')
i.fa.fa-github-alt
a(href='https://www.linkedin.com/in/meathill/')
i.fa.fa-linkedin
p Copyright @ 2015-2021 Meathill，保留所有权利 |
a(
href="https://beian.miit.gov.cn",
target="_blank",
rel="nofollow noreferrer noopener",
) 粤ICP备15055091号-1
| | 当前版本：#{version} |
a(href='https://github.com/meathill/meathill.github.io' target='_blank')
i.fa.fa-github
| 源代码
a.top-button(href='#hello', title="Top")
i.fa.fa-chevron-up
link(
rel='stylesheet',
href='https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css',
)
link(
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
)
script(
src="https://code.jquery.com/jquery-3.7.0.slim.min.js",
)
script(
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js",
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p",
crossorigin="anonymous",
)
script(
async,
src="https://www.googletagmanager.com/gtag/js?id=UA-26694288-7"
)