-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
5021 lines (4994 loc) · 919 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="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title change es="John Krazy - Haciendo ideas realidad" en="John Krazy - Making ideas come true">John Krazy - Making ideas come true</title>
<meta property="og:type" content="website" />
<meta property="og:image:url" content="https://raw.githubusercontent.com/JohnMcKrazy/JohnK_Portafolio/main/src/img/personal_logos/johnK_banner.jpg" />
<meta property="og:image:secure_url" content="https://raw.githubusercontent.com/JohnMcKrazy/JohnK_Portafolio/main/src/img/personal_logos/johnK_banner.jpg" />
<meta property="og:image:width" content="1280px" />
<meta property="og:image:height" content="640px" />
<meta
property="og:description"
content="¡Bienvenido a mi mundo creativo! Soy diseñador, ilustrador y desarrollador web. Explora mi portafolio donde convergen colores vibrantes, líneas cautivadoras y código que cobra vida. Descubre cómo fusiono arte y tecnología para dar vida a proyectos únicos y sorprendentes. ¡Prepárate para un viaje visual que despierta la imaginación y desafía los límites!."
/>
<meta property="og:title" content="John Krazy - Haciendo ideas realidad" />
<meta property="og:locale" content="es" />
<meta property="og:url" content="https://johnmckrazy.github.io/JohnK_Portafolio/" />
<meta
name="description"
content="¡Bienvenido a mi mundo creativo! Soy diseñador, ilustrador y desarrollador web. Explora mi portafolio donde convergen colores vibrantes, líneas cautivadoras y código que cobra vida. Descubre cómo fusiono arte y tecnología para dar vida a proyectos únicos y sorprendentes. ¡Prepárate para un viaje visual que despierta la imaginación y desafía los límites!."
/>
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<script type="module" src="./src/js/index.js" async defer></script>
<script type="module" charset="utf-8" src="./src/js/utils.js" defer></script>
<link rel="icon" type="image/svg" href="./src/img/personal_logos/johnK_tab_icon.svg" />
<link rel="image_src" href="./src/img/desk.png" />
<link rel="canonical" href="https://johnmckrazy.github.io/JohnK_Portafolio/" />
<link rel="stylesheet" href="./src/css/style.min.css" />
</head>
<body color-scheme="dark">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- ! ACCESIBILITE BUTTONS - START -->
<button type="button" class="accessibility_btn" accesibility-btn section-ref="services" aria-label="Skip to main content - Salta a contenido principal"><span class="label_btn" change es="Saltar A Contenido Principal" en="Go To Main">Saltar A Contenido Principal</span></button>
<button type="button" class="accessibility_btn" accesibility-btn section-ref="legals" aria-label="Skip to footer - Salta al pie de pagina"><span class="label_btn" change es="Saltar al pie de pagina" en="Go To Footer">Saltar al pie de pagina</span></button>
<div class="bubble info_bubble" info hidden="true">
<h3 class="title" change></h3>
<p class="description" change></p>
</div>
<div class="bubble bio_bubble" bio hidden="true">
<div class="header_bubble"></div>
<img class="photo" src="./src/img/photos/johnKPhoto.webp" alt="Foto de Jonathan Grajeda" loading="lazy" />
<div class="info">
<h3 class="name">Jonathan Grajeda</h3>
<p class="place" change es="México CDMX" en="Mexico City">México CDMX</p>
<div class="btns_container">
<button type="button" class="icon_container animated_social_btn href_btn" link-ref="https://www.behance.net/jg_john_design">
<svg class="icon_svg social_icon_svg behance_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 25">
<title>Behance</title>
<path
class="cls-1"
d="M10.1,11.63a2.44,2.44,0,0,1,2.12,1,3.78,3.78,0,0,1,.78,2v1A5.31,5.31,0,0,1,12.5,18a3.35,3.35,0,0,1-1.25,1.45,6.41,6.41,0,0,1-1.47.68,6.32,6.32,0,0,1-1.23.27H0V4.28H8.05a4.52,4.52,0,0,1,3.17,1.1,4,4,0,0,1,1.23,3.19,3.28,3.28,0,0,1-.58,2,2.16,2.16,0,0,1-1.18.92l-.59.11M3.55,7.13v3.6H7.8a1.32,1.32,0,0,0,1-.38,2.35,2.35,0,0,0,.35-1.52,2.19,2.19,0,0,0-.27-1.18.94.94,0,0,0-.58-.47l-.25,0H3.55m4.3,10.39c1.23,0,1.85-.69,1.85-2.1a2.54,2.54,0,0,0-.4-1.54,1.27,1.27,0,0,0-.8-.6l-.45,0H3.55v4.29h4.3M19.54,8.38a5.63,5.63,0,0,1,2.95.72,4,4,0,0,1,1.67,1.75,8.65,8.65,0,0,1,.68,2.05A7,7,0,0,1,25,14.62l0,.76h-8a2.86,2.86,0,0,0,.68,2,1.93,1.93,0,0,0,1.37.7l.65,0a3.13,3.13,0,0,0,1.77-.42,1.3,1.3,0,0,0,.67-.83l.05-.45h2.7a3.75,3.75,0,0,1-1.32,3.11,4.55,4.55,0,0,1-2.62,1.09l-1.35,0a6.85,6.85,0,0,1-3.05-.62,4.14,4.14,0,0,1-1.79-1.55,8.67,8.67,0,0,1-.83-1.83,5.36,5.36,0,0,1-.27-1.5v-.64c0-.17,0-.4,0-.68A7.92,7.92,0,0,1,14,12.4a6.37,6.37,0,0,1,.9-1.87,5.32,5.32,0,0,1,1.8-1.48,5.85,5.85,0,0,1,2.87-.67M22,13.22c0-.07,0-.15,0-.27s-.07-.32-.15-.6a3.21,3.21,0,0,0-.33-.75,1.78,1.78,0,0,0-.7-.6,2.28,2.28,0,0,0-1.15-.28,2.5,2.5,0,0,0-1.74.63,2.42,2.42,0,0,0-.85,1.27l-.16.6H22m.65-8V7.18h-6.4V5.23h6.4"
/>
</svg>
</button>
<button type="button" class="icon_container animated_social_btn href_btn" link-ref="https://github.com/JohnMcKrazy">
<svg class="icon_svg social_icon_svg gitHub_icon_svg" name="gitHub_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 25">
<title>GitHub</title>
<path
class="cls-1"
d="M12.5.31A12.5,12.5,0,0,0,8.55,24.67c.62.12.85-.27.85-.6s0-1.28,0-2.33c-3.48.76-4.22-1.47-4.22-1.47a3.26,3.26,0,0,0-1.38-1.83c-1.14-.78.08-.76.08-.76A2.63,2.63,0,0,1,5.79,19a2.66,2.66,0,0,0,3.64,1,2.68,2.68,0,0,1,.79-1.67C7.44,18,4.52,17,4.52,12.16A4.85,4.85,0,0,1,5.81,8.8a4.49,4.49,0,0,1,.12-3.31S7,5.16,9.37,6.77a12.56,12.56,0,0,1,3.13-.42,12.56,12.56,0,0,1,3.13.42C18,5.16,19.07,5.49,19.07,5.49a4.49,4.49,0,0,1,.12,3.31,4.84,4.84,0,0,1,1.28,3.36c0,4.8-2.92,5.85-5.7,6.16a3,3,0,0,1,.84,2.32c0,1.67,0,3,0,3.43s.23.72.86.6A12.5,12.5,0,0,0,12.5.31Z"
/>
<path class="cls-2" d="M4.73,18.26c0,.06-.12.08-.21,0s-.14-.12-.11-.18.12-.09.21,0,.15.12.11.19Zm-.15-.12" />
<path class="cls-2" d="M5.24,18.82c-.06.06-.18,0-.25-.06a.18.18,0,0,1,0-.26c.06-.05.17,0,.26.06a.19.19,0,0,1,0,.26Zm-.12-.13" />
<path class="cls-2" d="M5.73,19.54c-.07.05-.2,0-.28-.11a.22.22,0,0,1,0-.3c.07-.05.2,0,.28.11s.07.25,0,.3Zm0,0" />
<path class="cls-2" d="M6.41,20.24a.24.24,0,0,1-.32,0C6,20.09,6,19.94,6,19.87s.21-.06.32.05a.24.24,0,0,1,.07.32Zm0,0" />
<path class="cls-2" d="M7.34,20.64c0,.1-.17.14-.31.1s-.24-.16-.21-.26.17-.14.32-.1.23.16.2.26Zm0,0" />
<path class="cls-2" d="M8.36,20.71c0,.11-.11.19-.26.2s-.27-.08-.27-.19.11-.19.26-.19.27.08.27.18Zm0,0" />
<path class="cls-2" d="M9.32,20.55c0,.1-.09.21-.24.23s-.28,0-.3-.13.09-.21.24-.23.28,0,.3.13Zm0,0" />
</svg>
</button>
</div>
</div>
</div>
<div class="bubble rex_bubble" rex hidden="true">
<div class="header_bubble"></div>
<img class="photo" src="./src/img/photos/rex.webp" alt="Foto de Maximo Decimo Reximiliano" loading="lazy" />
<div class="info">
<h3 class="name">Maximo Décimo Reximiliano</h3>
<p class="place" change es="México CDMX" en="Mexico City">México CDMX</p>
</div>
</div>
<!-- !MODAL -->
<dialog class="modal" modal-active="false" modal>
<button type="button" class="icon_container close_btn" close-btn modal-btn="portfolio">
<svg class="close_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 25">
<title>Cerrar</title>
<rect class="cls-1" x="-1.92" y="11.32" width="28.83" height="2.36" transform="translate(12.5 -5.18) rotate(45)" />
<rect class="cls-1" x="-1.92" y="11.32" width="28.83" height="2.36" transform="translate(30.18 12.5) rotate(135)" />
</svg>
</button>
<div class="window alert_modal" modal-window="alert" hidden="true" active="false">
<div class="modal_header"><h1 class="title_modal" change es="Politica de uso de datos" en="Data use policy">Politica de uso de datos</h1></div>
<div class="modal_info">
<p class="description_modal" change es="Esta pagina no utiliza cookies ni ninguno de sus datos" en="This page not make use of cookies and neither other of your data">Esta pagina no utiliza cookies ni ninguno de sus datos</p>
<button type="button" class="inner_link_btn" window-btn="legal">
<span class="label_btn" change es="Avisos legales" en="Legal notices ">Avisos legales</span>
</button>
</div>
<button type="button" class="btn more_btn alert_modal_accept_btn storage_accept" accept-storage modal-btn="alert">
<span class="label_btn" change es="Aceptar" en="Accept">Aceptar</span>
</button>
</div>
<div class="window legal_modal" modal-window="legal" hidden="true" active="false">
<div class="modal_header">
<h1 class="title_modal" change es="Avisos legales" en="Legal notices ">Aviso Legal</h1>
<h2 change es="Términos y Condiciones:" en="Terms and conditions:">Términos y Condiciones:</h2>
</div>
<div class="modal_info modal_info_legal">
<h3 change es="Uso del Sitio Web:" en="Use of the Website:">Uso del Sitio Web:</h3>
<p
change
es="Al acceder y utilizar este sitio web, usted acepta cumplir con estos términos y condiciones de uso. Si no está de acuerdo con alguno de estos términos, por favor absténgase de utilizar este sitio."
en="By accessing and using this website, you agree to comply with these terms and conditions of use. If you do not agree with any of these terms, please refrain from using this site."
>
Al acceder y utilizar este sitio web, usted acepta cumplir con estos términos y condiciones de uso. Si no está de acuerdo con alguno de estos términos, por favor absténgase de utilizar este sitio.
</p>
<br />
<h3 change es="Propiedad Intelectual:" en="Intellectual Property:">Propiedad Intelectual:</h3>
<p
change
es="Todos los derechos de propiedad intelectual sobre los diseños, ilustraciones, desarrollos web y demás contenido presentado en este sitio web son propiedad exclusiva del titular del sitio, a menos que se indique lo contrario. Queda estrictamente prohibida la reproducción,distribución o modificación de dicho contenido sin el consentimiento expreso del titular."
en="All intellectual property rights in the designs, illustrations, web developments and other content presented on this website are the exclusive property of the site owner, unless otherwise indicated. The reproduction, distribution or modification of said content is strictly prohibited without the express consent of the owner."
>
Todos los derechos de propiedad intelectual sobre los diseños, ilustraciones, desarrollos web y demás contenido presentado en este sitio web son propiedad exclusiva del titular del sitio, a menos que se indique lo contrario. Queda estrictamente prohibida la
reproducción,distribución o modificación de dicho contenido sin el consentimiento expreso del titular.
</p>
<br />
<h3 change es="Contacto y Servicios:" en="Contact and Services:">Contacto y Servicios:</h3>
<p
change
es="Este sitio web proporciona información sobre los trabajos realizados por el titular y ofrece la posibilidad de contactarlo para solicitar sus servicios como diseñador, ilustrador y desarrollador web. Cualquier acuerdo o contratación de servicios se regirá por acuerdos separados entre el titular y el cliente."
en="This website provides information about the work carried out by the owner and offers the possibility of contacting him to request his services as a designer, illustrator and web developer. Any agreement or contracting of services will be governed by agreements separated between the owner and the client."
>
Este sitio web proporciona información sobre los trabajos realizados por el titular y ofrece la posibilidad de contactarlo para solicitar sus servicios como diseñador, ilustrador y desarrollador web. Cualquier acuerdo o contratación de servicios se regirá por acuerdos
separados entre el titular y el cliente.
</p>
<br />
<h3 change es="Enlaces a Terceros:" en="Third Party Links:">Enlaces a Terceros:</h3>
<p
change
es="Este sitio web puede contener enlaces a otros sitios web de terceros que son proporcionados únicamente como referencia. El titular del sitio no tiene control sobre el contenido o las políticas de privacidad de estos sitios y no se hace responsable por su contenido o prácticas."
en="This website may contain links to other third party websites which are provided for your reference only. The site owner has no control over the content or privacy policies of these sites and is not responsible for their content or practices."
>
Este sitio web puede contener enlaces a otros sitios web de terceros que son proporcionados únicamente como referencia. El titular del sitio no tiene control sobre el contenido o las políticas de privacidad de estos sitios y no se hace responsable por su contenido o
prácticas.
</p>
<br />
<h3 change es="Limitación de Responsabilidades:" en="Liability Limitations:">Limitación de Responsabilidades:</h3>
<p
change
es="El titular del sitio no será responsable de ningún daño directo, indirecto, incidental, especial, emergente o punitivo que surja del uso o la incapacidad de utilizar este sitio web."
en="The owner of the site will not be liable for any direct, indirect, incidental, special, consequential or punitive damages arising from the use or inability to use this website."
>
El titular del sitio no será responsable de ningún daño directo, indirecto, incidental, especial, emergente o punitivo que surja del uso o la incapacidad de utilizar este sitio web.
</p>
<br />
<h3 change es="Modificaciones:" en="Modifications:">Modificaciones:</h3>
<p
change
es="El titular del sitio se reserva el derecho de modificar, suspender o discontinuar cualquier aspecto de este sitio web en cualquier momento y sin previo aviso."
en="The owner of the site reserves the right to modify, suspend or discontinue any aspect of this website at any time and without prior notice."
>
El titular del sitio se reserva el derecho de modificar, suspender o discontinuar cualquier aspecto de este sitio web en cualquier momento y sin previo aviso.
</p>
<br />
<h3 change es="Jurisdicción y Ley Aplicable:" en="Jurisdiction and Applicable Law:">Jurisdicción y Ley Aplicable:</h3>
<p
change
es="Estos términos y condiciones se regirán e interpretarán de acuerdo con las leyes de la Ciudad de México y cualquier disputa que surja en relación con estos términos y condiciones estará sujeta a la jurisdicción exclusiva de los tribunales de México."
en="These terms and conditions will be governed by and construed in accordance with the laws of Mexico City and any dispute arising in connection with these terms and conditions will be subject to the exclusive jurisdiction of the courts of Mexico."
>
Estos términos y condiciones se regirán e interpretarán de acuerdo con las leyes de la Ciudad de México y cualquier disputa que surja en relación con estos términos y condiciones estará sujeta a la jurisdicción exclusiva de los tribunales de México.
</p>
<button type="button" class="inner_link_btn" window-btn="alert">
<span class="label_btn" change es="Avisos De Datos" en="Data Use Policy">Avisos De Datos</span>
</button>
<button type="button" class="btn more_btn legal_modal_accept_btn" modal-btn="legal">
<span class="label_btn" change es="Aceptar" en="Accept">Aceptar</span>
</button>
</div>
</div>
<div class="window contact_modal" modal-window="contact" hidden="true" active="false">
<div class="modal_header">
<h1 class="title_modal" change es="¿Como Puedo Ayudarte?" en="How Can I Help You?">¿Como Puedo Ayudarte?</h1>
</div>
<div class="modal_info" id="modal_info_contact_form">
<p class="description_modal" change es="Estoy ansioso de hacer proyectos interesantes con tus ideas" en="I'm looking forward to doing interesting projects with your ideas.">Estoy ansioso de hacer proyectos interesantes con tus ideas</p>
</div>
<form class="form modal_form" id="modal_contact_form" action="https://api.web3forms.com/submit" method="submit">
<div class="input_container">
<label for="modal_input_name" change es="Nombre" en="Name" autocomplete>Nombre</label>
<input type="text" placeholder="Escribe tu/s Nombre/s" id="modal_input_name" name="name" class="input_name" change-input es="Escribe tu Nombre" en="Write your name" autocomplete="off" required input-name />
</div>
<div class="input_container">
<label for="modal_input_last_name" change es="Apellidos" en="Lastname">Apellido</label>
<input type="text" placeholder="Escribe tus Apellidos" id="modal_input_last_name" name="last_name" class="input_last" change-input es="Escribe tu Apellido" en="Write your Last Name" autocomplete="off" input-last-name />
</div>
<div class="input_container">
<label for="modal_input_email">Email</label>
<input type="email" placeholder="Escribe tu Email" id="modal_input_email" name="email" class="input_email" change-input es="Escribe tu Email" en="Write your Email" autocomplete="off" required input-email />
</div>
<div class="input_container last">
<label for="modal_input_textarea" change es="Descripción" en="Description">Descripción</label>
<textarea placeholder="Comparte me un resumen de tu idea" id="modal_input_textarea" name="description" class="input_description" change-input es="Comparteme tu idea" en="Share me your idea" required></textarea>
</div>
<input type="hidden" name="access_key" value="5dfd5c33-4542-492d-a32f-194035787e90" />
<div class="submit_container">
<button type="submit" class="btn send_btn" id="modal_contact_form_send_btn" form="modal_form" send-form>
<span class="label_btn" change es="Enviar" en="Send">Enviar</span>
</button>
</div>
<div class="form_response_container" form-response-container hidden="true" show="false">
<p class="form_response" change form-response></p>
</div>
</form>
</div>
<div class="window portfolio_modal" modal-window="portfolio" hidden="true" active="false">
<div class="modal_header"><h1 class="title_modal" change es="Portafolio" en="Portfolio">Portafolio</h1></div>
<div class="lists_container">
<div class="options_container">
<button class="option_btn option_search_btn" tabindex="0" search="type" option-btn="types">
<span class="label_btn" change es="tipo" en="type">tipo</span>
<span class="icon_container">
<svg class="icon_svg arrow_list_icon arrow_portfolio_list_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 16L6 10H18L12 16Z"></path></svg>
</span>
</button>
<ul class="options_droper" options-droper="types" hidden="true" options-active="false">
<li>
<button class="option_btn" tabindex="0" option-type="all">
<span class="label_btn" change es="todo" en="all" option-btn="types">todo</span>
</button>
</li>
<li>
<button class="option_btn" tabindex="0" option-type="design">
<span class="label_btn" change es="diseño" en="design" option-btn="types">Diseño</span>
</button>
</li>
<li>
<button class="option_btn" tabindex="0" option-type="develop">
<span class="label_btn" change es="desarrollo" en="develop" option-btn="types">Desarrollo</span>
</button>
</li>
<li>
<button class="option_btn" tabindex="0" option-type="illustration">
<span class="label_btn" change es="ilustración" en="illustration" option-btn="types">Ilustración</span>
</button>
</li>
</ul>
</div>
<div class="options_container">
<button class="option_btn option_search_btn" tabindex="0" search="skill" option-btn="skills">
<span class="label_btn" change es="habilidad" en="skill">habilidad</span>
<span class="icon_container">
<svg class="icon_svg arrow_list_icon arrow_portfolio_list_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 16L6 10H18L12 16Z"></path></svg>
</span>
</button>
<ul class="options_droper" options-droper="skills" hidden="true" options-active="false"></ul>
</div>
<div>
<h2 change es="tipo" en="type">tipo: <span change es="" en="" type-label></span></h2>
<h2 change es="habilidad" en="skill">habilidad: <span change es="" en="" skill-label></span></h2>
</div>
</div>
<div class="cards_container modal_info cards_portfolio_container" portfolio-container></div>
</div>
</dialog>
<div class="menu_controler phone_menu_controler" position-menu="" phone-menu>
<div class="social_btns_container nav_menu_social_btns">
<button type="button" class="phone_social_btn phone_menu_btn extra_btn href_btn" link-ref="https://www.behance.net/jg_john_design" action-menu>
<div class="icon_container">
<svg class="social_icon_svg behance_icon_svg icon_svg" name="behance_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 25">
<title>Behance</title>
<path
class="cls-1"
d="M10.1,11.63a2.44,2.44,0,0,1,2.12,1,3.78,3.78,0,0,1,.78,2v1A5.31,5.31,0,0,1,12.5,18a3.35,3.35,0,0,1-1.25,1.45,6.41,6.41,0,0,1-1.47.68,6.32,6.32,0,0,1-1.23.27H0V4.28H8.05a4.52,4.52,0,0,1,3.17,1.1,4,4,0,0,1,1.23,3.19,3.28,3.28,0,0,1-.58,2,2.16,2.16,0,0,1-1.18.92l-.59.11M3.55,7.13v3.6H7.8a1.32,1.32,0,0,0,1-.38,2.35,2.35,0,0,0,.35-1.52,2.19,2.19,0,0,0-.27-1.18.94.94,0,0,0-.58-.47l-.25,0H3.55m4.3,10.39c1.23,0,1.85-.69,1.85-2.1a2.54,2.54,0,0,0-.4-1.54,1.27,1.27,0,0,0-.8-.6l-.45,0H3.55v4.29h4.3M19.54,8.38a5.63,5.63,0,0,1,2.95.72,4,4,0,0,1,1.67,1.75,8.65,8.65,0,0,1,.68,2.05A7,7,0,0,1,25,14.62l0,.76h-8a2.86,2.86,0,0,0,.68,2,1.93,1.93,0,0,0,1.37.7l.65,0a3.13,3.13,0,0,0,1.77-.42,1.3,1.3,0,0,0,.67-.83l.05-.45h2.7a3.75,3.75,0,0,1-1.32,3.11,4.55,4.55,0,0,1-2.62,1.09l-1.35,0a6.85,6.85,0,0,1-3.05-.62,4.14,4.14,0,0,1-1.79-1.55,8.67,8.67,0,0,1-.83-1.83,5.36,5.36,0,0,1-.27-1.5v-.64c0-.17,0-.4,0-.68A7.92,7.92,0,0,1,14,12.4a6.37,6.37,0,0,1,.9-1.87,5.32,5.32,0,0,1,1.8-1.48,5.85,5.85,0,0,1,2.87-.67M22,13.22c0-.07,0-.15,0-.27s-.07-.32-.15-.6a3.21,3.21,0,0,0-.33-.75,1.78,1.78,0,0,0-.7-.6,2.28,2.28,0,0,0-1.15-.28,2.5,2.5,0,0,0-1.74.63,2.42,2.42,0,0,0-.85,1.27l-.16.6H22m.65-8V7.18h-6.4V5.23h6.4"
/>
</svg>
</div>
</button>
<button type="button" class="phone_social_btn phone_menu_btn extra_btn href_btn" link-ref="https://github.com/JohnMcKrazy" action-menu>
<div class="icon_container">
<svg class="social_icon_svg gitHub_icon_svg icon_svg" name="gitHub_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 25">
<title>GitHub</title>
<path
class="cls-1"
d="M12.5.31A12.5,12.5,0,0,0,8.55,24.67c.62.12.85-.27.85-.6s0-1.28,0-2.33c-3.48.76-4.22-1.47-4.22-1.47a3.26,3.26,0,0,0-1.38-1.83c-1.14-.78.08-.76.08-.76A2.63,2.63,0,0,1,5.79,19a2.66,2.66,0,0,0,3.64,1,2.68,2.68,0,0,1,.79-1.67C7.44,18,4.52,17,4.52,12.16A4.85,4.85,0,0,1,5.81,8.8a4.49,4.49,0,0,1,.12-3.31S7,5.16,9.37,6.77a12.56,12.56,0,0,1,3.13-.42,12.56,12.56,0,0,1,3.13.42C18,5.16,19.07,5.49,19.07,5.49a4.49,4.49,0,0,1,.12,3.31,4.84,4.84,0,0,1,1.28,3.36c0,4.8-2.92,5.85-5.7,6.16a3,3,0,0,1,.84,2.32c0,1.67,0,3,0,3.43s.23.72.86.6A12.5,12.5,0,0,0,12.5.31Z"
/>
<path class="cls-2" d="M4.73,18.26c0,.06-.12.08-.21,0s-.14-.12-.11-.18.12-.09.21,0,.15.12.11.19Zm-.15-.12" />
<path class="cls-2" d="M5.24,18.82c-.06.06-.18,0-.25-.06a.18.18,0,0,1,0-.26c.06-.05.17,0,.26.06a.19.19,0,0,1,0,.26Zm-.12-.13" />
<path class="cls-2" d="M5.73,19.54c-.07.05-.2,0-.28-.11a.22.22,0,0,1,0-.3c.07-.05.2,0,.28.11s.07.25,0,.3Zm0,0" />
<path class="cls-2" d="M6.41,20.24a.24.24,0,0,1-.32,0C6,20.09,6,19.94,6,19.87s.21-.06.32.05a.24.24,0,0,1,.07.32Zm0,0" />
<path class="cls-2" d="M7.34,20.64c0,.1-.17.14-.31.1s-.24-.16-.21-.26.17-.14.32-.1.23.16.2.26Zm0,0" />
<path class="cls-2" d="M8.36,20.71c0,.11-.11.19-.26.2s-.27-.08-.27-.19.11-.19.26-.19.27.08.27.18Zm0,0" />
<path class="cls-2" d="M9.32,20.55c0,.1-.09.21-.24.23s-.28,0-.3-.13.09-.21.24-.23.28,0,.3.13Zm0,0" />
</svg>
</div>
</button>
<button class="phone_social_btn contact_btn phone_menu_btn extra_btn" tabindex="0" modal-btn="contact" action-menu>
<div class="icon_container">
<svg class="social_icon_svg contact_icon_svg icon_svg" name="contact_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 18">
<title>Correo</title>
<polygon class="cls-1" points="12.5 10.42 0 0 25 0 12.5 10.42" />
<polygon class="cls-1" points="16.05 9.06 25 16.79 25 1.6 16.05 9.06" />
<polygon class="cls-1" points="0 1.6 0 16.79 8.96 9.06 0 1.6" />
<polygon class="cls-1" points="15.3 9.68 12.5 12.02 9.7 9.68 0 18 25 18 15.3 9.68" />
</svg>
</div>
</button>
</div>
<div class="nav_menu_link_btns">
<button type="button" class="phone_menu_btn" name="hero_section" action-menu section-action section-ref="hero">
<span class="label_btn" change en="Home" es="Inicio">Inicio</span>
</button>
<button type="button" class="phone_menu_btn" name="about_section" action-menu section-action section-ref="about">
<span class="label_btn" change en="About Me" es="Quien Soy">Quien Soy</span>
</button>
<button type="button" class="phone_menu_btn" name="skills_section" action-menu section-action section-ref="skills">
<span class="label_btn" change en="Skills" es="Habilidades">Habilidades</span>
</button>
<button type="button" class="phone_menu_btn" name="services_section" action-menu section-action section-ref="services">
<span class="label_btn" change en="Services" es="Servicios">Servicios</span>
</button>
<button type="button" class="phone_menu_btn" name="portfolio_section" action-menu section-action section-ref="portfolio">
<span class="label_btn" change en="Portfolio" es="Portafolio">Portafolio</span>
</button>
<button type="button" class="phone_menu_btn" name="contact_section" action-menu section-action section-ref="contact">
<span class="label_btn" change en="Contact" es="Contacto">Contacto</span>
</button>
<button type="button" class="phone_menu_btn" name="legals_section" action-menu section-action section-ref="legals">
<span class="label_btn" change en="Legals" es="Legales">Legales</span>
</button>
</div>
<div class="extra_btns_container nav_menu_extra_btns">
<div class="btns_container">
<button type="button" class="icon_container extra_btn theme_btn" theme-btn>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" icon="theme" icon-theme="dark" hidden="false">
<path d="M11.3807 2.01886C9.91573 3.38768 9 5.3369 9 7.49999C9 11.6421 12.3579 15 16.5 15C18.6631 15 20.6123 14.0843 21.9811 12.6193C21.6613 17.8537 17.3149 22 12 22C6.47715 22 2 17.5228 2 12C2 6.68514 6.14629 2.33869 11.3807 2.01886Z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" icon="theme" icon-theme="light" hidden="true">
<path
d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"
></path>
</svg>
</button>
<button type="button" class="icon_container extra_btn sound_btn" sound-btn>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" icon="sound" icon-sound="on" hidden="true">
<path
d="M8.88889 16H5C4.44772 16 4 15.5523 4 15V9.00001C4 8.44772 4.44772 8.00001 5 8.00001H8.88889L14.1834 3.66815C14.3971 3.49329 14.7121 3.52479 14.887 3.73851C14.9601 3.82784 15 3.93971 15 4.05513V19.9449C15 20.221 14.7761 20.4449 14.5 20.4449C14.3846 20.4449 14.2727 20.405 14.1834 20.3319L8.88889 16ZM18.8631 16.5911L17.4411 15.169C18.3892 14.4376 19 13.2901 19 12C19 10.5697 18.2493 9.31469 17.1203 8.6076L18.5589 7.169C20.0396 8.2616 21 10.0187 21 12C21 13.8422 20.1698 15.4904 18.8631 16.5911Z"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" icon="sound" icon-sound="off" hidden="false">
<path
d="M5.88889 16H2C1.44772 16 1 15.5523 1 15V9.00001C1 8.44772 1.44772 8.00001 2 8.00001H5.88889L11.1834 3.66815C11.3971 3.49329 11.7121 3.52479 11.887 3.73851C11.9601 3.82784 12 3.93971 12 4.05513V19.9449C12 20.221 11.7761 20.4449 11.5 20.4449C11.3846 20.4449 11.2727 20.405 11.1834 20.3319L5.88889 16ZM20.4142 12L23.9497 15.5355L22.5355 16.9498L19 13.4142L15.4645 16.9498L14.0503 15.5355L17.5858 12L14.0503 8.46447L15.4645 7.05026L19 10.5858L22.5355 7.05026L23.9497 8.46447L20.4142 12Z"
></path>
</svg>
</button>
<button type="button" class="icon_container nav_btn extra_btn lang_btn phone_lang_btn" name="lang_btn">
<span class="label_btn label_lang" change es="ES" en="EN">ES</span>
</button>
</div>
<button type="button" class="icon_container extra_btn close_btn" id="menu_container_close_btn" action-menu>
<svg class="icon_svg close_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 25">
<title>Cerrar</title>
<rect class="cls-1" x="-1.92" y="11.32" width="28.83" height="2.36" transform="translate(12.5 -5.18) rotate(45)" />
<rect class="cls-1" x="-1.92" y="11.32" width="28.83" height="2.36" transform="translate(30.18 12.5) rotate(135)" />
</svg>
</button>
</div>
</div>
<!-- ! MENU SOCIALS -->
<div class="menu_social_container" position-social="" contact-menu>
<button type="button" class="menu_btn_social_menu social_menu_btn">
<div class="icon_container">
<svg class="icon_svg social_icon_svg conection_icon_svg" name="conection_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18">
<title>Enlace</title>
<circle class="cls-1" cx="4.19" cy="9.3" r="4.19" />
<path class="cls-2" d="M15.2,12.4a2.79,2.79,0,0,0-1.85.72L9.82,11.06a5.82,5.82,0,0,1-1,1.86L12.42,15c0,.06,0,.13,0,.19a2.8,2.8,0,1,0,2.8-2.8Z" />
<path class="cls-2" d="M15.2,0a2.8,2.8,0,0,0-2.8,2.8c0,.13,0,.26,0,.39L8.62,5.42A5.76,5.76,0,0,1,9.7,7.22L13.5,5a2.75,2.75,0,0,0,1.7.6,2.8,2.8,0,1,0,0-5.6Z" />
</svg>
</div>
</button>
<div class="menu_social_btns_container" contact-menu-container>
<button type="button" class="social_menu_btn social_btn href_btn" link-ref="https://www.behance.net/jg_john_design">
<div class="icon_container">
<svg class="icon_svg social_icon_svg behance_icon_svg" name="behance_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 25">
<title>Behance</title>
<path
class="cls-1"
d="M10.1,11.63a2.44,2.44,0,0,1,2.12,1,3.78,3.78,0,0,1,.78,2v1A5.31,5.31,0,0,1,12.5,18a3.35,3.35,0,0,1-1.25,1.45,6.41,6.41,0,0,1-1.47.68,6.32,6.32,0,0,1-1.23.27H0V4.28H8.05a4.52,4.52,0,0,1,3.17,1.1,4,4,0,0,1,1.23,3.19,3.28,3.28,0,0,1-.58,2,2.16,2.16,0,0,1-1.18.92l-.59.11M3.55,7.13v3.6H7.8a1.32,1.32,0,0,0,1-.38,2.35,2.35,0,0,0,.35-1.52,2.19,2.19,0,0,0-.27-1.18.94.94,0,0,0-.58-.47l-.25,0H3.55m4.3,10.39c1.23,0,1.85-.69,1.85-2.1a2.54,2.54,0,0,0-.4-1.54,1.27,1.27,0,0,0-.8-.6l-.45,0H3.55v4.29h4.3M19.54,8.38a5.63,5.63,0,0,1,2.95.72,4,4,0,0,1,1.67,1.75,8.65,8.65,0,0,1,.68,2.05A7,7,0,0,1,25,14.62l0,.76h-8a2.86,2.86,0,0,0,.68,2,1.93,1.93,0,0,0,1.37.7l.65,0a3.13,3.13,0,0,0,1.77-.42,1.3,1.3,0,0,0,.67-.83l.05-.45h2.7a3.75,3.75,0,0,1-1.32,3.11,4.55,4.55,0,0,1-2.62,1.09l-1.35,0a6.85,6.85,0,0,1-3.05-.62,4.14,4.14,0,0,1-1.79-1.55,8.67,8.67,0,0,1-.83-1.83,5.36,5.36,0,0,1-.27-1.5v-.64c0-.17,0-.4,0-.68A7.92,7.92,0,0,1,14,12.4a6.37,6.37,0,0,1,.9-1.87,5.32,5.32,0,0,1,1.8-1.48,5.85,5.85,0,0,1,2.87-.67M22,13.22c0-.07,0-.15,0-.27s-.07-.32-.15-.6a3.21,3.21,0,0,0-.33-.75,1.78,1.78,0,0,0-.7-.6,2.28,2.28,0,0,0-1.15-.28,2.5,2.5,0,0,0-1.74.63,2.42,2.42,0,0,0-.85,1.27l-.16.6H22m.65-8V7.18h-6.4V5.23h6.4"
/>
</svg>
</div>
</button>
<button type="button" class="social_menu_btn social_btn href_btn" link-ref="https://github.com/JohnMcKrazy">
<div class="icon_container">
<svg class="icon_svg social_icon_svg gitHub_icon_svg" name="gitHub_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 25">
<title>GitHub</title>
<path
class="cls-1"
d="M12.5.31A12.5,12.5,0,0,0,8.55,24.67c.62.12.85-.27.85-.6s0-1.28,0-2.33c-3.48.76-4.22-1.47-4.22-1.47a3.26,3.26,0,0,0-1.38-1.83c-1.14-.78.08-.76.08-.76A2.63,2.63,0,0,1,5.79,19a2.66,2.66,0,0,0,3.64,1,2.68,2.68,0,0,1,.79-1.67C7.44,18,4.52,17,4.52,12.16A4.85,4.85,0,0,1,5.81,8.8a4.49,4.49,0,0,1,.12-3.31S7,5.16,9.37,6.77a12.56,12.56,0,0,1,3.13-.42,12.56,12.56,0,0,1,3.13.42C18,5.16,19.07,5.49,19.07,5.49a4.49,4.49,0,0,1,.12,3.31,4.84,4.84,0,0,1,1.28,3.36c0,4.8-2.92,5.85-5.7,6.16a3,3,0,0,1,.84,2.32c0,1.67,0,3,0,3.43s.23.72.86.6A12.5,12.5,0,0,0,12.5.31Z"
/>
<path class="cls-2" d="M4.73,18.26c0,.06-.12.08-.21,0s-.14-.12-.11-.18.12-.09.21,0,.15.12.11.19Zm-.15-.12" />
<path class="cls-2" d="M5.24,18.82c-.06.06-.18,0-.25-.06a.18.18,0,0,1,0-.26c.06-.05.17,0,.26.06a.19.19,0,0,1,0,.26Zm-.12-.13" />
<path class="cls-2" d="M5.73,19.54c-.07.05-.2,0-.28-.11a.22.22,0,0,1,0-.3c.07-.05.2,0,.28.11s.07.25,0,.3Zm0,0" />
<path class="cls-2" d="M6.41,20.24a.24.24,0,0,1-.32,0C6,20.09,6,19.94,6,19.87s.21-.06.32.05a.24.24,0,0,1,.07.32Zm0,0" />
<path class="cls-2" d="M7.34,20.64c0,.1-.17.14-.31.1s-.24-.16-.21-.26.17-.14.32-.1.23.16.2.26Zm0,0" />
<path class="cls-2" d="M8.36,20.71c0,.11-.11.19-.26.2s-.27-.08-.27-.19.11-.19.26-.19.27.08.27.18Zm0,0" />
<path class="cls-2" d="M9.32,20.55c0,.1-.09.21-.24.23s-.28,0-.3-.13.09-.21.24-.23.28,0,.3.13Zm0,0" />
</svg>
</div>
</button>
<button type="button" class="social_menu_btn contact_btn social_btn" tabindex="0" modal-btn="contact">
<div class="icon_container">
<svg class="icon_svg social_icon_svg contact_icon_svg" name="contact_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 18">
<title>Correo</title>
<polygon class="cls-1" points="12.5 10.42 0 0 25 0 12.5 10.42" />
<polygon class="cls-1" points="16.05 9.06 25 16.79 25 1.6 16.05 9.06" />
<polygon class="cls-1" points="0 1.6 0 16.79 8.96 9.06 0 1.6" />
<polygon class="cls-1" points="15.3 9.68 12.5 12.02 9.7 9.68 0 18 25 18 15.3 9.68" />
</svg>
</div>
</button>
</div>
</div>
<!-- !PAGE START -->
<header class="section with_bg hero_section" id="hero_section">
<div class="section_content content">
<picture class="bg_section">
<img src="./src/img/backgrounds/day.webp" alt="background in light theme" bg-img="light" hidden />
<img src="./src/img/backgrounds/night_EXIF.webp" alt="background in dark theme" bg-img="dark" />
<span class="overlay"></span>
</picture>
<div class="title_container">
<h1>
<span change es="Haciendo" en="Making">Haciendo</span>
<br /><span>ideas</span><br />
<span change es="realidad" en="come true">realidad</span>
</h1>
<h2>
<span change es="Ilustración" en="Illustration">Ilustración</span>
<span class="accent_color">/</span>
<span change es="Diseño" en="Design">Diseño</span>
<span class="accent_color">/</span>
<span>Web</span>
<span class="accent_color">/</span>
<span change es="Desarrollo" en="Develop">Desarrollo</span>
</h2>
</div>
<div class="btns_container">
<button type="button" class="btn btn_hero" id="hero_btn_portfolio" name="portfolio_section" tabindex="0"><h3 class="label_btn" change es="Portafolio" en="Portfolio">Portafolio</h3></button>
<button type="button" class="btn contact_btn" id="hero_btn_about" name="about_section" tabindex="0" modal-btn="contact"><h3 class="label_btn" change es="Contactame" en="Contact Me">Contactame</h3></button>
</div>
<button type="button" class="btn_down btn_menu" id="hero_btn_down" name="about_section" btn-down>
<h3 change es="Ver más" en="Show More">Ver más</h3>
<svg class="arrow_down_svg accent_color" name="arrow_down_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 9">
<title>arrow down</title>
<path class="cls-1" d="M17.94,0H15.12l0,0L9,6A.06.06,0,0,1,9,6l-6-6,0,0H.06C0,0,0,.09,0,.13L9,9A0,0,0,0,0,9,9L18,.13S18,0,17.94,0Z"></path>
</svg>
</button>
</div>
</header>
<nav class="nav_menu" nav-menu>
<div class="menu_container content">
<button type="button" class="icon_container logo_btn" logo-btn>
<svg viewBox="0 0 60 40" version="1.1" class="johnK_icon" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<path
d="m 50.762792,-1.42e-4 c -0.227764,0 -0.412378,0.184614 -0.412378,0.41237799 V 2.9278451 c 0,0.2277628 0.184614,0.412378 0.412378,0.412378 h 5.649784 V 36.65964 h -5.649784 c -0.227764,0 -0.412378,0.184608 -0.412378,0.412369 v 2.515611 c 0,0.227769 0.184614,0.41238 0.412378,0.41238 h 8.824784 c 0.227764,0 0.412378,-0.184611 0.412378,-0.41238 V 0.41223599 C 59.999954,0.184472 59.81534,-1.42e-4 59.587576,-1.42e-4 Z"
class="braket"
/>
<path d="M 32.500342,7.4712369 V 32.460929 h 3.47369 V 24.90842 l 3.808036,-4.32326 8.427392,11.875769 h 3.854029 L 42.036711,18.4561 51.562227,7.4712369 H 47.795015 L 35.974032,21.10658 V 7.4712369 Z" class="letter" />
<path d="m 25.542627,9.8648889 v 4.1687381 h 4.40955 V 9.8648889 Z" class="dot" />
<path d="m 25.542627,25.51096 v 4.168219 h 4.40955 V 25.51096 Z" class="dot" />
<path
d="m 10.217464,7.4712369 v 2.8515051 h 9.55704 V 24.94304 c 0,1.61297 -0.368519,2.84591 -1.105876,3.69848 -0.737357,0.84105 -1.930028,1.26142 -3.577559,1.26142 -0.841048,0 -1.687845,-0.0806 -2.540414,-0.24184 C 11.698086,29.48828 10.943419,29.29797 10.286711,29.090589 9.6300019,28.87169 9.1633049,28.69901 8.8867959,28.57227 l -0.95033,2.67891 c 0.3802,0.19586 0.95614,0.41435 1.72806,0.65629 0.7719211,0.23043 1.6418791,0.426269 2.6096601,0.587559 0.979302,0.17282 1.952971,0.25942 2.920752,0.25942 2.811173,0 4.856173,-0.696769 6.135026,-2.090829 1.278853,-1.40559 1.918229,-3.28949 1.918229,-5.65134 V 7.4712369 Z"
class="letter"
/>
<path
d="M 0.41237799,-1.42e-4 C 0.184615,-1.42e-4 0,0.184473 0,0.41223599 V 39.58762 C 0,39.815389 0.184615,40 0.41237799,40 H 9.2371618 c 0.2277642,0 0.412378,-0.184611 0.412378,-0.41238 v -2.515611 c 0,-0.227761 -0.1846138,-0.412369 -0.412378,-0.412369 H 3.587378 V 3.3402231 h 5.6497838 c 0.2277642,0 0.412378,-0.1846152 0.412378,-0.412378 V 0.41223599 C 9.6495398,0.184473 9.464926,-1.42e-4 9.2371618,-1.42e-4 Z"
class="braket"
/>
</svg>
<svg viewBox="0 0 3.5 1.05" version="1.1" class="johnK_full" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<path
class="braket"
d="M 0.0109108,0 C 0.00488459,0 0,0.00488459 0,0.0109108 v 1.0365117 c 0,0.00603 0.00488459,0.010911 0.0109108,0.010911 h 0.23348825 c 0.006026,0 0.0109108,-0.00488 0.0109108,-0.010911 V 0.9808639 c 0,-0.006026 -0.004885,-0.0109106 -0.0109108,-0.0109106 H 0.09492939 V 0.08838018 h 0.14946966 c 0.006026,0 0.0109108,-0.0048846 0.0109108,-0.0109108 V 0.0109108 C 0.25530985,0.00488459 0.25042528,0 0.24439905,0 Z"
/>
<path class="letter" d="m 2.7119887,0.19767954 v 0.66118329 h 0.091908 V 0.65903671 l 0.10074,-0.11438585 0.2229876,0.31421197 H 3.2295952 L 2.9643042,0.48831968 3.2163327,0.19767954 H 3.1166452 L 2.8038964,0.55844672 V 0.19767954 Z" />
<path class="dot" d="M 2.5278862,0.26101136 V 0.37130883 H 2.6445688 V 0.26101136 Z" />
<path class="dot" d="M 2.5278862,0.67497886 V 0.78526262 H 2.6445688 V 0.67497886 Z" />
<path class="letter" d="m 1.9277516,0.19767954 v 0.65902298 h 0.080669 V 0.35346597 L 2.373932,0.85670252 H 2.455517 V 0.19767954 H 2.374848 V 0.72484312 L 1.9974821,0.19767954 Z" />
<path class="letter" d="m 1.3266188,0.19767954 v 0.65902298 h 0.091607 V 0.55635493 h 0.3199405 v 0.30034759 h 0.091607 V 0.19767954 H 1.7381662 V 0.48890758 H 1.4182257 V 0.19767954 Z" />
<path
class="letter"
d="m 0.96523631,0.19152683 c -0.0552983,0 -0.10072679,0.005925 -0.13627565,0.0177745 -0.035245,0.0118496 -0.062738,0.0285517 -0.0824873,0.050124 -0.0197495,0.0215724 -0.0335832,0.0469475 -0.0414828,0.0761158 -0.007596,0.0291683 -0.0113895,0.0612188 -0.0113895,0.0961598 v 0.2073736 c 0,0.0343335 0.003954,0.0656333 0.0118544,0.0938902 0.0079,0.0282566 0.0217198,0.0527067 0.0414691,0.0733677 0.0197495,0.020357 0.0472423,0.0361613 0.0824873,0.0474031 0.0355489,0.0112419 0.0808303,0.0168584 0.13582454,0.0168584 0.0528673,0 0.0964593,-0.005925 0.1307926,-0.0177744 0.034334,-0.0121536 0.061076,-0.0288557 0.080218,-0.0501241 0.019446,-0.0215725 0.032971,-0.0468001 0.040567,-0.0756647 0.0079,-0.0291681 0.011841,-0.0606156 0.011841,-0.0943413 V 0.43763495 c 0,-0.0349411 -0.00394,-0.0673001 -0.011841,-0.097076 C 1.209214,0.31078305 1.19584,0.28480475 1.176698,0.26262465 1.157556,0.24014085 1.130828,0.22266085 1.096494,0.21020365 1.062161,0.19774635 1.018408,0.19152675 0.96523631,0.19152683 Z m 0,0.0738324 c 0.038891,0 0.0709414,0.004397 0.0961598,0.0132078 0.025522,0.008507 0.044517,0.0235475 0.056974,0.0451199 0.012457,0.0215723 0.018677,0.0519609 0.018677,0.0911557 v 0.23835583 c 0,0.038891 -0.00622,0.0686763 -0.018677,0.089337 -0.012154,0.020661 -0.031001,0.0349368 -0.056523,0.0428367 -0.025218,0.007596 -0.057416,0.0113892 -0.0966109,0.0113892 -0.038891,0 -0.0717058,-0.003793 -0.0984434,-0.0113892 -0.0267375,-0.0079 -0.0469521,-0.0221757 -0.0606247,-0.0428367 -0.0136725,-0.0206607 -0.020509,-0.0504461 -0.020509,-0.089337 V 0.41484261 c 0,-0.0391948 0.006837,-0.0695834 0.0205091,-0.0911557 0.0139766,-0.0215724 0.0343383,-0.0366124 0.061076,-0.0451199 0.0267374,-0.008811 0.0594048,-0.0132078 0.0979921,-0.0132078 z"
/>
<path
class="letter"
d="m 0.27147094,0.19767954 v 0.0751997 h 0.25202852 v 0.38556931 c 0,0.0425372 -0.009718,0.0750435 -0.0291639,0.0975272 -0.0194455,0.0221802 -0.050893,0.0332657 -0.0943415,0.0332657 -0.02218,0 -0.0445122,-0.002117 -0.0669961,-0.006371 -0.0224839,-0.004557 -0.0423899,-0.009571 -0.0597086,-0.0150399 -0.0173186,-0.005773 -0.0296242,-0.0103306 -0.0369162,-0.0136728 l -0.025062,0.0706332 c 0.0100266,0.005165 0.025214,0.0109426 0.045571,0.0173233 0.020357,0.006077 0.043306,0.0112373 0.0688283,0.015491 0.025826,0.004558 0.051496,0.006837 0.0770181,0.006837 0.0741361,0 0.12806301,-0.0183779 0.1617888,-0.0551419 0.0337258,-0.037068 0.050589,-0.086746 0.050589,-0.14903239 V 0.19767954 Z"
/>
<path
class="braket"
d="M 3.195181,0 C 3.189151,0 3.18427,0.00488456 3.18427,0.0109108 v 0.06655858 c 0,0.0060262 0.00488,0.0109108 0.010911,0.0109108 H 3.3446507 V 0.96995331 H 3.195181 c -0.00603,0 -0.010911,0.004884 -0.010911,0.0109106 v 0.0665586 c 0,0.00603 0.00488,0.010911 0.010911,0.010911 h 0.2334884 c 0.00603,0 0.010911,-0.00488 0.010911,-0.010911 V 0.0109108 C 3.4395802,0.00488456 3.4346955,0 3.4286694,0 Z"
/>
</svg>
</button>
<button type="button" class="menu_btn" action-menu>
<div class="btn_construction">
<div class="bar top_bar"></div>
<div class="bar center_bar"></div>
<div class="bar bottom_bar"></div>
</div>
</button>
<div class="menu_controler nav_menu_controler">
<button type="button" class="nav_btn main_nav_btn" name="hero_section" section-action section-ref="hero">
<span class="icon_container icon_btn">
<svg class="icon_svg nav_menu_icon_svg" id="home_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<title>Inicio</title>
<path class="cls-1" d="M3 13h1v7c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-7h1a1 1 0 0 0 .707-1.707l-9-9a.999.999 0 0 0-1.414 0l-9 9A1 1 0 0 0 3 13zm7 7v-5h4v5h-4zm2-15.586 6 6V15l.001 5H16v-5c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H6v-9.586l6-6z"></path>
</svg>
</span>
<span class="label_btn" change es="Inicio" en="Home">Inicio</span>
</button>
<button type="button" class="nav_btn about_nav_btn" name="about_section" section-action section-ref="about">
<span class="icon_container icon_btn">
<svg class="icon_svg nav_menu_icon_svg" class="about_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<title>Acerca de</title>
<circle class="cls-1" cx="12" cy="4" r="2"></circle>
<path class="cls-1" d="M15 22V9h5V7H4v2h5v13h2v-7h2v7z"></path>
</svg>
</span>
<span class="label_btn" change es="Quien Soy" en="About Me">Quien Soy</span>
</button>
<button type="button" class="nav_btn skills_nav_btn" name="skills_section" section-action section-ref="skills">
<span class="icon_container icon_btn">
<svg class="icon_svg nav_menu_icon_svg" id="skills_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<title>Habilidades</title>
<path
class="cls-1"
d="M9.973 18H11v-5h2v5h1.027c.132-1.202.745-2.194 1.74-3.277.113-.122.832-.867.917-.973a6 6 0 1 0-9.37-.002c.086.107.807.853.918.974.996 1.084 1.609 2.076 1.741 3.278zM10 20v1h4v-1h-4zm-4.246-5a8 8 0 1 1 12.49.002C17.624 15.774 16 17 16 18.5V21a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2.5C8 17 6.375 15.774 5.754 15z"
/>
</svg>
</span>
<span class="label_btn" change en="Skills" es="Habilidades">Habilidades</span>
</button>
<button type="button" class="nav_btn services_nav_btn" name="services_section" section-action section-ref="services">
<span class="icon_container icon_btn">
<svg class="icon_svg nav_menu_icon_svg" id="services_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<title>Servicios</title>
<path
class="cls-1"
d="M21 8a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-1.062A8.001 8.001 0 0 1 12 23v-2a6 6 0 0 0 6-6V9A6 6 0 1 0 6 9v7H3a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1.062a8.001 8.001 0 0 1 15.876 0H21zM7.76 15.785l1.06-1.696A5.972 5.972 0 0 0 12 15a5.972 5.972 0 0 0 3.18-.911l1.06 1.696A7.963 7.963 0 0 1 12 17a7.963 7.963 0 0 1-4.24-1.215z"
/>
</svg>
</span>
<span class="label_btn" change en="Services" es="Servicios">Servicios</span>
</button>
<button type="button" class="nav_btn portfolio_nav_btn" name="portfolio_section" section-action section-ref="portfolio">
<span class="icon_container icon_btn">
<svg class="icon_svg nav_menu_icon_svg" id="portfolio_icon_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>Portafolio</title>
<path class="cls-1" d="M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM5 19V5h14l.002 14H5z"></path>
<path class="cls-1" d="m10 14-1-1-3 4h12l-5-7z"></path>
</svg>
</span>
<span class="label_btn" change en="Portfolio" es="Portafolio">Portafolio</span>
</button>
<button type="button" class="nav_btn contact_nav_btn" name="contact_section" section-action section-ref="contact">
<span class="icon_container icon_btn">
<svg class="icon_svg nav_menu_icon_svg" id="contact_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<title>Contacto</title>
<path class="cls-1" d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455zm-.692-2H20V5H4v13.385L5.763 17zM11 10h2v2h-2v-2zm-4 0h2v2H7v-2zm8 0h2v2h-2v-2z" />
</svg>
</span>
<span class="label_btn" change en="Contact" es="Contacto">Contacto</span>
</button>
<button type="button" class="nav_btn legals_nav_btn" name="legals_section" section-action section-ref="legals">
<span class="icon_container icon_btn">
<svg class="icon_svg nav_menu_icon_svg" id="legals_icon_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
class="clr-1"
d="M20 2C20.5523 2 21 2.44772 21 3V6.757L19 8.757V4H5V20H19V17.242L21 15.242V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20ZM21.7782 8.80761L23.1924 10.2218L15.4142 18L13.9979 17.9979L14 16.5858L21.7782 8.80761ZM13 12V14H8V12H13ZM16 8V10H8V8H16Z"
></path>
</svg>
</span>
<span class="label_btn" change en="Legals" es="Legales">Legales</span>
</button>
<button type="button" class="nav_btn theme_btn" name="theme_btn" aria-label="Button to change color scheame in page" theme-btn>
<div class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" icon="theme" icon-theme="dark" hidden="false">
<path d="M11.3807 2.01886C9.91573 3.38768 9 5.3369 9 7.49999C9 11.6421 12.3579 15 16.5 15C18.6631 15 20.6123 14.0843 21.9811 12.6193C21.6613 17.8537 17.3149 22 12 22C6.47715 22 2 17.5228 2 12C2 6.68514 6.14629 2.33869 11.3807 2.01886Z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" icon="theme" icon-theme="light" hidden="true">
<path
d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"
></path>
</svg>
</div>
</button>
<button type="button" class="nav_btn sound_btn" name="sound_btn" aria-label="Button to change color scheame in page" sound-btn>
<div class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" icon="sound" icon-sound="on" hidden="true">
<path
d="M8.88889 16H5C4.44772 16 4 15.5523 4 15V9.00001C4 8.44772 4.44772 8.00001 5 8.00001H8.88889L14.1834 3.66815C14.3971 3.49329 14.7121 3.52479 14.887 3.73851C14.9601 3.82784 15 3.93971 15 4.05513V19.9449C15 20.221 14.7761 20.4449 14.5 20.4449C14.3846 20.4449 14.2727 20.405 14.1834 20.3319L8.88889 16ZM18.8631 16.5911L17.4411 15.169C18.3892 14.4376 19 13.2901 19 12C19 10.5697 18.2493 9.31469 17.1203 8.6076L18.5589 7.169C20.0396 8.2616 21 10.0187 21 12C21 13.8422 20.1698 15.4904 18.8631 16.5911Z"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" icon="sound" icon-sound="off" hidden="false">
<path
d="M5.88889 16H2C1.44772 16 1 15.5523 1 15V9.00001C1 8.44772 1.44772 8.00001 2 8.00001H5.88889L11.1834 3.66815C11.3971 3.49329 11.7121 3.52479 11.887 3.73851C11.9601 3.82784 12 3.93971 12 4.05513V19.9449C12 20.221 11.7761 20.4449 11.5 20.4449C11.3846 20.4449 11.2727 20.405 11.1834 20.3319L5.88889 16ZM20.4142 12L23.9497 15.5355L22.5355 16.9498L19 13.4142L15.4645 16.9498L14.0503 15.5355L17.5858 12L14.0503 8.46447L15.4645 7.05026L19 10.5858L22.5355 7.05026L23.9497 8.46447L20.4142 12Z"
></path>
</svg>
</div>
</button>
<button type="button" class="nav_btn lang_btn" name="lang_btn">
<span class="label_btn label_lang" change es="ES" en="EN">ES</span>
</button>
</div>
</div>
</nav>
<div class="section_divider" divider>
<figure class="content" quote>
<div class="quote_container">
<span class="quote_icon quote_start">
<span class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
</svg>
</span>
</span>
<q class="quote" change es="No tengo talentos especiales. Sólo soy apasionadamente curioso" en="I have no special talent. I'm just passionately curious"></q>
<span class="quote_icon quote_end">
<span class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z" />
</svg>
</span>
</span>
</div>
<figcaption class="author_container">
<span class="author"><i>Albert Einstein</i></span>
<span class="author_info" change es="Premio novel de física" en="Nobel prize in physics"></span>
</figcaption>
</figure>
</div>
<section class="section about_section" id="about_section">
<div class="section_content content flex flex_responsive">
<div class="about_salute responsive_content">
<div class="about_animation">
<div observer-full>
<h1 class="title_salute" id="title_salute" change es="Hola, soy" en="Hi, I'm" animation-text>Hola, soy</h1>
</div>
<div observer-full>
<h2 class="title_name" id="title_name" animation-text>Jonathan Grajeda<span class="title_effect">_</span></h2>
</div>
</div>
<p class="about_text">
<span change es="Disfruto de crear, el medio es indiferente, " en="I enjoy creating, in all kind of media, ">Disfruto de crear, el medio es indiferente, </span>
<span class="accent_text" key="illustration" change es="ilustrar" en="illustration">ilustrar</span>
<span change es="una de mis mayores pasiones, " en="one of my biggest passions, ">una de mis mayores pasiones, </span>
<span class="accent_text" key="design" change es="Diseño" en="design">diseño</span>
<span change es="mi profesión, aunque ahora estoy muy interesado en" en="my profession, currently I've interest in ">mi profesión, aunque ahora estoy muy interesado en</span>
<span class="accent_text" key="dev" change es="desarrollo / web" en="development / web">desarrollo / web</span>
<span change es=", me gusta hacer proyectos originales y unicos." en=", I like to do original and unique projects">, ya que me gustan los proyectos interactivos y diferentes.</span>
</p>
</div>
<div class="about_img responsive_content">
<picture>
<img src="./src//img//photos/johnFoto.png" />
</picture>
<div class="social_btns_container">
<button type="button" class="icon_container animated_social_btn href_btn" link-ref="https://www.behance.net/jg_john_design">
<svg class="icon_svg social_icon_svg behance_icon_svg" name="behance_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 25">
<title>Behance</title>
<path
class="cls-1"
d="M10.1,11.63a2.44,2.44,0,0,1,2.12,1,3.78,3.78,0,0,1,.78,2v1A5.31,5.31,0,0,1,12.5,18a3.35,3.35,0,0,1-1.25,1.45,6.41,6.41,0,0,1-1.47.68,6.32,6.32,0,0,1-1.23.27H0V4.28H8.05a4.52,4.52,0,0,1,3.17,1.1,4,4,0,0,1,1.23,3.19,3.28,3.28,0,0,1-.58,2,2.16,2.16,0,0,1-1.18.92l-.59.11M3.55,7.13v3.6H7.8a1.32,1.32,0,0,0,1-.38,2.35,2.35,0,0,0,.35-1.52,2.19,2.19,0,0,0-.27-1.18.94.94,0,0,0-.58-.47l-.25,0H3.55m4.3,10.39c1.23,0,1.85-.69,1.85-2.1a2.54,2.54,0,0,0-.4-1.54,1.27,1.27,0,0,0-.8-.6l-.45,0H3.55v4.29h4.3M19.54,8.38a5.63,5.63,0,0,1,2.95.72,4,4,0,0,1,1.67,1.75,8.65,8.65,0,0,1,.68,2.05A7,7,0,0,1,25,14.62l0,.76h-8a2.86,2.86,0,0,0,.68,2,1.93,1.93,0,0,0,1.37.7l.65,0a3.13,3.13,0,0,0,1.77-.42,1.3,1.3,0,0,0,.67-.83l.05-.45h2.7a3.75,3.75,0,0,1-1.32,3.11,4.55,4.55,0,0,1-2.62,1.09l-1.35,0a6.85,6.85,0,0,1-3.05-.62,4.14,4.14,0,0,1-1.79-1.55,8.67,8.67,0,0,1-.83-1.83,5.36,5.36,0,0,1-.27-1.5v-.64c0-.17,0-.4,0-.68A7.92,7.92,0,0,1,14,12.4a6.37,6.37,0,0,1,.9-1.87,5.32,5.32,0,0,1,1.8-1.48,5.85,5.85,0,0,1,2.87-.67M22,13.22c0-.07,0-.15,0-.27s-.07-.32-.15-.6a3.21,3.21,0,0,0-.33-.75,1.78,1.78,0,0,0-.7-.6,2.28,2.28,0,0,0-1.15-.28,2.5,2.5,0,0,0-1.74.63,2.42,2.42,0,0,0-.85,1.27l-.16.6H22m.65-8V7.18h-6.4V5.23h6.4"
/>
</svg>
</button>
<button type="button" class="icon_container animated_social_btn href_btn" link-ref="https://github.com/JohnMcKrazy">
<svg class="icon_svg social_icon_svg gitHub_icon_svg" name="gitHub_icon_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 25 25">
<title>GitHub</title>
<path
class="cls-1"
d="M12.5.31A12.5,12.5,0,0,0,8.55,24.67c.62.12.85-.27.85-.6s0-1.28,0-2.33c-3.48.76-4.22-1.47-4.22-1.47a3.26,3.26,0,0,0-1.38-1.83c-1.14-.78.08-.76.08-.76A2.63,2.63,0,0,1,5.79,19a2.66,2.66,0,0,0,3.64,1,2.68,2.68,0,0,1,.79-1.67C7.44,18,4.52,17,4.52,12.16A4.85,4.85,0,0,1,5.81,8.8a4.49,4.49,0,0,1,.12-3.31S7,5.16,9.37,6.77a12.56,12.56,0,0,1,3.13-.42,12.56,12.56,0,0,1,3.13.42C18,5.16,19.07,5.49,19.07,5.49a4.49,4.49,0,0,1,.12,3.31,4.84,4.84,0,0,1,1.28,3.36c0,4.8-2.92,5.85-5.7,6.16a3,3,0,0,1,.84,2.32c0,1.67,0,3,0,3.43s.23.72.86.6A12.5,12.5,0,0,0,12.5.31Z"
/>
<path class="cls-2" d="M4.73,18.26c0,.06-.12.08-.21,0s-.14-.12-.11-.18.12-.09.21,0,.15.12.11.19Zm-.15-.12" />
<path class="cls-2" d="M5.24,18.82c-.06.06-.18,0-.25-.06a.18.18,0,0,1,0-.26c.06-.05.17,0,.26.06a.19.19,0,0,1,0,.26Zm-.12-.13" />
<path class="cls-2" d="M5.73,19.54c-.07.05-.2,0-.28-.11a.22.22,0,0,1,0-.3c.07-.05.2,0,.28.11s.07.25,0,.3Zm0,0" />
<path class="cls-2" d="M6.41,20.24a.24.24,0,0,1-.32,0C6,20.09,6,19.94,6,19.87s.21-.06.32.05a.24.24,0,0,1,.07.32Zm0,0" />
<path class="cls-2" d="M7.34,20.64c0,.1-.17.14-.31.1s-.24-.16-.21-.26.17-.14.32-.1.23.16.2.26Zm0,0" />
<path class="cls-2" d="M8.36,20.71c0,.11-.11.19-.26.2s-.27-.08-.27-.19.11-.19.26-.19.27.08.27.18Zm0,0" />
<path class="cls-2" d="M9.32,20.55c0,.1-.09.21-.24.23s-.28,0-.3-.13.09-.21.24-.23.28,0,.3.13Zm0,0" />
</svg>
</button>
</div>
</div>
</div>
</section>
<div class="section_divider" divider>
<figure class="content" quote>
<div class="quote_container">
<span class="quote_icon quote_start">
<span class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
</svg>
</span>
</span>
<q class="quote" change es="Nunca trato de probar nada a nadie, quiero probarme algo a mi mismo" en="I never try to prove anything to anyone, I want to prove something to myself."></q>
<span class="quote_icon quote_end">
<span class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z" />
</svg>
</span>
</span>
</div>
<figcaption class="author_container">
<span class="author"><i>Kobe Bryant</i></span>
<span class="author_info" change es="Ex campeón de la NBA" en="NBA former champion">Ex campeón de la NBA</span>
</figcaption>
</figure>
</div>
<section class="section skills_section" id="skills_section">
<div class="section_content content">
<div observer-full>
<h1 class="title_section" id="title_skills" change es="Habilidades" en="Skills" animation-text>Habilidades</h1>
</div>
<div class="skills_icon_container design_skills_container">
<!--? SKILLS ICONS-->
<h2 class="subtitle_section" change es="Herramientas de Diseño" en="Design Tools">Herramientas de Diseño</h2>
<div class="icons_container" ref="design" skills-container="design"></div>
</div>
<div class="skills_icon_container dev_skills_container">
<h2 class="subtitle_section" change es="Herramientas de Desarrollo" en="Developer Tools">Herramientas de Desarrollo</h2>
<!--? SKILLS ICONS-->
<div class="icons_container swipe_animation_container_half" ref="dev" skills-container="dev"></div>
</div>
<h2 class="subtitle_section" change es="Certificaciones" en="Certifications">Certificaciones</h2>
<div class="cards_container certification_container" certification-container></div>
</div>
</section>
<div class="section_divider" divider>
<figure class="content" quote>
<div class="quote_container">
<span class="quote_icon quote_start">
<span class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
</svg>
</span>
</span>
<q class="quote" change es="No es acerca de cuantas horas entrenas, es acerca de cuantas horas tu mente está presente en el entrenamiento" en="It's not about how many hours you train, it's about how many hours your mind is present in training.">
No es acerca de cuantas horas entrenas, es acerca de cuantas horas tu mente está presente en el entrenamiento
</q>
<span class="quote_icon quote_end">
<span class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z" />
</svg>
</span>
</span>
</div>
<figcaption class="author_container">
<span class="author"><i>Kobe Bryant</i></span>
<span class="author_info" change es="Ex campeón de la NBA" en="NBA former champion">Ex campeón de la NBA</span>
</figcaption>
</figure>
</div>
<section class="section services_section" id="services_section">
<div class="section_content content">
<!--~~TITLE SECTION-->
<div observer-full>
<h1 class="title_section animation_up" id="title_services" change es="Servicios" en="Services">Servicios</h1>
</div>
<div class="grid_container">
<div class="cards_service_container">
<article class="card service_card" animation-card>
<div class="bg_card graphic_design_service_bg">
<img src="https://images.pexels.com/photos/1601773/pexels-photo-1601773.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" loading="lazy" />
</div>
<div class="info_card">
<h2 class="project-tile" change es="Diseño Gráfico" en="Graphic Design">Diseño Gráfico</h2>
<p
class="info"
change
es="Mi enfoque en el diseño gráfico se basa en la funcionalidad y la estética para transformar conceptos en imágenes efectivas. Mi trabajo se centra en transmitir el mensaje de manera clara y visualmente atractiva."
en="My approach to graphic design is based on functionality and aesthetics to transform concepts into effective images. My work focuses on conveying the message in a clear and visually attractive way."
>
Mi enfoque en el diseño gráfico se basa en la funcionalidad y la estética para transformar conceptos en imágenes efectivas. Mi trabajo se centra en transmitir el mensaje de manera clara y visualmente atractiva.
</p>
</div>
</article>
<article class="card service_card" animation-card>
<div class="bg_card">
<img src="https://images.pexels.com/photos/16516/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" loading="lazy" />
</div>
<div class="info_card">
<h2 class="project-tile" change es="Ilustración" en="Illustration">Ilustración</h2>
<p class="info" change es="Transformo tus ideas en ilustraciones únicas y personalizadas. Desde conceptos abstractos hasta diseños detallados." en="I transform your ideas into unique and personalized illustrations. From abstract concepts to detailed designs.">
Transformo tus ideas en ilustraciones únicas y personalizadas. Desde conceptos abstractos hasta diseños detallados.
</p>
</div>
</article>
<article class="card service_card" animation-card>
<div class="bg_card UX-UI_service_bg">
<img src="https://images.pexels.com/photos/196645/pexels-photo-196645.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" loading="lazy" />
</div>
<div class="info_card">
<h2 class="project-tile">UX/UI</h2>
<p
class="info"
change
es="La creación de pagina web es importante, asi como es importante darle al usuario una buena experiencia, facilidad de uso, y que tu contenido sea mejor visto por tus clientes."
en="Creating a website is important, just as it is important to give the user a good experience, ease of use, and for your content to be better seen by your clients."
>
La creación de pagina web es importante, asi como es importante darle al usuario una buena experiencia, facilidad de uso, y que tu contenido sea mejor visto por tus clientes.
</p>
</div>
</article>
<article class="card service_card" animation-card>
<div class="bg_card">
<img src="https://images.pexels.com/photos/285814/pexels-photo-285814.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" loading="lazy" />
</div>
<div class="info_card">
<h2 class="project-tile" change es="Desarrollo Front-End" en="Front-End Devlopment">Desarrollo Front-End</h2>
<p class="info" change es="Dentro del desarrollo de programación, darle estilo y formato a las ideas es algo que me apaciona." en="Within programming development, giving style and format to ideas is something that excites me.">
Dentro del desarrollo de programación, darle estilo y formato a las ideas es algo que me apaciona.
</p>
</div>
</article>
</div>
</div>
</div>
</section>
<div class="section_divider" divider>
<figure class="content" quote>
<div class="quote_container">
<span class="quote_icon quote_start">
<span class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
</svg>
</span>
</span>
<q class="quote" change es="El diseño no es solo cómo se ve y se siente. El diseño es cómo funciona." en="The design it's not just seeing and feeling. It's about how it works."> El diseño no es solo cómo se ve y se siente. El diseño es cómo funciona. </q>
<span class="quote_icon quote_end">
<span class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z" />
</svg>
</span>
</span>
</div>
<figcaption class="author_container">
<span class="author"><i>Saul Bass</i></span>
<span class="author_info" change es="Diseñador gráfico / Director de cine" en="Graphic designer / Movie Director"> Diseñador gráfico / Director de cine</span>
</figcaption>
</figure>
</div>
<section class="section portfolio_section" id="portfolio_section">
<div class="section_content content">
<div observer-full>
<h1 class="title_section" id="title_portfolio" change es="Portafolio" en="Portfolio" animation-text>Portafolio</h1>
</div>
<div class="cards_presentation">
<h2 class="subtitle_section" change es="Proyectos Destacados" en="Top Projects">Proyectos Destacados</h2>
<button type="button" class="portfolio_btn" name="portfolio_modal">
<span class="label_btn" change es="Ver todo" en="See All" modal-btn="portfolio">Ver todo</span>
</button>
</div>
<div class="cards_container cards_hot_container" hot-container></div>
</div>
</section>
<div class="section_divider" divider>
<figure class="content" quote>
<div class="quote_container">
<span class="quote_icon quote_start">
<span class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
</svg>
</span>
</span>
<q class="quote" change es="Sin requerimientos o diseño, programar sólo es el arte de agregar errores a un archivo vacío." en="Without requirements or design, programming is just the art of adding errors to an empty file.">
Sin requerimientos o diseño, programar sólo es el arte de agregar errores a un archivo vacío.
</q>
<span class="quote_icon quote_end">
<span class="icon_container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z" />
</svg>
</span>
</span>
</div>
<figcaption class="author_container">
<span class="author"><i>Louis Srygley</i></span>
<span class="author_info" change es="Arquitecto de software" en="Software architect"> Arquitecto de software </span>
</figcaption>
</figure>
</div>
<section class="section with_bg contact_section" id="contact_section">
<picture class="bg_section">
<img src="./src/img/backgrounds/contact_day.webp" alt="background in light theme" bg-img="light" hidden />
<img src="./src/img/backgrounds/contact_night.webp" alt="background in dark theme" bg-img="dark" />
<span class="overlay"></span>
</picture>
<div class="section_content content">
<div observer-full>
<h1 class="title_section" id="title_contact" change es="Contacto" en="Contact" animation-text>Contacto</h1>
</div>
<h2 class="subtitle_section" change es="Espero me permitas crear proyectos interesantes con tus ideas." en="I hope you allow me to create interesting projects with your ideas">Espero me permitas crear proyectos interesantes con tus ideas.</h2>
<form class="form contact_form" id="contact_form">
<h3 change es="Envia correo" en="Send Email">Envia correo</h3>
<div class="input_container">
<label for="body_input_name" change es="Nombre" en="Name">Nombre</label>
<input type="text" placeholder="Escribe tu Nombre" id="body_input_name" name="name" class="input_name" change-input es="Escribe Tu Nombre" en="Write Your Name" autocomplete="off" required input-name />
</div>
<div class="input_container">
<label for="body_input_last_name" change es="Apellido" en="Last Name">Apellido</label>
<input type="text" placeholder="Escribe tu Apellido" id="body_input_last_name" name="last_name" class="input_last_name" change-input es="Escribe tu Apellido" en="Write Your Last name" autocomplete="off" input-email />
</div>
<div class="input_container">
<label for="body_input_email">Email</label>
<input type="email" placeholder="Escribe tu Email" id="body_input_email" name="email" class="input_email" change-input es="Escribe tu Email" en="Write your Name" autocomplete="off" required input-email />
</div>
<div class="input_container last">
<label for="body_input_textarea" change es="Descripción" en="Description">Descripción</label>
<textarea placeholder="Comparteme tu idea" id="body_input_textarea" name="description" class="input_description" change-input es="Comparteme de tu idea" en="Share me your idea" required input-description></textarea>
</div>
<input type="hidden" name="access_key" value="5dfd5c33-4542-492d-a32f-194035787e90" />
<div class="submit_container">
<button type="submit" id="contact_form_send_btn" form="body_form" class="btn send_btn" send-form>
<span class="label_btn" change es="Enviar" en="Send">Enviar</span>
</button>
</div>
<div class="form_response_container" form-response-container hidden="true" show="false">
<p class="form_response" form-response></p>
</div>
</form>
</div>
</section>
<footer class="section legals_section" id="legals_section">
<div class="content footer_content">
<div class="flex flex_responsive">
<div class="swipe_animation_illustration desk_icon_container responsive_content">
<!-- ! DESK ICON START -->
<svg class="deskwork_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<g class="desk_floor">
<rect class="cls-61" x="5.71" y="788.59" width="988.09" height="36.98" />
<path class="cls-1" d="m5.71,825.57c1.97,36.67-2.83,166.98,208.07,171.74,231.15,5.22,235.38-73.53,313.88-90.78,151.4-33.27,250.27,54.32,332.83,39.91,80.68-14.09,138.71-87.79,133.54-120.87H5.71Z" />
</g>
<rect class="cls-51" x="203.03" y="539.75" width="594.72" height="284.59" transform="translate(1000.77 1364.1) rotate(-180)" />
<g class="desk_portfolio svg_btn" name="portfolio_modal" modal-btn="portfolio">
<path
class="cls-19"
d="m322.75,611.31h-50.44c-4.2,0-7.63,3.44-7.63,7.63v26.18c0,4.2,3.44,7.63,7.63,7.63h50.44c4.2,0,7.63-3.44,7.63-7.63v-26.18c0-4.2-3.44-7.63-7.63-7.63Zm1.74,32.22c0,4.2-3.44,7.63-7.63,7.63h-38.65c-4.2,0-7.63-3.44-7.63-7.63v-17.61c0-4.2,3.44-7.63,7.63-7.63h38.65c4.2,0,7.63,3.44,7.63,7.63v17.61Z"
/>
<rect class="cls-19" x="143.93" y="642.68" width="307.19" height="193.8" rx="12" ry="12" />
<rect class="cls-50" x="150.91" y="650.16" width="293.25" height="178.83" rx="12" ry="12" />
<polygon class="cls-19" points="150.91 647.65 224.22 748.64 370.84 748.64 444.16 647.65 150.91 647.65" />
<path
class="cls-19"
d="m302.58,728.54h-10.09c-4.2,0-7.63,3.44-7.63,7.63v24.93c0,4.2,3.44,7.63,7.63,7.63h10.09c4.2,0,7.63-3.44,7.63-7.63v-24.93c0-4.2-3.44-7.63-7.63-7.63Zm5.01,28.96c0,4.2-3.44,7.63-7.63,7.63h-4.85c-4.2,0-7.63-3.44-7.63-7.63v-17.72c0-4.2,3.44-7.63,7.63-7.63h4.85c4.2,0,7.63,3.44,7.63,7.63v17.72Z"
/>
</g>
<g class="desk_tablet svg_btn">
<path class="cls-69" d="m491.57,407.34c-96.8,51.05-54.9,99.37-43.69,125.9,9.2,21.78,52.12,87.24,117.03,32.11,30.74-26.11,26.55-101.76,102.75-114.14,93.88-15.25-23.82-81.43,32.65-86.76" />
<path class="cls-19" d="m711.02,366.59l-13.12,2.79c-.97-.39-3.02-3.59-2.63-4.56l3.84-3.58c.39-.97,1.5-1.45,2.47-1.06l13.12-2.79c.97.39,1.45,1.5,1.06,2.47l-2.27,5.68c-.39.97-1.5,1.45-2.47,1.06Z" />
<path class="cls-6" d="m709.55,364.16l-13.12,2.79c-.97-.39-1.45-1.5-1.06-2.47l2.1-5.26c.39-.97,2.01-1.76,2.68-1.85,3.33-.42,13.67-3.11,13.67-3.11.97.39.85,2.18.46,3.15l-2.27,5.68c-.39.97-1.5,1.45-2.47,1.06Z" />
<g class="tablet_conection">
<g>
<ellipse class="cls-32" cx="795.65" cy="237.47" rx="26.8" ry="40.79" transform="translate(351.92 939.3) rotate(-74.31)" />
<rect class="cls-6" x="829.64" y="191.87" width="15.45" height="98.53" rx="5.28" ry="5.28" transform="translate(533.31 1057.77) rotate(-85.64)" />
<circle class="cls-32" cx="884.35" cy="244.6" r="19.76" />
<rect class="cls-6" x="852.77" y="231.3" width="15.45" height="98.53" rx="5.28" ry="5.28" transform="translate(324.99 -449.09) rotate(35.67)" />
</g>