-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
501 lines (480 loc) · 31.9 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
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
<!DOCTYPE html>
<html>
<head>
<title>Nabeel Warsalee - Portfolio</title>
<link rel="icon" type="image/png" href="images/NW-Logo-blackred.png">
<link href="styles/main.css" rel="stylesheet" />
</head>
<body class="">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<button class="menu_button">
<svg class="menu_icon" height="32px" viewBox="0 0 32 32" width="32px">
<path
d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z" />
</svg>
<svg class="x_icon" x="0px" y="0px" viewBox="0 0 32 32" height="32px" width="32px">
<polygon points="16,5.7 16,10.2 3.8,25.7 3.8,21.9 " />
<polygon points="16,5.7 16,10.2 28.2,25.7 28.2,21.9 " />
</svg>
</button>
<div class="container_all">
<div class="welcome" id="home">
<h1><span>Nabeel Warsalee</span>3rd Year Computer Science Student</h1>
</div>
<section class="about_me" id="about">
<img src="images/nabeel_about.jpg" alt="Art picture of Nabeel Warsalee" class="about_img">
<h1 class="about_title">About Me</h1>
<h2 class="about_subtitle">Hello, I'm <span class="name">Nabeel</span>!<br>Here's a little bit about me,</h2>
<div class="about_text">
<p>I am a 3rd year Computer Science student at Carleton University in Ottawa. I was born and raised in Ottawa
for all my life. My parents come from a small island in the Indian Ocean called Mauritius (maybe you've head
of
it, but probably not). They left everything they had and moved all the way to Canada to let my younger brother
and I have a better life. All their support they have given me throughout the years motivates me to do better
and make them proud.
</p>
<p>My affinity for technology started at a very young age. I was fortunate to have many computers in the house
since my dad was an IT.
He would teach me many things like what the different parts did and how to assemble them all to make a
computer.
It was when I was in high school that I started getting interested in computer programming.
I started teaching myself through online resources and then I took a programming course at my high school.
It's these events that helped lead me to where I am today.
<br><br>Below are some more interests of mine...
</p>
</div>
</section>
<div class="about_interests">
<div class="about_interests_block">
<h3>Sports and Fitness</h3>
<p>I've always loved playing sports. My favourite sport is football (aka soccer) but I also like to play
basketball.
I like doing other outdoor activites such as cycling, swimming and even wakeboarding. I try to go to the gym
as much as I can.
Exercise and sports is something I value a lot. I see it as another tool to help solve problems and another
outlet to practice teamwork and critical thinking.
</p>
</div>
<div class="about_interests_block">
<h3>Travelling</h3>
<p>Travelling is something I've been very fortunate to experience and hope to do more of in the future.
In 2018 our family went on a month-long trip back to Mauritius and also stopped in Paris, France for a week.
In 2019 I had the opportunity to go to Japan with my brother and cousins and it was an amazing experience.
My next destination will be somewhere in the Mediterranean!
</p>
</div>
<div class="about_interests_block">
<h3>Gaming</h3>
<p>Gaming is a passion that grew alongside my love for technology.
My cousins introduced my brother and I to classic games on the N64 and SNES like the original <i>Super Smash
Bros</i> and <i>Donkey Kong Country</i>.
My current main game I play is <i>Counter-Strike: Global Offensive</i> but when I have more time I like
playing story-driven singleplayer games or party games with friends.
I find games are a very powerful and creative tool to showcase new technological development.
</p>
</div>
</div>
<section class="portfolio" id="portfolio">
<div class="portfolio_header">
<h1>My Projects</h1>
</div>
<div class="portfolio_items">
<!-- Portfolio item 1 -->
<figure class="portfolio_item featured">
<img src="images/DayZero-1024.png" alt="Day-Zero Project picture">
<figcaption>
<h2 class="portfolio_title">Day Zero</h2>
<p class="portfolio_descr">Zombie arcade game made with my partner Eren Sulutas. Based in Processing, the
game applies many fundamental programming concepts such as, Object Oriented Design, use of 2D arrays,
ArayLists, file writing and more. My main role on this project was the game mechanics and logic. I created
things like the movement, the random spawning of zombies and how the zombies interact with the player and
more. For the whole breakdown of the project, please visit the Github repo.</p>
<a href="https://github.com/nwarsalee/DayZero-Nabeel-Eren" class="portfolio_link" target="_blank">
<svg class="github_icon" width="32" height="32" viewBox="0 0 1024 1024">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
transform="scale(64)" />
</svg>
</a>
</figcaption>
</figure>
<!-- Portfolio item 2 -->
<figure class="portfolio_item">
<img src="images/danny_devito_site_1024.png" alt="How Much are you like Danny Devito site">
<figcaption>
<h2 class="portfolio_title">How much are you like Danny Devito</h2>
<p class="portfolio_descr">My team's CUHacking 2019 project. It would take a photo that you upload to the
site and use a facial comparison algorithm to see how much the photo you entered has in common with Danny
Devito.</p>
<a href="https://github.com/Megapead/LearningHacks" class="portfolio_link" target="_blank">
<svg class="github_icon" width="32" height="32" viewBox="0 0 1024 1024">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
transform="scale(64)" />
</svg>
</a>
</figcaption>
</figure>
<!-- Portfolio item 3 -->
<figure class="portfolio_item">
<img src="images/discord-minecraft-bot.png" alt="Discord Minecraft Bot">
<figcaption>
<h2 class="portfolio_title">Discord Minecraft Bot</h2>
<p class="portfolio_descr">A Discord bot created to store a locations coordinates that a user enters to allow them to access it later.
The bot can also perform operations on these locations such as calculating the distance between two locations and the directions from one location to another.
</p>
<a href="https://github.com/nwarsalee/minecraft-discord-bot" class="portfolio_link" target="_blank">
<svg class="github_icon" width="32" height="32" viewBox="0 0 1024 1024">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
transform="scale(64)" />
</svg>
</a>
</figcaption>
</figure>
<!-- Portfolio item 4 -->
<figure class="portfolio_item">
<img src="images/Connect4_java_1024.png" alt="Java Connect 4 app">
<figcaption>
<h2 class="portfolio_title">Connect 4 Java Game</h2>
<p class="portfolio_descr">Command line "Connect Four" game made in Java. Has a menu that tells you the how
to play and let's you play with another person or an AI that I designed and programmed myself.</p>
<a href="https://github.com/nwarsalee/Connect-Four-ICS3U-Summative-Game" class="portfolio_link"
target="_blank">
<svg class="github_icon" width="32" height="32" viewBox="0 0 1024 1024">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
transform="scale(64)" />
</svg>
</a>
</figcaption>
</figure>
<!-- Portfolio item 5 -->
<figure class="portfolio_item">
<img src="images/discord-faceithub-bot.png" alt="Discord Faceit Hub Bot">
<figcaption>
<h2 class="portfolio_title">Discord Faceit Hub Bot</h2>
<p class="portfolio_descr">A Discord bot created in order to automatically manage players voice channels when starting a game on the Faceit site.
Once a game starts, the bot will automatically move players to their respective team channels by requesting the team information from Faceit via an HTTP request.</p>
<a href="https://github.com/nwarsalee/discord_faceithub_bot" class="portfolio_link" target="_blank">
<svg class="github_icon" width="32" height="32" viewBox="0 0 1024 1024">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
transform="scale(64)" />
</svg>
</a>
</figcaption>
</figure>
<!-- Portfolio item 6 -->
<figure class="portfolio_item">
<img src="images/TowersOfHanoi-1024.png" alt="Processing Towers of Hanoi Project">
<figcaption>
<h2 class="portfolio_title">Towers of Hanoi Visualization</h2>
<p class="portfolio_descr">Visualization of the reknown recursion problem of the Towers of Hanoi. Allows you
to select the number of discs and will show what moves are needed to complete the problem.</p>
<a href="https://github.com/nwarsalee/TowersOfHanoiVisual" class="portfolio_link" target="_blank">
<svg class="github_icon" width="32" height="32" viewBox="0 0 1024 1024">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
transform="scale(64)" />
</svg>
</a>
</figcaption>
</figure>
<!-- Portfolio item 7 -->
<figure class="portfolio_item">
<img src="images/pong-1024.png" alt="Python Pong Game">
<figcaption>
<h2 class="portfolio_title">Python Pong Game</h2>
<p class="portfolio_descr">Pong game using the SimpleGraphics library in python. Two player game using the keyboard's WASD and arrow keys.</p>
<a href="https://github.com/nwarsalee/Python-Pong" class="portfolio_link" target="_blank">
<svg class="github_icon" width="32" height="32" viewBox="0 0 1024 1024">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
transform="scale(64)" />
</svg>
</a>
</figcaption>
</figure>
</div>
<h2 class="languages_title">I develop in...</h2>
<div class="portfolio_languages">
<div class="portfolio_languages_img" name="python">
<svg height="104px" version="1.1" viewBox="0 0 512 512" width="104px">
<g id="Layer_7">
<g>
<path
d="M253.806,1.783c-20.678,0.098-40.426,1.859-57.803,4.935c-51.187,9.044-60.48,27.97-60.48,62.877v46.103 h120.963v15.366H135.522H90.126c-35.155,0-65.937,21.13-75.563,61.325c-11.107,46.075-11.603,74.83,0,122.939 c8.599,35.808,29.13,61.324,64.286,61.324h41.589v-55.269c0-39.921,34.544-75.143,75.564-75.143h120.822 c33.632,0,60.479-27.689,60.479-61.466V69.594c0-32.776-27.653-57.406-60.479-62.877C296.045,3.257,274.483,1.684,253.806,1.783z M188.391,38.86c12.494,0,22.699,10.37,22.699,23.12c0,12.705-10.205,22.982-22.699,22.982c-12.542,0-22.699-10.277-22.699-22.982 C165.692,49.23,175.849,38.86,188.391,38.86z"
id="path1948_1_" />
<path
d="M392.387,131.062v53.712c0,41.648-35.303,76.692-75.562,76.692H196.002 c-33.094,0-60.48,28.327-60.48,61.469v115.186c0,32.777,28.503,52.063,60.48,61.463c38.291,11.259,75.004,13.3,120.822,0 c30.451-8.812,60.479-26.561,60.479-61.463v-46.105H256.485v-15.364h120.817h60.479c35.157,0,48.26-24.519,60.482-61.324 c12.629-37.895,12.093-74.335,0-122.939c-8.687-34.993-25.281-61.325-60.482-61.325H392.387z M324.438,422.75 c12.539,0,22.698,10.269,22.698,22.975c0,12.749-10.159,23.124-22.698,23.124c-12.493,0-22.696-10.375-22.696-23.124 C301.741,433.019,311.944,422.75,324.438,422.75z"
id="path1950_1_" />
</g>
</g>
</svg>
<h3>PYTHON</h3>
</div>
<div class="portfolio_languages_img" name="c">
<svg x="0px" y="0px" viewBox="0 0 50 50" height="104px" width="104px">
<path d="M46.5,12.5c-0.2-0.5-0.5-0.7-0.8-0.9L26.4,0.5c-0.3-0.2-0.8-0.3-1.3-0.3c-0.5,0-0.9,0.1-1.3,0.3L4.6,11.7
c-0.7,0.4-1.2,1.4-1.2,2.2v22.3c0,0.4,0.1,1.1,0.3,1.4c0.2,0.3,0.5,0.6,0.8,0.8l19.1,10.9c0.3,0.2,1,0.5,1.4,0.5
c0.5,0,1.1-0.3,1.4-0.4l19-11c0.7-0.4,1.2-1.4,1.2-2.2V13.8C46.7,13.8,46.7,12.8,46.5,12.5L46.5,12.5z M25.1,34.8c3.7,0,6.8-2,8.5-5
l5.1,3.1c-2.7,4.8-7.8,7.9-13.7,7.9c-8.7,0-15.8-7.1-15.8-15.8S16.4,9.2,25.1,9.2c5.8,0,11,3.3,13.8,8l-5.2,3
c-1.7-3-4.9-5.1-8.5-5.1c-5.4,0-9.8,4.4-9.8,9.8S19.7,34.8,25.1,34.8z" />
</svg>
<h3>C</h3>
</div>
<div class="portfolio_languages_img" name="java">
<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 305.001 305.001" width="104px" height="104px">
<g id="XMLID_7_">
<path id="XMLID_8_" d="M150.99,56.513c-14.093,9.912-30.066,21.147-38.624,39.734c-14.865,32.426,30.418,67.798,32.353,69.288
c0.45,0.347,0.988,0.519,1.525,0.519c0.57,0,1.141-0.195,1.605-0.583c0.899-0.752,1.154-2.029,0.614-3.069
c-0.164-0.316-16.418-31.888-15.814-54.539c0.214-7.888,11.254-16.837,22.942-26.312c10.705-8.678,22.839-18.514,29.939-30.02
c15.586-25.327-1.737-50.231-1.914-50.479c-0.688-0.966-1.958-1.317-3.044-0.84c-1.085,0.478-1.686,1.652-1.438,2.811
c0.035,0.164,3.404,16.633-5.97,33.6C169.301,43.634,160.816,49.603,150.99,56.513z" />
<path id="XMLID_9_" d="M210.365,67.682c0.994-0.749,1.286-2.115,0.684-3.205c-0.602-1.09-1.913-1.571-3.077-1.129
c-2.394,0.91-58.627,22.585-58.627,48.776c0,18.053,7.712,27.591,13.343,34.556c2.209,2.731,4.116,5.09,4.744,7.104
c1.769,5.804-2.422,16.294-4.184,19.846c-0.508,1.022-0.259,2.259,0.605,3.005c0.467,0.403,1.05,0.607,1.634,0.607
c0.497,0,0.996-0.148,1.427-0.448c0.967-0.673,23.63-16.696,19.565-36.001c-1.514-7.337-5.12-12.699-8.302-17.43
c-4.929-7.329-8.489-12.624-3.088-22.403C181.419,89.556,210.076,67.899,210.365,67.682z" />
<path id="XMLID_10_" d="M63.99,177.659c-0.964,2.885-0.509,5.75,1.315,8.283c6.096,8.462,27.688,13.123,60.802,13.123
c0.002,0,0.003,0,0.004,0c4.487,0,9.224-0.088,14.076-0.262c52.943-1.896,72.58-18.389,73.39-19.09
c0.883-0.764,1.119-2.037,0.57-3.067c-0.549-1.029-1.733-1.546-2.864-1.235c-18.645,5.091-53.463,6.898-77.613,6.898
c-27.023,0-40.785-1.946-44.154-3.383c1.729-2.374,12.392-6.613,25.605-9.212c1.263-0.248,2.131-1.414,2.006-2.695
c-0.125-1.281-1.201-2.258-2.488-2.258C106.893,164.762,68.05,165.384,63.99,177.659z" />
<path id="XMLID_11_" d="M241.148,160.673c-10.92,0-21.275,5.472-21.711,5.705c-1.01,0.541-1.522,1.699-1.245,2.811
c0.278,1.111,1.277,1.892,2.423,1.893c0.232,0.001,23.293,0.189,25.382,13.365c1.85,11.367-21.82,29.785-31.097,35.923
c-1.002,0.663-1.391,1.945-0.926,3.052c0.395,0.943,1.314,1.533,2.304,1.533c0.173,0,0.348-0.018,0.522-0.056
c2.202-0.47,53.855-11.852,48.394-41.927C261.862,164.541,250.278,160.673,241.148,160.673z" />
<path id="XMLID_12_" d="M205.725,216.69c0.18-0.964-0.221-1.944-1.023-2.506l-12.385-8.675c-0.604-0.423-1.367-0.556-2.076-0.368
c-0.129,0.034-13.081,3.438-31.885,5.526c-7.463,0.837-15.822,1.279-24.175,1.279c-18.799,0-31.091-2.209-32.881-3.829
c-0.237-0.455-0.162-0.662-0.12-0.777c0.325-0.905,2.068-1.98,3.192-2.405c1.241-0.459,1.91-1.807,1.524-3.073
c-0.385-1.266-1.69-2.012-2.978-1.702c-12.424,2.998-18.499,7.191-18.057,12.461c0.785,9.343,22.428,14.139,40.725,15.408
c2.631,0.18,5.477,0.272,8.456,0.272c0.002,0,0.003,0,0.005,0c30.425,0,69.429-9.546,69.819-9.643
C204.818,218.423,205.544,217.654,205.725,216.69z" />
<path id="XMLID_13_"
d="M112.351,236.745c0.938-0.611,1.354-1.77,1.021-2.838c-0.332-1.068-1.331-1.769-2.453-1.755
c-1.665,0.044-16.292,0.704-17.316,10.017c-0.31,2.783,0.487,5.325,2.37,7.556c5.252,6.224,19.428,9.923,43.332,11.31
c2.828,0.169,5.7,0.254,8.539,0.254c30.39,0,50.857-9.515,51.714-9.92c0.831-0.393,1.379-1.209,1.428-2.127
c0.049-0.917-0.409-1.788-1.193-2.267l-15.652-9.555c-0.543-0.331-1.193-0.441-1.813-0.314c-0.099,0.021-10.037,2.082-25.035,4.119
c-2.838,0.385-6.392,0.581-10.562,0.581c-14.982,0-31.646-2.448-34.842-4.05C111.843,237.455,111.902,237.075,112.351,236.745z" />
<path id="XMLID_14_"
d="M133.681,290.018c69.61-0.059,106.971-12.438,114.168-20.228c2.548-2.757,2.823-5.366,2.606-7.07
c-0.535-4.194-4.354-6.761-4.788-7.04c-1.045-0.672-2.447-0.496-3.262,0.444c-0.813,0.941-0.832,2.314-0.016,3.253
c0.439,0.565,0.693,1.51-0.591,2.795c-2.877,2.687-31.897,10.844-80.215,13.294c-6.619,0.345-13.561,0.519-20.633,0.52
c-43.262,0-74.923-5.925-79.079-9.379c1.603-2.301,12.801-5.979,24.711-8.058c1.342-0.234,2.249-1.499,2.041-2.845
c-0.208-1.346-1.449-2.273-2.805-2.096c-0.336,0.045-1.475,0.115-2.796,0.195c-19.651,1.2-42.36,3.875-43.545,13.999
c-0.36,3.086,0.557,5.886,2.726,8.324c5.307,5.963,20.562,13.891,91.475,13.891C133.68,290.018,133.68,290.018,133.681,290.018z" />
<path id="XMLID_15_" d="M261.522,271.985c-0.984-0.455-2.146-0.225-2.881,0.567c-0.103,0.11-10.568,11.054-42.035,17.48
c-12.047,2.414-34.66,3.638-67.211,3.638c-32.612,0-63.643-1.283-63.953-1.296c-1.296-0.063-2.405,0.879-2.581,2.155
c-0.177,1.276,0.645,2.477,1.897,2.775c0.323,0.077,32.844,7.696,77.31,7.696c21.327,0,42.08-1.733,61.684-5.151
c36.553-6.408,39.112-24.533,39.203-25.301C263.082,273.474,262.504,272.44,261.522,271.985z" />
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<h3>JAVA</h3>
</div>
<div class="portfolio_languages_img" name="javascript">
<div class="javascript">
<svg x="0px" y="0px" viewBox="0 0 1052 1052" height="104px" width="104px">
<style type="text/css">
.st0 {
fill: none;
stroke-miterlimit: 10;
}
</style>
<g transform="translate(0.000000,1052.000000) scale(0.100000,-0.100000)">
<path d="M7840,5740c-378-30-695-166-931-400c-243-241-359-535-359-908c0-558,229-948,740-1257c130-78,307-163,613-295
c417-179,572-264,671-370c122-131,156-340,79-500c-15-31-54-83-89-118c-118-119-304-182-535-182c-390,0-681,160-915,506
c-32,46-61,84-65,84c-9,0-770-439-786-454c-10-9-2-30,37-94c304-512,779-812,1421-898c168-23,483-22,644,0c404,57,707,191,942,419
c250,241,373,553,373,944c0,250-41,445-134,638c-64,132-128,221-238,333c-211,214-484,376-1029,610c-412,177-550,253-641,350
c-87,93-124,202-116,338c7,108,37,181,103,252c95,103,205,146,375,145c193,0,318-50,445-178c45-44,103-115,130-158
c31-49,54-76,62-73c26,11,753,481,753,488c0,4-37,62-82,130c-96,144-269,324-388,403c-220,146-455,221-765,244
C8003,5751,7983,5751,7840,5740z" />
<path d="M4727,3923l-3-1768l-22-83c-29-109-63-174-123-234c-84-84-192-119-372-120c-257-1-411,108-590,414c-29,48-55,87-58,86
c-4-2-185-111-402-242l-395-240l30-60c179-357,489-627,862-751c394-131,900-119,1271,30c445,180,706,552,775,1105
c6,56,10,681,10,1857v1773h-490h-489L4727,3923z" />
</g>
<rect x="6.1" y="6.1" class="st0" width="1039.8" height="1039.8" />
</svg>
</div>
<h3>JAVASCRIPT</h3>
</div>
<div class="portfolio_languages_img" name="html">
<svg x="0px" y="0px" viewBox="0 0 512 512" height="104px" width="104px">
<g>
<path d="M108.4,0h23.1v22.8h21.1V0h23.1v69h-23.1V45.9h-21.1V69h-23.1L108.4,0L108.4,0z" />
<path d="M206,22.9h-20.3V0h63.7v22.9h-20.3V69H206L206,22.9L206,22.9z" />
<path d="M259.5,0h24.1l14.8,24.3L313.2,0h24.1v69h-23V34.8l-15.9,24.5H298l-15.9-24.5V69h-22.6V0z" />
<path d="M348.7,0h23.1v46.2h32.5V69h-55.5V0z" />
</g>
<g>
<g>
<path d="M78.1,85.2l33,370.2l148.1,41.1l148.5-41.2l33.1-370.2H78.1L78.1,85.2z M379.5,431.8l-119.4,33.1v0.2l-0.3-0.1l-0.3,0.1
v-0.2l-119.4-33.1l-28.2-316.4h295.9L379.5,431.8z M315.3,298.2l-5.2,58.9l-50.7,13.7l-50.6-13.6l-3.2-36.3h-45.6l6.3,71.3
l93.3,25.8l92.9-25.8l12.5-139.4H199.4l-4.1-46.5H369l4.1-45.4H145.6l12.3,137.3H315.3z" />
</g>
</g>
</svg>
<h3>HTML</h3>
</div>
<div class="portfolio_languages_img" name="css">
<svg x="0px" y="0px" viewBox="0 0 2500 2500" width="104px" height="104px">
<style type="text/css">
.st0 {
fill: none;
}
</style>
<path class="st0" d="M0,0h2500v2500H0V0z" />
<path d="M891.2,357v-94.1h137.3V159.9H788.2v291h240.2V357H891.2z M1275.3,262.9h96V159.9h-240.2v102.9c32.1,32.1,48.9,47.5,95.4,94
c-27.2,0-95.4,0.1-95.4,0.1v93.9h240.2V357L1275.3,262.9L1275.3,262.9z M1615.8,262.9h96V159.9h-240.2v102.9
c32.1,32.1,48.9,47.5,95.4,94c-27.2,0-95.4,0.1-95.4,0.1v93.9h240.2V357L1615.8,262.9L1615.8,262.9z" />
<g>
<path d="M1252.3,1717.2L1252.3,1717.2z" />
<path d="M500.8,515.5l136.5,1575.8l612.8,175.1l614.6-175.3l136.9-1575.6H500.8z M1636.9,1824.4l-385.4,109.9l-384.8-110.4
L840.3,1520h188.7l13.4,154.5l209.4,59.3l0.5,1.1h0.2l209-58.1l22-250.7h-439.3l-15.7-195.5h471.5l17.2-199.4H797.9l-15.7-191.5
h940.3L1636.9,1824.4z" />
</g>
</svg>
<h3>CSS</h3>
</div>
</div>
</section>
<section id="contact">
<footer>
<h1>Reach me at...</h1>
<div class="social_icons">
<a href="mailto:nabeel.warsalee@gmail.com" target="_blank">
<svg x="0px" y="0px" viewBox="0 0 330.001 330.001" width="124px" height="124px">
<g id="XMLID_348_">
<path id="XMLID_350_"
d="M173.871,177.097c-2.641,1.936-5.756,2.903-8.87,2.903c-3.116,0-6.23-0.967-8.871-2.903L30,84.602
L0.001,62.603L0,275.001c0.001,8.284,6.716,15,15,15L315.001,290c8.285,0,15-6.716,15-14.999V62.602l-30.001,22L173.871,177.097z" />
<polygon id="XMLID_351_" points="165.001,146.4 310.087,40.001 19.911,40 " />
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<h3 style="text-decoration: none">nabeel.warsalee@gmail.com</h3>
</a>
<a href="https://github.com/nwarsalee" target="_blank">
<svg width="124px" height="124px" viewBox="0 0 1024 1024">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
transform="scale(64)"/>
</svg>
</a>
<a href="https://www.linkedin.com/in/nabeel-warsalee/" target="_blank">
<svg x="0px" y="0px" width="124px" height="124px" viewBox="0 0 22.258 22.258">
<g>
<path d="M5.366,2.973c0,1.376-1.035,2.479-2.699,2.479H2.636C1.034,5.453,0,4.348,0,2.973c0-1.409,1.067-2.482,2.698-2.482
C4.331,0.49,5.336,1.564,5.366,2.973z M0.28,21.766h4.772V7.413H0.28V21.766z M16.764,7.077c-2.531,0-3.664,1.39-4.301,2.37v0.046
h-0.031c0.012-0.014,0.023-0.03,0.031-0.046V7.414H7.692c0.062,1.345,0,14.353,0,14.353h4.771v-8.016
c0-0.432,0.029-0.855,0.157-1.164c0.346-0.854,1.132-1.747,2.446-1.747c1.729,0,2.42,1.319,2.42,3.247v7.68h4.771v-8.229
C22.258,9.126,19.902,7.077,16.764,7.077z" />
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</a>
</div>
<p>
<copyright>© Nabeel Warsalee 2019</copyright>
</footer>
</section>
</div>
<script src="js/nav.js"></script>
</body>
</html>