Portfolio web
Diseño y desarrollo de un portfolio bilingüe organizado como sistema editorial: timeline, navegación circular, microinteracciones, medios y administración de contenido en Supabase.
El portfolio surgió de una necesidad concreta: reunir proyectos de diseño industrial, investigación, visualización 3D y producto digital sin reducirlos a un único formato. Diseñé y desarrollé la web como un sistema editorial bilingüe, capaz de combinar textos extensos, imágenes, video, modelos tridimensionales y pequeñas interacciones.
01 / Tiempo
Timeline de proyectos
La cronología conserva la diversidad de formatos y permite recorrer el archivo sin ordenar los proyectos por una única categoría.
41 · 2025
Visualización 3D para EnginLabsAnimación técnica · Gemelos digitalesArrastrá el control o seleccioná un proyecto
02 / Navegación
Rueda de selección
En las páginas de proyecto, una órbita lateral mantiene visible el resto del archivo sin competir con la lectura principal.Investigación aplicada · Vidrio posconsumo · Diseño industrial
Arrastrá, girá la rueda o usá las flechas
03 / Adaptación móvil
Flor de proyectos
La navegación circular se transforma en una flor táctil para pantallas pequeñas. El gesto de arrastre incorpora inercia y selección por proximidad.
Abrí la flor y arrastrá los pétalos
04 / Capa personal
Archivo Instax
Las fotografías y los videos breves introducen una capa cotidiana sin mezclarse con la documentación técnica de los proyectos.Seleccioná una tarjeta para llevarla al frente
05 / Gestión
Panel de administración
El contenido se crea y mantiene desde una interfaz privada conectada a Supabase. Esta muestra usa datos ficticios y no accede al administrador real.Cambiá de módulo y editá el ejemplo
Decisiones de diseño
Sistema editorial
Cada proyecto se almacena como un registro independiente con título, descripción, año, etiquetas, portada y contenido en español e inglés. Los bloques admiten texto, imágenes, videos, modelos 3D y enlaces externos. También es posible definir si las secciones aparecen abiertas o cerradas al ingresar.
Supabase concentra los registros del CMS y el almacenamiento de los medios cargados desde el panel. Esta separación permite modificar una publicación sin editar el código de la página.
Detalles del proyecto
Navegación e interacción
El archivo principal se organiza mediante un timeline horizontal agrupado por años. Las páginas individuales incorporan una rueda lateral para pasar de un proyecto a otro. En pantallas pequeñas, esa navegación se convierte en una flor táctil con arrastre e inercia.
Las Instax ocupan otra función: reúnen fotografías y videos breves en una composición más personal. Los videos se reproducen automáticamente, sin sonido y con una imagen de portada para reducir el tiempo de carga percibido.
Administración
El panel privado permite crear, traducir, publicar y ordenar proyectos; cargar portadas y medios; gestionar las Instax; configurar elementos de la portada y elegir el estado inicial de las secciones. La demostración incluida en esta página reproduce algunos de esos controles con información ficticia. No enlaza ni envía datos al administrador real.
Estado actual
El portfolio continúa en desarrollo. La estructura permite sumar proyectos y medios desde el panel mientras el código conserva los componentes compartidos, el cambio de idioma y las reglas de presentación.
Apéndice técnico
Implementación
La interfaz está desarrollada con Next.js, React y TypeScript. Framer Motion controla las transiciones y los gestos; React Three Fiber y Three.js se utilizan para las escenas tridimensionales. Supabase aporta la base de datos, el almacenamiento y la infraestructura del CMS.
