-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
366 lines (337 loc) · 13.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
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
365
366
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fiona|myBlog</title>
<link rel="stylesheet" type="text/css" href="./css/indexStyle.css">
<script type="text/javascript" src="./script/loading.js"></script>
</head>
<body>
<div class="content">
<div class="navigation" id="navigation">
<ul class="nav">
<li class="nav_txt" id="myHome">
<span>我的主页</span>
<img src="./images/home.png" alt="我的主页" class="img">
</li>
<li class="nav_txt" id="myInfo">
<span>个人信息</span>
<img src="./images/me.png" alt="个人信息" class="img">
</li>
<li class="nav_txt" id="myPhoto">
<span>我的相册</span>
<img src="./images/pic.png" alt="我的相册" class="img">
</li>
<li class="nav_txt" id="myNodes">
<span>我的随笔</span>
<img src="./images/note.png" alt="我的随笔" class="img">
</li>
<li class="nav_txt" id="myWebsite">
<span>我的临摹网站</span>
<img src="./images/vedio.png" alt="我的临摹网站" class="img">
</li>
<li class="nav_txt" id="myWork">
<span>我的工作经历</span>
<img src="./images/file.png" alt="我的工作经历" class="img">
</li>
<li class="nav_txt" id="myGame">
<span>我的游戏</span>
<img src="./images/fly.png" alt="我的游戏" class="img">
</li>
</ul>
</div>
<div class="left_part" id="main_part">
<div class="blog_title">
From FIONA
<span class="title_tips">|my blog</span>
<a class="view-github" title="view-github" href="https://github.com/Fiona-SUN/MyPages"></a>
</div>
<ul class="description">
<li class="des_txt" id="myhome_des">
<span class="big_font">欢</span>迎来到我的个人主页,希望你会喜欢这里。<br>
我是一名<span class="big_font">前端</span>工程师<br>
偏执的喜欢<span class="big_font">平面</span>化设计
</li>
<li class="des_txt" id="myinfo_des">
我的名字叫<span class="big_font">fiona</span><br>
喜欢<span class="big_font">c</span>ss,
喜欢<span class="big_font">JS</span>。<br>
我不会P<span class="big_font">H</span>P,
可我是一个好前端。
</li>
<li class="des_txt" id="myphoto_des">
我有一条叫<span class="big_font">ivan</span>的狗<br>
比我<span class="big_font">上相</span>的多哦。
</li>
<li class="des_txt" id="mynote_des">
闲来<span class="big_font">无事</span>,喜欢写一些东西,
可惜最近一点也不<span class="big_font">闲</span>...<br>
<span class="big_font">喜欢</span>出去玩,
<span class="big_font">更喜欢</span>宅在家。
</li>
<li class="des_txt" id="mywebsite_des">
喜欢的<span class="big_font">主页</span>就要自己做一遍<br>
这个过程积累了很多的<span class="big_font">技巧</span><br>
这个网站就是临摹<span class="big_font">大神</span>的网站<br>
<span class="big_font">详细</span>请参见我的临摹网站。<br>
</li>
<li class="des_txt" id="mywork_des">
<span class="big_font">努力</span>工作。努力<span class="big_font">学习</span>。<br>
<span class="big_font">不是</span>最强。也要做到<span class="big_font">最好</span>。<br>
不想吃<span class="big_font">天鹅肉</span>的癞蛤蟆,
不是好<span class="big_font">癞蛤蟆</span>。
</li>
<li class="des_txt" id="mygame_des">
想到什么,就<span class="big_font">做</span>什么。<br>
<span class="big_font">当然</span>,前提是要有时间...
</li>
</ul>
</div>
<div class="info_part" id="info_part">
<div class="info_title">
<span>我的信息</span>
<a class="view-github" title="view-github" href="https://github.com/Fiona-SUN/MyPages"></a>
<div id="add_info" class="add_info">
<span>+</span>
<div class="add_list" id="add_list">
<input type="checkbox" name="add_list" id="add_base" class="fixed_add" checked>
<label for="add_base">基本信息</label> <br>
<input type="checkbox" name="add_list" id="add_edu" class="fixed_add" checked>
<label for="add_edu">教育背景</label> <br>
<input type="checkbox" name="add_list" id="add_skill" class="fixed_add" checked>
<label for="add_skill">专业技能</label> <br>
<input type="checkbox" name="add_list" id="add_project" class="fixed_add" checked>
<label for="add_project">项目开发经验</label> <br>
<input type="checkbox" name="add_list" id="add_prize" class="fixed_add" checked>
<label for="add_prize">所获荣誉</label> <br>
<input type="checkbox" name="add_list" id="add_hobby" class="fixed_add" checked>
<label for="add_hobby">个人特点</label> <br>
<input type="checkbox" name="add_" id="add_work" class="fixed_add" checked>
<label for="add_work">个人作品</label> <br>
</div>
</div>
</div>
<div class="info_body">
<div class="info_base">
<div class="base_title">
<span>基本信息</span>
<span class="del_info">×</span>
</div>
<table class="base_body">
<tr>
<td class="text1">姓名</td>
<td class="text2">fiona</td>
<td class="text1">性别</td>
<td class="text2">女</td>
</tr>
<tr>
<td class="text1">籍贯</td>
<td class="text2">广东惠东</td>
<td class="text1">名族</td>
<td class="text2">汉族</td>
</tr>
<tr>
<td class="text1 eng">QQ</td>
<td class="text2">312105128</td>
<td class="text1">邮箱</td>
<td class="text2">fionasun3121@gmail.com</td>
</tr>
</table>
</div>
<div class="info_base">
<div class="base_title">
<span>教育背景</span>
<span class="del_info">×</span>
</div>
<table class="base_body">
<tr>
<td class="text3">2013.9——至今</td>
<td class="text3">福建师范大学</td>
<td class="text3">软件工程</td>
<td class="text3">本科</td>
</tr>
<tr>
<td></td>
<td colspan="3" class="text4">
优秀课程(平均90+):网页设计、c++面向对象程序设计、离散数学、数据结构与算法、计算机网络、系统分析与设计、Java面向对象程序设计
</td>
</tr>
</table>
</div>
<div class="info_base">
<div class="base_title">
<span>专业技能</span>
<span class="del_info">×</span>
</div>
<table class="base_body">
<tr>
<td class="text5"></td>
<td class="text4">
• 熟悉HTML、CSS、JavaScript、HTML5、CSS3,有良好的编码风格 <br>
• 熟悉XHTML+CSS布局、响应式布局、Ajax、JQuery、BootStrap、JSON<br>
• 了解nodejs、express框架,jade模板引擎 <br>
• 熟悉使用Git进行版本控制,能够使用Photoshop对图片进行处理 <br>
• 熟悉使用正则表达式 <br>
• 后台语言了解JAVA开发、了解前后端交互、了解设计模式 <br>
• 熟悉使用Sublime、WebStormB、Atom编译器、Firebug调试工具 <br>
• 能解决各大主流浏览器的兼容问题、了解web标准 <br>
• 解决问题的能力比较强、可以阅读基本的英语文档和文献 <br>
</td>
</tr>
</table>
</div>
<div class="info_base">
<div class="base_title">
<span>项目开发经验</span>
<span class="del_info">×</span>
</div>
<table class="base_body">
<tr>
<td class="text5">健康学习教育平台</td>
<td class="text4">
• 本项目是一个校企合作项目,主要的角色有:学生、教师、管理员, <br>
主要的功能有: <br>
管理员分配测试(共18套测试),学生进行在线测评,教师可进行行试卷的维护、测试结果的查看以及可视化的图文分析(highcharts工具),可查看学生测评履历,管理员对教师的维护,各角色信息的修改。
</td>
</tr>
<tr>
<td class="text5">前端技术</td>
<td class="text4">
• 本项目前端使用JQuery库、Ajax开发、部分媒体查询技术,使用Git做版本控制。注重兼容各大主流浏览器。
</td>
</tr>
<tr>
<td class="text5">项目职责</td>
<td class="text4">
• 分析业务流程,设计用例图、类图,原型设计,前端开发,和后端进行交互,项目演示。
</td>
</tr>
</table>
</div>
<div class="info_base">
<div class="base_title">
<span>所获荣誉</span>
<span class="del_info">×</span>
</div>
<table class="base_body">
<tr>
<td class="text5">2014.10</td>
<td class="text4">
• 荣获“优秀学生干事”荣誉称号,荣获“二等奖学金”
</td>
</tr>
<tr>
<td class="text5">2015.04</td>
<td class="text4">
• 英语四级证书
</td>
</tr>
<tr>
<td class="text5">2015.10</td>
<td class="text4">
• 荣获“学习先进个人”、“优秀共青团员”荣誉称号、“三等奖学金”
</td>
</tr>
<tr>
<td class="text5">2016.10</td>
<td class="text4">
• 荣获“学习先进个人”、“三等奖学金”
</td>
</tr>
</table>
</div>
<div class="info_base">
<div class="base_title">
<span>个人特点</span>
<span class="del_info">×</span>
</div>
<table class="base_body">
<tr>
<td class="text5"></td>
<td class="text4">
学习能力强,对新鲜事物始终保持好奇以及求知欲。对新兴知识的接受能力强。 <br>
对前端技术发自内心的喜欢,对编码格式和规范要求严格(强迫症),热爱技术。 <br> 善于沟通,乐观自信,做事积极,性格开朗活泼,待人热情,良好语言表达能力。 <br>有一定的抗压能力,能适应一定的工作强度,愿意挑战困难的事物。 <br>
</td>
</tr>
</table>
</div>
<div class="info_base">
<div class="base_title">
<span>个人作品</span>
<span class="del_info">×</span>
</div>
<table class="base_body">
<tr>
<td class="text5"></td>
<td class="text4">
• 代表作品IP地址:<a href="http://120.25.249.29:8080/PsyTest">http://120.25.249.29:8080/PsyTest</a>(登录不了,已交由企业管理) <br>
• 其他作品:请见<a href="https://github.com/Fiona-SUN"> 我的github</a> <br>
• 技术博客:<a href="http://www.cnblogs.com/adelina-blog/">http://www.cnblogs.com/adelina-blog/</a> <br>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="webSite_part" id="webSite_part">
<div class="webSite">
<div class="web_front">
<div class="web_img">
<img src="./images/web_01.jpg" alt="临摹网站">
</div>
<div class="web_btn">
<button class="web_introduce">简介</button>
<a class="web_view" href="https://github.com/Fiona-SUN/LosPages/tree/gh-pages">查看源代码</a>
<a class="web_compare" href="http://www.hellola.cn/">对比原网站</a>
<a class="web_open" href="https://fiona-sun.github.io/LosPages/index.html">打开</a>
</div>
</div>
<div class="web_back">
<h3>helloLA</h3>
<p>这是洛杉矶旅游局的中文官网,全部分为六个模块,仅仅对此单页做了临摹,除图片出自本网站外,其余代码均为自己编写,由于当时还没有涉猎过多的css3的东西,所以所有动画效果均为jquery编写。</p>
<button class="web_return">返回</button>
</div>
</div>
<div class="webSite">
<div class="web_front">
<div class="web_img">
<img src="./images/web_02.jpg" alt="临摹网站">
</div>
<div class="web_btn">
<button class="web_introduce">简介</button>
<a class="web_view">查看源代码</a>
<a class="web_compare">对比原网站</a>
<a class="web_open">打开</a>
</div>
</div>
<div class="web_back">
<h3>the final four</h3>
<p>在网上找的国外优秀单页作品,大部分动画效果均用css3完成,原网站还是js应用较多。只选取了有特色的两个部分的三个相册进行临摹。字体为自己找的英文字体,与原网站可能有出入。</p>
<button class="web_return">返回</button>
</div>
</div>
<div class="webSite">
<div class="web_front">
<div class="web_img">
<img src="./images/web_03.jpg" alt="临摹网站">
</div>
<div class="web_btn">
<button class="web_introduce">简介</button>
<a class="web_view">查看源代码</a>
<a class="web_compare">对比原网站</a>
<a class="web_open">打开</a>
</div>
</div>
<div class="web_back">
<h3>more hazards</h3>
<p>在网上找的国外优秀单页作品,音频文件的载入应用html5。最原网站的唱片旋转做了优化,原网站只是固定转一定时间,并且用的ease的曲线,效果不是很好。音乐竟然要付费下载的···我选取了班得瑞的几首顶替。整体依旧大部分采用css3。</p>
<button class="web_return">返回</button>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<script type="text/javascript" src="./script/indexScript.js"></script>
<script type="text/javascript" src="./script/functionScript.js"></script>
</body>
</html>