-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1014 lines (965 loc) · 78.4 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
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💼 </text></svg>">
<link rel="stylesheet" href="./css/style.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<script src="https://kit.fontawesome.com/a4e316a428.js" crossorigin="anonymous"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
</head>
<body>
<header>
<!-- Header logo -->
<div class="header_logo">
<a href="#">
<i class="fa-solid fa-microchip"></i>
</a>
</div>
<!-- Navigation -->
<nav>
<ul id="mobile-nav">
<!-- Hidden on mobile -->
<li class="mobile-hidden">
<a href="#aboutme">About Me</a>
</li>
<li class="mobile-hidden">
<a href="#myskills">My Skills</a>
</li>
<li class="mobile-hidden">
<a href="#projects">My Projects</a>
</li>
<li class="mobile-hidden">
<a href="#form">Contact Me</a>
</li>
<li class="language_btn">
<a class="language_btn-text">Language
<i class="fa-solid fa-chevron-down iconElement"></i>
</a>
<div class="language_btn-content">
<a href="" class="lang-option" data-lang="en">English</a>
<a href="./pages/es/index.html" class="lang-option" data-lang="es">Español</a>
</div>
</li>
</ul>
<li class="language_btn language_btn_mobile">
<p class="language_btn-text">Language
<i class="fa-solid fa-chevron-down iconElement"></i>
</p>
<div class="language_btn-content">
<a href="" class="lang-option" data-lang="en">English</a>
<a href="./pages/es/index.html" class="lang-option" data-lang="en">Español</a>
</div>
</li>
</nav>
<!-- Burger menu for mobile -->
<div class="burguer_menu">
<div id="burguer_menu-icon">
<i class="uil uil-bars"></i>
</div>
</div>
</header>
<main>
<section id="presentation">
<!-- Presentation Intro Text -->
<div class="presentation_intro-text">
<!-- Social Icons -->
<div class="presentation_intro-text_social">
<i onclick="location.href='https://www.linkedin.com/in/cristian-acosta01/';"
class="fa-brands fa-linkedin"></i>
<i onclick="location.href='https://github.com/Acosta01-dev';"
class="fa-brands fa-square-github"></i>
</div>
<!-- Intro Text Content -->
<div class="presentation_intro-text_greetings">
<h1>
Hi, I'm <span>Cristian.</span><br>
<span class="typed-text"></span><span class="cursor"> </span>
<span>Dev.</span>
</h1>
<p>
A passionate full stack developer from Argentina, always eager to learn and improve, and up
for
any challenge.
</p>
<!-- Download CV Button -->
<button onclick="location.href='https://github.com/Acosta01-dev';">
<p>Download CV <i class="fa-solid fa-circle-down"></i></p>
</button>
</div>
</div>
<div class="scrolldown_animation">
<span></span>
<span></span>
</div>
</section>
<section id="aboutme">
<!-- About Me Subtitle -->
<p class="subtitle" data-unique="first_subtitle">about me</p>
<!-- User Circle Icon -->
<i class="uil uil-user-circle"></i>
<!-- About Me Text -->
<p class="text">
Hi, I'm Cristian Acosta, a full stack web developer from Argentina. I'm 22 years old and I love creating
websites and web applications. I can speak both Spanish and English fluently, which helps me collaborate
with clients and teams from around the world. I'm always learning new skills to keep up with the latest
trends in web development.
</p>
</section>
<section>
<div class="tabs-section" id="experience">
<div class="tabs">
<div class="tabs_button tab-active" data-tab="tab1">
<button>
<p><i class="fa-solid fa-graduation-cap"></i> Education</p>
</button>
</div>
<div class="tabs_button " data-tab="tab2">
<button>
<p><i class="fa-solid fa-briefcase"></i> Work</p>
</button>
</div>
</div>
<div class="timeline_container">
<div class="timeline tab-content-js tab-content-active " id="tab1">
<div class="container right">
<div class="content">
<h1>University Degree in Programming</h1>
<i>April 2023 - August 2025 | 2.5 years.</i>
<p><i class="fa-sharp fa-solid fa-location-dot"></i> UNLZ
</p>
<!-- <a href="">See Certificate</a> -->
</div>
</div>
<div class="container left">
<div class="content">
<h1>Diploma in Full Stack Web Development</h1>
<i>February 2024 - August 2024 | 7 months.</i>
<p><i class="fa-sharp fa-solid fa-location-dot"></i> ICARO</p>
<!-- <a href="">See Certificate</a> -->
</div>
</div>
<div class="container right">
<div class="content">
<h1>Diploma in Full Stack Web Development</h1>
<i>August 2022 - March 2023 | 7.5 months.</i>
<p><i class="fa-sharp fa-solid fa-location-dot"></i> UTN FRRe</p>
<a
href="https://www.dropbox.com/s/x7ukhpajjzqy4nh/cert_aprob_57362_2669_2_2023-04-05-15-51-03.pdf?dl=0">See
Certificate
</a>
</div>
</div>
<div class="container left">
<div class="content">
<h1>Web Development</h1>
<i>October 2022 - January 2023</i>
<p><i class="fa-sharp fa-solid fa-location-dot"></i> CoderHouse</p>
<a
href="https://www.dropbox.com/s/n609jxox1w1y4jg/63e1ec010eebb9000ef6c9c2%281%29.png?dl=0">See
Certificate</a>
</div>
</div>
<div class="container right">
<div class="content">
<h1>Cambridge English Certificate in ESOL (B1)</h1>
<i>November 2018</i>
<a href="https://www.dropbox.com/s/uuyk7k5vzhvl5i5/Cambridge%20B1%20.pdf?dl=0">See
Certificate</a>
</div>
</div>
</div>
<div class="timeline tab-content-js" id="tab2">
<div class="container left">
<div class="content">
<h1>Automotores Guamini</h1>
<i>January 2023-December 2023</i>
<p><i class="fa-sharp fa-solid fa-circle-info"></i> Web Developer</p>
<p><span>Designed and updated a website with its corresponding database, assuming
responsibility for its maintenance for a year. Utilized PHP, SASS, HTML, and
JavaScript for development and implementation.
</span>
</p>
</div>
</div>
<!--<div class="container right">
<div class="content">
<h1>Pure-Spa</h1>
<i>October 2022 - November 2022</i>
<p><i class="fa-sharp fa-solid fa-circle-info"></i> Freelance Project</p>
<p><span>Designed and developed a responsive static website about a wellness center for
a
costumer, utilizing HTML, CSS, and JavaScript to create an intuitive and
visually
appealing user interface.
</span></p>
</div>
</div>
-->
</div>
</div>
<!-- https://icon-sets.iconify.design/ -->
</div>
<div class='tabs-section' id="myskills">
<p class="subtitle">my skills</p>
<div class="tabs">
<div class="tabs_button " data-tab="tab1">
<button>
<p><i class="fa-solid fa-desktop"></i> Frontend</p>
</button>
</div>
<div class="tabs_button tab-active" data-tab="tab2">
<button>
<p><i class="fa-solid fa-database"></i> Backend</p>
</button>
</div>
<div class="tabs_button " data-tab="tab3">
<button>
<p><i class="fa-solid fa-plus"></i></p>
</button>
</div>
</div>
<div class="tabs-content">
<div class="tab-content tab-content-js " id="tab1">
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#E14E1D" rx="60" />
<path fill="#fff"
d="m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38H48Z" />
<path fill="#EBEBEB"
d="M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128V38Zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014v-33.227Z" />
</g>
</svg>
</p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#0277BD" rx="60" />
<path fill="#EBEBEB"
d="m53.753 102.651l2.862 31.942h71.481v-31.942H53.753ZM128.095 38H48l2.904 31.942h77.191V38Zm0 180.841v-33.233l-.14.037l-35.574-9.605l-2.274-25.476H58.042l4.475 50.154l65.431 18.164l.147-.041Z" />
<path fill="#fff"
d="m167.318 134.593l-3.708 41.426l-35.625 9.616v33.231l65.483-18.148l.48-5.397l7.506-84.092l.779-8.578L208 38h-80.015v31.942h45.009l-2.906 32.709h-42.103v31.942h39.333Z" />
</g>
</svg>
</p>
<p><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#F0DB4F" rx="60" />
<path fill="#323330"
d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.889-3.092 12.889-15.12v-81.798h24.058v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.579c-17.357-7.388-28.871-16.668-28.871-36.258c0-18.044 13.748-31.792 35.229-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.731 12.029c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.139 14.778 14.608l6.014 2.577c20.449 8.765 31.963 17.699 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574" />
</g>
</svg></p>
<p><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#CD6799" rx="60" />
<g clip-path="url(#skillIconsSass0)">
<path fill="#fff"
d="M200.107 139.163c-6.974.036-13.034 1.716-18.109 4.198c-1.862-3.687-3.724-6.973-4.053-9.383c-.365-2.811-.803-4.527-.365-7.886c.438-3.359 2.41-8.141 2.373-8.506c-.036-.366-.438-2.081-4.454-2.118c-4.016-.036-7.484.767-7.886 1.826c-.402 1.058-1.168 3.468-1.679 5.951c-.694 3.651-8.033 16.685-12.231 23.512c-1.351-2.665-2.519-5.002-2.775-6.864c-.365-2.811-.803-4.527-.365-7.886c.438-3.359 2.41-8.142 2.373-8.507c-.036-.365-.438-2.081-4.454-2.117c-4.016-.037-7.485.766-7.886 1.825c-.402 1.059-.84 3.542-1.68 5.951c-.839 2.41-10.587 24.17-13.143 29.792a168.207 168.207 0 0 1-3.249 6.754s-.037.11-.146.292a91 91 0 0 1-1.096 2.081v.037c-.547.986-1.132 1.898-1.424 1.898c-.219 0-.62-2.628.073-6.206c1.461-7.558 4.929-19.314 4.893-19.715c0-.219.657-2.264-2.264-3.323c-2.848-1.059-3.87.694-4.126.694c-.255 0-.438.621-.438.621s3.177-13.217-6.06-13.217c-5.769 0-13.728 6.316-17.67 12.012a5003.282 5003.282 0 0 0-13.437 7.338c-2.153 1.205-4.38 2.41-6.462 3.542c-.146-.146-.292-.329-.438-.475c-11.172-11.939-31.836-20.372-30.96-36.4c.329-5.842 2.337-21.176 39.686-39.796c30.741-15.151 55.203-10.953 59.438-1.643c6.06 13.29-13.107 37.97-44.87 41.548c-12.122 1.351-18.474-3.322-20.08-5.074c-1.68-1.826-1.936-1.935-2.557-1.57c-1.022.547-.365 2.19 0 3.139c.95 2.483 4.856 6.864 11.464 9.018c5.842 1.899 20.044 2.958 37.24-3.687c19.241-7.448 34.283-28.15 29.865-45.491c-4.417-17.598-33.625-23.403-61.263-13.582c-16.43 5.842-34.246 15.042-47.061 27.017c-15.225 14.24-17.634 26.616-16.648 31.8c3.541 18.401 28.915 30.376 39.065 39.248c-.511.292-.986.548-1.387.767c-5.075 2.519-24.425 12.632-29.245 23.33c-5.476 12.121.877 20.81 5.075 21.978c13.034 3.615 26.433-2.884 33.626-13.618c7.192-10.734 6.316-24.68 2.993-31.069a.762.762 0 0 0-.146-.219c1.315-.767 2.665-1.57 3.98-2.337a195.705 195.705 0 0 1 7.338-4.126c-1.241 3.396-2.154 7.448-2.592 13.29c-.547 6.864 2.264 15.772 5.951 19.277c1.643 1.533 3.578 1.57 4.82 1.57c4.308 0 6.243-3.578 8.397-7.813c2.628-5.185 5.002-11.209 5.002-11.209s-2.958 16.284 5.074 16.284c2.921 0 5.878-3.797 7.193-5.732v.036s.073-.109.219-.365c.292-.475.474-.767.474-.767v-.073c1.169-2.044 3.797-6.681 7.704-14.385c5.038-9.93 9.894-22.343 9.894-22.343s.438 3.03 1.935 8.068c.876 2.958 2.702 6.207 4.162 9.347c-1.168 1.643-1.898 2.555-1.898 2.555l.036.037c-.949 1.241-1.971 2.592-3.103 3.906c-3.98 4.747-8.726 10.187-9.383 11.757c-.767 1.862-.584 3.212.876 4.308c1.059.803 2.957.912 4.892.803c3.578-.256 6.098-1.132 7.339-1.68c1.935-.693 4.199-1.752 6.316-3.322c3.907-2.884 6.28-7.01 6.061-12.45c-.11-2.994-1.096-5.987-2.3-8.799c.365-.511.693-1.022 1.058-1.533c6.171-9.018 10.953-18.912 10.953-18.912s.438 3.03 1.935 8.069c.73 2.555 2.227 5.33 3.542 8.032c-5.805 4.71-9.383 10.186-10.661 13.764c-2.3 6.645-.511 9.638 2.884 10.332c1.534.329 3.724-.401 5.331-1.095c2.044-.657 4.454-1.789 6.754-3.469c3.906-2.884 7.667-6.9 7.448-12.34c-.11-2.482-.767-4.929-1.68-7.302c4.929-2.044 11.282-3.176 19.387-2.227c17.379 2.045 20.811 12.888 20.153 17.452c-.657 4.563-4.308 7.046-5.513 7.813c-1.204.767-1.606 1.022-1.496 1.57c.146.803.73.766 1.752.62c1.424-.255 9.127-3.687 9.456-12.084c.548-10.734-9.675-22.454-27.747-22.344ZM66.043 184.362c-5.768 6.279-13.8 8.653-17.269 6.645c-3.724-2.155-2.264-11.428 4.82-18.073c4.307-4.052 9.857-7.813 13.544-10.113c.84-.511 2.081-1.241 3.578-2.154c.256-.146.402-.219.402-.219l.876-.548c2.592 9.493.11 17.854-5.95 24.462Zm41.986-28.551c-2.008 4.893-6.206 17.415-8.762 16.722c-2.19-.585-3.541-10.077-.438-19.46c1.57-4.71 4.892-10.332 6.827-12.523c3.14-3.505 6.608-4.673 7.448-3.249c1.059 1.862-3.833 15.443-5.075 18.51Zm34.648 16.576c-.84.438-1.643.73-2.008.511c-.256-.146.365-.73.365-.73s4.345-4.674 6.061-6.791c.985-1.242 2.154-2.702 3.395-4.345v.475c0 5.586-5.403 9.346-7.813 10.88Zm26.725-6.098c-.621-.438-.511-1.898 1.57-6.462c.803-1.789 2.702-4.782 5.951-7.667c.365 1.169.621 2.3.584 3.359c-.036 7.047-5.075 9.675-8.105 10.77Z" />
</g>
<defs>
<clipPath id="skillIconsSass0">
<path fill="#fff" d="M28 53h200v149.909H28z" />
</clipPath>
</defs>
</g>
</svg></p>
<p> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="url(#skillIconsBootstrap0)" rx="60" />
<g filter="url(#skillIconsBootstrap2)">
<path fill="url(#skillIconsBootstrap1)"
d="M131.97 196.157c29.676 0 47.559-14.531 47.559-38.497c0-18.117-12.759-31.232-31.706-33.309v-.754c13.92-2.265 24.843-15.192 24.843-29.628c0-20.57-16.239-33.969-40.986-33.969H76v136.157h55.97ZM97.653 77.267h28.807c15.66 0 24.553 6.983 24.553 19.627c0 13.493-10.343 21.041-29.096 21.041H97.653V77.267Zm0 101.623v-44.819h28.613c20.494 0 31.127 7.548 31.127 22.268c0 14.719-10.343 22.551-29.87 22.551h-29.87Z" />
<path stroke="#fff" stroke-width="2"
d="M131.97 196.157c29.676 0 47.559-14.531 47.559-38.497c0-18.117-12.759-31.232-31.706-33.309v-.754c13.92-2.265 24.843-15.192 24.843-29.628c0-20.57-16.239-33.969-40.986-33.969H76v136.157h55.97ZM97.653 77.267h28.807c15.66 0 24.553 6.983 24.553 19.627c0 13.493-10.343 21.041-29.096 21.041H97.653V77.267Zm0 101.623v-44.819h28.613c20.494 0 31.127 7.548 31.127 22.268c0 14.719-10.343 22.551-29.87 22.551h-29.87Z" />
</g>
<defs>
<linearGradient id="skillIconsBootstrap0" x1="0" x2="256" y1="0" y2="256"
gradientUnits="userSpaceOnUse">
<stop stop-color="#9013FE" />
<stop offset="1" stop-color="#6B11F4" />
</linearGradient>
<linearGradient id="skillIconsBootstrap1" x1="85.793" x2="148.541" y1="68.962"
y2="175.084" gradientUnits="userSpaceOnUse">
<stop stop-color="#fff" />
<stop offset="1" stop-color="#F1E5FC" />
</linearGradient>
<filter id="skillIconsBootstrap2" width="137.529" height="170.157" x="59" y="47"
color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feOffset dy="4" />
<feGaussianBlur stdDeviation="8" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_158_100" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow_158_100"
result="shape" />
</filter>
</defs>
</g>
</svg>
</p>
<!--
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#242938" rx="60" />
<path fill="#00D8FF"
d="M128.001 146.951c10.304 0 18.656-8.353 18.656-18.656c0-10.303-8.352-18.656-18.656-18.656c-10.303 0-18.656 8.353-18.656 18.656c0 10.303 8.353 18.656 18.656 18.656Z" />
<path stroke="#00D8FF" stroke-width="8.911"
d="M128.002 90.363c25.048 0 48.317 3.594 65.862 9.635C215.003 107.275 228 118.306 228 128.295c0 10.409-13.774 22.128-36.475 29.649c-17.162 5.686-39.746 8.654-63.523 8.654c-24.378 0-47.463-2.786-64.819-8.717C41.225 150.376 28 138.506 28 128.295c0-9.908 12.41-20.854 33.252-28.12c17.61-6.14 41.453-9.812 66.746-9.812h.004Z"
clip-rule="evenodd" />
<path stroke="#00D8FF" stroke-width="8.911"
d="M94.981 109.438c12.514-21.698 27.251-40.06 41.249-52.24c16.864-14.677 32.914-20.425 41.566-15.436c9.017 5.2 12.288 22.988 7.463 46.41c-3.645 17.707-12.359 38.753-24.238 59.351c-12.179 21.118-26.124 39.724-39.931 51.792c-17.471 15.272-34.362 20.799-43.207 15.698c-8.583-4.946-11.865-21.167-7.747-42.852c3.479-18.323 12.21-40.812 24.841-62.723h.004Z"
clip-rule="evenodd" />
<path stroke="#00D8FF" stroke-width="8.911"
d="M95.012 147.578c-12.549-21.674-21.093-43.616-24.659-61.826c-4.293-21.941-1.258-38.716 7.387-43.72c9.009-5.216 26.052.834 43.934 16.712c13.52 12.004 27.403 30.061 39.316 50.639c12.214 21.098 21.368 42.473 24.929 60.461c4.506 22.764.859 40.157-7.978 45.272c-8.574 4.964-24.265-.291-40.996-14.689c-14.136-12.164-29.26-30.959-41.933-52.849Z"
clip-rule="evenodd" />
</g>
</svg>
</p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#007ACC" rx="60" />
<path fill="#fff"
d="m56.611 128.849l-.081 10.484h33.32v94.679h23.57v-94.679h33.32v-10.281c0-5.689-.121-10.443-.284-10.565c-.122-.162-20.399-.244-44.983-.203l-44.739.122l-.122 10.443Zm149.956-10.741c6.501 1.626 11.459 4.511 16.01 9.224c2.357 2.52 5.851 7.112 6.136 8.209c.081.325-11.053 7.802-17.798 11.987c-.244.163-1.22-.894-2.317-2.519c-3.291-4.795-6.745-6.868-12.028-7.233c-7.761-.529-12.759 3.535-12.718 10.321c0 1.991.284 3.169 1.097 4.795c1.706 3.535 4.876 5.648 14.832 9.955c18.326 7.884 26.168 13.085 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.141 17.879-28.323 20.277c-4.388.772-14.791.65-19.504-.203c-10.281-1.829-20.033-6.908-26.047-13.572c-2.357-2.601-6.949-9.387-6.664-9.875c.121-.162 1.178-.812 2.356-1.503c1.138-.65 5.446-3.129 9.509-5.486l7.355-4.267l1.544 2.276c2.154 3.291 6.867 7.802 9.712 9.305c8.167 4.308 19.383 3.698 24.909-1.259c2.357-2.154 3.332-4.389 3.332-7.68c0-2.967-.366-4.267-1.91-6.502c-1.991-2.844-6.054-5.242-17.595-10.24c-13.206-5.689-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.616-1.219-12.678-.447-16.335c2.722-12.759 12.353-21.658 26.25-24.3c4.511-.853 14.994-.528 19.424.569Z" />
</g>
</svg>
</p>
-->
</div>
<div class="tab-content tab-content-js tab-content-active" id="tab2">
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#242938" rx="60" />
<path fill="#fff"
d="M49.158 100.246h28.408c8.338.07 14.38 2.474 18.126 7.208c3.746 4.734 4.982 11.2 3.71 19.398c-.494 3.746-1.59 7.42-3.286 11.024c-1.626 3.604-3.886 6.854-6.784 9.752c-3.534 3.674-7.314 6.006-11.342 6.996c-4.028.99-8.198 1.484-12.508 1.484h-12.72l-4.028 20.14H34l15.158-76.002ZM61.56 112.33l-6.36 31.8c.424.07.848.106 1.272.106h1.484c6.784.07 12.438-.6 16.96-2.014c4.522-1.484 7.562-6.642 9.116-15.476c1.272-7.42 0-11.696-3.816-12.826c-3.746-1.13-8.444-1.66-14.098-1.59c-.848.07-1.66.106-2.438.106h-2.226l.106-.106M116.186 80h14.628l-4.134 20.246h13.144c7.208.142 12.578 1.626 16.112 4.452c3.604 2.826 4.664 8.198 3.18 16.112l-7.102 35.298h-14.84l6.784-33.708c.706-3.534.494-6.042-.636-7.526s-3.568-2.226-7.314-2.226l-11.766-.106l-8.692 43.566h-14.628L116.186 80Zm58.638 20.246h28.408c8.338.07 14.38 2.474 18.126 7.208c3.746 4.734 4.982 11.2 3.71 19.398c-.494 3.746-1.59 7.42-3.286 11.024c-1.626 3.604-3.886 6.854-6.784 9.752c-3.534 3.674-7.314 6.006-11.342 6.996c-4.028.99-8.198 1.484-12.508 1.484h-12.72l-4.028 20.14h-14.734l15.158-76.002Zm12.402 12.084l-6.36 31.8c.424.07.848.106 1.272.106h1.484c6.784.07 12.438-.6 16.96-2.014c4.522-1.484 7.562-6.642 9.116-15.476c1.272-7.42 0-11.696-3.816-12.826c-3.746-1.13-8.444-1.66-14.098-1.59c-.848.07-1.66.106-2.438.106h-2.226l.106-.106" />
</g>
</svg>
</p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#242938" rx="60" />
<path fill="#fff"
d="M101.634 182.619s-7.68 4.674 5.345 6.011c15.728 2.004 24.044 1.669 41.407-1.668c0 0 4.674 3.009 11.02 5.344c-39.075 16.696-88.497-1.002-57.772-9.687Zm-5.009-21.705s-8.35 6.346 4.674 7.679c17.028 1.669 30.391 2.004 53.433-2.667c0 0 3.009 3.341 8.015 5.01c-47.083 14.025-99.85 1.333-66.122-10.019v-.003Zm92.17 38.07s5.676 4.674-6.346 8.35c-22.376 6.678-93.839 8.685-113.876 0c-7.009-3.009 6.347-7.352 10.686-8.015c4.342-1.002 6.678-1.002 6.678-1.002c-7.68-5.344-51.095 11.02-22.041 15.729c79.813 13.027 145.603-5.676 124.896-15.028l.003-.034Zm-83.488-60.781s-36.402 8.685-13.028 11.687c10.019 1.333 29.721 1.002 48.089-.335c15.028-1.334 30.09-4.007 30.09-4.007s-5.345 2.338-9.017 4.674c-37.099 9.693-108.23 5.351-87.858-4.668c17.37-8.35 31.724-7.351 31.724-7.351Zm65.116 36.401c37.407-19.37 20.037-38.07 8.015-35.731c-3.009.667-4.342 1.334-4.342 1.334s1.001-2.004 3.34-2.667c23.709-8.35 42.413 25.046-7.679 38.07c0 0 .335-.335.666-1.002v-.004Zm-61.444 52.76c36.067 2.339 91.168-1.334 92.505-18.369c0 0-2.667 6.678-29.72 11.688c-30.722 5.676-68.796 5.009-91.168 1.333c0 0 4.674 4.007 28.386 5.344l-.003.004Z" />
<path fill="#F58219"
d="M147.685 28s20.704 21.039-19.702 52.76c-32.394 25.712-7.351 40.408 0 57.101c-19.035-17.028-32.722-32.059-23.377-46.085C118.331 71.083 156.062 61.064 147.685 28ZM137 123.842c9.683 11.02-2.667 21.039-2.667 21.039s24.711-12.686 13.359-28.387c-10.354-15.028-18.368-22.376 25.046-47.425c0 0-68.46 17.028-35.731 54.766l-.007.007Z" />
</g>
</svg>
</p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#242938" rx="60" />
<path fill="url(#skillIconsPythonDark0)"
d="M127.279 29c-50.772 0-47.602 22.018-47.602 22.018l.057 22.81h48.451v6.85H60.489S28 76.992 28 128.221c0 51.23 28.357 49.414 28.357 49.414h16.924v-23.773s-.912-28.357 27.905-28.357h48.054s26.999.436 26.999-26.094V55.546S180.338 29 127.279 29Zm-26.716 15.339a8.708 8.708 0 0 1 8.717 8.717a8.708 8.708 0 0 1-8.717 8.716a8.708 8.708 0 0 1-8.716-8.716a8.708 8.708 0 0 1 8.716-8.717Z" />
<path fill="url(#skillIconsPythonDark1)"
d="M128.721 227.958c50.772 0 47.602-22.017 47.602-22.017l-.057-22.811h-48.451v-6.849h67.696S228 179.966 228 128.736c0-51.23-28.357-49.413-28.357-49.413h-16.924v23.773s.912 28.357-27.905 28.357H106.76s-27-.437-27 26.093v43.866s-4.099 26.546 48.961 26.546Zm26.716-15.339a8.708 8.708 0 0 1-8.717-8.716a8.708 8.708 0 0 1 8.717-8.717a8.709 8.709 0 0 1 8.717 8.717a8.709 8.709 0 0 1-8.717 8.716Z" />
<defs>
<linearGradient id="skillIconsPythonDark0" x1="47.22" x2="146.333" y1="46.896"
y2="145.02" gradientUnits="userSpaceOnUse">
<stop stop-color="#387EB8" />
<stop offset="1" stop-color="#366994" />
</linearGradient>
<linearGradient id="skillIconsPythonDark1" x1="108.056" x2="214.492"
y1="109.905" y2="210.522" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFE052" />
<stop offset="1" stop-color="#FFC331" />
</linearGradient>
</defs>
</g>
</svg>
</p>
<!--
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#242938" rx="60" />
<path fill="#FF2D20" fill-rule="evenodd"
d="M215.846 78.314c.064.243.098.494.098.747v39.199c0 .503-.131.997-.379 1.432a2.838 2.838 0 0 1-1.037 1.047l-32.446 18.942v37.545a2.873 2.873 0 0 1-1.409 2.48l-67.728 39.535c-.155.089-.324.146-.493.207c-.064.022-.123.061-.19.079a2.81 2.81 0 0 1-1.445 0c-.077-.022-.148-.065-.222-.093c-.155-.057-.317-.107-.465-.193l-67.714-39.535a2.848 2.848 0 0 1-1.036-1.047a2.893 2.893 0 0 1-.38-1.433V59.629c0-.258.035-.508.099-.75c.02-.083.07-.158.098-.24c.053-.15.102-.303.18-.443c.053-.093.13-.168.194-.253c.08-.115.155-.233.25-.333c.08-.082.187-.143.278-.214c.102-.086.194-.179.31-.247h.004L76.27 37.382a2.796 2.796 0 0 1 2.819 0l33.859 19.767h.007c.112.072.208.161.31.243c.091.072.193.136.274.215c.099.103.17.221.254.336c.06.085.141.16.19.253c.081.143.127.293.184.443c.028.082.077.157.098.243c.065.244.098.495.099.747v73.45l28.214-16.473v-37.55c0-.25.035-.503.099-.742c.025-.086.07-.161.099-.243c.056-.15.105-.304.183-.443c.053-.093.13-.168.19-.254c.085-.114.155-.232.254-.332c.081-.082.183-.143.275-.215c.105-.085.197-.178.31-.246h.004l33.862-19.768a2.789 2.789 0 0 1 2.818 0l33.859 19.768c.12.072.211.16.317.243c.088.071.19.136.271.214c.099.104.169.222.254.336c.063.086.141.16.19.254c.081.14.127.293.183.443c.032.082.078.157.099.243Zm-5.546 38.292V84.009l-11.849 6.916l-16.369 9.557v32.597l28.221-16.473h-.003Zm-33.859 58.966v-32.618l-16.101 9.325l-45.979 26.609v32.925l62.08-36.241ZM46.644 64.577v110.995l62.073 36.238v-32.919l-32.428-18.61l-.01-.007l-.015-.007c-.109-.064-.2-.157-.303-.236c-.088-.071-.19-.128-.267-.207l-.007-.01c-.092-.09-.156-.2-.233-.301c-.07-.096-.155-.178-.211-.278l-.004-.011c-.064-.107-.103-.236-.148-.357c-.046-.107-.106-.207-.134-.322v-.004c-.035-.135-.042-.278-.057-.418c-.014-.107-.042-.214-.042-.321V81.051L58.493 71.49l-11.849-6.91v-.003Zm31.04-21.415L49.474 59.63l28.203 16.466l28.207-16.47l-28.207-16.463h.007Zm14.671 102.764l16.366-9.553V64.577l-11.85 6.917l-16.368 9.556v71.797l11.852-6.921Zm86.909-83.332l-28.208 16.467l28.208 16.466l28.203-16.47l-28.203-16.463Zm-2.823 37.888l-16.369-9.557l-11.848-6.916v32.597l16.365 9.553l11.852 6.92v-32.597Zm-64.905 73.458l41.373-23.952l20.682-11.968l-28.186-16.456l-32.453 18.946l-29.578 17.267l28.162 16.163Z"
clip-rule="evenodd" />
</g>
</svg>
</p>
-->
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#242938" rx="60" />
<g clip-path="url(#skillIconsMysqlDark0)">
<path fill="#fff" fill-rule="evenodd"
d="M203.801 178.21c-9.79-.272-17.385.731-23.75 3.409c-1.833.736-4.774.736-5.016 3.043c.98.968 1.098 2.552 1.957 3.894c1.467 2.435 4.041 5.715 6.365 7.417l7.834 5.598c4.774 2.917 10.16 4.622 14.811 7.542c2.694 1.704 5.386 3.894 8.08 5.721c1.372.973 2.203 2.558 3.918 3.163v-.368c-.856-1.091-1.103-2.672-1.956-3.894l-3.677-3.526c-3.547-4.744-7.957-8.884-12.731-12.287c-3.918-2.677-12.484-6.326-14.076-10.825l-.241-.273c2.689-.272 5.872-1.219 8.445-1.949c4.165-1.091 7.957-.851 12.238-1.945l5.88-1.704v-1.091c-2.204-2.189-3.795-5.11-6.119-7.176c-6.242-5.353-13.102-10.586-20.203-14.965c-3.794-2.432-8.692-4.017-12.731-6.081c-1.473-.731-3.918-1.096-4.774-2.312c-2.209-2.672-3.43-6.204-5.021-9.369l-10.037-21.168c-2.203-4.745-3.553-9.49-6.242-13.869c-12.611-20.683-26.324-33.212-47.38-45.502c-4.527-2.555-9.913-3.654-15.64-4.99l-9.18-.49c-1.962-.851-3.919-3.164-5.633-4.26c-6.978-4.38-24.974-13.868-30.12-1.363c-3.305 7.907 4.899 15.692 7.684 19.709c2.085 2.798 4.774 5.96 6.247 9.124c.823 2.067 1.098 4.259 1.957 6.449c1.956 5.352 3.794 11.316 6.365 16.306c1.372 2.555 2.813 5.235 4.527 7.545c.98 1.363 2.695 1.947 3.06 4.136c-1.715 2.435-1.833 6.081-2.813 9.127c-4.409 13.748-2.694 30.78 3.548 40.902c1.962 3.04 6.585 9.734 12.858 7.177c5.509-2.19 4.28-9.124 5.871-15.208c.37-1.458.124-2.432.856-3.408v.273l5.021 10.097c3.795 5.961 10.408 12.167 15.914 16.306c2.936 2.19 5.263 5.964 8.934 7.3v-.368h-.241c-.736-1.091-1.839-1.582-2.818-2.433c-2.203-2.189-4.651-4.867-6.366-7.299c-5.139-6.812-9.666-14.357-13.708-22.142c-1.961-3.771-3.676-7.908-5.262-11.679c-.741-1.461-.741-3.654-1.962-4.379c-1.839 2.672-4.527 4.99-5.88 8.273c-2.327 5.23-2.568 11.679-3.424 18.371c-.494.122-.275 0-.494.272c-3.913-.97-5.263-4.99-6.73-8.393c-3.672-8.638-4.287-22.507-1.104-32.484c.856-2.555 4.533-10.585 3.065-13.018c-.74-2.312-3.183-3.648-4.533-5.475c-1.591-2.312-3.3-5.23-4.403-7.785c-2.936-6.817-4.404-14.357-7.59-21.17c-1.473-3.164-4.041-6.45-6.124-9.367c-2.327-3.286-4.892-5.599-6.73-9.49c-.612-1.363-1.468-3.528-.489-4.99c.242-.973.735-1.363 1.71-1.581c1.59-1.364 6.124.365 7.715 1.09c4.527 1.827 8.322 3.529 12.117 6.081c1.715 1.216 3.553 3.529 5.756 4.14h2.574c3.918.85 8.322.272 11.99 1.363c6.49 2.072 12.364 5.11 17.632 8.398c16.035 10.098 29.26 24.454 38.193 41.611c1.468 2.798 2.08 5.353 3.43 8.273c2.574 5.964 5.757 12.045 8.322 17.888c2.574 5.718 5.021 11.562 8.693 16.306c1.838 2.555 9.18 3.891 12.484 5.23c2.45 1.091 6.242 2.073 8.451 3.409c4.159 2.555 8.322 5.475 12.237 8.273c1.956 1.456 8.081 4.499 8.445 6.926l.014-.066ZM78.958 72.487a19.569 19.569 0 0 0-5.015.608v.273h.241c.98 1.947 2.695 3.286 3.918 4.99l2.818 5.84l.242-.272c1.714-1.216 2.573-3.163 2.573-6.08c-.735-.851-.856-1.705-1.468-2.556c-.735-1.216-2.326-1.827-3.309-2.797v-.006Z"
clip-rule="evenodd" />
</g>
<defs>
<clipPath id="skillIconsMysqlDark0">
<path fill="#fff" d="M38 38h180v180H38z" />
</clipPath>
</defs>
</g>
</svg>
</p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#00599C" rx="60" />
<path fill="#fff"
d="M110.759 210.517C65.125 210.517 28 173.392 28 127.759C28 82.125 65.125 45 110.759 45c29.445 0 56.908 15.846 71.668 41.353l-35.816 20.726c-7.387-12.768-21.126-20.7-35.852-20.7c-22.817 0-41.38 18.563-41.38 41.38c0 22.816 18.563 41.379 41.38 41.379c14.727 0 28.466-7.932 35.854-20.702l35.816 20.725c-14.76 25.51-42.223 41.356-71.67 41.356Z" />
<path fill="#fff"
d="M193.517 123.161h-9.196v-9.196h-9.194v9.196h-9.196v9.195h9.196v9.196h9.194v-9.196h9.196v-9.195Zm34.483 0h-9.196v-9.196h-9.194v9.196h-9.196v9.195h9.196v9.196h9.194v-9.196H228v-9.195Z" />
</g>
</svg>
</p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#F03C2E" rx="60" />
<g clip-path="url(#skillIconsGit0)">
<path fill="#fff"
d="m224.225 119.094l-87.319-87.319a12.869 12.869 0 0 0-14.035-2.793a12.869 12.869 0 0 0-4.177 2.793L100.569 49.9l23 23c5.35-1.875 11.475-.594 15.737 3.669a15.313 15.313 0 0 1 3.631 15.831l22.169 22.169c5.363-1.85 11.55-.657 15.831 3.637a15.322 15.322 0 0 1 3.321 16.706a15.333 15.333 0 0 1-20.029 8.293c-1.86-.771-3.55-1.9-4.973-3.324c-4.5-4.5-5.612-11.125-3.337-16.669l-20.675-20.675v54.407a15.605 15.605 0 0 1 4.062 2.9a15.326 15.326 0 0 1-21.675 21.675a15.318 15.318 0 0 1-3.326-16.704a15.297 15.297 0 0 1 3.326-4.971c1.481-1.475 3.125-2.594 5.019-3.344v-54.913a15.216 15.216 0 0 1-5.019-3.343a15.315 15.315 0 0 1-3.3-16.757L91.644 58.813l-59.875 59.812a12.88 12.88 0 0 0-2.795 14.04a12.88 12.88 0 0 0 2.795 4.179l87.325 87.312a12.884 12.884 0 0 0 4.177 2.793a12.888 12.888 0 0 0 9.858 0a12.884 12.884 0 0 0 4.177-2.793l86.919-86.781a12.882 12.882 0 0 0 3.776-9.109a12.876 12.876 0 0 0-3.776-9.11" />
</g>
<defs>
<clipPath id="skillIconsGit0">
<path fill="#fff" d="M28 28h200v200H28z" />
</clipPath>
</defs>
</g>
</svg>
</p>
<p><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 1536 1536">
<path fill="currentColor"
d="M519 1072q4-6-3-13q-9-7-14-2q-4 6 3 13q9 7 14 2zm-28-41q-5-7-12-4q-6 4 0 12q7 8 12 5q6-4 0-13zm-41-40q2-4-5-8q-7-2-8 2q-3 5 4 8q8 2 9-2zm21 23q2-1 1.5-4.5t-3.5-5.5q-6-7-10-3t1 11q6 6 11 2zm86 75q2-7-9-11q-9-3-13 4q-2 7 9 11q9 3 13-4zm42 3q0-8-12-8q-10 0-10 8t11 8t11-8zm39-7q-2-7-13-5t-9 9q2 8 12 6t10-10zm642-317q0-212-150-362T768 256T406 406T256 768q0 167 98 300.5T606 1254q18 3 26.5-5t8.5-20q0-52-1-95q-6 1-15.5 2.5t-35.5 2t-48-4t-43.5-20T468 1073q-23-59-57-74q-2-1-4.5-3.5l-8-8l-7-9.5l4-7.5L415 967q6 0 15 2t30 15.5t33 35.5q16 28 37.5 42t43.5 14t38-3.5t30-9.5q7-47 33-69q-49-6-86-18.5t-73-39t-55.5-76T441 741q0-79 53-137q-24-62 5-136q19-6 54.5 7.5T614 505l26 16q58-17 128-17t128 17q11-7 28.5-18t55.5-26t57-9q29 74 5 136q53 58 53 137q0 57-14 100.5t-35.5 70T992 956t-62.5 26t-68.5 12q35 31 35 95q0 40-.5 89t-.5 51q0 12 8.5 20t26.5 5q154-52 252-185.5t98-300.5zm256-480v960q0 119-84.5 203.5T1248 1536H288q-119 0-203.5-84.5T0 1248V288Q0 169 84.5 84.5T288 0h960q119 0 203.5 84.5T1536 288z" />
</svg></p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#242938" rx="60" />
<path fill="#E24329" d="m127.999 220.001l37.562-113.192h-75.12L128 219.997v.004Z" />
<path fill="#FC6D26"
d="M127.999 220.001L90.441 106.809h-52.64l90.198 113.188v.004Z" />
<path fill="#FCA326"
d="m37.8 106.806l-11.417 34.4c-1.043 3.136.094 6.574 2.822 8.513L128 220.001L37.8 106.809v-.003Z" />
<path fill="#E24329"
d="M37.8 106.805h52.641L67.817 38.63c-1.164-3.507-6.235-3.507-7.397 0L37.8 106.808v-.003Z" />
<path fill="#FC6D26" d="m128 220.001l37.562-113.192h52.643L128 219.997v.004Z" />
<path fill="#FCA326"
d="m218.203 106.806l11.416 34.4c1.041 3.136-.1 6.574-2.824 8.513L128 220.001l90.203-113.192v-.003Z" />
<path fill="#E24329"
d="M218.202 106.805h-52.64l22.622-68.175c1.165-3.506 6.235-3.506 7.397 0l22.624 68.178l-.003-.003Z" />
</g>
</svg>
</p>
</div>
<div class="tab-content tab-content-js " id="tab3">
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#242938" rx="60" />
<path fill="#ECEFF1"
d="m85.95 199.926l24.53 13.62h37.096l34.702-26.055l15.556-40.859l-35.899-43.227l-10.171-24.278l-49.66 1.776l.598 13.62l-9.573 17.764l-14.958 29.016l-2.991 24.278l10.77 34.345Z" />
<path fill="#263238"
d="M187.064 114.656c-9.573-13.62-17.351-21.91-21.539-39.082c-4.188-17.173 1.197-12.435-2.393-27.24c-1.795-7.697-4.787-13.027-7.778-17.172c-3.59-4.145-7.778-6.514-10.172-7.106c-5.384-2.96-17.949-7.698-33.505.592c-16.155 8.29-14.36 26.055-11.368 62.177c0 2.368-.599 5.33-1.795 7.698c-2.393 5.33-6.582 10.066-10.171 14.212c-4.189 5.921-8.377 11.843-11.368 18.356c-7.18 13.62-13.762 30.792-11.967 37.306c2.992-.592 40.686 56.255 40.686 57.439c2.393-.592 12.564-.592 21.539-.592c12.565-.592 19.744-1.184 29.916 1.184c0-1.776-.599-3.553-.599-5.329c0-3.553.599-6.514 1.197-10.659c.598-2.961 1.197-5.921 1.795-9.474c-5.983 5.329-16.753 11.251-26.924 13.027c-8.975 1.776-23.933-1.184-31.113-10.067c.599 0 1.795 0 2.394-.592c1.795-.592 3.59-1.184 4.188-2.368c1.795-2.961.598-5.922-.598-7.698c-1.197-1.777-10.172-8.291-14.36-11.843c-4.188-3.553-6.581-5.33-8.975-7.698l-4.786-4.738c-1.197-1.184-1.795-2.368-2.393-2.961c-1.197-2.96-1.795-6.513-1.197-11.25c.598-6.514 2.991-11.844 5.983-17.765c1.197-2.369 4.188-7.106 4.188-7.106s-10.171 24.871-4.786 32.569c0 0 .598-7.698 2.991-15.396c1.795-5.33 4.787-13.028 8.377-17.173c3.59-4.145 12.564-19.541 13.163-29.016c0-4.145.598-8.29.598-11.25c-2.393-2.37 39.489-8.29 41.882-1.777c.598 2.369 8.975 23.686 13.761 34.937c2.393 5.33 5.385 10.067 7.18 15.988c1.795 6.514 2.991 15.396 2.991 24.279c0 1.776 0 4.737-.598 7.698c1.197 0 24.531-24.871-2.991-45.596c0 0 16.752 7.698 17.351 23.094c.598 12.435-4.787 22.502-5.983 24.278c.598 0 12.564 5.33 13.162 5.33c2.394 0 7.18-1.777 7.18-1.777c.599-1.776 2.393-6.514 2.393-8.29c4.189-13.62-5.983-35.529-15.556-49.149Z" />
<path fill="#ECEFF1"
d="M111.078 75.574c4.296 0 7.778-5.303 7.778-11.843c0-6.541-3.482-11.843-7.778-11.843c-4.295 0-7.778 5.302-7.778 11.843c0 6.54 3.483 11.843 7.778 11.843Zm26.924 1.184c5.618 0 10.172-6.098 10.172-13.62c0-7.521-4.554-13.619-10.172-13.619c-5.617 0-10.171 6.098-10.171 13.62c0 7.521 4.554 13.62 10.171 13.62Z" />
<path fill="#212121"
d="M115.424 64.541c-.497-3.893-2.761-6.817-5.056-6.53c-2.294.287-3.752 3.676-3.254 7.57c.497 3.893 2.76 6.817 5.055 6.53c2.295-.288 3.752-3.677 3.255-7.57Zm21.98 8.664c3.305 0 5.983-3.446 5.983-7.698c0-4.251-2.678-7.698-5.983-7.698c-3.304 0-5.983 3.447-5.983 7.698c0 4.252 2.679 7.698 5.983 7.698Z" />
<path fill="#FFC107"
d="M216.98 195.781c-2.393-1.184-6.582-2.961-10.172-8.29c-1.794-2.961-1.196-11.251-4.188-14.804c-1.795-2.368-4.188-1.184-4.786-1.184c-5.385 1.184-17.95 9.474-26.326 0c-1.197-1.184-2.992-2.961-5.983-2.961c-2.992 0-4.188 1.184-5.385 3.553c-1.197 2.369-1.197 4.145-1.197 10.067c0 4.737 0 10.066-.598 14.211c-1.197 10.067-2.991 15.989-2.991 21.91c0 6.514 1.794 10.659 4.188 12.435c1.795 1.777 4.786 2.961 11.368 2.961c6.581 0 10.769-2.368 14.958-6.514c2.991-2.96 5.384-4.145 13.761-10.066c6.581-4.145 16.753-9.475 18.547-11.251c1.197-1.184 2.992-1.777 2.992-5.33c0-2.96-2.393-4.145-4.188-4.737Zm-120.261 1.777c-5.983-9.475-6.582-11.251-10.77-17.173c-3.59-5.921-11.368-17.172-16.154-17.172c-3.59 0-5.385 1.776-7.778 4.145c-2.394 2.368-4.787 7.698-8.975 10.659c-3.59 2.96-13.761 2.368-16.154 5.921c-2.394 3.553 2.393 8.883 2.393 17.765c0 3.553-2.992 5.921-3.59 8.29c-.598 2.961-1.197 4.737 0 7.106c2.393 3.553 5.385 4.737 25.727 8.882c10.77 2.369 20.941 8.29 27.523 8.883c6.581.592 17.949 0 17.949-15.989c.599-9.474-4.786-11.843-10.171-21.317Zm11.368-107.18c-3.59-2.369-6.582-4.738-6.582-8.29c0-3.553 2.394-4.738 5.984-7.698c.598-.593 7.179-6.514 13.761-6.514c6.581 0 14.359 4.145 17.351 5.33c5.385 1.183 10.769 2.368 10.171 6.513c-.598 5.921-1.196 7.106-7.18 10.067c-4.188 1.184-11.966 7.698-17.351 7.698c-2.393 0-5.983 0-8.376-.593c-1.795-.592-4.787-3.553-7.778-6.513Z" />
<path fill="#634703"
d="M106.89 85.64c1.197 1.185 2.992 2.37 4.787 2.961c1.196.592 2.991 1.185 2.991 1.185h5.385c2.992 0 7.18-1.185 11.368-3.553c4.188-1.777 4.787-2.961 7.778-4.145c2.992-1.777 5.983-3.553 4.787-4.145c-1.197-.593-2.394 0-6.582 2.368c-3.59 2.369-6.581 3.553-10.171 5.33c-1.795.592-4.188 1.776-5.983 1.776h-5.385c-1.795 0-2.992-.592-4.787-1.184c-1.196-.593-1.795-1.185-2.393-1.185c-1.196-.592-3.59-2.96-4.786-3.553c0 0-1.197 0-.599.593l3.59 3.553Zm17.95-13.027c.598 1.184 1.795 1.184 2.393 1.776c.598.593 1.196.593 1.196.593c.599-.593 0-1.777-.598-1.777c0-1.184-2.991-1.184-2.991-.592Zm-9.573 1.184c0 .593 1.196 1.185 1.196.593c.599-.593 1.197-1.185 1.795-1.185c1.197-.592.598-1.184-1.196-1.184c-1.197.592-1.197 1.184-1.795 1.776Z" />
<path fill="#455A64"
d="M173.303 178.609v1.776c1.197 2.369 4.188 2.961 6.581 2.961c3.59 0 7.18-2.369 8.975-4.737c0-.592.598-1.185 1.197-1.777c1.196-1.776 1.795-2.96 2.393-3.553c0 0-.598-.592-.598-1.184c-.599-1.184-2.394-2.369-4.787-2.961c-1.795-.592-4.786-1.184-5.983-1.184c-5.385-.592-8.376 1.184-10.171 2.961c0 0 .598 0 .598.592c1.197 1.184 1.795 2.369 1.795 4.145c.598 1.184 0 1.776 0 2.961Z" />
</g>
</svg>
</p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#0073AA" rx="60" />
<path fill="#fff"
d="M42.214 127.994c0 33.955 19.733 63.299 48.347 77.205L49.641 93.083a85.46 85.46 0 0 0-7.427 34.911Zm143.694-4.329c0-10.601-3.808-17.943-7.074-23.658c-4.349-7.066-8.425-13.05-8.425-20.116c0-7.886 5.981-15.226 14.405-15.226c.381 0 .741.047 1.112.068c-15.262-13.982-35.595-22.519-57.929-22.519c-29.968 0-56.335 15.376-71.673 38.666c2.012.06 3.909.103 5.52.103c8.973 0 22.862-1.09 22.862-1.09c4.624-.272 5.17 6.52.55 7.067c0 0-4.647.547-9.818.818l31.238 92.918l18.773-56.303l-13.365-36.618c-4.619-.271-8.995-.818-8.995-.818c-4.623-.271-4.081-7.339.542-7.066c0 0 14.166 1.088 22.595 1.088c8.972 0 22.862-1.088 22.862-1.088c4.628-.273 5.171 6.519.55 7.066c0 0-4.657.547-9.818.818l31.001 92.214l8.556-28.592c3.709-11.866 6.531-20.388 6.531-27.732Z" />
<path fill="#fff"
d="m129.503 135.498l-25.738 74.79a85.779 85.779 0 0 0 24.233 3.495a85.682 85.682 0 0 0 28.486-4.863a7.476 7.476 0 0 1-.61-1.182l-26.371-72.24Zm73.766-48.66a65.8 65.8 0 0 1 .578 8.82c0 8.705-1.626 18.491-6.523 30.727l-26.203 75.759c25.503-14.872 42.657-42.501 42.657-74.148c.001-14.915-3.808-28.94-10.509-41.158Z" />
<path fill="#fff"
d="M127.998 28C72.86 28 28 72.857 28 127.994c0 55.144 44.86 99.999 99.998 99.999c55.135 0 100.002-44.855 100.002-99.999C227.998 72.857 183.133 28 127.998 28Zm0 195.41c-52.61 0-95.413-42.804-95.413-95.416c0-52.609 42.802-95.409 95.413-95.409c52.607 0 95.407 42.8 95.407 95.409c0 52.612-42.8 95.416-95.407 95.416Z" />
</g>
</svg>
</p>
</div>
</div>
</div>
</section>
<section id="projects">
<p class="subtitle">my projects</p>
<div class='tabs-section'>
<div class="tabs">
<div class="tabs_button tab-active " data-tab="tab1">
<button>
<p>
<i class="fa-solid fa-desktop"></i>
<span> Frontend Projects</span>
</p>
</button>
</div>
<div class="tabs_button " data-tab="tab2">
<button>
<p>
<i class="fa-solid fa-database"></i>
<span> Backend Projects</span>
</p>
</button>
</div>
<div class="tabs_button " data-tab="tab3">
<button>
<p>
<i class="fa-solid fa-layer-group"></i>
<span> FullStack Projects</span>
</p>
</button>
</div>
<div class="tabs_button " data-tab="tab4">
<button>
<p>
<i class="fa-solid fa-dice-five"></i>
<span> Fun Projects</span>
</p>
</button>
</div>
</div>
<div class="tab-content tab-content-js tab-content-active" id="tab1">
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>Vegan Shop</h3>
</div>
<div class="project-body">
<img src="./img/vegan.png">
</div>
<div class="project-footer">
<ul>
<li>HTML</li>
<li>SASS</li>
<li>JS</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>This is a static website for a vegan e-shop that offers a variety of vegan products. The
website is designed to provide customers with a user-friendly interface that allows them
to easily browse, search and purchase* vegan products.
This website was built using HTML, CSS, and JavaScript. The website features responsive
design, although this aspect may need some work.
</p>
<div class="project-item_desc-buttons">
<button
onclick="location.href='https://github.com/Acosta01-dev/vegan-shop-website_JS-SCSS';">
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
<button
onclick="location.href='https://acosta01-dev.github.io/vegan-shop-website_JS-SCSS/';">
<p>Visit Site <i class="fa-solid fa-arrow-up-right-from-square"></i></p>
</button>
</div>
</div>
</div>
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>Portfolio</h3>
</div>
<div class="project-body">
<img src="./img/portfolio.png">
</div>
<div class="project-footer">
<ul>
<li>HTML</li>
<li>SASS</li>
<li>JS</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>This is my full stack portfolio. It showcases my skills in front-end development, as well
as back-end development.
This page was designed to look beautiful on both PCs and mobile devices, ensuring a
visually pleasing experience across all platforms.
</p>
<div class="project-item_desc-buttons">
<button onclick="location.href='https://github.com/Acosta01-dev/my-portfolio_JS-SCSS';">
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
<button onclick="location.href='https://acosta01-dev.github.io/my-portfolio_JS-SCSS/';">
<p>Visit Site <i class="fa-solid fa-arrow-up-right-from-square"></i></p>
</button>
</div>
</div>
</div>
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>Game Development Company</h3>
</div>
<div class="project-body">
<img src="./img/wwg.png">
</div>
<div class="project-footer">
<ul>
<li>HTML</li>
<li>SASS</li>
<li>JS</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>A straightforward website dedicated to a game development company. The implementation is
done using standard web technologies, including Sass for styles, HTML for the structure,
and JavaScript for interactivity. (WIP)
</p>
<div class="project-item_desc-buttons">
<button
onclick="location.href='https://github.com/Acosta01-dev/wanwanwgames-fanwebsite_JS-SCSS';">
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
<button
onclick="location.href='https://acosta01-dev.github.io/wanwanwgames-fanwebsite_JS-SCSS/';">
<p>Visit Site <i class="fa-solid fa-arrow-up-right-from-square"></i></p>
</button>
</div>
</div>
</div>
</div>
<div class="tab-content tab-content-js " id="tab2">
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>API Collection</h3>
</div>
<div class="project-body">
<img src="./img/apicollection.png">
</div>
<div class="project-footer">
<ul>
<li>PHP</li>
<li>CSS</li>
<li>BOOTSTRAP</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>Multi-Tool Page: BookFinder, Pokédex, Crypto Prices
Explore books with Google Books API, discover Pokémon using PokeAPI, and check
cryptocurrency prices with CoinGecko API</p>
<div class="project-item_desc-buttons">
<button
onclick="location.href='https://github.com/Acosta01-dev/api-collection-tools_PHP';">
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
<button
onclick="location.href='https://unessential-procedu.000webhostapp.com/index.html';">
<p>Visit Site <i class="fa-solid fa-arrow-up-right-from-square"></i></p>
</button>
</div>
</div>
</div>
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>URL Shortener in PHP</h3>
</div>
<div class="project-body">
<img src="./img/urlshortener.png">
</div>
<div class="project-footer">
<ul>
<li>PHP</li>
<li>MYSQL</li>
<li>Bootstrap</li>
<li>JS</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>Experience seamless URL shortening with this tool crafted in PHP, JavaScript, and
Bootstrap. Enjoy a clean interface for generating personalized short links and track
usage statistics.
</p>
<div class="project-item_desc-buttons">
<button
onclick="location.href='https://github.com/Acosta01-dev/url-shortener_PHP-MYSQL';">
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
<!--- <button>
<p>Visit Site <i class="fa-solid fa-arrow-up-right-from-square"></i></p>
</button> --->
</div>
</div>
</div>
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>E-Commerce with PayPal integration.</h3>
</div>
<div class="project-body">
<img src="./img/shop (2).png">
</div>
<div class="project-footer">
<ul>
<li>HTML</li>
<li>SASS</li>
<li>JS</li>
<li>PHP</li>
<li>MYSQL</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>This is a shop website built using PHP, JavaScript, SASS, and HTML. The website allows
users to browse and purchase phones, while providing an admin page for managing the
product inventory. Additionally, users can make payments using PayPal.
</p>
<div class="project-item_desc-buttons">
<button onclick="location.href='https://github.com/Acosta01-dev/shop_PHP-MYSQL';">
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
<!--- <button>
<p>Visit Site <i class="fa-solid fa-arrow-up-right-from-square"></i></p>
</button> --->
</div>
</div>
</div>
</div>
<div class="tab-content tab-content-js " id="tab3">
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>Blog</h3>
</div>
<div class="project-body">
<img src="./img/blog.png">
</div>
<div class="project-footer">
<ul>
<li>PHP</li>
<li>Bootstrap</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>This is a captivating blog website crafted using PHP and Bootstrap. Authors can create,
edit, and manage
their blog posts. The website offers a responsive design, adapting beautifully to
various
devices.</p>
<div class="project-item_desc-buttons">
<button
onclick="location.href='https://github.com/Acosta01-dev/simple-blog_PHP-MYSQL';">
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
<!--- <button>
<p>Visit Site <i class="fa-solid fa-arrow-up-right-from-square"></i></p>
</button> --->
</div>
</div>
</div>
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>Recipe Sharing Platform (In development)</h3>
</div>
<div class="project-body">
<img src="https://via.placeholder.com/750x550">
</div>
<div class="project-footer">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>This platform will be a hub for food enthusiasts to connect, share
their culinary creations, and explore a wide range of delicious recipes.</p>
<div class="project-item_desc-buttons">
<button>
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
<button>
<p>Visit Site <i class="fa-solid fa-arrow-up-right-from-square"></i></p>
</button>
</div>
</div>
</div>
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>E-Commerce with PayPal integration.</h3>
</div>
<div class="project-body">
<img src="./img/shop (2).png">
</div>
<div class="project-footer">
<ul>
<li>HTML</li>
<li>SASS</li>
<li>JS</li>
<li>PHP</li>
<li>MYSQL</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>This is a shop website built using PHP, JavaScript, SASS, and HTML. The website allows
users to browse and purchase phones, while providing an admin page for managing the
product inventory. Additionally, users can make payments using PayPal.
</p>
<div class="project-item_desc-buttons">
<button onclick="location.href='https://github.com/Acosta01-dev/shop_PHP-MYSQL';">
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
</div>
</div>
</div>
</div>
<div class="tab-content tab-content-js " id="tab4">
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>MyNotes</h3>
</div>
<div class="project-body">
<img src="./img/mynotes.png">
</div>
<div class="project-footer">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>The note-taking app allows users to create various notes of different lengths. Notes are
visually organized in an attractive grid-like layout, similar to Pinterest. The app is
designed to be responsive, ensuring a seamless user experience across devices and screen
sizes.
</p>
<div class="project-item_desc-buttons">
<button onclick="location.href='https://github.com/Acosta01-dev/mynotes_JS';">
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
<button onclick="location.href='https://acosta01-dev.github.io/mynotes_JS/';">
<p>Visit Site <i class="fa-solid fa-arrow-up-right-from-square"></i></p>
</button>
</div>
</div>
</div>
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>README.md Generator</h3>
</div>
<div class="project-body">
<img src="./img/readme.png">
</div>
<div class="project-footer">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>Welcome to my Markdown syntax learning tool and README.md file generator. Here, you can
learn and practice Markdown. (WIP)</p>
<div class="project-item_desc-buttons">
<button onclick="location.href='https://github.com/Acosta01-dev/markdown-editor_JS';">
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
<button onclick="location.href='https://acosta01-dev.github.io/markdown-editor_JS/';">
<p>Visit Site <i class="fa-solid fa-arrow-up-right-from-square"></i></p>
</button>
</div>
</div>
</div>
<div class="project-item">
<div class="project-item_project">
<div class="project-header">
<h3>Password Generator</h3>
</div>
<div class="project-body">
<img src="./img/passwordgen.png">
</div>
<div class="project-footer">
<ul>
<li>JAVA</li>
</ul>
</div>
</div>
<div class="project-item_desc">
<p>A password generator that generates strong and secure passwords based on user preferences
(length, including special characters, numbers, etc.).</p>
<div class="project-item_desc-buttons">
<button
onclick="location.href='https://github.com/Acosta01-dev/password-generator_JAVA';">
<p>See Code <i class="fa-solid fa-code"></i></p>
</button>
<!--
<button onclick="location.href='https://github.com/Acosta01-dev/Password-Generator-Java';">
<p>Visit Site <i class="fa-solid fa-arrow-up-right-from-square"></i></p>
</button>
-->
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<p class="subtitle">contact me</p>
<form id="form">
<div id="form_input_name">
<div class="field">
<label for="from_name">your email</label>
<input type="email" name="from_name" id="from_name" required>
</div>
<div class="field">
<label for="to_name">subject</label>
<input type="text" name="to_name" id="to_name" required>
</div>
</div>
<div class="field">
<label for="message">message</label>
<input type="text" name="message" id="message" required>
</div>
<input type="submit" id="button" value="Send Email 📫">
</form>
<div class="footer-links">