A portfolio designed to communicate complex projects through structured storytelling and scalable architecture.
A portfolio designed as a structured product, transforming complex projects into clear, navigable narratives.
Instead of a visual gallery, this portfolio works as a product:
Each case study follows a consistent structure to improve readability, navigation, and scalability.
Product Designer · UX/UI · Frontend Development
The main challenge was translating complex design and technical work into a clear, structured experience that remains readable at scale.
The approach focused on structure first, before visual design:
Architecture → Hierarchy → Navigation → Interaction → Visual
Challenge Long-form case studies introduced several structural issues:
Users lost orientation during deep scroll
Content lacked consistency across projects
Content lacked consistency across projects
Visual-first approaches failed to communicate decision-making
Solution The portfolio was designed as a structured system:
Fixed structure across all case studies
Sticky navigation with active section tracking
Modular templates ensuring consistency and scalability
Progressive disclosure to manage content density
Fully custom build optimized for performance and control
Each case study follows a consistent narrative structure:
Snapshot → Screenshots → Challenge → Core UX → Responsive → Technical → Outcome
This ensures:
Reduced cognitive load
Clear narrative progression
Consistency across projects
Scalability as new case studies are added
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.
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.
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
Case Study Navigation (Sticky)
A persistent navigation system that tracks the user’s position within long-form case studies, improving orientation and reducing cognitive load during deep scroll interactions.
Media Modal
A modal system designed to explore visual assets in detail without breaking the narrative flow, maintaining context while enabling deeper inspection.
Project Cards (Grid + Hover)
A modular card system designed to present projects consistently, with hover interactions revealing additional context and encouraging exploration.
Filtering System
A category-based filtering system that enables users to quickly access relevant projects, improving discoverability and navigation efficiency.
Homepage Carousel
A guided carousel introducing key service areas, combining timed transitions with manual navigation to balance storytelling and user control.
Tabs System (Core UX)
A tab-based system organizing complex UX content into digestible sections, allowing users to explore specific areas without overwhelming the interface.
The homepage introduces the portfolio through a guided, structured experience that prioritizes clarity over visual noise.
A carousel system highlights different capabilities, combining automatic progression with manual navigation to balance storytelling and user control.
Projects are organized in a grid-based layout supported by a filtering system, allowing users to quickly identify relevant case studies.
Each card provides immediate visual context while hover interactions reveal additional information and encourage deeper exploration.
A contextual navigation system allows users to move across different sections of each case study while maintaining orientation.
The active section is continuously highlighted, transforming long-form content into a structured and scannable experience.
Each case study follows a consistent structure designed to communicate complex projects clearly.
Content is organized into modular sections that progressively reveal information, reducing cognitive load while maintaining narrative clarity.
Visual elements can be expanded into a modal view, allowing users to inspect interface details without leaving the current context.
This interaction preserves narrative continuity while enabling deeper visual exploration of each project.
The responsive system preserves the same structural logic across devices, ensuring consistency in navigation and content hierarchy.
Layouts adapt to different screen sizes without simplifying the experience, maintaining clarity and usability across all breakpoints.
The mobile experience keeps the same structure as desktop.
Key principles:
Sticky horizontal navigation
Single-column layout
Touch-optimized interactions
Full-width media
No features removed, only adapted.
Customizable hero component controlled through project-level variables
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.
Core interactive components implemented without third-party plugins
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
Structured WordPress template system built for scalability
The portfolio uses a modular template architecture where each section of the case study is separated into reusable components.
Custom fields used to manage case study content within WordPress
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.
Structured media metadata improves accessibility and search visibility
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.
Custom development approach minimizing plugin dependency.
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.
Outcome Learnings 
An eCommerce platform designed to structure and navigate a highly fragmented product ecosystem, combining bicycles, equipment, and services within a…
Behavior-driven earning platform redesigned to increase activation, retention, and user trust through structured progression and friction reduction.