-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.html
364 lines (353 loc) · 17.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="web前端个人简历,web前端,张小月简历,Redspite,前端个人博客,前端工程师">
<meta name="description" content="张小月WEB前端工程师的个人简历">
<meta name="author" content="张小月,Redspite">
<title>Web前端工程师简历</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css" type="text/css">
<link rel="stylesheet" href="css/cv.css">
<!--[if lte IE 9]>
<script type="text/javascript">
window.location = "http://www.xiaoyuezhang.com/error.html"
</script>
<![endif]-->
<!-- xiaoyuezhang.com Baidu tongji analytics -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?f87e415f9d1f6111b1d34c5f96927d9b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div class="content ">
<div class="cv-container">
<div id="section1" class="section active">
<div id="top" title="顶部">
<img src="image/top.png" alt="回到顶部">
</div>
<div class="myIntro">
<h1 class="fade">Hello, I'm RedSpite</h1>
<h3 class="fade">一个拥有像素眼的前端工程师</h3>
<span class="active fade" id="abMe">关于我</span>
<span id="mypro" class="fade">我的作品</span>
</div>
<ul class="bg-img">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="section2" class="section">
<!-- 导航条-->
<div id="nav-bar" class="bar">
<div class="container">
<a href="./drip.html">
<div class="fl">RedSpite博客</div>
</a>
<ul class="fr nav-ul">
<li>关于我</li>
<li>求职意向</li>
<li>作品集</li>
<li>技术掌握</li>
<li>我的经历</li>
<li>联系我</li>
</ul>
<div class="fr more-nav">
<img src="image/more.png" alt="更多">
</div>
</div>
<ul class="nav-ul nav-xs-ul">
<li>关于我</li>
<li>求职意向</li>
<li>作品集</li>
<li>技术掌握</li>
<li>我的经历</li>
<li>联系我</li>
</ul>
</div>
<!--关于我-->
<h2>关于我</h2>
<hr>
<div class="center fades">
<p class="center"><img src="image/mypic.jpg" alt="头像" /></p>
<div class="my-intro">
<p>我叫张小月，23岁，坐标成都，是一名前端工程师。前端是一门有容乃大的行业，我并不是计算机专业出生。 在自学前端之前，唯一接触过的就是大学里的C语言。庆幸的是JS与C很相像，给我很大的信心来学习。
</p>
<p>学习的路还很长，志同道合的朋友可以加我，一起进步。 我的微信
<a href="image/qrcode.jpg" target="_blank" id="qrcode"><img src="image/weixin.jpg" alt="xiaoyue930930" /></a>。
</p>
<p>这个版本是两年前写的，现在用React改版写了一版新的<a href="https://www.redspite.com/cv">www.redspite.com</a></p>
</div>
</div>
</div>
<div id="section3" class="section">
<h2>求职意向</h2>
<hr>
<div class="container center fades">
<div class="col-md-3 col-xs-6 skill-ps skill">
<p><img src="image/web.png" alt="切图"></p>
<p class="ptitle">PS切图</p>
<p>从PSD上切出页面需要的图片</p>
<p>将小图标合成spirts优化。</p>
</div>
<div class="col-md-3 col-xs-6 skill-web skill">
<p><img src="image/css.png" alt="css"></p>
<p class="ptitle">网页制作</p>
<p>响应式页面,简单不冗余代码。</p>
<p>css3流畅动画效果，兼容不同浏览器。</p>
</div>
<div class="col-md-3 col-xs-6 skill-js skill">
<p><img src="image/js.png" alt="js"></p>
<p class="ptitle">前端功能</p>
<p>用JS完成常见的前端功能特效</p>
<p>用AJAX读取后台数据。</p>
</div>
<div class="col-md-3 col-xs-6 skill-h5 skill">
<p><img src="image/h5.png" alt="h5"></p>
<p class="ptitle">h5页面</p>
<p>移动端页面的书写</p>
<p>兼容平板、安卓、IOS不同终端。</p>
</div>
</div>
</div>
<div id="section4" class="section">
<h2>作品集</h2>
<hr>
<div class="container center fades">
<p class="center intros">写jq前端功能的时候，我的宗旨是能手写就手写，不依赖插件。手写代码更简洁高效，也更能提升自己技术。</p>
<div class="col-md-3 col-xs-6">
<div class="imgbox">
<img src="image/01.jpg" alt="作品配图">
</div>
<a href="cart.html" target="_blank">
<div class="zp-cover">
<h4>商城类页面</h4>
<p>购物车结算jq，订单的选择或删除、金额的计算。</p>
<img src="image/search.png" alt="查看">
</div>
</a>
</div>
<div class="col-md-3 col-xs-6">
<div class="imgbox">
<img src="image/06.jpg" alt="作品配图">
</div>
<a href="http://www.cbecm.com/Analysis/Gametest/pc_test" target="_blank">
<div class="zp-cover" style="top: 45%">
<h4>测试类页面</h4>
<p>AJAX获取后台数据，用数组读取选项与题目。记录测试者的选项返给后台。</p>
<img src="image/search.png" alt="查看">
</div>
</a>
</div>
<div class="col-md-3 col-xs-6 ">
<div class="imgbox">
<img src="image/02.jpg" alt="作品配图">
</div>
<a href="http://www.cbecm.com/Live/Index/index" target="_blank">
<div class="zp-cover">
<h4>直播类页面</h4>
<p>直播页面响应式，css3 jq运用较多</p>
<img src="image/search.png" alt="查看">
</div>
</a>
</div>
<div class="col-md-3 col-xs-6 ">
<div class="imgbox">
<img src="image/03.jpg" alt="作品配图">
</div>
<a href="http://www.cbecm.com/Anchor/Anchor/anchor" target="_blank">
<div class="zp-cover">
<h4>列表类页面</h4>
<p>无缝轮播手写，花瓣动画。</p>
<img src="image/search.png" alt="查看">
</div>
</a>
</div>
<div class="col-md-3 col-xs-6 ">
<div class="imgbox">
<img src="image/04.jpg" alt="作品配图">
</div>
<a href="http://www.cbecm.com/Anchor/Anchor/anchor_detai?id=RjA4QzAyMzUtNERCNC04MjM1LUY2NTQtQUM2NTdGMkQ4OTcx" target="_blank">
<div class="zp-cover">
<h4>详情类页面</h4>
<p>视频播放，富文本编辑器手写。</p>
<img src="image/search.png" alt="查看">
</div>
</a>
</div>
<div class="col-md-3 col-xs-6 ">
<div class="imgbox">
<img src="image/05.jpg" alt="作品配图">
</div>
<a href="http://www.cbecm.com/Home/Index/index" target="_blank">
<div class="zp-cover">
<h4>官网类首页</h4>
<p>多数据响应式网页，能兼容不同大小电脑分辨率</p>
<img src="image/search.png" alt="查看">
</div>
</a>
</div>
<div class="col-md-3 col-xs-6 ">
<div class="imgbox">
<img src="image/07.jpg" alt="作品配图">
</div>
<a href="http://www.cbecm.com/Live/Index/m_index" target="_blank">
<div class="zp-cover">
<h4>移动端页面</h4>
<p>列表页，兼容安卓、ios、平板</p>
<img src="image/search.png" alt="查看">
</div>
</a>
</div>
<div class="col-md-3 col-xs-6">
<div class="imgbox">
<img src="image/08.jpg" alt="作品配图">
</div>
<a href="drip.html" target="_blank">
<div class="zp-cover">
<h4>我的技术博客</h4>
<p>自己平时的知识点积累~</p>
<img src="image/search.png" alt="查看">
</div>
</a>
</div>
</div>
</div>
<div id="section5" class="section">
<h2>技术掌握</h2>
<hr>
<div class="container center fades">
<div class="col-md-3 col-xs-6">
<div class="wrap-box">
<div class="circle-wrap clip-auto">
<div class="left-clip percent"></div>
<div class="right-clip percent"></div>
</div>
<div class="circle-num">
<span>90</span>%
</div>
</div>
<p class="ptitle">HTML5</p>
</div>
<div class="col-md-3 col-xs-6">
<div class="wrap-box">
<div class="circle-wrap clip-auto">
<div class="left-clip percent"></div>
<div class="right-clip percent"></div>
</div>
<div class="circle-num">
<span>90</span>%
</div>
</div>
<p class="ptitle">CSS3</p>
</div>
<div class="col-md-3 col-xs-6">
<div class="wrap-box">
<div class="circle-wrap clip-auto">
<div class="left-clip percent"></div>
<div class="right-clip percent"></div>
</div>
<div class="circle-num">
<span>85</span>%
</div>
</div>
<p class="ptitle">JQ</p>
</div>
<div class="col-md-3 col-xs-6">
<div class="wrap-box">
<div class="circle-wrap clip-auto">
<div class="left-clip percent"></div>
<div class="right-clip percent"></div>
</div>
<div class="circle-num">
<span>80</span>%
</div>
</div>
<p class="ptitle">JS</p>
</div>
</div>
</div>
<div id="section6" class="section">
<h2>我的经历</h2>
<hr>
<div class="container center fades">
<ul class="my-xp">
<li>
<div class="date-box">
<p>09/2015</p>
<p>-</p>
<p>现在</p>
</div>
<div class="my-work my-xp-box">
<strong>成都清风竞技文化传媒</strong>
<p class="ptitle">技术部/前端工程师</p>
<p>负责官网页面制作。PSD切图后构建页面框架</p>
<p>利用JS、CSS3书写前端功能，让页面更充实丰富</p>
<p>并将代码上传到代码托管平台上</p>
</div>
</li>
<li>
<div class="date-box">
<p>06/2016</p>
<p>-</p>
<p>09/2012</p>
</div>
<div class="my-school my-xp-box">
<strong>西南科技大学</strong>
<p class="ptitle">大学本科</p>
<p>获得大学英语四级证书</p>
<p>获得C语言计算机二级</p>
<p></p>
</div>
</li>
</ul>
</div>
</div>
<div id="section7" class="section">
<h2>联系我</h2>
<hr>
<div class="container center fades">
<div class="flow">
<!-- UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=2110329"></script>
<!-- UY END -->
<div class="half fr">
</div>
</div>
</div>
</div>
</div>
<p class="center beian">© RedSpite | <a href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action">蜀ICP备16004270号</a></p>
</div>
<script>
// window.location.href="https://www.redspite.com/cv"
</script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/mycv.js"></script>
<script>
(function() {
//百度自动链接推送
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
} else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body>
</html>