-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
376 lines (366 loc) · 17.9 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
<!doctype html>
<!--[if IE 7 ]> <html lang="en-gb" class="isie ie7 oldie no-js"> <![endif]-->
<!--[if IE 8 ]> <html lang="en-gb" class="isie ie8 oldie no-js"> <![endif]-->
<!--[if IE 9 ]> <html lang="en-gb" class="isie ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="zh-cn" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Gentsun的个人主页</title>
<meta name="description" content="">
<meta name="author" content="WebThemez">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/da-slider.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="shortcut icon" href="images/photo-1.ico" type="image/x-icon">
<!-- Font Awesome -->
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.jsdelivr.net/gh/IlysvlVEizbr/Live2D@1.9/kbn.js" defer></script>
<header class="header">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<!--/.navbar-header-->
<div id="main-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="mainNav">
<li class="active"><a href="#home" class="scroll-link">主页</a></li>
<li><a href="#aboutUs" class="scroll-link">关于我</a></li>
<li><a href="#skills" class="scroll-link">技能</a></li>
<li><a href="#experience" class="scroll-link">经历</a></li>
<li><a href="#portfolio" class="scroll-link">文件夹</a></li>
<li><a href="#contactUs" class="scroll-link">联系我</a></li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
</div>
<!--/.container-->
</header>
<!--/.header-->
<div id="#top"></div>
<section id="home">
<div class="banner-container"> <img src="images/banner-bg.jpg" alt="banner" />
<div class="container banner-content">
<div class="row">
<header class="centered">
<h1>Gentsun Cheng</h1>
<p>专业网络设计师和开发人员</p>
</header>
<div class="social-icons">
<a href="https://twitter.com/GentsunCheng"><i class="fa fa-twitter"></i></a>
<a href="https://github.com/GentsunCheng"><i class="fa fa-github-square"></i></a>
<a href="https://jq.qq.com/?_wv=1027&k=rwbnhXEm"><i class="fa fa-qq"></i></a>
<a href="https://t.me/GentsunCheng"><i class="fa fa-telegram"></i></a>
<a href="https://youtube.com/channel/UC0WSCJ5xItWR3YRRZIjUMgA"><i class="fa fa-youtube-square"></i></a>
</div>
<a href="#" class="hireMe">简历</a>
</div>
</div>
</section>
<section id="introText">
<div class="container">
<div>
<h1>我创造了美丽的响应网站，是的，我是一个UX怪人</h1>
<p>痛苦本身就是爱，主要客户 有时它很有趣，它并没有就此止步。 放下明天的欢笑之痛。 游戏的元素就像，吸引大量玩家一样有趣。那是对酒精的恐惧。 据说是货运。 车辆没有纯酱料，可以从玩家身上带走。 没有橙色的笑声。 推动一辆或多辆车辆。</p>
</div>
</div>
</section>
<!--About-->
<section id="aboutUs">
<div class="container">
<div class="row">
<!-- item -->
<div class="col-md-4 tileBox"> <img src="images/photo-1.jpg" alt="me"/> </div>
<div class="col-md-8 tileBox">
<div class="txtHead">
<h2>H\你好,我是GentsunCheng </h2>
<h3>Web UI/UX设计师/前端开发人员，总部位于中国武汉</h3>
</div>
<p>痛苦本身就是一个很大的痛苦，有时被客户的精英阶层加剧了，这不是一个愉快的周末。 明天的需求 有时它很有趣，而且还不止于此。<br/>
<br/>
加强监测程序。 有时它很有趣，而且还不止于此。</p>
</div>
<!-- end: -->
</div>
</div>
</section>
<!--Quote-->
<section id="quote" class="bg-parlex">
<div class="parlex-back">
<div class="container">
<div class="row">
<div class="col-md-12"> <h2>“梦想非常重要。 除非你能想象，否则你无法做到。” <span>-乔治·卢卡斯</span></h2></div>
</div>
</div>
<!--/.container-->
</div>
</section>
<!--Skills-->
<section id="skills" class="secPad white">
<div class="container">
<div class="heading ">
<!-- Heading -->
<h2>技能</h2>
<p>痛苦本身就是爱，主要客户 有时它很有趣，它并没有就此止步。 放下明天的欢笑之痛。 游戏的元素就像，吸引大量玩家一样有趣。那是对酒精的恐惧。 据说是货运。 车辆没有纯酱料，可以从玩家身上带走。 没有橙色的笑声。 推动一辆或多辆车辆。</p>
</div>
<div class="row skillContainer">
<div class="col-md-4 skillBox">
<div id="diagram-id-1" class="diagram" data-percent="95.2%"></div>
<div class="chart-text">
<h4>视觉设计</h4>
<p>4年经历</p>
</div>
</div>
<div class="col-md-4 skillBox">
<div id="diagram-id-2" class="diagram" data-percent="75.2%"></div>
<div class="chart-text">
<h4>前端开发人员</h4>
<p>8年经历</p>
</div>
</div>
<div class="col-md-4 skillBox">
<div id="diagram-id-3" class="diagram" data-percent="85.6%"></div>
<div class="chart-text">
<h4>后端开发人员</h4>
<p>5年经历</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h2>编程技巧</h2>
<p class="mrgBtm20">Lorem Ipsum 只是印刷和排版行业的虚拟文本。 自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书。 它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变。 它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 的发布，包括 Lorem Ipsum 的版本。</p>
</div>
<div class="col-sm-6"> <br/>
<br/>
<br/>
<div class="row">
<div class="col-md-2 skilltitle"><b>HTML5</b></div>
<div class="col-md-10">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% Complete</span> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 skilltitle"><b>JavaScript</b></div>
<div class="col-md-10">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span class="sr-only">80% Complete</span> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 skilltitle"><b>Angular</b></div>
<div class="col-md-10">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"> <span class="sr-only">75% Complete</span> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 skilltitle"><b>Knockout</b></div>
<div class="col-md-10">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"> <span class="sr-only">75% Complete</span> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Experience-->
<section id="experience" class="secPad">
<div class="container">
<div class="heading">
<!-- Heading -->
<h2>经验</h2>
<br/>
<h4>12年经验！</h4>
<p>熟悉目前常用的防火墙和路由器的语法和操作，包括ACL策略、静态NAT、策略NAT、专线路由、在路由器上做NAT，抓包等；具有一定的网络知识，能够从源主机顺着路由一步步地查找问题，通过抓包进行问题定位。</p>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="exp-wrapper">
<img src="images/client-1.png" width="90" alt="Name">
<h3>Work Day Look</h3>
<p>熟练搭建windows、linux’ 系统测试环境，服务器安装运行与维护排查问题</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="exp-wrapper">
<img src="images/client-5.png" width="90" alt="Name">
<h3>Yahoo</h3>
<p>熟练TP5框架使用可以编写简单业务逻辑服务器与小程序处理商城业务 </p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="exp-wrapper">
<img src="images/client-3.png" width="90" alt="Name">
<h3>jQuery</h3>
<p>.熟练使用J2EE语言；JS;JSP;熟悉Tomcat,Eclipse，zend studio工具使用</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="exp-wrapper">
<img src="images/client-4.png" width="90" alt="Name">
<h3>Flickr</h3>
<p>掌握简易SQL Server，MYSQL，能使用LR,熟悉软件测试原理, 功能测试. 性能测试</p>
</div>
</div>
</div>
</section>
<!--Portfolio-->
<section id="portfolio" class="page-section section appear clearfix secPad">
<div class="container">
<div class="heading">
<!-- Heading -->
<h2>Portfolio</h2>
<p>不甘心平庸，不会停留于当前岗位薪资，职能以及职业规划, 运用大良时间学习新知识，达到自己想要的职业技能，并配合运动，不让体能落后。大学时因为兴趣接触了程序开发，发现自己适合该方向，并花了大量时间去学习与开发相关的知识，想系统的学习开发技能，为了更全面了解软件的知识，参加了北大青鸟的培训；培训时系统的学习了系统的原理，Java面向对象思想与开发流程，软件测试技术，能自己写测试用例；培训期间项目实训，对项目系统使用所学测试流程模仿公司测试流程进行系统测试。 </p>
</div>
<div class="row">
<nav id="filter" class="col-md-12">
<ul>
<li><a href="#" class="current btn-theme btn-small" data-filter="*">全部</a></li>
<li><a href="#" class="btn-theme btn-small" data-filter=".webdesign">网页设计</a></li>
<li><a href="#" class="btn-theme btn-small" data-filter=".photography">摄影</a></li>
<li><a href="#" class="btn-theme btn-small" data-filter=".print">打印</a></li>
</ul>
</nav>
<div class="col-md-12">
<div class="row">
<div class="portfolio-items isotopeWrapper clearfix" id="3">
<article class="col-sm-4 isotopeItem webdesign">
<div class="portfolio-item"> <img src="images/portfolio/img1.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info"> <a href="images/portfolio/img1.jpg" class="fancybox">
<h5>项目名</h5>
<i class="fa fa-plus-square-o fa-2x"></i></a> </div>
</div>
</div>
</article>
<article class="col-sm-4 isotopeItem photography">
<div class="portfolio-item"> <img src="images/portfolio/img2.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info"> <a href="images/portfolio/img2.jpg" class="fancybox">
<h5>项目名</h5>
<i class="fa fa-plus-square-o fa-2x"></i></a> </div>
</div>
</div>
</article>
<article class="col-sm-4 isotopeItem photography">
<div class="portfolio-item"> <img src="images/portfolio/img3.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info"> <a href="images/portfolio/img3.jpg" class="fancybox">
<h5>项目名</h5>
<i class="fa fa-plus-square-o fa-2x"></i></a> </div>
</div>
</div>
</article>
<article class="col-sm-4 isotopeItem print">
<div class="portfolio-item"> <img src="images/portfolio/img4.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info"> <a href="images/portfolio/img4.jpg" class="fancybox">
<h5>项目名</h5>
<i class="fa fa-plus-square-o fa-2x"></i></a> </div>
</div>
</div>
</article>
<article class="col-sm-4 isotopeItem photography">
<div class="portfolio-item"> <img src="images/portfolio/img5.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info"> <a href="images/portfolio/img5.jpg" class="fancybox">
<h5>项目名</h5>
<i class="fa fa-plus-square-o fa-2x"></i></a> </div>
</div>
</div>
</article>
<article class="col-sm-4 isotopeItem webdesign">
<div class="portfolio-item"> <img src="images/portfolio/img6.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info"> <a href="images/portfolio/img6.jpg" class="fancybox">
<h5>项目名</h5>
<i class="fa fa-plus-square-o fa-2x"></i></a> </div>
</div>
</div>
</article>
<article class="col-sm-4 isotopeItem print">
<div class="portfolio-item"> <img src="images/portfolio/img7.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info"> <a href="images/portfolio/img7.jpg" class="fancybox">
<h5>项目名</h5>
<i class="fa fa-plus-square-o fa-2x"></i></a> </div>
</div>
</div>
</article>
<article class="col-sm-4 isotopeItem photography">
<div class="portfolio-item"> <img src="images/portfolio/img8.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info"> <a href="images/portfolio/img8.jpg" class="fancybox">
<h5>项目名</h5>
<i class="fa fa-plus-square-o fa-2x"></i></a> </div>
</div>
</div>
</article>
<article class="col-sm-4 isotopeItem print">
<div class="portfolio-item"> <img src="images/portfolio/img9.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info"> <a href="images/portfolio/img9.jpg" class="fancybox">
<h5>项目名</h5>
<i class="fa fa-plus-square-o fa-2x"></i></a> </div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
<iframe src="https://space.bilibili.com/405833199/" width="1400" height="600"></iframe>
<!--/.page-section-->
<footer class="copyright">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="social pull-left"> <a href="https://twitter.com/GentsunCheng"><i class="fa fa-twitter"></i></a> <a href="https://github.com/GentsunCheng"><i class="fa fa-github"></i></a> </div>
</div>
</div>
<!-- / .row -->
</div>
</footer>
<a href="#top" class="topHome"><i class="fa fa-chevron-up fa-2x"></i></a>
<!--[if lte IE 8]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><![endif]-->
<script src="js/modernizr-latest.js"></script>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.isotope.min.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="js/jquery.nav.js" type="text/javascript"></script>
<script src="js/jquery.cslider.js" type="text/javascript"></script>
<script src="js/jquery.diagram.js"></script>
<script src="contact/jqBootstrapValidation.js"></script>
<script src="contact/contact_me.js"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script src="js/owl-carousel/owl.carousel.js"></script>
</body>
</html>