← projects
2026
Web (Desktop & Mobile)
Portfolio

A modular case-study platform designed to communicate complex projects through structured narrative, contextual navigation, and scalable architecture.

Stack
  • Type: Portfolio · Case Study Platform
  • Role: Product Designer · UX/UI · Frontend Development
  • Scope: Information Architecture · Narrative Design · Contextual Navigation · Responsive System · Performance Optimization

01. Snapshot

Quick project overview, scope, role, and overall context
Intro

This portfolio was conceived not as a visual gallery, but as a structured product system designed to communicate process, thinking, and technical execution.

The objective was to transform complex projects into clear, digestible narratives while maintaining architectural consistency, scalability, and technical coherence.

The approach prioritized content architecture before visual styling, defining a repeatable structure for every case study.

My Role
Designing a scalable narrative architecture for case studies Developing a modular section-based system Implementing contextual sticky navigation Crafting responsive interaction patterns Building a custom WordPress theme from scratch Developing custom JavaScript logic for advanced interactions
Client
Aitor Arina
Users
Recruiters · Product Teams · Potential Clients
Business Goal
Explaining all my tech skills
Key Challenge
Translating complex projects into structured, clear storytelling
Devices
Desktop-first · Mobile optimized
CMS
WordPress

02. Screenshots

Key interface decisions that define the portfolio experience
*You can click on an inmage or stay on ti so the carousel will stop moving
1 / 9
Service Discovery Carousel

Homepage carousel presenting core capabilities with contextual navigation

Service Discovery Carousel

The homepage introduces the portfolio through a carousel showcasing the main service areas:

- Ecommerce
- Responsive Design
- UX/UI
- Web Design
- Web Development

A navigation bar acts as both section selector and progress indicator, displaying the current service and the remaining time before the next slide.

This interaction creates a guided introduction to the portfolio’s capabilities while keeping the interface visually lightweight.

2 / 9
Project Filtering System

Category-based navigation enabling quick project discovery.

Project Filtering System

Projects can be filtered by category through a horizontal navigation menu.

Available filters include:

All

Ecommerce

UX/UI

Responsive

Web Design

Web Development

Project cards include an interactive hover state revealing additional context and a directional cue indicating that the card leads to a detailed case study.

This improves discoverability and navigation efficiency.

3 / 9
Contextual Case Study Navigation

Section-based navigation designed for long-form case studies

Contextual Case Study Navigation

Each case study includes a contextual navigation system listing the main sections of the project:

Snapshot

Screenshots

Challenge

Core UX

Responsive

Technical

Outcome

The navigation highlights the current section in real time while scrolling, helping users maintain orientation in long-form pages.

To improve navigation efficiency, a Back to Top shortcut appears alongside the menu, allowing users to quickly return to the beginning of the case study — a feature particularly useful on long templates and mobile devices.

This combination transforms a deep scroll page into a structured and easily navigable reading experience.

4 / 9
Project Overview Hero

Condensed project summary providing immediate context

Project Overview Hero

The hero section provides a quick overview of the project including:

Year

Project type

Role

Scope

Technology stack

It also includes:

A visual preview carousel

Links to the live website and prototype

A short project description

This allows users to quickly understand the project before diving into the full case study.

5 / 9
Section Navigation During Scroll

Sticky navigation maintains context while browsing sections

Section Navigation During Scroll

As users navigate through the case study, the section menu remains visible and highlights the active section.

This persistent navigation enables:

Faster section access

Improved orientation in long pages

Clear understanding of the case study structure

6 / 9
Expandable Media System

Interactive media elements provide deeper visual explanation

Expandable Media System

Images and videos include interactive controls that allow them to be expanded in a modal view.

The modal presents:

Enlarged visual content

Title and contextual description

This allows users to explore visual material without interrupting the narrative flow of the page.

7 / 9
Structured UX Documentation

Tabbed layout organizing complex UX information into clear sections

Structured UX Documentation

The Core Experience section organizes UX explanations into four thematic tabs:

Information Architecture

Navigation & Discovery

Interaction Patterns

Product Detail Experience

This structure helps users explore specific aspects of the design process without overwhelming the interface.

8 / 9
Expanded Media Modal

Detailed media inspection through an immersive modal interface

Expanded Media Modal

Visual elements can be expanded into a modal view for closer inspection.

The modal interface includes:

Carousel position indicator (e.g. 1 / 5)

Close control

Image preview in large format

Title and contextual description

This system allows users to examine interface details without leaving the current section, maintaining narrative continuity while enabling deeper visual exploration.

9 / 9
Related Projects

Cross-navigation encouraging exploration of additional case studies

Related Projects

At the end of each project, related case studies are suggested using a card-based layout similar to ecommerce product recommendations.

This encourages users to continue exploring the portfolio while discovering related work.

03. Challenge / Solutions

Key issues identified and the design decisions made to address them
Challenge

  • Presenting long-form case studies without overwhelming the user

  • Avoiding disorientation in deep-scroll layouts

  • Maintaining consistency across multiple projects

  • Showing technical depth without clutter

  • Designing a structure scalable for future work

  • Minimizing dependency on third-party plugins

Solution

  • Fixed structural framework across all case studies

  • Contextual sticky navigation with active section tracking

  • Clear separation between UX narrative and technical implementation

  • Modular template architecture

  • Scroll-based progressive disclosure

  • Fully custom, performance-focused development

04. Context

Understand the project context, its constraints, and the goals to be achieved

The portfolio addresses a common challenge:

 

How to communicate both design thinking and technical capability in a single, coherent system.

Rather than designing isolated pages, the focus was on defining a universal structural framework before building visual layers.

 

