-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
452 lines (440 loc) · 26.6 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
446
447
448
449
450
451
452
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Yuvaraj Jayavel</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="bootstrap-grid.min.css">
<link href="https://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo+2:300" rel="stylesheet">
<link rel="stylesheet" href="image_expand.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<nav id="navbar">
<div class="container">
<div class="wrap row">
<a href="#" class="nav-link name">Yuvaraj</a>
<div id="nav-list">
<a href="#intro" class="nav-link" >Hey there!</a>
<a href="#work-desc" class="nav-link" >What do I do?</a>
<a href="#contact-desc" class="nav-link" >Call me maybe</a>
</div><!-- #nav-list -->
<a href="javascript:void(0);" onclick="toggleNav()" class="icon"><i class="fas fa-bars"></i></a>
</div>
</div><!-- .container -->
</nav><!-- #navbar -->
<div id="intro" class="section">
<div class="container">
<h1 class="section-title">Well, hello there!</h1><!-- .section-title -->
<p class="section-text">
Who's this guy? My name is in the top left corner. Allow me to introduce myself: I'm a full stack web developer currently working at Chronus, Chennai. I love to work with code, crack stupid jokes, and sing when no one is watching. I am still trying to figure out what I am doing with my life. <span class="bold">But hey, nice to meet you!</span>
</p><!-- .section-text -->
</div><!-- .container -->
</div><!-- #intro -->
<div id="photos">
<div class="container">
<div class="row">
<div class="col-md-6 potrait-container"><img id="bitmoji-photo" src="images/heybm.png" alt="" class="potrait"></div><!-- .col-sm-6 -->
<div class="col-md-6 potrait-container"><img id="normal-photo" src="images/Yuv_pic.jpg" alt="" class="potrait"></div><!-- .col-sm-6 -->
</div><!-- .row -->
</div><!-- .container -->
</div><!-- #photos -->
<div id="work-desc" class="section">
<div class="container">
<h1 class="section-title">What do I do?</h1><!-- .section-title -->
<p class="section-text">
A full stack web developer by profession. I am interested in working across and beyond the stack. Love trying out new technologies/languages! I love working on side-projects hoping someday I would become a successful indie-hacker! Want to know more? Take a look at my <a href="uploads/Yuvaraj_Resume.pdf" target="_blank" class="body-link">resume.</a>
</p><!-- .section-text -->
</div><!-- .container -->
</div><!-- #work-desc -->
<div id="work">
<div class="container-fluid">
<div id="web-designs">
<h2 class="sub-title text-center">Web Development Projects</h2><!-- .sub-title -->
<div class="image-grid">
<article class="image__cell is-collapsed">
<div class="image--basic">
<a class="expand-link" href="#event-0">
<div class="img-container">
<img id="event-0" class="basic__img" src="images/interrupt.png">
</div><!-- .img-container -->
<div class="caption text-center"><h4>Interrupt 2k18</h4></div><!-- .caption -->
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<a href="#close-jump-0" class="expand__close">✕</a>
<div class="event-title text-center"><h1>Interrupt 2k18</h1>
</div><!-- .event-title -->
<div class="box">
<div class="wrapper">
<div class="large-img-container">
<img class="image--large" src="images/interrupt.png">
<a href="interrupt/" target="_blank" class="overlay">View Full Site</a><!-- .overlay -->
</div><!-- .large-img-container -->
</div><!-- .wrapper -->
<div class="desc-box">
<p class="event-desc">This is the site for Interrupt 2k18 - the annual symposium of the CS department of SVCE. This website was developed from scratch with HTML, CSS and JS in the front-end, and PHP & MySQL for the backend.</p><!-- .event-desc -->
</div><!-- .desc-box -->
</div><!-- .box -->
</div>
</article>
<article class="image__cell is-collapsed">
<div class="image--basic">
<a class="expand-link" href="#event-1">
<div class="img-container">
<img id="event-1" class="basic__img" src="images/svce_acm.png">
</div><!-- .img-container -->
<div class="caption text-center"><h4>SVCE-ACM</h4></div><!-- .caption -->
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<a href="#close-jump-1" class="expand__close">✕</a>
<div class="event-title text-center"><h1>SVCE-ACM</h1>
</div><!-- .event-title -->
<div class="box">
<div class="large-img-container">
<img class="image--large" src="images/svce_acm.png">
<a href="http://svce.acm.org" target="_blank" class="overlay">View Full Site</a><!-- .overlay -->
</div><!-- .large-img-container -->
<div class="desc-box">
<p class="event-desc">The official site of the SVCE ACM student chapter 2018-19. HTML, CSS, JS (jQuery), and Bootstrap was used for the development of this website.</p><!-- .event-desc -->
</div><!-- .desc-box -->
</div><!-- .box -->
</div>
</article>
<article class="image__cell is-collapsed">
<div class="image--basic">
<a class="expand-link" href="#event-2">
<div class="img-container">
<img id="event-2" class="basic__img" src="images/tictactoe.png">
</div><!-- .img-container -->
<div class="caption text-center"><h4>Tic-tac-toe</h4></div><!-- .caption -->
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<a href="#close-jump-2" class="expand__close">✕</a>
<div class="event-title text-center"><h1>Tic-tac-toe</h1>
</div><!-- .event-title -->
<div class="box">
<div class="large-img-container">
<img class="image--large" src="images/tictactoe.png">
<a href="https://codepen.io/Yuvaraj/full/BYjLEq" target="_blank" class="overlay">View Full Site</a><!-- .overlay -->
</div><!-- .large-img-container -->
<div class="desc-box">
<p class="event-desc">One of my side projects. This webapp lets you play tic-tac-toe against an unbeatable bot developed from scratch using the minimax algorithm.</p><!-- .event-desc -->
</div><!-- .desc-box -->
</div><!-- .box -->
</div>
</article>
<article class="image__cell is-collapsed">
<div class="image--basic">
<a class="expand-link" href="#event-3">
<div class="img-container">
<img id="event-3" class="basic__img" src="images/teso.png">
</div><!-- .img-container -->
<div class="caption text-center"><h4>Teso Water Guns (Mockup)</h4></div><!-- .caption -->
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<a href="#close-jump-3" class="expand__close">✕</a>
<div class="event-title text-center"><h1>Teso Water Guns (Mockup)</h1>
</div><!-- .event-title -->
<div class="box">
<div class="large-img-container">
<img class="image--large" src="images/teso.png">
<a href="https://codepen.io/Yuvaraj/full/PxOBpO" target="_blank" class="overlay">View Full Site</a><!-- .overlay -->
</div><!-- .large-img-container -->
<div class="desc-box">
<p class="event-desc">A mock webpage that represents a (fictional) company's webpage. Coded from scratch using only HTML, SCSS and JS.</p><!-- .event-desc -->
</div><!-- .desc-box -->
</div><!-- .box -->
</div>
</article>
<article class="image__cell is-collapsed">
<div class="image--basic">
<a class="expand-link" href="#event-4">
<div class="img-container">
<img id="event-4" class="basic__img" src="images/weather.png">
</div><!-- .img-container -->
<div class="caption text-center"><h4>Weather App</h4></div><!-- .caption -->
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<a href="#close-jump-4" class="expand__close">✕</a>
<div class="event-title text-center"><h1>Weather App</h1>
</div><!-- .event-title -->
<div class="box">
<div class="large-img-container">
<img class="image--large" src="images/weather.png">
<a href="https://codepen.io/Yuvaraj/full/PjMzpp" target="_blank" class="overlay">View Full Site</a><!-- .overlay -->
</div><!-- .large-img-container -->
<div class="desc-box">
<p class="event-desc">Weather app that shows the temperature and weather of your area. It also fetches images related to the weather of your area. Works best on larger screen devices.</p><!-- .event-desc -->
</div><!-- .desc-box -->
</div><!-- .box -->
</div>
</article>
<article class="image__cell is-collapsed">
<div class="image--basic">
<a class="expand-link" href="#event-5">
<div class="img-container">
<img id="event-5" class="basic__img" src="images/skylines.png">
</div><!-- .img-container -->
<div class="caption text-center"><h4>Skylines - Blog Site</h4></div><!-- .caption -->
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<a href="#close-jump-5" class="expand__close">✕</a>
<div class="event-title text-center"><h1>Skylines - Blog Site</h1>
</div><!-- .event-title -->
<div class="box">
<div class="large-img-container">
<img class="image--large" src="images/skylines.png">
<a href="https://svce.acm.org/skylines" target="_blank" class="overlay">View Full Site</a><!-- .overlay -->
</div><!-- .large-img-container -->
<div class="desc-box">
<p class="event-desc">Blog site for the SVCE ACM Student Chapter. Built using Jekyll.</p><!-- .event-desc -->
</div><!-- .desc-box -->
</div><!-- .box -->
</div>
</article>
<article class="image__cell is-collapsed">
<div class="image--basic">
<a class="expand-link" href="#event-6">
<div class="img-container">
<img id="event-6" class="basic__img" src="images/yah.png">
</div><!-- .img-container -->
<div class="caption text-center"><h4>Yet Another Hackathon 2k19</h4></div><!-- .caption -->
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<a href="#close-jump-6" class="expand__close">✕</a>
<div class="event-title text-center"><h1>Yet Another Hackathon 2k19</h1>
</div><!-- .event-title -->
<div class="box">
<div class="large-img-container">
<img class="image--large" src="images/yah.png">
<a href="https://svce.acm.org/yah" target="_blank" class="overlay">View Full Site</a><!-- .overlay -->
</div><!-- .large-img-container -->
<div class="desc-box">
<p class="event-desc">Hackathon registration and information site for Yet Another Hackathon organised by SVCE ACM Student Chapter</p><!-- .event-desc -->
</div><!-- .desc-box -->
</div><!-- .box -->
</div>
</article>
<article class="image__cell is-collapsed">
<div class="image--basic">
<a class="expand-link" href="#event-7">
<div class="img-container">
<img id="event-7" class="basic__img" src="images/calc.png">
</div><!-- .img-container -->
<div class="caption text-center"><h4>React Calculator</h4></div><!-- .caption -->
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<a href="#close-jump-7" class="expand__close">✕</a>
<div class="event-title text-center"><h1>React Calculator</h1>
</div><!-- .event-title -->
<div class="box">
<div class="large-img-container">
<img class="image--large" src="images/calc.png">
<a href="https://codepen.io/Yuvaraj/pen/RwWJJYw" target="_blank" class="overlay">View Full Site</a><!-- .overlay -->
</div><!-- .large-img-container -->
<div class="desc-box">
<p class="event-desc">A simple calculator app implemented using React.</p><!-- .event-desc -->
</div><!-- .desc-box -->
</div><!-- .box -->
</div>
</article>
<article class="image__cell is-collapsed">
<div class="image--basic">
<a class="expand-link" href="#event-8">
<div class="img-container">
<img id="event-8" class="basic__img" src="images/library_app.png">
</div><!-- .img-container -->
<div class="caption text-center"><h4>Library App</h4></div><!-- .caption -->
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<a href="#close-jump-8" class="expand__close">✕</a>
<div class="event-title text-center"><h1>Library App</h1>
</div><!-- .event-title -->
<div class="box">
<div class="large-img-container">
<img class="image--large" src="images/library_app.png">
<a href="https://floating-shore-17096.herokuapp.com/" target="_blank" class="overlay">View Full Site</a><!-- .overlay -->
</div><!-- .large-img-container -->
<div class="desc-box">
<p class="event-desc">A library app for a local library implemented in Ruby on Rails.</p><!-- .event-desc -->
</div><!-- .desc-box -->
</div><!-- .box -->
</div>
</article>
</div><!-- .image-grid -->
</div><!-- #web-designs -->
<div id="others">
<h2 class="sub-title text-center">Other Projects, Certifications, and Whatnot</h2><!-- .sub-title -->
<hr>
<div class="others-table container">
<div class="category row">
<div class="col-sm-6">
<h3 class="category-title">A Few Humble Achievements</h3><!-- .achievement-title -->
</div><!-- .col-sm-6 -->
<div class="col-sm-6">
<h4 class="x-title">• Smart India Hackathon - Winners </h4><!-- .x-title -->
<p class="x-description">Led a team of six to the finals and won Smart India Hackathon 2020 for the problem statement Midday-Meal Analytics by Cisco DevNet.</p><!-- .x-description -->
<h4 class="x-title">• Best Innovation Award - SAACHACK'18</h4><!-- .x-title -->
<p class="x-description">Won the best innovation award at SAACHACK'18 - a 24 hour hackathon conducted by RIT, Chennai.</p><!-- .x-description -->
<h4 class="x-title">• Winner - Thinkathon</h4><!-- .x-title -->
<p class="x-description">Winner of the 24 hour hackathon conducted by the placement cell of SVCE</p><!-- .x-description -->
<h4 class="x-title">• Winner - AIT Coding Event 2.0 </h4><!-- .x-title -->
<p class="x-description">Won the ACM-ICPC style coding event by SVCE AIT.</p><!-- .x-description -->
</div><!-- .col-sm-6 -->
</div><!-- .category row -->
<hr>
<div class="category row">
<div class="col-sm-6">
<h3 class="category-title">Current Projects</h3><!-- .achievement-title -->
</div><!-- .col-sm-6 -->
<div class="col-sm-6">
<h4 class="x-title">• Regional Language Library Software</h4><!-- .x-title -->
<p class="x-description">Library software for a local Tamil library with Tamil language typing feature. Currently implemented library catalog using React and Node.</p><!-- .x-description -->
</div><!-- .col-sm-6 -->
</div><!-- .category row -->
<hr>
<div class="category row">
<div class="col-sm-6">
<h3 class="category-title">Other Responsibilities</h3><!-- .achievement-title -->
</div><!-- .col-sm-6 -->
<div class="col-sm-6">
<h4 class="x-title">• Webmaster, SVCE ACM Student Chapter <span class="dates" style="font-weight: normal;">(May 2019 - Apr 2020)</span></h4><!-- .x-title -->
<p class="x-description">Web Team Leader and Board Member of SVCE ACM Student Chapter.</p><!-- .x-description -->
<h4 class="x-title">• Senior Instructor, Hatch School of Code <span class="dates" style="font-weight: normal;">(Nov 2019 - Dec 2020)</span></h4><!-- .x-title -->
<p class="x-description">Teach coding to kids of age 9-15, and help them understand programming concepts at an early age</p><!-- .x-description -->
</div><!-- .col-sm-6 -->
</div><!-- .category row -->
<hr>
<div class="category row">
<div class="col-sm-6">
<h3 class="category-title">Past Experiences</h3><!-- .achievement-title -->
</div><!-- .col-sm-6 -->
<div class="col-sm-6">
<h4 class="x-title">• Executive Member, SVCE ACM Student Chapter <span class="dates" style="font-weight: normal;">(Jul 2018 - Apr 2019)</span></h4><!-- .x-title -->
<p class="x-description">Worked as an executive member in the web team of the SVCE ACM Student Chapter</p><!-- .x-description -->
<h4 class="x-title">• Software Developer Intern, Komparify <span class="dates" style="font-weight: normal;">(May 2019 - Aug 2019)</span></h4><!-- .x-title -->
<p class="x-description">Worked on porting Flixjini mobile app for various TV platforms like FireTV, Android TV and Apple TV. Used REST APIs, TVML and Android Studio for implementing TV apps.</p><!-- .x-description -->
</div><!-- .col-sm-6 -->
</div><!-- .category row -->
</div><!-- .others-table -->
</div><!-- #others -->
</div><!-- .container -->
</div><!-- #work -->
<div id="contact-desc" class="section">
<div class="container">
<h1 class="section-title">Call Me Maybe?</h1><!-- .section-title -->
<p class="section-text">
Do you want to work on something together? Maybe you have suggestions or criticisms of my work? Or just want someone to share memes with? Whatever it is, I am interested to hear from you. Feel free to get in touch with me - I promise I'll get back to you.
</p><!-- .section-text -->
</div><!-- .container -->
</div><!-- #contact -->
<div id="contact">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<a href="tel:+919087622535" class="contact-bitmoji-container"><img class="contact-bitmojis" src="images/callbm.png" alt=""></a>
<h3 class="contact-title"><a href="tel:+919087622535">Phone</a></h3><!-- .contact-title -->
<!-- <p class="contact-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> --><!-- .contact-caption -->
</div><!-- .col-md-3 col-sm-6 -->
<div class="col-md-3 col-sm-6">
<a href="mailto:jyuvaraj03@gmail.com" class="contact-bitmoji-container"><img class="contact-bitmojis" src="images/emailbm.png" alt=""></a>
<h3 class="contact-title"><a href="mailto:jyuvaraj03@gmail.com">Email</a></h3><!-- .contact-title -->
<!-- <p class="contact-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> --><!-- .contact-caption -->
</div><!-- .col-md-3 col-sm-6 -->
<div class="col-md-3 col-sm-6">
<a href="https://www.linkedin.com/in/yuvaraj-jayavel" class="contact-bitmoji-container" target="_blank"><img class="contact-bitmojis" src="images/linkedinbm.png" alt=""></a>
<h3 class="contact-title"><a href="https://www.linkedin.com/in/yuvaraj-jayavel" target="_blank">LinkedIn</a></h3><!-- .contact-title -->
<!-- <p class="contact-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> --><!-- .contact-caption -->
</div><!-- .col-md-3 col-sm-6 -->
<div class="col-md-3 col-sm-6">
<a href="https://github.com/jyuvaraj03" class="contact-bitmoji-container" target="_blank"><img class="contact-bitmojis" src="images/githubbm.png" alt=""></a>
<h3 class="contact-title"><a href="https://github.com/jyuvaraj03" target="_blank">Github</a></h3><!-- .contact-title -->
<!-- <p class="contact-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus!</p> --><!-- .contact-caption -->
</div><!-- .col-md-3 col-sm-6 -->
</div><!-- .row -->
</div><!-- .container -->
</div><!-- #contact -->
<div id="footer">
<div class="container">
<div id="info">
<p class="main-info">Yuvaraj Jayavel - Developer | Forever Student</p>
<p class="sub-info">I am always on the lookout for fascinating things to learn.</p>
</div>
</div><!-- .container -->
</div><!-- #footer -->
<div id="body-overlay"></div><!-- #body-overlay -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var x = document.querySelectorAll('.nav-link');
for (var i = 0; i < 4; i++) {
x[i].addEventListener("click", function(event) {
event.preventDefault();
var element = document.getElementById(this.href.substring(this.href.indexOf("#") + 1));
$([document.documentElement, document.body]).animate({
scrollTop: $(element).offset().top
}, 1000);
});
}
</script>
<script>
var $cell = $('.image__cell');
$cell.find('.image--basic').click(function() {
$('.overlay').css("opacity", 1);
setTimeout(function() {
$('.overlay').css("opacity", "");
}, 800);
var $thisCell = $(this).closest('.image__cell');
if ($thisCell.hasClass('is-collapsed')) {
$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed');
$thisCell.removeClass('is-collapsed').addClass('is-expanded');
} else {
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
}
});
$cell.find('.expand__close').click(function() {
var $thisCell = $(this).closest('.image__cell');
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
});
//setting all captions to same height
function toggleNav() {
var x = document.getElementById('nav-list');
if (x.className === "") {
x.className += "responsive";
$('#body-overlay').addClass('responsive');
} else {
x.className = "";
$('#body-overlay').removeClass('responsive');
}
}
$("#body-overlay, #nav-list").click(function() {
console.log(this);
if (!$(this).hasClass('responsive')) {
return;
}
toggleNav();
});
</script>
</body>
</html>