-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathproyectos.html
More file actions
389 lines (363 loc) · 39.1 KB
/
proyectos.html
File metadata and controls
389 lines (363 loc) · 39.1 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portafolio de proyectos de desarrollo web de Jonahan Isrrael Caballero Morales - Desarrollador Frontend especializado en Vue.js, JavaScript y tecnologías modernas">
<meta name="keywords" content="desarrollador web, portafolio, proyectos, Vue.js, JavaScript, frontend, desarrollo web">
<meta name="author" content="Jonahan Isrrael Caballero Morales">
<meta name="robots" content="index, follow">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Proyectos - Portafolio JICM">
<meta property="og:description" content="Explora mis proyectos de desarrollo web y aplicaciones modernas">
<meta property="og:image" content="img/me.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Proyectos - Portafolio JICM">
<meta property="twitter:description" content="Explora mis proyectos de desarrollo web y aplicaciones modernas">
<title>Proyectos - Portafolio JICM | Desarrollador Frontend</title>
<!-- Preload critical resources -->
<link rel="preload" href="styles/styles-proyects.css" as="style">
<link rel="preload" href="https://unpkg.com/lucide@latest" as="script">
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<link rel="icon" href="img/jicmico.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/styles-proyects.css">
<link rel="stylesheet" href="styles/style-cha-ia.css">
</head>
<body>
<main class="portfolio-grid" role="main" aria-label="Portafolio de proyectos">
<!-- Proyecto destacado principal -->
<article class="portfolio-item item-featured" role="article" aria-labelledby="moviexd-title">
<img src="img/peliculasxd.png" alt="Captura de pantalla del proyecto MOVIEXD - Catálogo de películas" class="portfolio-item-background" loading="lazy">
<div class="portfolio-item-content">
<div class="portfolio-item-tech" role="group" aria-label="Tecnologías utilizadas">
<div class="tech-tags">
<span class="tech-tag" aria-label="Vue.js">
<svg viewBox="0 0 256 221" width="256" height="221" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" aria-hidden="true">
<path d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z" fill="#41B883"/>
<path d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z" fill="#41B883"/>
<path d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z" fill="#35495E"/>
</svg>
</span>
<span class="tech-tag" aria-label="JavaScript">
<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 1052 1052" aria-hidden="true">
<path fill="#f0db4f" d="M0 0h1052v1052H0z"/>
<path d="M965.9 801.1c-7.7-48-39-88.3-131.7-125.9-32.2-14.8-68.1-25.399-78.8-49.8-3.8-14.2-4.3-22.2-1.9-30.8 6.9-27.9 40.2-36.6 66.6-28.6 17 5.7 33.1 18.801 42.8 39.7 45.4-29.399 45.3-29.2 77-49.399-11.6-18-17.8-26.301-25.4-34-27.3-30.5-64.5-46.2-124-45-10.3 1.3-20.699 2.699-31 4-29.699 7.5-58 23.1-74.6 44-49.8 56.5-35.6 155.399 25 196.1 59.7 44.8 147.4 55 158.6 96.9 10.9 51.3-37.699 67.899-86 62-35.6-7.4-55.399-25.5-76.8-58.4-39.399 22.8-39.399 22.8-79.899 46.1 9.6 21 19.699 30.5 35.8 48.7 76.2 77.3 266.899 73.5 301.1-43.5 1.399-4.001 10.6-30.801 3.199-72.101zm-394-317.6h-98.4c0 85-.399 169.4-.399 254.4 0 54.1 2.8 103.7-6 118.9-14.4 29.899-51.7 26.2-68.7 20.399-17.3-8.5-26.1-20.6-36.3-37.699-2.8-4.9-4.9-8.7-5.601-9-26.699 16.3-53.3 32.699-80 49 13.301 27.3 32.9 51 58 66.399 37.5 22.5 87.9 29.4 140.601 17.3 34.3-10 63.899-30.699 79.399-62.199 22.4-41.3 17.6-91.3 17.4-146.6.5-90.2 0-180.4 0-270.9z" fill="#323330"/>
</svg>
</span>
<span class="tech-tag" aria-label="CSS3">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" aria-hidden="true">
<path fill="#264de4" d="M71.357 460.819 30.272 0h451.456l-41.129 460.746L255.724 512z"/>
<path fill="#2965f1" d="m405.388 431.408 35.148-393.73H256v435.146z"/>
<path fill="#ebebeb" d="m124.46 208.59 5.065 56.517H256V208.59zm-5.041-57.875H256V94.197H114.281zM256 355.372l-.248.066-62.944-16.996-4.023-45.076h-56.736l7.919 88.741 115.772 32.14.26-.073z"/>
<path fill="#fff" d="M255.805 208.59v56.517H325.4l-6.56 73.299-63.035 17.013v58.8l115.864-32.112.85-9.549 13.28-148.792 1.38-15.176 10.203-114.393H255.805v56.518h79.639L330.3 208.59z"/>
</svg>
</span>
<span class="tech-tag" aria-label="Vite">
<svg viewBox="0 0 256 257" width="256" height="257" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" aria-hidden="true">
<defs>
<linearGradient x1="-.828%" y1="7.652%" x2="57.636%" y2="78.411%" id="a">
<stop stop-color="#41D1FF" offset="0%"/>
<stop stop-color="#BD34FE" offset="100%"/>
</linearGradient>
<linearGradient x1="43.376%" y1="2.242%" x2="50.316%" y2="89.03%" id="b">
<stop stop-color="#FFEA83" offset="0%"/>
<stop stop-color="#FFDD35" offset="8.333%"/>
<stop stop-color="#FFA800" offset="100%"/>
</linearGradient>
</defs>
<path d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z" fill="url(#a)"/>
<path d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z" fill="url(#b)"/>
</svg>
</span>
</div>
</div>
<div>
<h3 id="moviexd-title" class="portfolio-title">MOVIEXD - Catálogo de Películas con Vue</h3>
<p class="portfolio-description">Single Page App (SPA) interactiva que consume la API de TMDB para mostrar películas populares, con búsqueda en tiempo real, filtros por género y reproductor de tráilers. Desarrollada con Vue 3, Vite y CSS moderno, destacando componentes reactivos y diseño responsive.</p>
<div class="portfolio-item-links" role="group" aria-label="Enlaces del proyecto">
<a href="https://github.com/IsrraDex36/pelisxd/tree/main" target="_blank" rel="noopener noreferrer" class="portfolio-link" aria-label="Ver código fuente en GitHub">
<i data-lucide="github" aria-hidden="true"></i>
</a>
<a href="https://pelisxd.netlify.app/" target="_blank" rel="noopener noreferrer" class="portfolio-link" aria-label="Ver proyecto en vivo">
<i data-lucide="link" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</article>
<!-- Elemento GIF decorativo -->
<div class="portfolio-item gif-item" role="img" aria-label="Animación decorativa">
<img src="img/bob.gif" alt="Animación decorativa de Bob Esponja" class="portfolio-item-background" loading="lazy">
</div>
<!-- Proyecto vertical -->
<article class="portfolio-item item-vertical" role="article" aria-labelledby="pokedex-title">
<img src="img/pokedexapi.png" alt="Captura de pantalla del proyecto API Pokedex" class="portfolio-item-background" loading="lazy">
<div class="portfolio-item-content">
<div class="portfolio-item-tech" role="group" aria-label="Tecnologías utilizadas">
<div class="tech-tags">
<span class="tech-tag" aria-label="HTML5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 520" aria-hidden="true">
<path fill="#e34f26" d="M41 460L0 0h451l-41 460-185 52" />
<path fill="#ef652a" d="M226 472l149-41 35-394H226" />
<path fill="#ecedee" d="M226 208h-75l-5-58h80V94H84l15 171h127zm0 147l-64-17-4-45h-56l7 89 117 32z"/>
<path fill="#fff" d="M226 265h69l-7 73-62 17v59l115-32 16-174H226zm0-171v56h136l5-56z"/>
</svg>
</span>
<span class="tech-tag" aria-label="JavaScript">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1052 1052" aria-hidden="true">
<path fill="#f0db4f" d="M0 0h1052v1052H0z"/>
<path d="M965.9 801.1c-7.7-48-39-88.3-131.7-125.9-32.2-14.8-68.1-25.399-78.8-49.8-3.8-14.2-4.3-22.2-1.9-30.8 6.9-27.9 40.2-36.6 66.6-28.6 17 5.7 33.1 18.801 42.8 39.7 45.4-29.399 45.3-29.2 77-49.399-11.6-18-17.8-26.301-25.4-34-27.3-30.5-64.5-46.2-124-45-10.3 1.3-20.699 2.699-31 4-29.699 7.5-58 23.1-74.6 44-49.8 56.5-35.6 155.399 25 196.1 59.7 44.8 147.4 55 158.6 96.9 10.9 51.3-37.699 67.899-86 62-35.6-7.4-55.399-25.5-76.8-58.4-39.399 22.8-39.399 22.8-79.899 46.1 9.6 21 19.699 30.5 35.8 48.7 76.2 77.3 266.899 73.5 301.1-43.5 1.399-4.001 10.6-30.801 3.199-72.101zm-394-317.6h-98.4c0 85-.399 169.4-.399 254.4 0 54.1 2.8 103.7-6 118.9-14.4 29.899-51.7 26.2-68.7 20.399-17.3-8.5-26.1-20.6-36.3-37.699-2.8-4.9-4.9-8.7-5.601-9-26.699 16.3-53.3 32.699-80 49 13.301 27.3 32.9 51 58 66.399 37.5 22.5 87.9 29.4 140.601 17.3 34.3-10 63.899-30.699 79.399-62.199 22.4-41.3 17.6-91.3 17.4-146.6.5-90.2 0-180.4 0-270.9z" fill="#323330"/>
</svg>
</span>
<span class="tech-tag" aria-label="CSS3">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" aria-hidden="true">
<path fill="#264de4" d="M71.357 460.819 30.272 0h451.456l-41.129 460.746L255.724 512z"/>
<path fill="#2965f1" d="m405.388 431.408 35.148-393.73H256v435.146z"/>
<path fill="#ebebeb" d="m124.46 208.59 5.065 56.517H256V208.59zm-5.041-57.875H256V94.197H114.281zM256 355.372l-.248.066-62.944-16.996-4.023-45.076h-56.736l7.919 88.741 115.772 32.14.26-.073z"/>
<path fill="#fff" d="M255.805 208.59v56.517H325.4l-6.56 73.299-63.035 17.013v58.8l115.864-32.112.85-9.549 13.28-148.792 1.38-15.176 10.203-114.393H255.805v56.518h79.639L330.3 208.59z"/>
</svg>
</span>
</div>
</div>
<div>
<h3 id="pokedex-title" class="portfolio-title">API Pokedex</h3>
<p class="portfolio-description">API de Pokédex con datos detallados de Pokémon, estadísticas y habilidades en tiempo real.</p>
<div class="portfolio-item-links" role="group" aria-label="Enlaces del proyecto">
<a href="https://github.com/IsrraDex36/PokedexApi" target="_blank" rel="noopener noreferrer" class="portfolio-link" aria-label="Ver código fuente en GitHub">
<i data-lucide="github" aria-hidden="true"></i>
</a>
<a href="https://peppy-biscotti-ade567.netlify.app/" target="_blank" rel="noopener noreferrer" class="portfolio-link" aria-label="Ver proyecto en vivo">
<i data-lucide="link" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</article>
<!-- Mini elemento informativo -->
<section class="portfolio-item portfolio-item-mini" role="complementary" aria-labelledby="agile-title">
<i data-lucide="git-branch" aria-hidden="true"></i>
<h3 id="agile-title">Metodología ágil</h3>
<p>Todos mis proyectos siguen principios de desarrollo ágil y clean code</p>
</section>
<!-- Proyecto ancho -->
<div class="portfolio-item item-wide">
<img src="img/clima-api.png" alt="Aplicación Móvil" class="portfolio-item-background">
<div class="portfolio-item-content">
<div class="portfolio-item-tech">
<div class="tech-tags">
<span class="tech-tag"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 520">
<path fill="#e34f26" d="M41 460L0 0h451l-41 460-185 52" />
<path fill="#ef652a" d="M226 472l149-41 35-394H226" />
<path fill="#ecedee" d="M226 208h-75l-5-58h80V94H84l15 171h127zm0 147l-64-17-4-45h-56l7 89 117 32z"/>
<path fill="#fff" d="M226 265h69l-7 73-62 17v59l115-32 16-174H226zm0-171v56h136l5-56z"/>
</svg> </span>
<span class="tech-tag"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1052 1052"><path fill="#f0db4f" d="M0 0h1052v1052H0z"/><path d="M965.9 801.1c-7.7-48-39-88.3-131.7-125.9-32.2-14.8-68.1-25.399-78.8-49.8-3.8-14.2-4.3-22.2-1.9-30.8 6.9-27.9 40.2-36.6 66.6-28.6 17 5.7 33.1 18.801 42.8 39.7 45.4-29.399 45.3-29.2 77-49.399-11.6-18-17.8-26.301-25.4-34-27.3-30.5-64.5-46.2-124-45-10.3 1.3-20.699 2.699-31 4-29.699 7.5-58 23.1-74.6 44-49.8 56.5-35.6 155.399 25 196.1 59.7 44.8 147.4 55 158.6 96.9 10.9 51.3-37.699 67.899-86 62-35.6-7.4-55.399-25.5-76.8-58.4-39.399 22.8-39.399 22.8-79.899 46.1 9.6 21 19.699 30.5 35.8 48.7 76.2 77.3 266.899 73.5 301.1-43.5 1.399-4.001 10.6-30.801 3.199-72.101zm-394-317.6h-98.4c0 85-.399 169.4-.399 254.4 0 54.1 2.8 103.7-6 118.9-14.4 29.899-51.7 26.2-68.7 20.399-17.3-8.5-26.1-20.6-36.3-37.699-2.8-4.9-4.9-8.7-5.601-9-26.699 16.3-53.3 32.699-80 49 13.301 27.3 32.9 51 58 66.399 37.5 22.5 87.9 29.4 140.601 17.3 34.3-10 63.899-30.699 79.399-62.199 22.4-41.3 17.6-91.3 17.4-146.6.5-90.2 0-180.4 0-270.9z" fill="#323330"/></svg> </span>
<span class="tech-tag"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#264de4" d="M71.357 460.819 30.272 0h451.456l-41.129 460.746L255.724 512z"/><path fill="#2965f1" d="m405.388 431.408 35.148-393.73H256v435.146z"/><path fill="#ebebeb" d="m124.46 208.59 5.065 56.517H256V208.59zm-5.041-57.875H256V94.197H114.281zM256 355.372l-.248.066-62.944-16.996-4.023-45.076h-56.736l7.919 88.741 115.772 32.14.26-.073z"/><path fill="#fff" d="M255.805 208.59v56.517H325.4l-6.56 73.299-63.035 17.013v58.8l115.864-32.112.85-9.549 13.28-148.792 1.38-15.176 10.203-114.393H255.805v56.518h79.639L330.3 208.59z"/></svg></span>
</div>
</div>
<div>
<h3 class="portfolio-title">Clima Api</h3>
<p class="portfolio-description">App web con la API de OpenWeatherMap que muestra temperatura y clima actual al buscar una ciudad.</p>
<div class="portfolio-item-links">
<a href="https://github.com/IsrraDex36/Clima-Api" target="_blank" class="portfolio-link"><i data-lucide="github"></i></a>
<a href="https://clima-api-jicm.netlify.app/" target="_blank" class="portfolio-link"><i data-lucide="link"></i></a>
</div>
</div>
</div>
</div>
<!-- Nuevo proyecto añadido -->
<div class="portfolio-item">
<img src="img/gemini-api.png" alt="API REST" class="portfolio-item-background">
<div class="portfolio-item-content">
<div class="portfolio-item-tech">
<div class="tech-tags">
<span class="tech-tag"><svg viewBox="0 0 256 292" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="292"><defs><linearGradient id="a" x1="68.188%" x2="27.823%" y1="17.487%" y2="89.755%"><stop offset="0%" stop-color="#41873F"/><stop offset="32.88%" stop-color="#418B3D"/><stop offset="63.52%" stop-color="#419637"/><stop offset="93.19%" stop-color="#3FA92D"/><stop offset="100%" stop-color="#3FAE2A"/></linearGradient><linearGradient id="c" x1="43.277%" x2="159.245%" y1="55.169%" y2="-18.306%"><stop offset="13.76%" stop-color="#41873F"/><stop offset="40.32%" stop-color="#54A044"/><stop offset="71.36%" stop-color="#66B848"/><stop offset="90.81%" stop-color="#6CC04A"/></linearGradient><linearGradient id="f" x1="-4.389%" x2="101.499%" y1="49.997%" y2="49.997%"><stop offset="9.192%" stop-color="#6CC04A"/><stop offset="28.64%" stop-color="#66B848"/><stop offset="59.68%" stop-color="#54A044"/><stop offset="86.24%" stop-color="#41873F"/></linearGradient><path id="b" d="M134.923 1.832c-4.344-2.443-9.502-2.443-13.846 0L6.787 67.801C2.443 70.244 0 74.859 0 79.745v132.208c0 4.887 2.715 9.502 6.787 11.945l114.29 65.968c4.344 2.444 9.502 2.444 13.846 0l114.29-65.968c4.344-2.443 6.787-7.058 6.787-11.945V79.745c0-4.886-2.715-9.501-6.787-11.944L134.923 1.832Z"/><path id="e" d="M134.923 1.832c-4.344-2.443-9.502-2.443-13.846 0L6.787 67.801C2.443 70.244 0 74.859 0 79.745v132.208c0 4.887 2.715 9.502 6.787 11.945l114.29 65.968c4.344 2.444 9.502 2.444 13.846 0l114.29-65.968c4.344-2.443 6.787-7.058 6.787-11.945V79.745c0-4.886-2.715-9.501-6.787-11.944L134.923 1.832Z"/></defs><path fill="url(#a)" d="M134.923 1.832c-4.344-2.443-9.502-2.443-13.846 0L6.787 67.801C2.443 70.244 0 74.859 0 79.745v132.208c0 4.887 2.715 9.502 6.787 11.945l114.29 65.968c4.344 2.444 9.502 2.444 13.846 0l114.29-65.968c4.344-2.443 6.787-7.058 6.787-11.945V79.745c0-4.886-2.715-9.501-6.787-11.944L134.923 1.832Z"/><mask id="d" fill="#fff"><use xlink:href="#b"/></mask><path fill="url(#c)" d="M249.485 67.8 134.65 1.833c-1.086-.542-2.443-1.085-3.529-1.357L2.443 220.912c1.086 1.357 2.444 2.443 3.8 3.258l114.834 65.968c3.258 1.9 7.059 2.443 10.588 1.357L252.47 70.515c-.815-1.086-1.9-1.9-2.986-2.714Z" mask="url(#d)"/><mask id="g" fill="#fff"><use xlink:href="#e"/></mask><path fill="url(#f)" d="M249.756 223.898c3.258-1.9 5.701-5.158 6.787-8.687L130.579.204c-3.258-.543-6.787-.272-9.773 1.628L6.786 67.53l122.979 224.238c1.628-.272 3.529-.815 5.158-1.63l114.833-66.239Z" mask="url(#g)"/></svg></span>
<span class="tech-tag"><svg viewBox="0 0 256 221" width="256" height="221" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z" fill="#41B883"/><path d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z" fill="#41B883"/><path d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z" fill="#35495E"/></svg></span>
<span class="tech-tag"><svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 1052 1052"><path fill="#f0db4f" d="M0 0h1052v1052H0z"/><path d="M965.9 801.1c-7.7-48-39-88.3-131.7-125.9-32.2-14.8-68.1-25.399-78.8-49.8-3.8-14.2-4.3-22.2-1.9-30.8 6.9-27.9 40.2-36.6 66.6-28.6 17 5.7 33.1 18.801 42.8 39.7 45.4-29.399 45.3-29.2 77-49.399-11.6-18-17.8-26.301-25.4-34-27.3-30.5-64.5-46.2-124-45-10.3 1.3-20.699 2.699-31 4-29.699 7.5-58 23.1-74.6 44-49.8 56.5-35.6 155.399 25 196.1 59.7 44.8 147.4 55 158.6 96.9 10.9 51.3-37.699 67.899-86 62-35.6-7.4-55.399-25.5-76.8-58.4-39.399 22.8-39.399 22.8-79.899 46.1 9.6 21 19.699 30.5 35.8 48.7 76.2 77.3 266.899 73.5 301.1-43.5 1.399-4.001 10.6-30.801 3.199-72.101zm-394-317.6h-98.4c0 85-.399 169.4-.399 254.4 0 54.1 2.8 103.7-6 118.9-14.4 29.899-51.7 26.2-68.7 20.399-17.3-8.5-26.1-20.6-36.3-37.699-2.8-4.9-4.9-8.7-5.601-9-26.699 16.3-53.3 32.699-80 49 13.301 27.3 32.9 51 58 66.399 37.5 22.5 87.9 29.4 140.601 17.3 34.3-10 63.899-30.699 79.399-62.199 22.4-41.3 17.6-91.3 17.4-146.6.5-90.2 0-180.4 0-270.9z" fill="#323330"/></svg></span>
<span class="tech-tag"><svg viewBox="0 0 256 257" width="256" height="257" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><defs><linearGradient x1="-.828%" y1="7.652%" x2="57.636%" y2="78.411%" id="a"><stop stop-color="#41D1FF" offset="0%"/><stop stop-color="#BD34FE" offset="100%"/></linearGradient><linearGradient x1="43.376%" y1="2.242%" x2="50.316%" y2="89.03%" id="b"><stop stop-color="#FFEA83" offset="0%"/><stop stop-color="#FFDD35" offset="8.333%"/><stop stop-color="#FFA800" offset="100%"/></linearGradient></defs><path d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z" fill="url(#a)"/><path d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z" fill="url(#b)"/></svg></span>
</div>
</div>
<div>
<h3 class="portfolio-title">Gemini api</h3>
<p class="portfolio-description">Aplicación full-stack (Vue + Node) que consume Gemini AI para generación de texto con chat animado.</p>
<div class="portfolio-item-links">
<a href="https://github.com/IsrraDex36/gemini-writer" target="_blank" class="portfolio-link"><i data-lucide="github"></i></a>
<a href="https://writer-gemini-api.netlify.app/" target="_blank" class="portfolio-link"><i data-lucide="link"></i></a>
</div>
</div>
</div>
</div>
<!-- Elemento GIF decorativo -->
<div class="portfolio-item gif-item">
<img src="img/ardilla.gif" alt="GIF Animado" class="portfolio-item-background">
</div>
<!-- Mini elemento informativo -->
<div class="portfolio-item portfolio-item-mini">
<i data-lucide="smartphone"></i>
<h3>Diseño responsivo</h3>
<p>Todos mis proyectos están optimizados para cualquier dispositivo</p>
</div>
<!-- Nuevo proyecto añadido -->
<div class="portfolio-item item-tall">
<img src="img/tetrisjicm.png" alt="Machine Learning" class="portfolio-item-background">
<div class="portfolio-item-content">
<div class="portfolio-item-tech">
<div class="tech-tags">
<span class="tech-tag"><svg viewBox="0 0 256 257" width="256" height="257" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><defs><linearGradient x1="-.828%" y1="7.652%" x2="57.636%" y2="78.411%" id="a"><stop stop-color="#41D1FF" offset="0%"/><stop stop-color="#BD34FE" offset="100%"/></linearGradient><linearGradient x1="43.376%" y1="2.242%" x2="50.316%" y2="89.03%" id="b"><stop stop-color="#FFEA83" offset="0%"/><stop stop-color="#FFDD35" offset="8.333%"/><stop stop-color="#FFA800" offset="100%"/></linearGradient></defs><path d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z" fill="url(#a)"/><path d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z" fill="url(#b)"/></svg></span>
<span class="tech-tag"><svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 1052 1052"><path fill="#f0db4f" d="M0 0h1052v1052H0z"/><path d="M965.9 801.1c-7.7-48-39-88.3-131.7-125.9-32.2-14.8-68.1-25.399-78.8-49.8-3.8-14.2-4.3-22.2-1.9-30.8 6.9-27.9 40.2-36.6 66.6-28.6 17 5.7 33.1 18.801 42.8 39.7 45.4-29.399 45.3-29.2 77-49.399-11.6-18-17.8-26.301-25.4-34-27.3-30.5-64.5-46.2-124-45-10.3 1.3-20.699 2.699-31 4-29.699 7.5-58 23.1-74.6 44-49.8 56.5-35.6 155.399 25 196.1 59.7 44.8 147.4 55 158.6 96.9 10.9 51.3-37.699 67.899-86 62-35.6-7.4-55.399-25.5-76.8-58.4-39.399 22.8-39.399 22.8-79.899 46.1 9.6 21 19.699 30.5 35.8 48.7 76.2 77.3 266.899 73.5 301.1-43.5 1.399-4.001 10.6-30.801 3.199-72.101zm-394-317.6h-98.4c0 85-.399 169.4-.399 254.4 0 54.1 2.8 103.7-6 118.9-14.4 29.899-51.7 26.2-68.7 20.399-17.3-8.5-26.1-20.6-36.3-37.699-2.8-4.9-4.9-8.7-5.601-9-26.699 16.3-53.3 32.699-80 49 13.301 27.3 32.9 51 58 66.399 37.5 22.5 87.9 29.4 140.601 17.3 34.3-10 63.899-30.699 79.399-62.199 22.4-41.3 17.6-91.3 17.4-146.6.5-90.2 0-180.4 0-270.9z" fill="#323330"/></svg></span>
<span class="tech-tag"><svg viewBox="0 0 256 221" width="256" height="221" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z" fill="#41B883"/><path d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z" fill="#41B883"/><path d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z" fill="#35495E"/></svg></span>
<span class="tech-tag"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#264de4" d="M71.357 460.819 30.272 0h451.456l-41.129 460.746L255.724 512z"/><path fill="#2965f1" d="m405.388 431.408 35.148-393.73H256v435.146z"/><path fill="#ebebeb" d="m124.46 208.59 5.065 56.517H256V208.59zm-5.041-57.875H256V94.197H114.281zM256 355.372l-.248.066-62.944-16.996-4.023-45.076h-56.736l7.919 88.741 115.772 32.14.26-.073z"/><path fill="#fff" d="M255.805 208.59v56.517H325.4l-6.56 73.299-63.035 17.013v58.8l115.864-32.112.85-9.549 13.28-148.792 1.38-15.176 10.203-114.393H255.805v56.518h79.639L330.3 208.59z"/></svg></span>
</div>
</div>
<div>
<h3 class="portfolio-title">Tetris juego clásico</h3>
<p class="portfolio-description">Tetris Vue - Clon moderno del clásico juego, desarrollado con Vue.js. Gráficos mejorados, efectos visuales, sistema de puntuación y controles intuitivos.</p>
<div class="portfolio-item-links">
<a href="https://github.com/IsrraDex36/tetrisjicm" target="_blank" class="portfolio-link"><i data-lucide="github"></i></a>
<a href="https://tetris-vue.netlify.app/" target="_blank" class="portfolio-link"><i data-lucide="link"></i></a>
</div>
</div>
</div>
</div>
<!-- Nuevo proyecto añadido
<div class="portfolio-item">
<img src="img/casisatv2.png" alt="Web Scraping" class="portfolio-item-background">
<div class="portfolio-item-content">
<div class="portfolio-item-tech">
<div class="tech-tags">
<span class="tech-tag">Python</span>
<span class="tech-tag">BeautifulSoup</span>
<span class="tech-tag">Selenium</span>
</div>
</div>
<div>
<h3 class="portfolio-title">Herramienta de Web Scraping</h3>
<p class="portfolio-description">Recolección y análisis automatizado de datos con almacenamiento en cloud.</p>
<div class="portfolio-item-links">
<a href="#" class="portfolio-link"><i data-lucide="github"></i></a>
<a href="#" class="portfolio-link"><i data-lucide="link"></i></a>
</div>
</div>
</div>
</div>
<div class="portfolio-item">
<img src="img/casisatv2.png" alt="Chatbot" class="portfolio-item-background">
<div class="portfolio-item-content">
<div class="portfolio-item-tech">
<div class="tech-tags">
<span class="tech-tag">Dialogflow</span>
<span class="tech-tag">Node.js</span>
<span class="tech-tag">Webhooks</span>
</div>
</div>
<div>
<h3 class="portfolio-title">Chatbot Inteligente</h3>
<p class="portfolio-description">Asistente virtual con procesamiento de lenguaje natural para servicio al cliente.</p>
<div class="portfolio-item-links">
<a href="#" class="portfolio-link"><i data-lucide="github"></i></a>
<a href="#" class="portfolio-link"><i data-lucide="link"></i></a>
</div>
</div>
</div>
</div>
-->
<div class="portfolio-item portfolio-item-mini">
<i data-lucide="zap"></i>
<h3>Buen rendimiento</h3>
<p>Optimización de código para máxima eficiencia</p>
</div>
<div class="portfolio-item">
<img src="img/gitimat.png" alt="API REST" class="portfolio-item-background">
<div class="portfolio-item-content">
<div class="portfolio-item-tech">
<div class="tech-tags">
<span class="tech-tag"><svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#264de4" d="M71.357 460.819 30.272 0h451.456l-41.129 460.746L255.724 512z"/><path fill="#2965f1" d="m405.388 431.408 35.148-393.73H256v435.146z"/><path fill="#ebebeb" d="m124.46 208.59 5.065 56.517H256V208.59zm-5.041-57.875H256V94.197H114.281zM256 355.372l-.248.066-62.944-16.996-4.023-45.076h-56.736l7.919 88.741 115.772 32.14.26-.073z"/><path fill="#fff" d="M255.805 208.59v56.517H325.4l-6.56 73.299-63.035 17.013v58.8l115.864-32.112.85-9.549 13.28-148.792 1.38-15.176 10.203-114.393H255.805v56.518h79.639L330.3 208.59z"/></svg></span>
<span class="tech-tag"><svg viewBox="0 0 256 257" width="256" height="257" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><defs><linearGradient x1="-.828%" y1="7.652%" x2="57.636%" y2="78.411%" id="a"><stop stop-color="#41D1FF" offset="0%"/><stop stop-color="#BD34FE" offset="100%"/></linearGradient><linearGradient x1="43.376%" y1="2.242%" x2="50.316%" y2="89.03%" id="b"><stop stop-color="#FFEA83" offset="0%"/><stop stop-color="#FFDD35" offset="8.333%"/><stop stop-color="#FFA800" offset="100%"/></linearGradient></defs><path d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z" fill="url(#a)"/><path d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z" fill="url(#b)"/></svg></span>
<span class="tech-tag"><svg viewBox="0 0 256 221" width="256" height="221" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z" fill="#41B883"/><path d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z" fill="#41B883"/><path d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z" fill="#35495E"/></svg></span>
<span class="tech-tag"><svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 1052 1052"><path fill="#f0db4f" d="M0 0h1052v1052H0z"/><path d="M965.9 801.1c-7.7-48-39-88.3-131.7-125.9-32.2-14.8-68.1-25.399-78.8-49.8-3.8-14.2-4.3-22.2-1.9-30.8 6.9-27.9 40.2-36.6 66.6-28.6 17 5.7 33.1 18.801 42.8 39.7 45.4-29.399 45.3-29.2 77-49.399-11.6-18-17.8-26.301-25.4-34-27.3-30.5-64.5-46.2-124-45-10.3 1.3-20.699 2.699-31 4-29.699 7.5-58 23.1-74.6 44-49.8 56.5-35.6 155.399 25 196.1 59.7 44.8 147.4 55 158.6 96.9 10.9 51.3-37.699 67.899-86 62-35.6-7.4-55.399-25.5-76.8-58.4-39.399 22.8-39.399 22.8-79.899 46.1 9.6 21 19.699 30.5 35.8 48.7 76.2 77.3 266.899 73.5 301.1-43.5 1.399-4.001 10.6-30.801 3.199-72.101zm-394-317.6h-98.4c0 85-.399 169.4-.399 254.4 0 54.1 2.8 103.7-6 118.9-14.4 29.899-51.7 26.2-68.7 20.399-17.3-8.5-26.1-20.6-36.3-37.699-2.8-4.9-4.9-8.7-5.601-9-26.699 16.3-53.3 32.699-80 49 13.301 27.3 32.9 51 58 66.399 37.5 22.5 87.9 29.4 140.601 17.3 34.3-10 63.899-30.699 79.399-62.199 22.4-41.3 17.6-91.3 17.4-146.6.5-90.2 0-180.4 0-270.9z" fill="#323330"/></svg></span>
</div>
</div>
<div>
<h3 class="portfolio-title">GitQuick</h3>
<p class="portfolio-description">GitQuick: aprende Git fácil con comandos y ejemplos prácticos.</p>
<div class="portfolio-item-links">
<a href="https://github.com/IsrraDex36/GitQuick" target="_blank" class="portfolio-link"><i data-lucide="github"></i></a>
<a href="https://gitquickguide.netlify.app/" target="_blank" class="portfolio-link"><i data-lucide="link"></i></a>
</div>
</div>
</div>
</div>
<!-- Mini elemento informativo -->
<div class="portfolio-item gif-item">
<img src="img/programa.gif" alt="GIF Animado" class="portfolio-item-background">
</div>
<!-- Mini elemento informativo -->
<div class="portfolio-item gif-item">
<img src="img/wis.gif" alt="GIF Animado" class="portfolio-item-background">
</div>
<!-- Mini elemento informativo -->
<div class="portfolio-item portfolio-item-mini">
<i data-lucide="bot"></i>
<h3>Más proyectos proximamente.</h3>
<p>Estoy trabajando en algo especial</p>
</div>
<!-- Botón flotante para regresar -->
<nav class="floating-back-container" role="navigation" aria-label="Navegación principal">
<a href="javascript:history.back()" class="floating-back-button" aria-label="Regresar a la página anterior">
<i data-lucide="arrow-left-from-line" aria-hidden="true"></i>
</a>
<span class="floating-back-tooltip">Regresar</span>
</nav>
<!-- Botón asistente IA -->
<button id="chat-button" aria-label="Abrir asistente de chat" aria-expanded="false" aria-controls="chat-box">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot-icon lucide-bot" aria-hidden="true">
<path d="M12 8V4H8"/>
<rect width="16" height="12" x="4" y="8" rx="2"/>
<path d="M2 14h2"/>
<path d="M20 14h2"/>
<path d="M15 13v2"/>
<path d="M9 13v2"/>
</svg>
</button>
<div id="chat-box" role="dialog" aria-labelledby="chat-title" aria-hidden="true">
<div id="chat-header">
<div class="header-title-chat" id="chat-title">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;" aria-hidden="true">
<path d="M4 7.5V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3.5"></path>
<path d="M8 7.5V4"></path>
<path d="M16 7.5V4"></path>
<rect width="20" height="14" x="2" y="7.5" rx="2" ry="2"></rect>
<path d="M12 12v.01"></path>
</svg>
Asistente de Portafolio
</div>
<button id="close-chat" aria-label="Cerrar chat">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div id="chat-messages" role="log" aria-live="polite" aria-label="Mensajes del chat"></div>
<div id="prompt-suggestions" role="group" aria-label="Sugerencias de mensajes"></div>
<div id="chat-input-container">
<div id="chat-input">
<input type="text" id="user-input" placeholder="Escribe tu mensaje..." autocomplete="off" aria-label="Escribir mensaje">
<button id="send-button" aria-label="Enviar mensaje">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
</div>
</div>
</div>
</main>
<!-- Scripts -->
<script src="js/script-ia.js" defer></script>
<script src="js/main.js" defer></script>
</body>
</html>