-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
699 lines (629 loc) · 56.2 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Shawn Aviles</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/img/favicon/site.webmanifest">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- Particles -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.bundle.min.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-58NMKFXCW9"></script>
<!-- Utility functions -->
<script src="assets/js/utility.js"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-58NMKFXCW9');
updateLiveStatusBubble('nautiPhrasesStatus', 'https://nautical-translator.vercel.app')
</script>
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<i class="bx bx-menu mt-3 mobile-nav-toggle d-xl-none"></i>
<!-- ======= Header ======= -->
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul>
<li><a href="#hero" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>
<li><a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About Me</span></a></li>
<li><a href="#skills" class="nav-link scrollto"><i class="bx bx-code-alt"></i> <span>Skills</span></a></li>
<li><a href="#projects" class="nav-link scrollto"><i class='bx bx-cog'></i> <span>Projects</span></a></li>
<li><a href="#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i> <span>Experience</span></a></li>
<li><a href="#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
</ul>
</nav>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center position-relative">
<div id="tsparticles"></div>
<div class="container" data-aos="zoom-in" data-aos-delay="100">
<h1>Shawn Aviles</h1>
<p>I'm a <span class="typed" data-typed-items="Software Engineer, Computer Engineer, Web Developer, Student"></span></p>
<div class="social-links">
<a href="https://www.linkedin.com/in/shawn-aviles" target="_blank" rel="noopener noreferrer"><i class="bx bxl-linkedin"></i></a>
<a href="https://github.com/ShawnAviles" target="_blank" rel="noopener noreferrer"><i class="bx bxl-github"></i></a>
<a href="assets/img/resume.pdf" target="_blank" rel="noopener noreferrer"><i class="bx bx-file"></i></a>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>About Me</h2>
</div>
<div class="row">
<div class="col-lg-4 align-self-center">
<img loading="lazy" src="assets/img/profile.jpg" class="img-fluid" style="border: 5px solid #0a89ff; border-radius: 20px">
</div>
<div class="col-lg-8 pt-4 pt-lg-1 content align-self-center">
<div class="row pb-4">
<p class="text-center">
Hi! I'm Shawn Aviles. I'm currently an Graduate Computer Engineering Student
at <span style="color:#0a89ff">Stevens Institute of Technology</span>. I will be completing my Masters in May
2025 with a Masters of Engineering in Computer Engineering with a concentration in
Artificial Intelligence. I have had a passion for engineering and creating since I was a child and
plan to pursue that as a career in Software Engineering. Some of my hobbies include skateboarding, fitness, 3D-Printing, and
volleyball.
</p>
</div>
<div class="row row-cols-2 row-cols-sm-2 row-cols-md-4 row-cols-lg-4 gy-3">
<div class="col d-flex justify-content-center">
<div class="about-me-bubble"><img loading="lazy" width="140" height="140" src="assets/img/bubbles/VolleyballIcon.svg" style="padding: 15px 15px 15px 15px !important;"></div>
</div>
<div class="col d-flex justify-content-center">
<div class="about-me-bubble"><img loading="lazy" width="140" height="140" src="assets/img/bubbles/3dPrinterIcon.svg" style="padding: 15px 15px 15px 15px !important;"></div>
</div>
<div class="col d-flex justify-content-center">
<div class="about-me-bubble"><img loading="lazy" width="140" height="140" src="assets/img/bubbles/SkateboardIcon.svg"></div>
</div>
<div class="col d-flex justify-content-center">
<div class="about-me-bubble"><img loading="lazy" width="140" height="140" src="assets/img/bubbles/StevensIcon.svg"></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Skills</h2>
</div>
<h3 class="text-center skills-title">Languages</h3>
<div class="row justify-content-center row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 gy-3">
<div class="col" data-aos="zoom-in" data-aos-delay="100">
<div class="icon-box iconbox-blue">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185H1.408z"></path>
<path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"></path>
</svg>
</div>
<h4>JavaScript</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<path fill="#fff" d="M22.67 47h99.67v73.67H22.67z"></path><path data-name="original" fill="#007acc" d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z"></path>
</svg>
</div>
<h4>TypeScript</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="200">
<div class="icon-box iconbox-orange ">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<path fill="#386f9f" d="M63.391 1.988c-4.222.02-8.252.379-11.8 1.007-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137H29.977c-7.176 0-13.46 4.313-15.426 12.521-2.268 9.405-2.368 15.275 0 25.096 1.755 7.311 5.947 12.519 13.124 12.519h8.491V67.234c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548V15.833c0-6.693-5.646-11.72-12.346-12.837-4.244-.706-8.645-1.027-12.866-1.008zM50.037 9.557c2.55 0 4.634 2.117 4.634 4.721 0 2.593-2.083 4.69-4.634 4.69-2.56 0-4.633-2.097-4.633-4.69-.001-2.604 2.073-4.721 4.633-4.721z" transform="translate(0 10.26)"></path>
<path fill="#ffcf46" d="M91.682 28.38v10.966c0 8.5-7.208 15.655-15.426 15.655H51.591c-6.756 0-12.346 5.783-12.346 12.549v23.515c0 6.691 5.818 10.628 12.346 12.547 7.816 2.297 15.312 2.713 24.665 0 6.216-1.801 12.346-5.423 12.346-12.547v-9.412H63.938v-3.138h37.012c7.176 0 9.852-5.005 12.348-12.519 2.578-7.735 2.467-15.174 0-25.096-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zM77.809 87.927c2.561 0 4.634 2.097 4.634 4.692 0 2.602-2.074 4.719-4.634 4.719-2.55 0-4.633-2.117-4.633-4.719 0-2.595 2.083-4.692 4.633-4.692z" transform="translate(0 10.26)"></path><radialGradient id="python-original-c" cx="1825.678" cy="444.45" r="26.743" gradientTransform="matrix(0 -.24 -1.055 0 532.979 557.576)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#B8B8B8" stop-opacity=".498"></stop><stop offset="1" stop-color="#7F7F7F" stop-opacity="0"></stop></radialGradient><path opacity=".444" fill="url(#python-original-c)" d="M97.309 119.597c0 3.543-14.816 6.416-33.091 6.416-18.276 0-33.092-2.873-33.092-6.416 0-3.544 14.815-6.417 33.092-6.417 18.275 0 33.091 2.872 33.091 6.417z"></path>
</svg>
</div>
<h4>Python</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<path fill="#9C033A"d="M117.5 33.5l.3-.2c-.6-1.1-1.5-2.1-2.4-2.6L67.1 2.9c-.8-.5-1.9-.7-3.1-.7-1.2 0-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.3.9 3.4l-.2.1c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7 1.2 0 2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c.1-.8 0-1.7-.4-2.6zM82 66v-4h5v-5h5v5h5v4h-5v5h-5v-5h-5zm3.3-14C81.1 44.5 73.1 39.5 64 39.5c-13.5 0-24.5 11-24.5 24.5s11 24.5 24.5 24.5c9.1 0 17.1-5 21.3-12.4l12.9 7.6c-6.8 11.8-19.6 19.8-34.2 19.8-21.8 0-39.5-17.7-39.5-39.5S42.2 24.5 64 24.5c14.7 0 27.5 8.1 34.3 20l-13 7.5zM115 66h-5v5h-4v-5h-6v-4h6v-5h4v5h5v4z"></path>
</svg>
</div>
<h4>C++</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg height="75" width="75" viewBox="0 0 128 128">
<path fill="#0074BD"
d="M47.617 98.12s-4.767 2.774 3.397 3.71c9.892 1.13 14.947.968 25.845-1.092 0 0 2.871 1.795 6.873 3.351-24.439 10.47-55.308-.607-36.115-5.969zm-2.988-13.665s-5.348 3.959 2.823 4.805c10.567 1.091 18.91 1.18 33.354-1.6 0 0 1.993 2.025 5.132 3.131-29.542 8.64-62.446.68-41.309-6.336z">
</path>
<path fill="#EA2D2E"
d="M69.802 61.271c6.025 6.935-1.58 13.17-1.58 13.17s15.289-7.891 8.269-17.777c-6.559-9.215-11.587-13.792 15.635-29.58 0 .001-42.731 10.67-22.324 34.187z">
</path>
<path fill="#0074BD"
d="M102.123 108.229s3.529 2.91-3.888 5.159c-14.102 4.272-58.706 5.56-71.094.171-4.451-1.938 3.899-4.625 6.526-5.192 2.739-.593 4.303-.485 4.303-.485-4.953-3.487-32.013 6.85-13.743 9.815 49.821 8.076 90.817-3.637 77.896-9.468zM49.912 70.294s-22.686 5.389-8.033 7.348c6.188.828 18.518.638 30.011-.326 9.39-.789 18.813-2.474 18.813-2.474s-3.308 1.419-5.704 3.053c-23.042 6.061-67.544 3.238-54.731-2.958 10.832-5.239 19.644-4.643 19.644-4.643zm40.697 22.747c23.421-12.167 12.591-23.86 5.032-22.285-1.848.385-2.677.72-2.677.72s.688-1.079 2-1.543c14.953-5.255 26.451 15.503-4.823 23.725 0-.002.359-.327.468-.617z">
</path>
<path fill="#EA2D2E"
d="M76.491 1.587S89.459 14.563 64.188 34.51c-20.266 16.006-4.621 25.13-.007 35.559-11.831-10.673-20.509-20.07-14.688-28.815C58.041 28.42 81.722 22.195 76.491 1.587z">
</path>
<path fill="#0074BD"
d="M52.214 126.021c22.476 1.437 57-.8 57.817-11.436 0 0-1.571 4.032-18.577 7.231-19.186 3.612-42.854 3.191-56.887.874 0 .001 2.875 2.381 17.647 3.331z">
</path>
</svg>
</div>
<h4>Java</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg height="75" width="75" viewBox="0 0 128 128">
<path fill="#1572B6" d="M18.814 114.123L8.76 1.352h110.48l-10.064 112.754-45.243 12.543-45.119-12.526z"></path>
<path fill="#33A9DC" d="M64.001 117.062l36.559-10.136 8.601-96.354h-45.16v106.49z"></path>
<path fill="#fff" d="M64.001 51.429h18.302l1.264-14.163H64.001V23.435h34.682l-.332 3.711-3.4 38.114h-30.95V51.429z">
</path>
<path fill="#EBEBEB"
d="M64.083 87.349l-.061.018-15.403-4.159-.985-11.031H33.752l1.937 21.717 28.331 7.863.063-.018v-14.39z"></path>
<path fill="#fff" d="M81.127 64.675l-1.666 18.522-15.426 4.164v14.39l28.354-7.858.208-2.337 2.406-26.881H81.127z">
</path>
<path fill="#EBEBEB"
d="M64.048 23.435v13.831H30.64l-.277-3.108-.63-7.012-.331-3.711h34.646zm-.047 27.996v13.831H48.792l-.277-3.108-.631-7.012-.33-3.711h16.447z">
</path>
</svg>
</div>
<h4>CSS</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<path fill="#E44D26" d="M19.037 113.876L9.032 1.661h109.936l-10.016 112.198-45.019 12.48z"></path>
<path fill="#F16529" d="M64 116.8l36.378-10.086 8.559-95.878H64z"></path>
<path fill="#EBEBEB"
d="M64 52.455H45.788L44.53 38.361H64V24.599H29.489l.33 3.692 3.382 37.927H64zm0 35.743l-.061.017-15.327-4.14-.979-10.975H33.816l1.928 21.609 28.193 7.826.063-.017z">
</path>
<path fill="#fff"
d="M63.952 52.455v13.763h16.947l-1.597 17.849-15.35 4.143v14.319l28.215-7.82.207-2.325 3.234-36.233.335-3.696h-3.708zm0-27.856v13.762h33.244l.276-3.092.628-6.978.329-3.692z">
</path>
</svg>
</div>
<h4>HTML</h4>
</div>
</div>
</div>
<h3 class="text-center skills-title pt-5">Libraries & Frameworks</h3>
<div class="row justify-content-center row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 gy-3">
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg height="75" width="75" viewBox="0 15 100 100">
<path fill="#404137" d="M97.982 68.43c.313-.183.506-.517.506-.88v-2.354c0-.362-.192-.696-.506-.879l-8.364-4.856a1.017 1.017 0 00-1.019-.002l-8.416 4.859a1.018 1.018 0 00-.508.88v9.716c0 .365.196.703.514.884l8.363 4.765c.308.177.686.178.997.006l5.058-2.812a.508.508 0 00.006-.885l-8.468-4.86a.507.507 0 01-.256-.44v-3.046c0-.182.097-.349.254-.439l2.637-1.52a.505.505 0 01.507 0l2.637 1.52a.507.507 0 01.255.439v2.396a.507.507 0 00.764.44l5.039-2.932"></path>
<path fill="#83CD29" d="M88.984 67.974a.2.2 0 01.195 0l1.615.933c.06.035.097.1.097.169v1.865c0 .07-.037.134-.097.169l-1.615.932a.194.194 0 01-.195 0l-1.614-.932a.194.194 0 01-.098-.169v-1.865c0-.069.037-.134.098-.169l1.614-.933"></path>
<path fill="#404137" d="M67.083 71.854c0 .09-.048.174-.127.22l-2.89 1.666a.251.251 0 01-.254 0l-2.89-1.666a.255.255 0 01-.127-.22v-3.338c0-.09.049-.175.127-.221l2.89-1.668a.248.248 0 01.255 0l2.891 1.668a.258.258 0 01.126.221v3.338zm.781-24.716a.511.511 0 00-.756.444v12.915a.359.359 0 01-.177.308.359.359 0 01-.356 0l-2.108-1.215a1.017 1.017 0 00-1.015 0l-8.418 4.858a1.018 1.018 0 00-.509.881v9.719c0 .363.194.698.508.881l8.418 4.861c.314.182.702.182 1.017 0l8.42-4.861a1.02 1.02 0 00.508-.881V50.821c0-.368-.2-.708-.521-.888l-5.011-2.795"></path>
<path fill="#83CD29" d="M38.238 59.407a1.014 1.014 0 011.016 0l8.418 4.857c.314.182.508.518.508.881v9.722c0 .363-.194.699-.508.881l-8.417 4.861a1.02 1.02 0 01-1.017 0l-8.415-4.861a1.02 1.02 0 01-.508-.881v-9.723c0-.362.194-.698.508-.88l8.415-4.857"></path>
<path fill="#404137" d="M22.93 65.064c0-.366-.192-.702-.508-.883l-8.415-4.843a.99.99 0 00-.464-.133h-.087a.993.993 0 00-.464.133l-8.416 4.843a1.02 1.02 0 00-.509.883l.018 13.04c0 .182.095.351.254.439a.487.487 0 00.505 0l5-2.864c.316-.188.509-.519.509-.882v-6.092c0-.364.192-.699.507-.881l2.13-1.226a.994.994 0 01.508-.137c.174 0 .352.044.507.137l2.128 1.226c.315.182.509.517.509.881v6.092c0 .363.195.696.509.882l5 2.864a.508.508 0 00.76-.439l.019-13.04"></path>
</svg>
</div>
<h4>Node.js</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<g fill="#61DAFB"><circle cx="64" cy="64" r="11.4"></circle>
<path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"></path></g>
</svg>
</div>
<h4>React.js</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<circle cx="64" cy="64" r="64"></circle><path fill="url(#a)" d="M106.317 112.014 49.167 38.4H38.4v51.179h8.614v-40.24l52.54 67.884a64.216 64.216 0 0 0 6.763-5.209z"></path><path fill="url(#b)" d="M81.778 38.4h8.533v51.2h-8.533z"></path><defs><linearGradient id="a" x1="109" x2="144.5" y1="116.5" y2="160.5" gradientTransform="scale(.71111)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"></stop><stop offset="1" stop-color="#fff" stop-opacity="0"></stop></linearGradient><linearGradient id="b" x1="121" x2="120.799" y1="54" y2="106.875" gradientTransform="scale(.71111)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"></stop><stop offset="1" stop-color="#fff" stop-opacity="0"></stop></linearGradient></defs>
</svg>
</div>
<h4>Next.js</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 27 16">
<path d="M13.227 0.0742188C9.699 0.0742188 7.5 1.85222 6.625 5.37522C7.949 3.60222 9.5 2.94922 11.25 3.39822C12.25 3.64822 12.977 4.37522 13.773 5.19922C15.074 6.52322 16.574 8.05122 19.852 8.05122C23.375 8.05122 25.574 6.27322 26.449 2.75022C25.125 4.52322 23.574 5.17622 21.824 4.72722C20.824 4.47722 20.102 3.75022 19.301 2.92622C18 1.60222 16.5 0.0742188 13.227 0.0742188ZM6.602 8.00022C3.074 8.00022 0.875 9.77322 0 13.3002C1.324 11.5232 2.875 10.8752 4.625 11.3242C5.625 11.5742 6.352 12.3012 7.148 13.1252C8.449 14.4492 9.949 15.9772 13.227 15.9772C16.75 15.9772 18.949 14.1992 19.824 10.6762C18.5 12.4492 16.949 13.1022 15.199 12.6482C14.199 12.3982 13.477 11.6762 12.676 10.8522C11.398 9.52321 9.898 8.00022 6.602 8.00022Z" fill="#38BDF8"/>
</svg>
</div>
<h4>TailwindCSS</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<path fill="#0868AC" d="M9.625 32.181C-1.404 48.032-.031 68.657 8.394 85.501c.2.404.41.801.617 1.198l.394.759.246.437.439.786c.262.461.53.92.804 1.379l.459.756c.304.491.615.976.933 1.46l.398.614c.439.655.888 1.309 1.352 1.951l.039.05.228.308c.401.553.814 1.099 1.232 1.639l.464.59c.373.469.752.935 1.138 1.399l.435.52a75.27 75.27 0 001.586 1.812l.033.033.061.068a80.44 80.44 0 001.612 1.699l.517.521c.423.426.853.845 1.287 1.262l.527.5c.58.547 1.166 1.083 1.764 1.607l.028.022.307.262c.527.456 1.063.909 1.603 1.353l.664.529c.441.354.887.702 1.336 1.044l.714.543c.496.365.995.724 1.499 1.075l.546.387.15.107c.478.329.967.646 1.456.963l.63.42c.75.474 1.51.943 2.279 1.396l.63.355c.565.326 1.134.646 1.71.959.312.168.632.327.946.488.407.213.811.429 1.225.636l.283.137.501.242c.641.306 1.287.607 1.94.897l.41.184a66.92 66.92 0 002.263.941l.551.217c.704.271 1.418.539 2.135.791l.268.093c.787.275 1.581.53 2.381.779l.575.172c.814.245 1.619.538 2.458.693 53.339 9.727 68.833-32.053 68.833-32.053-13.013 16.953-36.111 21.425-57.996 16.446-.829-.187-1.633-.446-2.442-.685l-.609-.185a72.498 72.498 0 01-2.352-.765l-.323-.117a72.245 72.245 0 01-2.074-.769l-.582-.229c-.752-.297-1.5-.607-2.239-.931l-.447-.198a92.857 92.857 0 01-1.889-.879l-.546-.262c-.491-.239-.977-.493-1.461-.743-.324-.171-.654-.332-.975-.51a58.591 58.591 0 01-1.751-.982l-.591-.33a81.221 81.221 0 01-2.28-1.397l-.615-.41a59.283 59.283 0 01-1.623-1.079l-.522-.367a89.287 89.287 0 01-1.534-1.109l-.679-.514a64.473 64.473 0 01-1.384-1.082l-.617-.495a82.693 82.693 0 01-1.724-1.453l-.189-.159a83.466 83.466 0 01-1.812-1.647l-.511-.491c-.441-.42-.875-.843-1.302-1.277l-.51-.509a70.541 70.541 0 01-1.598-1.69l-.079-.084a67.39 67.39 0 01-1.621-1.844l-.424-.504a70.602 70.602 0 01-1.167-1.442l-.427-.532a78.406 78.406 0 01-1.347-1.794c-12.15-16.574-16.516-39.432-6.805-58.204m25.629-2.434c-7.977 11.478-7.543 26.844-1.321 38.983a50.581 50.581 0 003.528 5.889c1.195 1.713 2.52 3.751 4.106 5.127a48.111 48.111 0 001.79 1.858l.472.465a51.69 51.69 0 001.828 1.698l.074.064.018.018a55.268 55.268 0 002.135 1.767l.485.378a54.08 54.08 0 002.233 1.631l.065.049c.336.232.678.448 1.019.672l.483.319c.544.349 1.095.689 1.655 1.015l.235.136c.483.278.972.552 1.463.818l.521.271c.339.177.678.358 1.023.53l.155.07c.703.346 1.412.68 2.136.995l.472.194c.579.246 1.164.486 1.75.71l.75.275c.533.198 1.068.378 1.607.559l.727.233c.767.238 1.525.539 2.324.672 41.183 6.823 50.691-24.886 50.691-24.886-8.57 12.343-25.168 18.233-42.879 13.635a50.376 50.376 0 01-2.333-.674l-.701-.227a45.423 45.423 0 01-1.631-.562l-.736-.274a56.418 56.418 0 01-1.756-.708l-.473-.2a47.728 47.728 0 01-2.148-.999c-.363-.177-.72-.364-1.078-.548l-.622-.32a44.502 44.502 0 01-1.363-.77l-.326-.185a47.844 47.844 0 01-1.651-1.008l-.498-.332a61.759 61.759 0 01-1.069-.707 57.456 57.456 0 01-2.226-1.628l-.501-.395c-7.752-6.12-13.898-14.486-16.819-23.971-3.062-9.836-2.402-20.878 2.903-29.84m22.278-.775c-4.702 6.92-5.164 15.514-1.901 23.156 3.441 8.113 10.491 14.476 18.72 17.495.339.125.679.237 1.022.354l.451.143c.485.152.966.329 1.467.424 22.74 4.394 28.908-11.669 30.549-14.034-5.402 7.779-14.482 9.646-25.623 6.942-.88-.213-1.847-.531-2.695-.832a33.242 33.242 0 01-3.201-1.329 33.215 33.215 0 01-5.612-3.424c-9.969-7.565-16.162-21.994-9.657-33.745"></path>
</svg>
</div>
<h4>jQuery</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<g fill="#47848f"><path d="M49.07 32.66c-14.37-2.62-25.72.12-30.25 8-3.38 5.85-2.41 13.61 2.34 21.9a1.47 1.47 0 002.56-1.47c-4.28-7.47-5.12-14.17-2.35-19 3.76-6.51 13.89-9 27.17-6.54a1.47 1.47 0 10.53-2.9zM28.63 72.61a92.2 92.2 0 0022 17.34c20.84 12 43 15.25 54 7.79a1.47 1.47 0 00-1.66-2.43C93.11 102 72 98.92 52.07 87.39a89.27 89.27 0 01-21.26-16.77 1.47 1.47 0 00-2.18 2z"></path><path d="M101.06 70.81c9.41-11.11 12.69-22.29 8.17-30.11-3.32-5.76-10.35-8.8-19.69-8.92a1.47 1.47 0 000 2.95c8.4.11 14.45 2.73 17.18 7.45 3.75 6.5.82 16.47-7.87 26.74a1.47 1.47 0 102.25 1.9zM76.89 33.15a92 92 0 00-26.25 10.4C29.13 56 15.09 74.29 17 87.57a1.47 1.47 0 003-.43C18.23 75.35 31.53 58 52.11 46.11A89.07 89.07 0 0177.51 36a1.47 1.47 0 10-.62-2.88z"></path><path d="M42 96.78C47 110.51 55 119 64.05 119c6.6 0 12.7-4.5 17.46-12.42A1.47 1.47 0 1079 105c-4.28 7.12-9.53 11-14.94 11-7.52 0-14.69-7.54-19.24-20.24a1.47 1.47 0 00-2.77 1zm45-2.69a92.5 92.5 0 003.91-27.3c0-24.41-8.54-45.44-20.71-50.85a1.47 1.47 0 00-1.2 2.7c10.85 4.82 19 24.78 19 48.15a89.57 89.57 0 01-3.78 26.42 1.47 1.47 0 002.81.88zM114.71 92.65a7.05 7.05 0 10-7.05 7.05 7.05 7.05 0 007.05-7.05zm-2.95 0a4.1 4.1 0 11-4.1-4.1 4.1 4.1 0 014.1 4.1zM20.34 99.7a7.05 7.05 0 10-7.05-7.05 7.05 7.05 0 007.05 7.05zm0-2.95a4.1 4.1 0 114.1-4.1 4.1 4.1 0 01-4.1 4.1z"></path><path d="M64.05 23.13A7.05 7.05 0 1057 16.08a7.05 7.05 0 007.05 7.05zm0-2.95a4.1 4.1 0 114.1-4.1 4.1 4.1 0 01-4.1 4.1zM65.13 71.77A5.1 5.1 0 1169 65.71a5.1 5.1 0 01-3.87 6.06z"></path></g>
</svg>
</div>
<h4>Electron.js</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<defs><linearGradient id="bootstrap-original-a" x1="76.079" x2="523.48" y1="10.798" y2="365.95" gradientTransform="translate(1.11 14.613) scale(.24566)" gradientUnits="userSpaceOnUse"><stop stop-color="#9013fe" offset="0"></stop><stop stop-color="#6610f2" offset="1"></stop></linearGradient><linearGradient id="bootstrap-original-b" x1="193.51" x2="293.51" y1="109.74" y2="278.87" gradientTransform="translate(0 52)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" offset="0"></stop><stop stop-color="#f1e5fc" offset="1"></stop></linearGradient><filter id="bootstrap-original-c" x="161.9" y="135.46" width="197" height="249" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix><feOffset dy="4"></feOffset><feGaussianBlur stdDeviation="8"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"></feColorMatrix><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend></filter></defs><path d="M14.985 27.712c-.237-6.815 5.072-13.099 12.249-13.099h73.54c7.177 0 12.486 6.284 12.249 13.099-.228 6.546.068 15.026 2.202 21.94 2.141 6.936 5.751 11.319 11.664 11.883v6.387c-5.913.564-9.523 4.947-11.664 11.883-2.134 6.914-2.43 15.394-2.202 21.94.237 6.815-5.072 13.098-12.249 13.098h-73.54c-7.177 0-12.486-6.284-12.249-13.098.228-6.546-.068-15.026-2.203-21.94-2.14-6.935-5.76-11.319-11.673-11.883v-6.387c5.913-.563 9.533-4.947 11.673-11.883 2.135-6.914 2.43-15.394 2.203-21.94z" fill="url(#bootstrap-original-a)"></path><path transform="translate(1.494 2.203) scale(.24566)" d="M267.1 364.46c47.297 0 75.798-23.158 75.798-61.355 0-28.873-20.336-49.776-50.532-53.085v-1.203c22.185-3.609 39.594-24.211 39.594-47.219 0-32.783-25.882-54.138-65.322-54.138h-88.74v217zm-54.692-189.48h45.911c24.958 0 39.131 11.128 39.131 31.279 0 21.505-16.484 33.535-46.372 33.535h-38.67zm0 161.96v-71.431h45.602c32.661 0 49.608 12.03 49.608 35.49 0 23.459-16.484 35.941-47.605 35.941z" fill="url(#bootstrap-original-b)" filter="url(#bootstrap-original-c)" stroke="#fff"></path>
</svg>
</div>
<h4>Bootstrap</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<defs>
<path
d="M54.74 128L32.9 115.32V40.55L0 59.56l.08-28.32L54.74 0v128zM59.65 0v128l21.84-12.68V79.31l16.49 9.53-.1-24.63-16.39-9.36v-14.3l32.89 19.01-.08-28.32L59.65 0z"
id="tensorflow-original-a"></path>
</defs>
<path
style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal;"
d="M61.55 128l-21.84-12.68V40.55L6.81 59.56l.08-28.32L61.55 0zM66.46 0v128l21.84-12.68V79.31l16.49 9.53-.1-24.63-16.39-9.36v-14.3l32.89 19.01-.08-28.32z"
color="#000" font-weight="400" font-family="sans-serif" overflow="visible" fill="#ff6f00"></path>
<use xlink:href="#tensorflow-original-a" fill-opacity="0" stroke="#000" stroke-opacity="0"></use>
</svg>
</div>
<h4>Tensorflow</h4>
</div>
</div>
</div>
<h3 class="text-center skills-title pt-5">Technologies</h3>
<div class="row justify-content-center row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 gy-3">
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg height="75" width="75" viewBox="0 0 128 128">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#4FAA41" d="M90.491 57.282c-.37-4.79-1.496-9.409-3.062-13.934-3.244-10.104-8.45-19.046-15.783-26.74-1.854-1.946-3.916-3.729-5.209-6.151-.818-1.532-1.597-3.085-2.394-4.629l-.505-1.273c-.085.292-.139.396-.142.501-.065 2.517-1.491 4.224-3.267 5.817-1.997 1.793-3.856 3.739-5.775 5.618l-5.901 7.763c-1.592 2.925-3.182 5.85-4.772 8.775l-3.19 8.617-.096.134c-1.756 5.768-2.622 11.698-3.048 17.688-.16 2.251.022 4.535.149 6.798.181 3.235.743 6.415 1.586 9.545 3.062 11.372 9.276 20.805 17.771 28.819 1.579 1.489 3.199 2.843 4.847 4.26.282-.965.507-1.93.763-2.895.256-.961.515-1.917.688-2.881-.174.964-.369 1.92-.562 2.881l-.826 2.895.738 2.501.684 3.884.326 4.053c-.003.823-.036 1.648.014 2.47.012.21.288.404.442.606l1.376.483 1.434.558-.246-3.603-.011-3.548.495-5.405.359-1.177 1.027-1.82c1.268-1.02 2.629-1.946 3.784-3.081 2.09-2.054 4.175-4.134 6.045-6.383a47.846 47.846 0 006.191-9.516c1.122-2.284 2.178-4.614 3.052-7.001.77-2.104 1.247-4.315 1.854-6.479.054-.156.126-.309.16-.468 1.254-5.841 1.465-11.741 1.004-17.682zm-23.599 49.375l-.805-1.763.805 1.763 1.183 1.01-1.183-1.01z"></path>
</svg>
</div>
<h4>MongoDB</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg height="75" width="75" viewBox="0 0 24 24">
<path d="M6.763 10.036c0 .296.032.535.088.71.064.176.144.368.256.576.04.063.056.127.056.183 0 .08-.048.16-.152.24l-.503.335a.383.383 0 0 1-.208.072c-.08 0-.16-.04-.239-.112a2.47 2.47 0 0 1-.287-.375 6.18 6.18 0 0 1-.248-.471c-.622.734-1.405 1.101-2.347 1.101-.67 0-1.205-.191-1.596-.574-.391-.384-.59-.894-.59-1.533 0-.678.239-1.23.726-1.644.487-.415 1.133-.623 1.955-.623.272 0 .551.024.846.064.296.04.6.104.918.176v-.583c0-.607-.127-1.03-.375-1.277-.255-.248-.686-.367-1.3-.367-.28 0-.568.031-.863.103-.295.072-.583.16-.862.272a2.287 2.287 0 0 1-.28.104.488.488 0 0 1-.127.023c-.112 0-.168-.08-.168-.247v-.391c0-.128.016-.224.056-.28a.597.597 0 0 1 .224-.167c.279-.144.614-.264 1.005-.36a4.84 4.84 0 0 1 1.246-.151c.95 0 1.644.216 2.091.647.439.43.662 1.085.662 1.963v2.586zm-3.24 1.214c.263 0 .534-.048.822-.144.287-.096.543-.271.758-.51.128-.152.224-.32.272-.512.047-.191.08-.423.08-.694v-.335a6.66 6.66 0 0 0-.735-.136 6.02 6.02 0 0 0-.75-.048c-.535 0-.926.104-1.19.32-.263.215-.39.518-.39.917 0 .375.095.655.295.846.191.2.47.296.838.296zm6.41.862c-.144 0-.24-.024-.304-.08-.064-.048-.12-.16-.168-.311L7.586 5.55a1.398 1.398 0 0 1-.072-.32c0-.128.064-.2.191-.2h.783c.151 0 .255.025.31.08.065.048.113.16.16.312l1.342 5.284 1.245-5.284c.04-.16.088-.264.151-.312a.549.549 0 0 1 .32-.08h.638c.152 0 .256.025.32.08.063.048.12.16.151.312l1.261 5.348 1.381-5.348c.048-.16.104-.264.16-.312a.52.52 0 0 1 .311-.08h.743c.127 0 .2.065.2.2 0 .04-.009.08-.017.128a1.137 1.137 0 0 1-.056.2l-1.923 6.17c-.048.16-.104.263-.168.311a.51.51 0 0 1-.303.08h-.687c-.151 0-.255-.024-.32-.08-.063-.056-.119-.16-.15-.32l-1.238-5.148-1.23 5.14c-.04.16-.087.264-.15.32-.065.056-.177.08-.32.08zm10.256.215c-.415 0-.83-.048-1.229-.143-.399-.096-.71-.2-.918-.32-.128-.071-.215-.151-.247-.223a.563.563 0 0 1-.048-.224v-.407c0-.167.064-.247.183-.247.048 0 .096.008.144.024.048.016.12.048.2.08.271.12.566.215.878.279.319.064.63.096.95.096.502 0 .894-.088 1.165-.264a.86.86 0 0 0 .415-.758.777.777 0 0 0-.215-.559c-.144-.151-.416-.287-.807-.415l-1.157-.36c-.583-.183-1.014-.454-1.277-.813a1.902 1.902 0 0 1-.4-1.158c0-.335.073-.63.216-.886.144-.255.335-.479.575-.654.24-.184.51-.32.83-.415.32-.096.655-.136 1.006-.136.175 0 .359.008.535.032.183.024.35.056.518.088.16.04.312.08.455.127.144.048.256.096.336.144a.69.69 0 0 1 .24.2.43.43 0 0 1 .071.263v.375c0 .168-.064.256-.184.256a.83.83 0 0 1-.303-.096 3.652 3.652 0 0 0-1.532-.311c-.455 0-.815.071-1.062.223-.248.152-.375.383-.375.71 0 .224.08.416.24.567.159.152.454.304.877.44l1.134.358c.574.184.99.44 1.237.767.247.327.367.702.367 1.117 0 .343-.072.655-.207.926-.144.272-.336.511-.583.703-.248.2-.543.343-.886.447-.36.111-.734.167-1.142.167zM21.698 16.207c-2.626 1.94-6.442 2.969-9.722 2.969-4.598 0-8.74-1.7-11.87-4.526-.247-.223-.024-.527.272-.351 3.384 1.963 7.559 3.153 11.877 3.153 2.914 0 6.114-.607 9.06-1.852.439-.2.814.287.383.607zM22.792 14.961c-.336-.43-2.22-.207-3.074-.103-.255.032-.295-.192-.063-.36 1.5-1.053 3.967-.75 4.254-.399.287.36-.08 2.826-1.485 4.007-.215.184-.423.088-.327-.151.32-.79 1.03-2.57.695-2.994z"/>
</svg>
</div>
<h4>AWS</h4>
</div>
</div>
<div class="col" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-box iconbox-pink">
<div class="icon">
<svg width="75" height="75" viewBox="0 0 128 128">
<path fill="#ea4535" d="M80.6 40.3h.4l-.2-.2 14-14v-.3c-11.8-10.4-28.1-14-43.2-9.5C36.5 20.8 24.9 32.8 20.7 48c.2-.1.5-.2.8-.2 5.2-3.4 11.4-5.4 17.9-5.4 2.2 0 4.3.2 6.4.6.1-.1.2-.1.3-.1 9-9.9 24.2-11.1 34.6-2.6h-.1z"></path><path fill="#557ebf" d="M108.1 47.8c-2.3-8.5-7.1-16.2-13.8-22.1L80 39.9c6 4.9 9.5 12.3 9.3 20v2.5c16.9 0 16.9 25.2 0 25.2H63.9v20h-.1l.1.2h25.4c14.6.1 27.5-9.3 31.8-23.1 4.3-13.8-1-28.8-13-36.9z"></path><path fill="#36a852" d="M39 107.9h26.3V87.7H39c-1.9 0-3.7-.4-5.4-1.1l-15.2 14.6v.2c6 4.3 13.2 6.6 20.7 6.6z"></path><path fill="#f9bc15" d="M40.2 41.9c-14.9.1-28.1 9.3-32.9 22.8-4.8 13.6 0 28.5 11.8 37.3l15.6-14.9c-8.6-3.7-10.6-14.5-4-20.8 6.6-6.4 17.8-4.4 21.7 3.8L68 55.2C61.4 46.9 51.1 42 40.2 42.1z"></path>
</svg>
</div>
<h4>GCP</h4>
</div>
</div>
</div>
</div>
</section><!-- End skills Section -->
<section id="projects" class="projects"><!-- Start Projects Section -->
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Projects</h2>
</div>
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-6 d-flex justify-content-center align-items-center">
<div class="card mb-3 border border-3 border-warning" style="width: 540px;">
<div class="row g-0">
<div class="col-md-4 d-flex justify-content-center align-items-center">
<img src="/assets/img/projects/NauticalPhrases/LogoVert.png" class="img-fluid rounded-start p-3" style="max-height: 200px;" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title fw-bold text-dark d-flex align-items-center justify-content-between">
Nauti Phrases </i> <span class="badge text-light rounded-pill text-bg-warning">Winner</span>
</h5>
<p class="card-text text-dark">
At NJIT's 2023 Hackathon, our team won the "Best Use of Kintone" award, winning amongst 200+ participants with our full-stack web app aimed to educate users on nautical phrases. We utilizied React, Three.js, Express.js, Node.js, Kintone, and TailwindCSS.
</p>
<a href="https://devpost.com/software/jib-jargon" target="_blank" rel="noopener noreferrer">
<button class="btn text-light" style="background-color: #003e54;">Devpost</button>
</a>
<a href="https://github.com/Caposto/nautical_translator" target="_blank" rel="noopener noreferrer">
<button class="btn btn-dark">Github <i class="bx bxl-github" style="color: #fff"></i></button>
</a>
<a href="https://nautical-translator.vercel.app/" target="_blank" rel="noopener noreferrer">
<button id="nautiPhrasesStatus" class="btn btn-outline-success position-relative">
Visit Site
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-light rounded-circle"><span class="visually-hidden">Live Status</span></span>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 d-flex justify-content-center align-items-center">
<div class="card mb-3" style="width: 540px; min-height: auto;">
<div class="row g-0">
<div class="col-md-4 d-flex justify-content-center align-items-center">
<img src="/assets/img/projects/Blueprint/logo.png" class="img-fluid rounded-start p-3" style="height: 140px; max-height: 200px;" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title fw-bold text-dark">Stevens Blueprint Website v1</h5>
<p class="card-text text-dark">Developed Version 1 of Chapter's website using ReactJS and TailwindCSS, adhering to org's brand assets and Figma mockups. Featured ESLint, Prettier, and Husky pre-commit hooks for code consistency, with responsive layouts designed for extensibility and scalability by future devs</p>
<a href="https://github.com/stevensblueprint/blueprint-website_old" target="_blank" rel="noopener noreferrer">
<button class="btn btn-dark rounded">Github <i class="bx bxl-github" style="color: #fff"></i></button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Projects Section -->
<!-- ======= Resume Section ======= -->
<section id="resume" class="resume">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Experience</h2>
<a class="btn btn-outline-light" href="assets/img/resume.pdf" target="_blank" rel="noopener noreferrer">View Resume</a>
<a class="btn btn-outline-light" href="assets/img/resume.pdf" download="ShawnAviles_Resume">Download Resume</a>
</div>
<div class="row">
<div class="col-lg">
<h3 class="resume-title">Education</h3>
<div class="resume-item">
<h4>Masters of Science in Computer Engineering</h4>
<h5>2024 - 2025</h5>
<p><em>Stevens Institute of Technology - Hoboken, NJ</em></p>
</div>
<div class="resume-item">
<h4>Bachelor of Engineering in Computer Engineering</h4>
<h5>2021 - 2024</h5>
<p><em>Stevens Institute of Technology - Hoboken, NJ</em></p>
<ul>
<li><strong>GPA: </strong> 3.96/4</li>
<li><strong>Concentration: </strong> Software Engineering & Design</li>
<li><strong>Awards: </strong> Edwins A. Stevens Scholarship, Stevens Grant, Kenneth W. Freeman Scholarship, Dean's List, HKN IEE Member, Hispanic Scholarship Fund Scholar, Tau Beta Pi Scholar</li>
<li><strong>Courses: </strong> Data Structures and Algorithms, Probability and Statistics, Differential Equations, Discrete Mathematics, Engineering Design and Systems Thinking I II III & IV, Microprocessor Systems, Entrepreneurial Thinking, Information Systems Engineering</li>
<li><strong>Leadership:</strong>
<ul class="mt-2">
<li><em>President</em> of the Men's Volleyball Club</li>
<li><em>Vice President</em> of Projects for Blueprint</li>
<li>CPE <em>Student Advisory Council Representative</em></li>
</ul>
</li>
</ul>
</div>
<div class="resume-item">
<h4>Academy of Engineering and Design Technology</h4>
<h5>2017 - 2021</h5>
<p><em>Bergen County Academies - Hackensack, NJ</em></p>
<ul>
<li><strong>GPA: </strong> 3.9/4</li>
<li><strong>Courses: </strong> Engineering Design, Principles of Engineering, Electrical Engineering, Computer Integrated Manufacturing, Advanced Math Analysis II, AP Calculus AB, AP Computer Science A, Intermediate Java, Coursera Python Specialization</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg">
<h3 class="resume-title">Work Experience</h3>
<div class="resume-item">
<h4><em>Software Development Engineer Intern</em></h4>
<h5>May 2024 - August 2024</h5>
<p><em>Amazon - Boston, MA</em></p>
<!-- <ul>
<li>Developed Prototype CostAdvisor tool for business leaders to optimize cost, speed, and risk of pre-boarding processes on new hires</li>
</ul> -->
<ul>
<li>Developed & deployed the Joining Advisor tool using AWS CDK for infrastructure, DynamoDB for storage, & Lambda for aggregation & calculations using Java & Typescript, providing insights to business leaders to optimize pre-boarding processes </li>
<li>Created data visualizations & analytics with React leveraging API Gateway & internal component libraries generating a new level of visibility of 300 production candidate timelines, relevant speed & costs, maintaining JUnit and Jest unit test coverage.</li>
<li>Led integrations with 4 partner teams, leading to involvement with L7 to L9 Engineers to plan end of quarter initiatives</li>
</ul>
<div class="pb-4">
<a
href="https://www.linkedin.com/posts/shawn-aviles_amazon-sde-intern-activity-7179115070033948673-XCVE?utm_source=share&utm_medium=member_desktop"
title="Click to view my LinkedIn Post about Amazon!"
alt="Link to LinkedIn Post about internship acceptance at Amazon"
>
<img loading="lazy" class="amazon-logo d-none d-sm-block" src="assets/img/amazon-logo.gif" alt="Mailchimp Logo">
<img loading="lazy" class="amazon-logo-sm d-block d-sm-none" src="assets/img/amazon-logo.gif" alt="Mailchimp Logo">
</a>
</div>
</div>
<div class="resume-item">
<h4><em>Software Engineering Intern</em></h4>
<h5>May 2023 - December 2023</h5>
<p><em>Intuit Mailchimp - Brooklyn, NY</em></p>
<ul>
<li>Neutralized high-risk CSRF vulnerabilities on a hard deadline with client side JavaScript & Google Cloud Storage enhancing security, safeguarding company's assets, & maintaining Jest Unit Test coverage </li>
<li>Developed Email Editor's AI Assistant Tone Selection feature using React, Less CSS, PHP, and Playwright for E2E test coverage which was released to 300,000+ users</li>
<li>Single-handedly owned team's Playwright test suite, migrating over 50% of automated tests, modernizing the suite, and led AI Modal accessibility testing, establishing new color contrast compliance patterns.</li>
<li>Analyzed touchpoint data to calculate & communicate Generative AI API peak request rates for company level budgeting</li>
<li>Collaborated in GenAI Marketing Teams's weekly Agile meetings, enhancing team discussions & coordination</li>
</ul>
<div class="pb-4">
<a
href="https://www.linkedin.com/posts/shawn-aviles_mailchimp-activity-7032156803698216960-cPSo?utm_source=share&utm_medium=member_desktop"
title="Click to view my LinkedIn Post about it!"
alt="Link to LinkedIn Post about internship acceptance at Mailchimp"
>
<img loading="lazy" class="mailchimp-logo d-none d-sm-block" src="assets/img/mailchimp-vector-logo.svg" alt="Mailchimp Logo">
<img loading="lazy" class="mailchimp-logo-sm d-block d-sm-none" src="assets/img/mailchimp-vector-logo.svg" alt="Mailchimp Logo">
</a>
</div>
</div>
<div class="resume-item">
<h4>Software Developer Intern</h4>
<h5>May 2022 - November 2022</h5>
<p><em>Stevens Institute of Technology - Remote</em></p>
<ul>
<li>Worked for Prof.
<a href="https://alexwellerstein.com" class="text-orimary" target="_blank" rel="noopener noreferrer">Alex Wellerstein</a>
to create a pdf annotation desktop application for macOS & windows using ElectronJS</li>
<li>Developed browser feature to traverse, search, filter, & update local file system storage using jQuery, NodeJS, & Bootstrap</li>
<li>Created feature where data fields can be indexed to improve user experience, querying speed, and extensibility</li>
<li>Deployed PHP Server to sync and update JSON files containing 1000+ annotations across all instances of the application</li>
</ul>
</div>
<div class="resume-item">
<h4>Coding Instructor</h4>
<h5>December 2021 - August 2022</h5>
<p><em>Varsity Tutors | Remote</em></p>
<ul>
<li>Collaborated with students and parents to determine student needs to develop individual lesson plans</li>
<li>Taught 15+ college students fundamentals of different programming languages like C++, Python, and Java</li>
<li>Prepared teaching materials & training modules for students to consolidate and convey new information effectively</li>
</ul>
</div>
<div class="resume-item">
<h4>Code Sensei</h4>
<h5>June 2019 - April 2020</h5>
<p><em>Code Ninjas | Midland Park, NJ</em></p>
<ul>
<li>Taught 50+ children 3D-Modeling, game development, and coding in Scratch, JavaScript, Lua, and Python</li>
<li>Conducted one-on-one and group sessions for students teaching via curriculum-based learning</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg">
<h3 class="resume-title">Research</h3>
<div class="resume-item">
<h4>Technical Lead - Interactive Document</h4>
<h5>January 2023 - July 2023</h5>
<p><em>Stevens Institute of Technology, Hoboken, NJ</em></p>
<ul>
<li>Managed team of 8 students to develop an interactive text formatting system with quizzes and live coding exercises</li>
<li>Utilized Java, Regex, HTML, CSS, & JavaScript to create full-stack web app able to generate graphs & interactive documents</li>
</ul>
</div>
<div class="resume-item">
<h4>AI Researcher - Neural Networks</h4>
<h5>January 2022 - September 2022</h5>
<p><em>Stevens Institute of Technology, Hoboken, NJ</em></p>
<ul>
<li>Created Neural Network using TensorFlow to analyze and predict distance of trees from a given photo for forest mapping</li>
<li>Tested three iterations of Convolutional Neural Network with differing layers to achieve accuracy of 80%</li>
<li>Developed Python Image Parser to automate image processing of custom dataset to increase network efficiency</li>
</ul>
</div>
</div>
</div>
</div>
</section><!-- End Resume Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Contact</h2>
</div>
<div class="row m-0">
<div class="col-lg">
<div class="info">
<div class="email">
<a href="mailto: [email protected]" target="_blank" rel="noopener noreferrer" title="Email">
<i class="bx bx-envelope bx-sm"></i>
</a>
<h4>Email:</h4>
<p>[email protected]</p>
</div>
</div>
</div>
<div class="col-lg-8 mt-5 mt-lg-0">
<div class='alert alert-primary p-5' role='alert'>
<div class='text-wrap text-break'><b>Notice:</b> Website hosting mid-migration. Custom email functionality will be brought back soon. In the meantime, feel free to press the email icon to get in touch!</div>
</div>
<!-- 9/1: Temporarily removing form while migrating -->
<!-- <form class="email-form" id="email-form">
<div class="row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your name" required>
</div>
<div class="col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="message" id="message" rows="5" placeholder="Send me a message" required></textarea>
</div>
<div class="my-3">
<div id="reponse-alert"></div>
</div>
<div class="mt-1 text-center"><button type="submit" id="submit">Send Message</button></div>
</form> -->
</div>
</div>
</div>
</section><!-- End Contact Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<h3>Shawn Aviles</h3>
<p>Thanks for viewing my website! Feel free to reach out to me. I would love to connect!</p>
<div class="social-links">
<a href="https://github.com/ShawnAviles" target="_blank" rel="noopener noreferrer" class="github"><i class="bx bxl-github" style="color: #fff"></i></a>
<a href="https://www.linkedin.com/in/shawn-aviles" target="_blank" rel="noopener noreferrer" class="linkedin"><i class="bx bxl-linkedin" style="color: #fff"></i></a>
</div>
<div class="copyright">
Made with <i class='bx bxs-heart' style='color:#0a89ff'></i> by <strong><span>Shawn Aviles</span></strong>
</div>
</div>
</footer><!-- End Footer -->
<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class='bx bx-up-arrow-alt'></i></a>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/glightbox.min.js"></script>
<script src="assets/vendor/typed.js/typed.min.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/js/main.js"></script>
<!-- <script src="forms/connect.js"></script> -->
</body>
</html>