Santos Herrera - Apoyo Directo para Reconstruir su Taller

Landing page de apoyo directo para Santos Herrera, último alfarero tradicional de Penco (Biobío, Chile), tras los incendios forestales recientes.

---

📖 Contexto

Santos Herrera es el último alfarero de la comuna de Penco, Región del Biobío, Chile. Con más de 50 años de trayectoria en la alfarería tradicional, ha enseñado el oficio y dejado un legado cultural local invaluable.

Producto de los incendios forestales recientes, perdió:

• Su vivienda
• Su taller de alfarería
• Todas sus herramientas y producción

La alfarería es su principal y único sustento económico. Hoy busca reconstruir su taller y continuar con su oficio.

---

🎯 Objetivo del Proyecto

Esta landing page tiene como propósito:

1. Visibilizar su historia
2. Movilizar apoyo concreto
3. Facilitar donaciones y contacto directo
4. Preservar el patrimonio cultural

No es una landing comercial agresiva. Debe transmitir dignidad, oficio, resiliencia y legado.

---

✨ Características Técnicas

Performance & UX

• ⚡ Carga ultrarrápida - HTML/CSS/JS vanilla (sin frameworks)
• 🎨 Mobile-first responsive - Grid CSS adaptativo
• ♿ WCAG 2.1 AA compliant - Accesibilidad completa
• 🎭 Animaciones sutiles - Intersection Observer para lazy animations
• 📱 PWA-ready - Progressive Web App capabilities

SEO & Discoverabilidad

• 🔍 Schema.org structured data - Rich snippets
• 🌐 Open Graph tags - Optimización para redes sociales
• 📊 Meta tags optimizados - Description, keywords, author
• 🚀 Performance metrics - Lighthouse score optimizado

Experiencia de Usuario

• 🎯 CTAs claros y éticos - Sin dark patterns
• 📋 Copy to clipboard - Datos bancarios con un click
• 💬 WhatsApp directo - Contacto inmediato
• 🍞 Toast notifications - Feedback visual con queue system
• 🎨 Diseño sobrio - Colores tierra, tipografía legible

---

🚀 Deployment

GitHub Pages (Recomendado)

1. Fork o clone este repositorio
2. Ve a Settings → Pages
3. Selecciona main branch como source
4. Tu sitio estará en https://[tu-usuario].github.io/[nombre-repo]

Alternativas

Vercel

npm i -g vercel
vercel --prod

Netlify

npm i -g netlify-cli
netlify deploy --prod --dir .

Cloudflare Pages

• Conecta tu repositorio de GitHub
• Build command: (ninguno)
• Output directory: /

---

📁 Estructura del Proyecto

apoyo-santos-herrera/
├── index.html           # Landing page principal
├── manifest.json        # PWA manifest
├── README.md           # Este archivo
├── LICENSE             # MIT License
├── .gitignore          # Archivos ignorados
├── .env.example        # Plantilla de variables de entorno
├── check-dns.js        # Script de verificación DNS (opcional)
└── assets/             # (opcional) Imágenes optimizadas
    └── og-image.jpg    # Open Graph image (1200x630px)

🔒 Configuración de Seguridad

Este proyecto es un sitio estático y NO utiliza variables de entorno en producción. Las variables en .env son solo para uso local con el script check-dns.js.

Para desarrollo local:

1. Copia .env.example a .env y completa con tus valores
2. Nunca subas el archivo .env a Git (ya está en .gitignore)
3. El script check-dns.js requiere el archivo .env configurado

Nota: Si en el futuro se necesitaran variables de entorno para funcionalidades dinámicas, deben configurarse directamente en el Dashboard de Vercel, no en archivos locales.

---

🛠️ Personalización

Actualizar Datos Bancarios

Edita la constante CONFIG en el <script> del HTML:

const CONFIG = {
  phone: "+56991332569",
  waMessage: "Tu mensaje de WhatsApp",
  igLink: "https://www.instagram.com/reel/...",
  bankText: `Banco Estado
Titular: Santos Herrera
RUT: 6.721.561-3`,
  toastDuration: 2800
};

Agregar Imagen Hero

Reemplaza el placeholder en .heroMedia:

