-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-pdf.html
215 lines (213 loc) · 11.3 KB
/
index-pdf.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
<!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" style="display: none;">
<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>
</div>
<div class="content-desp">
<span>有热情</span>
</div>
<div class="content-desp">
<span>有理想</span>
</div>
<p class="pdf-tit">PDF版本浏览效果不佳，建议通过如下链接访问查看在线简历</p>
<p><a href="http://reedsun.coding.me/Resume/" target="_blank">http://reedsun.coding.me/Resume/</a></p>
</div>
</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="contact session" style="margin-bottom: 100px">
<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 class="expr session" style="box-shadow: none;">
<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>
<script src="./dist/js/marge.js"></script>
</body>
</html>