Designing My UX Leadership Portfolio
Overview
This project started as a simple portfolio refresh and evolved into a full UX exercise in signalling seniority, clarity, and trust. The goal was to help hiring managers and design leaders understand my impact within seconds, while still offering depth for those who want to explore detailed case studies.
My Role
I owned the experience end-to-end:
- UX strategy and positioning
- Information architecture and content structure
- Visual design, theming, and design tokens
- Interaction design and micro-interactions
- Front-end implementation (HTML / CSS / JS)
- Accessibility considerations and consent UX
Problem Framing
Recruiters skim fast, open multiple tabs, and rarely read long text. Many portfolios either look like Dribbble galleries or static CV PDFs. I wanted something in between: a surface that feels like an enterprise product, not a one-off landing page.
- Communicate current leadership role and domain immediately in the hero section.
- Use quantified impact (reduced rework, increased usability, delivery speed) rather than generic adjectives.
- Make contact workflows feel like designed flows, not just email links at the bottom.
Information Architecture
The portfolio follows a linear, recruiter-friendly narrative:
- Hero: Current leadership role, impact metrics, technology context.
- About: Short story, focus areas, and principles.
- Experience: Timeline highlighting enterprise-scale work.
- Skills: Systems thinking, UX leadership, UI craft, and delivery.
- Work: Selected case studies and product initiatives.
- Articles: Thought leadership and process writing.
- Contact: Designed as a product surface with clear CTAs and testimonials.
Navigation uses anchored scrolling with active state feedback so users always know where they are in the story.
Visual System & Theme
The portfolio is built on a small, well-defined design system using CSS custom properties. This keeps it lightweight while still behaving like a proper product surface.
-
Brand color: warm action orange
#f04922used consistently for CTAs, chips, and emphasis. -
Dual theme: light and dark modes are controlled via a
data-themeattribute on the<body>, with tokens for backgrounds, text, borders, and shadows. -
Typography: system font stack
"Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-seriffor a pragmatic, enterprise-ready feel. - Components: hero panel, stat cards, skill cards, contact pills, testimonial carousel, cookie banner, and leadership shimmer badge.
Interaction Design & Micro-UX
Interactions are designed to feel deliberate and product-like rather than decorative.
- Hero counters: animated only when in view to communicate scale of work without distracting from the content.
- Theme toggle: icon-only switch with persistent preference stored in local storage.
- Smooth scroll navigation: anchored links with active state tied to scroll position.
- Contact CTAs: LinkedIn as the preferred channel, plus “Request CV” and “Start a conversation” as separate flows.
- WhatsApp QR modal: for “Let’s talk” without exposing phone details directly.
- Cookie banner: human copy, clear choices (“Essentials only” vs “Allow analytics”), and analytics loaded only on explicit opt-in.
Outcome
- A portfolio that behaves like a small product: themed, componentized, and consent-aware.
- Clear, quantified story about UX leadership and delivery, not just UI visuals.
- A reusable visual and interaction system that can be extended to future case studies and articles.
Neutral Color Ramp
Neutral scale for backgrounds, borders, and text. Light and dark themes are built from the same ramp.
Light theme background uses Neutral-0 / Neutral-10. Dark theme background uses Neutral-100 / Neutral-90. Text always targets WCAG 4.5:1 contrast or better.
Brand Color Ramp – Orange
Primary accent is #f04922. Lighter tints are used for
soft surfaces and badges; darker tones for hover and critical
emphasis.
Action Colors – Primary
Tokens for primary CTAs, hover states, and soft surfaces.
| Token | Hex | Usage | WCAG |
|---|---|---|---|
| Button/Primary/Default | #f04922 |
Key CTAs, hero buttons | AA on white |
| Button/Primary/Hover | #d3421e |
Hover, pressed | AA on white |
| Button/Primary/Soft | #ffede6 |
Soft chips, contact pills | Text in #7a2c18 |
| Border/Accent | #f7c1af |
Accent borders, dividers | Decorative |
Typography System
System font stack for performance and familiarity in enterprise environments.
- Headlines (H1–H3) – 26–32px, 600–650 weight, line-height ~1.2
- Body – 13–15px, 400–500 weight, line-height 1.6
- Meta / Labels – 11–12px, often uppercase for section eyebrows and chips
-
Font stack –
"Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif