Portafolio DBZ
Hub de marca personal para Daniel Bonifaz Zegarra
El problema
Daniel Bonifaz no es un perfil convencional: 7+ empresas, 2 libros, podcast, academia, +500K seguidores, TEDx, Forbes, Bloomberg. Un portafolio tradicional no funciona. La web tenía que organizar un universo complejo y hacerlo accesible a audiencias muy distintas: emprendedores, organizadores de eventos, periodistas, inversores y seguidores.
Decisiones UX/UI
Se eligió Hub Bento Grid + Scrollytelling. La Bento Grid permite escaneo rápido del ecosistema completo en una pantalla con jerarquía flexible (bloques grandes para Kambista, pequeños para empresas secundarias). El scrollytelling narra la historia sacerdocio→emprendimiento que aumenta permanencia +200%. Cada sección tiene un solo CTA (convierte 266% más). Mobile-first para el 82%+ de tráfico móvil.
Arquitectura técnica
Astro 5 con zero-JS por defecto. JS budget total: ~1KB (solo Plausible analytics). Bento grid con CSS Grid nativo + animaciones FLIP para expansión de cards. Scrollytelling con CSS Scroll-Driven Animations API (85% soporte) + fallback IntersectionObserver. Content Collections con validación Zod para projects, books, stats, story. Deploy en Cloudflare Pages (bandwidth ilimitado, 300+ edge nodes).
Performance
Targets: LCP <1.5s, FID <50ms, CLS <0.05. Hero image con loading="eager" + fetchpriority="high" + AVIF. Tipografía variable self-hosted (un solo .woff2). Sin embeds de redes sociales (TikTok ~500KB, YouTube ~300KB destruyen CWV) — se usan thumbnails estáticos con link externo. FAB móvil táctil con hold-to-open para acciones rápidas.
Evolución del proyecto
Auditoría v1: 4.6/10. Auditoría v2: 6.9/10. Mayor mejora en data architecture (+6 puntos) al adoptar Content Collections. Pendiente: extraer secciones de index.astro (481 líneas) a componentes individuales.
Stack
Astro 5 · TypeScript · Tailwind CSS v4 · Vanilla JS · Content Collections · Zod · Cloudflare Pages