-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
260 lines (260 loc) · 11.1 KB
/
index.html
File metadata and controls
260 lines (260 loc) · 11.1 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Fifthwolf's Personal Website</title>
<link rel="stylesheet" type="text/css" href="public.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css" />
</head>
<body>
<div id="start">
<div class="head">
<div class="content">
<div class="avatar">
<div class="image-border"></div>
<div class="image"></div>
</div>
<span>夏 磊</span>
<ul>
<li><a href="https://github.com/Fifthwolf" target= "_blank">Github</a></li>
<li>QQ</li>
<li>WeChat</li>
</ul>
</div>
</div>
<div class="go">
<span>GO</span>
</div>
<div class="foot">
<span class="title">DoubleStone is Studying...</span>
<span class="content">Learning from 22 Dec,2016</span>
</div>
</div>
<div id="main">
<div class="left">
<div class="avatar">
<div class="image-border"></div>
<div class="image"></div>
</div>
<ul class="own">
<li><a href="#resume"><i class="fa fa-file-o"></i>Resume</a></li>
<li><a href="#demo"><i class="fa fa-magnet"></i>DEMO</a></li>
<li><a href="#project"><i class="fa fa-camera-retro"></i>Project</a></li>
</ul>
<ul class="link">
<li><a href="http://blog.sina.com.cn/5wolfs" target= "_blank"><i class="fa fa-desktop"></i>SINA BLOG</a></li>
<li><a href="blog" target="_blank"><i class="fa fa-asterisk"></i>Custom BLOG</a></li>
</ul>
</div>
<div class="right">
<div id="resume">
<h2>夏磊</h2>
<h4>基本信息</h4>
<p>
<span>25岁</span>
<span>汉族</span>
<span>西安市</span>
</p>
<p>
<span>TEL: 176-9119-7357</span>
<span>E-mail: xialei19930102@163.com</span>
</p>
<h4>职业技能</h4>
<p>1. 掌握DIV+CSS布局、掌握flex布局，掌握HTML5、CSS3，熟练应用Canvas/SVG技术；</p>
<p>2. 熟悉JS、jQuery，能够熟练手写原生JS代码及实现多种动画交互效果；熟悉Ajax页面信息异步调用技术；熟悉面向对象开发；熟悉Vue全家桶、angularJS；</p>
<p>3. 熟悉webpack、gulp等常用构建工具；</p>
<p>4. 熟悉PHP、python、MySQL常用数据交互方法，能够完成前端页面与后台数据交互对接；</p>
<p>5. 熟悉Bootstrap，可以参考手册快速上手；熟悉SCSS样式预处理；</p>
<p>6. 了解GIT分布式版本控制系统；</p>
<p>7. 了解linux的基础操作、了解数据结构；</p>
<p>8. 熟练使用PhotoShop进行页面作图美化、页面切图，对用户体验、交互、视觉有一定见解。</p>
<h4>求职意向</h4>
<span>Web前端开发</span>
<h4>学习经历</h4>
<p>2011-2015年于华北电力大学本科就读，毕业后于某大型国企工作，2016年年底至今自学Web前端。</p>
<h4>自我评价</h4>
<p>能根据公司要求制定活动方案，并确保活动的良好执行；</p>
<p>具备良好的沟通能力和团队协作能力，能快速融入团队；</p>
<p>性格开朗，有较强的专注力和执行力，吃苦耐劳。</p>
</div>
<div id="demo">
<h2>DEMO</h2>
<ul>
<li class="demo-item">
<a href="demo/digitaClock.html">
<img src='image/empty.png' data-src="image/digitaClock.png" alt="">
<h4>canvas数码时钟</h4>
<span class="describe">使用canvas实现点阵式时钟效果</span>
</a>
</li>
<li class="demo-item">
<a href="demo/rotateCube.html">
<img src='image/empty.png' data-src="image/rotateCube.png" alt="">
<h4>CSS3旋转方块</h4>
<span class="describe">使用CSS3动画功能实现自动旋转的立方体</span>
</a>
</li>
<li class="demo-item">
<a href="demo/flappyBird.html">
<img src='image/empty.png' data-src="image/flappyBird.png" alt="">
<h4>flappyBird</h4>
<span class="describe">让小鸟顺利通过这些管道，坚持久一些，比比谁的分数高！</span>
</a>
</li>
<li class="demo-item">
<a href="demo/gobang.html">
<img src='image/empty.png' data-src="image/gobang.png" alt="">
<h4>五子棋</h4>
<span class="describe">双方分别使用黑白两色的棋子，下在棋盘直线与横线的交叉点上，先形成5子连线者获胜</span>
</a>
</li>
<li class="demo-item">
<a href="demo/tetris.html">
<img src='image/empty.png' data-src="image/tetris.png" alt="">
<h4>俄罗斯方块</h4>
<span class="describe">移动、旋转和摆放游戏自动输出的各种方块，使之排列成完整的一行或多行并且消除得分</span>
</a>
</li>
<li class="demo-item">
<a href="demo/canvasClock.html">
<img src='image/empty.png' data-src="image/canvasClock.png" alt="">
<h4>canvas钟表</h4>
<span class="describe">实现原理与SVG基本相同，绘制方法采用canvas</span>
</a>
</li>
<li class="demo-item">
<a href="demo/retroSnaker.html">
<img src='image/empty.png' data-src="image/retroSnaker.png" alt="">
<h4>贪吃蛇</h4>
<span class="describe">一款经典的益智游戏，通过控制蛇头方向吃蛋，从而使得蛇变得越来越长</span>
</a>
</li>
<li class="demo-item">
<a href="demo/mineSweeper.html">
<img src='image/empty.png' data-src="image/mineSweeper.png" alt="">
<h4>扫雷</h4>
<span class="describe">Windows经典小游戏</span>
</a>
</li>
<li class="demo-item">
<a href="demo/linkUp.html">
<img src='image/empty.png' data-src="image/linkUp.png" alt="">
<h4>连连看</h4>
<span class="describe">尝试制作连连看</span>
</a>
</li>
<li class="demo-item">
<a href="demo/2048.html">
<img src='image/empty.png' data-src="image/2048.png" alt="2048">
<h4>2048</h4>
<span class="describe">曾经风靡一时的小游戏</span>
</a>
</li>
<li class="demo-item">
<a href="demo/elevatorSimulation.html">
<img src='image/empty.png' data-src="image/elevatorSimulation.png" alt="模拟电梯运行">
<h4>模拟电梯运行</h4>
<span class="describe">一个略显无聊的小游戏</span>
</a>
</li>
<li class="demo-item">
<a href="demo/SVGClock.html">
<img src='image/empty.png' data-src="image/SVGClock.png" alt="SVG钟表">
<h4>SVG钟表</h4>
<span class="describe">利用SVG制图制作实时钟表</span>
</a>
</li>
<li class="demo-item">
<a href="demo/colorCard.html">
<img src='image/empty.png' data-src="image/colorCard.png" alt="色卡">
<h4>色卡</h4>
<span class="describe">利用SCSS实现CSS预处理</span>
</a>
</li>
<li class="demo-item">
<a href="demo/lotterySimulation.html">
<img src='image/empty.png' data-src="image/lotterySimulation.png" alt="彩票模拟选号">
<h4>彩票模拟选号</h4>
<span class="describe">生成随机数及限定范围模拟号码选择</span>
</a>
</li>
<li class="demo-item">
<a href="demo/perpetualCalendar.html">
<img src='image/empty.png' data-src="image/perpetualCalendar.png" alt="万年历">
<h4>万年历</h4>
<span class="describe">利用JS实现一个简单的万年历制作</span>
</a>
</li>
<li class="demo-item">
<a href="demo/pictureClipping.html">
<img src='image/empty.png' data-src="image/pictureClipping.png" alt="图片剪裁与缩略图">
<h4>图片剪裁与缩略图</h4>
<span class="describe">实现类似于框选头像的效果</span>
</a>
</li>
</ul>
</div>
<div id="project">
<h2>Project</h2>
<h4>canvas-Game</h4>
<ul>
<li class="project-item">
<a href="project/canvas-arkanoid">
<img src='image/empty.png' data-src="image/arkanoid.png" alt="">
<div class="describe">
<h5>arkanoid</h5>
<span>使用canvas制作，打砖块游戏，使用A、D控制挡板的移动。</span>
</div>
</a>
</li>
<li class="project-item">
<a href="project/canvas-aircraftWar">
<img src='image/empty.png' data-src="image/aircraftWar.png" alt="">
<div class="describe">
<h5>aircraftWar</h5>
<span>使用canvas制作。一个简单的飞机大战小游戏，使用WASD控制方向。</span>
</div>
</a>
</li>
<li class="project-item">
<a href="project/canvas-monkeyJump">
<img src='image/empty.png' data-src="image/monkeyJump.png" alt="">
<div class="describe">
<h5>monkeyJump</h5>
<span>使用canvas制作。除背景外图片均手绘。尝试使用面向对象的方式制作。</span>
</div>
</a>
</li>
<li class="project-item">
<a href="project/canvas-tinyHeart">
<img src='image/empty.png' data-src="image/tinyHeart.png" alt="">
<div class="describe">
<h5>tinyHeart</h5>
<span>使用canvas制作。大鱼不断朝向光标位置移动，过程中可吃到水藻，并需不断给小鱼喂食，若一段时间未给小鱼则游戏结束。</span>
</div>
</a>
</li>
<li class="project-item">
<a href="project/canvas-FlappyBird">
<img src='image/empty.png' data-src="image/flappyBird.png" alt="">
<div class="describe">
<h5>flappyBird</h5>
<span>使用canvas制作。其中的图片使用网上搜索到的现成素材。主体利用setInterval函数不断刷新绘制。</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="icp-wrap">
<div class="icp">
<a href="http://www.beian.miit.gov.cn/">陕ICP备20000907号</a>
</div>
</div>
</body>
<script src="public.js"></script>
<script src="index.js"></script>
</html>