BioJalisco — Cinematic Scrollytelling Pitch Site

Cinematic scrollytelling site pitching a citizen-science biodiversity platform for western Mexico

Video Walkthrough

Screenshots

1 / 10

Cinematic hero section of the BioJalisco scrollytelling pitch opening the biodiversity story

Problem section showing the data-coverage crisis across Jalisco's territory with animated counters

Vision section introducing the BioJalisco citizen-science biodiversity platform

Evidence section with project roadmap and conservation proof points

Team and credibility section featuring researcher credentials and the book trilogy

Parallax wildlife photography of western Mexico's biodiversity

AI Species Identifier interface ready to analyze an uploaded wildlife photo

Species identification results with confidence gauge and full taxonomy tree

Ecology and conservation status tabs detailing habitat, range, and IUCN status

Closing call-to-action section inviting partners and funders to support BioJalisco

The Challenge

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.

The Solution

A persuasion artifact built as a single self-contained HTML file with embedded images, bilingual content switching, procedural audio, and scroll-triggered animations. Demonstrates that high-impact storytelling doesn't require React or a build system.

What It Does Well

5-act narrative arc (Hook → Problem → Vision → Evidence → Ask) designed for stakeholder persuasion
Instant ES/EN language switching with zero page reload using CSS visibility toggles
Self-contained deployment — entire site is 1.8MB HTML file with base64-embedded WebP images
Procedural forest soundscape via Web Audio API (no audio files needed)
92% image size reduction through PNG→WebP conversion + base64 encoding

Results

Complete narrative pitch accessible in both Spanish and English from a single shareable URL
Interactive Species Identifier lets stakeholders try real GPT-4o vision AI immediately
High-impact persuasion site shipped with no React, build system, or CMS
Image pipeline cut total payload from 16.8MB to 1.3MB (92% reduction)

Highlights

Good for

Conservation organizations pitching to academic partners and funders
Projects needing offline-capable presentation sites with zero infrastructure
Bilingual storytelling where both languages must be equally polished
Demonstrating technical restraint — vanilla JS for projects that don't need frameworks

Not a complete solution for

Projects requiring dynamic content updates (everything is baked into the HTML)
Sites with frequent content changes (editing requires HTML file modification)
Large image galleries (base64 embedding inflates file size)
SEO-critical landing pages (single-file approach limits optimization)

What you get

Single 1.8MB HTML file with 9 embedded WebP images
Bilingual ES/EN with instant switching via CSS
Intersection Observer scroll reveal system
Web Audio API procedural soundscape
Deployed on Vercel with zero build step

Related Projects

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

Have a similar challenge?

Let's talk about how a solution like this could work for your team. Free call, no pitch.

Book a Free Call