-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
415 lines (401 loc) · 21.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
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
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Steven Yan</title>
<link rel="shortcut icon" type="image/png" href="images/logo.jpg" />
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="author" content="Jun (Steven) Yan">
<meta name="description" content="Personal web portfolio to promote my work and gain exposure as a web developer">
<meta name="keywords" content="HTML,CSS,JavaScript,jQuery, Web Portfolio, Web Developer, Front-end Developer">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Sass/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="loader">
<div class="spinner"></div>
<h1 data-text="It's loading…">It's loading…</h1>
</div>
<nav id="navigation">
<img src="images/name.png">
<div id="navbarLinks">
<a class="hvr-grow-shadow active" id="nav0"><span class="glyphicon glyphicon-home icon"></span>WELCOME</a></li>
<a class="hvr-grow-shadow " id="nav1"><span class="glyphicon glyphicon-user icon"></span> ABOUT ME </a>
<a class="hvr-grow-shadow " id="nav2"><span class="glyphicon glyphicon-briefcase icon"></span>PROJECTS</a>
<a class="hvr-grow-shadow " id="nav3"><span class="glyphicon glyphicon-phone-alt icon"></span>CONTACT</a>
</div>
</nav>
<div class="page-footer"></div>
<div id="page0" class="page-container center-page">
<div id="logoContainer"> <img id="nameLogo" src="images/name.png"> </div>
<div id="intro_text">
<div class="content">
<div class="content__container">
<p class="content__container__text">
HELLO
</p>
<ul class="content__container__list">
<li class="content__container__list__item">World !</li>
<li class="content__container__list__item">Visitors!</li>
<li class="content__container__list__item">Internet!</li>
<li class="content__container__list__item">Everybody!</li>
</ul>
</div>
</div>
<h1> My Name is <span class="underline_keywords" id="steven">Steven</span></h1>
<h1> I live in <span class="underline_keywords" id="toronto">Toronto</span></h1>
<h1> I am a <span class="underline_keywords" id="soccer">Soccer</span> fan and A</h1>
<h1>
<div class="counter">
<span class="decor top"></span>
<span class="decor bottom"></span>
<span class="from top"><span></span><span class="shadow"></span></span>
<span class="from bottom"><span></span><span class="shadow"></span></span>
<span class="to top"><span></span><span class="shadow"></span></span>
<span class="to bottom"><span></span><span class="shadow"></span></span>
</div> <span id="developer">Developer</span>
</h1>
</div>
</div>
<div id="page1" class="page-container right-page">
<ul class="ch-grid">
<li class=" circle" id="circle0">
<div class="ch-item ch-img-1 active_timeline" >
<div class="ch-info">
<h3>Technical Skills</h3>
</div>
</div>
<h3 class="mobile_nav_circle active_timeline"><span class="glyphicon glyphicon-wrench icon"> </span> SKILLS</h3>
</li>
<li class=" circle" id="circle1">
<div class="ch-item ch-img-2 " >
<div class="ch-info">
<h3>CAREER GOALS</h3>
</div>
</div>
<h3 class="mobile_nav_circle"><span class="glyphicon glyphicon-star-empty icon"> </span>GOALS</h3>
</li>
<li class="circle" id="circle2">
<div class="ch-item ch-img-3 " >
<div class="ch-info">
<h3>Interests</h3>
</div>
</div>
<h3 class="mobile_nav_circle"><span class="glyphicon glyphicon-heart-empty icon"> </span>LIKES</h3>
</li>
<li class=" circle" id="circle3">
<div class="ch-item ch-img-4 " >
<div class="ch-info">
<h3>Education</h3>
</div>
</div>
<h3 class="mobile_nav_circle"><span class="glyphicon glyphicon-education icon"> </span>SCHOOL</h3>
</li>
</ul>
<div id="mainCont">
<div id="content0" class="page_slide center">
<div class="hover panel ">
<div class="front">
<img src="images/level1.png" />
<div class='skill_headers'>
<main>
<h1>Entry Level</h1>
<p> Previously touched on these technologies for academic and personal projects before, and thats it. <i>Experiene level: 0. </i></p>
</main>
<span class='glyphicon glyphicon-menu-right'></span>
</div>
</div>
<div class="back">
<div class="box2" >
<ul>
<li><span class='glyphicon glyphicon-ok'></span> PHP <span>3/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span> Python <span>3/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span> NodeJS <span>3/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>ExpressJS <span>2/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span> MongoDB <span>2/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span> LESS/SASS <span>1/10</span> </li>
<li><span class='glyphicon glyphicon-ok'></span>Erlang/Exlir <span>2/10</span></li>
</ul>
</div>
</div>
</div>
<div class="hover panel">
<div class="front">
<img src="http://nextlevelfunctionalnutrition.com/wp-content/uploads/2014/10/badge_2.png" />
<div class='skill_headers'>
<main>
<h1>Beginner </h1>
<p> Just started learning these frameworks, able to built simple projects with it. <i>Experience level: < 6 months.</i></p>
</main>
<span class='glyphicon glyphicon-menu-right'></span>
</div>
</div>
<div class="back">
<div class="box2" >
<ul>
<li><span class='glyphicon glyphicon-circle-arrow-right'></span> Spring Boot <span>4/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>Angular <span>5/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>Hibernate <span>5/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>Web Socket <span>5/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span> Perl <span>4/10</span></li>
<li><span class='glyphicon glyphicon-circle-arrow-right'></span>Multi-threading <span>6/10</span></li>
<li><span class='glyphicon glyphicon-circle-arrow-right'></span>Java EE <span>4/10</span></li>
</ul>
</div>
</div>
</div>
<div class="hover panel ">
<div class="front">
<img src="https://s-media-cache-ak0.pinimg.com/originals/7b/03/38/7b033819f9374c88e52a7903d7a7a9e4.png" />
<div class='skill_headers'>
<main>
<h1>Intermediate </h1>
<p> Good enough to solve most problems associate with these topics. <i>Experience level: around 2 years.</i></p>
</main>
<span class='glyphicon glyphicon-menu-right'></span>
</div>
</div>
<div class="back">
<div class="box2" >
<ul>
<li><span class='glyphicon glyphicon-ok'></span>C/C++ <span>5/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>Oracle database <span>6/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>Linux/Unix <span>6/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>jQuery <span>6/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>Algorithms <span>7/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>MySQL <span>7/10</span></li>
</ul>
</div>
</div>
</div>
<div class="hover panel ">
<div class="front">
<img src="http://zarfund-info.com/img/badge_4.png" />
<div class='skill_headers'>
<main>
<h1>Advanced </h1>
<p> Proficient to stand any test. <i>Experience level: more than 2 years.</i> </p>
</main>
<span class='glyphicon glyphicon-menu-right'></span>
</div>
</div>
<div class="back">
<div class="box2" >
<ul>
<li><span class='glyphicon glyphicon-circle-arrow-right'></span> Core Java <span>10/10</span></li>
<li><span class='glyphicon glyphicon-circle-arrow-right'></span>Socket Programming<span>10/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>HTML5 <span>9/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>CSS3 <span>9/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>OOP Design Patterns<span>8/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>JavaScript<span>8/10</span></li>
<li><span class='glyphicon glyphicon-ok'></span>Data Strucure <span>8/10</span></li>
</ul>
</div>
</div>
</div>
</div>
<div id="content1" class="page_slide right">
<ul class="timeline-events">
<li class="timeline-event-years">
<img src="http://displ.net/wp-content/uploads/2016/04/responsive.png" class="img img1"></img>
<h2>Next 5 Years</h2>
<h3>Web Development</h3>
<h4>Full Stack Web Developer </h4>
</li>
<li class="timeline-event-years">
<img src="https://crowdsourcedtesting.com/resources/wp-content/uploads/2016/01/DevOps-Gear.png" class="img img2"></img>
<h2>Next 10 Years</h2>
<h3>Software Development </h3>
<h4>DevOps Engineer</h4>
</li>
<li class="timeline-event-years">
<img src="https://uberflip.cdntwrk.com/files/aHViPTU5NTQzJmNtZD1pdGVtZWRpdG9yaW1hZ2UmZmlsZW5hbWU9aXRlbWVkaXRvcmltYWdlXzU3N2VhZmE3MmNkZDkucG5nJnZlcnNpb249MDAwMCZzaWc9NWU1YTc5NmU2NjQ0ZmQ2YzE5MzkzY2Y3MTU3ZjdlNTA%253D" class="img img3"></img>
<h2>Next 15 Years</h2>
<h3>Software Development </h3>
<h4>Solution Architect</h4>
</li>
<li class="timeline-event-years">
<img src="http://www.freeiconspng.com/uploads/3d-question-mark-icon-blue-color-picture-6.png" class="img img4"></img>
<h2>Next 20 Years</h2>
<h3>?????</h3>
<h4>I Don't know</h4>
</li>
</ul>
</div>
<div id="content2" class="page_slide right">
<div class="card" >
<div class="card__image" style="background-image: url(https://i.ytimg.com/vi/-157HBpPZ24/maxresdefault.jpg);"></div>
<h2 class="card__title">League of Legends</h2>
<p class="card__text">I have once tried to enter a LOL tournment representing Ryerson Unversity to compete in a national level(across North American), but failed to make the cut </p>
<div class="card__action-bar">
<button class="card__button">LOL! Never Gived Up</button>
</div>
</div>
<div class="card" >
<div class="card__image" style="background-image: url(http://mwmedvinsky.weebly.com/uploads/1/3/5/2/13526676/2097890.jpg)"></div>
<h2 class="card__title">K-Pop & Hit-Pop</h2>
<p class="card__text"> I like to listen to music to relax. My favorite song is Lose Yourself by Eminem. And recently I just got into K-Pop, my favorite KPop group is Girl's Generation and Big Bang</p>
<div class="card__action-bar">
<button class="card__button">BIG BANG is Awesome</button>
</div>
</div>
<div class="card" >
<div class="card__image" style="background-image: url(https://sarahsfate.files.wordpress.com/2011/04/beer_toast11.jpg?w=460)"></div>
<h2 class="card__title">Chill With Friends</h2>
<p class="card__text">I am an introvert who likes to sit home and play video games & watch movies on the weekends. However, I do enjoy occasional meet ups with friend and parties</p>
<div class="card__action-bar">
<button class="card__button">FOREVER 22! </button>
</div>
</div>
<div class="card" >
<div class="card__image" style="background-image: url(https://images.alphacoders.com/205/thumb-350-205913.jpg)"></div>
<h2 class="card__title">Anime</h2>
<p class="card__text">Anime is one of fews thing in this world that could make me cry. I also like animated movies as well, like Lion King, The Lego Movie, Finding Nemo, Toy Story series, etc...</p>
<div class="card__action-bar">
<button class="card__button">Naruto is THE BEST</button>
</div>
</div>
</div>
<div id="content3" class="page_slide right">
<h1>Ryerson University </h1>
<div class="school_content first_school_content">
<div class="info">
<h4>Academic Degree</h4>
<img class="school_icons" src="https://cdn1.iconfinder.com/data/icons/education-set-02/512/diploma-512.png">
<p>Bachelors of Science, Computer Science(Honours)</p>
</div>
</div>
<div class="school_content">
<div class="info">
<h4>My Experience</h4>
<img class="school_icons" src="https://cdn2.iconfinder.com/data/icons/communication-language/100/like_bubble-01-512.png" />
<p>
CS courses are mostly application/project based, and the curriculum is very flexible.
</p>
</div>
</div>
<div class="school_content" style="border-right: 0px">
<div class="info">
<h4>My Discovery</h4>
<img class="school_icons" src="https://cdn2.iconfinder.com/data/icons/business-office-4/256/Idea-512.png">
<p> I discovered a passion in web application development while studying here.
</p>
</div>
</div>
<div class="card_right__button">
<a href = "http://www.ryerson.ca/programs/undergraduate/computer-science/" target="_blank" >Learn More About The Program </a>
</div>
</div>
</div>
</div>
<div class="page-container right-page" id="page2" >
<section id="timeline">
<div class="tl-item" style="background-image: url(images/WeatherApp.png)">
<div class="tl-year">
<h1>Weather App</h1>
</div>
<div class="tl-content">
<p> This is a standard weather app compatible with all modern day browers. The core features of this web app: weather display and forecasting is implemented using HTML5, CSS3 and JavaScript. The weather data is retrieved from <a href="https://openweathermap.org/" target="_blank">OpenWeatherMap</a> using JavaScript AJAX with JSON.</p>
<h5>Responsive web design</h5>
<ul>
<li>top-down mobile first appoarch</li>
<li>utilizing CSS3 @media query to set breaking points for mobile phones, tablets, large and ultra large screens</li>
</ul>
<p>This web application is developed during my 4th year undergraduate study at <a href="http://www.ryerson.ca/programs/undergraduate/computer-science/" target="_blank">Ryerson University</a>, this app might be acceptable as a school project but as a software product, its still very amature. So, I am currently working on new feature such as auto complete search, Geolocation detection and adding CSS3 animation to its UI/UX. </p>
<p>This app is not currently on a live server, however the project is available on
<a href="https://github.com/RiceAndMeet/WeatherApp" target="_blank"> GitHub </a> for review, and I welcome any contributions and feedbacks </p>
</div>
</div>
<div class="tl-item" style="background-image: url(https://s-media-cache-ak0.pinimg.com/736x/92/8a/ba/928aba1b883bc82f1ef0d46f95b105de.jpg)">
<div class="tl-year">
<h1>Drawing App</h1>
</div>
<div class="tl-content">
<p> This is a personal side project that I have started a year ago, it was originally a desktop application written in Java by utilizing Swing GUI widget toolkits. But now, this app is written using JavaScript and Java Spring,consequently, the app has become more accessible and modernized in term of its GUI. </p>
<h5>Core Features</h5>
<ul>
<li>digital painting and image sharing</li>
<li>multi-user-real-time image editing</li>
</ul>
<h5>Core Technologies</h5>
<ul>
<li>HTML5 Canvas: the drawing panel</li>
<li>Web Socket: bi-directional communication between client and server </li>
<li>AJAX: communcation method for client when web socket is turned off </li>
</ul>
<p>Front-end: HTML5 Canvas, CSS3, Bootstrap 2, JavaScript (JSON with AJAX, web socket API, jQuery)</p>
<p>Back-end: Spring (Boot, web socket with STOMP, RESTful web service, Data JPA with Oracle) </p>
<p>Project is available for review on <a href="https://github.com/RiceAndMeet/DrawingApp" target="_blank">GitHub </a>, however, the application is currently not live due to my resource limitations </p>
</div>
</div>
<div class="tl-item" style="background-image: url(https://placeimg.com/800/800/nature)">
<div class="tl-year">
<h1>ePortfolio</h1>
</div>
<div class="tl-content">
<p>The purpose of this online portfolio is to promote my work and gain exposure as a web developer. The theme of this website is black and white, following the minialist design principle to kept everything clean and simple. </p>
<p>Core Technology: HTML5, CSS3 and JavaScript(jQuery)</p>
<p>I am still a noob in website design/front-end development, while doing this project, I went through works of other more experienced web designer, and I was stunned and inspired by some of their work. So I want to give them a shout out.
<ul>
<li><a href="https://www.befunky.com/features/photo-editor/" target="_blank">BeFunky</a>: an online phote editing app </li>
<li><a href="http://ianlunn.github.io/Hover/" target="_blank">Hover.css</a>: open source code for CSS3 animation </li>
<li><a href="https://logomakr.com/" target="_blank">LogoMakr</a>: Online logo making tool </li>
<li><a href="https://codepen.io/martingrand/" target="_blank">Martin Grand</a>: I like his idea of box shadow effect</a>
<li><a href="http://cihadturhan.com/" target="_blank">Cihad Turhan</a>: A stunning web portfolio, my inspiration to use CSS3 and jQuery animation for this project</li>
<li><a href="https://codepen.io/jeffglenn/pen/KNYoKa" target="_blank">Jeff Glenn</a>: I was inspired by his work on timeline</li>
</ul>
</p>
</div>
</div>
<div class="tl-item" style="background-image: url(https://s-media-cache-ak0.pinimg.com/originals/c0/11/73/c0117313a1755cba6cf83ab43225147b.jpg)">
<div class="tl-year">
<h1>Randomizer</h1>
</div>
<div class="tl-content">
<p>An Website that displays an random YouTube Video that is currently trending and offers an advance search feature that enables user to search videos base on attribute such as likes, dislikes, view counts and cateogry. <a href="http://randomyoutube.ca-central-1.elasticbeanstalk.com/" target="_blank">Enter</a> website. </a></p>
<p>This website is a final course project for <a href="http://www.ryerson.ca/calendar/2017-2018/courses/computer-science/CPS/630/" target="_blank">Web Application Development II </a> at Ryerson Unveristy and it is done in team of 6. My role in this team is Back-End Java Developer, my duties were:</p>
<ul >
<li> handling server-side configuartion</li>
<li> building RESTful endpoints that handles HTTP request asynchronously</li>
<li> handling database connection and CRUD operations</li>
<li> Application Deployment </li>
</ul>
<h5>Front-end</h5>
<ul>
<li> HTML5, CSS3, JavaScript, Bootstrap 2 </li>
</ul>
</li>
<h5>Back-end</h5>
<ul>
<li> Java Spring Boot and Spring RESTful web service framework</li>
<li> Database: Spring Data JPA with MySQL </li>
<li> External API: Google API Client library for java
<li> Hosting Service: Amazon AWS (Elastic Beanstalk) </li>
</ul>
</div>
</div>
</section>
</div>
<!--<div class="animation-element slide-left" id="contact"></div> -->
<div class="page-container right-page" id="page3" >
<div id="animationSpace">
<img src="images/job.png"> <!--https://logomakr.com -->
</div>
<section class="contact-info">
<h1>Get in Touch </h1>
<span class="glyphicon glyphicon-hand-down"></span>
<h3 style="text-align: center;"> [email protected] </h3>
<ul class="list-inline">
<li><a href="https://www.facebook.com/steven.yan.14661" target="_blank" class="fa fa-facebook-square hvr-pulse "></a></li>
<li><a href="https://www.linkedin.com/in/steven-yan-7171b5a8/" target="_blank" class="fa fa-linkedin hvr-pulse "></a></li>
<li><a href="https://github.com/RiceAndMeet" target="_blank" class="fa fa-github hvr-pulse "></a></li>
</ul>
</section>
</div>
<script src="main.js"></script>
</body>
</html>