Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
389 lines (331 loc) · 15 KB
/
Copy pathindex.html
File metadata and controls
389 lines (331 loc) · 15 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
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
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>简历</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link rel="stylesheet" type="text/css" href="css/MetroJs.css">
<link type="text/css" rel="Stylesheet" href='css/jquery.metro.css' />
<link rel="stylesheet" type="text/css" href="css/vim-dark.css">
<script src="js/js.js"></script>
<script type="text/javascript" src="js/MetroJs.js"></script>
<script type="text/javascript" src='js/jquery.metro.js'></script>
<script type="text/javascript" src='js/jquery.snippet.js'></script>
<script type="text/javascript">
$(function(){
$(".live-tile, .flip-list").not(".exclude").liveTile({
frontIsRandom: false,
delay: 2000
});
$("div.metro-pivot").metroPivot();
$("#detail").toggle(function(){
$("#cursor").attr("src", "img/parent.png");
$("footer").animate({
height: "190"
});
}, function(){
$("#cursor").attr("src", "img/overflowdots.png");
$("footer").animate({
height: "50"
});
});
$(".page").click(function(){
$("#cursor").attr("src", "img/overflowdots.png");
$("footer").animate({
height: "50"
});
});
$(".code").snippet("ruby", {style:"vim-dark",collapse:false, box: "38", boxColor:"orange", boxFill:"black"});
});
function pivot_previous() { $("div.metro-pivot").data("controller").goToPrevious(); }
function pivot_next() { $("div.metro-pivot").data("controller").goToNext(); }
</script>
<style>
footer{
position: fixed;
height: 50px;
padding-top:5px;
position:fixed;
bottom:0px;
width:100%;
background-color: grey;
text-align: center;
}
body { font-family: Segoe UI; font-size: 12pt; background: #000; color: White; margin:0; overflow-y:scroll;}
div.page {max-width:1000px; margin:auto; overflow:hidden; margin-bottom:100px;}
h1 {font-size:40pt; font-weight:normal; margin:0; margin-bottom:-30px;}
h2 {font-size:30pt; font-weight:normal; margin:0;}
h3 {font-size:25pt; font-weight:normal; margin:0;}
h4 {font-size:20pt; font-weight:normal; margin:0;color: orange;}
.greeting{
margin-left: 220px;
}
.self{
margin-left: 220px;
padding: 5px;
}
.english-self{
margin-left: 15px;
}
.info{
margin-left: 220px;
}
.pivot-item{
margin-top: 20px;
}
.contact{
margin-top: 150px;
margin-left: 280px;
}
.self-main{
margin-top: 50px;
}
.more{
margin-left: 500px;
position: fixed;
}
.instruction{
color: black;
font-size: 10px;
}
.language{
color: black;
font-size: 20px;
margin-left:30px;
text-align:left;
padding: 5px;
}
.pe{
margin-top: 70px;
}
.code{
font-size: 8px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body accent='orange' theme='dark'>
<div class='page'>
<div class='metro-pivot'>
<div class='pivot-item'>
<h3>个人简介</h3>
<div class='self-main'>
<div id="tiles" class="blue">
<!-- Mango Flip List that triggers every 3 seconds -->
<div class="mango list-tile">
<span class="tile-title">照片</span>
<ul class="flip-list fourTiles" data-mode="flip-list" data-delay="500">
<li>
<div><img src="img/11.jpg" alt="1" /></div>
<div><img src="img/55.jpg" alt="1" /></div>
</li>
<li data-direction="horizontal">
<div><img src="img/22.jpg" alt="2" /></div>
<div><img src="img/66.jpg" alt="2" /></div>
</li>
<li>
<div><img src="img/33.jpg" alt="3" /></div>
<div><img src="img/77.jpg" alt="3" /></div>
</li>
<li>
<div><img src="img/44.jpg" alt="4" /></div>
<div><img src="img/88.jpg" alt="4" /></div>
</li>
</ul>
</div>
</div>
<div class='self'>
<ul>
<li>我叫<font style='color: orange; font-size: 20px'>丛腾</font>，现大四的学生，家乡是山东威海市</li>
<li>从大一开始自学java, 并多次带队做过几个作品，参加过几届比赛</li>
<li>一度对web开发原理痴迷，研究过java经典框架spring,struts2源代码，理解web开发原理</li>
<li>经朋友介绍,大三接触并喜欢上ruby语言，特别是强大的元编程</li>
<li>使用过sinatra, 熟悉rails开发，满足ruby/rails开发工程师招聘要求</li>
<li>有自己的github(github.com/congteng), bitbucket开发账号</li>
<li>相对熟悉前端html5, css(比较薄弱), js(熟练掌握)</li>
<li>喜欢前沿技术，尝试过nodejs(入门)</li>
<li>热爱开源，能够熟练使用linux/Mac OS X</li>
<li>喜欢apple，曾研究过IOS</li>
<li>喜欢英语，喜欢美剧，喜欢R&B(Brian Mcknight,Babyface,Jay Sean ...)</li>
<li>活跃在ruby-china(帐号congteng)</li>
<li>现于Yottaa公司实习</li>
</ul>
</div>
</div>
</div>
<div class='pivot-item'>
<h3>大学生活</h3>
<ul>
<h4>学习方面</h4>
<li>我从大一开始自学java，上学期主要学习java平台的基础api, 培养代码写作风格等等
大一下学期开始web方向的学习，从数据库oracle/mysql到jsp
大一暑假主要学习了javaweb方向的框架(s2sh)等
</li>
<br>
<li>大二上学期重点放在编程基础，学习了算法数据结构，23种设计模式等
下学期组建并带领团队做过几个项目，成型的有在线对接聊天，电影推荐的网站等</li>
<br>
<li>大三接触ruby,以及热门的框架Rails,Sinatra之类，很喜欢她们的开发方式的，所以还研究过元编程，对ruby的对象模型设计特别佩服
下学期主要在用rails做学校的项目，自己的创新项目等,也尝试做做IOS之类</li>
<li>大四在Yottaa公司实习</li>
<br>
<h4 >课余生活</h4>
<li>另外我比较注重健身与健康，每周有5天的傍晚时间我会去健身房进行肌肉训练，这对我很重要，能够让我有更多的精力学习更多东西，也为将来的工作打下身体的基础</li>
<br>
<li>我养了一只叫咪咪的小猫</li>
<br>
<h4>娱乐</h4>
<li>我的爱好比较广泛，其中最爱听音乐，看电影。小时候参加过音乐方面的学习，能弹钢琴,吉他等乐器,也很喜欢唱歌，也参加了一些比赛和晚会等</li>
</ul>
</div>
<div class='pivot-item'>
<h3>技术经验</h3>
<div>
<font style='color: orange'>语言</font>
<ul>
<li>C : 了解，自学过课本，没有实习经验</li>
<li>Java : 熟练，使用过2年多，有比较好的代码书写习惯</li>
<li>Ruby : 比较熟练，很喜欢这种书写优雅的语言，缺点是大部分时间用Ruby写Rails的项目，对语言本身提供的api熟练度不够，但是对元编程有过研究</li>
<li>Objective-c : 入门，可以做基本的app</li>
<li>Javascript : 熟练, 是用的不多但是最久的语言，学习过语言本身的特性，面向对象开发方式，熟练使用各种流行的js框架，了解过NodeJS</li>
<li>HTML : 比较熟练，因为是做网站的基础</li>
<li>CSS : 比较欠缺，对前台的技术掌握一般</li>
</ul>
</div>
<div>
<font style='color: orange'>方向</font>
<ul>
<li>mobile app : 因为自己的项目需要IPhone客户端，最近在尝试 IOS 方向的学习，基本可以开发App</li>
<li>web : 有多于两年半的开发经验，比较熟悉web app的结构，对传输协议稍有了解，了解前后台数据传输原理，理解AJAX等，对现有流行的开发框架都比较熟悉(struts2 springMVC RoR ...)
对web的很多领域都有了解，做过在线聊天系统，SNS社区，BBS论坛等；学习过应用层的搜索引擎技术(Lucence), 数据处理(推荐引擎)等web智能算法等
</li>
</ul>
</div>
<div>
<font style='color: orange'>数据库</font>
<ul>
关系型：
<li>oracle : 最早接触的数据库，从此开始学习sql语言，了解简单的数据库管理</li>
<li>mysql : 在有了Sql基础之上后比较容易学习的数据库，在此学习了数据库事务管理</li>
</ul>
<ul>
NOSQL：
<li>MongoDB : 自己的项目里选用的数据库，比较喜欢这种开发方式，比较快捷，但是对性能优化的问题还不太了解</li>
<li>Redis : 简单的使用过，是用来做类似 Google Suggest 的功能的，简单了解</li>
</ul>
</div>
<div>
<font style='color: orange'>其他</font>
<ul>
<li>数据结构与算法 : 了解，在学习Java时简单了解过，阅读过Java的Collection包中比较常用的数据结构的源代码(ArrayList, LinkedList ...)受益匪浅，对代码细节上的设计有一些理解</li>
<li>设计模式 : 比较熟悉23种设计模式，阅读过砖头书《java设计模式》，有重构代码的习惯</li>
</ul>
</div>
</div>
<div class='pivot-item'>
<h3>实际案例</h3>
<div class='code-area'>
下面这段代码是前段时间自己的项目中的一段比较喜欢的代码节选，<br/>
演示地址(<a href="http://tuoda-coach.herokuapp.com/home/plan">http://tuoda-coach.herokuapp.com/home/plan</a>),<br/>
项目源码见(<a href="https://github.com/congteng/qasocial">https://github.com/congteng/qasocial</a>)
，<br>这段代码实现的功能简单说是递归为树结构增加树叶和字节点,可以用在评论等功能上，主要通过Rails中的Helper利用递归实现工具方法,而且该方法经重构后复用性很高.<br>
不足之处是应该使用 content_tag 来组装html
<pre class='code'>
def recurse boards, html, with_button, with_bars
html << "<ul>"
boards.each do |board|
html << "<li><span class='label label-warning'>\
<a href='/users/#{board.user.id}/boards/#{board.id}'>#{board.name}</a></span>"
if with_button
html << "<button class='addf' data-name='#{board.name}' data-id='#{board.id}'>增加功能列表</button>\
<button class='addb' data-name='#{board.name}' data-id='#{board.id}'>增加子模块</button>\
<button class='delb' data-id='#{board.id}' data-userid='#{board.user.id}'>删除</button>"
end
unless board.functionalities.empty?
html << "<ul>"
board.functionalities.each do |foo|
html << "<li><span id='label-#{foo.id}' class='label label-#{foo_color foo}'>\
<a href='/functionalities/#{foo.id}?user_id=#{foo.user.id}'>#{foo.say}</a></span>"
html << "<button class='delf' data-id='#{foo.id}' data-userid='#{foo.user.id}'>删除</button></li>" if with_button
html << "<div class='foo'>
<div class='progress progress-info progress-striped active'>\
<div class='bar' style='width: #{foo.progress}%;'></div>\
</div>\
<span class='progress_chooser'>\
<a data-val='0' data-id='#{foo.id}' data-userid='#{foo.user.id}'>0%</a> | \
<a data-val='20' data-id='#{foo.id}' data-userid='#{foo.user.id}'>20%</a> | \
<a data-val='40' data-id='#{foo.id}' data-userid='#{foo.user.id}'>40%</a> |\
<a data-val='60' data-id='#{foo.id}' data-userid='#{foo.user.id}'>60%</a> | \
<a data-val='80' data-id='#{foo.id}' data-userid='#{foo.user.id}'>80%</a> | \
<a data-val='100' data-id='#{foo.id}' data-userid='#{foo.user.id}'>100%</a>\
</span>\
</div>" if with_bars
end
html << "</ul>"
end
html << "</li>"
unless board.boards.empty?
recurse(board.boards, html, with_button, with_bars)
end
end
html << "</ul>"
end
</pre>
</div>
</div>
<div class='pivot-item'>
<h3>项目与经验</h3>
<div class='pe'>
<ul>
<li>Github: <a href="https://github.com/congteng">congteng.github.com</a></li>
<li>Bitbucket: <a href="https://bitbucket.org/congteng">bitbucket.org/congteng</a></li>
<li>博客: <a href="http://congteng.iteye.com">congteng.iteye.com</a></li>
<li>Ruby-China: <a href="http://ruby-china.org/users/congteng">congteng</a></li>
<br>
在线演示:
<li>豆兜儿在线聊天: <a href="http://randchat.cloudfoundry.com/">http://randchat.cloudfoundry.com/</a></li>
<li>阿狸圣诞礼物: <a href="http://alieternity.cloudfoundry.com/">http://alieternity.cloudfoundry.com/</a></li>
<li>张孝祥老师悼念站: <a href="http://zxx.herokuapp.com/">http://zxx.herokuapp.com/</a></li>
<li>济宁医学院Q&A(开发中)<a href="http://tuoda-coach.herokuapp.com/">http://tuoda-coach.herokuapp.com/</a></li>
(上线项目很少，以上项目均开源并托管在github)
</ul>
</div>
</div>
<div class='pivot-item'>
<h3>联系方式</h3>
<div class='contact'>
<ul>
<li><font style='color: orange'>手机</font> : 15311303916</li>
<li><font style='color: orange'>Gmail</font> : congteng45@gmail.com | teng.cong@yottaa.com</li>
<li><font style='color: orange'>Twitter</font> : congteng</li>
<li><font style='color: orange'>QQ</font> : 148095943</li>
<li><font style='color: orange'>Github</font> : congteng | teng.cong</li>
</ul>
</div>
</div>
</div>
</div>
<footer>
<span class='foos'>
<a href='javascript:pivot_previous();' class='left-pivot'><img src="img/back.png"></a>
<a href='javascript:pivot_next();' class='right-pivot'><img src="img/next.png"></a>
</span>
<span class='more'>
<a id='detail'><img id='cursor' src="img/overflowdots.png"></a>
</span>
<br>
<span class='instruction'>
上一页 下一页
</span>
<div class='language'>
<a href="index-en.html" style='color: black;text-decoration:none;'>English</a><br><br>
</div>
</footer>
</body>
</html>