Repositorio base para construir varias demos de sitios web dentro de un mismo proyecto Astro, con una estructura pensada para mantener cada demo aislada, ordenada y facil de escalar.
La idea es tener un solo frontend de soporte para el sitio base y organizar cada demo como una subcarpeta independiente dentro del repo. Cada demo tendra su propio codigo, sus propios componentes y sus propios textos, sin compartir implementacion con las demas demos.
La capa comun solo debe cubrir lo necesario para el proyecto completo:
- Layout base y metadatos globales.
- Enrutamiento por idioma.
- Utilidades de contenido e i18n.
- Estilos globales minimos y tokens compartidos del sitio principal.
- Una demo = una subcarpeta aislada dentro de
src/demos/. - Los textos de cada demo viven fuera del codigo visual, en Markdown.
- El soporte de idiomas se resuelve por ruta y por contenido, no por deteccion automatica.
- Espanol e ingles se mantienen como versiones paralelas de cada demo.
- Las rutas de cada demo se exponen como paginas distintas del sitio, no como texto plano ni como bloques sueltos.
- La base visual del proyecto usa Tailwind CSS v4.
- La tipografia global y la capa de animaciones se definen desde
src/styles/global.css. - Las animaciones locales existentes se conservan; esta configuracion solo centraliza la base compartida.
/
├── public/
│ └── assets/ # Recursos estaticos globales si hacen falta
├── src/
│ ├── assets/ # Imagenes o recursos usados por el sitio base
│ ├── content/
│ │ └── demos/
│ │ ├── demo-1/
│ │ │ ├── es.md # Textos de la demo 1 en espanol
│ │ │ └── en.md # Textos de la demo 1 en ingles
│ │ ├── demo-2/
│ │ │ ├── es.md
│ │ │ └── en.md
│ │ ├── demo-3/
│ │ │ ├── es.md
│ │ │ └── en.md
│ │ └── demo-4/
│ │ ├── es.md
│ │ └── en.md
│ ├── demos/
│ │ ├── demo-1/
│ │ │ ├── components/ # UI exclusiva de la demo 1
│ │ │ ├── data/ # Datos, mocks o helpers solo de esa demo
│ │ │ ├── types.ts # Tipos propios de la demo 1
│ │ │ └── Demo.astro # Entrada visual principal de la demo 1
│ │ ├── demo-2/
│ │ │ ├── components/
│ │ │ ├── data/
│ │ │ ├── types.ts
│ │ │ └── Demo.astro
│ │ ├── demo-3/
│ │ │ ├── components/
│ │ │ ├── data/
│ │ │ ├── types.ts
│ │ │ └── Demo.astro
│ │ └── demo-4/
│ │ ├── components/
│ │ ├── data/
│ │ ├── types.ts
│ │ └── Demo.astro
│ ├── layouts/
│ │ └── Layout.astro # Layout general del sitio
│ ├── lib/
│ │ ├── i18n/ # Helpers comunes para idioma y rutas
│ │ └── content/ # Utilidades para leer Markdown o colecciones
│ ├── pages/
│ │ ├── index.astro # Redireccion o landing inicial
│ │ ├── es/
│ │ │ ├── index.astro # Home en espanol
│ │ │ └── demos/
│ │ │ ├── demo-1.astro
│ │ │ ├── demo-2.astro
│ │ │ ├── demo-3.astro
│ │ │ └── demo-4.astro
│ │ └── en/
│ │ ├── index.astro # Home en ingles
│ │ └── demos/
│ │ ├── demo-1.astro
│ │ ├── demo-2.astro
│ │ ├── demo-3.astro
│ │ └── demo-4.astro
│ └── styles/
│ └── global.css # Estilos base y tokens minimos
├── astro.config.mjs
├── package.json
└── README.md
Cada demo tendra su propia carpeta en src/demos/<demo>/ y ahi vivira todo lo que le pertenece: componentes, helpers, tipos y cualquier logica visual o interactiva que no deba mezclarse con otras demos.
Las paginas de src/pages/es/demos/*.astro y src/pages/en/demos/*.astro solo actuaran como envoltorios de ruta. Su trabajo sera:
- Resolver el idioma.
- Leer el Markdown correspondiente.
- Pasar los datos a
src/demos/<demo>/Demo.astro. - Renderizar la demo dentro del layout comun.
Con ese enfoque se logra:
- Aislamiento real entre demos.
- Menor repeticion de estructura.
- i18n claro por ruta y por contenido.
- Escalabilidad para agregar mas demos sin romper las existentes.
eses el idioma principal visible por defecto.enes la version paralela de cada demo.- Cada demo mantiene el mismo slug en ambos idiomas.
- Los textos no se hardcodean dentro del componente visual salvo casos tecnicos muy puntuales.
- Se crea o actualiza el Markdown de la demo en
src/content/demos/<demo>/es.mdysrc/content/demos/<demo>/en.md. - La pagina de ruta correspondiente carga ese contenido.
- El componente principal de la demo recibe los datos y renderiza la UI.
- El layout comun se encarga del marco general, SEO basico y estructura HTML.
El repo todavia conserva la base generada por Astro, asi que esta propuesta funciona como la guia de evolucion del proyecto. El siguiente paso logico es sustituir el starter por la primera demo real y luego replicar la misma convencion para las otras tres.
| Demo | Propósito | Descripción |
|---|---|---|
| aeterna | Viaje histórico interactivo | Experiencia cronológica inmersiva desde la prehistoria hasta el futuro cyberpunk, con narrativa visual por época |
| aura_weather | Creative coding / visualización climática | Aplicación interactiva con mapa explorable que transforma datos climáticos en experiencias visuales con partículas, shaders y transiciones metaballs |
| elite-vows | Landing editorial de boda de lujo | Invitación premium para evento en Lake Como con parallax, timeline de ceremonia y secciones de storytelling |
| lumina | Portfolio de fotografía artística | Portafolio editorial contemporáneo con galería tipo bento, filosofía visual y servicios especializados en fotografía |
| nf-archive | Experiencia visual musical | Showcase de la discografía de NF con biografía, galería de álbumes, tienda de merchandise y enlaces sociales |
| tech-nexus-consulting | Landing corporativa B2B | Sitio de consultoría de crecimiento técnico con métricas, servicios, testimonios y FAQ |
Un viaje interactivo y cronológico que explora los hitos fundamentales de la evolución humana. Desde el dominio del fuego y el arte rupestre hasta la superinteligencia artificial, conecta el misticismo del pasado antiguo, la precisión de la ingeniería clásica, el despertar de la razón, las revoluciones del acero y el salto cuántico de la era digital. Cada época se presenta con una narrativa visual inmersiva, detalles tipográficos y simbología propia.
Rutas: /es/aeterna · /en/aeterna
Demostración técnica de creative coding que transforma el clima en una experiencia visual inmersiva. Toda la pantalla es un mapa explorable (MapLibre) donde el clima cobra vida a través de shaders, colores, partículas de lluvia/nieve y transiciones metaballs. Incluye modo de demostración que cicla por los 6 estados climáticos sin necesidad de navegar el mapa. Usa APIs gratuitas sin API key (Open-Meteo, Nominatim, OpenFreeMap). Rendimiento optimizado a 60fps.
Rutas: /es/aura_weather · /en/aura_weather
Landing editorial de evento premium para una boda de lujo en Lake Como, Italia. Presenta hero con parallax, timeline de la ceremonia con secciones de storytelling, dress code con tarjetas elegantes, sección RSVP y información del venue. Bloques de contenido con espaciado generoso y tipografía de lujo que refuerzan la atmósfera de exclusividad y elegancia.
Rutas: /es/elite-vows · /en/elite-vows
Portafolio editorial contemporáneo de fotografía artística con layout cinematográfico. Incluye galería modular tipo bento con composiciones de distintas proporciones, sección de filosofía visual, servicios especializados (arquitectura, producto, editorial), proceso creativo en 4 pasos y formulario de contacto. Diseño minimalista con énfasis en el espacio negativo, la narrativa visual y la presentación de imágenes como "stills" de una historia.
Rutas: /es/lumina · /en/lumina
Experiencia visual inmersiva dedicada a la discografía del rapero NF (Nathan Feuerstein). Incluye hero con biografía y estadísticas, galería de 7 álbumes con descripciones detalladas, listas de tracks, tienda oficial de merchandise con enlace a Shopify, y sección de enlaces a redes sociales. Cada álbum presenta su propia paleta de colores y estadísticas de Billboard, certificaciones y streams.
Rutas: /es/nf-archive · /en/nf-archive
Landing corporativa de consultoría de crecimiento técnico para equipos B2B. Incluye hero con CTAs, sección de propuesta de valor con 4 tarjetas de servicios, métricas de impacto (+145% pipeline, -35% CAC, 3x velocidad de decisión), proceso de trabajo en 3 pasos, testimonios de clientes, FAQ y formulario de auditoría gratuita. Diseño profesional orientado a conversión con arquitectura de información clara.
Rutas: /es/tech-nexus-consulting · /en/tech-nexus-consulting
pnpm install
pnpm dev
pnpm build
pnpm preview
pnpm astro -- --help