Sitio de Presentación BioJalisco
Sitio de scrollytelling cinemático presentando una plataforma de biodiversidad de ciencia ciudadana para el occidente de México
Video Demostrativo
Capturas de Pantalla
1 / 10
El Desafío
Conservation researchers in western Mexico face an asymmetry: deep scientific expertise but limited reach. Their work covers a fraction of Jalisco's 80,000+ km² territory. BioJalisco proposes closing that gap through citizen science and technology, but the vision needed a compelling presentation to win stakeholders and partners.
La Solución
Un artefacto de persuasión construido como un archivo HTML autocontenido con imágenes embebidas, cambio de contenido bilingüe, audio procedural y animaciones activadas por scroll. Demuestra que la narración de alto impacto no requiere React ni un sistema de compilación.
Lo Que Hace Bien
- Arco narrativo de 5 actos (Gancho → Problema → Visión → Evidencia → Llamado) diseñado para persuasión de stakeholders
- Cambio instantáneo de idioma ES/EN sin recarga de página usando toggles de visibilidad CSS
- Despliegue autocontenido — sitio completo es archivo HTML de 1.8MB con imágenes WebP en base64
- Paisaje sonoro de bosque procedural vía Web Audio API (no se necesitan archivos de audio)
- Reducción del 92% en tamaño de imágenes mediante conversión PNG→WebP + codificación base64
Puntos clave
Ideal para
- Organizaciones de conservación presentando a socios académicos y financiadores
- Proyectos que necesitan sitios de presentación capaces de funcionar offline con cero infraestructura
- Narración bilingüe donde ambos idiomas deben estar igualmente pulidos
- Demostrar restricción técnica — JS vanilla para proyectos que no necesitan frameworks
No resuelve por completo
- Proyectos que requieren actualizaciones dinámicas de contenido (todo está integrado en el HTML)
- Sitios con cambios frecuentes de contenido (editar requiere modificación del archivo HTML)
- Galerías de imágenes grandes (la incrustación base64 infla el tamaño del archivo)
- Landing pages críticas para SEO (el enfoque de archivo único limita la optimización)
Qué obtienes
- Archivo HTML único de 1.8MB con 9 imágenes WebP embebidas
- Bilingüe ES/EN con cambio instantáneo vía CSS
- Sistema de revelación por scroll con Intersection Observer
- Paisaje sonoro procedural con Web Audio API
- Desplegado en Vercel sin paso de compilación
Proyectos Relacionados
NY English Teacher
Lead generation website for an English coaching business — replaced 4 roles, runs for $0/month
Converso AI — Bilingual AI Front Desk & Sales Assistant
Bilingual AI chatbot platform for service businesses — handles front desk and sales conversations 24/7
NY AI Chatbot
AI chatbot for a coaching business — turns website visitors into booked calls, replaced 4 roles
¿Tienes un desafío similar?
Hablemos sobre cómo una solución así podría funcionar para tu equipo. Llamada gratis, sin compromiso.
Agendar Llamada Gratis