BlackPrint.ai Homepage BlackPrint.ai Homepage

Overview

Built BlackPrint's bilingual marketing homepage as a real-data map experience, rendering cadastral, activity and market layers from company data with deck.gl and MapLibre.

Highlights

1. 01

   Engineered 16 section components on React 19, Vite and Tailwind 4 with scroll-driven deck.gl, MapLibre and h3-js scenes fed by a read-only, PII-allowlisted export pipeline, shipping 27 pre-baked data layers including 1,500 real CDMX parcels extruded by land value.

2. 02

   Cut eager JavaScript from 793 KB to 187 KB gzipped with poster-first deferred map mounting and manual chunking, and shrank client logos from 1.9 MB to 190 KB, gated by a 13-check headless QA suite and a deploy-time performance budget.

3. 03

   Tuned the production Astro site by deferring MapLibre/deck.gl initialization to user interaction (LCP 7.8 s → 0.5 s) and lazy-decoding thematic images to save 1.2 MB on initial load.

Stack

• React 19
• TypeScript
• Vite
• deck.gl
• MapLibre GL JS
• h3-js
• Tailwind CSS 4
• Motion
• Astro
• Vercel
• Web Performance
• Puppeteer