The challenge.
Giving projects and experience the spotlight while retaining a dynamic identity and clear navigation on desktop and mobile. Visitors should also be able to change style and language without losing the page or section they are reading.
My contribution.
The website is generated from shared content using HTML, CSS and JavaScript, with Node.js during the build. The three compositions share structure and data, while each language has its own URLs, copy and metadata. The selectors preserve preferences across navigation.
- Organisation of the career history and documentation of ten projects.
- Three-style system, bilingual navigation and persistent preferences.
- Responsive design, image optimisation and accessibility improvements.
What we built.
A complete Spanish and English portfolio with ten case studies, category filters, accessible galleries and CVs in both languages. It includes responsive WebP images, lazy loading, keyboard navigation and support for reduced motion.
Visual personality works best when it helps people discover the work and understand its decisions.
Development decisions.
Shared content, complete pages
A Node.js generator combines projects, career history and translations into static HTML. Each project has a Spanish and an English URL with its own title, description and structured data. The main content arrives in the document; JavaScript adds filters, preferences and galleries.
Three identities on the same structure
Engineering, Editorial and Geometry share the same data while CSS changes colours, typography, shapes and layout. The visual preference persists across navigation. Switching language links to the equivalent page and retains the section, keeping exploration continuous.
Care for delivery as well as design
Images include explicit dimensions and WebP variants suited to the screen. Galleries support keyboards, motion respects visitor preferences and videos load on request. Build checks review routes, languages, resources and metadata before preparing the publication.
The project in use.
- Choose one of the three styles and filter projects by speciality to find an area of interest.
- Open a project, follow its case study and enlarge the images without leaving the page.
- Switch that same project to English and continue to another while retaining the visual preference.
What to explore.
A way into the project through its screens, supporting material and, where available, its source code.
- How the composition of the same page changes with another style.
- The correspondence of Spanish and English routes and sections.
- Keyboard navigation, galleries and project readability on mobile.