-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
514 lines (449 loc) · 18.4 KB
/
index.html
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
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="
https://inling.oss-cn-beijing.aliyuncs.com/blog/pro/giraffe_16px_521075_easyicon.net.ico">
<title>inling的个人网页</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
a,
a:focus,
a:hover {
color: #fff;
}
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none;
/* Prevent inheritance from `body` */
background-color: #fff;
border: .05rem solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
display: flex;
justify-content: center;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.cover-container {
max-width: 42em;
}
/*header*/
#myIndex {
transition: all .3s linear;
}
.masthead {
margin-bottom: 2rem;
}
.masthead-brand {
margin-bottom: 0;
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, .5);
background-color: transparent;
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link+.nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 48em) {
#myBody {
width: 672px;
}
}
@media (min-width: 48em) {
.masthead-brand {
float: left;
}
.nav-masthead {
float: right;
}
}
/*main*/
.cover {
padding: 0 1.5rem;
}
.cover .btn-lg {
padding: .75rem 1.25rem;
font-weight: 700;
}
/*footer*/
.mastfoot {
color: rgba(255, 255, 255, .5);
}
.github-corner {
border-bottom: 0;
position: fixed;
right: 0;
text-decoration: none;
top: 0;
z-index: 1;
}
.github-corner svg {
color: #fff;
fill: var(--theme-color, #42b983);
height: 80px;
width: 80px;
}
/*进度条*/
.progress {
background-color: var(--theme-color, #42b983);
height: 2px;
left: 0;
position: fixed;
right: 0;
top: 0;
transition: width .2s, opacity .4s;
width: 0;
z-index: 5;
}
.myclear {
content: '';
display: block;
clear: both;
}
#myProject{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card{
width: 50%;
margin: 0 auto;
}
@media screen and (max-width:42em){
.card{
width: 100%;
}
}
#demo{
width: 100%;
}
.border-t{
border-top:1px solid black;
}
.prev-left{
margin-left:-100px
}
.next-right{
margin-right:-100px
}
@media screen and (max-width:42em){
.prev-left{
margin-left:0
}
.next-right{
margin-right:0
}
.tf{
font-size:1.5rem;
}
.tsf{
font-size:1rem;
}
}
#mySelf,#myIndex,#myProject{
opacity: 0;
transition: all 1s linear;
}
.tra{
opacity: 0;
transition: all 1s linear;
}
.ac{
opacity: 1 !important;
}
</style>
</head>
<body class="text-center">
<a href="https://github.com/inling" class="github-corner" aria-label="View source on Github">
<svg viewBox="0 0 250 250"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">Giraffe</h3>
<nav class="nav nav-masthead justify-content-center barbox">
<a class="nav-link active index" href="#">主页</a>
<a class="nav-link project" href="#">项目</a>
<a class="nav-link myself" href="#">个人介绍</a>
</nav>
</div>
</header>
<!--进度条-->
<script>
$(".progress").css({ 'opacity': 1, "width": '20%' });
</script>
<main role="main" class="inner cover show" id="myBody">
<div id="myIndex">
<h1 class="cover-heading tra tf">欢迎来到我的主页.</h1>
<p class="lead tra tsf">I believe, this is a beautiful home pages. Maybe, it can give you some inspiration.</p>
<p class="lead tra tsf">热爱前端，热爱长颈鹿！</p>
<p class="lead tra tsf">I hope to see farther as giraffe does.</p>
<p class="lead tra row">
<div class="col-lg-2"></div>
<a href="#" class="btn btn-lg btn-secondary col-lg-4 col-sm-12" id="knowProject">了解我的项目</a>
<a href="#" class="btn btn-lg btn-secondary col-lg-3 col-sm-12" id="knowMe">了解我</a>
</p>
</div>
<!--进度条-->
<script>
$(".progress").css({ 'opacity': 1, "width": '50%' });
</script>
<div id="myProject">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<!--
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
-->
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card w-100">
<img class="card-img-top" src="
https://inling.oss-cn-beijing.aliyuncs.com/blog/pro/2018-11-06_114037.png" alt="Card image">
<div class="card-body">
<h4 class="card-title text-dark border-t">B站</h4>
<p class="card-text text-dark">vue,vuex</p>
<a href="http://www.qiaxiaojiu.com:3000" target="_blank" class="btn btn-primary text-dark">进入网站</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card w-100">
<img class="card-img-top" src="
https://inling.oss-cn-beijing.aliyuncs.com/blog/pro/2018-11-10_094741.png" alt="Card image">
<div class="card-body">
<h4 class="card-title text-dark border-t">金夫人</h4>
<p class="card-text text-dark">html,css,JS,ajax,echarts,地图</p>
<a href="http://www.qiaxiaojiu.com:5000" target="_blank" class="btn btn-primary text-dark">进入网站</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card w-100">
<img class="card-img-top" src="
https://inling.oss-cn-beijing.aliyuncs.com/blog/pro/2018-11-10_094607.png" alt="Card image">
<div class="card-body">
<h4 class="card-title text-dark border-t">涂鸦王国</h4>
<p class="card-text text-dark">Vue,JQuery,Ajax,原生JS</p>
<a href="http://www.qiaxiaojiu.com:4000" target="_blank" class="btn btn-primary text-dark">进入网站</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card w-100">
<img class="card-img-top" src="
https://inling.oss-cn-beijing.aliyuncs.com/blog/pro/2018-11-10_101825.png" alt="Card image">
<div class="card-body">
<h4 class="card-title text-dark border-t">Giraffe音乐</h4>
<p class="card-text text-dark">微信小程序</p>
<a href="https://github.com/inling/GiraffeMusic" class="btn btn-primary text-dark">进入网站</a>
</div>
</div>
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev prev-left" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next next-right" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!--进度条-->
<script>
$(".progress").css({ 'opacity': 1, "width": '70%' });
</script>
<div id="mySelf">
<div class="row">
<div class="col-lg-2 col-sm mt-5" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li class="active m-auto"><a href="#section-1">联系方式</a></li>
<li class="m-auto"><a href="#section-2">专业技能</a></li>
<li class="m-auto"><a href="#section-3">获得证书</a></li>
<li class="m-auto"><a href="#section-4">工作经历</a></li>
<li class="m-auto"><a href="#section-5">个人项目</a></li>
</ul>
</div>
<div class="col-lg-10 col-sm-12 text-left" style="border-left:1px solid white;border-right:1px solid white">
<h2 id="section-1">联系方式</h2>
<ul>
<li>姓名：Jerry</li>
<li>手机：+86 17621305739</li>
<li>邮箱：[email protected]</li>
<li>主页：www.qiaxiaojiu.com</li>
</ul>
<hr>
<h2 id="section-2">专业技能</h2>
<ul>
<li>精通html，css能够写出有助于提高用户体验，富有层次感的页面和实现各种特效。</li>
<li>熟悉h5新特性，熟练使用语义化标签，增强代码的可读性。</li>
<li>会使用sessionStorage、localStorage存储数据。</li>
<li>了解canvas绘图，能够使用echarts画出基本的图形。</li>
<li>熟练使用js，DOM，BOM等原生js代码，能够使用原生js开发页面。</li>
<li>熟悉ES6新特性，块级作用域，函数解构，类的定义。</li>
<li>能够使用JQuery简化DOM操作。</li>
<li>熟练使用Vue框架，有vue项目经验，能够进行组件化开发，熟练运用vue-router优化跳转，vuex组件间通信和axios进行异步操作，用cors解决跨域问题。</li>
<li>了解angular，react框架，能够用框架开发。</li>
<li>熟悉微信小程序开发，有个人作品，仿网易云音乐，调用网易接口，网易账号登录。</li>
<li>熟悉NodeJS，能够运用各种node插件编写服务器端程序，并且部署到服务器上。</li>
<li>拥有自己的阿里云服务器以及域名（www.qiaxiaojiu.com）,并且有空时写些页面部署到服务器上。</li>
<li>运用GitHub托管自己的代码，地址：https://github.com/inling。</li>
</ul>
<hr>
<h2 id="section-3">获得证书</h2>
<ul>
<li>大学英语四级（CET-4）</li>
<li>HTML5 Application Development Fundamentals（H5程序开发 MTA颁发）</li>
<li>移动端Web开发工程师 （ACAA颁发）</li>
<li>高级WEB开发工程师 （国家工信部颁发）</li>
<li>高级数据库管理工程师 （国家工信部颁发）</li>
</ul>
<hr>
<!--
<h2 id="section-4">工作经历</h2>
<h6>2017.06-至今 上海联宏创能信息科技有限公司 开发工程师</h6>
<ul>
<li>在公司主要负责公司官网的维护，用HTML+CSS对页面进行优化，用ajax实现数据的局部加载提高网页效率以及根据要求添加页面功能，解决客户反映的问题。</li>
<li>最近几个月配合公司上市，对页面进行了重构。（http://www.ugitc.com/）</li>
<li>在工作期间，自学并且熟练掌握了Vue框架，了解react和angular框架。并且自己用vue写了自己的个人作品，并且自学了微信小程序。</li>
</ul>
<hr>
-->
<h2 id="section-5">个人项目</h2>
<h6>个人主页（www.qiaxiaojiu.com）</h6>
<ul>
<li>工作环境：使用WebStorm开发工具，采用前端Bootstrap框架</li>
<li>项目描述：个人主页，展示性页面。响应式布局，JQuery实现特效。合理使用媒体查询和弹性布局。引用Bootstrap的卡片，导航栏，轮播图等组件。
</li>
</ul>
<h6>涂鸦王国（www.qiaxiaojiu.com:3000）</h6>
<ul>
<li>工作环境：使用vscode开发工具，采用前端Vue框架，引用axios，vue-lazy等组件。</li>
<li>项目描述：单页面应用，采用hash路由，组件化开发模式，运用组件间通讯方式（props，event，bus），添加了路由跳转过渡，post网易短信验证端口，实现了登录验证，实现了文件上传的功能，添加了css下雨特效，axios动态从后端那获取数据，图片懒加载。
</li>
</ul>
<h6>BILIBILI首页（www.qiaxiaojiu.com:4000）</h6>
<ul>
<li>工作环境：使用vscode开发工具，采用前端Vue框架，引用vuex，axios等组件。</li>
<li>项目描述：组件化开发模式，将所有可重用的分装成一个一个组件，mvvm模式绑定数据，vuex进行组件间通信，实现组件跳转过渡，利用axios异步查询后台数据，实现数据的局部加载来提高页面效率。利用js+css+html实现页面上的各种特效，用vue写轮播图，过渡，下拉菜单，模态框，导航栏，利用了H5的新特性video。
</li>
<li>项目总结：对vue的组间通信了解更深，运用vuex更加娴熟。</li>
</ul>
<h6>杭州金夫人（www.qiaxiaojiu.com:5000）</h6>
<ul>
<li>工作环境：使用vscode开发工具，html+css+jquery开发页面，ajax动态获取后台数据。</li>
<li>项目描述：采用H5语义化标签，添加了地图，运用了瀑布流式布局，应用了echarts组间画了势力图。
项目总结：对ajax异步编程有了更深刻的了解。
</li>
</ul>
<h6>GiraffeMusic(微信小程序)</h6>
<ul>
<li>工作环境：使用微信web开发者工具，引用了网易云音乐开发api。</li>
<li>项目描述：在微信上开发一个具有获取网易云音乐用户数据的音乐播放器。实现了网易用户登录，能够获取用户的使用数据。
</li>
<li>项目心得：更加娴熟的调用第三方接口，熟悉了微信中标签和绑定事件属性。</li>
</ul>
</div>
</div>
</div>
<!--进度条-->
<script>
$(".progress").css({ 'opacity': 1, "width": '90%' });
</script>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>base on <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://github.com/inling">@inling</a>.</p>
</div>
</footer>
</div>
<div class="progress" style="opacity: 0; width: 0%;"></div>
<!--进度条-->
<script>
$(".progress").css({ 'opacity': 1, "width": '100%' });
</script>
<script>
IndexShow();
$('.barbox').on('click', '.nav-link', function (e) {
var item = $(e.target);
item.addClass('active').siblings().removeClass('active');
if (item.hasClass('index')) {
IndexShow()
} else if (item.hasClass('project')) {
$('#myProject').show().siblings().removeClass('ac').hide();
$('#myProject').addClass('ac');
} else {
$('#mySelf').show().siblings().removeClass('ac').hide();
$('#mySelf').addClass('ac');
}
})
function IndexShow(){
$('#myIndex').show().addClass('ac').siblings().hide();
$('#myIndex').children(':nth-child(1)').addClass('ac');
setInterval(function(){
$('#myIndex').children(':nth-child(1)').next().addClass('ac')
setInterval(function(){
$('#myIndex').children(':nth-child(1)').next().next().addClass('ac')
setInterval(function(){
$('#myIndex').children(':nth-child(1)').next().next().next().addClass('ac')
setInterval(function(){
$('#myIndex').children(':nth-child(1)').next().next().next().next().addClass('ac')
},1500)
},1000)
},1000)
},1000)
}
$('#knowMe').click(function(){
$('.myself').click();
});
$('#knowProject').click(function(){
$('.project').click();
});
</script>
<!--进度条-->
<script>
$(".progress").css({ 'opacity': 0, "width": '100%' });
</script>
</body>
</html>