Tecnologías
- Astro 5 Salida estática desplegada en Vercel, con ruteo por archivos y una content collection para el portfolio.
- TypeScript Módulos de cliente en vanilla para los efectos interactivos y la capa de animación por scroll.
- CSS plano (custom properties) Una única hoja de estilos con tokens de marca (ink, paper, iris, violet, magenta), sin framework CSS.
- Canvas 2D API Animación del grafo de nodos del hero, que se pausa fuera de pantalla y se desactiva con reduced motion.
- Lenis Scroll suave en modo native-scroll, así los eventos de scroll siguen manejando el índice de secciones y los reveals.
- GSAP + ScrollTrigger Capa de animación por scroll sincronizada con Lenis mediante un único ticker, registrada bajo una media query de reduced motion.
- @astrojs/sitemap Genera el sitemap en el build.
- Geist Sans y Geist Mono Tipografía de marca cargada desde Google Fonts.
- Vercel Deploy automático en cada push, con el DNS del dominio administrado en Cloudflare.
Resumen del Proyecto
RAM (ramstudio.com.ar) es un estudio de Buenos Aires que trabaja en IA, análisis de datos, automatización de procesos, integraciones y desarrollo web. El sitio es su cara pública: una landing de una sola página que arranca por el problema del cliente en vez de una lista de servicios, más una sección /trabajos que reúne el portfolio del estudio.
El desarrollo corre sobre Astro 5 sin framework CSS. El lenguaje visual sale del sistema de marca del estudio (superficie oscura, familia de acentos violetas y etiquetas monoespaciadas), y el código mantiene esos tokens como única fuente de verdad.
Objetivos
- Narrativa que arranca por el problema - Abrir con el trabajo manual y los sistemas desconectados que el prospecto ya reconoce, y después vincular cada uno con un servicio.
- UI fiel a la marca y accesible - Traducir la paleta y las reglas tipográficas de la marca a tokens CSS, manteniendo el contraste de texto dentro de WCAG AA sobre la superficie oscura.
- Movimiento expresivo pero seguro - Sumar efectos de scroll y canvas que nunca estorben la lectura ni a quienes prefieren reduced motion.
- Un portfolio que escala - Publicar proyectos como entradas Markdown, para que sumar uno nunca implique tocar código de páginas.
Flujo de Trabajo del Proyecto
- Estructura de la página - Armé la home en siete secciones numeradas (Intro, Diagnóstico, Servicios, Trabajos, Manifiesto, Proceso, Contacto) con un indicador de sección fijo que sigue a la que está a la vista. Los servicios, los pasos del proceso y los bloques de diagnóstico son arrays simples al inicio de la página y se renderizan desde ahí.
- Sistema de diseño - Reflejé la paleta de marca en tokens
:rootdentro de una sola hoja de estilos. El texto de énfasis usa el tono iris, y los tonos magenta y violet quedan para botones, glows y el isotipo porque no pasan el contraste como texto sobre el fondo oscuro. Geist no trae itálica, así que el énfasis se resuelve con color y no con una falsa itálica sintetizada. - Efectos interactivos - Escribí los efectos en un solo módulo TypeScript: cursor propio con botones magnéticos, reveals por scroll manejados con un atributo
data-reveal, rotación de palabras en el hero, una franja de estado en vivo, el grafo de nodos en canvas, el índice de secciones sticky y el menú mobile (hamburguesa a overlay). - Scroll suave y GSAP - Sumé Lenis en modo native-scroll y un módulo aparte de GSAP y ScrollTrigger sincronizado con él, con el ticker de GSAP manejando a Lenis para que exista un solo loop de animación. Las animaciones nuevas se registran dentro de una media query de reduced motion, así se apagan solas.
- Sección de portfolio - Porté un portfolio guiado por contenido: una content collection validada con un schema de Zod, un índice filtrable con chips de tags y rutas de detalle dinámicas generadas desde los archivos Markdown. Los tokens de marca se retokenizaron uno a uno desde el CSS del portfolio original.
- Assets de marca y styleguide - Agregué un pipeline por script que genera los rasters del logo desde los SVG fuente, y una página de styleguide con plantillas sociales servida bajo
/brand. - SEO y deploy - Sumé metadatos Open Graph y un sitemap generado, y desplegué en Vercel con deploys automáticos en cada push.
Resultados e Impacto
- Un sitio completo y desplegado - La landing, el índice filtrable del portfolio y las páginas de detalle por proyecto están en vivo en ramstudio.com.ar.
- Reduced motion por diseño - El grafo en canvas, el scroll de Lenis y las animaciones de GSAP se desactivan cuando el usuario prefiere reduced motion, y además el grafo se pausa cuando sale del viewport.
- Una única fuente de verdad para la marca - Paleta, tipografía y reglas de contraste viven en tokens documentados, así que los cambios de marca se hacen en un solo lugar.
- Actualizaciones de contenido sin fricción - Los proyectos nuevos del portfolio se agregan como un archivo Markdown con frontmatter, y de ahí se generan el índice, los filtros y la ruta de detalle.
- Superficie de dependencias chica - Las dependencias de runtime son Astro, la integración de sitemap, GSAP y Lenis; todo lo demás es TypeScript y CSS escritos a mano.
