-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
344 lines (298 loc) · 17.4 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
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Yasith Vidanaarachchi</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- @todo: fill with your company info or remove -->
<meta name="description" content="Personal Website of Yasith Vidanaarachchi. CS Student at UofT, ex-Google Intern, Android Developer">
<meta name="author" content="Yasith Vidanaarachchi">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- Plugins -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="plugins/flexslider/flexslider.css" rel="stylesheet">
<!-- Theme style -->
<link href="css/theme-style.css" rel="stylesheet">
<!--Your custom colour override - a starter template/example for overriding theme colours -->
<link href="css/alternative-colour.css" rel="stylesheet">
<!-- Put all your custom code/overrides here -->
<link href="css/custom-style.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons - @todo: fill with your icons or remove -->
<link rel="shortcut icon" href="img/icons/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/72x72.png">
<link rel="apple-touch-icon-precomposed" href="img/icons/default.png">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>
<!--Retina.js plugin - @see: http://retinajs.com/-->
<script src="plugins/retina/retina.js"></script>
</head>
<body class="has-navbar-fixed-top page-index">
<!-- @region: Navigation -->
<div id="navigation" class="wrapper">
<!-- Branding & Navigation -->
<!--Main Navigation-->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!--mobile collapse menu button-->
<a class="mobile-toggle-trigger"><i class="icon-reorder"></i></a>
<!--scroll mobile navigation-->
<a class="mobile-toggle-trigger scroll-nav" data-js="scroll-show"><i class="icon-reorder"></i></a>
<!--everything within this div is collapsed on mobile-->
<div class="mobile-toggle pull-right">
<!--main navigation-->
<ul class="nav" id="main-menu">
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
<!-- @region: Content -->
<!--scroll-section class must be added to all scrollable sections-->
<div id="content">
<section class="scroll-section about block primary" id="about">
<!-- About text & photo -->
<div class="container">
<div class="row-fluid">
<div class="span3 photo">
<img src="img/misc/profile.png" alt="My picture" class="img-circle pull-center" />
</div>
<div class="span9 details">
<h2 class="primary-focus">Yasith Vidanaarachchi</h2>
<h3 class="secondary-focus">CS @ UofT, ex-Google Intern, Android Developer</h3>
<p>I study Computer Science at University of Toronto. I like computer algorithms, and participate in algorithmic competitions such as TopCoder, Google CodeJam and ACM ICPC. I've been a participant at the IOI before. After completing my 2nd year at UofT I worked at Google as a Software Engineering Intern for 3 months, where I worked in the MySQL SRE Team.</p>
<div class="margin-top"><a href="#skills" class="btn btn-large btn-primary-grad">Find Out More <i class="icon-angle-down"></i></a></div>
</div>
</div>
</div>
</section>
<!--Work-->
<section class="scroll-section work block" id="work">
<div class="container">
<h2>Work</h2>
<!--Featured item-->
<section class="flexslider-wrapper container">
<div class="flexslider" id="full-view" data-slidernav="#work-items" data-transition="slide" data-autostartoff=true>
<div class="slides">
<!--Mississauga Bus Times-->
<div class="slide row-fluid" data-thumb="img/showcase/thumbs/bustimes-android-thumb.jpg">
<div class="span8"><img src="img/showcase/full/bustimes-android-large.jpg" alt="Project image" /></div>
<div class="span4">
<h3 class="title">Mississauga Bus Times</h3>
<p>Android app that shows bus schedules for the city of Mississauga, ON. Features include, saving favourite routes, finding the next arriving bus times for stop. Currently has over 3000 daily active users.</p>
<a href="https://play.google.com/store/apps/details?id=net.tuxv.mississaugabusses" class="btn btn-primary" target="_blank">View Online <i class="icon-globe"></i></a>
</div>
</div>
<!--Only Local-->
<div class="slide row-fluid" data-thumb="img/showcase/thumbs/onlylocal-thumb.jpg">
<div class="span8"><img src="img/showcase/full/onlylocal-large.jpg" alt="Project image" /></div>
<div class="span4">
<h3 class="title">Only Local</h3>
<p>Android App To Find Local Farmers' Markets. Created during Android Camp, a week long Android training at Google. The app uses Google Local API to find nearest Farmers' Markets and shows various details about it.</p>
<a href="#" class="btn btn-primary">View Online <i class="icon-globe"></i></a>
</div>
</div>
<!--Toronto Bixi Bikes-->
<div class="slide row-fluid" data-thumb="img/showcase/thumbs/torontobixi-thumb.jpg">
<div class="span8"><img src="img/showcase/full/torontobixi-large.jpg" alt="Project image" /></div>
<div class="span4">
<h3 class="title">Toronto Bixi Bikes</h3>
<p>Created during the LinkedIn Hackathon Toronto. Android app to find nearest Bixi Bike stands in Toronto </p>
<a href="#" class="btn btn-primary">View Online <i class="icon-globe"></i></a>
</div>
</div>
<!--Toronto Bixi Bikes-->
<div class="slide row-fluid" data-thumb="img/showcase/thumbs/project2.jpg">
<div class="span8"><img src="img/showcase/full/project2_large.jpg" alt="Project image" /></div>
<div class="span4">
<h3 class="title">Only Local - Android App To Find Local Farmers' Markets</h3>
<p>Created during Android Camp, a week long Android training at Google. The app uses Google Local API to find nearest Farmers' Markets and shows various details about it.</p>
<a href="#" class="btn btn-primary">View Online <i class="icon-globe"></i></a>
</div>
</div>
</div>
</div>
<!--Projects pager-->
<ul class="items" id="work-items">
<li class="item pull-center">
<a href="img/showcase/full/bustimes-android-large.jpg">
<img src="img/showcase/thumbs/bustimes-android-thumb.jpg" alt="Mississauga Bus Times" title="Click to view details" />
</a>
</li>
<!--
<li class="item pull-center">
<a href="img/showcase/full/project2_large.jpg">
<img src="img/showcase/thumbs/project2.jpg" alt="Project 2 image" title="Click to view details" />
</a>
</li>
-->
</ul>
</section>
</div>
</section>
<!-- Skills-->
<section class="scroll-section services block gray" id="skills">
<div class="container">
<h2>Skills</h2>
<div class="row-fluid">
<div class="span4 service">
<i class="service-css3 centered"></i>
<h3 class="bold">Mobile Development</h3>
<p>2 years of Android experience. Planned, created and published an app with over 2000 daily active users. Currently learning iOS.</p>
</div>
<div class="span4 service">
<i class="service-drupal centered"></i>
<h3 class="bold">Algorithms & CS</h3>
<p>Proficient with CS fundamentals. Have been participating in algorithmic problem solving contests for over 6 years. Member of UofT ACM ICPC team in 2012 (Placed 21st Central-East North America Regionals).</p>
</div>
<div class="span4 service">
<i class="service-pm centered"></i>
<h3 class="bold">Linux and Programming</h3>
<p>Linux user for over 8 years. Proficient in C++, Java, C and Python. Learning Javascript and Objective-C.</p>
</div>
</div>
</div>
</section>
<!-- Experience Timeline -->
<section class="scroll-section experience block" id="experience">
<div class="container">
<h2>Experience</h2>
<!--
The Timeline:
- Timeline can be stacked by default by adding .timeline-stacked class to <ul class="timeline">, markers can show downloads by adding .down to <ul class="timeline">
- Item overlapping can be reset using the .overlap-off class or pulled using the overlap-pull-small & overlap-pull-large or pulled using overlap-push-small & overlap-push-large, default overlap is 60px
- To highlight the marker of an item add the class highlight to the timeline-item elements
-->
<ul class="timeline">
<!--Year 1 - 2013-->
<li>
<h3 class="timeline-breaker">Now</h3>
<ul>
<li class="timeline-item highlight">
<!--Images require class="timeline-item-photo", to float right add right class="timeline-item-photo right"-->
<img src="img/timeline/photo5.png" class="timeline-item-photo img-bg-primary" alt="timeline photo" />
<h4 class="timeline-item-date">March 2013 - Present</h4>
<h5 class="timeline-item-role">Independent Mobile Developer</h5>
<p class="timeline-item-description">Worked on and published my first Android app "Mississauga Bus Times". Continuously working on the iOS and Android versions now.</p>
<a href="#" class="btn btn-mini btn-primary-light btn-square">View Project</a>
</li>
<li class="timeline-item right">
<!--Images require class="timeline-item-photo", to float right add right class="timeline-item-photo right"-->
<img src="img/timeline/photo3.png" class="timeline-item-photo right img-bg-primary" alt="timeline photo" />
<h4 class="timeline-item-date">September 2013 - Present</h4>
<h5 class="timeline-item-role">Teaching Assistant @ UofT</h5>
<p class="timeline-item-description">Holding 4 hours of lab sessions per week for Introduction to Computer Programming class.</p>
</li>
<li class="timeline-item left">
<!--Images require class="timeline-item-photo", to float right add right class="timeline-item-photo right"-->
<img src="img/timeline/photo2.png" class="timeline-item-photo left img-bg-primary-light" alt="timeline photo" />
<h4 class="timeline-item-date">May 2013 - August 2013</h4>
<h5 class="timeline-item-role">Software Engineering Intern @ Google Inc.</h5>
<p class="timeline-item-description">Worked with the MySQL SRE Team. Worked on a proxy that connects MySQL to a distributed stats server system at Google.</p>
</li>
</ul>
</li>
<!--Year 2 - 2012-->
<li>
<h3 class="timeline-breaker">2012</h3>
<ul>
<li class="timeline-item right">
<!--Images require class="timeline-item-photo", to float right add right class="timeline-item-photo right"-->
<img src="img/timeline/photo3.png" class="timeline-item-photo right img-bg-primary" alt="timeline photo" />
<h4 class="timeline-item-date">September 2012 - January 2012</h4>
<h5 class="timeline-item-role">Teaching Assistant @ UofT</h5>
<p class="timeline-item-description">Assisting with lectures for Introduction to Computer Programming class and grading final exams.</p>
</li>
<li class="timeline-item left">
<!--Images require class="timeline-item-photo", to float right add right class="timeline-item-photo right"-->
<img src="img/timeline/photo5.png" class="timeline-item-photo img-bg-primary" alt="timeline photo" />
<h4 class="timeline-item-date">March 2012 - September 2012</h4>
<h5 class="timeline-item-role">iOS Game Development Intern @ Arkadium</h5>
<p class="timeline-item-description">Implemented the Analytics subsystem and a common UI structure for the game. Assisted with implementation of the core gameplay.</p>
<a href="#" class="btn btn-mini btn-primary-light btn-square">View Project</a>
</li>
</ul>
</li>
<!--Timeline end block-->
<li class="timeline-end">
<h5 class="timeline-breaker">Want to know more?</h5>
<a href="#contact" class="btn btn-large btn-primary-light btn-square"><i class="icon-envelope"></i> Contact Me</a> <a href="static/cv.pdf" class="btn btn-large btn-primary btn-square"><i class="icon-download-alt"></i> Download CV</a>
</li>
</ul>
</div>
</section>
<!--Customer testimonial -->
<section class="testimonials" id="testimonials">
<div class="block thin gray">
<div class="flexslider-wrapper container">
<div class="flexslider" data-transition="fade" data-directionnav=false>
<div class="slides">
<blockquote class="slide">
<p>
Yasith was effective in navigating a new code base, and even learning a new language on the fly as required by his project. In the end his work pushed the project past the initial expectations for the duration of the internship, so I was impressed with his overall results.
<small>Nina Baker - Software Engineer at Google</small>
</p>
</blockquote>
</div>
</div>
</div>
</div>
</section>
<!--Contact form-->
<section class="scroll-section contact block" id="contact">
<div class="container">
<h2>Contact</h2>
<div class="row-fluid">
<form id="contact-form" action="/sendmail" method="post">
<div class="span5">
<input type="text" name="name" placeholder="Name" class="input-primary">
<input type="email" name="email" placeholder="Email" class="input-primary">
</div>
<div class="span7">
<textarea rows="4" name="content" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-large btn-primary-light btn-square"><i class="icon-envelope"></i> Send Message</button>
</form>
</div>
</div>
</section>
</div>
<!-- @region: Footer -->
<footer id="footer">
<div class="container">
<div class="row-fluid pull-center">
<div class="social-media">
<a href="http://twitter.com/tuxv"><i class="icomoon-twitter-3"></i></a>
<a href="http://facebook.com/yasith"><i class="icomoon-facebook-3"></i></a>
<a href="http://plus.google.com/105484194603249916109"><i class="icomoon-google-plus-4"></i></a>
<a href="http://github.com/yasithv"><i class="icomoon-dribbble-3"></i></a>
</div>
<p>Copyright 2013 © <a href="http://tuxv.net">Yasith Vidanaarachchi</a></p>
</div>
</div> </footer>
<!--Scripts -->
<script src="js/jquery.js"></script>
<!--Bootstrap Javascript -->
<script src="js/bootstrap.min.js"></script>
<!--Plugins -->
<script src="plugins/flexslider/jquery.flexslider-min.js"></script>
<script src="plugins/jPanelMenu/jquery.jpanelmenu.min.js"></script>
<script src="plugins/jRespond/js/jRespond.js"></script>
<script src="plugins/onePageNav/jquery.scrollTo.js"></script>
<script src="plugins/onePageNav/jquery.nav.js"></script>
<!--Custom scripts mainly used to trigger libraries -->
<script src="js/script.js"></script>
</body>
</html>