Witty Wolf · 2026
La web que estás leyendo es el caso de estudio
El propio portfolio: una plantilla de Framer jubilada a favor de una web Astro construida con IA, dirigida por mí. La misma alma en los textos, un envase nuevo, cada decisión mía.
En resumen
Una plantilla puede alojar tu trabajo, pero no puede hablar por ti.
Una web Astro estática en la dirección field-notes, desarrollada con IA conmigo al mando; cada detalle de este caso está vivo en la página que estás leyendo.
- Astro, construida con IA, plantilla jubilada
- Estática
- Tipografías, ambas self-hosted
- 2
- Color de acento, gastado con cuidado
- 1
El portfolio antiguo vivía en una plantilla de Framer. Cumplía como cumple un piso de alquiler: todo funciona, nada es tuyo. Los textos merecían conservarse; la plataforma era una factura mensual.
El problema del envase
El envase de otro
La web de Witty Wolf empezó como una plantilla llena de stock. Mi propio atardecer de los Houthavens estaba en el hero, pero la página de trabajo abría con un render 3D de una fototeca y el contacto se escondía tras un skyline de ciudad que podría haber vendido cualquier cosa. Debajo había un logotipo en una tipografía display redondeada que ya ha sido retirada de la marca por completo.
Así que lo rediseñé dentro de Framer: imágenes propias en lugar del stock, la display redondeada fuera, un statement en el hero y un tema claro y uno oscuro como es debido.
El pensamiento de marca era real y merecía conservarse: el ingenio como principio de trabajo, lenguaje llano, personalidad al servicio de la claridad. Lo que no podía conseguir en Framer era la propiedad.
La mudanza
La misma alma, un envase nuevo
La decisión fue jubilar la plantilla de Framer y construir una web Astro estática, la IA escribiendo el código, yo dirigiendo: conservar la voz de los textos, sustituir todo lo que la sostenía. La dirección de arte se volvió field notes: papel cálido, tinta, una cuadrícula tenue, línea fina y un solo acento ámbar, gastado con cuidado. Dos tipografías, ambas self-hosted: Geist Mono como voz para títulos, navegación, etiquetas y números, Work Sans solo para lectura larga. La antigua display redondeada se jubiló en todas partes, también en la propia marca.
La build corrió de la misma manera: la IA escribió el código, yo dirigí. Cada componente con su encargo, revisado y devuelto hasta que se comportaba, y cada decisión que describe este caso, de la errata de la máquina de escribir al susto del lobo, fue mía.
01 · El oficio
Detalles que se ganan el sitio
El hero de esta web se escribe solo, comete un error a propósito, lo tacha y sigue: pantallas se convierte en personas. El lobo de al lado es el logo real dibujado como línea pura que se esboza a sí misma, sin rellenos salvo la lengua ámbar. Un rastro ámbar se dibuja página abajo mientras haces scroll, un reloj vivo marca la hora de Madrid en la línea de metadatos y el footer contesta en modo terminal. El modo oscuro llega sin destello del tema equivocado, respeta la preferencia del sistema, y cambiarlo reproduce una secuencia corta: el lobo se inclina, tiembla, enciende un ojo ámbar, la lámpara parpadea y el tema cambia. Toda animación se desactiva cuando reduced motion está activo.
02 · El sistema
Una sola fuente de verdad
Las páginas de caso de esta web corren sobre un sistema pequeño. Las etiquetas de margen de esta página son la única fuente de verdad del índice de secciones: el raíl con scroll-spy en escritorio, la píldora flotante en móvil y los enlaces ancla que siguen funcionando sin JavaScript, sellados en la build por un plugin de rehype. Las figuras comparten un solo tratamiento field-notes, cinta y chinchetas solo para imágenes, nunca para el texto. Cada caso abre bajo un sello de goma con la marca de su cliente, estampado cuando el título termina de escribirse.
Mi peor cliente
Soy mi peor cliente
Publicar para ti mismo significa responder ante tu propio yo crítico, y el mío es el cliente más difícil que tengo: no hay briefing tras el que esconderse ni nadie más a quien culpar. Un escaparate también te frena, porque el diseño tiene que apartarse del camino del trabajo que enseña.
La web de Framer llevó casi cuatro meses. La mayor parte fue decidir, no construir: qué enseñar, qué cortar, qué imágenes merecían un sitio, dónde estaba el equilibrio. Esta reconstrucción fue más rápida porque esas decisiones ya estaban tomadas. Lo que quedaba era cortar, tanto lo que sobraba como algunas cosas a las que aún tenía cariño.
La crítica de un cliente o de un jefe la encajo mejor que la mía. Soy implacable cuando juzgo mi propio trabajo, y de ahí sale el acabado de esta web.
Uso de IA
Uso de IA
El código lo escribió la IA de principio a fin, conmigo dirigiendo cada paso; esa historia está arriba. Las palabras son la excepción: cada texto de esta web está escrito a mano, ahí se van la mayoría de las horas, y así lo quiero. La marca vive en un archivo de skill que le enseña a la IA el estilo de la casa una sola vez, tono, tipografía, las reglas del lobo, para que ninguna sesión empiece de cero. La reconstrucción llevó días en lugar de meses, porque el pensamiento ya estaba hecho y el código era la parte rápida.
Siendo honestos
La prueba más honesta que existe
Un portfolio no tiene cifras de conversión que merezcan citarse, así que no pienso inventarlas. El resultado es propiedad: cada línea de esta web es mía y un cambio lleva minutos, no un ticket de soporte. Urbiqo me enseñó que construir tu propio diseño es la prueba de usabilidad más honesta que existe. Esta vez el cliente era yo, y yo me fijo en todo.