-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
593 lines (521 loc) · 31.4 KB
/
index.html
File metadata and controls
593 lines (521 loc) · 31.4 KB
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
<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title id="meta-title">César Medrano Gamboa – Ingeniero de Sistemas Empresariales</title>
<meta id="meta-desc" name="description" content="Portafolio de César Medrano Gamboa: transformación digital, gestión de proyectos" />
<!-- Open Graph -->
<meta id="og-title" property="og:title" content="César Medrano Gamboa – Portafolio" />
<meta id="og-desc" property="og:description" content="Transformación digital, Gestión de Proyectos y analytics." />
<meta id="og-url" property="og:url" content="https://cemega72.github.io/CesarMedrano/" />
<meta id="og-image" property="og:image" content="assets/og-image.jpg" />
<meta property="og:type" content="website" />
<!-- Favicon -->
<link id="meta-favicon" rel="icon" href="assets/favicon1.ico" />
<!-- Preload hero background (mejora LCP) -->
<link rel="preload" as="image" href="assets/hero/office-clean.png" />
<!-- Tailwind + FontAwesome -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
rel="stylesheet"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
:root{
--nav-h:64px;
--brand:#2563eb;
--brand-dark:#1d4ed8;
--brand-secondary:#1e40af;
--brand-accent:#0ea5e9;
/* importante: ruta relativa para GitHub Pages */
--hero-bg: url('assets/hero/office-clean.png');
}
section { scroll-margin-top: var(--nav-h); }
.card-hover { transition: transform .3s ease, box-shadow .3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 28px -10px rgba(37,99,235,.25); }
.tech-badge { background: linear-gradient(45deg, var(--brand), var(--brand-accent)); transition: transform .25s ease; }
.tech-badge:hover { transform: scale(1.04); }
.brand-gradient{ background: linear-gradient(135deg, var(--brand) 0%, var(--brand-secondary) 100%); }
/* Hero con imagen de fondo + overlay */
.hero-with-bg{ position: relative; overflow: hidden; }
.hero-with-bg::before{
content:""; position:absolute; inset:0;
background-image: var(--hero-bg);
background-size: cover; background-position: center;
transform: scale(1.02);
filter: saturate(1.05) contrast(1.05);
z-index:0;
}
.hero-with-bg::after{
content:""; position:absolute; inset:0;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-secondary) 100%);
opacity:.65; z-index:1;
}
.hero-with-bg > *{ position:relative; z-index:2; }
/* Respeta preferencias de movimiento del usuario */
@media (prefers-reduced-motion: reduce) {
.card-hover:hover{ transform:none; }
.hero-with-bg::before{ transform:none; }
}
</style>
</head>
<body id="site"
class="bg-gray-50 text-gray-800"
data-brand="#063970"
data-brand-dark="#1d4ed8"
data-brand-secondary="#1e40af"
data-brand-accent="#0ea5e9"
data-name="César Medrano Gamboa"
data-role="Ingeniero de Sistemas & Gestión de proyectos"
data-email="cesarmedranog@hotmail.com"
data-phone="+51 999 765 280"
data-location="Lima, Perú"
data-linkedin="https://www.linkedin.com/in/cesarmedranogamboa/"
data-github="https://github.com/cemega72"
data-twitter="https://twitter.com/cemega72"
data-og-url="https://cemega72.github.io/CesarMedrano/"
data-og-image="assets/og-image.jpg"
data-favicon="assets/favicon1.ico"
data-formspree="https://formspree.io/f/your_form_id"
data-recaptcha="6LfDhesrAAAAAPlLDwrquJuP98s3v4bFtmfLPP0P"
data-avatar="assets/profile-pic.png"
data-hero-bg="assets/hero/office-clean.png"
>
<a href="#inicio" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-white text-[color:var(--brand)] px-3 py-2 rounded">Saltar al contenido</a>
<!-- Navbar -->
<nav class="backdrop-blur bg-white/90 border-b border-gray-200 fixed w-full top-0 z-50" role="navigation" aria-label="Principal">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<h1 class="text-xl md:text-2xl font-bold text-gray-900" id="nav-name">Ing° César Medrano Gamboa</h1>
</div>
<!-- Menú desktop -->
<div class="hidden md:flex items-center gap-8">
<a href="#inicio" class="nav-link text-gray-700 hover:text-[color:var(--brand)]">Inicio</a>
<a href="#sobre-mi" class="nav-link text-gray-700 hover:text-[color:var(--brand)]">Sobre mí</a>
<a href="#proyectos" class="nav-link text-gray-700 hover:text-[color:var(--brand)]">Proyectos</a>
<a href="#blog" class="nav-link text-gray-700 hover:text-[color:var(--brand)]">Blog</a>
<a href="#contacto" class="nav-link text-gray-700 hover:text-[color:var(--brand)]">Contacto</a>
</div>
<!-- Botón móvil -->
<div class="md:hidden flex items-center">
<button id="mobile-menu-btn" class="text-gray-700 hover:text-[color:var(--brand)]"
aria-controls="mobile-menu" aria-expanded="false" aria-label="Abrir menú">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<!-- Menú móvil (fixed, visible bajo la barra) -->
<div id="mobile-menu"
class="md:hidden hidden fixed top-16 inset-x-0
bg-white border-b border-gray-200 shadow-lg z-50
max-h-[calc(100vh-4rem)] overflow-y-auto"
role="menu" aria-labelledby="mobile-menu-btn">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#inicio" class="block px-3 py-2 text-gray-700 hover:text-[color:var(--brand)]">Inicio</a>
<a href="#sobre-mi" class="block px-3 py-2 text-gray-700 hover:text-[color:var(--brand)]">Sobre mí</a>
<a href="#proyectos" class="block px-3 py-2 text-gray-700 hover:text-[color:var(--brand)]">Proyectos</a>
<a href="#blog" class="block px-3 py-2 text-gray-700 hover:text-[color:var(--brand)]">Blog</a>
<a href="#contacto" class="block px-3 py-2 text-gray-700 hover:text-[color:var(--brand)]">Contacto</a>
</div>
</div>
</nav>
<!-- Hero -->
<section id="inicio" class="min-h-screen pt-16 brand-gradient text-white flex items-center hero-with-bg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
<img id="hero-avatar"
src=""
alt="César Medrano Gamboa"
width="128" height="128"
class="block mx-auto rounded-full object-cover ring-1 ring-white/30 mb-6
size-24 sm:size-28 md:size-32 lg:size-40 xl:size-48"
loading="lazy" decoding="async">
<h2 id="hero-name" class="text-4xl md:text-6xl font-extrabold tracking-tight">César Medrano Gamboa</h2>
<p id="hero-role" class="text-xl md:text-2xl mt-4 text-indigo-100">Ingeniero de Sistemas Empresariales</p>
<p class="mt-6 max-w-3xl mx-auto text-indigo-50">Gestión de proyectos, analítica aplicada al sector salud y empresa. Transformo ideas en soluciones medibles.</p>
<div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
<a href="#proyectos" class="border-2 border-white text-white font-semibold px-8 py-3 rounded-lg hover:bg-white hover:text-[color:var(--brand)]">Ver proyectos</a>
<a href="#contacto" class="border-2 border-white text-white font-semibold px-8 py-3 rounded-lg hover:bg-white hover:text-[color:var(--brand)]">Contactar</a>
</div>
</div>
</section>
<!-- Sobre mí -->
<section id="sobre-mi" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14">
<h3 class="text-3xl md:text-4xl font-bold">Sobre mí</h3>
<p class="text-lg text-gray-600 mt-3 max-w-3xl mx-auto">Ingeniero de Sistemas con más de 25 años de experiencia liderando soluciones tecnológicas orientadas al negocio, especializado en desarrollo de software, automatización de procesos críticos, gestión de proyectos con enfoque ágil, metodologías tradicionales, arquitectura de soluciones y transformación digital. Experto en el diseño e implementación de sistemas integrados, interoperabilidad entre plataformas, control de versiones y optimización de flujos funcionales. Con conocimientos en arquitectura empresarial, desarrollo seguro, y gobierno de datos. </p>
</div>
<div class="grid md:grid-cols-2 gap-12 items-start">
<div>
<h4 class="text-2xl font-bold mb-5">Experiencia clave</h4>
<ul class="space-y-4 text-gray-700">
<li class="flex items-start gap-3"><i class="fa-solid fa-check-circle text-[color:var(--brand)] mt-1"></i><span>Arquitectura de software y microservicios</span></li>
<li class="flex items-start gap-3"><i class="fa-solid fa-check-circle text-[color:var(--brand)] mt-1"></i><span>Gestión de proyectos con metodologías tradicionales y ágiles</span></li>
<li class="flex items-start gap-3"><i class="fa-solid fa-check-circle text-[color:var(--brand)] mt-1"></i><span>Data analytics y dashboards ejecutivos</span></li>
<li class="flex items-start gap-3"><i class="fa-solid fa-check-circle text-[color:var(--brand)] mt-1"></i><span>Integración HIS y facturación electrónica</span></li>
</ul>
</div>
<div>
<h4 class="text-2xl font-bold mb-5">Tecnologías</h4>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
<div class="tech-badge text-white p-4 rounded-lg text-center"><i class="fa-brands fa-python text-2xl mb-2" aria-hidden="true"></i><p class="font-semibold">Python</p></div>
<div class="tech-badge text-white p-4 rounded-lg text-center"><i class="fa-solid fa-code text-2xl mb-2" aria-hidden="true"></i><p class="font-semibold">VB</p></div>
<div class="tech-badge text-white p-4 rounded-lg text-center"><i class="fa-solid fa-chart-pie text-2xl mb-2" aria-hidden="true"></i><p class="font-semibold">Power BI</p></div>
<div class="tech-badge text-white p-4 rounded-lg text-center"><i class="fa-solid fa-mobile-screen-button text-2xl mb-2" aria-hidden="true"></i><p class="font-semibold">AppSheet</p></div>
<div class="tech-badge text-white p-4 rounded-lg text-center"><i class="fa-solid fa-diagram-project text-2xl mb-2" aria-hidden="true"></i><p class="font-semibold">PMBOK</p></div>
<div class="tech-badge text-white p-4 rounded-lg text-center"><i class="fa-solid fa-database text-2xl mb-2" aria-hidden="true"></i><p class="font-semibold">SQL</p></div>
</div>
</div>
</div>
</div>
</section>
<!-- Proyectos (resumen) -->
<section id="proyectos" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14">
<h3 class="text-3xl md:text-4xl font-bold">Proyectos</h3>
<p class="text-lg text-gray-600">Trabajos recientes</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Tarjeta 1 -->
<article class="group relative bg-white rounded-lg shadow-sm overflow-hidden card-hover h-full" aria-labelledby="proj1">
<!-- Cabecera con icono + TÍTULO CENTRADO -->
<div class="h-44 brand-gradient relative flex items-center justify-center">
<!-- Ícono, opcional: lo movemos a la esquina -->
<i class="fa-solid fa-cloud absolute right-4 top-4 text-white/70 text-3xl"></i>
<!-- Título centrado vertical y horizontal -->
<h4 id="proj1"
class="m-0 text-white text-xl font-extrabold text-center drop-shadow z-10">
Sistema HIS Integral
</h4>
</div>
<!-- Contenido -->
<div class="p-6">
<!-- (Quitamos el h4 de aquí) -->
<p class="text-gray-600 mb-4">
Interoperabilidad con aseguradoras y aumento del 45 % en eficiencia operativa.
</p>
<div class="mt-auto flex flex-wrap gap-2 mb-4">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">SQL</span>
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">VB</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm">UML</span>
</div>
<!-- Indicador visual del CTA -->
<span class="inline-flex items-center gap-2 font-semibold
text-[color:var(--brand-dark)]
group-hover:text-[color:var(--brand)]">
Ver detalles <span aria-hidden="true">→</span>
</span>
</div>
<!-- Enlace que estira sobre toda la tarjeta -->
<a href="project.html?slug=p1"
class="absolute inset-0 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[color:var(--brand)]"
aria-labelledby="proj1">
<span class="sr-only">Ir a “Sistema HIS Integral”</span>
</a>
</article>
<!-- Tarjeta 2 -->
<article class="group relative bg-white rounded-lg shadow-sm overflow-hidden card-hover h-full" aria-labelledby="proj2">
<!-- Cabecera con icono + TÍTULO CENTRADO -->
<div class="h-44 brand-gradient relative flex items-center justify-center">
<!-- Ícono, opcional: lo movemos a la esquina -->
<i class="fa-solid fa-cloud absolute right-4 top-4 text-white/70 text-3xl"></i>
<!-- Título centrado vertical y horizontal -->
<h4 id="proj2"
class="m-0 text-white text-xl font-extrabold text-center drop-shadow z-10">
Proyecto TEDEF
</h4>
</div>
<!-- Contenido -->
<div class="p-6">
<p class="text-gray-600 mb-4">
Reducción de tiempos en la transmisión de los expedientes a las aseguradoras de 15 días a 48 horas.
</p>
<div class="mt-auto flex flex-wrap gap-2 mb-4">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">BPMN</span>
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Python</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm">AppSheet</span>
</div>
<!-- Indicador visual del CTA -->
<span class="inline-flex items-center gap-2 font-semibold
text-[color:var(--brand-dark)]
group-hover:text-[color:var(--brand)]">
Ver detalles <span aria-hidden="true">→</span>
</span>
</div>
<!-- Enlace que estira sobre toda la tarjeta -->
<a href="project.html?slug=p2"
class="absolute inset-0 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[color:var(--brand)]"
aria-labelledby="proj2">
<span class="sr-only">Ir a “Proyecto TEDEF”</span>
</a>
</article>
<!-- Tarjeta 3 -->
<article class="group relative bg-white rounded-lg shadow-sm overflow-hidden card-hover h-full" aria-labelledby="proj3">
<!-- Cabecera con icono + TÍTULO CENTRADO -->
<div class="h-44 brand-gradient relative flex items-center justify-center">
<!-- Ícono, opcional: lo movemos a la esquina -->
<i class="fa-solid fa-cloud absolute right-4 top-4 text-white/70 text-3xl"></i>
<!-- Título centrado vertical y horizontal -->
<h4 id="proj3"
class="m-0 text-white text-xl font-extrabold text-center drop-shadow z-10">
Dashboard Analytics
</h4>
</div>
<!-- Contenido -->
<div class="p-6">
<p class="text-gray-600 mb-4">
Aumento del 60 % en la visibilidad y toma de decisiones basadas en datos en áreas asistenciales y administrativas.
</p>
<div class="mt-auto flex flex-wrap gap-2 mb-4">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">SQL</span>
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Power BI</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm">ETL</span>
</div>
<!-- Indicador visual del CTA -->
<span class="inline-flex items-center gap-2 font-semibold
text-[color:var(--brand-dark)]
group-hover:text-[color:var(--brand)]">
Ver detalles <span aria-hidden="true">→</span>
</span>
</div>
<!-- Enlace que estira sobre toda la tarjeta -->
<a href="project.html?slug=p3"
class="absolute inset-0 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[color:var(--brand)]"
aria-labelledby="proj3">
<span class="sr-only">Ir a “Dashboard Analytics”</span>
</a>
</article>
</div>
<div class="text-center mt-12">
<a href="projects.html" class="inline-block bg-[color:var(--brand)] text-white px-8 py-3 rounded-lg font-semibold hover:bg-[color:var(--brand-dark)]">Ver todos los proyectos</a>
</div>
</div>
</section>
<!-- Blog (resumen) -->
<section id="blog" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14">
<h3 class="text-3xl md:text-4xl font-bold">Blog Tech</h3>
<p class="text-lg text-gray-600">Tecnología, desarrollo y tendencias</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Blog 1 -->
<article class="bg-gray-50 rounded-lg overflow-hidden card-hover">
<div class="p-6">
<div class="flex items-center gap-4 mb-3">
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold">Analítica</span>
<time class="text-gray-500 text-sm" datetime="2024-09-30">30 Sep 2024</time>
</div>
<h4 class="text-xl font-bold mb-2">Analítica de Salud: Transformando la Medicina y la Atención Médica a Través de los Datos</h4>
<p class="text-gray-600 mb-4">Durante la última década, un aumento masivo del conocimiento sobre la salud ha dado lugar a nuevas formas de mejorar la atención y el tratamiento de la salud en general. Los analistas de salud están cambiando la forma en que las organizaciones y los servicios de atención médica toman decisiones, diagnostican enfermedades y mejoran los recursos. Este artículo explora cómo el análisis de datos puede beneficiar a la medicina y la salud y hacia dónde se dirige este apasionante campo.</p>
<a href="post.html?slug=b1" class="text-[color:var(--brand)] hover:text-[color:var(--brand-dark)] font-semibold" target="_blank" rel="noopener">Leer más →</a>
</div>
</article>
<!-- Blog 2 -->
<article class="bg-gray-50 rounded-lg overflow-hidden card-hover">
<div class="p-6">
<div class="flex items-center gap-4 mb-3">
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold">Visualización</span>
<time class="text-gray-500 text-sm" datetime="2024-07-31">31 Jul 2024</time>
</div>
<h4 class="text-xl font-bold mb-2">Visualización de Datos: Técnicas y herramientas para representar datos de manera efectiva</h4>
<p class="text-gray-600 mb-4">En la era de la información, la cantidad de datos que generamos y consumimos a diario es abrumadora. Ya sea en el ámbito empresarial, científico o personal, la capacidad de comprender y comunicar información a través de la visualización de datos se ha convertido en una habilidad esencial. La visualización de datos no solo facilita la comprensión de patrones y tendencias, sino que también puede ser una poderosa herramienta para la toma de decisiones y la transmisión clara. En este artículo, exploraremos algunas técnicas y herramientas clave para representar datos de manera efectiva.</p>
<a href="post.html?slug=b2" class="text-[color:var(--brand)] hover:text-[color:var(--brand-dark)] font-semibold" target="_blank" rel="noopener">Leer más →</a>
</div>
</article>
<!-- Blog 3 -->
<article class="bg-gray-50 rounded-lg overflow-hidden card-hover">
<div class="p-6">
<div class="flex items-center gap-4 mb-3">
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold">IA</span>
<time class="text-gray-500 text-sm" datetime="2024-06-06">6 Jun 2024</time>
</div>
<h4 class="text-xl font-bold mb-2">Aprendizaje Automático: Aplicaciones y Algoritmos para Predecir, Clasificar y Tomar Decisiones Basadas en Datos</h4>
<p class="text-gray-600 mb-4">En el mundo empresarial moderno, el aprendizaje automático (machine learning) se ha convertido en una herramienta crucial para transformar la manera en que las organizaciones operan y toman decisiones. Esta disciplina, que forma parte de la inteligencia artificial (IA), se basa en la capacidad de las máquinas para aprender de los datos y hacer predicciones o decisiones sin ser programadas explícitamente para cada tarea. En este artículo, exploraremos las aplicaciones y algoritmos del aprendizaje automático que están revolucionando diversas industrias.</p>
<a href="post.html?slug=b3" class="text-[color:var(--brand)] hover:text-[color:var(--brand-dark)] font-semibold" target="_blank" rel="noopener">Leer más →</a>
</div>
</article>
</div>
<div class="text-center mt-12">
<a href="blog.html" class="inline-block bg-[color:var(--brand)] text-white px-8 py-3 rounded-lg font-semibold hover:bg-[color:var(--brand-dark)]">Ver todos los artículos</a>
</div>
</div>
</section>
<!-- Contacto -->
<section id="contacto" class="py-20 bg-gray-900 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14">
<h3 class="text-3xl md:text-4xl font-bold">¿Trabajamos juntos?</h3>
<p class="text-lg text-gray-300">Disponible para proyectos y colaboraciones</p>
</div>
<div class="grid md:grid-cols-2 gap-12">
<div>
<h4 class="text-2xl font-bold mb-5">Información de contacto</h4>
<ul class="space-y-4">
<li class="flex items-center gap-3"><i class="fa-solid fa-envelope text-blue-400 text-xl"></i><a id="contact-email" class="hover:underline" href="mailto:cesarmedranog@hotmail.com">cesarmedranog@hotmail.com</a></li>
<li class="flex items-center gap-3"><i class="fa-solid fa-phone text-blue-400 text-xl"></i><a id="contact-phone" class="hover:underline" href="tel:+51999765280">+51 999 765 280</a></li>
<li class="flex items-center gap-3"><i class="fa-solid fa-location-dot text-blue-400 text-xl"></i><span id="contact-location">Lima, Perú</span></li>
</ul>
<div class="mt-8">
<h5 class="text-lg font-semibold mb-3">Sígueme</h5>
<div id="social-links" class="flex gap-4">
<a id="link-linkedin" href="#" class="text-gray-300 hover:text-blue-400" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-linkedin text-2xl"></i></a>
<a id="link-github" href="#" class="text-gray-300 hover:text-blue-400" aria-label="GitHub" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github text-2xl"></i></a>
<a id="link-twitter" href="#" class="text-gray-300 hover:text-blue-400" aria-label="Twitter/X" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-x-twitter text-2xl"></i></a>
</div>
</div>
</div>
<div>
<form id="contact-form" class="space-y-6" action="https://formspree.io/f/your_form_id" method="POST">
<input type="hidden" name="_subject" value="Nuevo mensaje desde el Portafolio" />
<input type="text" name="_gotcha" class="hidden" tabindex="-1" autocomplete="off" />
<div>
<label for="name" class="block text-sm font-medium mb-2">Nombre</label>
<input type="text" id="name" name="name" required autocomplete="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-[color:var(--brand)] focus:border-transparent text-white"/>
</div>
<div>
<label for="email" class="block text-sm font-medium mb-2">Email</label>
<input type="email" id="email" name="email" required autocomplete="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-[color:var(--brand)] focus:border-transparent text-white"/>
</div>
<div>
<label for="message" class="block text-sm font-medium mb-2">Mensaje</label>
<textarea id="message" name="message" rows="4" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-[color:var(--brand)] focus:border-transparent text-white"></textarea>
</div>
<div class="g-recaptcha" data-sitekey="6LfDhesrAAAAAPlLDwrquJuP98s3v4bFtmfLPP0P"></div>
<button type="submit" class="w-full bg-[color:var(--brand)] text-white px-6 py-3 rounded-lg font-semibold hover:bg-[color:var(--brand-dark)]">Enviar mensaje</button>
<p id="form-status" class="text-sm mt-3 hidden" role="status"></p>
</form>
</div>
</div>
</div>
</section>
<footer class="bg-gray-800 text-gray-300 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p>© <span id="year"></span> <span id="footer-name">César Medrano Gamboa</span>. Todos los derechos reservados.</p>
<p class="mt-2 text-sm">Diseñado y desarrollado con ❤️</p>
</div>
</footer>
<script>
const site = document.getElementById('site');
const cfg = {
brand: site.dataset.brand,
brandDark: site.dataset.brandDark,
brandSecondary: site.dataset.brandSecondary,
brandAccent: site.dataset.brandAccent,
name: site.dataset.name,
role: site.dataset.role,
email: site.dataset.email,
phone: site.dataset.phone,
location: site.dataset.location,
linkedin: site.dataset.linkedin,
github: site.dataset.github,
twitter: site.dataset.twitter,
ogUrl: site.dataset.ogUrl,
ogImage: site.dataset.ogImage,
favicon: site.dataset.favicon,
formspree: site.dataset.formspree,
recaptcha: site.dataset.recaptcha,
avatar: site.dataset.avatar,
heroBg: site.dataset.heroBg
};
// Helper: normaliza rutas absolutas /assets → assets (GitHub Pages)
const rel = p => (p && p.startsWith('/')) ? p.slice(1) : p;
// Colores de marca
const root = document.documentElement;
root.style.setProperty('--brand', cfg.brand);
root.style.setProperty('--brand-dark', cfg.brandDark);
root.style.setProperty('--brand-secondary', cfg.brandSecondary);
root.style.setProperty('--brand-accent', cfg.brandAccent);
// Imagen de fondo del hero
if (cfg.heroBg) {
document.documentElement.style.setProperty('--hero-bg', `url('${rel(cfg.heroBg)}')`);
}
// Textos dinámicos
document.getElementById('hero-name').textContent = cfg.name;
document.getElementById('hero-role').textContent = cfg.role;
document.getElementById('nav-name').textContent = 'Ing° ' + cfg.name;
document.getElementById('footer-name').textContent = cfg.name;
// Contacto dinámico
const mail = document.getElementById('contact-email');
const phone = document.getElementById('contact-phone');
const loc = document.getElementById('contact-location');
mail.textContent = cfg.email; mail.href = `mailto:${cfg.email}`;
phone.textContent = cfg.phone; phone.href = `tel:${cfg.phone.replace(/\s+/g,'')}`;
loc.textContent = cfg.location;
// Redes sociales dinámicas
document.getElementById('link-linkedin').href = cfg.linkedin;
document.getElementById('link-github').href = cfg.github;
document.getElementById('link-twitter').href = cfg.twitter;
// Favicon y OG (relativas → absolutas si quieres compartir)
document.getElementById('meta-favicon').href = rel(cfg.favicon || 'assets/favicon1.ico');
document.getElementById('og-image').setAttribute('content', rel(cfg.ogImage || 'assets/og-image.jpg'));
document.getElementById('og-url').setAttribute('content', cfg.ogUrl || 'https://cemega72.github.io/CesarMedrano/');
// Formspree & reCAPTCHA dinámicos
const form = document.getElementById('contact-form');
const recEl = document.querySelector('.g-recaptcha');
form.action = cfg.formspree;
if (recEl && cfg.recaptcha && cfg.recaptcha !== '6LfDhesrAAAAAPlLDwrquJuP98s3v4bFtmfLPP0P') {
recEl.setAttribute('data-sitekey', cfg.recaptcha);
}
// Año dinámico
document.getElementById('year').textContent = new Date().getFullYear();
// Menú móvil toggle + accesibilidad
const mobileBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileBtn?.addEventListener('click', () => {
const isHidden = mobileMenu.classList.toggle('hidden');
mobileBtn.setAttribute('aria-expanded', String(!isHidden));
});
// Cierra al hacer click en opción
mobileMenu?.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
mobileBtn.setAttribute('aria-expanded', 'false');
});
});
// Scroll suave para anclas
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
const target = document.querySelector(a.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Envío con Fetch a Formspree + redirect a gracias.html
const status = document.getElementById('form-status');
form?.addEventListener('submit', async (e) => {
e.preventDefault();
status.classList.remove('hidden','text-green-400','text-red-400');
status.textContent = 'Enviando…';
try {
const data = new FormData(form);
const res = await fetch(form.action, { method: 'POST', headers: { 'Accept':'application/json' }, body: data });
if (res.ok) {
window.location.href = 'gracias.html';
} else {
const err = await res.json().catch(() => ({}));
status.classList.add('text-red-400');
status.textContent = err.errors?.map(e => e.message).join(' ') || 'Hubo un problema al enviar. Inténtalo de nuevo.';
}
} catch {
status.classList.add('text-red-400');
status.textContent = 'No se pudo conectar con el servidor. Revisa tu conexión e inténtalo nuevamente.';
}
});
// Foto del Hero
const avatar = document.getElementById('hero-avatar');
if (avatar && cfg.avatar) {
avatar.src = rel(cfg.avatar);
avatar.alt = cfg.name || 'Foto de perfil';
}
</script>
<!-- reCAPTCHA v2 -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</body>
</html>