Big Red Oak

Big Red Oak es una agencia especialista en marketing y comunicación para energía limpia, nuclear y la transición energética en Canadá. En un sector técnico, regulado y de alto perfil, necesitaban una presencia web que transmitiera autoridad y criterio — nada de plantillas genéricas ni de aire corporativo intercambiable. El reto: levantar un sitio de agencia completo, multipágina, con identidad visual propia, casos de cliente, blog y podcast, además de un backend de contacto funcional, sin CMS ni frameworks pesados, y dejarlo en producción con estándar premium. La oportunidad: comprobar si un flujo de desarrollo asistido con IA puede entregar no solo velocidad, sino diseño a medida y calidad técnica de agencia.

Stack vanilla puro y sistema de diseño propio. HTML, CSS y JS sin frameworks, sin builders, sin CMS; backend en funciones serverless de Node sobre Vercel. Toda la identidad construida desde cero: tipografías Bebas Neue y Avenir, paleta cálida con el rojo oak como único acento, y un lenguaje visual coherente en cada página. Las imágenes de marca se generaron con IA dentro de esa misma paleta (renders fluidos para hero, footer y paneles), evitando el banco de imágenes y reforzando la singularidad del sitio. Movimiento cinematográfico pero medido (GSAP + ScrollTrigger) sin sacrificar rendimiento. Claude Code como herramienta principal de desarrollo: definición de arquitectura, generación de código, refactor iterativo, implementación del diseño y validación continua contra los constraints técnicos.

1. 01Sistema de diseño completo a medida (tokens, escala tipográfica Bebas Neue + Avenir, paleta de marca)
2. 02Identidad visual propia: logotipos en SVG renderizados con técnica de máscara CSS y acentos botánicos con hover que sigue al cursor
3. 03Imágenes de marca generadas con IA en la paleta del proyecto (renders fluidos, sin stock)
4. 04Sitio multipágina de 21 páginas: home, about, work y contacto + 13 casos de cliente + 3 artículos de blog
5. 05Sección Clean Currents: podcast con episodios embebidos de Spotify y blog editorial
6. 06Animación cinematográfica de scroll (vídeo que se expande al hacer scroll con GSAP + ScrollTrigger)
7. 07Backend serverless para formulario de contacto y alta de newsletter (Vercel Functions + nodemailer/SMTP, con validación server-side y honeypot anti-bots)
8. 08SEO técnico completo: schema JSON-LD (Organization), Open Graph, Twitter Cards, canonicals, sitemap.xml, robots.txt, manifest y favicons
9. 09Core Web Vitals optimizados desde el inicio: fuentes self-hosted en woff2, preload de recursos críticos, lazy-load y fetchpriority
10. 10Responsive mobile-first con auditoría móvil dedicada (incluida corrección del renderizado de color en Chrome Android)
11. 11Desplegada en producción en Vercel con dominio propio y deploy automático desde GitHub

Un sitio de agencia completo y en producción —con identidad visual propia, front y back a medida— funcionando en bigredoak.com sobre Vercel con despliegue continuo. La pieza demuestra que el desarrollo asistido con IA no se limita a prototipos rápidos: puede entregar un sistema de diseño bespoke, imágenes generadas a medida, una arquitectura multipágina extensa y unos cimientos de SEO técnico al nivel que esperaría un cliente de agencia, sustituyendo tanto un build tradicional como un CMS sin renunciar a la calidad.