Mobile-First Portfolio Redesign

01 · Audit

What was broken on mobile

In mid-2026 I ran a structured mobile audit of this portfolio using Chrome DevTools at iPhone 14 Pro Max dimensions, stepping into the shoes of a hiring manager opening the site on their phone. Six issues surfaced. None were dealbreakers in isolation. Together they added up to a first impression that undercut the content.

Wave 1

Comparison tables overflowing

Tables in the icebox section clipped horizontally with no scroll affordance. Columns simply disappeared off the right edge of the screen.

High severityLow effort

Wave 1

Testimonial quotes truncating mid-sentence

Long quotes cut off abruptly with no ellipsis and no "read more." Looked like a rendering bug rather than a deliberate design choice.

High severityLow effort

Wave 1

Section headings misaligned

Double padding on the section header component caused the numbering to float out of alignment with the heading text on narrow screens.

Low severityLow effort

Wave 1

Heading font not scaling

Display headings were fixed at desktop sizes, causing them to crowd the screen or overflow on narrow viewports.

Low severityLow effort

Wave 2

Impact stats grid collapsing

The three-column stats grid stacked vertically on mobile, creating a long scroll of numbers with no visual rhythm or hierarchy.

High severityHigh effort

Wave 2

Skills section unreadable on mobile

A dense wall of 50+ skill tags across five categories with no structure. No way to scan which category you were looking at or navigate between them.

High severityHigh effort

02 · Prioritisation

What to fix first and why

With six issues on the list, the question was sequencing. I plotted each against severity and implementation effort. High-severity quick wins shipped in Wave 1. The carousel work, a shared interaction engine built from scratch, followed in Wave 2 once the surface fixes were live.

Severity

HighLow

Wave 1

High severity · Low effort

01 Table overflow 02 Quote truncation

Wave 2

High severity · High effort

05 Impact carousel 06 Skills carousel

Wave 1

Low severity · Low effort

03 Heading align 04 Font scale

Not in scope

Low severity · High effort

Nothing here

Low effort Effort High effort

Wave 1 · High severity · Low effort

01 Table overflow 02 Quote truncation

Wave 1 · Low severity · Low effort

03 Heading align 04 Font scale

Wave 2 · High severity · High effort

05 Impact carousel 06 Skills carousel

Not in scope

Nothing here

03 · Fixes

What changed and why

Five fixes across two waves. Each one is shown as a before/after phone mockup, illustrative rather than pixel-accurate screenshots, since the goal is to communicate the nature of the change, not reproduce the exact UI.

Fix 01 of 03

Impact stats: from collapsing grid to swipeable carousel

A three-column stats grid that stacked into a long vertical list on mobile. Replaced with a single-card carousel: one stat in focus, swipe to advance.

Before

Impact

~80%

Accuracy improvement

Enterprise clients

Regressions at go-live

Long scroll, no rhythm

After

Impact

~80%

Accuracy improvement

The tradeoff

A carousel trades glanceability for focus. On a small screen where a three-column grid becomes an unreadable vertical list, the trade is worth making.

Fix 02 of 03

Skills section: from pill wall to category carousel

A dense wall of 50+ skill tags across five unseparated categories. Replaced with a card-per-category carousel: category name prominent, skills below, swipe between categories.

Before

Skills

Python SQL JavaScript Figma Jira Postman Notion Miro Lokalise Claude Code Roadmapping PRD writing +40 more...

No category structure

After

Skills & Tools

01 / 05

Core PM

Product Discovery

PRD Writing

Roadmapping

Sprint Planning

The tradeoff

Hiding categories behind a swipe interaction adds a step for users who want to scan everything. But a wall of 50 unstructured tags is not scannable anyway; the carousel at least provides structure.

Fix 03 of 03

Table overflow: from hard clip to scrollable with hint

Comparison tables clipped at the screen edge with no scroll affordance; columns simply disappeared. Fixed with horizontal scroll, a right-edge fade gradient, and a visible caret hint.

Before

Comparison

Feature	Option A	Option B	Opt...
Speed	Fast	Medium	—
Cost	High	Low	—

⚠Column C cut off, no scroll

After

Comparison

Feature	Option A	Option B	Option C
Speed	Fast	Medium	Slow
Cost	High	Low	Medium

›

↔Scroll to see all columns

The tradeoff

Horizontal scroll on a phone is an antipattern in most contexts, but comparison tables have no better alternative; they only make sense as tables. The scroll hint makes the affordance visible rather than leaving users to discover it by accident.

04 · Reflection

What I'd carry forward

Running a structured audit on your own work is harder than it sounds. The familiarity bias is real: you stop seeing what's broken when you built the thing yourself.

Personal projects deserve the same rigour as product work. A structured audit surfaced issues I had walked past for months. The process matters regardless of the audience size.
Sequencing is the PM skill, not just the fixing. Six issues, limited time. The disciplined move is quick wins first, then the complex shared infrastructure. That order holds even on a solo project.
Cross-functional fluency shows up in the details. The carousel pause/resume bug required diagnosing a browser behaviour, then deciding what the right user experience should feel like. Both mattered, and neither alone was enough.

Good portfolio, wrong screen. Fixed.