-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
323 lines (316 loc) · 16.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="web前端,web前端个人简历,web前端工程师简历,前端开发,web前端简历,web前端在线简历" />
<meta name="description" content="刘金秀的web前端工程师个人简历,在线前端简历">
<title>web前端工程师在线简历-刘金秀</title>
<link rel="stylesheet" href="./libs/fullPage/jquery.fullPage.css">
<link rel="stylesheet" href="./less/animate.min.css">
<link rel="stylesheet" href="./libs/Font-Awesome-master/css/font-awesome.min.css">
<link rel="stylesheet" href="./libs/ModalWindowEffects/css/component.css">
<link rel="stylesheet" href="./less/main.css">
</head>
<body>
<!-- 小箭头 -->
<div class="arrow"></div>
<!-- header nav -->
<div class="header">
<div class="container">
<div class="logo">
<div class="header-img"></div>
<div class="header-p">
<div class="header-p1">刘金秀</div>
<div class="header-p2">个人简历</div>
</div>
</div>
<div class="nav">
<ul id="menu">
<li><a href="#page1">首页</a></li>
<li><a href="http://www.sayweb.top" target="_blank">博客</a></li>
<li><a href="https://github.com/JinxiuLiu" target="_blank">GitHub</a></li>
<li><a href="#page5">联系我</a></li>
</ul>
</div>
</div>
</div>
<!-- home page -->
<div id="dowebok">
<!-- home -->
<div class="section one">
<div class="home">
<div class="home_name">
<h3 id="home_one">刘 金 秀(男)</h3>
<p id="home_two">FRONT-END ENGINEER</p>
</div>
<!-- 头像 -->
<div class="home_portrait"></div>
<div class="home_info"></div>
<h3 class="home_info1">90后,微弱,但有着独特的人生观;</h3>
<h3 class="home_info1">孤独,却可以聚合出左右世代的力量。我来了,我看见,我征服。</h3>
</div>
</div>
<!-- about -->
<div class="section two">
<div class="about">
<div class="about_name">
</div>
<div class="about_info">
<div class="about_info_part1">
<h3>1992年</h3>
<p>出生于山东潍坊</p>
<div class="about_info_part4">
<h3>2011年</h3>
<p>考入青岛理工大学琴岛学院</p>
<p>电子商务专业</p>
<p>在校期间获得第三届山东省电子商务大赛三等奖</p>
</div>
</div>
<div class="about_info_part2">
<h3>2014年</h3>
<p>考入山东财经大学东方学院</p>
<p>电子商务专业</p>
<p>开始接触编程,期间制作个人博客,以及企业官网并上线</p>
<div class="about_info_part5">
<h3>2015年</h3>
<p>进入青州城宣网络传媒有限公司实习</p>
<p>开始正式进入前端领域</p>
<p>工作之余系统的学习前端各类知识</p>
</div>
</div>
<div class="about_info_part3">
<h3>2016年</h3>
<p>进入济南赢动广告有限公司</p>
<p>任职前端开发</p>
<p>主要使用前端各类技术,完成各类站点的开发,工作期间对前端知识有了更加深刻的认识.</p>
<div class="about_info_part6">
<h3>NOW</h3>
<p>坐标:北京</p>
<p>
I believe the future is more wonderful
</p>
</div>
</div>
</div>
</div>
</div>
<!-- skill -->
<div class="section three">
<div class="skiil">
<div class="skiil_name">
</div>
<div class="skiil_introduce">
<p>层出不穷的框架让人兴奋</p>
<p>而不同框架背后的思路却在逐渐统一</p>
</div>
<ul class="skiil_info">
<li class="skiil_info_html">
<strong></strong>
<span>HTML</span>
</li>
<li class="skiil_info_css">
<strong></strong>
<span>CSS</span>
</li>
<li class="skiil_info_js">
<strong></strong>
<span>JavaScript</span>
</li>
<li class="skiil_info_bs">
<strong></strong>
<span>BootStrap</span>
</li>
<li class="skiil_info_ag">
<strong></strong>
<span>AngularJS</span>
</li>
</ul>
</div>
</div>
<!-- works -->
<div class="section four">
<div class="works">
<div class="works_title">
<h3></h3>
<a href="javascript:;">换一换<i class="fa fa-refresh fa-spin"></i></a>
</div>
<div class="works_wrap">
<div class="works_wrapbox hideing" id="box1" style="display: block;">
<div class="hot_box">
<a href="javascript:;"><img src="./images/htgx.png" alt="项目图片" /></a>
<a href="https://github.com/JinxiuLiu/studyIT" target="_blank" class="hot_title">后台管理系统(Demo)</a>
<p class="hot_txt">该管理系统主要实现职员管理,课程管理,广告管理,个人基本资料维护等一系列模块。</p>
<i class="gw_link md-trigger md-setperspective" data-modal="modal-4">查看详情</i>
</div>
<div class="hot_box">
<a href="javascript:;"><img src="./images/qpw.png" alt="项目图片" /></a>
<p class="hot_title">仿钱盆网-Bootstrap</p>
<p class="hot_txt">主要练习Bootstrap的使用,以及公共CSS样式的提取,提高网页性能</p>
<i class="gw_link md-trigger md-setperspective" data-modal="modal-5">查看详情</i>
</div>
<div class="hot_box">
<a href="javascript:;"><img src="./images/cv.png" alt="项目图片" /></a>
<p class="hot_title">个人在线简历</p>
<p class="hot_txt">业余时间利用fullpage.js创建的个人简历</p>
<i class="gw_link md-trigger md-setperspective" data-modal="modal-6">查看详情</i>
</div>
</div>
<div class="works_wrapbox" id="box2" style="display:none;">
<div class="hot_box">
<a href="javascript:;"><img src="./images/mxsc.png" alt="项目图片" /></a>
<a href="http://www.mayzone360.com/" target="_blank" class="hot_title">美逊商城</a>
<p class="hot_txt">美逊商城是山东新一代企业办公用品的B2B2C网上购物商城</p>
<i class="gw_link md-trigger md-setperspective" data-modal="modal-1">查看详情</i>
</div>
<div class="hot_box">
<a href="javascript:;"><img src="./images/jmsh.png" alt="项目图片" /></a>
<p class="hot_title">佳美生活(app)</p>
<p class="hot_txt">佳美生活是一款集购物和生活服务于一体的多功能app,致力于打造泰安本土购物领先品牌</p>
<i class="gw_link md-trigger md-setperspective" data-modal="modal-2">查看详情</i>
</div>
<div class="hot_box">
<a href="javascript:;"><img src="./images/cr.png" alt="项目图片" /></a>
<a href="http://www.sdchaorui.com/" target="_blank" class="hot_title">山东超锐信息科技有限公司(PC)</a>
<p class="hot_txt">这个项目是公司最基本的页面展示项目,展示公司基本信息,产品和服务。实习期间连续制作多个。</p>
<i class="gw_link md-trigger md-setperspective" data-modal="modal-3">查看详情</i>
</div>
</div>
</div>
</div>
</div>
<!-- contact -->
<div class="section five">
<div class="contact">
<div class="contact_title">
<h3>联 系 我</h3>
</div>
<div class="contact_emall">
<h3><i class="fa fa-envelope-o"></i> [email protected]</h3>
</div>
<div class="contact_txt">
<p>一腔热血的激情</p>
<p>一夜失眠的创意</p>
<p>一个像素的执着</p>
<span></span>
<p>行路有良友,便是捷径</p>
<p>带上我吧,一起看更大的世界</p>
</div>
</div>
<div class="footer">
<p>All Rights Reserved</p>
<p>鲁ICP备15043299号 Copyright © 2016 - 2017</p>
</div>
</div>
</div>
<!-- modal-1 -->
<div class="md-modal md-effect-10" id="modal-1">
<div class="md-content">
<h3>美逊商城</h3>
<div>
<h4>开发周期:2016.09-2016.11</h4>
<ul>
<li>主要负责整体页面布局、二级菜单模块,以及登录、注册页面的实现;</li>
<li>首页使用Bootstrap和carousel.js插件实现无缝轮播图的动态效果;</li>
<li>首页中局部使用C3中过渡属和阴影做一些特效动画;</li>
<li>商城所有商品的信息通过ajax动态加载进来的;</li>
<li>登录页面运用ajax判定输入登录名和密码与数据库的信息是否吻合,成功则跳转到首页,否则输入数据清空重新输入登录名和密码;</li>
<li>使用angular数据双向绑定实现购物车中商品的添加和删除,通过cookie与后台进行数据同步;</li>
</ul>
<button class="md-close">我明白了</button>
</div>
</div>
</div>
<!-- modal-2 -->
<div class="md-modal md-effect-10" id="modal-2">
<div class="md-content">
<h3>佳美生活(app)</h3>
<div>
<h4>开发周期:2016.06-2016.9</h4>
<ul>
<li>负责主页、部分分类页、详情页的页面排版,利用rem.js进行移动端布局;</li>
<li>使用bootstrop快速构建视图样式布局 使用angular.js实现数据的双向绑定和数据的更新; </li>
<li>使用angular.js中的指令操作页面中的元素 使用angular-route路由模块实现页面在不同锚点值下显示不同的页面 使用$http模块从后台获取数据;</li>
<li>登录页面依赖zepto实现弹出模态窗口切换登录和注册表单;</li>
<li>使用Iconfont制作扫描图标并依赖zepto和H5新增属性getUserMedia属性调取摄像头扫描二维码和解析;</li>
</ul>
<button class="md-close">我明白了</button>
</div>
</div>
</div>
<!-- modal-3 -->
<div class="md-modal md-effect-10" id="modal-3">
<div class="md-content">
<h3>山东超锐信息科技有限公司(PC)</h3>
<div>
<h4>开发周期:2015.09-2015.12 连续多个</h4>
<ul>
<li>根据设计图和文档规范完成官网页面的切图以及框架搭建;</li>
<li>使用div+css,html5+css3实现网站pc端布局;</li>
<li>使用原生js和jQuery完成网站页面各种动态效果;</li>
<li>利用一些流行框架Bootstrap等框架搭建网页,完成响应式布局;</li>
<li>根据需求对客户网站进行后期的维护与更新;</li>
</ul>
<button class="md-close">我明白了</button>
</div>
</div>
</div>
<!-- modal-4 -->
<div class="md-modal md-effect-17" id="modal-4">
<div class="md-content">
<h3>后台管理系统-Demo</h3>
<div>
<ul>
<li>使用LESS编写css,让代码更加具有管理性、可读性。</li>
<li>使用require.js进行JS的模块化加载,让代码更加具有扩展性,可维护性。</li>
<li>使用原生JS和jQuery完成本系统页面各种动态效果。</li>
<li>利用AJAX完成页面与后台的数据交互,使用template对页面进行数据渲染。</li>
<li>利用Bootstart等框架构建网页,完成响应式布局。</li>
<li>使用echarts完成图表信息显示。</li>
</ul>
<button class="md-close">我明白了</button>
</div>
</div>
</div>
<!-- modal-5 -->
<div class="md-modal md-effect-17" id="modal-5">
<div class="md-content">
<h3>仿钱盆网-Bootstrap</h3>
<div>
<ul>
<li>主要练习Bootstrap的使用,能够熟练运用Bootstrap快速构建页面。</li>
<li>练习提取CSS公共样式,提高代码复用性、可维护性以及网站性能。</li>
<li>使用原生JS和jQuery完成页面各种动态效果。</li>
<li>局部使用C3中过渡属和阴影做一些特效动画。</li>
</ul>
<button class="md-close">我明白了</button>
</div>
</div>
</div>
<!-- modal-6 -->
<div class="md-modal md-effect-17" id="modal-6">
<div class="md-content">
<h3>个人简历</h3>
<div>
<ul>
<li>使用LESS编写css,让代码更加具有管理性、可读性。</li>
<li>使用fullpage.js构建页面,完成轮播图效果</li>
<li>使用原生JS和jQuery完成页面各种动态效果。</li>
<li>利用animate.css完成个人模块的动画效果</li>
<li>利用Effects完成膜态框的动画效果。</li>
<li>使用jquery-circle-progress完成个人技能页面的百分比特效</li>
</ul>
<button class="md-close">我明白了</button>
</div>
</div>
</div>
<!-- modal background -->
<div class="md-overlay"></div>
<script src="./libs/jQuery/jquery-1.11.2.min.js"></script>
<script src="./libs/fullPage/jquery.fullPage.min.js"></script>
<script src="./libs/jquery-easing/jquery.easing.min.js"></script>
<script src="./libs/Jquery-circle-progress/circle-progress.js"></script>
<script src="./libs/ModalWindowEffects/js/classie.js"></script>
<script src="./libs/ModalWindowEffects/js/modalEffects.js"></script>
<script src="./js/main.min.js"></script>
</body>
</html>