-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1006 lines (987 loc) · 88.3 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, shrink-to-fit=no">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" type="image/x-icon" href="image/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="image/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="image/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="image/favicon-16x16.png">
<!-- <link rel="manifest" href="image/site.webmanifest">-->
<link href="https://api.fontshare.com/v2/css?f[]=satoshi@1&display=swap" rel="stylesheet">
<title>Ninja Fire UX/UI Design Portfolio</title>
</head>
<body>
<header>
<nav class="menu">
<ol>
<li class="nav"><a href="#">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M23.025 10C23.2848 10.4133 23.5678 10.8043 23.8411 11.1819C24.5748 12.1957 25.239 13.1133 25.1964 14.1072C26.0785 12.317 26.094 11.0544 25.7351 10H44V17.5722H30.8989V19.2406H44V26.2995H30.8989V34H25.6327C29.9688 32.0288 29.7977 26.4223 26.4403 23.1107C25.6483 26.7167 24.1861 24.9453 25.1 23.1107C26.4404 20.5168 25.2828 17.6065 23.2113 15.5187C23.5769 17.8597 23.1504 20.77 21.5054 22.6047C20.9571 22.2251 21.2008 21.4026 21.3835 21.023C19.3729 22.2252 18.6418 25.1353 20.2259 27.9822C18.8856 27.2863 18.3981 26.1475 18.2154 24.8822C16.4947 28.1677 16.6955 32.4508 20.5228 34H15.4494L7.78652 23.2193V34H0V10H7.78652L15.4494 21.1658V10H23.025ZM24.7308 34H21.4493C19.8631 31.9013 20.6651 30.5644 21.492 29.1859C22.0986 28.1747 22.7187 27.1412 22.4193 25.7681C24.0731 28.058 23.7004 29.0934 23.351 30.0643C23.0825 30.8102 22.8277 31.518 23.5159 32.7274C23.3655 31.4781 23.7793 30.8455 24.1929 30.2131C24.6172 29.5645 25.0413 28.9161 24.8562 27.6027C27.3911 30.3962 25.621 32.916 24.7308 34ZM18.8855 23.8698C17.8213 22.0281 18.6183 20.9013 19.2974 19.9412C19.6681 19.4172 20.0037 18.9428 19.9821 18.4289C20.7518 20.0274 20.2156 20.8123 19.6541 21.6342C19.2378 22.2435 18.8076 22.8732 18.8855 23.8698Z"
fill="url(#paint0_linear_1528_6234)"/>
<defs>
<linearGradient id="paint0_linear_1528_6234" x1="0" y1="10" x2="33.9092" y2="44.0493"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
</a></li>
<!-- <li class="nav"><a href="#about">About</a></li>-->
<li class="nav"><a href="#work" class="menu-link">Work</a></li>
<li class="nav"><a href="#testimonials" class="menu-link">Testimonials</a></li>
</ol>
</nav>
<button class="btn-primary btn-open" type="button">Let's work together</button>
</header>
<main>
<div class="container" id="hero">
<div class="gap-1 align-center">
<div class="cadre">
<div class="illu-container">
<img src="./image/pfp.webp">
</div>
</div>
<p class="name">Ninja Fire</p>
<h1>Designing intuitive, efficient, and engaging interfaces for your web3 project.</h1>
</div>
<div class="gap-1-2-row">
<div class="cadre">
<div class="inner-cadre">
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.24023 6.63142C5.79648 8.80642 4.61523 11.3002 4.61523 13.6252C4.61523 15.7138 5.44492 17.7168 6.92177 19.1936C8.39862 20.6705 10.4017 21.5002 12.4902 21.5002C14.5788 21.5002 16.5819 20.6705 18.0587 19.1936C19.5355 17.7168 20.3652 15.7138 20.3652 13.6252C20.3652 8.75017 16.9902 5.00017 14.2527 2.27205L10.9902 9.12517L7.24023 6.63142Z"
stroke="url(#paint0_linear_1528_6174)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.625 11.1071L11.1219 16.3571L8.375 13.7321" stroke="url(#paint1_linear_1528_6174)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_1528_6174" x1="4.61523" y1="2.27205" x2="24.9074" y2="11.3758"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1528_6174" x1="8.375" y1="11.1071" x2="15.71" y2="17.4203"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<p class="body caption center">User Research</p>
</div>
</div>
<div class="cadre">
<div class="inner-cadre">
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.24023 6.63142C5.79648 8.80642 4.61523 11.3002 4.61523 13.6252C4.61523 15.7138 5.44492 17.7168 6.92177 19.1936C8.39862 20.6705 10.4017 21.5002 12.4902 21.5002C14.5788 21.5002 16.5819 20.6705 18.0587 19.1936C19.5355 17.7168 20.3652 15.7138 20.3652 13.6252C20.3652 8.75017 16.9902 5.00017 14.2527 2.27205L10.9902 9.12517L7.24023 6.63142Z"
stroke="url(#paint0_linear_1528_6174)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.625 11.1071L11.1219 16.3571L8.375 13.7321" stroke="url(#paint1_linear_1528_6174)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_1528_6174" x1="4.61523" y1="2.27205" x2="24.9074" y2="11.3758"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1528_6174" x1="8.375" y1="11.1071" x2="15.71" y2="17.4203"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<p class="body caption center">Prototyping</p>
</div>
</div>
<div class="cadre">
<div class="inner-cadre">
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.24023 6.63142C5.79648 8.80642 4.61523 11.3002 4.61523 13.6252C4.61523 15.7138 5.44492 17.7168 6.92177 19.1936C8.39862 20.6705 10.4017 21.5002 12.4902 21.5002C14.5788 21.5002 16.5819 20.6705 18.0587 19.1936C19.5355 17.7168 20.3652 15.7138 20.3652 13.6252C20.3652 8.75017 16.9902 5.00017 14.2527 2.27205L10.9902 9.12517L7.24023 6.63142Z"
stroke="url(#paint0_linear_1528_6174)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.625 11.1071L11.1219 16.3571L8.375 13.7321" stroke="url(#paint1_linear_1528_6174)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_1528_6174" x1="4.61523" y1="2.27205" x2="24.9074" y2="11.3758"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1528_6174" x1="8.375" y1="11.1071" x2="15.71" y2="17.4203"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<p class="body caption center">Wireframing</p>
</div>
</div>
<div class="cadre">
<div class="inner-cadre">
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.24023 6.63142C5.79648 8.80642 4.61523 11.3002 4.61523 13.6252C4.61523 15.7138 5.44492 17.7168 6.92177 19.1936C8.39862 20.6705 10.4017 21.5002 12.4902 21.5002C14.5788 21.5002 16.5819 20.6705 18.0587 19.1936C19.5355 17.7168 20.3652 15.7138 20.3652 13.6252C20.3652 8.75017 16.9902 5.00017 14.2527 2.27205L10.9902 9.12517L7.24023 6.63142Z"
stroke="url(#paint0_linear_1528_6174)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.625 11.1071L11.1219 16.3571L8.375 13.7321" stroke="url(#paint1_linear_1528_6174)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_1528_6174" x1="4.61523" y1="2.27205" x2="24.9074" y2="11.3758"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1528_6174" x1="8.375" y1="11.1071" x2="15.71" y2="17.4203"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<p class="body caption center">Design Systems</p>
</div>
</div>
<div class="cadre">
<div class="inner-cadre">
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.24023 6.63142C5.79648 8.80642 4.61523 11.3002 4.61523 13.6252C4.61523 15.7138 5.44492 17.7168 6.92177 19.1936C8.39862 20.6705 10.4017 21.5002 12.4902 21.5002C14.5788 21.5002 16.5819 20.6705 18.0587 19.1936C19.5355 17.7168 20.3652 15.7138 20.3652 13.6252C20.3652 8.75017 16.9902 5.00017 14.2527 2.27205L10.9902 9.12517L7.24023 6.63142Z"
stroke="url(#paint0_linear_1528_6174)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.625 11.1071L11.1219 16.3571L8.375 13.7321" stroke="url(#paint1_linear_1528_6174)"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_1528_6174" x1="4.61523" y1="2.27205" x2="24.9074" y2="11.3758"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1528_6174" x1="8.375" y1="11.1071" x2="15.71" y2="17.4203"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<p class="body caption center">Mockups integration</p>
</div>
</div>
</div>
<button class="btn-primary btn-open">Let's work together</button>
<div class="gap-1-row">
<div class="card column">
<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_i_1528_6249)">
<rect x="0.666016" width="48" height="48" rx="24" fill="url(#paint0_linear_1528_6249)" fill-opacity="0.08"/>
<path d="M13.666 29L35.666 36" stroke="url(#paint1_linear_1528_6249)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M35.666 29L13.666 36" stroke="url(#paint2_linear_1528_6249)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.666 25C27.666 25.7956 27.3499 26.5587 26.7873 27.1213C26.2247 27.6839 25.4617 28 24.666 28C23.8704 28 23.1073 27.6839 22.5447 27.1213C21.9821 26.5587 21.666 25.7956 21.666 25C21.666 22 24.666 20 24.666 20C24.666 20 27.666 22 27.666 25Z" stroke="url(#paint3_linear_1528_6249)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31.166 21.5C31.166 23.2239 30.4812 24.8772 29.2622 26.0962C28.0432 27.3152 26.3899 28 24.666 28C22.9421 28 21.2888 27.3152 20.0698 26.0962C18.8508 24.8772 18.166 23.2239 18.166 21.5C18.166 16 24.666 12 24.666 12C24.666 12 31.166 16 31.166 21.5Z" stroke="url(#paint4_linear_1528_6249)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<filter id="filter0_i_1528_6249" x="0.666016" y="0" width="48" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.482667 0 0 0 0 0.191667 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1528_6249"/>
</filter>
<linearGradient id="paint0_linear_1528_6249" x1="0.666016" y1="0" x2="57.8129" y2="31.2997" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1528_6249" x1="13.666" y1="29" x2="22.2577" y2="43.7894" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint2_linear_1528_6249" x1="13.666" y1="29" x2="22.2577" y2="43.7894" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint3_linear_1528_6249" x1="21.666" y1="20" x2="29.6115" y2="23.2639" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint4_linear_1528_6249" x1="18.166" y1="12" x2="34.9603" y2="19.4737" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<h4 class="center">User-centered approach</h4>
<p class="body caption center">My user-centered approach and strong design process will lead to increased conversions and user
satisfaction on your website or application.</p>
</div>
<div class="card column">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_i_1528_6259)">
<rect width="48" height="48" rx="24" fill="black" fill-opacity="0.2"/>
<rect width="48" height="48" rx="24" fill="url(#paint0_linear_1528_6259)" fill-opacity="0.08"/>
<path d="M30 31V29C30 27.4087 29.3679 25.8826 28.2426 24.7574C27.1174 23.6321 25.5913 23 24 23C22.4087 23 20.8826 23.6321 19.7574 24.7574C18.6321 25.8826 18 27.4087 18 29V31" stroke="url(#paint1_linear_1528_6259)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34 31V29C34 26.3478 32.9464 23.8043 31.0711 21.9289C29.1957 20.0536 26.6522 19 24 19C21.3478 19 18.8043 20.0536 16.9289 21.9289C15.0536 23.8043 14 26.3478 14 29V31" stroke="url(#paint2_linear_1528_6259)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M38 31V29C38 25.287 36.525 21.726 33.8995 19.1005C31.274 16.475 27.713 15 24 15C20.287 15 16.726 16.475 14.1005 19.1005C11.475 21.726 10 25.287 10 29V31" stroke="url(#paint3_linear_1528_6259)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<filter id="filter0_i_1528_6259" x="0" y="0" width="48" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.482667 0 0 0 0 0.191667 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1528_6259"/>
</filter>
<linearGradient id="paint0_linear_1528_6259" x1="0" y1="0" x2="57.1469" y2="31.2997" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1528_6259" x1="18" y1="23" x2="29.0883" y2="32.1097" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint2_linear_1528_6259" x1="14" y1="19" x2="30.8845" y2="34.4129" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint3_linear_1528_6259" x1="10" y1="15" x2="32.586" y2="36.6484" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<h4 class="center">Strong collaboration and efficient delivery</h4>
<p class="body caption center">My strong collaboration, communication, and delivery skills will ensure a smooth and successful
project from start to finish.</p>
</div>
<div class="card column">
<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii_1528_6269)">
<rect x="0.332031" width="48" height="48" rx="24" fill="url(#paint0_linear_1528_6269)" fill-opacity="0.08"/>
<path d="M25.67 29.9374L23.27 36.4499C23.1989 36.6413 23.071 36.8063 22.9035 36.9229C22.7359 37.0394 22.5366 37.1019 22.3325 37.1019C22.1283 37.1019 21.9291 37.0394 21.7615 36.9229C21.5939 36.8063 21.466 36.6413 21.395 36.4499L18.995 29.9374C18.9443 29.7999 18.8645 29.6751 18.7609 29.5715C18.6573 29.4679 18.5324 29.3881 18.395 29.3374L11.8825 26.9374C11.6911 26.8664 11.5261 26.7385 11.4095 26.5709C11.2929 26.4033 11.2305 26.204 11.2305 25.9999C11.2305 25.7958 11.2929 25.5965 11.4095 25.4289C11.5261 25.2613 11.6911 25.1334 11.8825 25.0624L18.395 22.6624C18.5324 22.6118 18.6573 22.5319 18.7609 22.4283C18.8645 22.3247 18.9443 22.1999 18.995 22.0624L21.395 15.5499C21.466 15.3585 21.5939 15.1935 21.7615 15.0769C21.9291 14.9604 22.1283 14.8979 22.3325 14.8979C22.5366 14.8979 22.7359 14.9604 22.9035 15.0769C23.071 15.1935 23.1989 15.3585 23.27 15.5499L25.67 22.0624C25.7206 22.1999 25.8005 22.3247 25.9041 22.4283C26.0077 22.5319 26.1325 22.6118 26.27 22.6624L32.7825 25.0624C32.9739 25.1334 33.1389 25.2613 33.2555 25.4289C33.372 25.5965 33.4345 25.7958 33.4345 25.9999C33.4345 26.204 33.372 26.4033 33.2555 26.5709C33.1389 26.7385 32.9739 26.8664 32.7825 26.9374L26.27 29.3374C26.1325 29.3881 26.0077 29.4679 25.9041 29.5715C25.8005 29.6751 25.7206 29.7999 25.67 29.9374V29.9374Z" stroke="url(#paint1_linear_1528_6269)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30.332 10V16" stroke="url(#paint2_linear_1528_6269)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M33.332 13H27.332" stroke="url(#paint3_linear_1528_6269)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M36.332 17V21" stroke="url(#paint4_linear_1528_6269)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M38.332 19H34.332" stroke="url(#paint5_linear_1528_6269)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<filter id="filter0_ii_1528_6269" x="0.332031" y="-1" width="48" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.482667 0 0 0 0 0.191667 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1528_6269"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_innerShadow_1528_6269" result="effect2_innerShadow_1528_6269"/>
</filter>
<linearGradient id="paint0_linear_1528_6269" x1="0.332031" y1="0" x2="57.4789" y2="31.2997" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1528_6269" x1="11.2305" y1="14.8979" x2="37.6657" y2="29.3766" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint2_linear_1528_6269" x1="30.332" y1="10" x2="31.8669" y2="10.1401" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint3_linear_1528_6269" x1="27.332" y1="13" x2="28.119" y2="15.5863" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint4_linear_1528_6269" x1="36.332" y1="17" x2="37.8513" y2="17.208" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint5_linear_1528_6269" x1="34.332" y1="19" x2="35.3995" y2="21.3386" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<h4 class="center">Cost-effective solutions</h4>
<p class="body caption center">My skills and experience will ensure that the interfaces I design meet your business objectives
while also providing a great user experience, ultimately leading to long-term benefits for your business.</p>
</div>
</div>
</div>
<div class="container" id="about">
<div class="gap-2">
<h2>How it works?</h2>
<p class="subtitle">Discover my foolproof process for delivering top-notch results. From understanding your needs to presenting you with a customized solution, I work closely with you every step of the way to ensure your project is a success.</p>
</div>
<div class="gap-2">
<div class="gap-2-row">
<div class="about-card">
<svg width="45" height="98" viewBox="0 0 45 98" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.99609 20.7001H23.0001V96.3601V96.8601H23.5001H43.3401H43.8401V96.3601V1.64014V1.14014H43.3401H1.99609H1.49609V1.64014V20.2001V20.7001H1.99609Z" fill="url(#paint0_linear_1670_12273)"/>
<path d="M1.99609 20.7001H23.0001V96.3601V96.8601H23.5001H43.3401H43.8401V96.3601V1.64014V1.14014H43.3401H1.99609H1.49609V1.64014V20.2001V20.7001H1.99609Z" fill="#202020" fill-opacity="0.82"/>
<path d="M1.99609 20.7001H23.0001V96.3601V96.8601H23.5001H43.3401H43.8401V96.3601V1.64014V1.14014H43.3401H1.99609H1.49609V1.64014V20.2001V20.7001H1.99609Z" stroke="url(#paint1_linear_1670_12273)"/>
<defs>
<linearGradient id="paint0_linear_1670_12273" x1="-2.35547" y1="-39.6396" x2="81.6748" y2="-24.7417" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1670_12273" x1="-2.35547" y1="-39.6396" x2="81.6748" y2="-24.7417" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<svg class="bg-img" width="825" height="700" viewBox="0 0 825 700" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1670_12272" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="252" y="221" width="361" height="217">
<rect x="252.668" y="221.05" width="360" height="216" fill="url(#paint0_radial_1670_12272)"/>
</mask>
<g mask="url(#mask0_1670_12272)">
<rect x="252.848" y="221.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="288.848" y="221.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.848" y="221.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.848" y="221.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.848" y="221.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.848" y="221.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.848" y="221.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.848" y="221.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.848" y="221.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.848" y="221.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="252.848" y="257.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="288.848" y="257.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.848" y="257.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.848" y="257.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.848" y="257.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.848" y="257.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.848" y="257.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.848" y="257.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.848" y="257.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.848" y="257.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="252.848" y="293.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="288.848" y="293.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.848" y="293.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.848" y="293.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.848" y="293.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.848" y="293.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.848" y="293.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.848" y="293.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.848" y="293.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.848" y="293.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="252.848" y="329.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="288.848" y="329.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.848" y="329.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.848" y="329.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.848" y="329.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.848" y="329.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.848" y="329.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.848" y="329.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.848" y="329.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.848" y="329.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="252.848" y="365.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="288.848" y="365.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.848" y="365.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.848" y="365.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.848" y="365.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.848" y="365.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.848" y="365.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.848" y="365.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.848" y="365.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.848" y="365.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="252.848" y="401.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="288.848" y="401.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.848" y="401.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.848" y="401.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.848" y="401.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.848" y="401.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.848" y="401.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.848" y="401.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.848" y="401.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.848" y="401.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
</g>
<g opacity="0.24" filter="url(#filter0_f_1670_12272)">
<ellipse cx="577.471" cy="209.691" rx="127.198" ry="89.6908" fill="url(#paint1_linear_1670_12272)"/>
</g>
<g opacity="0.32" filter="url(#filter1_f_1670_12272)">
<ellipse cx="237.46" cy="467.348" rx="77.4603" ry="71.7527" fill="url(#paint2_linear_1670_12272)"/>
</g>
<defs>
<filter id="filter0_f_1670_12272" x="330.273" y="0" width="494.395" height="419.382" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_1670_12272"/>
</filter>
<filter id="filter1_f_1670_12272" x="0" y="235.595" width="474.922" height="463.505" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_1670_12272"/>
</filter>
<radialGradient id="paint0_radial_1670_12272" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(432.668 329.05) rotate(90) scale(108 180)">
<stop stop-color="#D9D9D9"/>
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint1_linear_1670_12272" x1="450.273" y1="120" x2="695.843" y2="310.745" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint2_linear_1670_12272" x1="160" y1="395.595" x2="337.66" y2="500.641" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="about-card">
<svg width="72" height="100" viewBox="0 0 72 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M70.8791 98.5001L71.3772 98.4983V98.0001V78.8001V78.3001H70.8772H37.6925L50.8461 67.2796C50.8462 67.2795 50.8462 67.2795 50.8463 67.2794C62.6579 57.3935 70.6092 46.77 70.6092 33.6161C70.6092 23.3939 67.3385 15.2807 61.279 9.72752C55.2256 4.17988 46.4512 1.24414 35.5492 1.24414C25.0039 1.24414 16.2601 4.74013 10.1524 10.9619C4.04554 17.1827 0.617188 26.0843 0.617188 36.8161V37.3161H1.11719H21.7252H22.2252V36.8161C22.2252 31.5774 23.488 27.547 25.7717 24.8341C28.0449 22.1337 31.3823 20.6761 35.6772 20.6761C39.798 20.6761 42.9439 21.9216 45.0661 24.2713C47.1957 26.629 48.3612 30.1718 48.3612 34.8961C48.3612 42.4641 44.2996 48.2224 34.2075 56.526L34.2054 56.5278L2.97341 82.5118L2.79319 82.6617V82.8961V98.2561V98.758L3.29508 98.7561L70.8791 98.5001Z" fill="url(#paint0_linear_1670_12589)"/>
<path d="M70.8791 98.5001L71.3772 98.4983V98.0001V78.8001V78.3001H70.8772H37.6925L50.8461 67.2796C50.8462 67.2795 50.8462 67.2795 50.8463 67.2794C62.6579 57.3935 70.6092 46.77 70.6092 33.6161C70.6092 23.3939 67.3385 15.2807 61.279 9.72752C55.2256 4.17988 46.4512 1.24414 35.5492 1.24414C25.0039 1.24414 16.2601 4.74013 10.1524 10.9619C4.04554 17.1827 0.617188 26.0843 0.617188 36.8161V37.3161H1.11719H21.7252H22.2252V36.8161C22.2252 31.5774 23.488 27.547 25.7717 24.8341C28.0449 22.1337 31.3823 20.6761 35.6772 20.6761C39.798 20.6761 42.9439 21.9216 45.0661 24.2713C47.1957 26.629 48.3612 30.1718 48.3612 34.8961C48.3612 42.4641 44.2996 48.2224 34.2075 56.526L34.2054 56.5278L2.97341 82.5118L2.79319 82.6617V82.8961V98.2561V98.758L3.29508 98.7561L70.8791 98.5001Z" fill="#202020" fill-opacity="0.82"/>
<path d="M70.8791 98.5001L71.3772 98.4983V98.0001V78.8001V78.3001H70.8772H37.6925L50.8461 67.2796C50.8462 67.2795 50.8462 67.2795 50.8463 67.2794C62.6579 57.3935 70.6092 46.77 70.6092 33.6161C70.6092 23.3939 67.3385 15.2807 61.279 9.72752C55.2256 4.17988 46.4512 1.24414 35.5492 1.24414C25.0039 1.24414 16.2601 4.74013 10.1524 10.9619C4.04554 17.1827 0.617188 26.0843 0.617188 36.8161V37.3161H1.11719H21.7252H22.2252V36.8161C22.2252 31.5774 23.488 27.547 25.7717 24.8341C28.0449 22.1337 31.3823 20.6761 35.6772 20.6761C39.798 20.6761 42.9439 21.9216 45.0661 24.2713C47.1957 26.629 48.3612 30.1718 48.3612 34.8961C48.3612 42.4641 44.2996 48.2224 34.2075 56.526L34.2054 56.5278L2.97341 82.5118L2.79319 82.6617V82.8961V98.2561V98.758L3.29508 98.7561L70.8791 98.5001Z" stroke="url(#paint1_linear_1670_12589)"/>
<defs>
<linearGradient id="paint0_linear_1670_12589" x1="-6.22523" y1="-40.3166" x2="128.411" y2="-0.788419" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1670_12589" x1="-6.22523" y1="-40.3166" x2="128.411" y2="-0.788419" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<svg class="bg-img" width="561" height="812" viewBox="0 0 561 812" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1670_12664" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="101" y="261" width="360" height="217">
<rect x="101" y="261.05" width="360" height="216" fill="url(#paint0_radial_1670_12664)"/>
</mask>
<g mask="url(#mask0_1670_12664)">
<rect x="101.18" y="261.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="137.18" y="261.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="173.18" y="261.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="209.18" y="261.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="245.18" y="261.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="281.18" y="261.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="317.18" y="261.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="353.18" y="261.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="389.18" y="261.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="425.18" y="261.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="101.18" y="297.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="137.18" y="297.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="173.18" y="297.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="209.18" y="297.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="245.18" y="297.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="281.18" y="297.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="317.18" y="297.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="353.18" y="297.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="389.18" y="297.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="425.18" y="297.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="101.18" y="333.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="137.18" y="333.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="173.18" y="333.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="209.18" y="333.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="245.18" y="333.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="281.18" y="333.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="317.18" y="333.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="353.18" y="333.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="389.18" y="333.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="425.18" y="333.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="101.18" y="369.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="137.18" y="369.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="173.18" y="369.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="209.18" y="369.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="245.18" y="369.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="281.18" y="369.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="317.18" y="369.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="353.18" y="369.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="389.18" y="369.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="425.18" y="369.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="101.18" y="405.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="137.18" y="405.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="173.18" y="405.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="209.18" y="405.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="245.18" y="405.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="281.18" y="405.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="317.18" y="405.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="353.18" y="405.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="389.18" y="405.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="425.18" y="405.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="101.18" y="441.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="137.18" y="441.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="173.18" y="441.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="209.18" y="441.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="245.18" y="441.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="281.18" y="441.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="317.18" y="441.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="353.18" y="441.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="389.18" y="441.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="425.18" y="441.23" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
</g>
<g opacity="0.24" filter="url(#filter0_f_1670_12664)">
<ellipse cx="313.803" cy="209.691" rx="127.198" ry="89.6908" fill="url(#paint1_linear_1670_12664)"/>
</g>
<g opacity="0.32" filter="url(#filter1_f_1670_12664)">
<ellipse cx="237.792" cy="579.348" rx="77.4603" ry="71.7527" fill="url(#paint2_linear_1670_12664)"/>
</g>
<defs>
<filter id="filter0_f_1670_12664" x="66.6055" y="0" width="494.395" height="419.382" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_1670_12664"/>
</filter>
<filter id="filter1_f_1670_12664" x="0.332031" y="347.595" width="474.922" height="463.505" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_1670_12664"/>
</filter>
<radialGradient id="paint0_radial_1670_12664" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(281 369.05) rotate(90) scale(108 180)">
<stop stop-color="#D9D9D9"/>
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint1_linear_1670_12664" x1="186.605" y1="120" x2="432.175" y2="310.745" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint2_linear_1670_12664" x1="160.332" y1="507.595" x2="337.993" y2="612.641" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
<div class="gap-2-row">
<div class="about-card">
<svg width="72" height="100" viewBox="0 0 72 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.023 65.5521V65.0521H21.523H1.04297H0.542969V65.5521C0.542969 76.37 4.46672 84.6707 10.7588 90.2619C17.0428 95.8458 25.6485 98.6921 34.963 98.6921C54.3661 98.6921 70.791 86.376 70.791 66.0641C70.791 50.035 60.6957 39.73 48.1218 35.6443L67.4209 18.6958L67.591 18.5464V18.3201V1.80811V1.30811H67.091H5.39497H4.89497V1.80811V19.9841V20.4841H5.39497H39.7771L20.1696 37.656L20.1571 37.6669L20.1454 37.6786C20.0459 37.7781 19.9451 37.8545 19.815 37.9521L19.8072 37.9579C19.6828 38.0512 19.5307 38.1653 19.3774 38.3186L19.231 38.465V38.6721V51.9841V52.4841H19.731H33.555C39.0266 52.4841 42.7549 54.0541 45.1169 56.4771C47.4826 58.9038 48.543 62.2527 48.543 65.9361C48.543 70.0496 47.2049 73.4052 44.9259 75.7301C42.6475 78.0544 39.3901 79.3881 35.475 79.3881C31.4143 79.3881 28.064 78.1715 25.7302 75.8682C23.398 73.5666 22.023 70.1224 22.023 65.5521Z" fill="url(#paint0_linear_1670_12590)"/>
<path d="M22.023 65.5521V65.0521H21.523H1.04297H0.542969V65.5521C0.542969 76.37 4.46672 84.6707 10.7588 90.2619C17.0428 95.8458 25.6485 98.6921 34.963 98.6921C54.3661 98.6921 70.791 86.376 70.791 66.0641C70.791 50.035 60.6957 39.73 48.1218 35.6443L67.4209 18.6958L67.591 18.5464V18.3201V1.80811V1.30811H67.091H5.39497H4.89497V1.80811V19.9841V20.4841H5.39497H39.7771L20.1696 37.656L20.1571 37.6669L20.1454 37.6786C20.0459 37.7781 19.9451 37.8545 19.815 37.9521L19.8072 37.9579C19.6828 38.0512 19.5307 38.1653 19.3774 38.3186L19.231 38.465V38.6721V51.9841V52.4841H19.731H33.555C39.0266 52.4841 42.7549 54.0541 45.1169 56.4771C47.4826 58.9038 48.543 62.2527 48.543 65.9361C48.543 70.0496 47.2049 73.4052 44.9259 75.7301C42.6475 78.0544 39.3901 79.3881 35.475 79.3881C31.4143 79.3881 28.064 78.1715 25.7302 75.8682C23.398 73.5666 22.023 70.1224 22.023 65.5521Z" fill="#202020" fill-opacity="0.82"/>
<path d="M22.023 65.5521V65.0521H21.523H1.04297H0.542969V65.5521C0.542969 76.37 4.46672 84.6707 10.7588 90.2619C17.0428 95.8458 25.6485 98.6921 34.963 98.6921C54.3661 98.6921 70.791 86.376 70.791 66.0641C70.791 50.035 60.6957 39.73 48.1218 35.6443L67.4209 18.6958L67.591 18.5464V18.3201V1.80811V1.30811H67.091H5.39497H4.89497V1.80811V19.9841V20.4841H5.39497H39.7771L20.1696 37.656L20.1571 37.6669L20.1454 37.6786C20.0459 37.7781 19.9451 37.8545 19.815 37.9521L19.8072 37.9579C19.6828 38.0512 19.5307 38.1653 19.3774 38.3186L19.231 38.465V38.6721V51.9841V52.4841H19.731H33.555C39.0266 52.4841 42.7549 54.0541 45.1169 56.4771C47.4826 58.9038 48.543 62.2527 48.543 65.9361C48.543 70.0496 47.2049 73.4052 44.9259 75.7301C42.6475 78.0544 39.3901 79.3881 35.475 79.3881C31.4143 79.3881 28.064 78.1715 25.7302 75.8682C23.398 73.5666 22.023 70.1224 22.023 65.5521Z" stroke="url(#paint1_linear_1670_12590)"/>
<defs>
<linearGradient id="paint0_linear_1670_12590" x1="-6.24556" y1="-40.1969" x2="127.53" y2="-1.15786" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1670_12590" x1="-6.24556" y1="-40.1969" x2="127.53" y2="-1.15786" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<svg class="bg-img" width="636" height="958" viewBox="0 0 636 958" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1670_12737" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="142" y="384" width="361" height="216">
<rect x="142.551" y="384" width="360" height="216" fill="url(#paint0_radial_1670_12737)"/>
</mask>
<g mask="url(#mask0_1670_12737)">
<rect x="142.731" y="384.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="178.731" y="384.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="214.731" y="384.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="250.731" y="384.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="286.731" y="384.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="322.731" y="384.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="358.731" y="384.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="394.731" y="384.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="430.731" y="384.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="466.731" y="384.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="142.731" y="420.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="178.731" y="420.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="214.731" y="420.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="250.731" y="420.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="286.731" y="420.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="322.731" y="420.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="358.731" y="420.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="394.731" y="420.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="430.731" y="420.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="466.731" y="420.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="142.731" y="456.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="178.731" y="456.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="214.731" y="456.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="250.731" y="456.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="286.731" y="456.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="322.731" y="456.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="358.731" y="456.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="394.731" y="456.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="430.731" y="456.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="466.731" y="456.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="142.731" y="492.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="178.731" y="492.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="214.731" y="492.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="250.731" y="492.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="286.731" y="492.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="322.731" y="492.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="358.731" y="492.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="394.731" y="492.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="430.731" y="492.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="466.731" y="492.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="142.731" y="528.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="178.731" y="528.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="214.731" y="528.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="250.731" y="528.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="286.731" y="528.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="322.731" y="528.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="358.731" y="528.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="394.731" y="528.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="430.731" y="528.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="466.731" y="528.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="142.731" y="564.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="178.731" y="564.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="214.731" y="564.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="250.731" y="564.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="286.731" y="564.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="322.731" y="564.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="358.731" y="564.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="394.731" y="564.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="430.731" y="564.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="466.731" y="564.18" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
</g>
<g opacity="0.24" filter="url(#filter0_f_1670_12737)">
<ellipse cx="252.553" cy="258.297" rx="142.616" ry="96.8774" transform="rotate(-69.7986 252.553 258.297)" fill="url(#paint1_linear_1670_12737)"/>
</g>
<g opacity="0.32" filter="url(#filter1_f_1670_12737)">
<ellipse cx="382.089" cy="712.173" rx="86.8493" ry="77.5019" transform="rotate(-69.7986 382.089 712.173)" fill="url(#paint2_linear_1670_12737)"/>
</g>
<defs>
<filter id="filter0_f_1670_12737" x="29.1328" y="0.303711" width="446.84" height="515.986" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_1670_12737"/>
</filter>
<filter id="filter1_f_1670_12737" x="143.395" y="466.362" width="477.391" height="491.623" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_1670_12737"/>
</filter>
<radialGradient id="paint0_radial_1670_12737" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(322.551 492) rotate(90) scale(108 180)">
<stop stop-color="#D9D9D9"/>
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint1_linear_1670_12737" x1="109.937" y1="161.419" x2="377.468" y2="377.127" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint2_linear_1670_12737" x1="295.239" y1="634.671" x2="490.513" y2="754.523" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="about-card">
<svg width="82" height="98" viewBox="0 0 82 98" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M80.168 80.0921H80.668V79.5921V61.4161V60.9161H80.168H69.02V1.64014V1.14014H68.52H42.664H42.4001L42.2512 1.35811L1.41916 61.1341L1.33203 61.2617V61.4161V79.5921V80.0921H1.83203H48.436V96.3601V96.8601H48.936H68.52H69.02V96.3601V80.0921H80.168ZM48.436 60.9161H24.7931L48.436 26.1755V60.9161Z" fill="url(#paint0_linear_1670_12591)"/>
<path d="M80.168 80.0921H80.668V79.5921V61.4161V60.9161H80.168H69.02V1.64014V1.14014H68.52H42.664H42.4001L42.2512 1.35811L1.41916 61.1341L1.33203 61.2617V61.4161V79.5921V80.0921H1.83203H48.436V96.3601V96.8601H48.936H68.52H69.02V96.3601V80.0921H80.168ZM48.436 60.9161H24.7931L48.436 26.1755V60.9161Z" fill="#202020" fill-opacity="0.82"/>
<path d="M80.168 80.0921H80.668V79.5921V61.4161V60.9161H80.168H69.02V1.64014V1.14014H68.52H42.664H42.4001L42.2512 1.35811L1.41916 61.1341L1.33203 61.2617V61.4161V79.5921V80.0921H1.83203H48.436V96.3601V96.8601H48.936H68.52H69.02V96.3601V80.0921H80.168ZM48.436 60.9161H24.7931L48.436 26.1755V60.9161Z" stroke="url(#paint1_linear_1670_12591)"/>
<defs>
<linearGradient id="paint0_linear_1670_12591" x1="-6.41303" y1="-39.6396" x2="141.155" y2="9.93167" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint1_linear_1670_12591" x1="-6.41303" y1="-39.6396" x2="141.155" y2="9.93167" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
<svg class="bg-img" width="936" height="573" viewBox="0 0 936 573" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1670_12810" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="287" y="155" width="361" height="217">
<rect x="287.945" y="155.832" width="360" height="216" fill="url(#paint0_radial_1670_12810)"/>
</mask>
<g mask="url(#mask0_1670_12810)">
<rect x="288.125" y="156.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.125" y="156.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.125" y="156.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.125" y="156.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.125" y="156.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.125" y="156.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.125" y="156.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.125" y="156.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.125" y="156.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="612.125" y="156.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="288.125" y="192.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.125" y="192.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.125" y="192.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.125" y="192.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.125" y="192.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.125" y="192.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.125" y="192.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.125" y="192.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.125" y="192.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="612.125" y="192.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="288.125" y="228.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.125" y="228.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.125" y="228.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.125" y="228.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.125" y="228.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.125" y="228.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.125" y="228.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.125" y="228.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.125" y="228.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="612.125" y="228.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="288.125" y="264.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.125" y="264.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.125" y="264.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.125" y="264.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.125" y="264.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.125" y="264.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.125" y="264.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.125" y="264.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.125" y="264.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="612.125" y="264.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="288.125" y="300.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.125" y="300.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.125" y="300.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.125" y="300.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.125" y="300.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.125" y="300.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.125" y="300.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.125" y="300.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.125" y="300.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="612.125" y="300.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="288.125" y="336.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="324.125" y="336.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="360.125" y="336.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="396.125" y="336.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="432.125" y="336.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="468.125" y="336.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="504.125" y="336.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="540.125" y="336.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="576.125" y="336.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
<rect x="612.125" y="336.012" width="35.64" height="35.64" stroke="#F4F4F7" stroke-opacity="0.08" stroke-width="0.36"/>
</g>
<g opacity="0.24" filter="url(#filter0_f_1670_12810)">
<ellipse cx="680.103" cy="233.569" rx="140.892" ry="84.2392" transform="rotate(19.4724 680.103 233.569)" fill="url(#paint1_linear_1670_12810)"/>
</g>
<g opacity="0.32" filter="url(#filter1_f_1670_12810)">
<ellipse cx="244.357" cy="336.177" rx="85.7994" ry="67.3913" transform="rotate(19.4724 244.357 336.177)" fill="url(#paint2_linear_1670_12810)"/>
</g>
<defs>
<filter id="filter0_f_1670_12810" x="424.309" y="21.2856" width="511.59" height="424.567" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_1670_12810"/>
</filter>
<filter id="filter1_f_1670_12810" x="0.382812" y="106.482" width="487.949" height="459.39" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_1670_12810"/>
</filter>
<radialGradient id="paint0_radial_1670_12810" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(467.945 263.832) rotate(90) scale(108 180)">
<stop stop-color="#D9D9D9"/>
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/>
</radialGradient>
<linearGradient id="paint1_linear_1670_12810" x1="539.212" y1="149.33" x2="776.342" y2="366.553" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
<linearGradient id="paint2_linear_1670_12810" x1="158.557" y1="268.786" x2="337.252" y2="393.392" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div class="container" id="work">
<div class="gap-2">
<h2>Experience in action</h2>
<p class="subtitle">From DeFi and ReFi projects to NFT and Gaming Dapps, my designs are all about creating
intuitive, user-friendly interfaces that bring concepts to life. Each project showcases my ability to understand
and meet the needs of users while also delivering on the business objectives of my clients. Take a look and see
the impact that my design skills can have on your next project.</p>
</div>
<div class="work-card">
<img src="image/aramid.png" height="717" width="1564">
<div class="work-content">
<h3 class="aramid">Aramid Bridge</h3>
<p class="body placeholder">Aramid Finance is a decentralized cross-chain protocol that enables the seamless transfer of assets across multiple blockchains. The platform utilizes bulletproof on-chain verification, a decentralized relayer node network, and a robust pipeline to ensure the security and convenience of its users. As a UX/UI designer, I was tasked with creating a user-friendly interface for the Aramid Finance platform that would make it easy for users to navigate and understand the various features and functionality of the platform.</p>
<div class="gap-1-2-row">
<div class="tag arm">design system</div>
<div class="tag arm">landing page</div>
<div class="tag arm">UX/UI design</div>
</div>
</div>
</div>
<div class="work-card">
<img src="image/aramid.webp" height="1432" width="3840">
<div class="work-content">
<h3 class="aramid">Aramid Bridge</h3>
<p class="body placeholder">Aramid Finance is a decentralized cross-chain protocol that enables the seamless transfer of assets across multiple blockchains. The platform utilizes bulletproof on-chain verification, a decentralized relayer node network, and a robust pipeline to ensure the security and convenience of its users. As a UX/UI designer, I was tasked with creating a user-friendly interface for the Aramid Finance platform that would make it easy for users to navigate and understand the various features and functionality of the platform.</p>
<div class="gap-1-row">
<div class="tag arm">design system</div>
<div class="tag arm">landing page</div>
<div class="tag arm">UX/UI design</div>
</div>
</div>
</div>
<div class="work-card">
<img src="image/aramid.webp" height="1432" width="3840">
<div class="work-content">
<h3 class="aramid">Aramid Bridge</h3>
<p class="body placeholder">Aramid Finance is a decentralized cross-chain protocol that enables the seamless transfer of assets across multiple blockchains. The platform utilizes bulletproof on-chain verification, a decentralized relayer node network, and a robust pipeline to ensure the security and convenience of its users. As a UX/UI designer, I was tasked with creating a user-friendly interface for the Aramid Finance platform that would make it easy for users to navigate and understand the various features and functionality of the platform.</p>
<div class="gap-1-row">
<div class="tag arm">design system</div>
<div class="tag arm">landing page</div>
<div class="tag arm">UX/UI design</div>
</div>
</div>
</div>
<button class="btn-primary btn-open">Let's work together</button>
</div>
<div class="container" id="testimonials">
<div class="gap-1 align-center">
<h2>What Clients Say About My Work</h2>
<p class="subtitle">Testimonials from satisfied clients highlight the impact and value of my work as a UX/UI
designer across various projects. Read what my clients have to say about my design skills and how it helped them
achieve their goals.</p>
</div>
<div class="testimonial">
<div class="testi-card t-left">
<p class="subtitle italic">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien fringilla, mattis ligula consectetur, ultrices mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet augue."</p>
<div class="testi-quote">
<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24.2832" cy="24" r="24" fill="#D9D9D9"/>
</svg>
<div class="ref">
<p class="body fire bold">John Richard</p>
<p class="body placeholder">CEO - Aramid Finance</p>
</div>
</div>
</div>
</div>
<button class="btn-primary btn-open">Let's work together</button>
</div>
<div id="still" class="container cta">
<div class="gap-1 align-center">
<h3 class="fire center">Still have questions?</h3>
<p class="body caption center">Don't hesitate to reach out and contact me directly. I will be pleased to chat and discuss
your project needs.</p>
<button class="btn-primary margin-1 btn-open">Contact me directly</button>
<svg width="1008" height="657" viewBox="0 0 1008 657" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.4" filter="url(#filter0_f_1581_6291)">
<ellipse cx="504" cy="358" rx="264" ry="118" fill="url(#paint0_linear_1581_6291)"/>
</g>
<defs>
<filter id="filter0_f_1581_6291" x="0" y="0" width="1008" height="716" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="120" result="effect1_foregroundBlur_1581_6291"/>
</filter>
<linearGradient id="paint0_linear_1581_6291" x1="240" y1="240" x2="566.673" y2="640.298" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
<section class="modal hidden">
<div class="highlight fill-ctnr">
<h4>Let’s work together!</h4>
<button class="btn-close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3327 2.66675L2.66602 13.3334M13.3327 13.3334L2.66602 2.66675" stroke="url(#paint0_linear_1648_5831)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_1648_5831" x1="2.66602" y1="2.66675" x2="15.3653" y2="9.62224" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
</button>
</div>
<div class="cadre">
<div class="illu-container">
<img class="small" width="540" height="540" src="./image/pfp.webp">
</div>
</div>
<p class="body placeholder">Please chose the way you want to create our first contact.</p>
<div class="highlight fill-ctnr">
<a href=https://calendly.com/mannbrs/30min" target="_blank" class="btn-block">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.75 10.5L23 7.5V16.5L17.75 13.5M2.75 5.625H14.75C15.5456 5.625 16.3087 5.94107 16.8713 6.50368C17.4339 7.06629 17.75 7.82935 17.75 8.625V17.625C17.75 17.8239 17.671 18.0147 17.5303 18.1553C17.3897 18.296 17.1989 18.375 17 18.375H5C4.20435 18.375 3.44129 18.0589 2.87868 17.4963C2.31607 16.9337 2 16.1706 2 15.375V6.375C2 6.17609 2.07902 5.98532 2.21967 5.84467C2.36032 5.70402 2.55109 5.625 2.75 5.625Z" stroke="url(#paint0_linear_1558_6067)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_1558_6067" x1="2" y1="5.625" x2="19.9193" y2="21.7901" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
Book a call
</a>
<a href="mailto:mannbrs@gmail.com" class="btn-block">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.74978 12.0001H12.7498M20.5779 11.3439L4.74353 2.47511C4.61015 2.40143 4.45749 2.37012 4.30588 2.38535C4.15426 2.40058 4.01089 2.46164 3.89483 2.56039C3.77878 2.65913 3.69556 2.79089 3.65625 2.93811C3.61694 3.08533 3.6234 3.24103 3.67478 3.38449L6.65603 11.747C6.72171 11.9093 6.72171 12.0909 6.65603 12.2532L3.67478 20.6157C3.6234 20.7592 3.61694 20.9149 3.65625 21.0621C3.69556 21.2093 3.77878 21.3411 3.89483 21.4398C4.01089 21.5386 4.15426 21.5996 4.30588 21.6149C4.45749 21.6301 4.61015 21.5988 4.74353 21.5251L20.5779 12.6564C20.6951 12.5915 20.7928 12.4964 20.8609 12.381C20.9289 12.2656 20.9648 12.1341 20.9648 12.0001C20.9648 11.8661 20.9289 11.7346 20.8609 11.6192C20.7928 11.5038 20.6951 11.4087 20.5779 11.3439Z" stroke="url(#paint0_linear_1558_6079)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_1558_6079" x1="3.63086" y1="2.38159" x2="25.2042" y2="13.0286" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF6231"/>
<stop offset="0.5" stop-color="#FF7B31"/>
<stop offset="1" stop-color="#FFC700"/>
</linearGradient>
</defs>
</svg>
Write me
</a>
</div>
</section>
<div class="overlay hidden"></div>
<div class="workOverlay hidden"></div>
</main>
<footer>
<a href="https://github.com/ninja-fire" target="_blank" class="body placeholder">Made with 🧡 by NinjaFire</a>