-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
793 lines (774 loc) · 69 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jonathan Gaytan</title>
<link rel="shortcut icon" type="image/jpg" href="assets/fav.png"/>
<meta property="og:title" content="Jonathan Gaytan">
<meta property="og:description" content="This website provides a personal portfolio that highlights my work, leadership, and project experience.">
<meta property="og:url" content="https://jonathangaytan.com">
<meta name="twitter:card" content="assets/fav.png">
<meta name="image" property="og:image" content="https://jonathangaytan.com/assets/fav.png">
<meta name="author" content="Jonathan Gaytan">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar fixed-top navbar-default navbar-expand-md navbar-dark ">
<div class="navbar-header d-flex col">
<a class="navbar-brand" href="#landing">
<img src="assets/white-JAG-logo.png" alt="Logo" style="width:60px;" class="d-inline-block align-center"
id="logo">
</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse"
class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#aboutMe" class="cool-link nav-link text-light">About Me</a></li>
<li class="nav-item"><a href="#experience" class="cool-link nav-link text-light">Experience</a></li>
<li class="nav-item"><a href="#projects" class="cool-link nav-link text-light">Projects</a></li>
<li class="nav-item"><a href="#contact-me" class="cool-link nav-link text-light">Contact Me</a></li>
</ul>
<a href="assets/Capstone Resume.pdf" class="ml-auto" target="_blank"><button type="button"
class="btn btn-outline-light btn-sm">Resume</button></a>
</div>
</nav>
<div class="container-fluid landing" id="landing">
<div class="row align-items-start">
<img src="assets/signature.png " alt="" class="mx-auto d-block" id="signature-image">
</div>
<div class="row">
<div class="col-md-12 text-justify">
<p class="text-center" id="home-text">Software Engineer | Designer</p>
</div>
</div>
<div class="row">
<a href="#aboutMe" class="mx-auto d-block down-arrows"><i class="fa fa-angle-double-down"
aria-hidden="true"></i></a>
</div>
<svg fill="none" viewBox="0 0 1440 1024" xmlns="http://www.w3.org/2000/svg" id="home-svg">
<g id="Astronomy Background">
<g id="glare-objects" class="rellax" data-rellax-speed="4">
<g id="Group">
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
d="M720 846.189C910.471 846.189 1065.71 693.326 1065.71 506C1065.71 318.674 910.471 165.811 720 165.811C529.637 165.811 374.295 318.674 374.295 506C374.295 693.431 529.637 846.189 720 846.189Z"
fill="#331178" />
<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd"
d="M720 800.414C884.795 800.414 1019.19 668.166 1019.19 506C1019.19 343.834 884.795 211.586 720 211.586C555.205 211.586 420.811 343.834 420.811 506C420.811 668.166 555.205 800.414 720 800.414Z"
fill="#3A1580" />
<path id="Vector_3" fill-rule="evenodd" clip-rule="evenodd"
d="M720 729.269C844.939 729.269 946.889 628.946 946.889 506C946.889 383.054 844.939 282.731 720 282.731C595.061 282.731 493.111 383.054 493.111 506C493.111 628.946 595.061 729.269 720 729.269Z"
fill="#44158F" />
<path id="Vector_4" fill-rule="evenodd" clip-rule="evenodd"
d="M720 658.757C805.513 658.757 875.234 590.149 875.234 506C875.234 421.851 805.513 353.243 720 353.243C634.487 353.243 564.766 421.851 564.766 506C564.766 590.149 634.487 658.757 720 658.757Z"
fill="#521B96" />
</g>
<g id="Group_2">
<path id="Vector_5" fill-rule="evenodd" clip-rule="evenodd"
d="M1241.51 1178.77C1347.54 1178.77 1433.92 1093.67 1433.92 989.44C1433.92 885.1 1347.44 800 1241.51 800C1135.48 800 1049 885.1 1049 989.44C1049 1093.78 1135.37 1178.77 1241.51 1178.77Z"
fill="#23196E" />
<path id="Vector_6" fill-rule="evenodd" clip-rule="evenodd"
d="M1241.51 1153.3C1333.26 1153.3 1408.03 1079.72 1408.03 989.44C1408.03 899.16 1333.26 825.583 1241.51 825.583C1149.77 825.583 1075 899.16 1075 989.44C1074.89 1079.72 1149.77 1153.3 1241.51 1153.3Z"
fill="#211F6F" />
<path id="Vector_7" fill-rule="evenodd" clip-rule="evenodd"
d="M1241.51 1113.65C1311.02 1113.65 1367.74 1057.84 1367.74 989.44C1367.74 921.043 1311.02 865.12 1241.51 865.12C1171.9 865.12 1115.18 920.937 1115.18 989.44C1115.18 1057.94 1171.9 1113.65 1241.51 1113.65Z"
fill="#1D2870" />
<path id="Vector_8" fill-rule="evenodd" clip-rule="evenodd"
d="M1241.51 1074.43C1289.1 1074.43 1327.88 1036.27 1327.88 989.44C1327.88 942.609 1289.1 904.446 1241.51 904.446C1193.92 904.446 1155.14 942.609 1155.14 989.44C1155.03 1036.27 1193.81 1074.43 1241.51 1074.43Z"
fill="#1A2E72" />
</g>
<g id="Group_3">
<path id="Vector_9" fill-rule="evenodd" clip-rule="evenodd"
d="M11.8309 304.191C83.3783 304.191 141.712 246.683 141.712 176.277C141.712 105.871 83.3783 48.4686 11.8309 48.4686C-59.7166 48.4686 -118.158 105.871 -118.158 176.277C-118.05 246.683 -59.7166 304.191 11.8309 304.191Z"
fill="#341270" />
<path id="Vector_10" fill-rule="evenodd" clip-rule="evenodd"
d="M11.8309 286.96C73.7097 286.96 124.201 237.274 124.201 176.277C124.201 115.386 73.7097 65.7 11.8309 65.7C-50.048 65.7 -100.647 115.386 -100.647 176.277C-100.539 237.274 -50.048 286.96 11.8309 286.96Z"
fill="#3D1273" />
<path id="Vector_11" fill-rule="evenodd" clip-rule="evenodd"
d="M11.8308 260.214C58.7771 260.214 97.0217 222.474 97.0217 176.277C97.0217 130.08 58.6697 92.4457 11.8308 92.4457C-35.1155 92.4457 -73.4675 130.186 -73.4675 176.277C-73.36 222.474 -35.1155 260.214 11.8308 260.214Z"
fill="#491279" />
<path id="Vector_12" fill-rule="evenodd" clip-rule="evenodd"
d="M11.8309 233.68C43.952 233.68 70.1646 207.886 70.1646 176.277C70.1646 144.669 43.952 118.874 11.8309 118.874C-20.2903 118.874 -46.5029 144.669 -46.5029 176.277C-46.5029 207.886 -20.2903 233.68 11.8309 233.68Z"
fill="#55147F" />
</g>
<g id="Group_4">
<path id="Vector_13" fill-rule="evenodd" clip-rule="evenodd"
d="M1346.31 253.343C1373.38 253.343 1395.4 231.671 1395.4 205.031C1395.4 178.391 1373.38 156.72 1346.31 156.72C1319.24 156.72 1297.21 178.391 1297.21 205.031C1297.21 231.671 1319.24 253.343 1346.31 253.343Z"
fill="#341270" />
<path id="Vector_14" fill-rule="evenodd" clip-rule="evenodd"
d="M1346.31 246.894C1369.73 246.894 1388.85 228.077 1388.85 205.137C1388.85 182.091 1369.73 163.274 1346.31 163.274C1322.89 163.274 1303.87 182.091 1303.87 205.137C1303.77 228.077 1322.89 246.894 1346.31 246.894Z"
fill="#3D1273" />
<path id="Vector_15" fill-rule="evenodd" clip-rule="evenodd"
d="M1346.31 236.746C1364.03 236.746 1378.54 222.474 1378.54 205.031C1378.54 187.589 1364.03 173.317 1346.31 173.317C1328.58 173.317 1314.08 187.589 1314.08 205.031C1314.08 222.474 1328.48 236.746 1346.31 236.746Z"
fill="#491279" />
<path id="Vector_16" fill-rule="evenodd" clip-rule="evenodd"
d="M1346.31 226.703C1358.45 226.703 1368.33 216.977 1368.33 205.031C1368.33 193.086 1358.45 183.36 1346.31 183.36C1334.17 183.36 1324.29 193.086 1324.29 205.031C1324.29 216.977 1334.17 226.703 1346.31 226.703Z"
fill="#55147F" />
</g>
<g id="Group_5">
<path id="Vector_17" fill-rule="evenodd" clip-rule="evenodd"
d="M-48.1143 981.08C4.41829 981.08 47.1749 939.006 47.1749 887.311C47.1749 835.617 4.31086 793.543 -48.1143 793.543C-100.647 793.543 -143.511 835.723 -143.511 887.311C-143.403 938.9 -100.647 981.08 -48.1143 981.08Z"
fill="#241C6D" />
<path id="Vector_18" fill-rule="evenodd" clip-rule="evenodd"
d="M-48.1143 968.394C-2.67203 968.394 34.3908 931.923 34.3908 887.206C34.3908 842.489 -2.67203 806.017 -48.1143 806.017C-93.5566 806.017 -130.619 842.489 -130.619 887.206C-130.619 931.923 -93.5566 968.394 -48.1143 968.394Z"
fill="#23236D" />
<path id="Vector_19" fill-rule="evenodd" clip-rule="evenodd"
d="M-48.1143 948.837C-13.6297 948.837 14.4092 921.246 14.4092 887.311C14.4092 853.377 -13.6297 825.786 -48.1143 825.786C-82.5988 825.786 -110.638 853.377 -110.638 887.311C-110.638 921.14 -82.5988 948.837 -48.1143 948.837Z"
fill="#222C6D" />
</g>
<g id="Group_6">
<path id="Vector_20" fill-rule="evenodd" clip-rule="evenodd"
d="M132.903 492.257C153.314 492.257 170.073 475.871 170.073 455.68C170.073 435.489 153.422 419.209 132.903 419.209C112.491 419.209 95.84 435.594 95.84 455.68C95.84 475.766 112.491 492.257 132.903 492.257Z"
fill="#25176D" />
<path id="Vector_21" fill-rule="evenodd" clip-rule="evenodd"
d="M132.903 487.394C150.629 487.394 165.024 473.229 165.024 455.786C165.024 438.343 150.629 424.177 132.903 424.177C115.285 424.177 100.782 438.343 100.782 455.786C100.782 473.123 115.285 487.394 132.903 487.394Z"
fill="#241C6D" />
<path id="Vector_22" fill-rule="evenodd" clip-rule="evenodd"
d="M132.903 479.677C146.331 479.677 157.289 468.894 157.289 455.68C157.289 442.466 146.331 431.683 132.903 431.683C119.474 431.683 108.516 442.466 108.516 455.68C108.516 468.894 119.582 479.677 132.903 479.677Z"
fill="#23226D" />
<path id="Vector_23" fill-rule="evenodd" clip-rule="evenodd"
d="M132.903 472.171C142.142 472.171 149.554 464.771 149.554 455.786C149.554 446.8 142.034 439.4 132.903 439.4C123.771 439.4 116.251 446.8 116.251 455.786C116.251 464.771 123.771 472.171 132.903 472.171Z"
fill="#22296D" />
</g>
</g>
<g id="planet-5" class="rellax" data-rellax-speed="4">
<path id="Vector_29" fill-rule="evenodd" clip-rule="evenodd"
d="M1324.29 612.349C1365.97 612.349 1399.92 578.943 1399.92 537.926C1399.92 497.014 1365.97 463.609 1324.29 463.609C1282.71 463.609 1248.76 497.014 1248.76 537.926C1248.76 578.943 1282.71 612.349 1324.29 612.349Z"
fill="#FF6666" />
<path id="Vector_30" fill-rule="evenodd" clip-rule="evenodd"
d="M1324.29 463.609C1366.08 463.609 1399.92 496.909 1399.92 537.926C1399.92 579.049 1366.08 612.349 1324.29 612.349C1316.66 610.34 1300.65 609.071 1303.23 602.094C1304.52 598.606 1314.62 603.469 1324.61 604.314C1337.93 605.266 1351.89 602.623 1353.51 598.394C1355.76 592.051 1339.76 596.28 1321.28 595.329C1299.36 594.166 1274.22 587.823 1274.87 577.78C1275.41 570.169 1297.43 580 1319.13 581.903C1341.26 583.911 1363.07 577.886 1364.25 565.2C1365.43 552.303 1344.05 555.58 1319.34 555.051C1296.25 554.523 1266.92 546.806 1265.95 533.063C1264.88 518.263 1288.51 524.394 1310.86 523.971C1333.42 523.549 1354.8 516.466 1350.82 501.666C1348.67 493.631 1335.24 498.706 1318.59 499.446C1301.83 500.186 1281.74 496.697 1280.45 489.931C1278.09 477.246 1308.39 465.194 1324.29 463.609Z"
fill="#C43F57" />
<path id="Vector_31" fill-rule="evenodd" clip-rule="evenodd"
d="M1324.29 463.609C1326.76 463.609 1329.23 463.714 1331.59 463.926C1331.05 463.926 1330.41 463.926 1329.87 463.926C1288.08 463.926 1254.24 497.226 1254.24 538.349C1254.24 577.04 1284.21 608.754 1322.57 612.454C1281.64 611.609 1248.66 578.626 1248.66 538.031C1248.76 496.909 1282.6 463.609 1324.29 463.609Z"
fill="#DF99FF" />
</g>
<g id="planet-6" class="rellax" data-rellax-speed="-2">
<path id="Vector_32" fill-rule="evenodd" clip-rule="evenodd"
d="M1247 862.679C1247 736.128 1329.46 629.022 1442.78 594V1131.25C1329.46 1096.34 1247 989.337 1247 862.679Z"
fill="#9966FF" />
<path id="Vector_33" fill-rule="evenodd" clip-rule="evenodd"
d="M1387.71 618.064C1404.94 608.18 1423.44 600.016 1442.78 594.107V1119C1336.22 1080.11 1260 976.446 1260 854.837C1260 755.25 1310.96 667.911 1387.71 618.064Z"
fill="#321791" />
<path id="Vector_34" fill-rule="evenodd" clip-rule="evenodd"
d="M1384.75 634.178C1397.64 626.766 1428.41 620.75 1442.78 616.238V1007.49C1388.66 987.726 1408.43 961.513 1386.01 907.906C1375.55 882.875 1306.52 839.474 1306.52 810.576C1306.52 782.859 1325.55 755.787 1335.17 731.616C1351.34 691.008 1348.91 657.49 1384.75 634.178ZM1290.55 927.566C1290.55 925.31 1292.35 923.376 1294.78 923.376C1297.11 923.376 1299.01 925.31 1299.01 927.566C1299.01 929.929 1297.11 931.755 1294.78 931.755C1292.46 931.755 1290.55 929.929 1290.55 927.566ZM1276.07 850.002C1276.07 847.209 1278.29 845.061 1280.93 845.061C1283.68 845.061 1285.9 847.209 1285.9 850.002C1285.9 852.688 1283.68 854.944 1280.93 854.944C1278.29 854.837 1276.07 852.688 1276.07 850.002ZM1298.06 869.662C1298.06 865.902 1301.13 862.786 1304.83 862.786C1308.53 862.786 1311.59 865.794 1311.59 869.662C1311.59 873.422 1308.53 876.43 1304.83 876.43C1301.13 876.537 1298.06 873.422 1298.06 869.662ZM1364.24 985.255C1364.24 979.561 1368.89 974.942 1374.6 974.942C1380.31 974.942 1384.96 979.561 1384.96 985.255C1384.96 991.056 1380.31 995.675 1374.6 995.675C1368.89 995.568 1364.24 990.949 1364.24 985.255ZM1360.75 1036.82C1360.75 1024.9 1370.37 1015.23 1382.31 1015.23C1394.15 1015.23 1403.88 1024.9 1403.88 1036.82C1403.88 1048.75 1394.26 1058.41 1382.31 1058.41C1370.37 1058.31 1360.75 1048.64 1360.75 1036.82Z"
fill="#220B78" />
</g>
<g id="planet-2" class="rellax" data-rellax-speed="2">
<path id="Vector_35" fill-rule="evenodd" clip-rule="evenodd"
d="M329.819 269.729C338.843 269.729 346.256 262.434 346.256 253.554C346.256 244.674 338.843 237.38 329.819 237.38C320.795 237.38 313.383 244.674 313.383 253.554C313.383 262.54 320.795 269.729 329.819 269.729Z"
fill="#7C1370" />
<path id="Vector_36" fill-rule="evenodd" clip-rule="evenodd"
d="M338.843 240.023C343.355 242.983 346.256 247.951 346.256 253.554C346.256 262.54 338.843 269.729 329.819 269.729C329.175 269.729 328.53 269.729 327.886 269.623C323.374 266.769 320.473 261.694 320.473 256.091C320.473 247.211 327.886 239.917 336.91 239.917C337.554 239.917 338.199 240.023 338.843 240.023Z"
fill="#BE2385" />
</g>
<g id="sun" class="rellax" data-rellax-speed="4">
<path id="Vector_37" fill-rule="evenodd" clip-rule="evenodd"
d="M720 617.423C782.416 617.423 833.23 567.314 833.23 506C833.23 444.686 782.416 394.577 720 394.577C657.584 394.577 606.77 444.686 606.77 506C606.77 567.314 657.584 617.423 720 617.423Z"
fill="#6838A4" />
<path id="Vector_38" fill-rule="evenodd" clip-rule="evenodd"
d="M720 593.637C768.987 593.637 809.058 554.311 809.058 506C809.058 457.689 769.095 418.363 720 418.363C671.013 418.363 630.942 457.689 630.942 506C630.942 554.311 671.013 593.637 720 593.637Z"
fill="#794DAE" />
</g>
<g id="planet-4" class="rellax" data-rellax-speed="-6">
<path id="Vector_41" fill-rule="evenodd" clip-rule="evenodd"
d="M1102.66 188.751C1119.31 188.751 1132.85 175.431 1132.85 159.046C1132.85 142.66 1119.31 129.34 1102.66 129.34C1086.01 129.34 1072.47 142.66 1072.47 159.046C1072.47 175.431 1086.01 188.751 1102.66 188.751Z"
fill="#336666" />
<path id="Vector_42" fill-rule="evenodd" clip-rule="evenodd"
d="M1120.06 183.36C1115.12 186.849 1109.11 188.751 1102.66 188.751C1086.01 188.751 1072.47 175.431 1072.47 159.046C1072.47 154.5 1073.55 150.166 1075.48 146.254C1080.42 142.766 1086.44 140.757 1092.88 140.757C1109.54 140.757 1123.07 154.077 1123.07 170.463C1123.07 175.114 1122 179.449 1120.06 183.36ZM1110.4 139.489C1111.47 139.489 1112.44 140.334 1112.44 141.497C1112.44 142.554 1111.47 143.506 1110.4 143.506C1109.21 143.506 1108.35 142.554 1108.35 141.497C1108.25 140.334 1109.21 139.489 1110.4 139.489ZM1122.96 147.946C1123.39 147.946 1123.72 148.263 1123.72 148.686C1123.72 149.109 1123.39 149.426 1122.96 149.426C1122.53 149.426 1122.21 149.003 1122.21 148.686C1122.21 148.369 1122.53 147.946 1122.96 147.946Z"
fill="#669999" />
<path id="Vector_43" fill-rule="evenodd" clip-rule="evenodd"
d="M1092.13 145.197C1093.85 145.197 1095.36 146.571 1095.36 148.369C1095.36 150.166 1093.85 151.54 1092.13 151.54C1090.31 151.54 1088.91 150.166 1088.91 148.369C1088.91 146.571 1090.31 145.197 1092.13 145.197ZM1101.48 170.04C1101.91 170.04 1102.23 170.357 1102.23 170.78C1102.23 171.203 1101.91 171.52 1101.48 171.52C1101.05 171.52 1100.73 171.203 1100.73 170.78C1100.73 170.357 1101.05 170.04 1101.48 170.04ZM1106.74 150.589C1107.17 150.589 1107.49 150.906 1107.49 151.329C1107.49 151.751 1107.17 152.069 1106.74 152.069C1106.31 152.069 1105.99 151.751 1105.99 151.329C1105.99 150.906 1106.42 150.589 1106.74 150.589ZM1115.66 160.631C1116.09 160.631 1116.41 160.949 1116.41 161.371C1116.41 161.794 1116.09 162.111 1115.66 162.111C1115.23 162.111 1114.91 161.689 1114.91 161.371C1114.91 161.054 1115.34 160.631 1115.66 160.631ZM1111.15 175.22C1112.01 175.22 1112.65 175.854 1112.65 176.7C1112.65 177.546 1112.01 178.286 1111.15 178.286C1110.29 178.286 1109.64 177.546 1109.64 176.7C1109.64 175.854 1110.29 175.22 1111.15 175.22ZM1097.72 183.043C1098.58 183.043 1099.33 183.677 1099.33 184.523C1099.33 185.369 1098.58 186.109 1097.72 186.109C1096.86 186.109 1096.21 185.369 1096.21 184.523C1096.21 183.677 1096.86 183.043 1097.72 183.043ZM1118.45 178.286C1119.53 178.286 1120.49 179.237 1120.49 180.294C1120.49 181.457 1119.53 182.303 1118.45 182.303C1117.27 182.303 1116.41 181.457 1116.41 180.294C1116.41 179.237 1117.38 178.286 1118.45 178.286ZM1111.58 155.134C1112.65 155.134 1113.62 156.086 1113.62 157.143C1113.62 158.306 1112.65 159.151 1111.58 159.151C1110.4 159.151 1109.54 158.2 1109.54 157.143C1109.43 156.086 1110.4 155.134 1111.58 155.134ZM1083.11 156.931C1084.29 156.931 1085.15 157.883 1085.15 158.94C1085.15 159.997 1084.29 160.949 1083.11 160.949C1081.93 160.949 1081.07 159.997 1081.07 158.94C1081.07 157.883 1082.03 156.931 1083.11 156.931Z"
fill="#336666" />
</g>
<g id="comet" class="rellax" data-rellax-speed="4">
<path id="Vector_44" fill-rule="evenodd" clip-rule="evenodd"
d="M184.804 936.987C185.771 936.987 186.845 937.198 187.705 937.727C188.564 938.255 290.836 881.275 291.373 882.121C292.018 883.072 190.82 941.744 190.82 942.907C190.82 946.184 188.135 948.721 184.912 948.721C181.689 948.721 179.003 946.184 179.003 942.907C178.896 939.629 181.581 936.987 184.804 936.987Z"
fill="#FFFFCC" />
<path id="Vector_45" fill-rule="evenodd" clip-rule="evenodd"
d="M184.804 947.347C187.383 947.347 189.424 945.232 189.424 942.801C189.424 940.369 187.383 938.255 184.804 938.255C182.226 938.255 180.185 940.264 180.185 942.801C180.185 945.338 182.333 947.347 184.804 947.347Z"
fill="#FFFF66" />
<path id="Vector_46" fill-rule="evenodd" clip-rule="evenodd"
d="M184.482 946.289C186.201 946.289 187.597 944.915 187.597 943.224C187.597 941.532 186.201 940.158 184.482 940.158C182.763 940.158 181.367 941.532 181.367 943.224C181.367 944.915 182.763 946.289 184.482 946.289Z"
fill="#FFCC00" />
<path id="Vector_47" fill-rule="evenodd" clip-rule="evenodd"
d="M311.785 869.858C312 869.752 469.49 779.684 469.705 780.001C469.92 780.318 313.181 871.444 312.859 871.655C310.711 872.924 309.851 871.021 311.785 869.858Z"
fill="#FFFFCC" />
<!-- <animateTransform
attributeName="transform"
begin="0s"
dur="10s"
type="translate"
from="1000 200"
to="0 400"
repeatCount="indefinite"
/> -->
</g>
<g id="planet-1" class="rellax" data-rellax-speed="-4">
<path id="Vector_48" fill-rule="evenodd" clip-rule="evenodd"
d="M-60 -12C37.6526 62.5286 100.606 179.026 100.606 310.111C100.606 441.091 37.6526 557.694 -60 632.223V-12Z"
fill="#9966FF" />
<path id="Vector_49" fill-rule="evenodd" clip-rule="evenodd"
d="M-60 589.514V-5.76288C20.8937 68.5543 71.3851 174.374 71.3851 291.823C71.3851 409.271 20.8937 515.197 -60 589.514Z"
fill="#003399" />
<path id="Vector_50" fill-rule="evenodd" clip-rule="evenodd"
d="M-60 458.64V15.0629C-39.8034 33.6686 -9.18629 60.4143 4.56456 84.3057C27.232 123.526 15.6297 150.06 15.6297 198.371C15.6297 227.02 42.4869 293.62 36.0411 321.846C24.976 370.263 10.9029 430.203 -60 458.64Z"
fill="#082C73" />
</g>
<g id="planet-3" class="rellax" data-rellax-speed="6">
<path id="Vector_24" fill-rule="evenodd" clip-rule="evenodd"
d="M87.6754 651.886C117.97 651.886 142.679 627.571 142.679 597.76C142.679 567.949 117.97 543.634 87.6754 543.634C57.3806 543.634 32.672 567.949 32.672 597.76C32.672 627.466 57.3806 651.886 87.6754 651.886Z"
fill="#6699FF" />
<path id="Vector_25" fill-rule="evenodd" clip-rule="evenodd"
d="M125.49 558.329C127.531 560.231 129.465 562.346 131.291 564.566C127.102 564.671 122.912 564.671 118.615 564.671C91.7577 564.671 66.9417 563.297 47.0675 561.077C47.8195 560.231 48.5715 559.491 49.4309 558.646C60.1737 559.174 71.6686 559.386 83.3783 559.386C98.3109 559.386 112.491 559.069 125.49 558.329ZM138.059 575.771C138.382 576.511 138.704 577.357 139.026 578.097C124.846 593.426 93.584 610.023 58.0251 619.854C51.6869 621.546 45.5634 623.026 39.6549 624.189C37.184 619.854 35.3577 615.203 34.176 610.234C46.208 609.389 60.2812 606.957 75.3212 602.834C99.6 596.174 121.945 586.343 138.059 575.771ZM141.067 611.291C140.96 611.82 140.745 612.454 140.53 612.983C129.143 618.163 116.466 622.709 103.145 626.409C81.2297 632.54 61.4629 634.866 46.7452 633.914C44.5966 631.483 42.5555 628.84 40.8366 626.091C55.232 630.849 81.4446 629.58 111.739 621.123C122.053 618.374 131.829 614.991 141.067 611.291ZM122.912 639.411C118.185 643.323 112.706 646.389 106.798 648.503C92.1875 648.397 78.3291 647.974 65.5451 647.234C59.3143 644.486 53.728 640.786 49.0012 636.134C68.4457 638.143 92.2949 639.411 117.97 639.411C119.582 639.411 121.193 639.411 122.912 639.411Z"
fill="#66BDFF" />
<path id="Vector_26" fill-rule="evenodd" clip-rule="evenodd"
d="M127.424 635.289C117.433 645.543 103.36 651.886 87.6754 651.886C57.2731 651.886 32.672 627.571 32.672 597.76C32.672 567.843 57.3806 543.634 87.6754 543.634L69.6274 555.474L72.6354 560.549L68.4457 570.803L71.8834 584.229L78.6514 588.14L79.5109 595.646L73.3874 603.469L61.5703 601.46L61.0332 601.989L53.5132 615.203L58.992 624.823L59.5292 624.929L74.3543 625.563L84.1303 619.537L87.8903 623.977L92.5097 624.823L91.328 629.474C91.7577 629.474 91.9726 629.474 91.9726 629.474L103.253 630.426C105.401 629.369 103.897 630.109 104.112 629.897L111.31 622.074L101.319 616.049L103.467 610.974L113.351 607.697L117.863 615.309L115.07 622.18L118.4 626.62L109.161 634.337L105.509 633.174L103.897 635.817L110.343 639.729L120.763 634.126L127.424 635.289ZM122.805 605.9L117.97 605.054L117.863 601.883L121.945 600.72L122.16 600.614L124.846 602.623L124.523 603.891L122.805 605.9ZM65.008 622.497L64.1486 621.651L65.1154 619.643L66.0823 620.383L65.008 622.497ZM77.792 609.706L75.6434 608.543L74.4617 609.494V611.291L76.6103 612.137L78.7589 609.494L77.792 609.706ZM97.6663 557.694L96.3772 555.369L97.344 554.311L99.1703 554.629V557.377L97.6663 557.694ZM85.9566 573.34L83.808 570.697L85.312 569.851L87.4606 570.486L87.7829 572.6L85.9566 573.34ZM98.5257 580.211L88.2126 580.529L86.064 586.026L90.2537 589.62L95.7326 586.237L94.8732 583.171L97.8811 582.537L98.5257 580.211ZM61.6777 560.337L56.5211 561.606L54.6949 567.949L61.7851 571.226L65.1154 566.046L61.6777 560.337ZM51.472 593.214L50.9349 594.906L52.6537 596.174L53.5132 593.849L51.472 593.214ZM53.1909 600.509L47.6046 599.029L44.9189 603.786L49.5383 607.063L56.3063 601.46L53.1909 600.509ZM64.4708 586.871L67.8011 586.554L67.6937 588.669H64.5783V586.871H64.4708ZM56.5211 577.251L52.8686 577.146V579.577L56.8434 580.74L56.5211 577.251Z"
fill="#426EC7" />
<path id="Vector_27" fill-rule="evenodd" clip-rule="evenodd"
d="M122.912 639.411C118.185 643.323 112.706 646.389 106.798 648.503C92.1875 648.397 78.3292 647.974 65.5452 647.234C59.3143 644.486 53.728 640.786 49.0012 636.134C66.4046 638.037 87.2457 639.094 109.806 639.306L110.558 639.729L111.31 639.306C113.566 639.306 115.822 639.306 118.078 639.306C119.582 639.411 121.193 639.411 122.912 639.411ZM46.8526 633.914C44.704 631.483 42.6629 628.84 40.944 626.091C52.224 629.791 70.5943 629.791 92.5097 625.669L91.6503 629.263C74.3543 633.28 58.8846 634.76 46.8526 633.914ZM39.7623 624.294C37.2915 619.96 35.4652 615.309 34.2834 610.34C41.696 609.811 49.7532 608.754 58.4549 607.063L53.8354 615.203L56.736 620.383C50.8275 621.863 45.2412 623.131 39.7623 624.294ZM47.0675 561.077C47.8195 560.231 48.5715 559.491 49.4309 558.646C56.736 558.963 64.256 559.174 71.9909 559.28L72.6354 560.337L71.5612 563.086C68.6606 562.874 65.8675 562.663 63.1817 562.451L61.7852 560.126L56.6286 561.394L56.5212 561.817C53.1909 561.711 50.0755 561.5 47.0675 561.077ZM109.161 624.717L111.525 622.18L110.558 621.546C110.987 621.44 111.417 621.334 111.954 621.229C113.458 620.806 114.855 620.383 116.359 619.96L115.392 622.286L115.714 622.709C113.351 623.343 111.31 624.083 109.161 624.717ZM77.792 609.706L75.6435 608.543L74.4617 609.494V611.291L76.6103 612.137L78.7589 609.494L77.792 609.706Z"
fill="#2F83C4" />
<path id="Vector_28" fill-rule="evenodd" clip-rule="evenodd"
d="M87.6754 543.529C118.078 543.529 142.679 567.737 142.679 597.654C142.679 621.863 126.565 642.371 104.219 649.349C124.416 641.314 138.597 621.863 138.597 599.134C138.597 569.217 113.995 545.009 83.5931 545.009C77.792 545.009 72.3131 545.854 67.0491 547.44C73.3874 544.903 80.4777 543.529 87.6754 543.529Z"
fill="#DF99FF" />
</g>
<g id="Stars" class="rellax" data-rellax-speed="-4">
<path id="Vector_51" fill-rule="evenodd" clip-rule="evenodd"
d="M471.84 109.994C473.344 109.994 474.526 108.831 474.526 107.351C474.526 105.871 473.344 104.814 471.84 104.814C470.336 104.814 469.154 105.977 469.154 107.351C469.154 108.831 470.336 109.994 471.84 109.994Z"
fill="white" />
<path id="Vector_52" fill-rule="evenodd" clip-rule="evenodd"
d="M298.558 78.8085C300.062 78.8085 301.243 77.6457 301.243 76.1657C301.243 74.6857 300.062 73.5228 298.558 73.5228C297.054 73.5228 295.872 74.6857 295.872 76.1657C295.872 77.6457 297.161 78.8085 298.558 78.8085Z"
fill="white" />
<path id="Vector_53" fill-rule="evenodd" clip-rule="evenodd"
d="M229.589 287.7C231.093 287.7 232.274 286.537 232.274 285.057C232.274 283.577 231.093 282.414 229.589 282.414C228.085 282.414 226.903 283.577 226.903 285.057C226.903 286.431 228.085 287.7 229.589 287.7Z"
fill="white" />
<path id="Vector_54" fill-rule="evenodd" clip-rule="evenodd"
d="M377.518 552.831C379.022 552.831 380.203 551.669 380.203 550.189C380.203 548.709 379.022 547.546 377.518 547.546C376.014 547.546 374.832 548.709 374.832 550.189C374.832 551.669 376.121 552.831 377.518 552.831Z"
fill="white" />
<path id="Vector_55" fill-rule="evenodd" clip-rule="evenodd"
d="M234.853 681.909C236.357 681.909 237.538 680.746 237.538 679.371C237.538 677.997 236.357 676.729 234.853 676.729C233.349 676.729 232.167 677.891 232.167 679.371C232.167 680.851 233.456 681.909 234.853 681.909Z"
fill="white" />
<path id="Vector_56" fill-rule="evenodd" clip-rule="evenodd"
d="M340.686 643.286C342.19 643.286 343.371 642.123 343.371 640.643C343.371 639.163 342.19 638 340.686 638C339.182 638 338 639.163 338 640.643C338 642.017 339.182 643.286 340.686 643.286Z"
fill="white" />
<path id="Vector_57" fill-rule="evenodd" clip-rule="evenodd"
d="M521.365 888.051C522.869 888.051 524.05 886.889 524.05 885.409C524.05 883.929 522.869 882.766 521.365 882.766C519.861 882.766 518.679 883.929 518.679 885.409C518.679 886.994 519.968 888.051 521.365 888.051Z"
fill="white" />
<path id="Vector_58" fill-rule="evenodd" clip-rule="evenodd"
d="M449.817 935.094C451.321 935.094 452.503 933.931 452.503 932.451C452.503 930.971 451.321 929.914 449.817 929.914C448.313 929.914 447.131 931.077 447.131 932.451C447.131 933.931 448.313 935.094 449.817 935.094Z"
fill="white" />
<path id="Vector_59" fill-rule="evenodd" clip-rule="evenodd"
d="M640.825 671.443C642.329 671.443 643.511 670.28 643.511 668.8C643.511 667.32 642.329 666.157 640.825 666.157C639.321 666.157 638.139 667.32 638.139 668.8C638.139 670.28 639.321 671.443 640.825 671.443Z"
fill="white" />
<path id="Vector_60" fill-rule="evenodd" clip-rule="evenodd"
d="M887.481 781.069C888.985 781.069 890.167 779.906 890.167 778.426C890.167 776.946 888.985 775.783 887.481 775.783C885.977 775.783 884.795 776.946 884.795 778.426C884.795 779.906 886.085 781.069 887.481 781.069Z"
fill="white" />
<path id="Vector_61" fill-rule="evenodd" clip-rule="evenodd"
d="M1118.35 566.997C1119.85 566.997 1121.03 565.834 1121.03 564.354C1121.03 562.874 1119.85 561.711 1118.35 561.711C1116.84 561.711 1115.66 562.874 1115.66 564.354C1115.66 565.834 1116.84 566.997 1118.35 566.997Z"
fill="white" />
<path id="Vector_62" fill-rule="evenodd" clip-rule="evenodd"
d="M1288.08 360.749C1289.59 360.749 1290.77 359.586 1290.77 358.106C1290.77 356.626 1289.59 355.463 1288.08 355.463C1286.58 355.463 1285.4 356.626 1285.4 358.106C1285.4 359.586 1286.69 360.749 1288.08 360.749Z"
fill="white" />
<path id="Vector_63" fill-rule="evenodd" clip-rule="evenodd"
d="M1245.65 261.589C1247.15 261.589 1248.33 260.426 1248.33 258.946C1248.33 257.466 1247.15 256.303 1245.65 256.303C1244.14 256.303 1242.96 257.466 1242.96 258.946C1242.96 260.426 1244.14 261.589 1245.65 261.589Z"
fill="white" />
<path id="Vector_64" fill-rule="evenodd" clip-rule="evenodd"
d="M1365.65 207.674C1367.15 207.674 1368.33 206.511 1368.33 205.137C1368.33 203.657 1367.15 202.494 1365.65 202.494C1364.14 202.494 1363.07 203.657 1363.07 205.137C1362.96 206.511 1364.14 207.674 1365.65 207.674Z"
fill="white" />
<path id="Vector_65" fill-rule="evenodd" clip-rule="evenodd"
d="M1343.62 159.257C1345.13 159.257 1346.31 158.094 1346.31 156.614C1346.31 155.134 1345.13 153.971 1343.62 153.971C1342.12 153.971 1340.94 155.134 1340.94 156.614C1340.94 158.2 1342.12 159.257 1343.62 159.257Z"
fill="white" />
<path id="Vector_66" fill-rule="evenodd" clip-rule="evenodd"
d="M1190.69 85.2857C1192.19 85.2857 1193.37 84.1228 1193.37 82.6428C1193.37 81.1628 1192.19 80 1190.69 80C1189.18 80 1188 81.1628 1188 82.6428C1188 84.0171 1189.18 85.2857 1190.69 85.2857Z"
fill="white" />
<path id="Vector_67" fill-rule="evenodd" clip-rule="evenodd"
d="M1436.66 491.306C1438.16 491.306 1439.34 490.143 1439.34 488.663C1439.34 487.183 1438.16 486.02 1436.66 486.02C1435.15 486.02 1433.97 487.183 1433.97 488.663C1433.97 490.143 1435.15 491.306 1436.66 491.306Z"
fill="white" />
<path id="Vector_68" fill-rule="evenodd" clip-rule="evenodd"
d="M1150.14 773.246C1151.65 773.246 1152.83 772.083 1152.83 770.603C1152.83 769.123 1151.65 767.96 1150.14 767.96C1148.64 767.96 1147.46 769.123 1147.46 770.603C1147.46 772.083 1148.64 773.246 1150.14 773.246Z"
fill="white" />
<path id="Vector_69" fill-rule="evenodd" clip-rule="evenodd"
d="M1009.52 901.16C1011.02 901.16 1012.21 899.997 1012.21 898.517C1012.21 897.037 1011.02 895.874 1009.52 895.874C1008.02 895.874 1006.83 897.037 1006.83 898.517C1006.94 899.997 1008.12 901.16 1009.52 901.16Z"
fill="white" />
<path id="Vector_70" fill-rule="evenodd" clip-rule="evenodd"
d="M884.903 123.209C886.407 123.209 887.481 122.046 887.481 120.566C887.481 119.086 886.3 117.923 884.903 117.923C883.399 117.923 882.217 119.086 882.217 120.566C882.217 122.046 883.399 123.209 884.903 123.209Z"
fill="white" />
<path id="Vector_71" fill-rule="evenodd" clip-rule="evenodd"
d="M84.1303 26.3743C86.4937 26.3743 88.5349 24.4714 88.5349 22.04C88.5349 19.7143 86.4937 17.7057 84.1303 17.7057C81.6594 17.7057 79.7257 19.7143 79.7257 22.04C79.7257 24.4714 81.6594 26.3743 84.1303 26.3743Z"
fill="white" />
<path id="Vector_72" fill-rule="evenodd" clip-rule="evenodd"
d="M137.2 75.9543C139.563 75.9543 141.605 73.9457 141.605 71.62C141.605 69.1886 139.563 67.2857 137.2 67.2857C134.729 67.2857 132.795 69.1886 132.795 71.62C132.795 74.0514 134.729 75.9543 137.2 75.9543Z"
fill="white" />
<path id="Vector_73" fill-rule="evenodd" clip-rule="evenodd"
d="M472.699 51.2171C475.17 51.2171 477.104 49.2085 477.104 46.8828C477.104 44.4514 475.17 42.5485 472.699 42.5485C470.336 42.5485 468.295 44.5571 468.295 46.8828C468.295 49.2085 470.336 51.2171 472.699 51.2171Z"
fill="white" />
<path id="Vector_74" fill-rule="evenodd" clip-rule="evenodd"
d="M212.405 529.669C214.768 529.669 216.809 527.766 216.809 525.334C216.809 523.009 214.768 521 212.405 521C209.934 521 208 523.009 208 525.334C208 527.766 209.934 529.669 212.405 529.669Z"
fill="white" />
<path id="Vector_75" fill-rule="evenodd" clip-rule="evenodd"
d="M398.896 755.169C401.259 755.169 403.301 753.266 403.301 750.834C403.301 748.509 401.259 746.5 398.896 746.5C396.425 746.5 394.491 748.509 394.491 750.834C394.491 753.16 396.425 755.169 398.896 755.169Z"
fill="white" />
<path id="Vector_76" fill-rule="evenodd" clip-rule="evenodd"
d="M860.517 956.131C862.987 956.131 864.921 954.229 864.921 951.797C864.921 949.471 862.987 947.463 860.517 947.463C858.153 947.463 856.112 949.471 856.112 951.797C856.112 954.229 858.046 956.131 860.517 956.131Z"
fill="white" />
<path id="Vector_77" fill-rule="evenodd" clip-rule="evenodd"
d="M1065.28 496.697C1067.75 496.697 1069.68 494.689 1069.68 492.363C1069.68 489.931 1067.75 488.029 1065.28 488.029C1062.91 488.029 1060.87 489.931 1060.87 492.363C1060.87 494.689 1062.8 496.697 1065.28 496.697Z"
fill="white" />
<path id="Vector_78" fill-rule="evenodd" clip-rule="evenodd"
d="M788.647 228.077C791.118 228.077 793.051 226.069 793.051 223.743C793.051 221.311 791.118 219.409 788.647 219.409C786.283 219.409 784.242 221.311 784.242 223.743C784.242 226.174 786.176 228.077 788.647 228.077Z"
fill="white" />
<path id="Vector_79" fill-rule="evenodd" clip-rule="evenodd"
d="M511.266 463.609C512.233 463.609 513.093 462.763 513.093 461.811C513.093 460.86 512.233 460.014 511.266 460.014C510.299 460.014 509.44 460.86 509.44 461.811C509.44 462.869 510.299 463.609 511.266 463.609Z"
fill="white" />
<path id="Vector_80" fill-rule="evenodd" clip-rule="evenodd"
d="M509.44 161.266C510.407 161.266 511.266 160.42 511.266 159.469C511.266 158.517 510.514 157.671 509.44 157.671C508.473 157.671 507.614 158.517 507.614 159.469C507.614 160.42 508.473 161.266 509.44 161.266Z"
fill="white" />
<path id="Vector_81" fill-rule="evenodd" clip-rule="evenodd"
d="M818.512 60.4142C819.479 60.4142 820.338 59.5685 820.338 58.6171C820.338 57.6657 819.586 56.8199 818.512 56.8199C817.438 56.8199 816.686 57.56 816.686 58.6171C816.686 59.6742 817.545 60.4142 818.512 60.4142Z"
fill="white" />
<path id="Vector_82" fill-rule="evenodd" clip-rule="evenodd"
d="M1195.26 305.777C1196.23 305.777 1197.09 304.931 1197.09 303.98C1197.09 303.029 1196.23 302.183 1195.26 302.183C1194.3 302.183 1193.44 303.029 1193.44 303.98C1193.44 305.037 1194.19 305.777 1195.26 305.777Z"
fill="white" />
<path id="Vector_83" fill-rule="evenodd" clip-rule="evenodd"
d="M900.695 559.069C901.662 559.069 902.521 558.223 902.521 557.271C902.521 556.32 901.662 555.474 900.695 555.474C899.728 555.474 898.869 556.214 898.869 557.271C898.869 558.329 899.728 559.069 900.695 559.069Z"
fill="white" />
<path id="Vector_84" fill-rule="evenodd" clip-rule="evenodd"
d="M1004.26 762.674C1005.22 762.674 1006.08 761.829 1006.08 760.877C1006.08 759.926 1005.22 759.08 1004.26 759.08C1003.29 759.08 1002.43 759.926 1002.43 760.877C1002.43 761.829 1003.18 762.674 1004.26 762.674Z"
fill="white" />
<path id="Vector_85" fill-rule="evenodd" clip-rule="evenodd"
d="M240.224 420.689C241.191 420.689 242.05 419.949 242.05 418.891C242.05 417.834 241.191 417.094 240.224 417.094C239.257 417.094 238.398 417.94 238.398 418.891C238.398 419.843 239.15 420.689 240.224 420.689Z"
fill="white" />
<path id="Vector_86" fill-rule="evenodd" clip-rule="evenodd"
d="M158.826 253.594C159.793 253.594 160.653 252.749 160.653 251.797C160.653 250.846 159.793 250 158.826 250C157.859 250 157 250.846 157 251.797C157 252.854 157.859 253.594 158.826 253.594Z"
fill="white" />
<path id="Vector_87" fill-rule="evenodd" clip-rule="evenodd"
d="M334.826 364.594C335.793 364.594 336.653 363.749 336.653 362.797C336.653 361.846 335.793 361 334.826 361C333.859 361 333 361.846 333 362.797C333 363.749 333.859 364.594 334.826 364.594Z"
fill="white" />
<path id="Vector_88" fill-rule="evenodd" clip-rule="evenodd"
d="M218.826 164.594C219.793 164.594 220.653 163.854 220.653 162.797C220.653 161.846 219.793 161 218.826 161C217.859 161 217 161.846 217 162.797C217 163.854 217.859 164.594 218.826 164.594Z"
fill="white" />
<path id="Vector_89" fill-rule="evenodd" clip-rule="evenodd"
d="M179.205 331.994C180.172 331.994 181.031 331.149 181.031 330.197C181.031 329.246 180.279 328.4 179.205 328.4C178.238 328.4 177.378 329.246 177.378 330.197C177.271 331.149 178.13 331.994 179.205 331.994Z"
fill="white" />
<path id="Vector_90" fill-rule="evenodd" clip-rule="evenodd"
d="M152.405 814.669C154.768 814.669 156.809 812.766 156.809 810.334C156.809 808.009 154.768 806 152.405 806C149.934 806 148 808.009 148 810.334C148 812.66 149.934 814.669 152.405 814.669Z"
fill="white" />
<path id="Vector_91" fill-rule="evenodd" clip-rule="evenodd"
d="M364.841 981.926C365.808 981.926 366.667 981.08 366.667 980.129C366.667 979.177 365.915 978.331 364.841 978.331C363.874 978.331 363.015 979.177 363.015 980.129C363.015 981.186 363.874 981.926 364.841 981.926Z"
fill="white" />
<path id="Vector_92" fill-rule="evenodd" clip-rule="evenodd"
d="M1211.92 672.077C1212.88 672.077 1213.74 671.231 1213.74 670.28C1213.74 669.329 1212.88 668.483 1211.92 668.483C1210.95 668.483 1210.09 669.223 1210.09 670.28C1210.09 671.337 1210.95 672.077 1211.92 672.077Z"
fill="white" />
</g>
</g>
<defs>
<clipPath id="clip0">
<rect width="1440" height="1024" fill="white" />
</clipPath>
<clipPath id="clip1">
<rect width="1880" height="1036" fill="white" transform="translate(-220 -12)" />
</clipPath>
</defs>
</svg>
</div>
<!-- About Me -->
<div class="container-fluid" id="aboutMe">
<div class="row align-items-center">
<div class="col-md-5 align-self-center" data-aos="fade-right" data-aos-duration="1750">
<div class="row justify-content-center align-items-start">
<img src="assets/professional-headshot.png" alt="" id="headShot">
</div>
<div class="row justify-content-center">
<h1 class="text-white" style="margin-top: 10px;">Jonathan Gaytan</h1>
</div>
</div>
<div class="col-md-7" data-aos="fade-left" data-aos-duration="1750">
<div class="row">
<div class="op-card">
<h4 class="bold">About Me</h4>
<p>
I'm a <script>document.write(Math.abs(new Date(Date.now() - new Date("08/09/2000").getTime()).getUTCFullYear() - 1970))</script> year old Software Engineer at <a href="https://aws.amazon.com/" target="_blank" class="magenta-link">Amazon Web Services (AWS)</a>, where I work on the <a href="https://aws.amazon.com/sdk-for-python/" target="_blank" class="magenta-link">Python SDK</a> team.
I graduated from <a href="https://www.tamu.edu/" target="_blank" class="magenta-link">Texas A&M University</a> with a degree in Computer Science, and while I was there, I helped lead <a href="https://www.tamushpe.org/" target="_blank" class="magenta-link">TAMU SHPE</a> by implementing new software and mentoring members of my committee.
</p>
<p class="mt-2">
Outside of work, I enjoy designing and creating useful websites for others to use. Whether it's building a site from scratch or tweaking an existing one, I love the creative process of making something that people can interact with and enjoy.
</p>
</div>
</div>
<div class="row">
<div class="op-card-small">
<h4 class="bold">Top Skills</h4>
<p class="skill-p">
<img src="assets/python-icon.png" alt="" class="skill-icon">Python
<img src="assets/swift-icon.png" alt="" class="skill-icon">SwiftUI
<img src="assets/cpp-icon.png" alt="" class="skill-icon">C++
<img src="assets/javascript-icon.png" alt="" class="skill-icon">JavaScript
<img src="assets/html-icon.png" alt="" class="skill-icon">HTML
<img src="assets/css-icon.png" alt="" class="skill-icon">CSS
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Experience -->
<div class="container-fluid" id="experience">
<div class="row">
<div class="col text-center text-white mb-4 section-title" data-aos="zoom-in" data-aos-duration="1750">
<h1>Experience</h1>
</div>
</div>
<div data-aos="fade-up" data-aos-duration="1500">
<article class="postcard dark blue" data-tilt data-tilt-scale="0.95" data-tilt-perspective="1750">
<a class="postcard__img_link">
<img class="postcard__img" src="assets/amazon-navy.png" alt="Image Title" />
</a>
<div class="postcard__text postcard__text-left">
<h1 class="postcard__title blue"><a>Amazon Web Services</a></h1>
<div class="postcard__subtitle small">
<time datetime="2020-05-25 12:00:00">
<i class="fa fa-calendar mr-2"></i>June 2021 - Present
</time>
</div>
<div class="postcard__preview-txt">After completing a three-month internship, I returned to AWS as a
full-time member of the Python SDK (boto3) Team. I've begun contributing to our internal infrastructure
and spend time learning to help enforce design standards to ensure backwards compatability for AWS users.</div>
<ul class="postcard__tagbox">
<li class="tag__item tag-one"><span class="iconify mr-1" data-icon="bx:bxl-python"
data-inline="false"></span>Python</li>
<li class="tag__item"><span class="iconify mr-1 aws-icon" data-icon="cib:amazon-aws"
data-inline="false"></span>Services</li>
</ul>
</div>
</article>
</div>
<div data-aos="fade-up" data-aos-duration="1500">
<article class="postcard dark green" data-tilt data-tilt-scale="0.95" data-tilt-perspective="1750">
<a class="postcard__img_link">
<img class="postcard__img" src="assets/SHPE_Logo.png" alt="Image Title" />
</a>
<div class="postcard__text postcard__text-left">
<h1 class="postcard__title green"><a>Society of Hispanic Professional Engineers</a></h1>
<div class="postcard__subtitle small">
<time datetime="2020-05-25 12:00:00">
<i class="fa fa-calendar mr-2"></i>June 2020 - June 2022
</time>
</div>
<div class="postcard__preview-txt">As the Director of Technical Affairs, I lead a team in
the development of a website that facilitates networking between current members, alumni,
and recruiters using the Ruby on Rails framework. I also introduced our first-ever SHPEathon, a hackathon sponsored
by Google which provided our members the opportunity to gain experience and develop their technical skills.
</div>
<ul class="postcard__tagbox">
<li class="tag__item tag-one"><span class="iconify js-icon" data-icon="bx:bxl-javascript"
data-inline="false"></span>JavaScript</li>
<li class="tag__item"><span class="iconify mr-1 rails-icon" data-icon="fontisto:rails"
data-inline="false"></span>Ruby on Rails</li>
<!-- <li class="tag__item"><span class="iconify mr-1" data-icon="fontisto:nodejs" data-inline="false"></span></span>Node.js</li> -->
</ul>
</div>
</article>
</div>
<div data-aos="fade-up" data-aos-duration="1500">
<article class="postcard dark red" data-tilt data-tilt-scale="0.95" data-tilt-perspective="1750">
<a class="postcard__img_link">
<img class="postcard__img" src="assets/tamu_square.png" alt="Image Title" />
</a>
<div class="postcard__text postcard__text-left">
<h1 class="postcard__title red"><a>Engineering Peer Teacher</a></h1>
<div class="postcard__subtitle small">
<time datetime="2020-05-25 12:00:00">
<i class="fa fa-calendar mr-2"></i>Fall 2019 - Fall 2020
</time>
</div>
<div class="postcard__preview-txt">As an Engineering Peer Teacher, I collaborated with 8 professors
total to ensure that students were well
prepared to utilize Python in their engineering career. I had to develop various ways to
communicate high
level concepts to students with little or no experience in programming. Having reviewed and
graded hundreds of projects,
I’ve diversified my approach to different software challenges.</div>
<ul class="postcard__tagbox">
<li class="tag__item tag-one"><span class="iconify mr-1" data-icon="bx:bxl-python"
data-inline="false"></span>Python</li>
<li class="tag__item"><span class="iconify mr-1 numpy-icon" data-icon="file-icons:numpy"
data-inline="false"></span>NumPy</li>
<li class="tag__item"><span class="iconify mr-1 plot-icon" data-icon="carbon:qq-plot"
data-inline="false"></span>Matplotlib</li>
</ul>
</div>
</article>
</div>
</div>
<!-- Projects -->
<div class="container-fluid" id="projects">
<div class="row">
<div class="col text-center text-white mb-4 section-title" data-aos="zoom-in" data-aos-duration="1750">
<h1>Projects</h1>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm col-md-6 col-lg-4 my-4" data-aos="zoom-in" data-aos-duration="3000">
<div class="glass-card text-center py-4 px-2 mx-auto" data-tilt data-tilt-perspective="1750" data-tilt-glare="true" data-tilt-maxGlare="0.65" >
<img style="width: 70%; border-radius: 10px;" src="assets/Melody.svg" alt="">
<h4 class="mt-3">Melody</h4>
<div class="postcard__subtitle small" style="color:rgba(255,255,255,0.8);">
<time datetime="2020-05-25 12:00:00">
<i class="fa fa-calendar mr-2"></i>July 2022 - Present
</time>
</div>
<button class="btn btn-primary mt-2 glare-btn" data-toggle="modal" data-target="#melodyModal">Read More</button>
</div>
</div>
<div class="col-sm col-md-6 col-lg-4 my-4" data-aos="zoom-in" data-aos-duration="1000">
<div class="glass-card text-center py-4 px-2 mx-auto" data-tilt data-tilt-perspective="1750" data-tilt-glare="true" data-tilt-maxGlare="0.25">
<img style="width: 70%; border-radius: 10px;" src="assets/SHPE_Logo.png" alt="">
<h4 class="mt-3">MemberSHPE Portal</h4>
<div class="postcard__subtitle small" style="color:rgba(255,255,255,0.8);">
<time datetime="2020-05-25 12:00:00">
<i class="fa fa-calendar mr-2"></i>January 2021 - Present
</time>
</div>
<button class="btn btn-primary mt-2 glare-btn" data-toggle="modal" data-target="#memberPortalModal">Read More</button>
</div>
</div>
<div class="col-sm col-md-6 col-lg-4 my-4" data-aos="zoom-in" data-aos-duration="2000">
<div class="glass-card text-center py-4 px-2 mx-auto" data-tilt data-tilt-perspective="1750" data-tilt-glare="true" data-tilt-maxGlare="0.65">
<img style="width: 70%; border-radius: 10px;" src="assets/google-app.png" alt="">
<h4 class="mt-3">Point Automation System</h4>
<div class="postcard__subtitle small" style="color:rgba(255,255,255,0.8);">
<time datetime="2020-05-25 12:00:00">
<i class="fa fa-calendar mr-2"></i>January 2021 - Present
</time>
</div>
<button class="btn btn-primary mt-2 glare-btn" data-toggle="modal" data-target="#pointAutomationModal">Read More</button>
</div>
</div>
<div class="col-sm col-md-6 col-lg-4 my-4" data-aos="zoom-in" data-aos-duration="3000">
<div class="glass-card text-center py-4 px-2 mx-auto" data-tilt data-tilt-perspective="1750" data-tilt-glare="true" data-tilt-maxGlare="0.25">
<img style="width: 70%; border-radius: 10px;" src="assets/web-dev.png" alt="">
<h4 class="mt-3">TAMU SHPE Website</h4>
<div class="postcard__subtitle small" style="color:rgba(255,255,255,0.8);">
<time datetime="2020-05-25 12:00:00">
<i class="fa fa-calendar mr-2"></i>January 2021 - Present
</time>
</div>
<button class="btn btn-primary mt-2 glare-btn" data-toggle="modal" data-target="#tamuShpeModal">Read More</button>
</div>
</div>
<div class="col-sm col-md-6 col-lg-4 my-4" data-aos="zoom-in" data-aos-duration="2000">
<div class="glass-card text-center py-4 px-2 mx-auto" data-tilt data-tilt-perspective="1750" data-tilt-glare="true" data-tilt-maxGlare="0.65">
<img style="width: 70%; border-radius: 10px;" src="assets/Fermi_Logo.png" alt="">
<h4 class="mt-3">Fermi</h4>
<div class="postcard__subtitle small" style="color:rgba(255,255,255,0.8);">
<time datetime="2020-05-25 12:00:00">
<i class="fa fa-calendar mr-2"></i>January 2021 - Present
</time>
</div>
<button class="btn btn-primary mt-2 glare-btn" data-toggle="modal" data-target="#fermiModal">Read More</button>
</div>
</div>
<div class="col-sm col-md-6 col-lg-4 my-4" data-aos="zoom-in" data-aos-duration="1000">
<div class="glass-card text-center py-4 px-2 mx-auto" data-tilt data-tilt-perspective="1750" data-tilt-glare="true" data-tilt-maxGlare="0.65" >
<img style="width: 70%; border-radius: 10px;" src="assets/old-site.png" alt="">
<h4 class="mt-3">Old Website</h4>
<div class="postcard__subtitle small" style="color:rgba(255,255,255,0.8);">
<time datetime="2020-05-25 12:00:00">
<i class="fa fa-calendar mr-2"></i>August 2019- September 2020
</time>
</div>
<button class="btn btn-primary mt-2 glare-btn" data-toggle="modal" data-target="#oldSiteModal">Read More</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modals -->
<div class="modal fade" id="melodyModal" tabindex="-1" role="dialog" aria-labelledby="melodyModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="melodyModalLabel">Melody</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Melody provides a unique way to help you explore and discover your music taste. With Melody you can view recent stats,
get personalized recommendations, and share your profile with friends! Using ChatGPT, we use AI to teach you more about your favorite artists,
analyze the lyrics of your favorite songs, and find common trends in your favorite music.
</p>
<div class="text-center">
<a target="_blank" href="https://my-melody.io/"><button class="btn btn-primary">Visit Melody</button></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="memberPortalModal" tabindex="-1" role="dialog" aria-labelledby="memberPortalModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="memberPortalModalLabel">MemberSHPE Portal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
MemberSHPE Portal is a mobile-friendly website that allows current SHPE members, alumni, and recruiters to create a
profile that helps develop and expand their network. My team and I created an admin system that uses an approval process
to provide users a secure platform for storing and sharing personal information.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="pointAutomationModal" tabindex="-1" role="dialog" aria-labelledby="pointAutomationModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="pointAutomationModalLabel">Point Automation System</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
As a summer project I created a point automation system that was implemented into a preexisting method that used
Google Sheets. I utilized Google App Scripts and created a system that would read student data from event forms and
add it to a monthly sheet that has their points from events of that month. Members are also added to a master point
sheet where their overall points are displayed from all months. New members are sent custom/automated emails with
information about the organization. More than 90% of the entire process is automated reducing the work of our Secretary
Committee by up to 84%.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="tamuShpeModal" tabindex="-1" role="dialog" aria-labelledby="tamuShpeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tamuShpeModalLabel">TAMU SHPE Website</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<a target="_blank" href="https://www.tamushpe.org/"><button class="btn btn-primary">Visit Website</button></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="fermiModal" tabindex="-1" role="dialog" aria-labelledby="fermiModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fermiModalLabel">Fermi</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Fermi was a project created at TAMU HACK where my team and I were awarded a 1st place prize from PwC for addressing resource and income inequality. We showcased a mobile
application which was created in 24 hours that connected students together and promoted collaboration. Fermi Incentivized
students using a point system in which that they can redeem coupons. This was a great experience that exposed me to SwiftUI and app development.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="oldSiteModal" tabindex="-1" role="dialog" aria-labelledby="oldSiteModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="oldSiteModalLabel">Old Website</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<a target="_blank" href="https://jonathan343.github.io/Portfolio-Site/"><button class="btn btn-primary">Visit Website</button></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Loading Animation -->
<div class="loading-screen" id="load">
<svg viewBox="0 0 1508 624" fill="none" xmlns="http://www.w3.org/2000/svg"
class="loading-svg">
<path
d="M1337.5 9L118 4.5L378 142H567.5L330.5 478.5H12L187.5 612.5H408.5L532 431.5H914.5L1045 620H1500.5L1340.5 342.5H1101L1163 435.5H1279.5L1335 519.5H1143.5L881 145.5H1063L1337.5 9Z"
fill="white" stroke="white" stroke-width="8" class="svg-elem-1"></path>
<path d="M859.5 347.5H590L725 152L859.5 347.5Z" fill="#26136E" stroke="white" stroke-width="8"
class="svg-elem-2"></path>
</svg>
</div>
<!-- Quote -->
<div class="container-fluid" id="quote" data-aos="zoom-in" data-aos-duration="1750">
<div class="row">
<div class="col text-center text-white mb-4 section-title quote-div">
<p class="quote-text">"The people who are crazy enough to think they can change the world, are the ones who do."</p>
<p class="quote-text" style="opacity: 80%;margin-left: 20%;">- Steve Jobs</p>
</div>
</div>
</div>
<!-- Contact Me -->
<section id="contact-me" class="contact">
<div class="social-menu" data-aos="fade-up" data-aos-duration="1750">
<h1>Contact Me</h1>
<ul>
<li><a target="_blank" href="https://github.com/jonathan343"><i class="fa fa-github"></i></a></li>
<li><a target="_blank" href="https://www.linkedin.com/in/jonathan-gaytan-b3bab01ab/"><i
class="fa fa-linkedin"></i></a></li>
<li><a target="_blank" href="https://twitter.com/JonathanG343"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" href="https://www.instagram.com/jonathang09_/"><i
class="fa fa-instagram"></i></a></li>
</ul>
</div>
</section>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="main.js"></script>
<script src="tilt.js"></script>
</body>
</html>