Ads Atelier: joyería fina y catálogo visual
17 de junio de 2024
Sitio Astro creado desde cero para una marca de joyería fina, con dirección visual premium, animaciones de marca, carruseles e integración con Instagram.
Ads Atelier fue un sitio creado desde cero para una marca de joyería fina. El diseño ya venía definido por el equipo de diseño, pero mi trabajo fue llevar esa propuesta a una experiencia web cuidada, elegante y coherente con una marca de lujo.
Para esta etapa ya estaba trabajando con Astro y Tailwind CSS de forma más natural, y este proyecto marcó también el abandono práctico de Sass en varios de mis sitios. Tailwind ya me daba suficiente control para resolver layout, estados visuales, responsive y detalles de interacción sin depender de otra capa de estilos.
Desarrollo y reto técnico
Construí las secciones principales del sitio, navegación, carruseles, contacto, líneas de joyería, piezas personalizadas y comportamiento visual de marca. Una parte importante fue cuidar que la página se sintiera premium: imágenes bien tratadas, transiciones sutiles, jerarquía visual y animaciones de aparición/desaparición con scroll, especialmente alrededor del logo e isologo.
El reto técnico más interesante fue integrar contenido de Instagram dentro del sitio. La marca quería mostrar sus publicaciones recientes en un carrusel propio, lo que me obligó a investigar el funcionamiento de la API de Instagram y a contemplar casos donde las publicaciones podían ser imágenes o videos. Esa integración funcionó, aunque dependía de tokens temporales que requerían actualización periódica.
También fue un proyecto donde el detalle visual importaba mucho. Las imágenes de joyería necesitaban verse bien, conservar proporción y mantener una navegación ligera. Aunque el alcance no era tan complejo como un sistema, la exigencia estética hacía que pequeños errores de espaciado, opacidad o animación se notaran más.
Tecnologías utilizadas
- Astro.js
- React
- Tailwind CSS
- TypeScript
- Swiper
- API de Instagram
Resultado
El sitio presenta la marca, sus colecciones, piezas personalizadas y puntos de contacto en una experiencia visual sobria y directa. Para mi portafolio, Ads Atelier representa trabajo de maquetación premium con Astro, integración social y cuidado de detalles visuales para una marca donde la estética es parte central del producto.
Los comentarios están pausados temporalmente mientras se implementa moderación y protección antispam.