Skip to content

Commit 171109f

Browse files
cursoragentcursoragent
committed
Transform: Development as complete journey from dream to product
MAJOR PARADIGM SHIFT: Development is now the ENTRY POINT for dreamers Before: Technical resources list After: Complete guided journey with methodology and discipline New Structure: 1. You have an idea - Vision definition and validation 2. Planning & Design - Roadmap, architecture, UI/UX 3. Building the Product - Agile methodology, clean code, quality 4. Launch & Operations - Deployment, monitoring, production 5. Your Product Works - Evolution, monetization, growth Key Messages: - 'Tienes una idea? Aquí la hacemos realidad' - Step-by-step guidance with discipline - From concept to functioning product - Methodology + Science = Success - Software commercializes on .cloud, .net, .co - Contributors receive revenue sharing This is the welcoming guide someone needs when arriving with a dream.
1 parent fe81128 commit 171109f

File tree

2 files changed

+279
-7
lines changed

2 files changed

+279
-7
lines changed

‎_includes/development/journey.html‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
<!-- Development Journey: From Dream to Product -->
2+
<section class="max-w-6xl mx-auto px-8 py-16">
3+
<div class="text-center mb-16">
4+
<h2 class="text-4xl font-bold text-stone-900 mb-6">De la Idea al Producto</h2>
5+
<p class="text-xl text-stone-800 max-w-3xl mx-auto">
6+
¿Tienes un sueño, un proyecto, una idea? Aquí encontrarás la guía completa, paso a paso, para transformarlo en un producto real que funciona.
7+
</p>
8+
</div>
9+
10+
<!-- El Viaje -->
11+
<div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-8 rounded-lg mb-12">
12+
<h3 class="text-3xl font-bold mb-4">🚀 Tu Viaje en Coderic</h3>
13+
<p class="text-xl text-blue-100 mb-6">
14+
Desde el momento en que llegas con tu idea, te acompañamos en cada etapa con metodología, disciplina y las herramientas necesarias
15+
</p>
16+
</div>
17+
18+
<div class="space-y-12">
19+
<!-- Fase 1: La Idea -->
20+
<div class="bg-gradient-to-br from-purple-50 to-purple-100 p-8 rounded-lg shadow-lg border-l-4 border-purple-500">
21+
<div class="flex items-center mb-6">
22+
<div class="bg-purple-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold mr-4">1</div>
23+
<h3 class="text-3xl font-bold text-stone-900">Tienes una Idea</h3>
24+
</div>
25+
<p class="text-stone-800 mb-6 text-lg">
26+
Llegaste a Coderic porque alguien te dijo que aquí puedes realizar tu proyecto. Empecemos por entender tu visión.
27+
</p>
28+
<div class="grid md:grid-cols-2 gap-6">
29+
<div class="bg-white p-6 rounded-lg">
30+
<h4 class="font-bold text-stone-900 mb-3">📝 Define tu Visión</h4>
31+
<ul class="space-y-2 text-stone-800">
32+
<li>• ¿Qué problema resuelves?</li>
33+
<li>• ¿Para quién es tu solución?</li>
34+
<li>• ¿Qué hace especial tu idea?</li>
35+
<li>• ¿Cuál es tu visión a largo plazo?</li>
36+
</ul>
37+
</div>
38+
<div class="bg-white p-6 rounded-lg">
39+
<h4 class="font-bold text-stone-900 mb-3">🎯 Validación</h4>
40+
<ul class="space-y-2 text-stone-800">
41+
<li>• Investiga si ya existe algo similar</li>
42+
<li>• Habla con potenciales usuarios</li>
43+
<li>• Define tu propuesta de valor</li>
44+
<li>• Identifica tu mercado objetivo</li>
45+
</ul>
46+
</div>
47+
</div>
48+
</div>
49+
50+
<!-- Fase 2: Planeación -->
51+
<div class="bg-gradient-to-br from-blue-50 to-blue-100 p-8 rounded-lg shadow-lg border-l-4 border-blue-500">
52+
<div class="flex items-center mb-6">
53+
<div class="bg-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold mr-4">2</div>
54+
<h3 class="text-3xl font-bold text-stone-900">Planeación y Diseño</h3>
55+
</div>
56+
<p class="text-stone-800 mb-6 text-lg">
57+
Antes de escribir código, necesitas un plan sólido. Aquí definimos la estructura y arquitectura de tu proyecto.
58+
</p>
59+
<div class="grid md:grid-cols-3 gap-6">
60+
<div class="bg-white p-6 rounded-lg">
61+
<h4 class="font-bold text-stone-900 mb-3">🗺️ Roadmap</h4>
62+
<ul class="space-y-2 text-stone-800 text-sm">
63+
<li>• Define alcance del MVP</li>
64+
<li>• Prioriza features</li>
65+
<li>• Establece hitos</li>
66+
<li>• Crea timeline realista</li>
67+
</ul>
68+
</div>
69+
<div class="bg-white p-6 rounded-lg">
70+
<h4 class="font-bold text-stone-900 mb-3">📐 Arquitectura</h4>
71+
<ul class="space-y-2 text-stone-800 text-sm">
72+
<li>• Diagramas de flujo</li>
73+
<li>• Modelo de datos</li>
74+
<li>• Diagrama de componentes</li>
75+
<li>• Stack tecnológico</li>
76+
</ul>
77+
</div>
78+
<div class="bg-white p-6 rounded-lg">
79+
<h4 class="font-bold text-stone-900 mb-3">🎨 Diseño UI/UX</h4>
80+
<ul class="space-y-2 text-stone-800 text-sm">
81+
<li>• Wireframes</li>
82+
<li>• User flows</li>
83+
<li>• Prototipos</li>
84+
<li>• Design system</li>
85+
</ul>
86+
</div>
87+
</div>
88+
<div class="mt-6 bg-blue-50 p-4 rounded-lg">
89+
<p class="text-sm text-stone-700">
90+
<strong>Herramientas que usamos:</strong> Figma (diseño), draw.io (diagramas), GitHub Projects (gestión)
91+
</p>
92+
</div>
93+
</div>
94+
95+
<!-- Fase 3: Desarrollo -->
96+
<div class="bg-gradient-to-br from-green-50 to-green-100 p-8 rounded-lg shadow-lg border-l-4 border-green-500">
97+
<div class="flex items-center mb-6">
98+
<div class="bg-green-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold mr-4">3</div>
99+
<h3 class="text-3xl font-bold text-stone-900">Construcción del Producto</h3>
100+
</div>
101+
<p class="text-stone-800 mb-6 text-lg">
102+
Ahora sí, manos a la obra. Aquí es donde tu idea se convierte en código, de forma disciplinada y profesional.
103+
</p>
104+
<div class="space-y-6">
105+
<div class="bg-white p-6 rounded-lg">
106+
<h4 class="font-bold text-stone-900 mb-4">⚡ Metodología Ágil</h4>
107+
<div class="grid md:grid-cols-2 gap-6">
108+
<div>
109+
<p class="text-stone-800 mb-3">Trabajamos en <strong>sprints de 2 semanas</strong>, entregando valor constantemente:</p>
110+
<ul class="space-y-2 text-stone-800 text-sm">
111+
<li>• Planning: Define qué construir</li>
112+
<li>• Daily standups: Sincronización diaria</li>
113+
<li>• Development: Código y pruebas</li>
114+
<li>• Review: Demostración del progreso</li>
115+
<li>• Retrospective: Mejora continua</li>
116+
</ul>
117+
</div>
118+
<div>
119+
<p class="text-stone-800 mb-3">Cada sprint produce <strong>software funcional</strong>:</p>
120+
<ul class="space-y-2 text-stone-800 text-sm">
121+
<li>✓ Código revisado (code reviews)</li>
122+
<li>✓ Tests que pasan</li>
123+
<li>✓ Documentación actualizada</li>
124+
<li>✓ Deploy a staging/producción</li>
125+
<li>✓ Listo para usuarios reales</li>
126+
</ul>
127+
</div>
128+
</div>
129+
</div>
130+
131+
<div class="bg-white p-6 rounded-lg">
132+
<h4 class="font-bold text-stone-900 mb-4">🛠️ Stack Tecnológico Open Source</h4>
133+
<p class="text-stone-800 mb-4">Usamos tecnologías probadas, open source y con gran comunidad:</p>
134+
<div class="grid md:grid-cols-3 gap-4">
135+
<div>
136+
<p class="font-bold text-stone-900 mb-2">Backend</p>
137+
<p class="text-sm text-stone-700">Node.js, Python, PostgreSQL, Redis</p>
138+
</div>
139+
<div>
140+
<p class="font-bold text-stone-900 mb-2">Frontend</p>
141+
<p class="text-sm text-stone-700">React, Next.js, TypeScript, Tailwind</p>
142+
</div>
143+
<div>
144+
<p class="font-bold text-stone-900 mb-2">DevOps</p>
145+
<p class="text-sm text-stone-700">Docker, GitHub Actions, Nginx</p>
146+
</div>
147+
</div>
148+
</div>
149+
150+
<div class="bg-white p-6 rounded-lg">
151+
<h4 class="font-bold text-stone-900 mb-4">✅ Control de Calidad</h4>
152+
<div class="grid md:grid-cols-2 gap-4">
153+
<div>
154+
<p class="font-bold text-stone-800 mb-2">Testing</p>
155+
<ul class="space-y-1 text-stone-700 text-sm">
156+
<li>• Unit tests (Jest, pytest)</li>
157+
<li>• Integration tests</li>
158+
<li>• E2E tests (Playwright)</li>
159+
<li>• Cobertura mínima 80%</li>
160+
</ul>
161+
</div>
162+
<div>
163+
<p class="font-bold text-stone-800 mb-2">Code Quality</p>
164+
<ul class="space-y-1 text-stone-700 text-sm">
165+
<li>• Code reviews obligatorios</li>
166+
<li>• Linters (ESLint, Prettier)</li>
167+
<li>• Git conventional commits</li>
168+
<li>• Documentación en código</li>
169+
</ul>
170+
</div>
171+
</div>
172+
</div>
173+
</div>
174+
</div>
175+
176+
<!-- Fase 4: Lanzamiento -->
177+
<div class="bg-gradient-to-br from-orange-50 to-orange-100 p-8 rounded-lg shadow-lg border-l-4 border-orange-500">
178+
<div class="flex items-center mb-6">
179+
<div class="bg-orange-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold mr-4">4</div>
180+
<h3 class="text-3xl font-bold text-stone-900">Lanzamiento y Operación</h3>
181+
</div>
182+
<p class="text-stone-800 mb-6 text-lg">
183+
Tu producto está listo. Ahora lo ponemos en manos de usuarios reales y nos aseguramos que funcione impecablemente.
184+
</p>
185+
<div class="grid md:grid-cols-2 gap-6">
186+
<div class="bg-white p-6 rounded-lg">
187+
<h4 class="font-bold text-stone-900 mb-3">🚀 Deployment</h4>
188+
<ul class="space-y-2 text-stone-800">
189+
<li>• Infraestructura cloud configurada</li>
190+
<li>• CI/CD automatizado</li>
191+
<li>• Monitoring y alertas</li>
192+
<li>• Backups automáticos</li>
193+
<li>• SSL/TLS configurado</li>
194+
</ul>
195+
</div>
196+
<div class="bg-white p-6 rounded-lg">
197+
<h4 class="font-bold text-stone-900 mb-3">📊 Monitoreo</h4>
198+
<ul class="space-y-2 text-stone-800">
199+
<li>• Logs centralizados</li>
200+
<li>• Métricas de performance</li>
201+
<li>• Error tracking (Sentry)</li>
202+
<li>• Analytics de usuarios</li>
203+
<li>• Uptime monitoring</li>
204+
</ul>
205+
</div>
206+
</div>
207+
</div>
208+
209+
<!-- Fase 5: Producto -->
210+
<div class="bg-gradient-to-br from-pink-50 to-pink-100 p-8 rounded-lg shadow-lg border-l-4 border-pink-500">
211+
<div class="flex items-center mb-6">
212+
<div class="bg-pink-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold mr-4">5</div>
213+
<h3 class="text-3xl font-bold text-stone-900">Tu Producto Funciona</h3>
214+
</div>
215+
<p class="text-stone-800 mb-6 text-lg">
216+
¡Felicidades! Tu idea ahora es un producto real, funcionando, con usuarios. Pero el viaje continúa...
217+
</p>
218+
<div class="grid md:grid-cols-3 gap-6">
219+
<div class="bg-white p-6 rounded-lg">
220+
<h4 class="font-bold text-stone-900 mb-3">📈 Evolución</h4>
221+
<ul class="space-y-2 text-stone-800 text-sm">
222+
<li>• Feedback de usuarios</li>
223+
<li>• Nuevas features</li>
224+
<li>• Mejoras continuas</li>
225+
<li>• Escalamiento</li>
226+
</ul>
227+
</div>
228+
<div class="bg-white p-6 rounded-lg">
229+
<h4 class="font-bold text-stone-900 mb-3">💰 Monetización</h4>
230+
<ul class="space-y-2 text-stone-800 text-sm">
231+
<li>• Tu software está listo</li>
232+
<li>• Se comercializa en .cloud, .net, .co</li>
233+
<li>• Recibes revenue sharing</li>
234+
<li>• Modelo sostenible</li>
235+
</ul>
236+
</div>
237+
<div class="bg-white p-6 rounded-lg">
238+
<h4 class="font-bold text-stone-900 mb-3">🌱 Crecimiento</h4>
239+
<ul class="space-y-2 text-stone-800 text-sm">
240+
<li>• Más colaboradores</li>
241+
<li>• Comunidad crece</li>
242+
<li>• Código open source</li>
243+
<li>• Impacto real</li>
244+
</ul>
245+
</div>
246+
</div>
247+
</div>
248+
</div>
249+
250+
<!-- CTA Final -->
251+
<div class="mt-12 bg-gradient-to-r from-stone-800 to-stone-900 text-white p-12 rounded-lg text-center">
252+
<h3 class="text-3xl font-bold mb-4">¿Listo para Comenzar tu Proyecto?</h3>
253+
<p class="text-xl mb-8 text-gray-200">
254+
Todo comienza con una idea. Nosotros te acompañamos desde ahí hasta tener un producto funcional.
255+
</p>
256+
<div class="flex flex-wrap justify-center gap-4">
257+
<a href="https://github.com/Coderic" class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all">
258+
Ver Proyectos Existentes
259+
</a>
260+
<a href="/community" class="bg-transparent border-2 border-white hover:bg-white hover:text-stone-900 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all">
261+
Únete a la Comunidad
262+
</a>
263+
<a href="/crowdfunding" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all">
264+
Buscar Financiamiento
265+
</a>
266+
</div>
267+
</div>
268+
</section>