<div class="heroMedia">
  <img 
    src="assets/taller-alfareria.webp" 
    alt="Taller de alfarería de Santos Herrera en Penco"
    loading="lazy"
    width="1920"
    height="1080"
  />
</div>

Formato recomendado:

• WebP con fallback JPG
• Dimensiones: 1920x1080px
• Peso: ~200KB (optimizado)

---

🎨 Paleta de Colores

--bg: #faf7f2          /* Fondo principal */
--card: #ffffff        /* Tarjetas */
--text: #1f1f1f        /* Texto principal */
--muted: #5a5a5a       /* Texto secundario */
--earth: #7a4e2d       /* Primario (tierra) */
--earth-2: #4f3422     /* Primario oscuro */
--focus: #1f5eff       /* Focus states */

---

♿ Accesibilidad

Cumplimiento WCAG 2.1

• ✅ Contraste de color - Ratio mínimo 4.5:1
• ✅ Navegación por teclado - Tab order lógico
• ✅ ARIA labels - Semántica completa
• ✅ Skip links - "Saltar al contenido"
• ✅ Focus visible - Estados claramente marcados
• ✅ Responsive text - Sin zoom horizontal
• ✅ Reduced motion - Respeta prefers-reduced-motion

Testing

# Lighthouse CI (si tienes Node.js)
npx lighthouse https://tu-sitio.github.io --view

# axe DevTools (Chrome Extension)
# WAVE (Web Accessibility Evaluation Tool)

---

📊 Performance

Métricas Target

Métrica	Target	Actual
First Contentful Paint	< 1.8s	~0.8s
Largest Contentful Paint	< 2.5s	~1.2s
Time to Interactive	< 3.8s	~1.5s
Cumulative Layout Shift	< 0.1	~0.001
Total Blocking Time	< 200ms	~50ms

Optimizaciones Aplicadas

• 🗜️ CSS inline - Elimina request adicional
• ⚡ No dependencies - Zero frameworks
• 🎯 Preconnect hints - DNS prefetch para wa.me
• 📦 Minificación - HTML/CSS/JS optimizados
• 🖼️ Lazy loading - Imágenes con loading="lazy"

---

📄 Datos de Contacto

Santos Herrera

• Teléfono: +56 9 9133 2569
• Ubicación: Penco, Región del Biobío, Chile
• Instagram: @testimonio

Datos Bancarios

• Banco: Banco Estado
• Titular: Santos Herrera
• RUT: 6.721.561-3

---

🤝 Contribuir

¿Cómo puedes ayudar?

1. Difunde - Comparte el sitio en redes sociales
2. Mejora - Abre un PR con mejoras técnicas
3. Reporta - Issues de bugs o sugerencias
4. Dona - Apoyo económico directo a Santos Herrera

Pull Requests

# 1. Fork el repo
# 2. Crea una rama
git checkout -b feature/mejora-xyz

# 3. Commit con mensaje descriptivo
git commit -m "feat: Agrega lazy loading de imágenes"

# 4. Push y abre PR
git push origin feature/mejora-xyz

Estilo de commits: Conventional Commits

---

📜 Licencia

Este proyecto está bajo la licencia MIT. Ver archivo LICENSE para más detalles.

Uso Libre con Propósito

Puedes usar este código para:

• ✅ Proyectos sociales similares
• ✅ Campañas de reconstrucción
• ✅ Iniciativas comunitarias
• ✅ Educación y aprendizaje

Única condición: Mantener el espíritu ético y de transparencia del proyecto original.

---

🙏 Agradecimientos

• A Santos Herrera por su legado cultural
• A la comunidad de Penco y Región del Biobío
• A todos los que contribuyen compartiendo y apoyando

---

📞 Soporte

¿Preguntas técnicas sobre el código?

• 📧 Abrir un Issue
• 💬 Discussions

¿Quieres apoyar directamente a Santos Herrera?

• 📱 WhatsApp: +56 9 9133 2569
• 💳 Transferencia Banco Estado (ver datos arriba)

---

Hecho con ❤️ para preservar el patrimonio cultural de Chile

Ver Demo • Reportar Bug • Sugerir Mejora