Web portfolio
Design and development of a bilingual portfolio structured as an editorial system: timeline, circular navigation, microinteractions, media, and Supabase content management.
WEB PORTFOLIOEXPLORE THE SITEThe portfolio began with a practical requirement: bringing industrial design, research, 3D visualization, and digital product work into one archive without forcing every project into the same format. I designed and developed the website as a bilingual editorial system capable of combining long-form text, images, video, three-dimensional models, and small interactions.
00 / System
One portfolio, five connected layers
The public experience and the admin share one editorial architecture. Each layer supports a different part of the journey, from discovering a project to maintaining it in two languages.3D scene, draggable and expandable portrait, theme, language, and interaction guide.
Select a layer to explore the system
01 / Time
Project timeline
The chronology preserves different project formats and makes the archive explorable without forcing every entry into one category.
41 · 2025
3D Visualization for EnginLabsTechnical Animation · Digital TwinsDrag the control or select a project
02 / Navigation
Selection wheel
Project pages use a lateral orbit to keep the rest of the archive available without competing with the main reading column.Photogrammetry · Digital heritage
Drag, scroll, or use the arrows
03 / Mobile adaptation
Project flower
The circular navigation becomes a touch-based flower on small screens. Dragging adds inertia and proximity-based selection.Open the flower and drag the petals
04 / Personal layer
Instax archive
Photographs and short videos add an everyday layer while remaining separate from the technical documentation of each project.Select a card to bring it forward
05 / Management
Administration panel
Content is created and maintained through a private interface connected to Supabase. This specimen uses fictional data and never accesses the real admin.Switch modules and edit the example
My role
I defined the information architecture, visual direction, interaction behaviour, and content model. I also developed the website and the panel used to manage projects and media.
The work progressed through iterations. Each component was adjusted to its content and device: the circular desktop navigation, for example, required a dedicated touch-based alternative on mobile.
Editorial system
Each project is stored as an independent record with its title, description, year, tags, cover, and content in Spanish and English. Blocks support text, images, video, 3D models, and external links. The initial open or closed state of the project sections can also be configured.
Supabase holds the CMS records and the media uploaded through the panel. This separation makes it possible to revise a publication without editing the page code.
Administration
The private panel is used to create, translate, publish, and order projects; upload covers and media; manage the Instax collection; configure the landing page; and choose the initial state of project sections. The specimen on this page reproduces several of these controls with fictional information. It neither links nor sends data to the real administrator.
Implementation
The interface is built with Next.js, React, and TypeScript. Framer Motion handles transitions and gestures; React Three Fiber and Three.js support the three-dimensional scenes. Supabase provides the database, storage, and CMS infrastructure.
Current state
The portfolio remains under active development. Its structure allows projects and media to be added through the panel while the code maintains shared components, language switching, and presentation rules.