Masumi Hayashi Foundation
Fractional CTO for a nonprofit preserving the legacy of globally renowned Japanese-American artist Masumi Hayashi. Full technical ownership of a digital platform serving museums, galleries, and researchers worldwide.
The Problem
The Masumi Hayashi Foundation needed a complete digital platform to preserve and present the artist's panoramic photo-collages — work held in the permanent collections of SFMOMA, the Whitney Museum, and the Museum of Contemporary Photography. The Foundation had no technical leadership, no analytics visibility, no donation infrastructure, and an approaching SFMOMA exhibition deadline.
The stakes were specific: museum partnerships required a professional digital presence, donor relationships needed a secure giving mechanism, and the Foundation's board needed visibility into how the platform was performing — all without a technical team.
The Approach
I took full technical ownership — architecture, implementation, deployment, and ongoing operations. Every layer of the stack reflects deliberate decisions:
- 1. Platform architecture: Astro 5 with React components on Cloudflare Pages. Static-first for performance, server-rendered where dynamic content requires it. 523 indexed pages with automated sitemap monitoring.
- 2. Analytics infrastructure: GA4 + Microsoft Clarity + Facebook Pixel, all proxied through Cloudflare Pages Functions to serve from 'self' origin — bypassing CSP restrictions that were silently blocking 95% of analytics data. Custom WAF rules filter 92% bot traffic for accurate visitor metrics.
- 3. Donation pipeline: Stripe Checkout with webhook automation. When a donation completes, a Cloudflare tunnel routes the webhook to a local n8n workflow that posts real-time notifications to a dedicated Slack channel — giving the Foundation board instant visibility into donor activity.
- 4. Content architecture: Gallery collections organized by exhibition history, with high-resolution image serving optimized for art researchers. Panoramic photo-collages require specific aspect ratio handling that standard image CDNs don't support well.
Key Architectural Decision
The analytics stack initially showed a 20:1 ratio between Cloudflare edge hits and GA4 pageviews — meaning analytics scripts were being silently blocked. The root cause: proxying analytics scripts via Cloudflare Pages Functions serves the initial script from 'self', but the loaded libraries dynamically fetch sub-scripts from their own domains (scripts.clarity.ms, connect.facebook.net), which still need explicit CSP script-src entries.
This pattern — where a proxy solves the first-party loading but not the downstream dependency chain — is undocumented in most analytics setup guides. Diagnosing it required correlating Cloudflare edge logs against GA4 realtime data and inspecting the network waterfall for blocked sub-requests.
Results
The SFMOMA exhibition deadline was met. The Foundation board has daily visibility into site performance and donor activity. Museum partners worldwide reference the digital archive. And the entire infrastructure runs autonomously — monitored by automated health checks, with zero manual intervention required for day-to-day operations.