UX/UI first
POSITIONING · HIERARCHY
Structure the experience around design work first, with technical depth as supporting evidence.
01
Key product screens
Homepage positioning
Process communication
Public case-study system
Reusable case-study structure
Interactive gallery layer
02
Overview
Scalable content system built on a unified architecture and reusable UI primitives. A shared content model drives pages, navigation, and component rendering.
Design SystemsReactTypeScriptFrontend ArchitectureSystem Governance
03
Problem
Most portfolio sites showcase visual quality but fail to demonstrate system thinking, maintainability, and implementation discipline.
- Communicate a hybrid UX/UI and UX Engineering profile without creating confusion.
- Structure complex professional content for fast recruiter scanning and deeper case-study reading.
- Build a reusable system that can evolve as projects, positioning, and application needs change.
04
Ownership and scope
Elfi is an independent end-to-end project covering:
- Positioning, information architecture, and recruiter journeys.
- Visual system, responsive layouts, and reusable interface patterns.
- Portfolio content structure and case-study narratives.
- React and TypeScript implementation, testing, optimisation, and deployment.
05
Key design decisions
The portfolio combines recruiter-focused content hierarchy, reusable case-study patterns, and a frontend system that supports ongoing content, positioning, and structural updates.
Fast and deep review
SCANNING · DETAIL
Combine scannable project summaries with detailed case studies for different recruiter reading behaviours.
Reusable system
SYSTEM · CONSISTENCY
Use shared content structures and interface patterns so projects evolve consistently without rebuilding each page.
06
Process
01
Define positioning
Clarify target roles, recruiter needs, and how UX/UI leads while UX Engineering supports the profile.
02
Structure content
Organise projects, experience, and case studies into a clear content hierarchy.
03
Design the system
Create reusable page patterns, responsive components, and a consistent visual language.
04
Build and refine
Build in React and TypeScript, then refine content, layouts, and positioning over time.
07
Portfolio system
The portfolio connects recruiter journeys, structured content, reusable interface patterns, and frontend delivery within one evolving system.
01
Recruiter journey
Homepage, selected work, case studies, About, CV, and contact actions.
02
Content system
Project data, reusable sections, experience, and evidence.
03
Interface system
Responsive layouts, shared components, visual rules, and interaction patterns.
04
Delivery layer
Routing, SEO, accessibility, analytics, and live frontend delivery.
08
Constraints and trade-offs
Balancing clarity and range
The portfolio needs to show design depth and technical capability without weakening the primary UX/UI positioning.
Evolving without fragmentation
Content and positioning change over time, so the system needs to support updates without losing visual or structural consistency.
09
Design outcomes
Clear professional positioning
Creates a hierarchy that presents UX/UI expertise first while keeping technical depth visible.
Consistent case studies
Establishes reusable patterns for presenting projects through a shared narrative and visual language.
Reusable portfolio foundation
Supports content updates, new projects, and positioning changes within one consistent system.
10
Tools and methods
Define positioning
UX/UI positioningContent hierarchyRecruiter journey
Structure content
Information architectureCase-study frameworkSupporting evidence
Design the system
Reusable UI patternsResponsive UIVisual system
Build and refine
ReactTypeScriptSEOGitHub