-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·445 lines (389 loc) · 19.7 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
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
<!DOCTYPE HTML>
<html>
<head>
<title>Shi Yin | a coder, a gamer & an experiencer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="joysword website, portfolio and blog">
<meta name="author" content="Shi Yin" >
<meta name="keywords" content="joysword, Shi Yin, Shi, Yin, personal website, portfolio, games, blog, Video Games, Jekyll, Bootstrap, Font Awesome" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/syntax.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<a class="navbar-btn" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars fa-fw"></i>
</a>
<!-- <div id="logo"> <a href="/"><img src="img/logo.svg" alt="logo" /></a> </div> -->
<nav id="nav" class="navigation" role="navigation">
<ul class="unstyled">
<li class="active" data-section="1"><i class="fa fa-home fa-fw"></i> <span>Home</span></li>
<li data-section="2" class=""><i class="fa fa-user fa-fw"></i> <span>About</span></li>
<li data-section="3" class=""><i class="fa fa-laptop fa-fw"></i> <span>Projects</span></li>
<li data-section="4" class=""><i class="fa fa-gamepad fa-fw"></i> <span>Games</span></li>
<li data-section="5" class=""><i class="fa fa-pencil fa-fw"></i> <span>Blog</span></li>
</ul>
</nav><!-- /nav -->
</div><!-- /sidebar -->
<div id="container">
<section class="section" id="section1" data-section="1">
<div class="container">
<!--<div class="row title">
<div class="col-md-6">
<h2>Hello There!</h2>
</div>
<div class="col-md-6 hidden-xs">
<hr>
</div>
</div><!-- /row -->
<!--<div class="row content">
<div class="col-md-3">
<p><a href="#section2"<i class="fa fa-user fa-fw fa-lg"></a></p>
<h3>Who I am?</h3>
</div>
<div class="col-md-3">
<p><a href="#section3"><img src="img/thumb.jpg" width="160px" class="img-circle" alt="a coder"></a></p>
<h3>a coder</h3>
</div>
<div class="col-md-3">
<p><a href="#section4"><img src="img/thumb.jpg" width="160px" class="img-circle" alt="a gamer"></a></p>
<h3>a gamer</h3>
</div>
<div class="col-md-3">
<p><a href="#section5"><img src="img/thumb.jpg" width="160px" class="img-circle" alt="an experiencer"></a></p>
<h3>an experiencer</h3>
</div>
</div>-->
<!--<div class="row">
<div class="col-md-6 intro">
<h3><ul><li>I am </li><li>a PhD student</li><li>a Coder</li><li>a Gamer</li><li>an Experiencer</li></h3>
</div>
<div class="col-md-6 intro avatar"><p><img src="img/avatar.png" class="img-circle"></p></div>
</div>-->
<div class="row intro">
<div class="col-md-8">
<hgroup>
<h1>Hello There!</h1>
<h3>I am a recent Masters graduate, a Coder, a Gamer, and an Experiencer.</h3>
</hgroup>
<button class="btn-inverse" data-section="2">
Learn More
<i class="fa fa-arrow-circle-down"></i>
</button>
</div>
<div class="col-md-4 avatar"><p><img src="img/avatar.png" class="img-circle"></p></div>
</div>
</div><!-- /container -->
</section><!-- /section -->
<section class="section" id="section2" data-section="2">
<div class="container">
<div class="row title">
<div class="col-md-5">
<h2>About Me</h2>
</div><!-- /span5 -->
<div class="col-md-7 hidden-xs">
<hr>
</div><!-- /span7 -->
</div><!-- /row -->
<div class="row desc">
<div class="col-md-8 content">
<p>My name is Shi Yin.</p>
<p>I'm a recent M.S. graduate in Computer Science at the University of Illinois at Chicago.</p>
<p>Before transferring to Master's program, I have conducted post-graduate research at <a href="http://www.evl.uic.edu" target="_blank">Electronic Visualization Laboratory</a> for multiple years under supervision of <a href="http://www.evl.uic.edu/aej/" target="_blank">Prof. Andrew Johnson</a>.</p>
<p>Topics of my research ranged from Virtual Reality, Spatio-temporal Data Visualization and Large High-Resolution Displays.</p>
<p>I also worked on data-driven projects in various areas such as urban planning, transportation analysis and social media analysis, with major focuses on web-based visualization and visual analytics systems.</p>
<hr>
<p>Before coming to the U.S., I received my Bachelor's Degree in Information and Computation Science at <a = href="http://www.uestc.edu.cn" target="_blank">University of Electronic Science and Technology of China</a>.</p>
<hr>
<p>In personal life, my largest interest lies in playing video games. I also play sports, watch movies, read books, and experience anything good (and bad sometimes) in the world.</p>
<hr>
<p>my website in its previous version: <a href="/v2012/">2012</a></p>
</div><!-- /span8 -->
</div><!-- /row -->
<!--<div class="row desc">
<div class="col-md-1"></div>
<div class="col-md-10">
<p>殷实（1988-），字履诚，又字思诚（语出《孟子》：“诚者，天之道也；思诚者，人之道也”）。徐州广陵（今江苏扬州）人，典型射手座。文效诸葛，武仿岳飞，与其两位发小合称为“三大愣种”。民国九十六年（公元2007年）毕业于江苏省扬州中学。同年入蜀，求学于清水河畔，时年18岁。时值国家内忧不绝外患不断，立誓尽忠为民，鞠躬尽瘁。民国一百年（2011年）远赴美利坚求学，心系天下，志存高远，以弘扬大汉文化，复兴华夏文明为己任。曾在灌水界享有崇高地位。又好观赏电影，以快进为耻，还好电子游戏，正宗伪职业玩家，虚拟世界受虐狂。</p>
<p>现正力争成为伟大的骨灰业余玩家、哲学博士和爱国企业家。</p>
</div>
<div class="col-md-1"></div>
</div>-->
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4">
<p>read my blogs: <a href="http://blog.joysword.com">Chinese</a> | <a href="http://en.joysword.com/">English</a></p>
<p>
find me at: <a href="http://www.linkedin.com/in/syin8" title="LinkedIn" target="_blank"><i class="fa fa-linkedin-square"></i></a>
<a href="https://github.com/joysword" title="GitHub" target="_blank"><i class="fa fa-github-square"></i></a>
<a href="https://www.facebook.com/shi.yin.982" title="Facebook" target="_blank"><i class="fa fa-facebook-square"></i></a>
<a href="http://www.weibo.com/justlyn" title="Sina Weibo" target="_blank"><i class="fa fa-weibo"></i></a>
</p>
<p>email: syin8 a uic d edu (would stop working by the end of 2018)</p>
<hr>
</div><!-- /span4 -->
</div>
<div class="row content hidden-tablet">
</div><!-- /row -->
</div><!-- /container -->
</section><!-- /section -->
<section class="section" id="section3" data-section="3">
<div class="container">
<div class="row title">
<div class="col-md-4">
<h2>Projects</h2>
</div>
<div class="col-md-8 hidden-xs alt">
<hr>
</div>
</div>
<div class="row desc">
<div class="col-md-3"></div>
<div class="col-md-8">
<h5>My skill set includes and not limited to: Python (Pandas, Flask, etc.), HTML/CSS/JavaScript (jQuery, D3.js, React.js, etc.), Java, C#, C/C++, OpenGL/GLSL, Processing, SQL/NoSQL. For the list of my projects (besides this website), <a href="projects/">visit here</a></h5>
</div>
</div>
<div class="row content">
<div id="project-slide" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#project-slide" data-slide-to="0" class="active"></li>
<li data-target="#project-slide" data-slide-to="1"></li>
<li data-target="#project-slide" data-slide-to="2"></li>
<li data-target="#project-slide" data-slide-to="3"></li>
<li data-target="#project-slide" data-slide-to="4"></li>
<!--<li data-target="#project-slide" data-slide-to="5"></li>
<li data-target="#project-slide" data-slide-to="6"></li>
<li data-target="#project-slide" data-slide-to="7"></li>
<li data-target="#project-slide" data-slide-to="8"></li>
<li data-target="#project-slide" data-slide-to="9"></li>
<li data-target="#project-slide" data-slide-to="10"></li>
<li data-target="projects.html" data-slide-to="11"></li>-->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/projects/accessibility.png">
</div>
<div class="item">
<img src="img/projects/nurail.png">
</div>
<div class="item">
<img src="img/projects/cs424p2.png">
</div>
<div class="item">
<img src="img/projects/cs424p3.png">
</div>
<div class="item">
<img src="img/projects/cs424p4.jpg">
</div>
<!--<div class="item">
<img src="img/projects/cs424p1.png">
</div>
<div class="item">
<img src="img/projects/cs526p1.jpg">
</div>
<div class="item">
<img src="img/projects/cs526p2.png">
</div>
<div class="item">
<img src="img/projects/cs526p3.png">
</div>
<div class="item">
<img src="img/projects/cs422p1.png">
</div>
<div class="item">
<img src="img/projects/cs422p2.png">
</div>
<div class="item">
<img src="img/projects/cs525p1.png">
</div>
<div class="item">
<img src="img/projects/cs525p2.png">
</div>
<div class="item">
<img src="img/projects/cs525p3.png">
</div>-->
</div>
<!-- Controls -->
<a class="left carousel-control" href="#project-slide" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#project-slide" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!--<div class="row title">
<div class="col-md-4">
<h2>Projects</h2>
</div>
<div class="col-md-8 hidden-xs alt">
<hr>
</div>
</div>
<div class="row desc">
<div class="col-md-3"></div>
<div class="col-md-8">
<h5></h5>
</div>
</div>
<div class="row content">
<div class="col-md-3">
<h4>CAVE 2 Projects</h4>
<p></p>
<p><img src="img/projects/cs526p1.png" alt="Project 01"></p>
<div class="pull-right">
<a href="projects.html">Full List <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
<div class="col-md-3">
<h4>Visualization Projects</h4>
<p></p>
<p><img src="img/projects/cs424p3.png" alt="Project 02"></p>
<div class="pull-right">
<a href="projects.html">Full List <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
<div class="col-md-3">
<h4>User Interface Projects</h4>
<p></p>
<p><img src="img/projects/cs422p1.png" alt="Project 03"></p>
<div class="pull-right">
<a href="projects.html">Full List <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
<div class="col-md-3">
<h4>GPU projects</h4>
<p>CAVE 2 is a XXX</p>
<p><img src="img/projects/cs525p2.png" alt="Project 04"></p>
<div class="pull-right">
<a href="projects.html">Full List <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
</div><!-- /row -->
</div><!-- /container -->
</section><!-- /section -->
<section class="section" id="section4" data-section="4">
<div class="container">
<div class="row title">
<div class="col-md-4">
<h2>Games</h2>
</div><!-- /span4 -->
<div class="col-md-8 hidden-xs">
<hr>
</div><!-- /span8 -->
</div>
<div class="row desc">
<div class="col-md-3"></div>
<div class="col-md-8">
<h5>"I am a gamer. Not because I don't have a life, but because I choose to have many."</h5>
</div><!-- /span8 -->
</div><!-- /row -->
<div class="row content">
<div class="col-md-4 expand">
<h4>Playing</h4>
<p>Since the end of 2013, my focus has turned to playing games on my new Xbox One, but I keep playing on PC as well.<br>Games I am currently playing include <b>Grand Theft Auto V</b>, <b>Assassin's Creed: Syndicate</b>, and <b>The Witness</b>.
<div class="pull-right">
<a href="games.html">Full List <i class="fa fa-angle-double-right"></i></a>
</div>
</div><!-- /span4 -->
<div class="col-md-4 visible-desktop">
<h4>Played</h4>
<p>I started to play video games when I was 5 years old. We used <a href="http://en.wikipedia.org/wiki/DOS">DOS</a> at that time, so I barely remember the names of those games I played.<br>I played a variety of games, from AAA titles to indie games. <br>I played different type of games, FPS, RPG, action, sports, strategy, etc. <br>I played games from both West and East.</p>
<div class="pull-right">
<a href="games.html#section3">Full List <i class="fa fa-angle-double-right"></i></a>
</div>
</div><!-- /span4 -->
<div class="col-md-4 visible-desktop">
<h4>Multiplayer</h4>
<p>Playing with real people is a totally different experience from playing alone. I started playing multiplayer in 2009, after I purchased <b>Call of Duty Modern Warfare 2</b> from overseas. It was also the first time I knew the great <a href="http://store.steampowered.com">Steam</a>. It changed my life. <br>After I came to the U.S, I played <b>Battlefiled 3</b> until <b>DOTA 2</b>'s beta release.</p>
<div class="pull-right">
<a href="games.html#section4">Full List <i class="fa fa-angle-double-right"></i></a>
</div>
</div><!-- /span4 -->
</div><!-- /row -->
<div class="row content">
<div class="col-md-4">
<p><img src="img/steam.png" style="width:18px"> | Steam ID: <a href="http://steamcommunity.com/id/joysword" target="_blank">joysword</a></p>
<p><img src="img/xbox.png" style="width:18px"> | Xbox Live gamertag: <a href="https://live.xbox.com/en-US/Profile?gamertag=JustLyn" target="_blank">JustLyn</a></p>
<hr>
</div><!-- /span4 -->
<div class="col-md-8"></div>
</div>
</div><!-- /container -->
</section><!-- /section -->
<section class="section" id="section5" data-section="5">
<div class="container">
<div class="row title">
<div class="col-md-4">
<h2>Blog</h2>
</div><!-- /span4 -->
<div class="col-md-8 hidden-xs alt">
<hr>
</div><!-- /span8 -->
</div><!-- /row -->
<div class="row desc">
<div class="col-md-3"></div>
<div class="col-md-8">
I built a new blog at the beginning of 2014 using <a href="http://jekyllrb.com">Jekyll</a>, with the help of <a href="http://getbootstrap.com">bootstrap</a>. It helped me focus on the content (i.e. my writing), instead of other miscellaneous tasks needed to get things done when I was using the cumbersome <a href="http://wordpress.org">wordpress</a>.
</div><!-- /span8 -->
</div><!-- /row -->
<div class="row content">
<div class="col-md-6 expand">
<h4>Chinese Blog</h4>
<p>My Chinese blog focuses on a variety of subjects, my thought in midnights, my translation of interesting stuff, my memo of little tricks in life, etc.</p>
<p>Sep 24 2015 <a href="http://blog.joysword.com/posts/2015/09/vr101-3/">虚拟现实101 (III)</a></p>
<p>Jun 07 2015 <a href="http://blog.joysword.com/posts/2015/06/general-ming/">时未寒「明将军」系列</a></p>
<p>Aug 25 2013 <a href="http://blog.joysword.com/posts/2013/08/blue-eyes-and-red-eyes-problem/">“蓝眼睛和红眼睛”问题分析</a></p>
<p>Mar 14 2013 <a href="http://blog.joysword.com/posts/2013/03/mitbbs-baozi-capturer-released/">mitbbs包子自动抓取器完成了</a></p>
<p>Feb 18 2013 <a href="http://blog.joysword.com/posts/2013/02/CentOS-5-upgrading-python-2.4-to-2.7.3/">CentOS 5升级python版本(2.4->2.7.3)</a></p>
<div class="pull-right read-more">
<a href="http://blog.joysword.com" rel="external">Read More <i class="fa fa-angle-double-right"></i></a>
</div>
</div><!-- /span4 -->
<div class="col-md-6 visible-desktop">
<h4>English Blog</h4>
<p>I post technical stuff in my English blog. Articles include but not limited to summaries of research papers, technical tricks and memos, translations.</p>
<p>Mar 04 2016 <a href="http://en.joysword.com/posts/2016/03/setting_up_github_for_unity_projects/">Setting up Github (and Git LFS) for Unity projects</a></p>
<p>May 27 2015 <a href="http://en.joysword.com/posts/2015/05/configuring_geo_spatial_stack_on_amazon_linux/">Configuring a Geo-spatial Stack on Amazon Linux</a></p>
<p>Jan 01 2015 <a href="http://en.joysword.com/posts/2015/01/install_nginx_php_mysql_python_flask_on_amazon_ec2_linux/">Install Nginx PHP MySQL Python Flask on Amazon EC2 Linux AMI</a></p>
<p>Feb 13 2014 <a href="http://en.joysword.com/posts/2014/02/latex_support_for_jekyll_blog/">LaTeX Support for Jekyll Blog</a></p>
<div class="pull-right read-more">
<a href="http://en.joysword.com/" rel="external">Read More <i class="fa fa-angle-double-right"></i></a>
</div>
</div><!-- /span4 -->
</div><!-- /row -->
</div><!-- /container -->
</section>
<div id="footer">
<div class="container"
<div class="row">
<div class="col-md-12">
Copyright © 2014-2018 joysword.com
</div><!-- /span12 -->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /footer -->
</div><!-- /container -->
</div><!-- /wrapper -->
<!-- JAVASCRIPTS -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-43448447-4', 'joysword.com');
ga('send', 'pageview');
</script>
</body>
</html>