-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
643 lines (604 loc) · 46 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<link rel="icon" href="img/Picture0.1-.png">
<title>Portfolio</title>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://kit.fontawesome.com/1cdd3ac085.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css">
</head>
<body>
<header>
<span class="openMenu"><i class="fa-solid fa-bars"></i></span>
<nav class="navbar glass">
<span class="closeMenu"><i class="fa-solid fa-xmark"></i></span>
<ul class="menu">
<li class="navbar-item"><a href="#Home" class="a scroll active" id="nav-home">Inicio</a></li>
<span class="divider">•</span>
<li class="navbar-item"><a href="#Projects" class="a scroll" id="nav-projects">Proyectos</a></li>
<span class="divider">•</span>
<li class="navbar-item"><a href="#About" class="a scroll" id="nav-about">Sobre mí</a></li>
<span class="divider">•</span>
<li class="navbar-item">
<div id="language-toggle" class="language-toggle">
<span id="btn-es" class="lang-btn">Esp</span>
<span id="btn-en" class="lang-btn">Eng</span>
</div>
</li>
<span class="divider">•</span>
<li class="navbar-item">
<button id="theme-toggle" class="theme-toggle-B">
<i class="bx bx-moon"></i>
</button>
</li>
</ul>
</nav>
</header>
<main class="main-container" id="Home">
<div class="bento-container">
<div class="bento-item glass header">
<h1 id="main-title">¡Vamos a ver mi portafolio!</h1>
<h3 id="main-subtitle"><span class="text">Ingeniero en sistemas</span></h3>
<p id="main-description">Me encanta lo que hago porque me permite combinar mi creatividad con habilidades de comunicación visual y capacidad para resolver problemas.</p>
</div>
<div class="bento-item glass social-links">
<ul class="social-list">
<li>
<a target="_blank" href="https://www.instagram.com/javier_cea.30/" class="social-link instagram">
<i class='bx bxl-instagram' ></i>
</a>
<p>Instagram</p>
</li>
<li>
<a target="_blank" href="https://github.com/TechCea" class="social-link github">
<i class='bx bxl-github'></i>
</a>
<p>GitHub</p>
</li>
<li>
<a target="_blank" href="https://www.linkedin.com/in/carlos-javier-alarcon-cea-004019303/" class="social-link linkedin">
<i class='bx bxl-linkedin'></i>
</a>
<p>Linkedin</p>
</li>
<li>
<a href="#" class="social-link discord copyDiscordButton">
<i class="bx bxl-discord"></i>
</a>
<p>Discord</p>
</li>
</ul>
</div>
<div class="bento-item glass studies">
<div class="card studies">
<h3 id="studies-title">Estudios</h3>
<p id="studies-description">Estudiante de Ingeniería en Sistemas en la Universidad Católica de El Salvador (UNICAES)</p>
</div>
</div>
<div class="bento-item glass cv">
<div class="image-blur"></div> <!-- Capa para la imagen desenfocada -->
<a href="assets/CV Javier.pdf" download="CV Javier.pdf" class="descargar-cv glass-button" id="download-cv">
<span>Descargar CV</span>
</a>
</div>
<div class="bento-item glass scrum-card">
<i class='bx bxs-cog rotating-gear'></i>
<span id="scrum-title" class="scrum-title">Metodología Scrum</span>
<span id="scrum-text" class="scrum-text">Para el desarrollo de proyectos, utilizo metodologías Scrum.</span>
</div>
<div class="bento-item glass avatar">
<div class="image-container">
<img src="img/Picture0-dark.png" alt="Foto de Javier Alarcon" class="Foto" id="profile-picture">
</div>
</div>
<div class="bento-item glass contact">
<div class="contact-tag">
<i class="bx bx-message-rounded"></i> <!-- Replace this with your preferred icon -->
<span id="contact-tag-text">Contactar</span>
</div>
<p id="contact-description">Creando experiencias digitales únicas.<br>¡Hablemos sobre tu próximo proyecto!</p>
<div class="contact-buttons">
<a target="_blank" href="mailto:[email protected]" class="contact-button" id="contact-email">Envíame un Email</a>
<a target="_blank" href="http://t.me/TechCea" class="contact-button" id="contact-telegram">DM en Telegram</a>
</div>
</div>
<div class="bento-item glass Tittle">
<article>
<h2 class="h2-big" id="tittle-hey" data-aos="fade" data-aos-duration="3000">
Hey I'm
</h2>
<div class="intro">
<div class="title" data-aos="zoom-in" data-aos-delay="500" data-aos-duration="2000">
<h1>TechCea</h1>
</div>
</div>
</article>
</div>
<div class="bento-item glass Pixel">
<div class="content">
<div class="right">
<img src="img/Intro.gif" alt="">
</div>
<div class="left">
<div class="status">
<div class="status-dot"></div>
<h4 id="pixel-status">Disponibles para nuevos proyectos</h4>
</div>
<div class="tags-container">
<div class="tag">
<i class="bi bi-geo-alt"></i> El Salvador, Santa Ana
</div>
<div class="tag" id="pixel-title">
<i class="bi bi-mortarboard"></i> Systems Engineer
</div>
<div class="tag">
<i class="bi bi-building-gear"></i> Universidad Catolica de el Salvador
</div>
<div class="tag" id="pixel-specialty">
<i class="bi bi-laptop"></i> Web Applications
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<section class="Projects-Container" id="Projects">
<h1 class="Tittle-Content" id="projects-title">Major <span>Projects</span></h1>
<div class="bento-container">
<div class="bento-item Projects">
<div class="portfolio" id="portfolio" id="project">
<div class="main-text" id="project">
<article>
<div class="elements">
</div>
</article>
</div>
</div>
</div>
<div class="bento-item glass Banner">
<h1 id="banner-text">¡Te presento mi espacio creativo!</h1>
</div>
<div class="bento-item glass About">
<h3 id="about-title"> <span class="emoji">👈</span> Proyectos en los que estoy Trabajando</h3>
<p id="about-description"> A lo largo de mi carrera, he estado desarrollando proyectos innovadores y desafiantes, los cuales puedes explorar para conocer más sobre mi trabajo y las soluciones que he creado.<br> <strong>¡Descubre en qué estoy trabajando ahora y cómo estos proyectos están dando vida a mis ideas!</strong></p>
</div>
</div>
</section>
<section class="Skills-Container">
<h1 class="Tittle-Content" id="skills-title">My <span>Skills</span></h1>
<div class="container-group" >
<div class="container1">
<div class="bento-box glass2" id="bento-box">
<h2>Frontend</h2>
<div class="items">
<div class="item">
<svg fill="none" height="55" width="55" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 141.53199999999998"><path d="M10.383 126.894L0 0l124 .255-10.979 126.639-50.553 14.638z" fill="#e34f26"/><path d="M62.468 129.277V12.085l51.064.17-9.106 104.851z" fill="#ef652a"/><path d="M99.49 41.362l1.446-15.49H22.383l4.34 47.49h54.213L78.81 93.617l-17.362 4.68-17.617-5.106-.936-12.085H27.319l2.128 24.681 32 8.936 32.255-8.936 4.34-48.17H41.107L39.49 41.362z" fill="#fff"/></svg>
<span>HTML</span>
</div>
<div class="item">
<svg fill="none" height="55" width="55" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 141.53"><path d="M10.383 126.892L0 0l124 .255-10.979 126.637-50.553 14.638z" fill="#1b73ba"/><path d="M62.468 129.275V12.085l51.064.17-9.106 104.85z" fill="#1c88c7"/><path d="M100.851 27.064H22.298l2.128 15.318h37.276l-36.68 15.745 2.127 14.808h54.043l-1.958 20.68-18.298 3.575-16.595-4.255-1.277-11.745H27.83l2.042 24.426 32.681 9.106 31.32-9.957 4-47.745H64.765l36.085-14.978z" fill="#fff"/></svg>
<span>CSS</span>
</div>
<div class="item">
<i class='bx bxl-javascript' style="color: #F7DF1E;"></i>
<span>JavaScript</span>
</div>
<div class="item">
<svg width="60" height="60" viewBox="0 0 256 272" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M.1 45.522L125.908.697l129.196 44.028-20.919 166.45-108.277 59.966-106.583-59.169L.1 45.522z" fill="#E23237"/><path d="M255.104 44.725L125.908.697v270.444l108.277-59.866 20.919-166.55z" fill="#B52E31"/><path d="M126.107 32.274L47.714 206.693l29.285-.498 15.739-39.347h70.325l17.233 39.845 27.99.498-82.179-174.917zm.2 55.882l26.496 55.383h-49.806l23.31-55.383z" fill="#FFF"/></svg>
<span>Angular</span>
</div>
<div class="item">
<i class='bx bxl-bootstrap' style="color: #7952B3;"></i>
<span>Bootstrap</span>
</div>
</div>
</div>
</div>
<div class="container1">
<div class="bento-box glass2">
<h2 class="backend">Backend</h2>
<div class="items">
<div class="item">
<i class='bx bxl-php' style="color: #777BB4;"></i>
<span>PHP</span>
</div>
<div class="item">
<i class="fa-brands fa-laravel" style="color: #ff0000;"></i>
<span>Laravel</span>
</div>
<div class="item">
<svg preserveAspectRatio="xMidYMid" viewBox="0 0 256 288" width="64" height="64" xmlns="http://www.w3.org/2000/svg"><path d="m255.569 84.452376c-.002-4.83-1.035-9.098-3.124-12.761-2.052-3.602-5.125-6.621-9.247-9.008-34.025-19.619-68.083-39.178-102.097-58.81699995-9.17-5.294-18.061-5.101-27.163.269-13.543 7.98699995-81.348 46.83399995-101.553 58.53699995-8.321 4.817-12.37 12.189-12.372 21.771-.013 39.455 0 78.909-.013 118.365 0 4.724.991 8.909 2.988 12.517 2.053 3.711 5.169 6.813 9.386 9.254 20.206 11.703 88.02 50.547 101.56 58.536 9.106 5.373 17.997 5.565 27.17.269 34.015-19.64 68.075-39.198 102.105-58.817 4.217-2.44 7.333-5.544 9.386-9.252 1.994-3.608 2.987-7.793 2.987-12.518 0 0 0-78.889-.013-118.345" fill="#a179dc"/><path d="m128.182 143.241376-125.194 72.084c2.053 3.711 5.169 6.813 9.386 9.254 20.206 11.703 88.02 50.547 101.56 58.536 9.106 5.373 17.997 5.565 27.17.269 34.015-19.64 68.075-39.198 102.105-58.817 4.217-2.44 7.333-5.544 9.386-9.252z" fill="#280068"/><path d="m255.569 84.452376c-.002-4.83-1.035-9.098-3.124-12.761l-124.263 71.55 124.413 72.074c1.994-3.608 2.985-7.793 2.987-12.518 0 0 0-78.889-.013-118.345" fill="#390091"/><g fill="#fff"><path d="m201.892326 116.294008v13.473684h13.473684v-13.473684h6.736842v13.473684h13.473685v6.736842h-13.473685v13.473684h13.473685v6.736842h-13.473685v13.473684h-6.736842v-13.473684h-13.473684v13.473684h-6.736842v-13.473684h-13.473684v-6.736842h13.473684v-13.473684h-13.473684v-6.736842h13.473684v-13.473684zm13.473684 20.210526h-13.473684v13.473684h13.473684z"/><path d="m128.456752 48.625876c35.143771 0 65.827133 19.0862981 82.26181 47.4560675l-.16037-.2730675-41.348577 23.808283c-8.146656-13.793605-23.081479-23.1020873-40.213232-23.2937868l-.539631-.0030178c-26.125574 0-47.3060815 21.1793886-47.3060815 47.3049616 0 8.543615 2.2777748 16.552204 6.2389764 23.469476 8.1540981 14.235253 23.4829071 23.836606 41.0671051 23.836606 17.69277 0 33.108884-9.723357 41.221568-24.110835l-.197128.345313 41.286486 23.918037c-16.254398 28.129557-46.517408 47.156948-81.252701 47.536189l-1.058225.005774c-35.2545819 0-66.0252492-19.203824-82.4185122-47.72358-8.0029927-13.922969-12.5820476-30.064389-12.5820476-47.27698 0-52.4660524 42.5322682-94.99944 95.0005598-94.99944z"/></g></svg>
<span>C#</span>
</div>
<div class="item">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"><path d="M11.622 24.74s-1.23.748.855.962c2.51.32 3.847.267 6.625-.267a10.02 10.02 0 0 0 1.763.855c-6.25 2.672-14.16-.16-9.244-1.55zm-.8-3.473s-1.336 1.015.748 1.23c2.725.267 4.862.32 8.55-.427a3.26 3.26 0 0 0 1.282.801c-7.534 2.244-15.976.214-10.58-1.603zm14.747 6.09s.908.748-1.015 1.336c-3.58 1.07-15.014 1.39-18.22 0-1.122-.48 1.015-1.175 1.7-1.282.695-.16 1.07-.16 1.07-.16-1.23-.855-8.175 1.763-3.526 2.51 12.77 2.084 23.296-.908 19.983-2.404zM12.2 17.633s-5.824 1.39-2.084 1.87c1.603.214 4.755.16 7.694-.053 2.404-.214 4.81-.64 4.81-.64s-.855.374-1.443.748c-5.93 1.55-17.312.855-14.052-.748 2.778-1.336 5.076-1.175 5.076-1.175zm10.42 5.824c5.984-3.1 3.206-6.09 1.282-5.717-.48.107-.695.214-.695.214s.16-.32.534-.427c3.794-1.336 6.786 4.007-1.23 6.09 0 0 .053-.053.107-.16zm-9.83 8.442c5.77.374 14.587-.214 14.8-2.94 0 0-.427 1.07-4.755 1.87-4.916.908-11.007.8-14.587.214 0 0 .748.64 4.542.855z" fill="#4e7896"/><path d="M18.996.001s3.313 3.366-3.152 8.442c-5.183 4.114-1.175 6.465 0 9.137-3.046-2.725-5.236-5.13-3.74-7.373C14.294 6.893 20.332 5.3 18.996.001zm-1.7 15.335c1.55 1.763-.427 3.366-.427 3.366s3.954-2.03 2.137-4.542c-1.656-2.404-2.94-3.58 4.007-7.587 0 0-10.953 2.725-5.717 8.763z" fill="#f58219"/></svg>
<span>Java</span>
</div>
<div class="item">
<img src="img/icons/python-logo-only.png" alt="" width="64" height="64">
<span>Python</span>
</div>
</div>
</div>
</div>
</div>
<div class="container-group">
<div class="container1">
<div class="bento-box glass2">
<h2 class="learning" id="DataBase">DataBase</h2>
<div class="items">
<div class="item">
<img src="img/icons/Oracle.svg" alt="" width="64" height="64">
<span>Oracle</span>
</div>
<div class="item">
<img src="img/icons/SQLserver.svg" alt="" width="64" height="64">
<span>SQL Server</span>
</div>
<div class="item">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 204.8 105.765"><path d="M0 96.334h6.747V69.7l10.445 23.227c1.232 2.8 2.92 3.806 6.228 3.806s4.93-.995 6.164-3.806L40.03 69.7v26.644h6.748v-26.6c0-2.595-1.04-3.85-3.18-4.498-5.125-1.6-8.564-.216-10.12 3.244l-10.25 22.923L13.3 68.48c-1.492-3.46-4.995-4.844-10.12-3.244C1.038 65.885 0 67.14 0 69.734v26.6zm52.386-21.686h6.745v14.68c-.063.798.256 2.67 3.952 2.727 1.886.03 14.554 0 14.672 0v-17.48h6.76c.03 0-.007 23.834-.006 23.936.037 5.878-7.294 7.155-10.672 7.254H52.533v-4.54l21.342-.001c4.342-.46 3.83-2.617 3.83-3.344v-1.77h-14.34c-6.672-.06-10.92-2.973-10.973-6.323-.005-.3.144-14.995-.004-15.14z" fill="#00618a"/><path d="M89.716 96.334h19.398c2.27 0 4.477-.475 6.23-1.298 2.92-1.34 4.347-3.157 4.347-5.536v-4.93c0-1.947-1.622-3.763-4.8-4.974-1.687-.65-3.763-.995-5.774-.995h-8.175c-2.724 0-4.022-.822-4.346-2.638-.065-.216-.065-.4-.065-.606v-3.07c0-.173 0-.347.065-.563.324-1.384 1.038-1.774 3.438-2 .195 0 .454-.044.65-.044h19.268v-4.497h-18.944c-2.725 0-4.152.173-5.45.562C91.532 67 89.78 69 89.78 72.46v3.936c0 3.028 3.44 5.623 9.212 6.228.65.043 1.298.086 1.946.086h7.007c.26 0 .52 0 .714.044 2.14.173 3.05.562 3.698 1.34.4.4.52.78.52 1.2v3.936c0 .476-.324 1.082-.973 1.6-.584.52-1.557.865-2.855.952-.26 0-.454.043-.713.043h-18.62v4.498zm72.064-7.828c0 4.628 3.438 7.223 10.38 7.742a29.45 29.45 0 0 0 1.946.086h17.582v-4.498h-17.712c-3.957 0-5.45-.995-5.45-3.374v-23.27h-6.747v23.312zm-37.785.234V72.705c0-4.074 2.86-6.545 8.516-7.325a12.94 12.94 0 0 1 1.821-.13h12.807a13.87 13.87 0 0 1 1.886.13c5.656.78 8.516 3.25 8.516 7.325V88.74c0 3.305-1.215 5.074-4.015 6.227l6.646 6h-7.834l-5.377-4.854-5.413.343h-7.216c-1.235 0-2.535-.174-3.966-.564-4.3-1.17-6.37-3.424-6.37-7.152zm7.283-.4c0 .217.065.433.13.694.4 1.864 2.145 2.904 4.8 2.904h6.13l-5.63-5.083h7.834l4.9 4.433c.905-.482 1.5-1.22 1.7-2.167.065-.216.065-.433.065-.65V73.096c0-.173 0-.4-.065-.607-.4-1.733-2.146-2.73-4.746-2.73H136.22c-3 0-4.94 1.3-4.94 3.337v15.256z" fill="#e48e00"/><g fill="#00618a"><path d="M197.624 57.73c-4.147-.112-7.316.273-10.024 1.415-.77.325-1.997.333-2.123 1.298.423.443.49 1.105.825 1.65.647 1.047 1.74 2.45 2.713 3.184 1.064.803 2.16 1.663 3.303 2.36 2.03 1.238 4.296 1.945 6.25 3.184 1.152.73 2.296 1.65 3.42 2.476.555.408.93 1.042 1.65 1.297v-.118c-.38-.483-.477-1.147-.825-1.65l-1.533-1.533c-1.5-2-3.402-3.737-5.425-5.19-1.613-1.158-5.224-2.722-5.897-4.6l-.118-.118c1.144-.13 2.483-.543 3.54-.825 1.773-.475 3.358-.353 5.19-.825l2.477-.708v-.472c-.926-.95-1.586-2.207-2.595-3.066-2.64-2.25-5.523-4.495-8.49-6.37-1.646-1.04-3.68-1.714-5.425-2.595-.587-.296-1.618-.45-2.005-.944-.916-1.168-1.415-2.65-2.122-4-1.48-2.85-2.934-5.964-4.246-8.963-.895-2.045-1.48-4.062-2.594-5.897-5.355-8.804-11.12-14.118-20.048-19.34-1.9-1.11-4.187-1.55-6.605-2.123l-3.892-.236c-.792-.33-1.616-1.3-2.36-1.77-2.958-1.87-10.545-5.933-12.736-.6-1.383 3.373 2.067 6.664 3.302 8.374.866 1.2 1.976 2.543 2.594 3.892.407.886.478 1.775.826 2.713.857 2.3 1.603 4.823 2.712 6.958.56 1.08 1.178 2.218 1.887 3.184.435.593 1.18.854 1.297 1.77-.728 1.02-.77 2.6-1.18 3.892-1.843 5.812-1.148 13.035 1.533 17.337.823 1.32 2.76 4.152 5.425 3.066 2.33-.95 1.8-3.89 2.477-6.486.15-.59.058-1.02.354-1.415v.118l2.123 4.245c1.57 2.53 4.36 5.175 6.722 6.96 1.225.925 2.2 2.525 3.774 3.066v-.118h-.118c-.307-.48-.787-.677-1.18-1.06-.923-.905-1.95-2.03-2.713-3.066-2.15-2.918-4.048-6.11-5.778-9.435-.826-1.587-1.545-3.338-2.24-4.953-.268-.623-.265-1.564-.825-1.887-.763 1.184-1.887 2.14-2.477 3.538-.944 2.234-1.066 4.958-1.415 7.784-.207.074-.115.023-.236.118-1.642-.396-2.22-2.087-2.83-3.538-1.544-3.67-1.83-9.576-.472-13.798.35-1.092 1.94-4.534 1.297-5.543-.307-1.007-1.32-1.6-1.887-2.36-.7-.95-1.402-2.204-1.887-3.302-1.264-2.86-1.854-6.07-3.184-8.963-.636-1.382-1.71-2.78-2.594-4-.978-1.36-2.073-2.364-2.83-4-.27-.585-.636-1.52-.236-2.123a.93.93 0 0 1 .708-.708c.684-.527 2.59.175 3.302.472 1.89.786 3.47 1.534 5.072 2.595.77.5 1.547 1.496 2.476 1.77h1.06c1.66.382 3.52.12 5.07.59 2.742.833 5.198 2.13 7.43 3.538 6.798 4.292 12.355 10.402 16.157 17.7.612 1.173.876 2.294 1.415 3.538 1.087 2.5 2.456 5.093 3.538 7.547 1.08 2.45 2.13 4.92 3.656 6.958.802 1.07 3.9 1.646 5.307 2.24.987.417 2.603.852 3.538 1.415 1.785 1.077 3.515 2.36 5.19 3.54.837.59 3.41 1.883 3.538 2.948z"/><path d="M144.91 12.798c-.865-.016-1.476.094-2.123.236v.118h.118c.412.848 1.14 1.393 1.65 2.123l1.18 2.476.118-.118c.73-.515 1.065-1.338 1.06-2.595-.293-.308-.336-.694-.59-1.062-.337-.49-1-.768-1.415-1.18z" fill-rule="evenodd"/></g><path d="M194.855 91.708c0 2.97 2.347 4.972 4.972 4.972s4.972-2.002 4.972-4.972-2.347-4.972-4.972-4.972-4.972 2.002-4.972 4.972zm8.83 0c0 2.254-1.723 3.938-3.86 3.938-2.16 0-3.86-1.684-3.86-3.938s1.698-3.938 3.86-3.938c2.135 0 3.86 1.684 3.86 3.938zm-2.52 2.838h1.113l-1.63-2.492c.875-.093 1.537-.518 1.537-1.552 0-1.154-.73-1.63-2.134-1.63h-2.215v5.675h.955v-2.453h.888l1.485 2.453zm-2.374-3.25v-1.63h1.1c.57 0 1.26.106 1.26.77 0 .795-.623.862-1.34.862h-1.02z" fill="#e48e00" fill-rule="evenodd"/></svg>
<span>MySQL</span>
</div>
</div>
</div>
</div>
<div class="container1">
<div class="bento-box glass2">
<h2 class="tools" id="Tools">Tools</h2>
<div class="items">
<div class="item">
<i class='bx bxl-git' style="color: #F05032;"></i>
<span>Git</span>
</div>
<div class="item">
<i class='bx bxl-github' style="color: #181717;"></i>
<span>GitHub</span>
</div>
<div class="item">
<i class='bx bxl-visual-studio' style="color: #007ACC;"></i>
<span>VSCode</span>
</div>
<div class="item">
<i class='bx bxl-wordpress' style="color: #21759B;"></i>
<span>WordPress</span>
</div>
<div class="item">
<i class='bx bxs-terminal' style="color: #000000;"></i>
<span>Terminal</span>
</div>
<div class="item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="figma" width="64" height="64"><path fill="#0ACF83" d="M8 24c2.208 0 4-1.792 4-4v-4H8c-2.208 0-4 1.792-4 4s1.792 4 4 4z"></path><path fill="#A259FF" d="M4 12c0-2.208 1.792-4 4-4h4v8H8c-2.208 0-4-1.792-4-4z"></path><path fill="#F24E1E" d="M4 4c0-2.208 1.792-4 4-4h4v8H8C5.792 8 4 6.208 4 4z"></path><path fill="#FF7262" d="M12 0h4c2.208 0 4 1.792 4 4s-1.792 4-4 4h-4V0z"></path><path fill="#1ABCFE" d="M20 12c0 2.208-1.792 4-4 4s-4-1.792-4-4 1.792-4 4-4 4 1.792 4 4z"></path></svg>
<span>Figma</span>
</div>
</div>
</div>
</div>
</div>
<div class="content-wrapper">
<div >
<h2 id="wrapper-header">¿Tienes algún proyecto?</h2>
<p id="wrapper-subtext">Trabajemos juntos</p>
</div>
<div>
<a href="https://www.linkedin.com/in/carlos-javier-alarcon-cea-004019303?jobid=1234&lipi=urn%3Ali%3Apage%3Ad_jobs_easyapply_pdfgenresume%3BpU28VIsXRAWdY6IKxAf16A%3D%3D&licu=urn%3Ali%3Acontrol%3Ad_jobs_easyapply_pdfgenresume-v02_profile" target="_blank" class="button">
<img src="img/icons/linkedin.png" alt="Linkedin" class="icon-wrapper">
<span>Linkedin</span>
</a>
<a href="mailto:[email protected]" target="_blank" class="button" id="gmailButton">
<img src="img/icons/gmail.png" alt="Instagram" class="icon-wrapper">
<span>Gmail</span>
</a>
</div>
</div>
</section>
<section class="About-Container" id="About">
<h1 class="Tittle-Content" id="aboutTitle">Sobre <span>Mí</span></h1>
<a class="close-modal-button"></a>
<div class="container">
<div class="profile-info">
<h1 id="profileInfo-header">{ Desarrollador Frontend }</h1>
<p id="profileInfo-intro">Me llamo <strong>Carlos Javier Cea</strong> pero mis amigos me llaman <strong>Javi</strong>. Entré en este dinámico campo de forma inesperada, pero pronto descubrí una profunda satisfacción en la creación de interfaces, sitios web y experiencias digitales interactivas.</p>
<p class="p-gray" id="profileInfo-skillset">Aunque todavía me encuentro en proceso de formación para convertirme en un profesional, estoy dedicando tiempo y esfuerzo a desarrollar <span class="highlight">habilidades en HTML, CSS, JavaScript y Angular</span>, así como a comprender mejor los <span class="highlight">principios de diseño y experiencia de usuario</span>.<br> Mi objetivo es seguir creciendo en este campo, aplicando lo aprendido en proyectos prácticos y colaborando con otros <span class="highlight">profesionales apasionados</span>.</p>
<p class="p-gray" id="profileInfo-growth">Estoy enfocado en crecer como <span class="highlight">futuro desarrollador Front-end</span>, buscando oportunidades para aprender y contribuir a <span class="highlight">soluciones digitales innovadoras</span>. <span class="highlight">Tengo pasión por la música</span>, lo que potencia mi concentración y creatividad. <span class="highlight">Me considero un aprendiz ágil</span>, detallista y comprometido, y <span class="highlight">valoro las lecciones aprendidas</span> a través de la experiencia.</p>
</div>
<div class="profile-image">
<img src="img/fotojav.jpg" alt="Foto de Edu Calvo">
<div class="social-links-about">
<ul class="social-list-about">
<li>
<a target="_blank" href="https://www.instagram.com/javier_cea.30/" class="social-link instagram">
<i class='bx bxl-instagram' ></i>
</a>
<p>Instagram</p>
</li>
<li>
<a target="_blank" href="https://github.com/TechCea" class="social-link github">
<i class='bx bxl-github'></i>
</a>
<p>GitHub</p>
</li>
<li>
<a target="_blank" href="https://www.linkedin.com/in/carlos-javier-alarcon-cea-004019303/" class="social-link linkedin">
<i class='bx bxl-linkedin'></i>
</a>
<p>Linkedin</p>
</li>
<li>
<a href="#" class="social-link discord copyDiscordButton">
<i class="bx bxl-discord"></i>
</a>
<p>Discord</p>
</li>
<li>
<a target="_blank" href="https://x.com/Javi_AlarconCea" class="social-link Twitter">
<i class="bx bxl-twitter"></i>
</a>
<p>Twitter</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bento-container-About">
<article class="bento-item2 work glass">
<h3 class="article-title-pixel">
<span class="icon-pixel">
<img src="img/ProfileAvatar.png" class="pixelart" alt="Maletín" width="60" height="60" loading="lazy" decoding="async">
</span>
<span id="soft-pixel-title">Ingeniero en UX/UI</span>
</h3>
<div class="article-content">
<p id="pixel-description-1">Apasionado por la tecnología, con una actitud <strong>empática</strong>, responsable y comprometida. Me enfrento a cualquier desafío con el objetivo de crear soluciones eficientes y estéticamente cuidadas.</p>
<p id="pixel-description-2">Me enfoco en el <strong>crecimiento continuo</strong> de mis competencias técnicas para optimizar tanto la experiencia de usuario (UX) como el diseño de interfaces (UI) en cada proyecto.</p>
</div>
</article>
<article class="bento-item2 bland glass">
<h3 class="article-title">
<span class="icon-item2">
<img src="img/icons/icons8-creativity-48.png" alt="Soft Skills" width="30" height="30" loading="lazy" decoding="async">
</span>
<span id="soft-skills-title">Habilidades blandas</span>
</h3>
<div class="article-content">
<p id="soft-skills-description-1">En un entorno profesional en constante cambio, las <strong>habilidades blandas</strong> son esenciales para generar conexiones, impulsar la colaboración y gestionar proyectos de manera eficaz.</p>
<p id="soft-skills-description-2">Más allá de las habilidades técnicas, el desarrollo de estas competencias permite adaptarse con agilidad y liderar con éxito.</p>
</div>
<div class="skills-list-soft">
<span id="skill-flexibility" class="skill-soft">Flexibilidad</span>
<span id="skill-creativity" class="skill-soft">Creatividad</span>
<span id="skill-empathy" class="skill-soft">Empatía</span>
<span id="skill-time-management" class="skill-soft">Gestión del tiempo</span>
<span id="skill-adaptation" class="skill-soft">Adaptación y tolerancia</span>
<span id="skill-continuous-learning" class="skill-soft">Aprendizaje continuo</span>
<span id="skill-patience" class="skill-soft">Paciencia</span>
<span id="skill-constructive-feedback" class="skill-soft">Capacidad para aceptar críticas constructivas</span>
</div>
</article>
<article class="bento-item2 education glass">
<h3 class="article-title">
<span class="icon-item2">
<img src="img/icons/icons8-education-48.png" alt="Educación" width="30" height="30" loading="lazy" decoding="async">
</span>
<span id="education-title">Educación</span>
</h3>
<div class="article-content">
<p id="education-highlight" class="highlight">Estudiante de Ingeniería en Sistemas Informáticos</p>
<p id="education-description">Actualmente, curso mi cuarto año en la UNICAES, donde estoy desarrollando competencias en programación, arquitectura de sistemas y bases de datos. Estoy trabajando en proyectos de forma independiente para practicar y fortalecer mis habilidades en el campo.</p>
</div>
</article>
<article class="bento-item2 likes glass">
<h3 class="article-title">
<span class="icon-item2">
<img src="img/corazon.svg" alt="Emoji de un corazón" width="30" height="30" loading="lazy" decoding="async">
</span>
<span id="hobbies-title">Gustos y pasatiempos</span>
</h3>
<div class="hobbies-grid">
<div class="hobby">
<img src="img/icons/icons8-sushi-100.png" alt="Asado" width="91" height="91" loading="lazy" decoding="async">
<p>❤️ Sushi</p>
</div>
<div class="hobby">
<img src="img/icons/icons8-pokedex-80.png" alt="Fútbol" width="80" height="80" loading="lazy" decoding="async">
<p>❤️ Pokemon</p>
</div>
<div class="hobby">
<img src="img/icons/icons8-games-48.png" alt="Cine" width="64" height="64" loading="lazy" decoding="async">
<p id="hobby-games">❤️ Juegos</p>
</div>
</div>
</article>
</div>
</section>
<section>
<div class="container-certi">
<h1 class="Tittle-Content" id="certificates-title">My <span>Certificates</span></h1>
<div class="card-container">
<div class="card-certi glass-accordion">
<img src="img/udemy.jpeg" alt="Logo" class="logo" />
<div class="card-content">
<h3 id="certificate-1-title">HTML and CSS for Beginners</h3>
<p id="certificate-1-provider">Udemy</p>
<h5 id="certificate-1-date">Certification obtained on <span id="certificate-1-date-span">09/06/24</span></h5>
<a id="certificate-1-link" href="https://udemy-certificate.s3.amazonaws.com/pdf/UC-7f3715fc-9cb5-49fa-8347-94af2edc1b79.pdf" target="_blank">Ver Certificado</a>
</div>
</div>
<div class="card-certi glass-accordion">
<img src="img/udemy.jpeg" alt="Logo" class="logo" />
<div class="card-content">
<h3 id="certificate-2-title">Curso de Java - Nivel Básico</h3>
<p id="certificate-2-provider">Udemy</p>
<h5 id="certificate-2-date">Certification obtained on <span id="certificate-2-date-span">28/04/24</span></h5>
<a id="certificate-2-link" href="https://udemy-certificate.s3.amazonaws.com/pdf/UC-1ff83aec-b611-47d8-bb3b-7dcdf1adc991.pdf" target="_blank">Ver Certificado</a>
</div>
</div>
</div>
<div class="card-container">
<div class="card-certi glass-accordion">
<img src="img/udemy.jpeg" alt="Logo" class="logo" />
<div class="card-content">
<h3 id="certificate-3-title">Curso de Laravel 9</h3>
<p id="certificate-3-provider">Udemy</p>
<h5 id="certificate-3-date">Certification obtained on <span id="certificate-3-date-span">28/04/24</span></h5>
<a id="certificate-3-link" href="https://udemy-certificate.s3.amazonaws.com/pdf/UC-541dc8ff-5a3a-42a6-9edc-7a7ea5f10849.pdf" target="_blank">Ver Certificado</a>
</div>
</div>
<div class="card-certi glass-accordion">
<img src="img/udemy.jpeg" alt="Logo" class="logo" />
<div class="card-content">
<h3 id="certificate-4-title">Master Web & Mobile Design: Figma</h3>
<p id="certificate-4-provider">Udemy</p>
<h5 id="certificate-4-date">Certification obtained on <span id="certificate-4-date-span">20/06/2024</span></h5>
<a id="certificate-4-link" href="https://udemy-certificate.s3.amazonaws.com/pdf/UC-83c78a45-d364-464d-aad8-ae9af0d81667.pdf" target="_blank">Ver Certificado</a>
</div>
</div>
</div>
<div class="card-container">
<div class="card-certi glass-accordion">
<img src="img/Cody.jpg" alt="Logo" class="logo" />
<div class="card-content">
<h3 id="certificate-5-title">Curso Profesional de Angular</h3>
<p id="certificate-5-provider">Codigo Facilito</p>
<h5 id="certificate-5-date">Certification obtained on <span id="certificate-5-date-span">29/10/24</span></h5>
<a id="certificate-5-link" href="https://codigofacilito.com/certificates/21f321b1-4bdd-4a46-88ae-d33750fb38b2" target="_blank">Ver Certificado</a>
</div>
</div>
<div class="card-certi glass-accordion">
<img src="img/udemy.jpeg" alt="Logo" class="logo" />
<div class="card-content">
<h3 id="certificate-6-title">CSS3 For Web Development</h3>
<p id="certificate-6-provider">Udemy</p>
<h5 id="certificate-6-date">Certification obtained on <span id="certificate-6-date-span">30/10/24</span></h5>
<a id="certificate-6-link" href="https://udemy-certificate.s3.amazonaws.com/pdf/UC-25812631-3f89-4b00-af59-2832c60d5853.pdf" target="_blank">Ver Certificado</a>
</div>
</div>
</div>
<div class="card-container">
<div class="card-certi glass-accordion">
<img src="img/Cody.jpg" alt="Logo" class="logo" />
<div class="card-content">
<h3 id="certificate-5-title">Bootcamp de Bases de Datos en la nube con Azure</h3>
<p id="certificate-5-provider">Codigo Facilito</p>
<h5 id="certificate-5-date">Certification obtained on <span id="certificate-5-date-span">13/12/24</span></h5>
<a id="certificate-5-link" href="https://codigofacilito.com/certificates/f2cfd09d-d9df-4acd-beb7-41376e140db9" target="_blank">Ver Certificado</a>
</div>
</div>
</div>
</div>
</section>
<aside class="section-faq">
<div class="container-faq">
<h4 id="faq-title" class="Tittle-Content">Preguntas <span id="faq-span">Frecuentes</span></h4>
</div>
<article class="article-faq">
<div class="faq-container">
<details class="glass-accordion" name="my-accordion" open>
<summary><span class="icon"></span><span id="question-1">¿Cuál es tu experiencia en el desarrollo web?</span></summary>
<p id="answer-1">
Estoy en las primeras etapas de mi carrera como desarrollador Front-end. Actualmente curso mi cuarto año de Ingeniería en Sistemas Informáticos en UNICAES, y he estado trabajando en proyectos independientes para mejorar mis habilidades en HTML, CSS y JavaScript.
</p>
</details>
<details class="glass-accordion" name="my-accordion">
<summary><span class="icon"></span><span id="question-2">¿Cuál es tu enfoque y especialidad en desarrollo?</span></summary>
<p id="answer-2">
Me especializo en el desarrollo Front-end, donde disfruto combinando creatividad con habilidades para resolver problemas. Actualmente, estoy profundizando en herramientas como Angular y diseño UX/UI, con el objetivo de optimizar la experiencia del usuario en cada proyecto que realizo, buscando siempre un equilibrio entre funcionalidad y diseño atractivo.
</p>
</details>
<details class="glass-accordion" name="my-accordion">
<summary><span class="icon"></span><span id="question-3">¿Cómo abordas la resolución de problemas?</span></summary>
<p id="answer-3">
Mi enfoque consiste en dividir el problema en partes más pequeñas, investigar soluciones y mantener siempre una actitud de aprendizaje. Me esfuerzo en comunicarme de forma clara y trabajar en equipo cuando sea necesario.
</p>
</details>
<details class="glass-accordion" name="my-accordion">
<summary><span class="icon"></span><span id="question-4">¿Cómo te mantienes actualizado con las nuevas tecnologías en desarrollo web?</span></summary>
<p id="answer-4">
Me gusta estar al tanto de las últimas tendencias en desarrollo web mediante la lectura de blogs y artículos, participación en comunidades de desarrolladores y cursos online. Además, me aseguro de practicar regularmente con nuevas herramientas y frameworks como Angular, lo que me permite mantenerme actualizado y mejorar continuamente mis habilidades.
</p>
</details>
<details class="glass-accordion" name="my-accordion">
<summary><span class="icon"></span><span id="question-5">¿Qué tecnologías estás aprendiendo o utilizando?</span></summary>
<p id="answer-5">
Actualmente estoy enfocándome en HTML, CSS, JavaScript y Angular, los cuales utilizo activamente en mis proyectos. También estoy explorando herramientas como Git y GitHub para la gestión eficiente de proyectos y el control de versiones, mejorando mis flujos de trabajo y colaboraciones.
</p>
</details>
<details class="glass-accordion" name="my-accordion">
<summary><span class="icon"></span><span id="question-6">¿Qué te motiva a seguir aprendiendo en desarrollo web?</span></summary>
<p id="answer-6">
Me motiva la posibilidad de crear experiencias digitales únicas. Cada nuevo desafío es una oportunidad para mejorar mis habilidades y aprender nuevas tecnologías. Disfruto de la mezcla entre creatividad y técnica que ofrece el desarrollo web.
</p>
</details>
<details class="glass-accordion" name="my-accordion">
<summary><span class="icon"></span><span id="question-7">¿Tienes algún interés o pasatiempo fuera del desarrollo web?</span></summary>
<p id="answer-7">
Me apasiona la música, los videojuegos, especialmente Pokémon, y leer mangas. Estos pasatiempos no solo me permiten relajarme, sino también encontrar inspiración creativa para mis proyectos. Además, disfruto pasar tiempo con mi familia y amigos, lo que me ayuda a mantener un buen equilibrio entre el trabajo y el ocio.
</p>
</details>
</div>
</article>
</aside>
<section class="contact-me" id="Contact">
<div class="contactme">
<h1 class="Tittle-Content" id="contact-title">Contact <span>Me</span></h1>
</div>
<div class="contact-container">
<form action="https://api.web3forms.com/submit" method="POST" class="contact-left glass2" >
<div class="container-left-tittle">
<h2 id="contact-form-title">Ponte en contacto</h2>
<hr>
</div>
<input type="hidden" name="access_key" value="8dc0b92e-f98b-4228-8fe0-6e5084bd7b2a">
<input type="text" name="email" placeholder="Your Email" class="contact-inputs" required>
<textarea name="message" placeholder="Your Message" class="contact-inputs" required></textarea>
<button type="submit" id="contact-submit">Submit <i class='bx bxs-send'></i></button>
</form>
<div class="contact-right" style="z-index: 2;">
<img src="img/mochila.png" alt="">
</div>
</div>
</section>
<footer class="glass4">
<ul class="social-list-footer">
<li>
<a target="_blank" href="https://www.instagram.com/javier_cea.30/" class="social-link instagram">
<i class='bx bxl-instagram' ></i>
</a>
</li>
<li>
<a target="_blank" href="https://github.com/TechCea" class="social-link github">
<i class='bx bxl-github'></i>
</a>
</li>
<li>
<a target="_blank" href="https://www.linkedin.com/in/carlos-javier-alarcon-cea-004019303/" class="social-link linkedin">
<i class='bx bxl-linkedin'></i>
</a>
</li>
<li>
<a href="#" class="social-link discord copyDiscordButton">
<i class="bx bxl-discord"></i>
</a>
</li>
<li>
<a target="_blank" href="https://x.com/Javi_AlarconCea" class="social-link Twitter">
<i class="bx bxl-twitter"></i>
</a>
</li>
</ul>
</div>
<div class="foot-text">
<h4 id="footer-text">Developed by TechCea</h4>
</div>
</footer>
</body>
<script src="js/main.js"></script>
</html>