-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
887 lines (854 loc) · 74.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YDKulkarni | Portfolio</title>
<link href="output.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script src="script.js"></script>
<!-- <script src="https://unpkg.com/[email protected]"></script> -->
<!-- python3 -m http.server -->
</head>
<body>
<!-- Navbar large -->
<header id="navbar" class="navbar px-4 lg:px-6 h-14 flex items-center xl:mx-12">
<a class=" flex items-center justify-center" href="#">
<p class="text-sm font-medium tracking-[0.2rem] z-10">
Portfolio</p>
</a>
<nav class="ml-auto flex gap-4 sm:gap-6">
<a class="text-sm font-medium hover:underline underline-offset-4 z-10" href="#AboutMe">
About Me
</a>
<a class="text-sm font-medium hover:underline underline-offset-4 z-10" href="#Skills">
Skills
</a>
<a class="text-sm font-medium hover:underline underline-offset-4 z-10" href="#Projects">
Projects
</a>
<a class="text-sm font-medium hover:underline underline-offset-4 z-10" href="#ContactMe">
Contact Me
</a>
</nav>
<div class="ml-auto flex gap-1 sm:gap-2 z-10">
<a href="assets/Resume template (Community).pdf" download="YDKulkarni.pdf" class="no-underline">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-900 text-gray-50 hover:bg-gray-50 hover:text-gray-900 border border-input h-10 px-4 py-1 w-full z-10"
type="submit">
Resume
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<path fill="currentColor"
d="M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3zm-1-4l-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59L7 11l5 5z" />
</svg>
</button>
</a>
</div>
</header>
<!-- Navbar small -->
<div id="navbar_small" class="navbar px-4 lg:px-6 h-14 flex items-center justify-between">
<a class="flex items-center justify-center" href="#">
<p class="text-sm font-medium tracking-[0.2rem]">
Portfolio</p>
</a>
<button onclick="toggleMenu()">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="currentColor"
d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1m0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1" />
</svg>
</button>
</div>
<!-- Menu -->
<div id="menu" class="absolute top-0 w-full h-fit bg-white shadow-black text-center hidden">
<a class="" href="#">
<p class="text-sm font-medium tracking-[0.2rem] z-10 my-4">
Portfolio</p>
</a>
<a class="text-sm font-medium hover:underline underline-offset-4 z-10" href="#AboutMe">
About Me
</a>
<br>
<a class="text-sm font-medium hover:underline underline-offset-4 z-10" href="#Skills">
Skills
</a>
<br>
<a class="text-sm font-medium hover:underline underline-offset-4 z-10" href="#Projects">
Projects
</a>
<br>
<a class="text-sm font-medium hover:underline underline-offset-4 z-10" href="#ContactMe">
Contact Me
</a>
<br>
<a href="assets/Resume template (Community).pdf" download="YDKulkarni.pdf" class="no-underline">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-900 text-gray-50 hover:bg-gray-50 hover:text-gray-900 border border-input h-10 px-4 py-1 w-fit z-10 my-4"
type="submit">
Resume
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<path fill="currentColor"
d="M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3zm-1-4l-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59L7 11l5 5z" />
</svg>
</button>
</a>
<br>
<button class="mb-4" onclick="toggleMenu()">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="currentColor"
d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275t.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7t.7.275t.7-.275zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22" />
</svg>
</button>
</div>
<!-- Hero Section -->
<main class="flex flex-col-reverse md:flex-row lg:flex-row justify-center items-center px-4 lg:px-6 mt-36">
<div class="w-full md:w-1/2 lg:w-1/2">
<div class="text-5xl lg:text-5xl md:text-4xl">
<h1 class="my-4">Hello I'am
<span class="font-extrabold">Yadunandana D Kulkarni.</span>
</h1>
<h1 class="my-4">
<span class="font-extrabold">Full-Stack</span>
<span class="text-border text-transparent font-extrabold tracking-[0.1rem]">
Developer
</span>
</h1>
<h1 class="my-4">Based in <span class="font-extrabold">India.</span>
</h1>
</div>
<div class="my-4 text-gray-500">
<p>
Highly skilled full-stack developer with a Master's degree in computer science, with expertise spanning both
front-end and back-end web technologies. Dedicated to ongoing professional growth and staying at the forefront
of industry developments.
</p>
</div>
</div>
<img src="assets/HeroBanner.png" alt="HeroBanner" class="md:w-1/2 lg:w-1/2 object-cover md:-ml-20 lg:-ml-40">
</main>
<!-- Quick contacts -->
<div class="flex pl-[30px] lg:pl-[100px] md:pl-[56px] gap-4">
<a href="https://www.linkedin.com/in/yd-kulkarni" target="_blank">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-900 text-gray-50 hover:bg-gray-900 hover:text-gray-900 border border-input h-10 px-2 py-4 w-full">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25" viewBox="0,0,256,256">
<g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none"
font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g transform="scale(5.12,5.12)">
<path
d="M41,4h-32c-2.76,0 -5,2.24 -5,5v32c0,2.76 2.24,5 5,5h32c2.76,0 5,-2.24 5,-5v-32c0,-2.76 -2.24,-5 -5,-5zM17,20v19h-6v-19zM11,14.47c0,-1.4 1.2,-2.47 3,-2.47c1.8,0 2.93,1.07 3,2.47c0,1.4 -1.12,2.53 -3,2.53c-1.8,0 -3,-1.13 -3,-2.53zM39,39h-6c0,0 0,-9.26 0,-10c0,-2 -1,-4 -3.5,-4.04h-0.08c-2.42,0 -3.42,2.06 -3.42,4.04c0,0.91 0,10 0,10h-6v-19h6v2.56c0,0 1.93,-2.56 5.81,-2.56c3.97,0 7.19,2.73 7.19,8.26z">
</path>
</g>
</g>
</svg>
</button>
</a>
<a href="https://github.com/ydkulks" target="_blank">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-50 text-gray-50 hover:bg-gray-50 hover:text-gray-900 border-2 border-black border-input h-10 px-2 py-4 w-full z-10">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="30" viewBox="0 0 30 30">
<path
d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z">
</path>
</svg>
</button>
</a>
<a href="mailto:[email protected]" target="_blank">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-50 text-gray-50 hover:bg-gray-50 hover:text-gray-900 border-2 border-black border-input h-10 px-2 py-4 w-full">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25" viewBox="0 0 50 50">
<path
d="M12 23.403V23.39 10.389L11.88 10.3h-.01L9.14 8.28C7.47 7.04 5.09 7.1 3.61 8.56 2.62 9.54 2 10.9 2 12.41v3.602L12 23.403zM38 23.39v.013l10-7.391V12.41c0-1.49-.6-2.85-1.58-3.83-1.46-1.457-3.765-1.628-5.424-.403L38.12 10.3 38 10.389V23.39zM14 24.868l10.406 7.692c.353.261.836.261 1.189 0L36 24.868V11.867L25 20l-11-8.133V24.868zM38 25.889V41c0 .552.448 1 1 1h6.5c1.381 0 2.5-1.119 2.5-2.5V18.497L38 25.889zM12 25.889L2 18.497V39.5C2 40.881 3.119 42 4.5 42H11c.552 0 1-.448 1-1V25.889z">
</path>
</svg>
</button>
</a>
</div>
<!-- Skills -->
<!--
<div class="border-2 border-black rounded-md w-[150px] h-[150px] skill-hidden" name="skill-hidden">
<div class="flex justify-center mt-9">
</div>
<p class="text-center font-bold mt-5"></p>
</div>
-->
<div class="2xl:px-[25%] lg:px-[15%] md:px-0.5 sm:px-0.5 pb-36" id="Skills">
<h2 class="text-4xl text-center mt-36">My <span class="font-extrabold">Skills</span></h2>
<div class="flex flex-wrap justify-center mt-20 gap-10">
<!-- Javascript -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] hover:scale-105">
<div class="flex justify-center mt-9 text-black">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256">
<!-- <path fill="#F7DF1E" d="M0 0h256v256H0z" /> -->
<path fill="black" d="M0 0h256v256H0z" />
<path fill="white"
d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.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.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-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.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 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" />
</svg>
</div>
<p class="text-center font-bold mt-5">Javascript</p>
</div>
<!-- React.js -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] bg-black hover:scale-105">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 128 128">
<g fill="white">
<circle cx="64" cy="64" r="11.4" />
<path
d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3c.6-2.4 1.1-4.8 1.5-7.1c2.1-13.2-.2-22.5-6.6-26.1c-1.9-1.1-4-1.6-6.4-1.6c-7 0-15.9 5.2-24.9 13.9c-9-8.7-17.9-13.9-24.9-13.9c-2.4 0-4.5.5-6.4 1.6c-6.4 3.7-8.7 13-6.6 26.1c.4 2.3.9 4.7 1.5 7.1c-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3c-.6 2.4-1.1 4.8-1.5 7.1c-2.1 13.2.2 22.5 6.6 26.1c1.9 1.1 4 1.6 6.4 1.6c7.1 0 16-5.2 24.9-13.9c9 8.7 17.9 13.9 24.9 13.9c2.4 0 4.5-.5 6.4-1.6c6.4-3.7 8.7-13 6.6-26.1c-.4-2.3-.9-4.7-1.5-7.1c2.4-.7 4.7-1.4 6.9-2.3c12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8M92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3c-.3 2.1-.8 4.3-1.4 6.6c-5.2-1.2-10.7-2-16.5-2.5c-3.4-4.8-6.9-9.1-10.4-13c7.4-7.3 14.9-12.3 21-12.3c1.3 0 2.5.3 3.5.9M81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6c-3.7.3-7.4.4-11.2.4c-3.9 0-7.6-.1-11.2-.4q-3.3-4.8-6-9.6c-1.9-3.3-3.7-6.7-5.3-10c1.6-3.3 3.4-6.7 5.3-10c1.8-3.2 3.9-6.4 6.1-9.6c3.7-.3 7.4-.4 11.2-.4c3.9 0 7.6.1 11.2.4q3.3 4.8 6 9.6c1.9 3.3 3.7 6.7 5.3 10c-1.7 3.3-3.4 6.6-5.3 10m8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3c-3.4.8-7 1.4-10.8 1.9c1.2-1.9 2.5-3.9 3.6-6c1.2-2.1 2.3-4.2 3.4-6.2M64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3c2.3.1 4.6.2 6.9.2s4.6-.1 6.9-.2c-2.2 2.9-4.5 5.7-6.9 8.3m-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9c1.1-3.3 2.3-6.8 3.8-10.3c1.1 2 2.2 4.1 3.4 6.1c1.2 2.2 2.4 4.1 3.6 6.1m-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3c3.4-.8 7-1.4 10.8-1.9c-1.2 1.9-2.5 3.9-3.6 6c-1.2 2.1-2.3 4.2-3.4 6.2M64 30.2c2.4 2.6 4.7 5.4 6.9 8.3c-2.3-.1-4.6-.2-6.9-.2s-4.6.1-6.9.2c2.2-2.9 4.5-5.7 6.9-8.3m22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9c-1.1 3.3-2.3 6.8-3.8 10.3c-1.1-2.1-2.2-4.2-3.4-6.2M31.7 35c-1.7-10.5-.3-17.9 3.8-20.3c1-.6 2.2-.9 3.5-.9c6 0 13.5 4.9 21 12.3c-3.5 3.8-7 8.2-10.4 13c-5.8.5-11.3 1.4-16.5 2.5c-.6-2.3-1-4.5-1.4-6.6M7 64c0-4.7 5.7-9.7 15.7-13.4c2-.8 4.2-1.5 6.4-2.1c1.6 5 3.6 10.3 6 15.6c-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64m28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3c.3-2.1.8-4.3 1.4-6.6c5.2 1.2 10.7 2 16.5 2.5c3.4 4.8 6.9 9.1 10.4 13c-7.4 7.3-14.9 12.3-21 12.3c-1.3 0-2.5-.3-3.5-.9M96.3 93c1.7 10.5.3 17.9-3.8 20.3c-1 .6-2.2.9-3.5.9c-6 0-13.5-4.9-21-12.3c3.5-3.8 7-8.2 10.4-13c5.8-.5 11.3-1.4 16.5-2.5c.6 2.3 1 4.5 1.4 6.6m9-15.6c-2 .8-4.2 1.5-6.4 2.1c-1.6-5-3.6-10.3-6-15.6c2.4-5.3 4.5-10.5 6-15.5c13.8 4 22.1 10 22.1 15.6c0 4.7-5.8 9.7-15.7 13.4" />
</g>
</svg>
</div>
<p class="text-white text-center font-bold mt-5">React.js</p>
</div>
<!-- Tailwind CSS -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] hover:scale-105">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 154">
<defs>
<linearGradient id="logosTailwindcssIcon0" x1="-2.778%" x2="100%" y1="32%" y2="67.556%">
<stop offset="0%" stop-color="black" />
<stop offset="100%" stop-color="black" />
<!-- <stop offset="0%" stop-color="#2298BD" /> -->
<!-- <stop offset="100%" stop-color="#0ED7B5" /> -->
</linearGradient>
</defs>
<path fill="url(#logosTailwindcssIcon0)"
d="M128 0Q76.8 0 64 51.2Q83.2 25.6 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8q51.2 0 64-51.2q-19.2 25.6-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0M64 76.8q-51.2 0-64 51.2q19.2-25.6 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6q51.2 0 64-51.2q-19.2 25.6-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8" />
</svg>
</div>
<p class="text-center font-bold mt-5">Tailwind CSS</p>
</div>
<!-- Next.js -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] hover:scale-105">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 128 128">
<circle cx="64" cy="64" r="64" />
<path fill="url(#deviconNextjs0)"
d="M106.317 112.014L49.167 38.4H38.4v51.179h8.614v-40.24l52.54 67.884a64 64 0 0 0 6.763-5.209" />
<path fill="url(#deviconNextjs1)" d="M81.778 38.4h8.533v51.2h-8.533z" />
<defs>
<linearGradient id="deviconNextjs0" x1="109" x2="144.5" y1="116.5" y2="160.5"
gradientTransform="scale(.71111)" gradientUnits="userSpaceOnUse">
<stop stop-color="#fff" />
<stop offset="1" stop-color="#fff" stop-opacity="0" />
</linearGradient>
<linearGradient id="deviconNextjs1" x1="121" x2="120.799" y1="54" y2="106.875"
gradientTransform="scale(.71111)" gradientUnits="userSpaceOnUse">
<stop stop-color="#fff" />
<stop offset="1" stop-color="#fff" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<p class="text-center font-bold mt-5">Next.js</p>
</div>
<!-- Figma -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] hover:scale-105">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="21.34" height="32" viewBox="0 0 256 384">
<path fill="black" d="M64 384c35.328 0 64-28.672 64-64v-64H64c-35.328 0-64 28.672-64 64s28.672 64 64 64" />
<path fill="black" d="M0 192c0-35.328 28.672-64 64-64h64v128H64c-35.328 0-64-28.672-64-64" />
<path fill="black" d="M0 64C0 28.672 28.672 0 64 0h64v128H64C28.672 128 0 99.328 0 64" />
<path fill="black" d="M128 0h64c35.328 0 64 28.672 64 64s-28.672 64-64 64h-64z" />
<path fill="black" d="M256 192c0 35.328-28.672 64-64 64s-64-28.672-64-64s28.672-64 64-64s64 28.672 64 64" />
</svg>
</div>
<p class="text-center font-bold mt-5">Figma</p>
</div>
<!-- Go -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] hover:scale-105">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="45.34" height="32" viewBox="0 0 512 192">
<path fill="black"
d="m292.533 13.295l1.124.75c13.212 8.725 22.685 20.691 28.917 35.15c1.496 2.243.499 3.49-2.493 4.237l-5.063 1.296c-11.447 2.949-20.53 5.429-31.827 8.378l-6.443 1.678c-2.32.574-2.96.333-5.428-2.477l-.348-.399c-3.519-3.988-6.155-6.652-10.817-9.03l-.899-.443c-15.705-7.727-30.911-5.484-45.12 3.74c-16.952 10.968-25.677 27.172-25.428 47.364c.25 19.942 13.96 36.395 33.654 39.137c16.951 2.244 31.16-3.739 42.378-16.452c2.244-2.743 4.238-5.734 6.73-9.224h-48.11c-5.235 0-6.481-3.24-4.736-7.478l.864-2.035c3.204-7.454 8.173-18.168 11.4-24.294l.704-1.319c.862-1.494 2.612-3.513 5.977-3.513h80.224c3.603-11.415 9.449-22.201 17.246-32.407c18.198-23.931 40.135-36.396 69.8-41.63c25.427-4.488 49.359-1.995 71.046 12.713c19.694 13.461 31.909 31.66 35.15 55.59c4.237 33.654-5.485 61.075-28.668 84.508c-16.453 16.702-36.645 27.172-59.829 31.908c-6.73 1.247-13.461 1.496-19.942 2.244c-22.685-.499-43.376-6.98-60.826-21.937c-12.273-10.61-20.727-23.648-24.928-38.828a105 105 0 0 1-10.47 16.89c-17.949 23.683-41.381 38.39-71.046 42.38c-24.43 3.24-47.115-1.497-67.058-16.454c-18.447-13.96-28.917-32.407-31.66-55.34c-3.24-27.173 4.737-51.603 21.19-73.041c17.7-23.184 41.132-37.891 69.8-43.126c22.999-4.16 45.037-1.595 64.936 11.464M411.12 49.017l-.798.178c-23.183 5.235-38.14 19.942-43.624 43.375c-4.488 19.444 4.985 39.138 22.934 47.115c13.71 5.983 27.421 5.235 40.633-1.496c19.694-10.22 30.413-26.175 31.66-47.613c-.25-3.24-.25-5.734-.749-8.227c-4.436-24.401-26.664-38.324-50.056-33.332M116.416 94.564c.997 0 1.496.748 1.496 1.745l-.499 5.983c0 .997-.997 1.745-1.745 1.745l-54.344-.249c-.997 0-1.246-.748-.748-1.496l3.49-6.232c.499-.748 1.496-1.496 2.493-1.496zM121.9 71.63c.997 0 1.496.748 1.247 1.496l-1.995 5.983c-.249.997-1.246 1.495-2.243 1.495l-117.912.25c-.997 0-1.246-.499-.748-1.247l5.235-6.73c.499-.748 1.745-1.247 2.742-1.247zm12.963-22.934c.997 0 1.246.748.748 1.496l-4.238 6.481c-.499.748-1.745 1.496-2.493 1.496l-90.24-.25c-.998 0-1.247-.498-.749-1.246l5.235-6.73c.499-.748 1.745-1.247 2.742-1.247z" />
</svg>
</div>
<p class="text-center font-bold mt-5">Go</p>
</div>
<!-- Socket.io -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] hover:scale-105">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256">
<path fill="#010101"
d="M96.447 7.382c32.267-8.275 67.929-3.453 96.386 14.11c35.84 21.433 59.238 61.976 59.833 103.71c1.31 42.15-20.659 83.944-55.963 106.865c-39.293 26.433-93.648 27.446-133.775 2.322c-40.9-24.41-64.774-73.645-58.641-120.916c4.94-49.95 43.52-94.005 92.16-106.09" />
<path fill="#FFF"
d="M91.505 27.803c60.964-24.41 135.74 20.658 142.05 86.028c9.824 58.82-38.995 118.593-98.59 120.32c-56.677 5.656-111.449-42.39-113.056-99.304c-4.227-46.08 26.136-91.803 69.596-107.044" />
<path fill="#010101"
d="M97.637 121.69c27.327-22.326 54.058-45.426 81.98-67.097c-14.646 22.505-29.708 44.711-44.354 67.215c-12.562.06-25.123.06-37.626-.119m23.1 12.443c12.621 0 25.183 0 37.745.179c-27.505 22.206-54.117 45.484-82.099 67.096c14.646-22.505 29.708-44.77 44.354-67.275" />
</svg>
</div>
<p class="text-center font-bold mt-5">Socket.io</p>
</div>
<!-- Vercel -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] hover:scale-105">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 128 128">
<path d="M64.002 8.576L128 119.424H0Zm0 0" />
</svg>
</div>
<p class="text-center font-bold mt-5">Vercel</p>
</div>
<!-- MongoDB -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] hover:scale-105">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 128 128">
<path fill="black" fill-rule="evenodd"
d="M88.038 42.812c1.605 4.643 2.761 9.383 3.141 14.296c.472 6.095.256 12.147-1.029 18.142c-.035.165-.109.32-.164.48c-.403.001-.814-.049-1.208.012c-3.329.523-6.655 1.065-9.981 1.604c-3.438.557-6.881 1.092-10.313 1.687c-1.216.21-2.721-.041-3.212 1.641c-.014.046-.154.054-.235.08l.166-10.051l-.169-24.252l1.602-.275c2.62-.429 5.24-.864 7.862-1.281c3.129-.497 6.261-.98 9.392-1.465c1.381-.215 2.764-.412 4.148-.618"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="M61.729 110.054c-1.69-1.453-3.439-2.842-5.059-4.37c-8.717-8.222-15.093-17.899-18.233-29.566c-.865-3.211-1.442-6.474-1.627-9.792c-.13-2.322-.318-4.665-.154-6.975c.437-6.144 1.325-12.229 3.127-18.147l.099-.138c.175.233.427.439.516.702q2.638 7.77 5.242 15.551c5.458 16.3 10.909 32.604 16.376 48.9c.107.318.384.579.583.866z"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="M88.038 42.812c-1.384.206-2.768.403-4.149.616c-3.131.485-6.263.968-9.392 1.465c-2.622.417-5.242.852-7.862 1.281l-1.602.275l-.012-1.045c-.053-.859-.144-1.717-.154-2.576c-.069-5.478-.112-10.956-.18-16.434c-.042-3.429-.105-6.857-.175-10.285c-.043-2.13-.089-4.261-.185-6.388c-.052-1.143-.236-2.28-.311-3.423c-.042-.657.016-1.319.029-1.979c.817 1.583 1.616 3.178 2.456 4.749c1.327 2.484 3.441 4.314 5.344 6.311c7.523 7.892 12.864 17.068 16.193 27.433"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="M65.036 80.753c.081-.026.222-.034.235-.08c.491-1.682 1.996-1.431 3.212-1.641c3.432-.594 6.875-1.13 10.313-1.687c3.326-.539 6.652-1.081 9.981-1.604c.394-.062.805-.011 1.208-.012c-.622 2.22-1.112 4.488-1.901 6.647c-.896 2.449-1.98 4.839-3.131 7.182a49 49 0 0 1-6.353 9.763c-1.919 2.308-4.058 4.441-6.202 6.548c-1.185 1.165-2.582 2.114-3.882 3.161l-.337-.23l-1.214-1.038l-1.256-2.753a41.4 41.4 0 0 1-1.394-9.838l.023-.561l.171-2.426c.057-.828.133-1.655.168-2.485c.129-2.982.241-5.964.359-8.946"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="M65.036 80.753c-.118 2.982-.23 5.964-.357 8.947c-.035.83-.111 1.657-.168 2.485l-.765.289c-1.699-5.002-3.399-9.951-5.062-14.913c-2.75-8.209-5.467-16.431-8.213-24.642a4499 4499 0 0 0-6.7-19.867c-.105-.31-.407-.552-.617-.826l4.896-9.002c.168.292.39.565.496.879a6168 6168 0 0 1 6.768 20.118c2.916 8.73 5.814 17.467 8.728 26.198c.116.349.308.671.491 1.062l.67-.78z"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="M43.155 32.227c.21.274.511.516.617.826a4499 4499 0 0 1 6.7 19.867c2.746 8.211 5.463 16.433 8.213 24.642c1.662 4.961 3.362 9.911 5.062 14.913l.765-.289l-.171 2.426l-.155.559c-.266 2.656-.49 5.318-.814 7.968c-.163 1.328-.509 2.632-.772 3.947c-.198-.287-.476-.548-.583-.866c-5.467-16.297-10.918-32.6-16.376-48.9a3889 3889 0 0 0-5.242-15.551c-.089-.263-.34-.469-.516-.702z"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="m65.202 70.702l-.67.78c-.183-.391-.375-.714-.491-1.062c-2.913-8.731-5.812-17.468-8.728-26.198a6168 6168 0 0 0-6.768-20.118c-.105-.314-.327-.588-.496-.879l6.055-7.965c.191.255.463.482.562.769q2.52 7.382 5.003 14.778c1.547 4.604 3.071 9.215 4.636 13.813c.105.308.47.526.714.786l.012 1.045q.087 12.124.171 24.251"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="M65.021 45.404c-.244-.26-.609-.478-.714-.786c-1.565-4.598-3.089-9.209-4.636-13.813q-2.483-7.395-5.003-14.778c-.099-.287-.371-.514-.562-.769c1.969-1.928 3.877-3.925 5.925-5.764c1.821-1.634 3.285-3.386 3.352-5.968c.003-.107.059-.214.145-.514l.519 1.306c-.013.661-.072 1.322-.029 1.979c.075 1.143.259 2.28.311 3.423c.096 2.127.142 4.258.185 6.388c.069 3.428.132 6.856.175 10.285c.067 5.478.111 10.956.18 16.434c.008.861.098 1.718.152 2.577"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="M62.598 107.085c.263-1.315.609-2.62.772-3.947c.325-2.649.548-5.312.814-7.968l.066-.01l.066.011a41.4 41.4 0 0 0 1.394 9.838c-.176.232-.425.439-.518.701c-.727 2.05-1.412 4.116-2.143 6.166c-.1.28-.378.498-.574.744l-.747-2.566z"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="M62.476 112.621c.196-.246.475-.464.574-.744c.731-2.05 1.417-4.115 2.143-6.166c.093-.262.341-.469.518-.701l1.255 2.754c-.248.352-.59.669-.728 1.061l-2.404 7.059c-.099.283-.437.483-.663.722z"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="M63.171 116.605c.227-.238.564-.439.663-.722l2.404-7.059c.137-.391.48-.709.728-1.061l1.215 1.037c-.587.58-.913 1.25-.717 2.097l-.369 1.208c-.168.207-.411.387-.494.624c-.839 2.403-1.64 4.819-2.485 7.222c-.107.305-.404.544-.614.812q-.164-2.079-.331-4.158"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="M63.503 120.763c.209-.269.506-.508.614-.812c.845-2.402 1.646-4.818 2.485-7.222c.083-.236.325-.417.494-.624l-.509 5.545c-.136.157-.333.294-.398.477c-.575 1.614-1.117 3.24-1.694 4.854c-.119.333-.347.627-.525.938c-.158-.207-.441-.407-.454-.623c-.051-.841-.016-1.688-.013-2.533"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd"
d="M63.969 123.919c.178-.312.406-.606.525-.938c.578-1.613 1.119-3.239 1.694-4.854c.065-.183.263-.319.398-.477l.012 3.64l-1.218 3.124z"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd" d="m65.38 124.415l1.218-3.124l.251 3.696z" clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd" d="M67.464 110.898c-.196-.847.129-1.518.717-2.097l.337.23z"
clip-rule="evenodd" />
<path fill="black" fill-rule="evenodd" d="m64.316 95.172l-.066-.011l-.066.01l.155-.559z"
clip-rule="evenodd" />
</svg>
</div>
<p class="text-center font-bold mt-5">MongoDB</p>
</div>
<!-- Git -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] skill-hidden hover:scale-105"
name="skill-hidden">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 128 128">
<path fill="black"
d="M124.737 58.378L69.621 3.264c-3.172-3.174-8.32-3.174-11.497 0L46.68 14.71l14.518 14.518c3.375-1.139 7.243-.375 9.932 2.314c2.703 2.706 3.461 6.607 2.294 9.993l13.992 13.993c3.385-1.167 7.292-.413 9.994 2.295c3.78 3.777 3.78 9.9 0 13.679a9.673 9.673 0 0 1-13.683 0a9.68 9.68 0 0 1-2.105-10.521L68.574 47.933l-.002 34.341a9.7 9.7 0 0 1 2.559 1.828c3.778 3.777 3.778 9.898 0 13.683c-3.779 3.777-9.904 3.777-13.679 0c-3.778-3.784-3.778-9.905 0-13.683a9.7 9.7 0 0 1 3.167-2.11V47.333a9.6 9.6 0 0 1-3.167-2.111c-2.862-2.86-3.551-7.06-2.083-10.576L41.056 20.333L3.264 58.123a8.133 8.133 0 0 0 0 11.5l55.117 55.114c3.174 3.174 8.32 3.174 11.499 0l54.858-54.858a8.135 8.135 0 0 0-.001-11.501" />
</svg>
</div>
<p class="text-center font-bold mt-5">Git</p>
</div>
<!-- MySQL -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] skill-hidden hover:scale-105"
name="skill-hidden">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 128 128">
<path fill="black"
d="M117.688 98.242c-6.973-.191-12.297.461-16.852 2.379c-1.293.547-3.355.559-3.566 2.18c.711.746.82 1.859 1.387 2.777c1.086 1.754 2.922 4.113 4.559 5.352c1.789 1.348 3.633 2.793 5.551 3.961c3.414 2.082 7.223 3.27 10.504 5.352c1.938 1.23 3.859 2.777 5.75 4.164c.934.684 1.563 1.75 2.773 2.18v-.195c-.637-.812-.801-1.93-1.387-2.777l-2.578-2.578c-2.52-3.344-5.719-6.281-9.117-8.719c-2.711-1.949-8.781-4.578-9.91-7.73l-.199-.199c1.922-.219 4.172-.914 5.949-1.391c2.98-.797 5.645-.59 8.719-1.387l4.164-1.187v-.793c-1.555-1.594-2.664-3.707-4.359-5.152c-4.441-3.781-9.285-7.555-14.273-10.703c-2.766-1.746-6.184-2.883-9.117-4.363c-.988-.496-2.719-.758-3.371-1.586c-1.539-1.961-2.379-4.449-3.566-6.738c-2.488-4.793-4.93-10.023-7.137-15.066c-1.504-3.437-2.484-6.828-4.359-9.91c-9-14.797-18.687-23.73-33.695-32.508c-3.195-1.867-7.039-2.605-11.102-3.57l-6.543-.395c-1.332-.555-2.715-2.184-3.965-2.977C16.977 3.52 4.223-3.312.539 5.672C-1.785 11.34 4.016 16.871 6.09 19.746c1.457 2.012 3.32 4.273 4.359 6.539c.688 1.492.805 2.984 1.391 4.559c1.438 3.883 2.695 8.109 4.559 11.695c.941 1.816 1.98 3.727 3.172 5.352c.727.996 1.98 1.438 2.18 2.973c-1.227 1.715-1.297 4.375-1.984 6.543c-3.098 9.77-1.926 21.91 2.578 29.137c1.383 2.223 4.641 6.98 9.117 5.156c3.918-1.598 3.043-6.539 4.164-10.902c.254-.988.098-1.715.594-2.379v.199l3.57 7.133c2.641 4.254 7.324 8.699 11.297 11.699c2.059 1.555 3.68 4.242 6.344 5.152v-.199h-.199c-.516-.805-1.324-1.137-1.98-1.781c-1.551-1.523-3.277-3.414-4.559-5.156c-3.613-4.902-6.805-10.27-9.711-15.855c-1.391-2.668-2.598-5.609-3.77-8.324c-.453-1.047-.445-2.633-1.387-3.172c-1.281 1.988-3.172 3.598-4.164 5.945c-1.582 3.754-1.789 8.336-2.375 13.082c-.348.125-.195.039-.398.199c-2.762-.668-3.73-3.508-4.758-5.949c-2.594-6.164-3.078-16.09-.793-23.191c.59-1.836 3.262-7.617 2.18-9.316c-.516-1.691-2.219-2.672-3.172-3.965c-1.18-1.598-2.355-3.703-3.172-5.551c-2.125-4.805-3.113-10.203-5.352-15.062c-1.07-2.324-2.875-4.676-4.359-6.738c-1.645-2.289-3.484-3.977-4.758-6.742c-.453-.984-1.066-2.559-.398-3.566c.215-.684.516-.969 1.191-1.191c1.148-.887 4.352.297 5.547.793c3.18 1.32 5.832 2.578 8.527 4.363c1.289.855 2.598 2.512 4.16 2.973h1.785c2.789.641 5.914.195 8.523.988c4.609 1.402 8.738 3.582 12.488 5.949c11.422 7.215 20.766 17.48 27.156 29.734c1.027 1.973 1.473 3.852 2.379 5.945c1.824 4.219 4.125 8.559 5.941 12.688c1.816 4.113 3.582 8.27 6.148 11.695c1.348 1.801 6.551 2.766 8.918 3.766c1.66.699 4.379 1.43 5.949 2.379c3 1.809 5.906 3.965 8.723 5.945c1.402.992 5.73 3.168 5.945 4.957zm-88.605-75.52c-1.453-.027-2.48.156-3.566.395v.199h.195c.695 1.422 1.918 2.34 2.777 3.566l1.98 4.164l.199-.195c1.227-.867 1.789-2.25 1.781-4.363c-.492-.52-.562-1.164-.992-1.785c-.562-.824-1.66-1.289-2.375-1.98zm0 0" />
</svg>
</div>
<p class="text-center font-bold mt-5">MySQL</p>
</div>
<!-- PHP -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] skill-hidden hover:scale-105"
name="skill-hidden">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="43.51" height="32" viewBox="0 0 512 258">
<path
d="M116.448 54.116c22.287.187 38.436 6.612 48.449 19.266q15.018 18.98 9.916 51.849q-1.982 15.018-8.783 29.466c-4.346 9.633-10.387 18.32-18.133 26.066q-14.168 14.73-30.316 18.7q-16.15 3.968-33.433 3.967H50.15l-10.766 53.832H0L40.516 54.116zm335.893 0c22.287.187 38.437 6.612 48.45 19.266q15.017 18.98 9.916 51.849q-1.982 15.018-8.783 29.466c-4.347 9.633-10.387 18.32-18.133 26.066q-14.168 14.73-30.316 18.7q-16.152 3.968-33.433 3.967h-34l-10.766 53.832h-39.383L376.41 54.116zM258.775 0l-11.05 54.116h35.133q28.898.57 43.065 11.9c9.634 7.553 12.467 21.912 8.5 43.065L315.44 203.43h-39.666l18.133-90.099q2.83-14.168-1.7-20.116q-4.53-5.95-19.55-5.95l-31.449-.283l-23.233 116.448h-39.099L219.676 0zM85.848 86.415a79 79 0 0 1-6.516.283h-5.724l-16.942 84.715q1.7.283 3.4.284h3.966c18.133.187 33.246-1.604 45.333-5.383c12.087-3.967 20.212-17.754 24.366-41.366q5.1-29.751-10.2-34.283c-10.013-3.02-22.57-4.437-37.683-4.25m335.894 0a79 79 0 0 1-6.517.283h-5.724l-16.942 84.715q1.7.283 3.4.284h3.967c18.133.187 33.245-1.604 45.332-5.383c12.087-3.967 20.213-17.754 24.366-41.366q5.1-29.751-10.2-34.283c-10.012-3.02-22.57-4.437-37.682-4.25" />
</svg>
</div>
<p class="text-center font-bold mt-5">PHP</p>
</div>
<!-- WebRTC -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] skill-hidden hover:scale-105"
name="skill-hidden">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32.9" height="32" viewBox="0 0 256 249">
<path fill="black"
d="M142.077 191.087c0 31.806-25.782 57.592-57.588 57.592c-31.81 0-57.593-25.786-57.593-57.592s25.782-57.592 57.593-57.592c31.806 0 57.588 25.786 57.588 57.592" />
<path fill="black"
d="M255.98 110.459c0 31.802-25.782 57.592-57.588 57.592c-31.81 0-57.592-25.79-57.592-57.592c0-31.807 25.781-57.597 57.592-57.597c31.806 0 57.588 25.79 57.588 57.597" />
<path fill="black"
d="M115.2 109.18c0 31.802-25.781 57.593-57.592 57.593c-31.802 0-57.588-25.79-57.588-57.592c0-31.807 25.786-57.597 57.588-57.597c31.81 0 57.592 25.79 57.592 57.597" />
<path fill="black"
d="M230.386 191.087c0 31.806-25.782 57.592-57.597 57.592c-31.802 0-57.588-25.786-57.588-57.592s25.786-57.592 57.588-57.592c31.815 0 57.597 25.786 57.597 57.592" />
<path fill="black"
d="M185.592 57.985c0 31.806-25.786 57.592-57.592 57.592S70.408 89.79 70.408 57.985S96.194.392 128 .392s57.592 25.787 57.592 57.593" />
<path fill="black"
d="M140.799 110.458c0 1.212.105 2.398.181 3.593c25.546-5.894 44.61-28.733 44.61-56.068c0-1.212-.105-2.402-.18-3.597c-25.546 5.897-44.611 28.737-44.611 56.072" />
<path fill="black"
d="M148.397 138.975c9.925 17.352 28.576 29.075 49.997 29.075c8.73 0 16.976-2.001 24.393-5.48c-9.92-17.35-28.572-29.074-49.997-29.074c-8.73 0-16.976 2-24.393 5.48" />
<path fill="black"
d="M115.2 191.087c0 14.071 5.058 26.947 13.442 36.948c8.376-10 13.434-22.877 13.434-36.948c0-14.07-5.058-26.947-13.434-36.948c-8.384 10.001-13.442 22.877-13.442 36.948" />
<path fill="black"
d="M34.807 162.057a57.3 57.3 0 0 0 22.801 4.716c21.21 0 39.688-11.496 49.685-28.564a57.3 57.3 0 0 0-22.801-4.711c-21.21 0-39.692 11.495-49.685 28.56" />
<path fill="black"
d="M70.655 53.126c-.136 1.604-.25 3.217-.25 4.86c0 27.313 19.036 50.132 44.552 56.05c.13-1.604.245-3.217.245-4.855c0-27.314-19.032-50.14-44.547-56.055" />
<path fill="#FFF"
d="M76.03 183.96h-9.009c-7.953 0-14.42-6.446-14.42-14.379V88.035c0-7.932 6.467-14.383 14.42-14.383H179.99c7.954 0 14.417 6.45 14.417 14.383v81.546c0 7.933-6.463 14.38-14.417 14.38h-38.484L64.29 221.81z" />
</svg>
</div>
<p class="text-center font-bold mt-5">WebRTC</p>
</div>
<!-- JWT -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] skill-hidden hover:scale-105"
name="skill-hidden">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="31.88" height="32" viewBox="0 0 256 257">
<path fill="black"
d="M147.386 69.071L147.129 0h-38.515l.257 69.071l19.257 26.448zm-38.515 118.371v69.328h38.515v-69.328l-19.258-26.447z" />
<path fill="black"
d="m147.386 187.442l40.57 55.976l31.069-22.596l-40.57-55.975l-31.069-10.015zM108.871 69.071L68.044 13.095L36.975 35.691l40.57 55.976l31.326 10.014z" />
<path fill="black"
d="M77.545 91.667L11.811 70.355L0 106.816l65.733 21.569l31.069-10.271zm81.653 46.732l19.257 26.448l65.734 21.311L256 149.697l-65.733-21.312z" />
<path fill="black"
d="M190.267 128.385L256 106.816l-11.811-36.461l-65.734 21.312l-19.257 26.447zm-124.534 0L0 149.697l11.811 36.461l65.734-21.311l19.257-26.448z" />
<path fill="black"
d="m77.545 164.847l-40.57 55.975l31.069 22.596l40.827-55.976v-32.61zm100.91-73.18l40.57-55.976l-31.069-22.596l-40.57 55.976v32.61z" />
</svg>
</div>
<p class="text-center font-bold mt-5">JWT</p>
</div>
<!-- Docker -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] skill-hidden hover:scale-105"
name="skill-hidden">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 50 50"
style="fill:#1A1A1A;">
<path
d="M 20 9 L 20 14 L 10 14 L 10 19 L 5 19 L 5 24 L 1.125 24 C 0.640625 24 0.242188 24.335938 0.15625 24.8125 C 0.148438 24.847656 0 25.683594 0 26.75 C 0 27.449219 0.0664063 28.210938 0.1875 28.96875 C 1.332031 28.695313 3.429688 28.285156 3.0625 26.9375 C 5.035156 29.222656 9.769531 28.53125 10.96875 27.40625 C 12.308594 29.347656 20.113281 28.605469 20.65625 27.09375 C 22.335938 29.0625 27.542969 29.0625 29.21875 27.09375 C 29.761719 28.605469 37.535156 29.347656 38.875 27.40625 C 39.300781 27.804688 40.1875 28.136719 41.21875 28.3125 C 41.566406 27.652344 41.886719 26.988281 42.1875 26.28125 C 48.539063 26.203125 49.910156 21.636719 49.96875 21.4375 C 50.078125 21.054688 49.929688 20.660156 49.625 20.40625 C 49.519531 20.316406 47.175781 18.414063 43.375 19.0625 C 42.308594 15.589844 39.5625 14.007813 39.4375 13.9375 C 39.078125 13.734375 38.632813 13.765625 38.3125 14.03125 C 38.210938 14.113281 35.847656 16.117188 36.21875 20.21875 C 36.3125 21.25 36.582031 22.160156 37 22.96875 C 36.179688 23.425781 34.769531 24 32.5 24 L 32 24 L 32 19 L 27 19 L 27 9 Z M 41.21875 28.3125 C 41.097656 28.546875 40.941406 28.773438 40.8125 29 L 49.84375 29 C 48.757813 28.726563 46.425781 28.359375 46.8125 26.9375 C 45.535156 28.414063 43.109375 28.632813 41.21875 28.3125 Z M 40.8125 29 L 0.1875 29 C 0.429688 30.46875 0.929688 32.007813 1.6875 33.5 C 7.117188 34.777344 12.816406 32.832031 12.875 32.8125 C 13.398438 32.628906 13.945313 32.917969 14.125 33.4375 C 14.308594 33.957031 14.050781 34.539063 13.53125 34.71875 C 13.339844 34.785156 9.90625 35.9375 5.6875 35.9375 C 4.851563 35.9375 3.972656 35.890625 3.09375 35.78125 C 5.71875 39.261719 10.167969 42 17 42 C 27.804688 42 36.113281 37.410156 40.8125 29 Z M 0.1875 29 C 0.183594 28.984375 0.191406 28.984375 0.1875 28.96875 C 0.121094 28.984375 0.0585938 28.984375 0 29 Z M 22 11 L 25 11 L 25 14 L 22 14 Z M 12 16 L 15 16 L 15 19 L 12 19 Z M 17 16 L 20 16 L 20 19 L 17 19 Z M 22 16 L 25 16 L 25 19 L 22 19 Z M 7 21 L 10 21 L 10 24 L 7 24 Z M 12 21 L 15 21 L 15 24 L 12 24 Z M 17 21 L 20 21 L 20 24 L 17 24 Z M 22 21 L 25 21 L 25 24 L 22 24 Z M 27 21 L 30 21 L 30 24 L 27 24 Z M 16 31 C 16.128906 31 16.261719 31.019531 16.375 31.0625 C 16.253906 31.132813 16.15625 31.253906 16.15625 31.40625 C 16.15625 31.632813 16.335938 31.84375 16.5625 31.84375 C 16.714844 31.84375 16.867188 31.75 16.9375 31.625 C 16.988281 31.742188 17 31.863281 17 32 C 17 32.550781 16.550781 33 16 33 C 15.449219 33 15 32.550781 15 32 C 15 31.449219 15.449219 31 16 31 Z">
</path>
</svg>
</div>
<p class="text-center font-bold mt-5">Docker</p>
</div>
<!-- Postman -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] skill-hidden hover:scale-105"
name="skill-hidden">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256">
<path fill="black"
d="M254.953 144.253c8.959-70.131-40.569-134.248-110.572-143.206C74.378-7.912 10.005 41.616 1.047 111.619c-8.959 70.003 40.569 134.248 110.572 143.334c70.131 8.959 134.248-40.569 143.334-110.7" />
<path fill="#FFF" d="m174.2 82.184l-54.007 54.007l-15.23-15.23c53.111-53.11 58.358-48.503 69.236-38.777" />
<path fill="black"
d="M120.193 137.47c-.384 0-.64-.128-.896-.384l-15.357-15.229a1.237 1.237 0 0 1 0-1.791c54.006-54.007 59.637-48.888 71.027-38.65c.256.256.384.512.384.896s-.128.64-.384.896l-54.006 53.878c-.128.256-.512.384-.768.384m-13.437-16.509l13.437 13.438l52.087-52.087c-9.47-8.446-15.87-11.006-65.524 38.65" />
<path fill="#FFF"
d="m135.678 151.676l-14.717-14.718l54.006-54.006c14.462 14.59-7.166 38.265-39.289 68.724" />
<path fill="black"
d="M135.678 152.956c-.384 0-.64-.128-.895-.384l-14.718-14.718c-.256-.256-.256-.512-.256-.896c0-.383.128-.64.384-.895L174.2 82.056a1.237 1.237 0 0 1 1.792 0a15.58 15.58 0 0 1 4.991 11.902c-.256 14.206-16.38 32.25-44.28 58.614c-.384.256-.768.384-1.024.384m-12.925-15.998c8.19 8.319 11.646 11.646 12.925 12.926c21.5-20.476 42.36-41.464 42.489-55.926c.128-3.327-1.152-6.655-3.328-9.214z" />
<path fill="#FFF"
d="m105.22 121.345l10.878 10.878q.384.384 0 .768c-.128.128-.128.128-.256.128l-22.524 4.863c-1.152.128-2.176-.64-2.432-1.791c-.128-.64.128-1.28.512-1.664l13.054-13.054c.256-.256.64-.384.768-.128" />
<path fill="black"
d="M92.934 139.262c-1.92 0-3.327-1.536-3.327-3.455c0-.896.384-1.792 1.024-2.432l13.053-13.054c.768-.64 1.792-.64 2.56 0l10.878 10.878c.768.64.768 1.792 0 2.56c-.256.256-.512.384-.896.512l-22.524 4.863c-.256 0-.512.128-.768.128m11.902-16.509l-12.542 12.542c-.256.256-.384.64-.128 1.024c.128.384.512.511.896.384l21.116-4.608z" />
<path fill="#FFF"
d="M202.738 52.238c-8.19-7.935-21.372-7.679-29.306.64c-7.935 8.318-7.679 21.372.64 29.306A20.68 20.68 0 0 0 199.154 85l-14.59-14.59z" />
<path fill="black"
d="M188.405 89.223c-12.158 0-22.012-9.854-22.012-22.012s9.854-22.012 22.012-22.012c5.63 0 11.134 2.176 15.23 6.143c.255.256.383.512.383.896s-.128.64-.384.896L186.357 70.41l13.566 13.566c.512.512.512 1.28 0 1.792l-.256.256c-3.328 2.047-7.295 3.2-11.262 3.2m0-41.336c-10.75 0-19.453 8.702-19.325 19.452c0 10.75 8.703 19.453 19.453 19.325c2.943 0 5.887-.64 8.574-2.048l-13.437-13.31c-.256-.256-.384-.512-.384-.896c0-.383.128-.64.384-.895l17.149-17.15c-3.456-2.943-7.807-4.478-12.414-4.478" />
<path fill="#FFF"
d="m203.122 52.622l-.256-.256l-18.3 18.044l14.461 14.462c1.408-.896 2.815-1.92 3.967-3.072a20.51 20.51 0 0 0 .128-29.178" />
<path fill="black"
d="M199.155 86.28c-.384 0-.64-.128-.896-.384l-14.59-14.59c-.255-.256-.383-.512-.383-.896c0-.383.128-.64.384-.895l18.172-18.173a1.237 1.237 0 0 1 1.792 0l.384.256c8.575 8.574 8.575 22.396.128 31.098c-1.28 1.28-2.687 2.432-4.223 3.328c-.384.128-.64.256-.768.256m-12.798-15.87l12.926 12.926c1.024-.64 2.048-1.536 2.815-2.303c7.295-7.295 7.679-19.197.64-26.876z" />
<path fill="#FFF"
d="M176.375 84.488a7.88 7.88 0 0 0-11.134 0l-48.247 48.247l8.062 8.063l51.063-44.792c3.328-2.816 3.583-7.807.768-11.134c-.256-.128-.384-.256-.512-.384" />
<path fill="black"
d="M124.928 142.078c-.384 0-.64-.128-.896-.384l-8.062-8.063a1.237 1.237 0 0 1 0-1.792l48.247-48.247a9.115 9.115 0 0 1 12.926 0a9.115 9.115 0 0 1 0 12.926l-.384.384l-51.063 44.792q-.192.384-.768.384m-6.143-9.343l6.271 6.271l50.167-44.024c2.816-2.304 3.072-6.527.768-9.342c-2.303-2.816-6.527-3.072-9.342-.768c-.128.128-.256.256-.512.384z" />
<path fill="#FFF"
d="M80.008 187.637c-.511.256-.767.768-.64 1.28l2.176 9.214c.512 1.28-.256 2.816-1.664 3.2c-1.023.384-2.175 0-2.815-.768l-14.078-13.95l45.944-45.943l15.87.256l10.75 10.75c-2.56 2.175-18.045 17.149-55.543 35.961" />
<path fill="black"
d="M78.985 202.61c-1.024 0-2.048-.383-2.688-1.151l-13.95-13.95c-.255-.256-.383-.512-.383-.895c0-.384.128-.64.384-.896l45.943-45.944c.256-.256.64-.384.896-.384l15.87.256c.383 0 .64.128.895.384l10.75 10.75c.256.256.384.64.384 1.024s-.128.64-.512.896l-.896.767c-13.565 11.902-31.994 23.804-54.902 35.194l2.176 9.087c.384 1.663-.384 3.455-1.92 4.35c-.768.385-1.408.513-2.047.513m-14.078-15.996l13.182 13.053c.384.64 1.152.896 1.791.512c.64-.384.896-1.152.512-1.792l-2.175-9.214c-.256-1.152.256-2.176 1.28-2.687c22.651-11.39 40.952-23.164 54.39-34.81l-9.47-9.47l-14.718-.256z" />
<path fill="#FFF"
d="m52.11 197.62l11.005-11.006l16.382 16.38l-26.108-1.791c-1.152-.128-1.92-1.152-1.791-2.304c0-.512.128-1.024.511-1.28" />
<path fill="black"
d="m79.497 204.146l-26.236-1.791c-1.92-.128-3.2-1.792-3.071-3.712c.128-.768.384-1.535 1.024-2.047L62.22 185.59a1.237 1.237 0 0 1 1.791 0l16.381 16.38c.384.385.512.897.256 1.408q-.384.768-1.151.768m-16.382-15.74l-10.11 10.11c-.384.255-.384.895 0 1.151c.128.128.256.256.512.256l22.652 1.536zm41.337-41.849c-.768 0-1.28-.64-1.28-1.28c0-.384.128-.64.384-.896l12.414-12.414a1.237 1.237 0 0 1 1.792 0l8.062 8.063c.384.384.512.768.384 1.28c-.128.384-.512.768-1.024.896l-20.476 4.35zm12.414-11.902l-8.447 8.446l13.822-2.943z" />
<path fill="#FFF"
d="m124.8 140.926l-14.077 3.071c-1.024.256-2.048-.384-2.304-1.408c-.128-.64 0-1.28.512-1.791l7.807-7.807z" />
<path fill="black"
d="M110.467 145.277a3.17 3.17 0 0 1-3.2-3.2c0-.895.384-1.663.896-2.303l7.807-7.807a1.237 1.237 0 0 1 1.792 0l8.062 8.063c.384.384.512.768.384 1.28c-.128.384-.512.768-1.024.896l-14.077 3.071zm6.399-10.622l-6.911 6.91c-.256.257-.256.513-.128.768q.192.384.768.384l11.774-2.56zm86.384-69.748c-.256-.767-1.152-1.151-1.92-.895c-.767.256-1.151 1.151-.895 1.92c0 .127.128.255.128.383c.768 1.536.512 3.456-.512 4.863c-.512.64-.384 1.536.128 2.048c.64.512 1.535.384 2.047-.256c1.92-2.432 2.304-5.503 1.024-8.063" />
</svg>
</div>
<p class="text-center font-bold mt-5">Postman</p>
</div>
<!-- Typescript -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] skill-hidden hover:scale-105"
name="skill-hidden">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256">
<path fill="black"
d="M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0" />
<path fill="#FFF"
d="M150.518 200.475v27.62q6.738 3.453 15.938 5.179T185.849 235q9.934 0 18.874-1.899t15.678-6.257q6.738-4.359 10.669-11.394q3.93-7.033 3.93-17.391q0-7.51-2.246-13.163a30.8 30.8 0 0 0-6.479-10.055q-4.232-4.402-10.149-7.898t-13.347-6.602q-5.442-2.245-9.761-4.359t-7.342-4.316q-3.024-2.2-4.665-4.661t-1.641-5.567q0-2.848 1.468-5.135q1.469-2.288 4.147-3.927t6.565-2.547q3.887-.906 8.638-.906q3.456 0 7.299.518q3.844.517 7.732 1.597a54 54 0 0 1 7.558 2.719a41.7 41.7 0 0 1 6.781 3.797v-25.807q-6.306-2.417-13.778-3.582T198.633 107q-9.847 0-18.658 2.115q-8.811 2.114-15.506 6.602q-6.694 4.49-10.582 11.437Q150 134.102 150 143.769q0 12.342 7.127 21.06t21.638 14.759a292 292 0 0 1 10.625 4.575q4.924 2.244 8.509 4.66t5.658 5.265t2.073 6.474a9.9 9.9 0 0 1-1.296 4.963q-1.295 2.287-3.93 3.97t-6.565 2.632t-9.2.95q-8.983 0-17.794-3.151t-16.327-9.451m-46.036-68.733H140V109H41v22.742h35.345V233h28.137z" />
</svg>
</div>
<p class="text-center font-bold mt-5">Typescript</p>
</div>
<!-- Python -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] skill-hidden hover:scale-105"
name="skill-hidden">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32.13" height="32" viewBox="0 0 256 255">
<defs>
<linearGradient id="logosPython0" x1="12.959%" x2="79.639%" y1="12.039%" y2="78.201%">
<stop offset="0%" stop-color="black" />
<stop offset="100%" stop-color="black" />
</linearGradient>
<linearGradient id="logosPython1" x1="19.128%" x2="90.742%" y1="20.579%" y2="88.429%">
<stop offset="0%" stop-color="black" />
<stop offset="100%" stop-color="black" />
</linearGradient>
</defs>
<path fill="url(#logosPython0)"
d="M126.916.072c-64.832 0-60.784 28.115-60.784 28.115l.072 29.128h61.868v8.745H41.631S.145 61.355.145 126.77c0 65.417 36.21 63.097 36.21 63.097h21.61v-30.356s-1.165-36.21 35.632-36.21h61.362s34.475.557 34.475-33.319V33.97S194.67.072 126.916.072M92.802 19.66a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.13" />
<path fill="url(#logosPython1)"
d="M128.757 254.126c64.832 0 60.784-28.115 60.784-28.115l-.072-29.127H127.6v-8.745h86.441s41.486 4.705 41.486-60.712c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165 36.21-35.632 36.21h-61.362s-34.475-.557-34.475 33.32v56.013s-5.235 33.897 62.518 33.897m34.114-19.586a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.131a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13" />
</svg>
</div>
<p class="text-center font-bold mt-5">Python</p>
</div>
<!-- Linux -->
<div class="border-2 border-black rounded-md w-[150px] h-[150px] skill-hidden hover:scale-105"
name="skill-hidden">
<div class="flex justify-center mt-9">
<svg fill="#000000" height="32px" width="32px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 304.998 304.998" xml:space="preserve">
<g id="XMLID_91_">
<path id="XMLID_92_"
d="M274.659,244.888c-8.944-3.663-12.77-8.524-12.4-15.777c0.381-8.466-4.422-14.667-6.703-17.117
c1.378-5.264,5.405-23.474,0.004-39.291c-5.804-16.93-23.524-42.787-41.808-68.204c-7.485-10.438-7.839-21.784-8.248-34.922
c-0.392-12.531-0.834-26.735-7.822-42.525C190.084,9.859,174.838,0,155.851,0c-11.295,0-22.889,3.53-31.811,9.684
c-18.27,12.609-15.855,40.1-14.257,58.291c0.219,2.491,0.425,4.844,0.545,6.853c1.064,17.816,0.096,27.206-1.17,30.06
c-0.819,1.865-4.851,7.173-9.118,12.793c-4.413,5.812-9.416,12.4-13.517,18.539c-4.893,7.387-8.843,18.678-12.663,29.597
c-2.795,7.99-5.435,15.537-8.005,20.047c-4.871,8.676-3.659,16.766-2.647,20.505c-1.844,1.281-4.508,3.803-6.757,8.557
c-2.718,5.8-8.233,8.917-19.701,11.122c-5.27,1.078-8.904,3.294-10.804,6.586c-2.765,4.791-1.259,10.811,0.115,14.925
c2.03,6.048,0.765,9.876-1.535,16.826c-0.53,1.604-1.131,3.42-1.74,5.423c-0.959,3.161-0.613,6.035,1.026,8.542
c4.331,6.621,16.969,8.956,29.979,10.492c7.768,0.922,16.27,4.029,24.493,7.035c8.057,2.944,16.388,5.989,23.961,6.913
c1.151,0.145,2.291,0.218,3.39,0.218c11.434,0,16.6-7.587,18.238-10.704c4.107-0.838,18.272-3.522,32.871-3.882
c14.576-0.416,28.679,2.462,32.674,3.357c1.256,2.404,4.567,7.895,9.845,10.724c2.901,1.586,6.938,2.495,11.073,2.495
c0.001,0,0,0,0.001,0c4.416,0,12.817-1.044,19.466-8.039c6.632-7.028,23.202-16,35.302-22.551c2.7-1.462,5.226-2.83,7.441-4.065
c6.797-3.768,10.506-9.152,10.175-14.771C282.445,250.905,279.356,246.811,274.659,244.888z M124.189,243.535
c-0.846-5.96-8.513-11.871-17.392-18.715c-7.26-5.597-15.489-11.94-17.756-17.312c-4.685-11.082-0.992-30.568,5.447-40.602
c3.182-5.024,5.781-12.643,8.295-20.011c2.714-7.956,5.521-16.182,8.66-19.783c4.971-5.622,9.565-16.561,10.379-25.182
c4.655,4.444,11.876,10.083,18.547,10.083c1.027,0,2.024-0.134,2.977-0.403c4.564-1.318,11.277-5.197,17.769-8.947
c5.597-3.234,12.499-7.222,15.096-7.585c4.453,6.394,30.328,63.655,32.972,82.044c2.092,14.55-0.118,26.578-1.229,31.289
c-0.894-0.122-1.96-0.221-3.08-0.221c-7.207,0-9.115,3.934-9.612,6.283c-1.278,6.103-1.413,25.618-1.427,30.003
c-2.606,3.311-15.785,18.903-34.706,21.706c-7.707,1.12-14.904,1.688-21.39,1.688c-5.544,0-9.082-0.428-10.551-0.651l-9.508-10.879
C121.429,254.489,125.177,250.583,124.189,243.535z M136.254,64.149c-0.297,0.128-0.589,0.265-0.876,0.411
c-0.029-0.644-0.096-1.297-0.199-1.952c-1.038-5.975-5-10.312-9.419-10.312c-0.327,0-0.656,0.025-1.017,0.08
c-2.629,0.438-4.691,2.413-5.821,5.213c0.991-6.144,4.472-10.693,8.602-10.693c4.85,0,8.947,6.536,8.947,14.272
C136.471,62.143,136.4,63.113,136.254,64.149z M173.94,68.756c0.444-1.414,0.684-2.944,0.684-4.532
c0-7.014-4.45-12.509-10.131-12.509c-5.552,0-10.069,5.611-10.069,12.509c0,0.47,0.023,0.941,0.067,1.411
c-0.294-0.113-0.581-0.223-0.861-0.329c-0.639-1.935-0.962-3.954-0.962-6.015c0-8.387,5.36-15.211,11.95-15.211
c6.589,0,11.95,6.824,11.95,15.211C176.568,62.78,175.605,66.11,173.94,68.756z M169.081,85.08
c-0.095,0.424-0.297,0.612-2.531,1.774c-1.128,0.587-2.532,1.318-4.289,2.388l-1.174,0.711c-4.718,2.86-15.765,9.559-18.764,9.952
c-2.037,0.274-3.297-0.516-6.13-2.441c-0.639-0.435-1.319-0.897-2.044-1.362c-5.107-3.351-8.392-7.042-8.763-8.485
c1.665-1.287,5.792-4.508,7.905-6.415c4.289-3.988,8.605-6.668,10.741-6.668c0.113,0,0.215,0.008,0.321,0.028
c2.51,0.443,8.701,2.914,13.223,4.718c2.09,0.834,3.895,1.554,5.165,2.01C166.742,82.664,168.828,84.422,169.081,85.08z
M205.028,271.45c2.257-10.181,4.857-24.031,4.436-32.196c-0.097-1.855-0.261-3.874-0.42-5.826
c-0.297-3.65-0.738-9.075-0.283-10.684c0.09-0.042,0.19-0.078,0.301-0.109c0.019,4.668,1.033,13.979,8.479,17.226
c2.219,0.968,4.755,1.458,7.537,1.458c7.459,0,15.735-3.659,19.125-7.049c1.996-1.996,3.675-4.438,4.851-6.372
c0.257,0.753,0.415,1.737,0.332,3.005c-0.443,6.885,2.903,16.019,9.271,19.385l0.927,0.487c2.268,1.19,8.292,4.353,8.389,5.853
c-0.001,0.001-0.051,0.177-0.387,0.489c-1.509,1.379-6.82,4.091-11.956,6.714c-9.111,4.652-19.438,9.925-24.076,14.803
c-6.53,6.872-13.916,11.488-18.376,11.488c-0.537,0-1.026-0.068-1.461-0.206C206.873,288.406,202.886,281.417,205.028,271.45z
M39.917,245.477c-0.494-2.312-0.884-4.137-0.465-5.905c0.304-1.31,6.771-2.714,9.533-3.313c3.883-0.843,7.899-1.714,10.525-3.308
c3.551-2.151,5.474-6.118,7.17-9.618c1.228-2.531,2.496-5.148,4.005-6.007c0.085-0.05,0.215-0.108,0.463-0.108
c2.827,0,8.759,5.943,12.177,11.262c0.867,1.341,2.473,4.028,4.331,7.139c5.557,9.298,13.166,22.033,17.14,26.301
c3.581,3.837,9.378,11.214,7.952,17.541c-1.044,4.909-6.602,8.901-7.913,9.784c-0.476,0.108-1.065,0.163-1.758,0.163
c-7.606,0-22.662-6.328-30.751-9.728l-1.197-0.503c-4.517-1.894-11.891-3.087-19.022-4.241c-5.674-0.919-13.444-2.176-14.732-3.312
c-1.044-1.171,0.167-4.978,1.235-8.337c0.769-2.414,1.563-4.91,1.998-7.523C41.225,251.596,40.499,248.203,39.917,245.477z" />
</g>
</svg>
</div>
<p class="text-center font-bold mt-5">Linux</p>
</div>
<!-- Others -->
<div
class="border-2 border-black rounded-md w-[150px] h-[150px] transition-colors hover:bg-black hover:text-white hover:scale-105"
onclick="toggleSkills()">
<div class="flex justify-center mt-9">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
<path fill="currentColor"
d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2" />
</svg>
</div>
<p class="text-center font-bold mt-5" id="moreorless">More</p>
</div>
</div>
</div>
<!-- Experience -->
<div class="px-4 bg-black py-36">
<h2 class="text-4xl text-white text-center">My <span class="font-extrabold">Experience</span></h2>
<div class="flex justify-center">
<div class="border-2 border-gray-500 rounded-xl text-white p-10 mt-20 w-[900px]">
<div class="relative flex flex-col justify-between items-center sm:flex-row">
<div class="flex gap-2 my-4">
<img src="assets/vion_logo_white-font-150x150.png" alt="vion" class="w-10 h-10">
<h3 class="text-xl font-bold">Implementation Engineer at Vion Consulting Pvt. Ltd.</h3>
</div>
<p class="text-gray-300">Nov 2022 - Nov 2024</p>
</div>
<ul class="text-gray-300">
<li>
Built a demo website featuring a chat function integrated with a Ollama LLM and CNN model for brain tumor
medical
image classification. This project showcased advanced medical image analysis and involved skills in
TensorFlow and
Machine Learning (CNN).
</li>
<br>
<!-- <li> -->
<!-- Created a chatbot on the Kore.ai platform, using NLP to facilitate bank account transactions. This enhanced -->
<!-- your expertise in Natural Language Processing and Machine Learning on the Kore.ai platform. -->
<!-- </li> -->
<!-- <br> -->
<li>
Developed custom reports and resolved data discrepancies using Jaspersoft, sharpening your data analytics
abilities.
</li>
<br>
<li>
Designed an IVR system on the Bright Pattern platform to reset Okta passwords, leveraging skills in Postman
and IVR systems.
</li>
</ul>
</div>
</div>
</div>
<!-- About Me -->
<div id="AboutMe">
<div
class="flex flex-col-reverse md:flex-row lg:flex-row justify-center items-center px-4 lg:px-6 mt-36 lg:mx-[15%] md:mx-10">
<img src="./assets/AboutMe.png" alt="AboutMe"
class="px-20 pb-20 object-scale-down w-full md:w-1/2 lg:w-1/2"></img>
<div class="w-full md:w-full lg:w-1/2 pb-20">
<h2 class="text-4xl mb-10">About <span class="font-extrabold">Me</span></h2>
<p class="text-gray-500">
I'm a passionate fullstack developer with a Master's in Fullstack development (MCA). My expertise spans across
various areas, including digital art, animations, 3D modeling, game development, and programming. I'm always
driven to explore and learn new things, expanding my skill set and staying at the forefront of technology.
</p>
<br>
<p class="text-gray-500">
With a strong foundation in technologies like TypeScript, JavaScript, React.js, Next.js, TailwindCSS, Python,
and Machine Learning, I build modern, scalable, and efficient applications. I thrive on the challenge of
turning creative ideas into reality, blending functionality with aesthetics.
</p>
<br>
<p class="text-gray-500">
When I'm not coding or designing, you can often find me learning new tools, techniques, and technologies. Feel
free to follow me on GitHub or connect with me on Discord, where I share insights from my journey and stay
connected with the developer community.
</p>
</div>
</div>
</div>
<!-- Projects -->
<div class="px-4 bg-black py-36" id="Projects">
<h2 class="text-4xl text-white text-center">My <span class="font-extrabold">Projects</span></h2>
<!-- project 1 -->
<div class="flex flex-col-reverse md:flex-row sm:flex-col-reverse justify-center mt-16 lg:mx-[20%] mx-8">
<div class="flex w-full lg:w-1/2 xl:w-1/2 justify-center xl:justify-end lg:justify-end">
<img src="assets/project.png" alt="Project1">
</div>
<div class="text-white w-full lg:w-1/2 xl:w-1/2 mx-4">
<h3 class="text-4xl font-extrabold mt-5">01</h3>
<h4 class="text-3xl font-bold mt-5">PantryPal</h4>
<p class="my-5">
Pantry Pal is a web app that allows users to browse recipes, view cooking instructions, and generate shopping
lists based on selected recipes.
</p>
<a href="https://github.com/ydkulks/PantryPal" target="_blank" class="pt-5">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15">
<path fill="currentColor" fill-rule="evenodd"
d="M3 2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V8.5a.5.5 0 0 0-1 0V12H3V3h3.5a.5.5 0 0 0 0-1zm9.854.146a.5.5 0 0 1 .146.351V5.5a.5.5 0 0 1-1 0V3.707L6.854 8.854a.5.5 0 1 1-.708-.708L11.293 3H9.5a.5.5 0 0 1 0-1h3a.5.5 0 0 1 .354.146"
clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<!-- project 2 -->
<div class="flex flex-col md:flex-row sm:flex-col justify-center mt-16 lg:mx-[20%] mx-8">
<div class="text-white w-full lg:w-1/2 xl:w-1/2 mx-4">
<h3 class="text-4xl font-extrabold mt-5">02</h3>
<h4 class="text-3xl font-bold mt-5">Infinitehorizons</h4>
<p class="my-5">
A website for a travel booking company named Infinitehorizons
</p>
<a href="https://github.com/ydkulks/infinitehorizons" target="_blank" class="pt-5">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15">
<path fill="currentColor" fill-rule="evenodd"
d="M3 2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V8.5a.5.5 0 0 0-1 0V12H3V3h3.5a.5.5 0 0 0 0-1zm9.854.146a.5.5 0 0 1 .146.351V5.5a.5.5 0 0 1-1 0V3.707L6.854 8.854a.5.5 0 1 1-.708-.708L11.293 3H9.5a.5.5 0 0 1 0-1h3a.5.5 0 0 1 .354.146"
clip-rule="evenodd" />
</svg>
</a>
</div>
<div class="flex w-full lg:w-1/2 xl:w-1/2 justify-center xl:justify-end lg:justify-end">
<img src="assets/project.png" alt="Project2">
</div>
</div>
<!-- project 3 -->
<!-- <div class="flex flex-col-reverse md:flex-row sm:flex-col-reverse justify-center mt-16 lg:mx-[20%] mx-8"> -->
<!-- <div class="flex w-full lg:w-1/2 xl:w-1/2 justify-center xl:justify-end lg:justify-end"> -->
<!-- <img src="assets/project.png" alt="Project3"> -->
<!-- </div> -->
<!-- <div class="text-white w-full lg:w-1/2 xl:w-1/2 mx-4"> -->
<!-- <h3 class="text-4xl font-extrabold mt-5">03</h3> -->
<!-- <h4 class="text-3xl font-bold mt-5">5 More Minutes</h4> -->
<!-- <p class="my-5"> -->
<!-- A game that is a collection of bite-sized games designed for those moments when you only have a few minutes to -->
<!-- spare -->
<!-- </p> -->
<!-- <a href="https://github.com/ydkulks/5-More-Minutes" target="_blank"> -->
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 15"> -->
<!-- <path fill="currentColor" fill-rule="evenodd" -->
<!-- d="M3 2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V8.5a.5.5 0 0 0-1 0V12H3V3h3.5a.5.5 0 0 0 0-1zm9.854.146a.5.5 0 0 1 .146.351V5.5a.5.5 0 0 1-1 0V3.707L6.854 8.854a.5.5 0 1 1-.708-.708L11.293 3H9.5a.5.5 0 0 1 0-1h3a.5.5 0 0 1 .354.146" -->
<!-- clip-rule="evenodd" /> -->
<!-- </svg> -->
<!-- </a> -->
<!-- </div> -->
<!-- </div> -->
</div>
<!-- Testimonial -->
<div class="mt-36" id="Testimonial">
<h2 class="text-4xl text-center">My <span class="font-extrabold">Testimonial</span></h2>
<div
class="flex flex-col-reverse items-center md:flex-row md:justify-center sm:flex-col-reverse sm:justify-center justify-center gap-4 px-4 py-36">
<!-- Card 1 -->
<div class="border w-[300px] h-[350px] shadow-gray-500 shadow rounded-2xl mx-2 p-2">
<div class="flex justify-center m-4">
<img src="assets/Testimonial.png" alt="Profile picture">
</div>
<p class="text-center px-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<div class="flex justify-center mt-4">
<div class="h-[2px] rounded-sm bg-gray-300 w-[150px]"></div>
</div>
<h3 class="text-center text-xl font-bold mt-4">Firstname Lastname</h3>
<p class="text-center text-gray-400 mt-2">Designation</p>
</div>
<!-- Card 2 -->
<div class="border w-[300px] h-[350px] shadow-gray-500 shadow rounded-2xl mx-2 p-2 bg-black text-white">
<div class="flex justify-center m-4">
<img src="assets/TestimonialMale.png" alt="Profile picture">
</div>
<p class="text-center px-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<div class="flex justify-center mt-4">
<div class="h-[2px] rounded-sm bg-gray-300 w-[150px]"></div>
</div>
<h3 class="text-center text-xl font-bold mt-4">Firstname Lastname</h3>
<p class="text-center text-gray-400 mt-2">Designation</p>
</div>
<!-- Card 3 -->
<div class="border w-[300px] h-[350px] shadow-gray-500 shadow rounded-2xl mx-2 p-2">
<div class="flex justify-center m-4">
<img src="assets/Testimonial.png" alt="Profile picture">
</div>
<p class="text-center px-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<div class="flex justify-center mt-4">
<div class="h-[2px] rounded-sm bg-gray-300 w-[150px]"></div>
</div>
<h3 class="text-center text-xl font-bold mt-4">Firstname Lastname</h3>
<p class="text-center text-gray-400 mt-2">Designation</p>
</div>
</div>
</div>
<!-- Contact Me -->
<!-- NOTE: Using EmailJS to send email -->
<div class="flex flex-col-reverse md:flex-row md:justify-center sm:flex-row justify-center px-4 py-36 lg:mx-[20%]"
id="ContactMe">
<div class="md:w-1/2">
<form id="contact-form">
<input type="hidden" name="to_name" value="YD Kulkarni">
<input type="text" name="from_name" placeholder="Name" required
class="border border-black rounded-md p-2 my-2 w-full">
<br>
<input type="email" name="from_email" placeholder="Email" required
class="border border-black rounded-md p-2 my-2 w-full"><br>
<textarea name="message" cols="30" rows="5" placeholder="How can I help?" required
class="border border-black rounded-md p-2 my-2 w-full"></textarea>
<!-- Quick contacts -->
<div class="flex gap-4">
<button type="submit" id="get_in_touch"
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-900 text-gray-50 hover:bg-gray-50 hover:text-gray-900 border border-input h-10 px-4 py-4 w-fit">Get
in Touch</button>
<a href="https://www.linkedin.com/in/yd-kulkarni" target="_blank">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-900 text-gray-50 hover:bg-gray-900 hover:text-gray-900 border border-input h-10 px-2 py-4 w-full">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25" viewBox="0,0,256,256">
<g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt"
stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0"
font-family="none" font-weight="none" font-size="none" text-anchor="none"
style="mix-blend-mode: normal">
<g transform="scale(5.12,5.12)">
<path
d="M41,4h-32c-2.76,0 -5,2.24 -5,5v32c0,2.76 2.24,5 5,5h32c2.76,0 5,-2.24 5,-5v-32c0,-2.76 -2.24,-5 -5,-5zM17,20v19h-6v-19zM11,14.47c0,-1.4 1.2,-2.47 3,-2.47c1.8,0 2.93,1.07 3,2.47c0,1.4 -1.12,2.53 -3,2.53c-1.8,0 -3,-1.13 -3,-2.53zM39,39h-6c0,0 0,-9.26 0,-10c0,-2 -1,-4 -3.5,-4.04h-0.08c-2.42,0 -3.42,2.06 -3.42,4.04c0,0.91 0,10 0,10h-6v-19h6v2.56c0,0 1.93,-2.56 5.81,-2.56c3.97,0 7.19,2.73 7.19,8.26z">
</path>
</g>
</g>
</svg>
</button>
</a>
<a href="https://github.com/ydkulks" target="_blank">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-50 text-gray-50 hover:bg-gray-50 hover:text-gray-900 border-2 border-black border-input h-10 px-2 py-4 w-full z-10">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="30" viewBox="0 0 30 30">
<path
d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z">
</path>
</svg>
</button>
</a>
<a href="mailto:[email protected]">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-50 text-gray-50 hover:bg-gray-50 hover:text-gray-900 border-2 border-black border-input h-10 px-2 py-4 w-full">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25" viewBox="0 0 50 50">
<path
d="M12 23.403V23.39 10.389L11.88 10.3h-.01L9.14 8.28C7.47 7.04 5.09 7.1 3.61 8.56 2.62 9.54 2 10.9 2 12.41v3.602L12 23.403zM38 23.39v.013l10-7.391V12.41c0-1.49-.6-2.85-1.58-3.83-1.46-1.457-3.765-1.628-5.424-.403L38.12 10.3 38 10.389V23.39zM14 24.868l10.406 7.692c.353.261.836.261 1.189 0L36 24.868V11.867L25 20l-11-8.133V24.868zM38 25.889V41c0 .552.448 1 1 1h6.5c1.381 0 2.5-1.119 2.5-2.5V18.497L38 25.889zM12 25.889L2 18.497V39.5C2 40.881 3.119 42 4.5 42H11c.552 0 1-.448 1-1V25.889z">
</path>
</svg>
</button>
</a>
</div>
</form>
</div>
<div class="flex md:w-1/2 align-middle items-center ml-8 mb-8">
<div>
<h2 class="text-4xl text-black font-extrabold">Let's <span
class="text-border text-transparent font-extrabold">talk</span> for<br> <span class="mt-4">Something
special</span></h2>
<p class="my-4 text-gray-500">
I seek to push the limits of creativity to create high engaging, user
friendly, and memorable interactive experiences.
</p>
<a href="mailto:[email protected]" target="_blank" class="text-xl font-bold">[email protected]</a>
</div>
</div>
</div>
<!-- Footer -->
<div class="flex bg-black text-white text-sm justify-between px-8 py-4">
<p>Portfolio</p>
<p>All right reserved</p>
</div>
</body>
</html>