-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
288 lines (283 loc) · 14.5 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>孙红照的简历</title>
<link rel="stylesheet" type="text/css" href="./css/iconfont.css">
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div id="header">
<div class="top-bar">
<div class="download">
<a href="JavaScript:void(0)" class="btn dw-btn"><i class="iconfont icon-xiazai"></i> 下载我的简历</a>
</div>
<div class="dw-type dw-1">
<a target="_blank" href="https://reedsun.github.io/Resume/dist/%E5%AD%99%E7%BA%A2%E7%85%A7-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88.md">Markdown格式</a>
<a target="_blank" href="https://reedsun.github.io/Resume/dist/%E5%AD%99%E7%BA%A2%E7%85%A7-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88.pdf">PDF格式</a>
</div>
</div>
<div class="intr">
<div class="photo">
<img src="http://p1.bqimg.com/567571/b44eaae3254112f7.jpg">
</div>
<h1 class="name">孙红照</h1>
<div class="title">前端工程师</div>
<div class="content">
<div class="content-desp">
<span>有能力</span>
<p>掌握HTML&CSS常用标签语法及布局技巧；了解Sass,Less等CSS预编译工具；熟练掌握JavaScript的常用DOM和事件的API;熟悉JQuery等常见类库；了解Bootstrap；熟悉Webpack、RequireJS等常用模块打包工具。像素级还原设计稿，并为页面添加常见动态效果。</p>
</div>
<div class="content-desp">
<span>有热情</span>
<p>有Geek精神，喜欢新生事物及前端新技术；了解ES6新语法，熟悉Vue框架，了解React.js和AngularJS等框架；爱逛GitHub和知乎，会去GitHub Trending查看近期流行的库和框架。</p>
</div>
<div class="content-desp">
<span>有理想</span>
<p title="理想是取代看我简历的你，I am watching you!">希望能成为一个精通前端前沿技术的前端工程师！做一个有趣的人。</p>
</div>
</div>
</div>
<div class="contact-info">
<ul class="contact-info-list">
<li class="email">
<i class="iconfont icon-youxiang"></i>
<a href="mailto:[email protected]">[email protected]</a>
</li>
<li class="phone">
<i class="iconfont icon-shouji"></i>
<a href="tel:15854213547">15854213547</a>
</li>
<li class="qq">
<i class="iconfont icon-QQ"></i>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=947503956&site=qq&menu=yes">947503956</a>
</li>
</ul>
</div>
<div class="page-nav">
<ul class="nav-list">
<li class="btn-basic btn-nav">基本信息</li>
<li class="btn-expr btn-nav">个人项目</li>
<li class="btn-skill btn-nav">职业技能</li>
<li class="btn-contact btn-nav">与我联系</li>
</ul>
</div>
</div>
<div id="main">
<div class="basic session">
<h2 class="session-title">基本信息</h2>
<div class="basic-info">
<p><span><i class="iconfont icon-woyaodianping"></i></span><span>应聘职位：</span><span>前端工程师</span></p>
<p><span><i class="iconfont icon-woyaodianping"></i></span><span>个人信息：</span><span>孙红照/男/23岁</span></p>
<p><span><i class="iconfont icon-woyaodianping"></i></span><span>学历：</span><span>本科/青岛理工大学</span></p>
<p><span><i class="iconfont icon-woyaodianping"></i></span><span>英语水平：</span><span>CET-4</span></p>
<p><span><i class="iconfont icon-woyaodianping"></i></span><span>技术博客：</span><span><a href="http://blog.csdn.net/weixin_35955795" target="_blank">http://blog.csdn.net/weixin_35955795</a></span></p>
<p><span><i class="iconfont icon-woyaodianping"></i></span><span>GitHub：</span><span><a href="https://github.com/ReedSun" target="_blank">https://github.com/ReedSun</a></span></p>
</div>
</div>
<div class="expr session">
<h2 class="session-title">个人项目</h2>
<div class="item">
<h3 class="name">某电商网站首页</h3>
<ul>
<li><a class="btn" href="https://github.com/ReedSun/JD-homepage" target="_blank"><i class="iconfont icon-daimagoujian01"></i>源代码</a></li>
<li><a class="btn" href="http://reedsun.coding.me/JD-homepage/" target="_blank"><i class="iconfont icon-daimagoujian01"></i>Demo</a></li>
</ul>
<div class="desp">
<ul>
<li>仿京东首页页面，像素级还原京东首页的静态效果，并实现轮播，Tab切换，CSS3动画等动态效果。</li>
<li>使用技术：CSS3、JavaScript、jQuery、Webpack</li>
<li>
实现细节：
<ul>
<li>实现自动淡入淡出的图片轮播效果，并在鼠标进入轮播图片后显示控制前进后退的箭头按钮。</li>
<li>商品区图片添加CSS3动画效果，使页面有活力。</li>
<li>实现多种Tab切换效果。并实现Tab切换与CSS3动画结合的切换效果。</li>
<li>在“京东秒杀模块”实现秒杀时间动态倒计时效果。</li>
</ul>
</li>
</ul>
<a href="http://reedsun.coding.me/JD-homepage/" target="_blank", title="某电商网站首页">
<img src="http://p1.bqimg.com/567571/00e943abcfd17e4f.png" alt="">
</a>
</div>
</div>
<div class="item">
<h3 class="name">jQuery插件库</h3>
<ul>
<li><a class="btn" href="https://github.com/ReedSun/jQuery-plugin" target="_blank"><i class="iconfont icon-daimagoujian01"></i>源代码</a></li>
<li></li>
</ul>
<div class="desp">
<ul>
<li>自己实现的jQuery插件库，包括常用的滚动轮播插件、回到顶部插件、瀑布流插件、StickUp效果插件、模态框插件、日期输入插件、Tab切换插件等。</li>
<li>使用技术：JavaScript、jQuery</li>
<li>
实现细节：
<ul>
<li>轮播插件：实现自动滚动切换图片的轮播功能；包含控制前后滚动的箭头按钮，以及快速跳转到相应图片的索引按钮。<a class="btn" href="https://reedsun.github.io/jQuery-plugin/carousel/demo.html" target="_blank"><i class="iconfont icon-daimagoujian01"></i>Demo</a></li>
<li>回到顶部插件：实现滚动回到顶部的功能；可以选择设置在滚动到指定高度后显示控制按钮的参数，以及滚动速度参数。<a class="btn" href="https://reedsun.github.io/jQuery-plugin/gotop/demo.html" target="_blank"><i class="iconfont icon-daimagoujian01"></i>Demo</a></li>
<li>瀑布流插件：实现图片自动瀑布流布局的功能；并且当浏览器宽度改变时，图片可以重新布局。<a class="btn" href="https://reedsun.github.io/jQuery-plugin/waterfall/demo.html" target="_blank"><i class="iconfont icon-daimagoujian01"></i>Demo</a></li>
<li>StickUp插件：可以将指定元素（通常为导航栏）固定在浏览器顶部从而不受浏览器滚动的影响。<a class="btn" href="https://reedsun.github.io/jQuery-plugin/stickup/demo.html" target="_blank"><i class="iconfont icon-daimagoujian01"></i>Demo</a></li>
<li>模态框插件：实现点击按钮出现模态框的效果；可以定义模态框的头部，内容，尾部按钮，及尾部按钮的提示信息。<a class="btn" href="https://reedsun.github.io/jQuery-plugin/modal/demo.html" target="_blank"><i class="iconfont icon-daimagoujian01"></i>Demo</a></li>
<li>日期输入插件：实现激活输入框时出现日历并可以选取日期到输入框的功能。<a class="btn" href="https://reedsun.github.io/jQuery-plugin/datePicker/demo.html" target="_blank"><i class="iconfont icon-daimagoujian01"></i>Demo</a></li>
<li>Tab切换插件：实现tab切换模块功能；当点击相应索引按钮，切换展示相应的内容。<a class="btn" href="https://reedsun.github.io/jQuery-plugin/tab/demo.html" target="_blank"><i class="iconfont icon-daimagoujian01"></i>Demo</a></li>
</ul>
</li>
</ul>
<a href="https://github.com/ReedSun/jQuery-plugin" target="_blank" title="jQuery插件库">
<img src="http://i1.piimg.com/567571/2c53b3723d52ab1e.png">
</a>
</div>
</div>
<div class="item">
<h3 class="name">TodoList</h3>
<ul>
<li><a class="btn" href="https://github.com/ReedSun/TodoList" target="_blank"><i class="iconfont icon-daimagoujian01"></i>源代码</a></li>
<li><a class="btn" href="http://reedsun.coding.me/TodoList/page.html" target="_blank"><i class="iconfont icon-daimagoujian01"></i>Demo</a></li>
</ul>
<div class="desp">
<ul>
<li>一个网页版个人任务管理器，主要Vue开发，后台数据使用LeanCloud储存和调用。</li>
<li>使用技术：Vue、Webpack、npm</li>
<li>
实现细节：
<ul>
<li>实现用户注册及用户登录登出功能，将用户的任务信息绑定到用户本身。</li>
<li>用户任务信息保存到后台服务器中，当用户登录后展示后台服务器中保存的用户任务信息。</li>
<li>用户添加任务或删除任务时，向后台发送AJAX请求，在后台服务器储存用户的操作并及时更新服务器的用户任务信息。</li>
</ul>
</li>
</ul>
<a href="http://reedsun.coding.me/TodoList/page.html" target="_blank", title="TodoList">
<img src="http://i1.piimg.com/567571/d97952e62944cd0e.png" alt="">
</a>
</div>
</div>
<div class="item">
<h3 class="name">企业站首页</h3>
<ul>
<li><a class="btn" href="https://github.com/ReedSun/Typiacl-website-product-page" target="_blank"><i class="iconfont icon-daimagoujian01"></i>源代码</a></li>
<li><a class="btn" href="http://reedsun.coding.me/Typiacl-website-product-page/page2/FC%20Barcelona.html" target="_blank"><i class="iconfont icon-daimagoujian01"></i>Demo</a></li>
</ul>
<div class="desp">
<ul>
<li>一个企业站首页。通过规范的HTML和CSS代码实现静态页面效果展示；使用原生JavaScript及jQuery封装模块，实现动态效果；模块使用RequireJS及Webpack两种方式打包。</li>
<li>使用技术：RequireJS、r.js、Webpack、jQuery、npm</li>
<li>
实现细节：
<ul>
<li>首屏为全屏自动滚动的图片轮播模块。</li>
<li>图片区使用瀑布流布局。</li>
<li>页面中所有图片俊采用懒惰加载模式，提高页面加载速度。</li>
</ul>
</li>
</ul>
<a href="http://reedsun.coding.me/Typiacl-website-product-page/page2/FC%20Barcelona.html" target="_blank", title="企业站首页">
<img src="http://p1.bpimg.com/567571/b22b089f6b9b8f4b.png" alt="">
</a>
</div>
</div>
<div class="item">
<h3 class="name">Weather-Reedsun</h3>
<ul>
<li><a class="btn" href="https://github.com/ReedSun/weather-reedsun" target="_blank"><i class="iconfont icon-daimagoujian01"></i>源代码</a></li>
</ul>
<div class="desp">
<ul>
<li>一个命令行工具，可以查询当地近期天气。</li>
<li>使用技术：Node.js、npm</li>
<li>安装方法：<span class="code">npm install weather-reedsun -g</span></li>
<li>使用方法：<span class="code">weather</span></li>
</ul>
<a href="https://github.com/ReedSun/weather-reedsun" target="_blank", title="Weather-Reedsun">
<img src="http://i1.piimg.com/567571/074d28f994577028.png">
</a>
</div>
</div>
</div>
<div class="skill session">
<h2 class="session-title">职业技能</h2>
<ul class="clear">
<li class="item">
<img class="skill-img" src="./img/HTML&CSS.png">
<h3 class="skill-name">HTML & CSS</h3>
<p class="skill-desp">熟悉HTML常用标签。熟练掌握盒模型、浮动定位、BFC、Flex等概念，熟悉页面常见布局。对web语义化有一定了解，能熟练手写符合w3c标准同时准确还原设计稿的HTML页面。</p>
</li>
<li class="item">
<img class="skill-img" src="./img/JavaScript.png">
<h3 class="skill-name">JavaScript</h3>
<p class="skill-desp">熟悉闭包、原型链、面向对象、原生DOM操作、AJAX、jsonp、跨域等概念。了解ES6新语法。能够实现页面常见效果。</p>
</li>
<li class="item">
<img class="skill-img" src="./img/jQuery.png">
<h3 class="skill-name">jQuery</h3>
<p class="skill-desp">熟悉jQuery常用语法，熟悉轮播、瀑布流、图片懒惰加载等效果的原理，能使用jQuery为页面添加这些常见效果，能自己封装常用的jQuery插件。</p>
</li>
</ul>
<h3 class="othertitle">其他技能</h3>
<ul>
<li class="skill-tag">Vue</li>
<li class="skill-tag">Git</li>
<li class="skill-tag">HTML 5</li>
<li class="skill-tag">CSS3</li>
<br>
<li class="skill-tag">Python</li>
<li class="skill-tag">Webpack</li>
<li class="skill-tag">RequireJS</li>
<li class="skill-tag">NPM</li>
</ul>
</div>
<div class="contact session">
<h2 class="session-title">与我联系</h2>
<div class="intr">
<img class="pretty" src="./img/images.jpg" alt="">
<p>
<strong>您可以通过以下方式与我联系：</strong>
</p>
<ul>
<li class="contact-way">
<i class="iconfont icon-duihao"></i>
发送邮件到
<a href="mailto:[email protected]">[email protected]</a>
</li>
<li class="contact-way">
<i class="iconfont icon-duihao"></i>
拨打电话或发送短信到
<a href="tel:15854213547">15854213547</a>
</li>
<li class="contact-way">
<i class="iconfont icon-duihao"></i>
添加QQ与我交流，QQ号
<span>947503956<img class="QR" src="./img/qqQR.jpg" alt=""></span>
</li>
<li class="contact-way">
<i class="iconfont icon-duihao"></i>
添加微信与我交流，微信号
<span>wstmz321<img class="wx QR" src="./img/wxQR.jpg" alt=""></span>
</li>
</ul>
<p>您还可以<a href="JavaScript:void(0)" class="dw-btn">点击这里</a>将我的简历保存到本地！</p>
<div class="dw-type dw2">
<a target="_blank" href="https://reedsun.github.io/Resume/dist/%E5%AD%99%E7%BA%A2%E7%85%A7-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88.md">Markdown格式</a>
<a target="_blank" href="https://reedsun.github.io/Resume/dist/%E5%AD%99%E7%BA%A2%E7%85%A7-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88.pdf">PDF格式</a>
</div>
</div>
</div>
</div>
<div id="footer">
<small>更新时间：2017.02</small><br>
<small>Copyright @ <a href="https://
github.com/ReedSun/Resume" target="_blank">ReedSun </a>2017</small><br>
<small>Template Copyright @ <a href="http://themes.3rdwavemedia.com/" target="_blank">3rd Wave Media</a></small>
</div>
<div id="aside">
<ul>
<li><a href="https://github.com/ReedSun/Resume" target="_blank">源代码</a></li>
<li><a href="http://blog.csdn.net/weixin_35955795" target="_blank">Blog</a></li>
<li><a href="https://github.com/ReedSun" target="_blank">GitHub</a></li>
</ul>
</div>
<script src="./dist/js/marge.js"></script>
</body>
</html>