@icarusmx/creta 0.4.2 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/creta.js +198 -15
- package/package.json +7 -2
- package/templates/sveltekit-portfolio/src/routes/+page.svelte +42 -198
package/bin/creta.js
CHANGED
|
@@ -199,22 +199,205 @@ function applyPageModifications(content, level) {
|
|
|
199
199
|
</p>
|
|
200
200
|
</div>
|
|
201
201
|
</section>`,
|
|
202
|
-
`<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
202
|
+
`<section id="inicio" class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
203
203
|
<div class="max-w-4xl mx-auto px-4 text-center">
|
|
204
|
-
<
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
<
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
204
|
+
<div class="animate-fade-in">
|
|
205
|
+
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
|
|
206
|
+
Hola, soy {{STUDENT_NAME}}
|
|
207
|
+
</h1>
|
|
208
|
+
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
|
|
209
|
+
Soy un desarrollador apasionado por crear productos digitales que impacten positivamente.
|
|
210
|
+
Aprendo construyendo y siempre busco nuevos desafíos.
|
|
211
|
+
</p>
|
|
212
|
+
<div class="flex justify-center space-x-4">
|
|
213
|
+
<a href="#proyectos" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg transition-colors duration-200 font-medium">
|
|
214
|
+
Ver proyectos
|
|
215
|
+
</a>
|
|
216
|
+
<a href="#contacto" class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-lg transition-colors duration-200 font-medium">
|
|
217
|
+
Contáctame
|
|
218
|
+
</a>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
</section>`
|
|
223
|
+
)
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
if (level >= 3) {
|
|
227
|
+
// Add complete sections for level 3
|
|
228
|
+
content = content.replace(
|
|
229
|
+
`<!-- ⚠️ AQUÍ VAN LAS DEMÁS SECCIONES (SOBRE MÍ, PROYECTOS, CONTACTO) -->
|
|
230
|
+
<!-- Revisa los comentarios arriba para saber qué crear -->`,
|
|
231
|
+
`<!-- Sobre mí -->
|
|
232
|
+
<section id="sobre-mi" class="py-20 bg-white">
|
|
233
|
+
<div class="max-w-4xl mx-auto px-4">
|
|
234
|
+
<div class="text-center mb-16">
|
|
235
|
+
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Sobre mí</h2>
|
|
236
|
+
<div class="w-20 h-1 bg-blue-600 mx-auto mb-8"></div>
|
|
237
|
+
</div>
|
|
238
|
+
|
|
239
|
+
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
240
|
+
<div>
|
|
241
|
+
<div class="bg-gray-100 aspect-square rounded-lg flex items-center justify-center mb-6 md:mb-0">
|
|
242
|
+
<span class="text-gray-500 text-lg">Tu foto aquí</span>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div>
|
|
246
|
+
<p class="text-lg text-gray-600 mb-6 leading-relaxed">
|
|
247
|
+
Soy un desarrollador apasionado por crear productos digitales que impacten positivamente.
|
|
248
|
+
Aprendo construyendo y siempre busco nuevos desafíos que me permitan crecer profesionalmente.
|
|
249
|
+
</p>
|
|
250
|
+
<div class="grid grid-cols-2 gap-4">
|
|
251
|
+
<div class="bg-blue-50 p-4 rounded-lg text-center">
|
|
252
|
+
<div class="text-2xl font-bold text-blue-600">2+</div>
|
|
253
|
+
<div class="text-sm text-gray-600">Años aprendiendo</div>
|
|
254
|
+
</div>
|
|
255
|
+
<div class="bg-green-50 p-4 rounded-lg text-center">
|
|
256
|
+
<div class="text-2xl font-bold text-green-600">5+</div>
|
|
257
|
+
<div class="text-sm text-gray-600">Proyectos</div>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
</section>
|
|
264
|
+
|
|
265
|
+
<!-- Proyectos -->
|
|
266
|
+
<section id="proyectos" class="py-20 bg-gray-50">
|
|
267
|
+
<div class="max-w-6xl mx-auto px-4">
|
|
268
|
+
<div class="text-center mb-16">
|
|
269
|
+
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Mis Proyectos</h2>
|
|
270
|
+
<div class="w-20 h-1 bg-blue-600 mx-auto mb-8"></div>
|
|
271
|
+
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
272
|
+
Algunos de los proyectos en los que he trabajado y que demuestran mis habilidades
|
|
273
|
+
</p>
|
|
274
|
+
</div>
|
|
275
|
+
|
|
276
|
+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
277
|
+
<!-- Proyecto 1 -->
|
|
278
|
+
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-200 project-card">
|
|
279
|
+
<div class="bg-gradient-to-br from-blue-400 to-blue-600 h-48 flex items-center justify-center">
|
|
280
|
+
<span class="text-white text-lg font-medium">Proyecto 1</span>
|
|
281
|
+
</div>
|
|
282
|
+
<div class="p-6">
|
|
283
|
+
<h3 class="text-xl font-semibold text-gray-900 mb-3">Nombre del Proyecto</h3>
|
|
284
|
+
<p class="text-gray-600 mb-4">Descripción breve del proyecto y las tecnologías utilizadas.</p>
|
|
285
|
+
<div class="flex space-x-3">
|
|
286
|
+
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver código</a>
|
|
287
|
+
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver demo</a>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
</div>
|
|
291
|
+
|
|
292
|
+
<!-- Proyecto 2 -->
|
|
293
|
+
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-200 project-card">
|
|
294
|
+
<div class="bg-gradient-to-br from-green-400 to-green-600 h-48 flex items-center justify-center">
|
|
295
|
+
<span class="text-white text-lg font-medium">Proyecto 2</span>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="p-6">
|
|
298
|
+
<h3 class="text-xl font-semibold text-gray-900 mb-3">Nombre del Proyecto</h3>
|
|
299
|
+
<p class="text-gray-600 mb-4">Descripción breve del proyecto y las tecnologías utilizadas.</p>
|
|
300
|
+
<div class="flex space-x-3">
|
|
301
|
+
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver código</a>
|
|
302
|
+
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver demo</a>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
|
|
307
|
+
<!-- Proyecto 3 -->
|
|
308
|
+
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-200 project-card">
|
|
309
|
+
<div class="bg-gradient-to-br from-purple-400 to-purple-600 h-48 flex items-center justify-center">
|
|
310
|
+
<span class="text-white text-lg font-medium">Proyecto 3</span>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="p-6">
|
|
313
|
+
<h3 class="text-xl font-semibold text-gray-900 mb-3">Nombre del Proyecto</h3>
|
|
314
|
+
<p class="text-gray-600 mb-4">Descripción breve del proyecto y las tecnologías utilizadas.</p>
|
|
315
|
+
<div class="flex space-x-3">
|
|
316
|
+
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver código</a>
|
|
317
|
+
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver demo</a>
|
|
318
|
+
</div>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
</section>
|
|
324
|
+
|
|
325
|
+
<!-- Contacto -->
|
|
326
|
+
<section id="contacto" class="py-20 bg-white">
|
|
327
|
+
<div class="max-w-4xl mx-auto px-4">
|
|
328
|
+
<div class="text-center mb-16">
|
|
329
|
+
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Contacto</h2>
|
|
330
|
+
<div class="w-20 h-1 bg-blue-600 mx-auto mb-8"></div>
|
|
331
|
+
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
332
|
+
¿Tienes un proyecto en mente? ¡Hablemos y veamos cómo puedo ayudarte!
|
|
333
|
+
</p>
|
|
334
|
+
</div>
|
|
335
|
+
|
|
336
|
+
<div class="grid md:grid-cols-2 gap-12">
|
|
337
|
+
<div>
|
|
338
|
+
<h3 class="text-xl font-semibold text-gray-900 mb-6">Información de contacto</h3>
|
|
339
|
+
<div class="space-y-4">
|
|
340
|
+
<div class="flex items-center space-x-3">
|
|
341
|
+
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
|
342
|
+
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
343
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
344
|
+
</svg>
|
|
345
|
+
</div>
|
|
346
|
+
<div>
|
|
347
|
+
<p class="text-gray-900 font-medium">Email</p>
|
|
348
|
+
<p class="text-gray-600">tu.email@ejemplo.com</p>
|
|
349
|
+
</div>
|
|
350
|
+
</div>
|
|
351
|
+
|
|
352
|
+
<div class="flex items-center space-x-3">
|
|
353
|
+
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
|
354
|
+
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
355
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
|
356
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
357
|
+
</svg>
|
|
358
|
+
</div>
|
|
359
|
+
<div>
|
|
360
|
+
<p class="text-gray-900 font-medium">Ubicación</p>
|
|
361
|
+
<p class="text-gray-600">Tu ciudad, País</p>
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
</div>
|
|
365
|
+
|
|
366
|
+
<div class="mt-8">
|
|
367
|
+
<h4 class="text-lg font-medium text-gray-900 mb-4">Sígueme</h4>
|
|
368
|
+
<div class="flex space-x-4">
|
|
369
|
+
<a href="#" class="w-10 h-10 bg-gray-100 hover:bg-blue-100 rounded-lg flex items-center justify-center transition-colors duration-200">
|
|
370
|
+
<span class="text-gray-600 hover:text-blue-600">LI</span>
|
|
371
|
+
</a>
|
|
372
|
+
<a href="#" class="w-10 h-10 bg-gray-100 hover:bg-blue-100 rounded-lg flex items-center justify-center transition-colors duration-200">
|
|
373
|
+
<span class="text-gray-600 hover:text-blue-600">GH</span>
|
|
374
|
+
</a>
|
|
375
|
+
<a href="#" class="w-10 h-10 bg-gray-100 hover:bg-blue-100 rounded-lg flex items-center justify-center transition-colors duration-200">
|
|
376
|
+
<span class="text-gray-600 hover:text-blue-600">TW</span>
|
|
377
|
+
</a>
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
|
|
382
|
+
<div>
|
|
383
|
+
<form class="space-y-6">
|
|
384
|
+
<div>
|
|
385
|
+
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nombre</label>
|
|
386
|
+
<input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent">
|
|
387
|
+
</div>
|
|
388
|
+
<div>
|
|
389
|
+
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
|
|
390
|
+
<input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent">
|
|
391
|
+
</div>
|
|
392
|
+
<div>
|
|
393
|
+
<label for="message" class="block text-sm font-medium text-gray-700 mb-2">Mensaje</label>
|
|
394
|
+
<textarea id="message" name="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent"></textarea>
|
|
395
|
+
</div>
|
|
396
|
+
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg transition-colors duration-200 font-medium">
|
|
397
|
+
Enviar mensaje
|
|
398
|
+
</button>
|
|
399
|
+
</form>
|
|
400
|
+
</div>
|
|
218
401
|
</div>
|
|
219
402
|
</div>
|
|
220
403
|
</section>`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@icarusmx/creta",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"description": "Salgamos de este laberinto.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -9,5 +9,10 @@
|
|
|
9
9
|
"keywords": ["cli", "icarus", "creta", "scythe", "software school"],
|
|
10
10
|
"author": "Guillermo Rodríguez López",
|
|
11
11
|
"publishConfig": { "access": "public" },
|
|
12
|
-
"license": "MIT"
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"chalk": "^5.3.0",
|
|
15
|
+
"chokidar": "^3.5.3",
|
|
16
|
+
"node-fetch": "^3.3.2"
|
|
17
|
+
}
|
|
13
18
|
}
|
|
@@ -1,20 +1,46 @@
|
|
|
1
1
|
<!--
|
|
2
|
-
🌟 RETO
|
|
3
|
-
|
|
2
|
+
🌟 RETO CRETA: PORTAFOLIO PERSONAL
|
|
3
|
+
==================================
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
¡Bienvenido de vuelta! Es hora de crear tu portafolio personal.
|
|
6
|
+
Este proyecto incluye varios retos que puedes completar paso a paso:
|
|
7
|
+
|
|
8
|
+
🧭 RETO 1: NAVBAR (archivo +layout.svelte)
|
|
9
|
+
- Crear la navegación principal
|
|
10
|
+
- Incluir tu logo y enlaces a las secciones
|
|
11
|
+
|
|
12
|
+
🎯 RETO 2: HERO SECTION (esta sección)
|
|
13
|
+
- Crear la sección principal de tu portfolio
|
|
14
|
+
- Incluir tu nombre como título principal
|
|
7
15
|
- Una descripción breve de quién eres
|
|
8
16
|
- Un botón de llamada a la acción
|
|
9
|
-
- Opcionalmente: tu foto o avatar
|
|
10
17
|
|
|
11
|
-
|
|
18
|
+
📝 RETO 3: SOBRE MÍ
|
|
19
|
+
- Sección con información personal
|
|
20
|
+
- Tu foto o avatar
|
|
21
|
+
- Habilidades y experiencia
|
|
22
|
+
|
|
23
|
+
🚀 RETO 4: PROYECTOS
|
|
24
|
+
- Muestra tus mejores proyectos
|
|
25
|
+
- Incluye imágenes, descripciones y enlaces
|
|
26
|
+
|
|
27
|
+
📧 RETO 5: CONTACTO
|
|
28
|
+
- Formulario de contacto
|
|
29
|
+
- Información de contacto
|
|
30
|
+
- Enlaces a redes sociales
|
|
31
|
+
|
|
32
|
+
💡 Si te quedas atascado, puedes usar:
|
|
33
|
+
- creta portafolio-1 (para desbloquear navbar)
|
|
34
|
+
- creta portafolio-2 (para desbloquear navbar + hero)
|
|
35
|
+
- creta portafolio-3 (para la solución completa)
|
|
36
|
+
|
|
37
|
+
TIPS DE TAILWIND para la HERO SECTION:
|
|
12
38
|
- Usa 'min-h-screen flex items-center justify-center' para centrar verticalmente
|
|
13
39
|
- Usa 'text-4xl md:text-6xl font-bold' para títulos grandes y responsivos
|
|
14
40
|
- Usa 'text-lg text-gray-600 mb-8' para descripciones
|
|
15
41
|
- Usa 'bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg' para botones
|
|
16
42
|
|
|
17
|
-
ESTRUCTURA SUGERIDA:
|
|
43
|
+
ESTRUCTURA SUGERIDA PARA HERO:
|
|
18
44
|
```html
|
|
19
45
|
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
20
46
|
<div class="max-w-4xl mx-auto px-4 text-center">
|
|
@@ -37,199 +63,17 @@
|
|
|
37
63
|
<meta name="description" content="Portafolio personal de {{STUDENT_NAME}}" />
|
|
38
64
|
</svelte:head>
|
|
39
65
|
|
|
40
|
-
<section
|
|
66
|
+
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
41
67
|
<!-- ⚠️ COMPLETA AQUÍ LA SECCIÓN HERO -->
|
|
42
68
|
<div class="max-w-4xl mx-auto px-4 text-center">
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
</p>
|
|
50
|
-
<div class="flex justify-center space-x-4">
|
|
51
|
-
<a href="#proyectos" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg transition-colors duration-200 font-medium">
|
|
52
|
-
Ver proyectos
|
|
53
|
-
</a>
|
|
54
|
-
<a href="#contacto" class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-lg transition-colors duration-200 font-medium">
|
|
55
|
-
Contáctame
|
|
56
|
-
</a>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
69
|
+
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
|
|
70
|
+
Gracias por seguir aquí
|
|
71
|
+
</h1>
|
|
72
|
+
<p class="text-lg text-gray-600 mb-8">
|
|
73
|
+
Abre el proyecto usando <code>code .</code> y sigue las instrucciones. Si tienes dudas, apóyate en el equipo
|
|
74
|
+
</p>
|
|
59
75
|
</div>
|
|
60
76
|
</section>
|
|
61
77
|
|
|
62
|
-
<!--
|
|
63
|
-
|
|
64
|
-
<div class="max-w-4xl mx-auto px-4">
|
|
65
|
-
<div class="text-center mb-16">
|
|
66
|
-
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Sobre mí</h2>
|
|
67
|
-
<div class="w-20 h-1 bg-blue-600 mx-auto mb-8"></div>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
71
|
-
<div>
|
|
72
|
-
<div class="bg-gray-100 aspect-square rounded-lg flex items-center justify-center mb-6 md:mb-0">
|
|
73
|
-
<span class="text-gray-500 text-lg">Tu foto aquí</span>
|
|
74
|
-
</div>
|
|
75
|
-
</div>
|
|
76
|
-
<div>
|
|
77
|
-
<p class="text-lg text-gray-600 mb-6 leading-relaxed">
|
|
78
|
-
<!-- ⚠️ PERSONALIZA TU DESCRIPCIÓN AQUÍ -->
|
|
79
|
-
Soy un desarrollador apasionado por crear productos digitales que impacten positivamente.
|
|
80
|
-
Aprendo construyendo y siempre busco nuevos desafíos que me permitan crecer profesionalmente.
|
|
81
|
-
</p>
|
|
82
|
-
<div class="grid grid-cols-2 gap-4">
|
|
83
|
-
<div class="bg-blue-50 p-4 rounded-lg text-center">
|
|
84
|
-
<div class="text-2xl font-bold text-blue-600">2+</div>
|
|
85
|
-
<div class="text-sm text-gray-600">Años aprendiendo</div>
|
|
86
|
-
</div>
|
|
87
|
-
<div class="bg-green-50 p-4 rounded-lg text-center">
|
|
88
|
-
<div class="text-2xl font-bold text-green-600">5+</div>
|
|
89
|
-
<div class="text-sm text-gray-600">Proyectos</div>
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
</section>
|
|
96
|
-
|
|
97
|
-
<!-- Proyectos -->
|
|
98
|
-
<section id="proyectos" class="py-20 bg-gray-50">
|
|
99
|
-
<div class="max-w-6xl mx-auto px-4">
|
|
100
|
-
<div class="text-center mb-16">
|
|
101
|
-
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Mis Proyectos</h2>
|
|
102
|
-
<div class="w-20 h-1 bg-blue-600 mx-auto mb-8"></div>
|
|
103
|
-
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
104
|
-
Algunos de los proyectos en los que he trabajado y que demuestran mis habilidades
|
|
105
|
-
</p>
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
109
|
-
<!-- Proyecto 1 -->
|
|
110
|
-
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-200 project-card">
|
|
111
|
-
<div class="bg-gradient-to-br from-blue-400 to-blue-600 h-48 flex items-center justify-center">
|
|
112
|
-
<span class="text-white text-lg font-medium">Proyecto 1</span>
|
|
113
|
-
</div>
|
|
114
|
-
<div class="p-6">
|
|
115
|
-
<h3 class="text-xl font-semibold text-gray-900 mb-3">Nombre del Proyecto</h3>
|
|
116
|
-
<p class="text-gray-600 mb-4">Descripción breve del proyecto y las tecnologías utilizadas.</p>
|
|
117
|
-
<div class="flex space-x-3">
|
|
118
|
-
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver código</a>
|
|
119
|
-
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver demo</a>
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
|
|
124
|
-
<!-- Proyecto 2 -->
|
|
125
|
-
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-200 project-card">
|
|
126
|
-
<div class="bg-gradient-to-br from-green-400 to-green-600 h-48 flex items-center justify-center">
|
|
127
|
-
<span class="text-white text-lg font-medium">Proyecto 2</span>
|
|
128
|
-
</div>
|
|
129
|
-
<div class="p-6">
|
|
130
|
-
<h3 class="text-xl font-semibold text-gray-900 mb-3">Nombre del Proyecto</h3>
|
|
131
|
-
<p class="text-gray-600 mb-4">Descripción breve del proyecto y las tecnologías utilizadas.</p>
|
|
132
|
-
<div class="flex space-x-3">
|
|
133
|
-
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver código</a>
|
|
134
|
-
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver demo</a>
|
|
135
|
-
</div>
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
<!-- Proyecto 3 -->
|
|
140
|
-
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-200 project-card">
|
|
141
|
-
<div class="bg-gradient-to-br from-purple-400 to-purple-600 h-48 flex items-center justify-center">
|
|
142
|
-
<span class="text-white text-lg font-medium">Proyecto 3</span>
|
|
143
|
-
</div>
|
|
144
|
-
<div class="p-6">
|
|
145
|
-
<h3 class="text-xl font-semibold text-gray-900 mb-3">Nombre del Proyecto</h3>
|
|
146
|
-
<p class="text-gray-600 mb-4">Descripción breve del proyecto y las tecnologías utilizadas.</p>
|
|
147
|
-
<div class="flex space-x-3">
|
|
148
|
-
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver código</a>
|
|
149
|
-
<a href="#" class="text-blue-600 hover:text-blue-700 text-sm font-medium">Ver demo</a>
|
|
150
|
-
</div>
|
|
151
|
-
</div>
|
|
152
|
-
</div>
|
|
153
|
-
</div>
|
|
154
|
-
</div>
|
|
155
|
-
</section>
|
|
156
|
-
|
|
157
|
-
<!-- Contacto -->
|
|
158
|
-
<section id="contacto" class="py-20 bg-white">
|
|
159
|
-
<div class="max-w-4xl mx-auto px-4">
|
|
160
|
-
<div class="text-center mb-16">
|
|
161
|
-
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Contacto</h2>
|
|
162
|
-
<div class="w-20 h-1 bg-blue-600 mx-auto mb-8"></div>
|
|
163
|
-
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
164
|
-
¿Tienes un proyecto en mente? ¡Hablemos y veamos cómo puedo ayudarte!
|
|
165
|
-
</p>
|
|
166
|
-
</div>
|
|
167
|
-
|
|
168
|
-
<div class="grid md:grid-cols-2 gap-12">
|
|
169
|
-
<div>
|
|
170
|
-
<h3 class="text-xl font-semibold text-gray-900 mb-6">Información de contacto</h3>
|
|
171
|
-
<div class="space-y-4">
|
|
172
|
-
<div class="flex items-center space-x-3">
|
|
173
|
-
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
|
174
|
-
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
175
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
176
|
-
</svg>
|
|
177
|
-
</div>
|
|
178
|
-
<div>
|
|
179
|
-
<p class="text-gray-900 font-medium">Email</p>
|
|
180
|
-
<p class="text-gray-600">tu.email@ejemplo.com</p>
|
|
181
|
-
</div>
|
|
182
|
-
</div>
|
|
183
|
-
|
|
184
|
-
<div class="flex items-center space-x-3">
|
|
185
|
-
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
|
186
|
-
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
187
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
|
188
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
189
|
-
</svg>
|
|
190
|
-
</div>
|
|
191
|
-
<div>
|
|
192
|
-
<p class="text-gray-900 font-medium">Ubicación</p>
|
|
193
|
-
<p class="text-gray-600">Tu ciudad, País</p>
|
|
194
|
-
</div>
|
|
195
|
-
</div>
|
|
196
|
-
</div>
|
|
197
|
-
|
|
198
|
-
<div class="mt-8">
|
|
199
|
-
<h4 class="text-lg font-medium text-gray-900 mb-4">Sígueme</h4>
|
|
200
|
-
<div class="flex space-x-4">
|
|
201
|
-
<a href="#" class="w-10 h-10 bg-gray-100 hover:bg-blue-100 rounded-lg flex items-center justify-center transition-colors duration-200">
|
|
202
|
-
<span class="text-gray-600 hover:text-blue-600">LI</span>
|
|
203
|
-
</a>
|
|
204
|
-
<a href="#" class="w-10 h-10 bg-gray-100 hover:bg-blue-100 rounded-lg flex items-center justify-center transition-colors duration-200">
|
|
205
|
-
<span class="text-gray-600 hover:text-blue-600">GH</span>
|
|
206
|
-
</a>
|
|
207
|
-
<a href="#" class="w-10 h-10 bg-gray-100 hover:bg-blue-100 rounded-lg flex items-center justify-center transition-colors duration-200">
|
|
208
|
-
<span class="text-gray-600 hover:text-blue-600">TW</span>
|
|
209
|
-
</a>
|
|
210
|
-
</div>
|
|
211
|
-
</div>
|
|
212
|
-
</div>
|
|
213
|
-
|
|
214
|
-
<div>
|
|
215
|
-
<form class="space-y-6">
|
|
216
|
-
<div>
|
|
217
|
-
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nombre</label>
|
|
218
|
-
<input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent">
|
|
219
|
-
</div>
|
|
220
|
-
<div>
|
|
221
|
-
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
|
|
222
|
-
<input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent">
|
|
223
|
-
</div>
|
|
224
|
-
<div>
|
|
225
|
-
<label for="message" class="block text-sm font-medium text-gray-700 mb-2">Mensaje</label>
|
|
226
|
-
<textarea id="message" name="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent"></textarea>
|
|
227
|
-
</div>
|
|
228
|
-
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg transition-colors duration-200 font-medium">
|
|
229
|
-
Enviar mensaje
|
|
230
|
-
</button>
|
|
231
|
-
</form>
|
|
232
|
-
</div>
|
|
233
|
-
</div>
|
|
234
|
-
</div>
|
|
235
|
-
</section>
|
|
78
|
+
<!-- ⚠️ AQUÍ VAN LAS DEMÁS SECCIONES (SOBRE MÍ, PROYECTOS, CONTACTO) -->
|
|
79
|
+
<!-- Revisa los comentarios arriba para saber qué crear -->
|