Casa de herrero, cuchillo de palo: cómo (por fin) construimos nuestra propia web

Años diseñando y desarrollando webs para clientes, y la nuestra esperando su turno. Esta es la historia de por qué pasó, cómo lo resolvimos, y todo lo que metimos adentro.

"Casa de herrero, cuchillo de palo." Es una realidad que conoce bien cualquiera que trabaje en servicios creativos. Durante años estuvimos construyendo presencias digitales para clientes (calculadoras de seguros médicos, plataformas de automatización, portfolios que convierten) mientras nuestra propia web, tresojotas.com, esperaba pacientemente su turno. La web anterior no era mala: cumplía su función y representaba lo que éramos en ese momento. Pero sabíamos que podíamos hacer algo mucho más sofisticado, más completo, más nuestro.

El problema no era falta de ideas ni de capacidad. Era el eterno conflicto de prioridades: los proyectos de clientes siempre ganaban. Y tiene sentido: ahí está el ingreso del mes. Pero en algún punto empezás a notar la brecha entre lo que hacés para otros y lo que tenés para vos. Esa brecha fue la señal de que teníamos que parar, respirar, y encararlo con la misma dedicación que le damos a cualquier proyecto de cliente.

La decisión de arrancar desde cero fue fácil. Lo difícil fue resistir la tentación de lanzarse directo al código. Tenemos un equipo creativo talentoso (diseñadores con criterio y visión) y aprendimos en proyectos anteriores que saltarse la etapa de diseño siempre termina mal: pantallas que no guardan coherencia visual, decisiones tomadas en el medio del sprint, inconsistencias que se acumulan. Esta vez íbamos a hacer lo que le recomendamos a todos nuestros clientes: primero diseño, después código.

Ludmi tomó las riendas del proceso en Figma. Arquitectura de información, wireframes, sistema de diseño completo (tipografías, paleta, espaciados, estados) antes de que Michael tocara un archivo TypeScript. La lógica es simple: cambiar el padding de un componente en Figma tarda 2 segundos. Hacerlo en código cuando ya tenés 30 pantallas construidas cuesta una tarde entera. El orden importa. La disciplina de separar "pensar" de "hacer" es lo que define la calidad del resultado final.

El stack que elegimos no es casualidad: React + Vite + TypeScript + Tailwind CSS + Framer Motion. Cada herramienta tiene un rol claro. Vite porque el tiempo de feedback en desarrollo importa: un dev server lento destruye el flujo. TypeScript porque cuando el proyecto escala, la tipificación te salva de bugs silenciosos. Framer Motion porque las animaciones de scroll, los efectos de entrada y las transiciones de página no son decoración: son parte de la experiencia. Y Tailwind porque permite implementar el sistema de diseño de Ludmi de forma exacta, sin inventar clases nuevas ni acumular CSS muerto.

El resultado es esta web que estás viendo. Cada detalle (la velocidad de carga, la forma en que los elementos aparecen al hacer scroll, el espaciado tipográfico, el contraste) fue una decisión consciente. No estamos sacrificando nuestra propia experiencia por falta de tiempo. Al revés: usamos nuestra propia web como campo de pruebas para todo lo que después llevamos a los proyectos de clientes. Si vos también tenés postergado construir tu propia presencia digital, tomalo como señal. Este herrero ya tiene los cuchillos bien afilados.