-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex_v1.html
More file actions
282 lines (270 loc) · 14.5 KB
/
index_v1.html
File metadata and controls
282 lines (270 loc) · 14.5 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosas de Datos | Jenny Carolina Hernández Cardozo</title>
<meta name="description" content="Laboratorio de ideas, repositorio de información, análisis y curiosidades de todo tipo alrededor de los datos.">
<link rel="stylesheet" href="style.css?v=2">
<!-- Iconos de Font Awesome para redes sociales -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Fuente: Montserrat para todo el sitio -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap" rel="stylesheet">
</head>
<body>
<!-- ========== NAVEGACION ========== -->
<!-- Barra superior fija con links a cada seccion -->
<nav class="navbar" id="navbar">
<div class="nav-container">
<a href="#" class="nav-logo">Carolina Hernández · Cosas de Datos</a>
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-links" id="navLinks">
<li><a href="#inicio">Inicio</a></li>
<li><a href="#skills">Temas</a></li>
<li><a href="#projects">Proyectos</a></li>
<li><a href="#about">Sobre mí</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
<!-- Boton para cambiar entre tema claro y oscuro -->
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
<i class="fas fa-moon"></i>
</button>
</div>
</nav>
<!-- ========== HERO / PRESENTACION ========== -->
<!-- Seccion principal: el concepto "Cosas de Datos" es lo primero -->
<section class="hero" id="inicio">
<div class="hero-container hero-centered">
<div class="hero-content">
<h1 class="sr-only">Carolina Hernández · Cosas de Datos</h1>
<p class="hero-subtitle">Laboratorio de ideas, repositorio de información, análisis y curiosidades de todo tipo alrededor de los datos</p>
<p class="hero-bio">
Cuando me preguntan a qué me dedico, siempre respondo: cosas de datos.
Este sitio es justamente eso: un espacio para explorar y recopilar
aprendizajes sobre datos. Si tienes preguntas, ideas o propuestas,
no dudes en escribirme.
</p>
</div>
</div>
</section>
<!-- ========== EXPERTISE / HABILIDADES ========== -->
<!-- Tags interactivos: al hacer clic se muestra la descripcion -->
<section class="skills" id="skills">
<div class="section-container">
<h2 class="section-title">Temas</h2>
<div class="skill-tags">
<button class="skill-tag" data-skill="policy" style="--tag-color: #D6C4E8;">
Política social y evaluación de impacto
</button>
<button class="skill-tag" data-skill="demographics" style="--tag-color: #D6C4E8;">
Demografía y análisis poblacional
</button>
<button class="skill-tag" data-skill="data-viz" style="--tag-color: #D6C4E8;">
Visualización de datos
</button>
<button class="skill-tag" data-skill="monitoring" style="--tag-color: #D6C4E8;">
Diseño de sistemas de monitoreo
</button>
<button class="skill-tag" data-skill="education" style="--tag-color: #D6C4E8;">
Educación y políticas de juventud
</button>
</div>
<!-- Descripciones que aparecen al hacer clic en cada tag -->
<div class="skill-descriptions">
<div class="skill-desc" id="desc-policy">
<p>Diseño e implementación de evaluaciones de impacto para programas sociales
en América Latina. Experiencia evaluando la efectividad de políticas públicas
en colaboración con instituciones gubernamentales y organizaciones internacionales
como el BID.</p>
</div>
<div class="skill-desc" id="desc-demographics">
<p>Proyecciones de población, análisis demográfico y procesamiento de datos censales.
Experiencia con datos del DANE y modelamiento demográfico regional para la
planificación de políticas en instituciones colombianas.</p>
</div>
<div class="skill-desc" id="desc-data-viz">
<p>Transformación de conjuntos de datos complejos en visualizaciones claras y accesibles,
tanto para audiencias técnicas como no técnicas. Creación de tableros y reportes
con Power BI, Python (matplotlib, seaborn) y R (ggplot2).</p>
</div>
<div class="skill-desc" id="desc-monitoring">
<p>Diseño de sistemas de monitoreo basados en datos para programas sociales,
permitiendo el seguimiento en tiempo real de indicadores y la toma de decisiones
basada en evidencia en instituciones públicas.</p>
</div>
<div class="skill-desc" id="desc-education">
<p>Conocimiento especializado en política educativa y programas de desarrollo juvenil.
Análisis de datos enfocado en acceso educativo, métricas de calidad y resultados
de programas en diversos contextos latinoamericanos.</p>
</div>
</div>
<!-- Herramientas tecnicas -->
<h3 class="subsection-title">Herramientas</h3>
<div class="tools-grid">
<div class="tool-item">
<i class="fab fa-python"></i>
<span>Python</span>
</div>
<div class="tool-item">
<i class="fab fa-r-project"></i>
<span>R</span>
</div>
<div class="tool-item">
<i class="fas fa-table-columns"></i>
<span>Streamlit</span>
</div>
<div class="tool-item">
<i class="fas fa-chart-bar"></i>
<span>Power BI</span>
</div>
<div class="tool-item">
<i class="fas fa-chart-line"></i>
<span>Stata</span>
</div>
<div class="tool-item">
<i class="fab fa-git-alt"></i>
<span>Git</span>
</div>
</div>
</div>
</section>
<!-- ========== PROYECTOS ========== -->
<!-- Tarjetas con proyectos destacados -->
<section class="projects" id="projects">
<div class="section-container">
<h2 class="section-title">Proyectos</h2>
<div class="projects-grid">
<!-- Proyecto 1: Tablero Jovenes con Oportunidades -->
<article class="project-card">
<div class="project-image project-image-link">
<a href="https://tablero-jco-fmeyctbuhogjs5tgttm2iw.streamlit.app/" target="_blank" rel="noopener">
<img src="tablero-jco-preview.png" alt="Preview del tablero Jóvenes con Oportunidades">
</a>
</div>
<div class="project-content">
<h3>Tablero de priorización para programas de juventud en Bogotá</h3>
<p>Tablero interactivo para explorar la priorización de programas sociales en
Bogotá según datos de población joven vulnerable de la ciudad, en este caso
con datos del SISBEN 2024. Este tablero incluye mapas, rankings dinámicos
por grupos SISBEN y análisis comparativo por localidad.</p>
<div class="project-tags">
<span>Streamlit</span>
<span>Python</span>
<span>SDIS</span>
<span>Juventud</span>
</div>
<div class="project-links-row">
<a href="https://tablero-jco-fmeyctbuhogjs5tgttm2iw.streamlit.app/"
target="_blank" rel="noopener" class="project-link primary">
<i class="fas fa-external-link-alt"></i> Ver app
</a>
<a href="https://github.com/CarolinaHernandez2019/tablero-jco"
target="_blank" rel="noopener" class="project-link">
<i class="fab fa-github"></i> Código
</a>
</div>
</div>
</article>
<!-- Proyecto 2: Monitoreo de noticias de juventud -->
<article class="project-card">
<div class="project-image project-image-link">
<a href="https://noticiasjuventudcolombia.streamlit.app/" target="_blank" rel="noopener">
<img src="monitor-noticias-preview.png" alt="Preview del monitoreo de noticias de juventud">
</a>
</div>
<div class="project-content">
<h3>Monitoreo de noticias de juventud</h3>
<p>Sistema automatizado de scraping y monitoreo de noticias relacionadas
con juventud. Recopila artículos de prensa, los procesa y los presenta
en un tablero para seguimiento temático.</p>
<div class="project-tags">
<span>Python</span>
<span>Scraping</span>
<span>Dashboard</span>
<span>Juventud</span>
</div>
<div class="project-links-row">
<a href="https://noticiasjuventudcolombia.streamlit.app/"
target="_blank" rel="noopener" class="project-link primary">
<i class="fas fa-external-link-alt"></i> Ver app
</a>
<a href="https://github.com/CarolinaHernandez2019/-monitoreo-noticias-juventud"
target="_blank" rel="noopener" class="project-link">
<i class="fab fa-github"></i> Código
</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ========== SOBRE MI / PERFIL DE JENNY ========== -->
<!-- Seccion con foto, nombre, bio profesional y redes -->
<section class="about-me" id="about">
<div class="section-container">
<h2 class="section-title">Sobre mí</h2>
<div class="about-card">
<div class="about-image">
<img src="profile.jpg" alt="Jenny Carolina Hernández Cardozo">
</div>
<div class="about-content">
<h3 class="about-name">Jenny Carolina Hernández Cardozo</h3>
<p class="about-location"><i class="fas fa-map-marker-alt"></i> Bogotá, Colombia</p>
<p class="about-bio">
Economista y demógrafa, pero aprendiz constante: automatización, visualización
de datos e IA responsable. Tengo +10 años en análisis, investigación y evaluación
de políticas sociales con instituciones públicas colombianas y organizaciones como
el BID en América Latina. Mi especialidad: sistemas de monitoreo y evaluación de
impacto en educación y juventud, convirtiendo datos complejos en información útil
para decisiones de política pública.
</p>
<div class="hero-links">
<a href="https://github.com/CarolinaHernandez2019" target="_blank" rel="noopener" aria-label="GitHub">
<i class="fab fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/carolinahernandezcardozobogota/" target="_blank" rel="noopener" aria-label="LinkedIn">
<i class="fab fa-linkedin"></i>
</a>
<a href="mailto:carolina.hernandez.car@gmail.com" aria-label="Email">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- ========== CONTACTO ========== -->
<section class="contact" id="contact">
<div class="section-container">
<h2 class="section-title">Contacto</h2>
<p class="contact-text">
Si tienes preguntas, ideas o propuestas, no dudes en escribirme.
</p>
<div class="contact-links">
<a href="mailto:carolina.hernandez.car@gmail.com" class="contact-btn">
<i class="fas fa-envelope"></i> Escríbeme
</a>
<a href="https://github.com/CarolinaHernandez2019" target="_blank" rel="noopener" class="contact-btn secondary">
<i class="fab fa-github"></i> GitHub
</a>
<a href="https://www.linkedin.com/in/carolinahernandezcardozobogota/" target="_blank" rel="noopener" class="contact-btn secondary">
<i class="fab fa-linkedin"></i> LinkedIn
</a>
</div>
</div>
</section>
<!-- ========== FOOTER ========== -->
<footer class="footer">
<div class="section-container">
<p>© 2026 Jenny Carolina Hernández Cardozo · Cosas de Datos</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>