-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·817 lines (728 loc) · 37.3 KB
/
index.html
File metadata and controls
executable file
·817 lines (728 loc) · 37.3 KB
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
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
<!DOCTYPE HTML>
<html>
<head>
<title>Anshul Singhal</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="Software | Product">
<meta name="keywords" content="Software,Developer,Engineer,Grad,Software Developer,Software Engineer,Frontend,Backend,full-stack">
<!-- Stylesheets -->
<link rel="stylesheet" href="assets/css/main.css" />
<link id="favicon" rel="icon" href="images/favicon-black.png" sizes="32x32" type="image/png">
<!-- <link rel="shortcut icon" href="images/favicon.png" sizes="32x32"> -->
<link rel="stylesheet" href="assets/css/home.css" charset="utf-8">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/940aebab1b.js" crossorigin="anonymous"></script>
<!-- Google Verification -->
<meta name="google-site-verification" content="GK0MPeJ_USnTOnugftfOaY8ymawhosAt_XjK9ctw0tg" />
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-105316515-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-105316515-1');
function isDarkBackground(rgb) {
// Calculate relative luminance of the background color
const [r, g, b] = rgb.match(/\d+/g).map(Number);
const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b; // Formula for luminance
// A luminance threshold (128) is used to differentiate dark from light background
return luminance < 128;
}
function checkFaviconContrast() {
// Get the computed background color of the body element
const backgroundColor = getComputedStyle(document.body).backgroundColor;
// Define the black and white favicons
const blackFavicon = 'images/favicon-black.png';
const whiteFavicon = 'images/favicon-white.png';
console.log("Background color", backgroundColor, isDarkBackground(backgroundColor))
// Check if the background is dark or light and switch the favicon accordingly
if (isDarkBackground(backgroundColor)) {
document.getElementById('favicon').setAttribute('href', whiteFavicon); // Use white favicon for dark background
} else {
document.getElementById('favicon').setAttribute('href', blackFavicon); // Use black favicon for light background
}
console.log("Favicon", document.getElementById('favicon'))
}
// Run the check on load and when the window is resized
window.onload = checkFaviconContrast;
window.onresize = checkFaviconContrast;
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5PCQ6VX');
</script>
<!-- Google Tag Manager -->
<!-- <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5PCQ6VX');</script> -->
<!-- End Google Tag Manager -->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- Pinterest tag -->
<meta name="p:domain_verify" content="773b93ad80e1a79814120984f304cb28"/>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5PCQ6VX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<span class="icon" style="width:125px;height:125px;">
<img src="images/main_photo.png" style="width:125px;height:125px;">
<!--<span class="icon fa-diamond"></span>-->
</span>
<div class="content">
<div class="inner">
<h1>Anshul Singhal</h1>
<!-- <p>Software Development & Product Management</p> -->
<p>A product-minded, design-oriented, <b>full-stack</b> Software Engineer with a focus on <b>frontend</b> development</p>
</div>
</div>
<nav>
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#activities">Activities</a></li>
<li><a href="#contact">Contact</a></li>
<!--<li><a href="#elements">Elements</a></li>-->
</ul>
</nav>
</header>
<!-- Main -->
<div id="main">
<!-- Intro -->
<article id="intro">
<h2 class="major">Intro</h2>
<span class="image main"><img src="images/pic01.jpg" alt="" /></span>
<p>If I had to describe Anshul in two words, he'd be an <b>"Inquisitive Adventurer"</b>.
<br/> Sounds absurd until you see his passion for exploring the world and all things in it.
<br/> Sounds extravagant until you come across his eyes longing to learn something new every single day.
<br/><br/> On the rare occasions when you don't catch him engrossed in latest tech blogs, you can find him appreciating minimalistic patterns and the symmetry of nature.
This often inspires his <b><a target="_blank" href="https://vsco.co/af4ro/gallery">photography</a></b>.
<br/><br/> Anshul started off in the suburbs of <b><a href="https://en.wikipedia.org/wiki/Pune">Pune (India)</a></b> and proudly calls it home.
At the age of eighteen, he moved to the United States of America to study Computer Science at the prestigious <b><a href="https://uci.edu/">University of California, Irvine</a></b>.
He now lives in the sunny (or is it?) California city of San Francisco where he loves rock climbing, hiking, socializing, and traveling.
<br/><br/><b>In the words of Anshul Singhal:</b><blockquote>
I've always been a visual thinker and often wandered off into the wild in search of something <b><a href="https://www.google.com/search?q=alag+in+hindi">'Alag'</a></b>; something extraordinary.
My compass of curiosity has been my driving force since the earliest memories I can recall.
I've met hundreds of interesting people on this fulfilling journey and their diverse stories have inspired me beyond my imagination.
Every new intellectual I meet facilitates my growth and fuels my gregarious nature.
<br><br>
When I'm not busy soaking sunlight, I'm usually working on my side projects or reading tech/entrepreneurial articles.
I chose to divert my potential towards <b><a href="https://github.com/af4ro">Computer Science</a></b> in the hopes of being exposed to cutting-edge technology and being able to bootstrap beneficial projects into existence.
Being able to interpret and invent technology is an unparalleled feeling, and it motivates me every single day<br/>
</blockquote>
<b>As Steve Jobs once said:</b><br/>
<i>"People who are crazy enough to think they can change the world are the ones who do"<br/></i>
</p>
</article>
<!-- Experience -->
<article id="experience">
<h2 class="major">Experience</h2>
<span class="image main"><img src="images/pic02.jpg" alt="" /></span>
<ul class="alt">
<li><br/><b>
<font size = "6">
Software Engineer
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3><a href="https://www.ziphq.com/" target="_blank">Zip HQ</a></h3>
<h3>June '24 - Present</h3>
</div>
<ul>
Building new things 👾
</ul>
</li>
<li><br/><b>
<font size = "6">
Software Engineer (frontend)
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3><a href="https://www.asana.com/" target="_blank">Asana</a></h3>
<h3>May '22 - May '24</h3>
</div>
<ul>
Anything and everything Design Systems related 🎨
<br>• Build, maintain, and elevate Asana's Design System framework, a crucial resource for all frontend engineers and designers at Asana, to <u>increase developer velocity without sacrificing quality</u>. Utilizing technologies such as React, Typescript, Sass CSS, HTML, Bazel, and frontend frameworks, etc.
<br>• Engineer foundational, accessible frontend building blocks integral to every product feature at Asana, directly enhancing the experience of <u>every single Asana user (approximately 30 million users).</u>
<br>• Spearheaded the creation of a code-tokens to Figma Variables sync service, introducing color, spacing, and sizing tokens along with themes to all Asana designers. This <u>improved tooling satisfaction in designers from 69% to 95%.</u>
<br>• Led a multi-quarter cross-functional initiative to consistently capitalize all user-facing localized text across Asana, <u>increasing Content Design satisfaction by 17%</u>, and making Asana a more appealing choice for Enterprise customers.
<br>• Mentored 3 interns, junior, and mid-level engineers from underrepresented communities, setting them up for success in their careers.
<br>• Redesigned Asana's ubiquitous placeholders and loading indicators by introducing new animations that effectively convey sentiment. This overhaul resulted in <u>20% higher user persistence</u> for surfaces with extended loading times.
<br>• Own, maintain, and be the primary point of contact for all Avatar, Card, and Button core components at Asana.
</ul>
</li>
<li><br/><b>
<font size = "6">
Senior Software Engineer (full-stack)
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3><a href="https://www.quantcast.com/" target="_blank">Quantcast</a></h3>
<h3>Oct '21 - May '22</h3>
</div>
<ul>
• Unlocked tens of millions of dollars in client spending through the successful development and implementation of new features quarterly, <u>bringing in ~$1.25M per month</u> in client spending from two new features in 2021 alone.
<br>• Led and owned <u>5+ cross-team projects</u> that required technical planning, prioritization, task delegation, project execution, documentation, and cross-team coordination.
<br>• Coordinated org-level communications and streamlined the escalation of on-call tickets/issues from the Client Services teams to the Engineering org, reducing escalation latency by 25%.
<br>• Developed <u>10+ essential customer-facing features</u> for Quantcast's new self-serve platform using React, Typescript, Redux, GraphQL, and gRPC Java services.
<br>• Mentored 2 junior developers and led team functions to deliver robust projects while accelerating project completion.
<br>• Identified, researched, and proposed actionable solutions for major new marketing features that would help Quantcast enter new markets, as an <u>interim Associate Product Manager.</u>
</ul>
</li>
<li><br/><b>
<font size = "6">
Software Engineer (full-stack)
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3><a href="https://www.quantcast.com/" target="_blank">Quantcast</a></h3>
<h3>Mar '19 - Oct '21</h3>
</div>
<ul>
• Built custom frontend components using design libraries to support complex features with async calls, debouncing, memorization, and boolean operations in a single interaction while providing ease of use.
<br>• Scaled, migrated, and automated 3 micro-services to improve security and cost-savings using Terraform, Jenkins, AWS: Lambda, EBS, S3, KMS, Route53, and API Gateway which resulted in 5 times faster deployment.
<br>• Designed and created multiple internal tools using Jupyter Notebooks, Python, Spark, Pandas Dataframes, and probability theories, which <u>decreased troubleshooting time by 40%.</u>
<br>• <u>UI/UX:</u> Designed, investigated, and assessed client-facing features to provide immaculate customer journeys.
</ul>
</li>
<li><br/><b>
<font size = "6">
Software Engineering Intern
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3><a href="https://www.sendgrid.com/" target="_blank">SendGrid</a></h3>
<h3>Jun '18 - Sep '18</h3>
</div>
<ul>
• Implemented and tested 6 new production-ready endpoints for SendGrid’s latest Python and Go APIs.
<br>• Resolved 55 GitHub pull requests, issues and code reviews for SendGrid’s open source libraries in Python, Ruby, PHP, Java, C#, NodeJS and Go, leading to improved public community support.
<br>• Designed and developed a <a href="https://github.com/sendgrid/dx-automator">task automating tool</a> for the Developer Experience team that sped up task retrieval by 370% using Docker, React, Python API, PostgreSQL, Flask, and AWS.
</ul>
</li>
<li><br/><b>
<font size = "6">
Marketing Lead
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3>Blockchain at UCI</h3>
<h3>Jan '18 - Jun '18</h3>
</div>
<ul>
• Organized and managed Women in Blockchain with 300+ attendees.
<br>• Contacted and signed sponsors for <a href="https://www.blockchainuci.com/">Blockchain at UCI's</a> events, including Women in Blockchain.
<br>• Promoted and facilitated Blockchain's awareness in Southern California and UCI.
</ul>
</li>
<li><br/><b>
<font size = "6">
Web Developer
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3>HackUCI</h3>
<h3>Apr '17 - Feb '18</h3>
</div>
<ul>
• Built and assisted on the <a href="http://hackuci.com/sponsor/">website</a> for UCI's primary hackathon, HackUCI.
<br>• Coordinated with a team of web developers and designed the website.
<br>• Organized and assisted in making HackUCI a successful 3-day hackathon.
</ul>
</li>
<li><br/><b>
<font size = "6">
Software Engineering Intern
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3>ShoutPoint</h3>
<h3>Jun '17 - Sep '17</h3>
</div>
<ul>
• Designed and built an API frontend in Angular2 which drove up client attraction during product demos.
<br/>• Created JSON schemas and validators to implement in 3+ Package Managers to make the Shoutpoint API's integration process easier and increase developer attraction.
<br/>• Maximized the bounce rate of Shoutpoint's primary website from 35% to 44% by implementing SEO, Google Analytics, and Google AdWords conversion tracking.
</ul>
</li>
<li><br/><b>
<font size = "6">
Tutor for ICS 46 (Data Structures and Analysis of Algorithms)
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3>UCIrvine</h3>
<h3>Apr '17 - Jun '17</h3>
</div>
<ul>
• Tutored 20+ college students in Data Structures and Algorithms in C++ earning an excellent score of 8.75/10
<br> • Deeply understand the working of Data Structures and Datatypes to be able to answer advanced questions<br>
</ul>
</li>
<li><br/><b>
<font size = "6">
Student Ambassador
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3>Leap.ai </h3>
<h3>Mar '17 - Aug '17</h3>
</div>
<ul>
• Create awareness about <a href= "https://leap.ai/ucirvine">Leap.ai</a> and drive sign-ups in targeted groups
<br> • Reach out to competitive and driven individuals with technical backgrounds
<br> • Coordinate with a team of ambassadors and report back weekly<br>
</ul>
</li>
<li><br/><b>
<font size = "6">
Mentor
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3>AppJam+</h3>
<h3>Mar '16 - Dec '16</h3>
</div>
<ul>
• Taught and mentored 8 Middle-school children in MIT's AppInventor environment.
<br/> <i>My responsibilities included:</i>
<br/> • Taught students the basics of Computer Science and lead them into creating an Android app to compete with other teams.
<br/> • Lead and Mentored a group of 4 Middle-School children who made a basic <a href="https://github.com/af4ro/AppJamPlus">Basketball shooting app</a>, and won the first positions from among 12 teams.
<br/> • Lead another group of 4 Middle-School children who made a <a href="https://github.com/af4ro/AppJamPlus">Charity based game</a> and won the second position among 12 other teams.<br/>
</ul>
</li>
<li><br/><b>
<font size = "6">
Student Ambassador
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3>TEDxUCIrvine</h3>
<h3>Feb '16 - May '16</h3>
</div>
<ul>
• Connected with other Campus Organizations to spread awareness about the TEDxUCIrvine program
<br/> • Built Professional networking and leadership skills to represent TEDxUCIrvine
</ul>
</li>
<li><br/><b>
<font size = "6">
Tutor for ICS31
</font></b>
<div style="display:flex; justify-content: space-between; margin-top:0.4em;">
<h3>UCIrvine</h3>
<h3>Jan '16 - Mar '16</h3>
</div>
<ul>
• Tutored more than 30 college students and helped them solve problems related to Python and its basics
<br/> • Introduced the students to Computer Science using the Python Programming language.
</ul>
</li>
<br/>
<h3>Connect with me on <a href="https://www.linkedin.com/in/1997anshul">Linkedin</a> for more information</h3>
</ul>
</article>
<!-- Projects -->
<article id="projects">
<h1 class="major">Projects</h1>
<!-- <span class="image main"><img src="images/pic02.jpg" alt="" /></span> -->
<ul class="alt">
<br><h2>Full-Stack Apps</h2>
<li><br/><b><font size = "6"><a href= "https://github.com/af4ro/AppJudge" target="_blank">AppJudge+</a></font></b>
<span class="image main"><a href= "https://github.com/af4ro/AppJudge" target="_blank"><img src="images/appjudge_judge.gif" alt="" /></a></span>
AppJudge is a judging application desgined for <a href="https://www.appjamplus.org">AppJam+</a>. This application gives the admin the options to add/edit/delete events, teams, mentors, students, questions and judges. The admin can also see the scores in a table form after the judges have scored their assigned teams. The judges have the ability to login and scores their assigned teams.
<br>You can check out the AppJudge+ application <b><a href = "https://github.com/af4ro/AppJudge" target="_blank">here</a></b>.
</li><br/>
<br><h2>Android Apps</h2>
<li><br/><b><font size = "6"><a href= "https://github.com/af4ro/Popular_Movies_Android_app_AND" target="_blank">Popular Movies</a></font></b>
<span class="image main">
<div style="display: flex; justify-content: center; flex-wrap: wrap;">
<img src="images/movies_1.jpg" alt="" style="max-height:485px; max-width:272.82px; padding: 0.5em;"/>
<img src="images/movies_2.jpg" alt="" style="max-height:485px; max-width:272.82px; padding: 0.5em;"/>
</div>
</span> A popular movies lister application that lists either the current Popular movies or Top rated movies and provides more information on them. It gets the infromation from and API and displays more information about the movies while giving you the ability to add it to your favorites.<br>You can check it out <b><a href = "https://github.com/af4ro/Popular_Movies_Android_app_AND" target="_blank">Here</a></b>
</li><br/>
<li><br/><b><font size = "6"><a href= "https://github.com/af4ro/csWithAndroid_Google" target="_blank">Anagram</a></font></b>
<span class="image main">
<div style="display: flex; justify-content: center;">
<img src="images/anagram.jpg" alt="" style="max-height:500px; width:auto;"/>
</div>
</span> Anagram is a simple Android game that quizes you on you anagram making skills! Give a word you have to add a single letter and pridict the anagrams that can be made. If you can't guess them you simply click on the question mark to show you the solutions. Beware! The works become longer with each game. <b><a href = "https://github.com/af4ro/csWithAndroid_Google/tree/master/Anagram" target="_blank">Here</a></b> is the code for reference.
</li><br/>
<br><h2>React Apps</h2>
<li><br/><b><font size = "6"><a href= "https://anshulsinghal.me/React_ScoreBoard_app/" target="_blank">ScoreBoard App</a></font></b>
<span class="image main"><a href= "https://anshulsinghal.me/React_ScoreBoard_app/" target="_blank"><img src="images/ScoreBoard_gif.jpg" alt="" /></a></span> ScoreBoard is a simple React based web-app that keeps track of players' scores. It has additional features like a Stopwatch, a Total Count and the ability to add and delete players. This is a simple project that was made by me while doing a TreeHouse course named "React Basics"
<br>You can check out the ScoreBoard application <b><a href = "https://anshulsinghal.me/React_ScoreBoard_app/" target="_blank">here</a></b>
</li><br/>
<h3>Check out the sourcecode and my other projects on <a href="https://github.com/af4ro">Github</a></h3>
</ul>
</article>
<!-- Activities -->
<article id="activities">
<h2 class="major">Activities</h2>
<span class="image main"><img src="images/pic03.jpg" alt="" /></span>
<p>
<h3> Event Participation</h3>
<ul>
<li>Participant of <b>Twitter's</b> <a href="https://twitter.com/i/moments/877653831693221894" target="_blank">#TechProud Spring Camp 2017</a> (One of 27 attendees selected out of 900+ applicants from across the USA)</li>
<li>Participant of <b>Google's</b> premium <a href="https://www.linkedin.com/feed/update/urn:li:activity:6264654451412471808" target="_blank">Google Games 2017</a></li>
</ul>
<h3>Organization Contributions</h3>
<ul>
<li><b>Blockchain@UCI</b> - Organizer & Marketing Lead</li>
<li><b>Hack@UCI</b> - Organizer & Web Developer</li>
<li><b>ACM</b> - Member</li>
<li><b>ICSSC</b> - Corporate Outreach Lead</li>
<li><b>WICS</b> - Mentor</li>
<li><b>MAISS</b> - Mentor</li>
</ul>
<h3>Hacked at</h3>
<ul>
<li>HackingEDU 2015</li> <li>Cal Hacks 2016</li> <li>HackUCI 2017</li><li>HackTech 2017</li>
</ul>
<h3>Student Ambassador</h3>
<ul>
<li><b>Leap.ai</b>- Drive sign-ups for Leap.ai's platform by targeting and connecting with multiple students</li>
<li><b>TEDxUCIrvine</b>- Built Professional skills and spread knowledge about TEDxUCIrvine on campus</li>
</ul>
<h3>Photography</h3>
<p>
Recreational and professional photography experience since 2010.
<br>Check out my <b><a href="https://vsco.co/af4ro/gallery" target="_blank">visual journal on VSCO</a></b> or <b><a href="https://500px.com/p/af4ro" target="_blank">print-ready photographs on 500px</a></b>.
</p>
<h3>Swimming</h3>
<li>The Bishop's School</li>
<li>Nowrosjee Wadias College</li>
</p>
</article>
<!-- Contact -->
<article id="contact">
<h2 class="major">Contact</h2>
<form method="post" action="#">
<!-- <div class="field half first">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div> -->
<div class="field half">
<h4>Email</h4>
<p> hi [AT] anshulsinghal [DOT] me</br></p>
<!-- <input type="text" name="email" id="email" /> -->
<ul class="actions">
<li><a href="mailto:hi@anshulsinghal.me?Subject=Email%20from%20website" target="_blank" class="button special icon fa-diamond">Email me</a></li>
</ul>
</div>
<!-- <div class="field"> -->
<!-- <label for="message">Message</label>
<textarea name="message" id="message" rows="4"></textarea>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="special" /></li>
<li><input type="reset" value="Reset" /></li>
</ul> -->
</form>
<ul class="icons">
<li>
<div class="tooltip">
<a href="https://www.linkedin.com/in/1997anshul" target="_blank" class="icon fa-linkedin"><span class="tooltiptext tooltip-top">Linkedin</span></a>
</div>
</li>
<li>
<div class="tooltip">
<a href="https://www.pinterest.com/af4ro/" target="_blank" class="icon fa-pinterest"><span class="tooltiptext tooltip-top">Pinterest</span></a>
</div>
</li>
<li>
<div class="tooltip">
<a href="https://vsco.co/af4ro/gallery" target="_blank" class="icon fa-camera"><span class="tooltiptext tooltip-top">VSCO</span></a>
</div>
</li>
<li>
<div class="tooltip">
<a href="https://500px.com/p/af4ro" target="_blank" class="icon fa-500px"><span class="tooltiptext tooltip-top">500px</span></a>
</div>
</li>
</ul>
<ul class="actions">
<li><a href="https://drive.google.com/drive/folders/0B-Lz9FL6GDgKSVYxMDRRN1kzTHc?resourcekey=0-EJvQjoV2AifVaI6GcP7TeA&usp=sharing" class="button special icon fa-download">Resume</a></li>
</ul>
</article>
<!-- Elements -->
<article id="elements">
<h2 class="major">Elements</h2>
<section>
<h3 class="major">Text</h3>
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
<hr />
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<hr />
<h4>Blockquote</h4>
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
<h4>Preformatted</h4>
<pre><code>i = 0;
while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
</section>
<section>
<h3 class="major">Lists</h3>
<h4>Unordered</h4>
<ul>
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
<h4>Alternate</h4>
<ul class="alt">
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
<h4>Ordered</h4>
<ol>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis viverra.</li>
<li>Felis enim feugiat.</li>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis lorem.</li>
<li>Felis enim et feugiat.</li>
</ol>
<h4>Icons</h4>
<ul class="icons">
<li><a href="https://www.linkedin.com/in/1997anshul" class="icon fa-Linkedin"><span class="label">Linkedin</span></a></li>
<li><a href="https://www.facebook.com/1997anshulsinghal" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="https://www.instagram.com/af4ro/" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://github.com/af4ro" class="icon fa-github"><span class="label">Github</span></a></li>
<li><a href="https://drive.google.com/drive/folders/0B-Lz9FL6GDgKSVYxMDRRN1kzTHc?resourcekey=0-EJvQjoV2AifVaI6GcP7TeA&usp=sharing" class="icon fa-file"><span class="label">Resume</span></a></li>
</ul>
<h4>Actions</h4>
<ul class="actions">
<li><a href="#" class="button special">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions vertical">
<li><a href="#" class="button special">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
</section>
<section>
<h3 class="major">Table</h3>
<h4>Default</h4>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
<h4>Alternate</h4>
<div class="table-wrapper">
<table class="alt">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
</section>
<section>
<h3 class="major">Buttons</h3>
<ul class="actions">
<li><a href="#" class="button special">Special</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button small">Small</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button special icon fa-download">Icon</a></li>
<li><a href="#" class="button icon fa-download">Icon</a></li>
</ul>
<ul class="actions">
<li><span class="button special disabled">Disabled</span></li>
<li><span class="button disabled">Disabled</span></li>
</ul>
</section>
<section>
<h3 class="major">Form</h3>
<form method="post" action="#">
<div class="field half first">
<label for="demo-name">Name</label>
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
</div>
<div class="field half">
<label for="demo-email">Email</label>
<input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
</div>
<div class="field">
<label for="demo-category">Category</label>
<div class="select-wrapper">
<select name="demo-category" id="demo-category">
<option value="">-</option>
<option value="1">Manufacturing</option>
<option value="1">Shipping</option>
<option value="1">Administration</option>
<option value="1">Human Resources</option>
</select>
</div>
</div>
<div class="field half first">
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
<label for="demo-priority-low">Low</label>
</div>
<div class="field half">
<input type="radio" id="demo-priority-high" name="demo-priority">
<label for="demo-priority-high">High</label>
</div>
<div class="field half first">
<input type="checkbox" id="demo-copy" name="demo-copy">
<label for="demo-copy">Email me a copy</label>
</div>
<div class="field half">
<input type="checkbox" id="demo-human" name="demo-human" checked>
<label for="demo-human">Not a robot</label>
</div>
<div class="field">
<label for="demo-message">Message</label>
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="special" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
</section>
</article>
</div>
<!-- Footer -->
<footer id="footer">
<ul class="icons icons-flex-container">
<div class="icons-flex-sub-container">
<li>
<div class="tooltip">
<a href="https://www.linkedin.com/in/1997anshul" target="_blank" class="icon fa-linkedin"><span class="tooltiptext tooltip-top">Linkedin</span></a>
</div>
</li>
<li>
<div class="tooltip">
<a href="https://vsco.co/af4ro/gallery" target="_blank" class="icon fa-camera"><span class="tooltiptext tooltip-top">VSCO</span></a>
</div>
</li>
<li>
<div class="tooltip">
<a href="https://500px.com/p/af4ro" target="_blank" class="icon fa-500px"><span class="tooltiptext tooltip-top">500px</span></a>
</div>
</li>
<li>
<div class="tooltip">
<a href="https://www.pinterest.com/af4ro/" target="_blank" class="icon fa-pinterest"><span class="tooltiptext tooltip-top">Pinterest</span></a>
</div>
</li>
</div>
</ul>
<ul class="actions">
<li><a href="https://drive.google.com/drive/folders/0B-Lz9FL6GDgKSVYxMDRRN1kzTHc?resourcekey=0-EJvQjoV2AifVaI6GcP7TeA&usp=sharing" target="_blank" class="button special icon fa-download">Resume</a></li>
</ul>
<p class="copyright">Created and photograped with ❤ by: <a href="https://500px.com/p/af4ro">Anshul</a></p>
</footer>
</div>
<!-- Particles-->
<!-- <link rel="stylesheet" href="assets/css/materialize.css"> -->
<canvas data-0p="background-color: rgba(44, 62, 80,1.0)" data-100p="background-color: background-color: rgb(68, 63, 103, 1.0);" class='connecting-dots'></canvas>
<!--Particles end-->
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/jquery-3.1.0.min.js"></script>
<!-- <script src="assets/js/materialize.min.js"></script> -->
<script src="assets/js/dots.js" charset="utf-8"></script>
</body>
</html>