‎development/index.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@
1515
<span class="font-semibold">DEVELOPMENT</span>
1616
</div>
1717
<h1 class="text-5xl md:text-6xl font-bold mb-6">
18-
<span class="text-orange-500">Desarrollo</span><br>
19-
<span class="text-white">Recursos y Herramientas para tu Proyecto</span>
18+
<span class="text-orange-500">Tienes una Idea?</span><br>
19+
<span class="text-white">Aquí la Hacemos Realidad</span>
2020
</h1>
2121
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl">
22-
Encuentra las herramientas, metodologías y recursos técnicos que necesitas para desarrollar tu proyecto de software. Aprende, colabora y construye con el apoyo de la comunidad.
22+
Llegaste al lugar correcto. En Desarrollo encontrarás la guía completa, paso a paso, con metodología y disciplina para transformar tu sueño en un producto que funciona.
2323
</p>
2424
<div class="flex flex-wrap gap-4">
25-
<a href="https://github.com/Coderic" class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all transform hover:scale-105">
26-
Ver Proyectos en GitHub
25+
<a href="#journey" class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all transform hover:scale-105">
26+
Comenzar mi Proyecto
2727
</a>
2828
<a href="/community" class="bg-transparent border-2 border-white hover:bg-white hover:text-stone-900 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all">
2929
Únete a la Comunidad
@@ -34,9 +34,9 @@ <h1 class="text-5xl md:text-6xl font-bold mb-6">
3434

3535
<section class="max-w-6xl mx-auto px-8 py-16">
3636
<div class="text-center mb-16">
37-
<h2 class="text-4xl font-bold text-stone-800 mb-4">Metodologías y Mejores Prácticas</h2>
37+
<h2 class="text-4xl font-bold text-stone-800 mb-4">El Camino del Desarrollo</h2>
3838
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
39-
Aprende las metodologías y principios que usamos en Coderic para desarrollar software de calidad. Estas son las prácticas que recomendamos para tu proyecto, basadas en estándares de la industria open source.
39+
No estás solo. Te acompañamos desde tu idea hasta tener un producto funcionando. Con orientación, estructura, metodología y la disciplina necesaria para que tu proyecto se haga realidad.
4040
</p>
4141
</div>
4242

@@ -376,4 +376,8 @@ <h2 class="text-4xl font-bold text-stone-800 mb-6">¿Listo para construir algo i
376376
</div>
377377
</section>
378378

379+
<div id="journey">
380+
{% include development/journey.html %}
381+
</div>
382+
379383
{% include development/engineering-resources.html %}

0 commit comments

Comments
 (0)