Sobrio y Costero - María

Una web minimalista con estética costera construida con Astro, Tailwind CSS y TypeScript.

---

📋 Requisitos Previos

• Node.js: >=18.0.0 (recomendado LTS)
• pnpm: >=8.0.0

Para instalar pnpm si aún no lo tienes:

npm install -g pnpm

---

🌊 Características

• ✨ Minimalista y sobrio — Diseño editorial costero sin distracciones
• 🎨 Paleta de colores coherente — Tonos lino, sage, arcilla y terracota
• ⚡ Performance de Astro — Carga rápida y optimizada
• 🏗️ Arquitectura SOLID — Código escalable y mantenible
• 🧪 Testing incluido — Vitest para pruebas de lógica pura
• 📱 Responsive — Adaptado a todos los dispositivos

---

🛠️ Stack Tecnológico

Tecnología	Propósito
Astro	Framework web moderno
Tailwind CSS v4	Estilos utilities-first
TypeScript	Tipado estático fuerte
Vitest	Framework de testing
Netlify Forms	Manejo de formularios de contacto

---

📂 Estructura del Proyecto

mariave-web/
├── src/
│   ├── components/          # Componentes Astro (diseño atómico)
│   │   ├── atoms/          # Componentes más pequeños y reutilizables
│   │   ├── molecules/      # Combinaciones de átomos
│   │   └── organisms/      # Componentes complejos
│   ├── domain/             # Lógica de negocio (framework-agnostic)
│   │   ├── models/         # Interfaces y tipos
│   │   └── services/       # Servicios y validadores
│   ├── layouts/            # Plantillas maestras
│   ├── pages/              # Rutas (cada archivo = una página)
│   └── styles/             # Estilos globales
├── public/                  # Archivos estáticos
├── tests/
│   └── unit/               # Pruebas unitarias
├── astro.config.mjs        # Configuración de Astro
├── tailwind.config.mjs     # Configuración de Tailwind
└── .pnpmrc                 # Configuración de pnpm

Filosofía Arquitectónica

• src/domain: Lógica independiente del framework (SOLID principles)
• src/components: Componentes Astro siguiendo Atomic Design
• tests/unit: Pruebas enfocadas en la lógica pura (no en componentes)

---

🚀 Primeros Pasos

1. Instalación

pnpm install

2. Desarrollo Local

pnpm dev

Accede a http://localhost:3000 en tu navegador. Los cambios se reflejan automáticamente.

3. Tests

pnpm test

Ejecuta las pruebas unitarias en modo watch.

4. Build para Producción

pnpm build

5. Preview del Build

pnpm preview

---

📦 Scripts Disponibles

# Desarrollo
pnpm dev          # Inicia servidor de desarrollo

# Producción
pnpm build        # Compila para producción
pnpm preview      # Vista previa del build de producción

# Testing
pnpm test         # Ejecuta tests en modo watch
pnpm test --run   # Ejecuta tests una sola vez

# CLI de Astro (avanzado)
pnpm astro        # Acceso directo a comandos de Astro

---

🎨 Personalización de Estilos

Paleta de Colores

Los colores base están definidos en variables CSS globales (src/styles/global.css):

• Lino: Base crema clara
• Sage: Verdes amigables
• Arcilla/Terracota: Acentos cálidos

Tailwind Config

Personaliza tamaños, colores y extensiones en tailwind.config.mjs.

---

📝 Contribución

Si este proyecto es parte de un equipo, consulta las guías locals de contribución. Mantén la arquitectura SOLID y los tests actualizados.

---

📄 Licencia

Todos los derechos reservados © 2026 María

---

Desarrollado con enfoque en escalabilidad, rendimiento y diseño minimalista.