Priority order:

 

Architecture → Hierarchy → Navigation → Interaction → Visual Design

ampliar

05. Core Experience Design

How the product is structured, navigated, and experienced from the user’s perspective

Information Arquitecture

Each project follows a consistent structural sequence:

Snapshot → Screenshots → Challenge → Core UX → Responsive → Technical → Outcome

This ensures:

  • Reduced cognitive load

  • Clear narrative progression

  • Structural consistency

  • Scalability for future projects

Navigation & Discovery

A contextual sticky navigation system was implemented to:

  • Indicate the current section

  • Provide quick anchor-based access

  • Maintain orientation in long-form layouts

  • Adapt responsively with horizontal scroll in mobile

The goal was to create guidance without adding friction.

Interaction Patterns

  • Consistent tab systems

  • Accordion patterns in mobile

  • Scroll-based section activation

  • Controlled carousels without external libraries

  • Clear active states and predictable behavior

Interactions are subtle, intentional, and functional — never decorative.

Case Study Experience

Each case study is treated as a self-contained product narrative rather than a visual showcase.

The experience prioritizes:

  • Logical progression

  • Clear hierarchy

  • Separation of UX decisions and technical execution

  • Readability across devices

06. Responsive Design

Adapting the experience across different devices without compromising clarity or usability

The responsive system was designed to maintain orientation and hierarchy without simplifying content excessively.

Key principles:

  • Persistent contextual navigation

  • Horizontal scroll navigation in mobile

  • Collapsible information blocks

  • Optimized vertical rhythm

  • Consistent structural logic across breakpoints

The mobile experience preserves the same architectural logic as desktop.

Responsive

Mobile Section Navigation

Mobile Section Navigation

On mobile devices, the case study navigation adapts into a sticky top bar with horizontal swipe interaction. Key characteristics: - Sticky navigation fixed to the top - Horizontal scrolling between sections - Active section continuously centered in the viewport -…

1 / 5

Responsive Content Hierarchy

Responsive Content Hierarchy

The responsive layout restructures complex sections into a clear vertical hierarchy. - Key adjustments include: - Single-column layout - Increased vertical rhythm - Optimized spacing between sections - Simplified content grouping This ensures long-form case studies remain readable and scannable…

2 / 5

Responsive Media System

Responsive Media System

Carousels and media elements are optimized for touch interaction. Enhancements include: - Swipe navigation for image galleries - Larger tap targets for controls - Full-width media presentation - Optimized loading for performance This allows users to explore visuals without disrupting…

3 / 5

Mobile Media Modal

Mobile Media Modal

Media elements can be opened in a modal view for detailed inspection. The modal interface includes: - Large full-screen image display - Carousel position indicator (e.g. 1 / 5) - Close control optimized for thumb reach - Title and contextual…

4 / 5

Consistent Cross-Device Architecture

Consistent Cross-Device Architecture

Rather than simplifying the case studies for mobile, the design maintains the same architectural logic used on desktop. This ensures: - Consistent section structure - Identical narrative flow - Predictable navigation behavior Users experience the same project story regardless of…

5 / 5

07. Technical Implementation

How design decisions translated into a scalable and maintainable system
1 / 6
Dynamic Project Hero System

Customizable hero component controlled through project-level variables

Dynamic Project Hero System

Each project uses the same hero template while allowing visual customization through configurable variables.

Elements dynamically assigned per project include:

- Background color

- Button styling

- Icon colors

- Visual assets

This approach allows every case study to maintain its own visual identity while preserving a consistent template architecture.

2 / 6
Custom JavaScript Interaction Layer

Core interactive components implemented without third-party plugins

Custom JavaScript Interaction Layer

All interactive features were developed using custom JavaScript instead of external plugins.

Key interactions include:

- Image carousels

- Media modals

- Project filtering system

- Scroll-aware navigation

This approach improves:

- Performance and load speed

- Code maintainability

- Full control over interaction behavior

3 / 6
Modular Template Architecture

Structured WordPress template system built for scalability

Modular Template Architecture

The portfolio uses a modular template architecture where each section of the case study is separated into reusable components.

4 / 6
Structured Content with ACF

Custom fields used to manage case study content within WordPress

Structured Content with ACF

Advanced Custom Fields were used to structure the content of each case study.

Media galleries are stored using structured arrays, allowing the system to dynamically retrieve:

- Image titles

- Captions

- Descriptions

- Alt attributes

This enables richer project documentation while improving content management and accessibility.

5 / 6
Media Metadata and SEO Optimization

Structured media metadata improves accessibility and search visibility

Media Metadata and SEO Optimization

Each media asset includes detailed metadata within the WordPress media library:

- Alt text for accessibility

- Titles and captions

- Contextual descriptions

This ensures images contribute not only to visual storytelling but also to SEO performance and semantic structure.

6 / 6
Lightweight WordPress Architecture

Custom development approach minimizing plugin dependency.

Lightweight WordPress Architecture

The portfolio was built with a custom WordPress theme developed from scratch.

Only a minimal set of plugins were used, relying instead on:

- Custom PHP templates

- Advanced Custom Fields

- Native WordPress functionality

This results in a lighter, faster, and more maintainable system.

08. Outcome / Learnings

Key issues identified and the design decisions implemented to resolve them
Outcome
  • Scalable case-study framework.
  • Clear communication of complex processes.
  • Balanced design and technical narrative.
  • High performance with minimal plugin footprint.
Learnings
  • Narrative architecture is as critical as visual design.
  • Simplicity in interaction increases perceived professionalism.
  • A portfolio is itself a product.