Construyendo el nuevo sitio de Vector: Un vistazo bajo el capó

Después de unos meses de trabajo enfocado, quería hacer un recorrido por los cambios en nuestro sitio web. Esta nueva versión ha estado en desarrollo activo durante los últimos tres meses y, aunque hubiera estado lista antes, el 2025 ha sido un año ajetreado.

Este nuevo sitio no es solo un cambio de cara; es un reflejo de todo lo que hemos aprendido a lo largo de 14 proyectos con clientes. Incorpora nuestras mejores prácticas de i18n, nuestra estructura interna de componentes atómicos y un enfoque de desarrollo más refinado. Ha sido un verdadero trabajo hecho con amor, y sinceramente estoy orgulloso del resultado.

Bajo el capó

El sitio se ejecuta en un contenedor de Docker en una instancia de Coolify con un conjunto muy reducido de librerías. La filosofía fue simple: mantenerlo ligero y potente.

Backend e Infraestructura

La base está construida sobre Astro 5 con renderizado del lado del servidor (SSR), lo que nos da lo mejor de ambos mundos: rendimiento estático donde importa y capacidades dinámicas donde las necesitamos. Usamos el adaptador de Node.js en modo standalone para mantener mínima la huella de despliegue.

Para nuestra internacionalización, implementé un enfoque i18n estándar con un toque personal: mantener la mayoría del contenido en archivos JSON modulares en lugar de dispersarlo por los componentes. Era vital que esto respetara nuestra filosofía y nuestra conexión con América Latina, asegurando que cada palabra fuera traducida con esmero, no de forma automática.

Frontend y Estilos

En el frontend, usamos React 19 para las piezas más interactivas (como nuestros gradientes 3D e íconos giratorios), mientras que la mayor parte del sitio utiliza componentes estándar de Astro para un rendimiento óptimo. Tailwind CSS 4 se encarga de todos nuestros estilos, con el plugin de tipografía que hace que el contenido del blog se vea genial.

¿Esa estructura de componentes atómicos que mencioné? Ahora es una base sólida de botones, encabezados y componentes de texto reutilizables. Sobre eso, tenemos componentes especializados para el blog, secciones compartidas e incluso algunas animaciones basadas en canvas con Three.js.

Desarrollo y Despliegue

Todo el stack está contenido en Docker y se ejecuta en Coolify para un despliegue y escalado sin complicaciones. Usamos Bun para la gestión de paquetes y Prettier (con los plugins de Astro y Tailwind) para mantener el código consistente sin tener que pensarlo. Es una configuración ágil que ofrece velocidad y nos da la flexibilidad de integrarnos con nuestra suite de CRM propia en el futuro.

Proyectos y Servicios

La sección de proyectos ahora tiene una interfaz limpia y filtrable para que los visitantes exploren nuestro portafolio por categoría. La sección de servicios usa un enfoque similar, con tarjetas expandibles que desglosan lo que ofrecemos. Ambas están completamente internacionalizadas y son responsivas, facilitando que los clientes potenciales entiendan lo que hacemos, sin importar su idioma. También integramos un filtro de búsqueda en vivo en ambas páginas para facilitar la búsqueda de contenido específico.

Formularios y Comunicación

Decidimos usar Resend después de darle muchas vueltas a los relays SMTP. Para ser honesto, no estábamos contentos con la inestabilidad y las reglas arbitrarias de nuestro proveedor de correo anterior (Google Workspace). Pedir a nuestros clientes que modificaran las soluciones de su oficina también se sentía como un error y una falta de previsión de nuestra parte. Estamos mucho más contentos con la implementación actual.

Los nuevos formularios integran honeypots, usan componentes de TypeScript personalizados para gestionar la entrega y pronto estarán completamente equipados con Resend para proteger los envíos. También implementé enlaces directos a WhatsApp y Telegram como métodos de contacto alternativos.

La experiencia del blog

Estoy particularmente orgulloso del trabajo que hicimos en el blog. Añadimos algunas comodidades para que la experiencia de lectura sea más confortable, permitiendo a los usuarios cambiar entre modo claro y oscuro,