-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
204 lines (203 loc) · 11.3 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>董卫星的简历</title>
<meta name="description" content="">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="dist/css/style.min.css">
<link rel="stylesheet" href="dist/css/fontello.min.css">
</head>
<body>
<aside>
<ul>
<li>
<a href="https://github.com/Zhouxingzu/Resume" target="_blank">源代码</a>
</li>
<li>
<a href="https://www.yuerxiao.com" target="_blank">Blog</a>
</li>
<li>
<a href="https://www.github.com/Zhouxingzu" target="_blank">GitHub</a>
</li>
</ul>
</aside>
<div class="container">
<div class="sidebar">
<div class="title">
<img src="img/head.png">
<h1>董卫星的简历</h1>
<h2>"Less is more."</h2>
</div>
<ul class="side-info">
<li class="someRight">
<dt><i class="icon-bookmark"></i>Contact. 联系方式</dt>
<dd><i class="icon-mail-alt"></i>邮箱: <a href="javascript:;" target="_blank">[email protected]</a></dd>
<dd><i class="icon-wechat"></i>微信: <a href="javascript:;">guaidaojide9527</a></dd>
<dd><i class="icon-qq"></i>QQ: <a href="http://wpa.qq.com/msgrd?v=3&uin=112406836&site=qq&menu=yes" target="_blank">112406836</a></dd>
</li>
<li class="someRight">
<dt><i class="icon-bookmark"></i>Application. 应聘岗位</dt>
<dd>前端工程师</dd>
</li>
<li class="skill">
<dt><i class="icon-bookmark"></i>Tech. 技能点</dt>
<dd>
<div class="skill-name">JavaScript</div>
<div class="skill-bar-wrap">
<div class="skill-bar" style="width: 80%"></div>
</div>
</dd>
<dd>
<div class="skill-name">HTML</div>
<div class="skill-bar-wrap">
<div class="skill-bar" style="width: 75%"></div>
</div>
</dd>
<dd>
<div class="skill-name">CSS</div>
<div class="skill-bar-wrap">
<div class="skill-bar" style="width: 72%"></div>
</div>
</dd>
<dd>
<div class="skill-name">Photoshop</div>
<div class="skill-bar-wrap">
<div class="skill-bar" style="width: 70%"></div>
</div>
</dd>
<dd>
<div class="skill-name">Python</div>
<div class="skill-bar-wrap">
<div class="skill-bar" style="width: 50%"></div>
</div>
</dd>
</li>
</ul>
<div class="note">
<p>爱思考，爱搞怪，不爱放弃，一研究就上瘾的阳光小伙一枚。</p>
<br>
<p>我目前正在寻找前端工程师岗位，希望借此机会为贵司献上一点绵薄之力。</p>
</div>
</div>
<div class="main">
<ul class="main-info">
<li class="someRight">
<dt><i class="icon-bookmark"></i>Basic info. 基本信息</dt>
<dd><span>个人信息:</span> 董卫星 / 男 / 25岁 / 本科</dd>
<dd><span>Blog:</span> <a href="http://www.yuerxiao.com" target="_blank">www.yuerxiao.com</a></dd>
<dd><span>GitHub:</span> <a href="https://www.github.com/Zhouxingzu" target="_blank">www.github.com/Zhouxingzu</a></dd>
</li>
<li>
<dt><i class="icon-bookmark"></i>Experience. 项目与工作经验</dt>
<h3>泓盛环球定制旅行有限公司（2016.03 - 2017.03）</h3>
<ul class="exp">
<li>
<div class="circle"></div>
<h4>定制旅行官网项目</h4>
<p>参与公司官网的前端开发工作，根据功能需求和设计图完成项目的大部分样式，完成了首页、主题旅行、旅行达人、关于等页面，其中有轮播图、表单验证、达人报名等内容。并对网站进行SEO优化，关键词“重庆定制旅行”百度排名第一。</p>
<img src="img/hshqtour.jpg">
</li>
</ul>
<h3>个人项目</h3>
<ul class="exp">
<li>
<div class="circle"></div>
<h4>
鱼儿小 个人博客（2014.10 - 至今）
<a href="http://www.yuerxiao.com" target="_blank"><i class="icon-link"></i>Demo</a>
</h4>
<p>Wordpress主题修改，内容维护，用于记录生活趣事以及创作小故事。</p>
<img src="img/yuerxiao.png">
</li>
<li>
<div class="circle"></div>
<h4>
百度IFE前端技术学院课程（2017.03 - 2017.04）
<a href="https://github.com/Zhouxingzu/Baidu-IFE2017" target="_blank"><i class="icon-link"></i>源代码</a>
</h4>
<p>学习百度IFE前端技术学院2017春季班课程，并独立完成其中的任务。一些demo如下：</p>
<br>
<ul class="efe">
<li>
<h5>
耀耀学院 Task5
<a href="https://github.com/Zhouxingzu/Baidu-IFE2017/tree/master/Yaoyao_college/demo5" target="_blank"><i class="icon-link"></i>源代码</a>
<a href="https://zhouxingzu.github.io/Baidu-IFE2017/Yaoyao_college/demo5/demo5.html" target="_blank"><i class="icon-link"></i>Demo</a>
</h5>
<p>实现了一个类似贪食蛇的游戏，点击相应按钮进行旋转、前进、翻转等动作。使用HTML5的Canvas进行图形绘制，通过CSS3的rotate进行旋转动画。</p>
<img src="img/task5.png">
</li>
<li>
<h5>耀耀学院 Task7
<a href="https://github.com/Zhouxingzu/Baidu-IFE2017/tree/master/Yaoyao_college/demo7" target="_blank"><i class="icon-link"></i>源代码</a>
<a href="https://zhouxingzu.github.io/Baidu-IFE2017/Yaoyao_college/demo7/demo7.html"><i class="icon-link"></i>Demo</a>
</h5>
<p>实现一个支持列排序的表格组件，提供生成表格的接口。</p>
<p>提供点击排序按钮后的响应接口，并提供默认的排序方法，点击排序按钮按从大到小排序，再次点击倒序排列，并更新表格中的数据显示。</p>
<img src="img/sort.png">
</li>
</ul>
</li>
<li>
<div class="circle"></div>
<h4>
轮播图插件
<a href="https://github.com/Zhouxingzu/Online-retailers" target="_blank"><i class="icon-link"></i>源代码</a>
<a href="https://zhouxingzu.github.io/Online-retailers/" target="_blank"><i class="icon-link"></i>Demo</a>
</h4>
<p>使用原生JS编写的一个电商头部页面，包括轮播图和侧边栏菜单。</p>
<img src="img/lunbo.png">
</li>
<li>
<div class="circle"></div>
<h4>
web项目：静态效果页和JavaScript交互效果
<a href="https://github.com/Zhouxingzu/Practice-Demo" target="_blank"><i class="icon-link"></i>源代码</a>
<a href="https://zhouxingzu.github.io/Practice-Demo/" target="_blank"><i class="icon-link"></i>Demo</a>
</h4>
<p>使用HTML5+CSS3编写的页面，宽度自适应，兼容各种主流浏览器。用JS实现当页面滑到相应位置加载CSS3动画、导航条双向绑定、滑动门效果。</p>
<img src="img/h5demo.png">
</li>
</ul>
</li>
<li>
<dt><i class="icon-bookmark"></i>Skill. 技能清单</dt>
<h3>Web前端</h3>
<ul class="exp">
<li>
<div class="circle"></div>
<h4>HTML / CSS</h4>
<p>能够编写语义化的 HTML，模块化的 CSS，完成较复杂的布局</p>
<p>熟悉HTML5和CSS3，对浏览器兼容有一定认识</p>
<p>熟悉 Less / Sass / Autoprefixer 等CSS预处理和后处理方法、工具</p>
</li>
<li>
<div class="circle"></div>
<h4>JavaScript</h4>
<p>熟悉原生Javascript，能脱离jQuery等类库编码</p>
<p>能运用模块化、面向对象的方式编程</p>
<p>了解 Vue.js 的使用</p>
</li>
<li>
<div class="circle"></div>
<h4>其他</h4>
<p>熟悉Github版本管理，Grunt Gulp 前端自动化工具</p>
<p>了解前端安全、性能优化方面的一些知识</p>
</li>
</ul>
<h3>其他</h3>
<ul class="exp">
<li>
<p>一个有故事的人，把编程当成艺术来创作</p>
<p>严重强迫症，不能忍受界面一个像素的偏差，同样不能忍受代码格式一个空格的偏差</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
<footer>
</footer>
</body>
</html>