@icarusmx/creta 0.3.1 → 0.4.0
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 +4 -1
- package/package.json +1 -1
- package/templates/sveltekit-portfolio/src/app.css +51 -1
- package/templates/sveltekit-portfolio/src/routes/+layout.svelte +15 -2
- package/templates/sveltekit-portfolio/src/routes/+page.svelte +192 -7
- package/templates/sveltekit-portfolio/static/logo.png +0 -0
- package/templates/sveltekit-portfolio/static/favicon.png +0 -1
package/bin/creta.js
CHANGED
|
@@ -145,7 +145,10 @@ function applyLayoutModifications(content, level) {
|
|
|
145
145
|
`<nav class="bg-white shadow-sm">
|
|
146
146
|
<div class="max-w-7xl mx-auto px-4">
|
|
147
147
|
<div class="flex justify-between items-center py-3">
|
|
148
|
-
<div class="
|
|
148
|
+
<div class="flex items-center space-x-3">
|
|
149
|
+
<img src="/logo.png" alt="Logo" class="w-8 h-8">
|
|
150
|
+
<span class="text-xl font-bold text-gray-900">{{STUDENT_NAME}}</span>
|
|
151
|
+
</div>
|
|
149
152
|
<div class="hidden md:flex space-x-6">
|
|
150
153
|
<a href="#inicio" class="text-gray-600 hover:text-blue-600">Inicio</a>
|
|
151
154
|
<a href="#sobre-mi" class="text-gray-600 hover:text-blue-600">Sobre mí</a>
|
package/package.json
CHANGED
|
@@ -1,3 +1,53 @@
|
|
|
1
1
|
@tailwind base;
|
|
2
2
|
@tailwind components;
|
|
3
|
-
@tailwind utilities;
|
|
3
|
+
@tailwind utilities;
|
|
4
|
+
|
|
5
|
+
/* Animaciones personalizadas */
|
|
6
|
+
@keyframes fade-in {
|
|
7
|
+
from {
|
|
8
|
+
opacity: 0;
|
|
9
|
+
transform: translateY(20px);
|
|
10
|
+
}
|
|
11
|
+
to {
|
|
12
|
+
opacity: 1;
|
|
13
|
+
transform: translateY(0);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.animate-fade-in {
|
|
18
|
+
animation: fade-in 1s ease-out;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Mejoras de scroll suave */
|
|
22
|
+
html {
|
|
23
|
+
scroll-behavior: smooth;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Estilos personalizados para el código */
|
|
27
|
+
code {
|
|
28
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Hover effects para las tarjetas de proyectos */
|
|
32
|
+
.project-card {
|
|
33
|
+
transition: transform 0.2s ease-in-out;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.project-card:hover {
|
|
37
|
+
transform: translateY(-5px);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Efectos de focus mejorados */
|
|
41
|
+
input:focus,
|
|
42
|
+
textarea:focus {
|
|
43
|
+
outline: none;
|
|
44
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Gradientes personalizados */
|
|
48
|
+
.gradient-text {
|
|
49
|
+
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
|
|
50
|
+
-webkit-background-clip: text;
|
|
51
|
+
-webkit-text-fill-color: transparent;
|
|
52
|
+
background-clip: text;
|
|
53
|
+
}
|
|
@@ -48,12 +48,25 @@
|
|
|
48
48
|
<nav class="bg-white shadow-sm">
|
|
49
49
|
<div class="max-w-7xl mx-auto px-4">
|
|
50
50
|
<div class="flex justify-between items-center py-3">
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
<div class="flex items-center space-x-3">
|
|
52
|
+
<img src="/logo.png" alt="Logo" class="w-8 h-8">
|
|
53
|
+
<span class="text-xl font-bold text-gray-900">{{STUDENT_NAME}}</span>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="hidden md:flex space-x-6">
|
|
56
|
+
<a href="#inicio">Inicio</a>
|
|
57
|
+
<a href="#sobre-mi">Sobre mí</a>
|
|
58
|
+
<a href="#proyectos">Proyectos</a>
|
|
59
|
+
<a href="#contacto">Contacto</a>
|
|
60
|
+
</div>
|
|
53
61
|
</div>
|
|
54
62
|
</div>
|
|
55
63
|
</nav>
|
|
56
64
|
```
|
|
65
|
+
|
|
66
|
+
PERSONALIZACIÓN DEL LOGO:
|
|
67
|
+
- Reemplaza /logo.png con tu propio logo
|
|
68
|
+
- El logo debe ser preferiblemente de 32x32px o similar
|
|
69
|
+
- Formatos recomendados: PNG, SVG, JPG
|
|
57
70
|
-->
|
|
58
71
|
|
|
59
72
|
<nav class="bg-white shadow-sm">
|
|
@@ -37,14 +37,199 @@
|
|
|
37
37
|
<meta name="description" content="Portafolio personal de {{STUDENT_NAME}}" />
|
|
38
38
|
</svelte:head>
|
|
39
39
|
|
|
40
|
-
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
40
|
+
<section id="inicio" class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
41
41
|
<!-- ⚠️ COMPLETA AQUÍ LA SECCIÓN HERO -->
|
|
42
42
|
<div class="max-w-4xl mx-auto px-4 text-center">
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
43
|
+
<div class="animate-fade-in">
|
|
44
|
+
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
|
|
45
|
+
Gracias por seguir aquí
|
|
46
|
+
</h1>
|
|
47
|
+
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
|
|
48
|
+
Abre el proyecto usando <code class="bg-gray-200 px-2 py-1 rounded text-sm">code .</code> y sigue las instrucciones. Si tienes dudas, apóyate en el equipo
|
|
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>
|
|
59
|
+
</div>
|
|
60
|
+
</section>
|
|
61
|
+
|
|
62
|
+
<!-- Sobre mí -->
|
|
63
|
+
<section id="sobre-mi" class="py-20 bg-white">
|
|
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>
|
|
49
234
|
</div>
|
|
50
235
|
</section>
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#3b82f6"/><text x="16" y="20" font-family="Arial" font-size="18" fill="white" text-anchor="middle">C</text></svg>
|