This case study adheres to the Bouniq-Mercier 5-Phase Protocol, selected to prioritize verifiable technical outcomes over abstract theory. Every design decision drives a measurable business result.
Minimize cognitive friction for the reviewer to maximize the conversion rate from visitor to candidate.
Shift from displaying "pretty pictures" to providing verifiable, metric-driven evidence of business impact.
Strict WCAG AA compliance (4.5:1 contrast) is required to prove technical rigor beyond just visual design.
Maximize controllable speed. Compress all assets to WebP format to mitigate platform latency and respect user time.
Move beyond the "perfect reveal." Structure case studies to highlight pivots and failures, proving the design is a calculated evolution.
Demonstrate "Engineering Readiness" by documenting component logic, not just final screens.
This analysis reveals that while top-tier portfolios excel visually, they frequently lack defined business success metrics and WCAG accessibility compliance. It is important to note that while Mobile Speed scores averaged 73/100, some deficits stem from host-platform constraints.
| Audit Metric | Portfolio A | Portfolio B | Portfolio C |
|---|---|---|---|
| Mobile Speed Score (Source: Lighthouse) | 65/100 | 81/100 | 75/100 |
| Accessibility Score (Source: Lighthouse) | 78/100 | 100/100 | 85/100 |
| Success Metrics (Quantitative Defined?) | Qualitative Only | None | Broken Links |
| Resume Friction (Clicks to View PDF) | 1 Click PDF | 1 Click PDF | 2+ Clicks |
| Visual Evidence (Supporting Case Study) | Process Heavy | Visual Heavy | Lapsed |
Recruiter reviewing on a phone,
the resume to open as a responsive web page,
I can read skills without having to download a PDF.
Design Lead scanning for seniority,
to see defined success metrics at the top,
I can verify product strategy skills immediately.
Hiring Manager with limited time,
the portfolio to load instantly,
I can review the work quickly between meetings.
This portfolio is engineered to reduce hiring risk. By prioritizing speed, accessibility, and business metrics over decorative visuals, it eliminates cognitive friction for the reviewer and provides immediate, verifiable proof of high-level competence.
This architecture prioritizes minimum clicks to value. Selected works on the homepage reduce friction for recruiters, while the gallery provides comprehensive access for deeper exploration. The resume exists as a standalone destination to respect traditional hiring workflows.
This diagram maps the four opposing forces driving the portfolio's architecture. Instead of a standard sitemap, this framework balances User Needs (Speed & ROI) against Technical Constraints (Accessibility & Performance). It serves as the project's "North Star," ensuring every design decision solves a business problem.
Zero Friction.
No PDFs.
Mobile First.
Recruiters screen on phones. We removed the "Pinch & Zoom" barrier to ensure the first impression is frictionless.
Metrics First.
Defined KPIs.
Strategy over Art.
Design Leaders need proof of ROI. This leads with data to validate strategic maturity.
95+ Speed Score.
WCAG AA Strict.
Optimized Assets.
Performance is a feature. Optimizing assets proves engineering empathy and respect for user bandwidth.
Architectural.
High Contrast.
"Heavy" System.
Bold, high-contrast layouts signal confidence and guide the eye without decorative distraction.
This system prioritizes editorial restraint over decoration. Every element serves a functional purpose: typography creates hierarchy, color signals meaning, and spacing provides rhythm. The design is intentionally "heavy" - high contrast, bold borders, and architectural structure.
Space Grotesk
Used for titles, labels, UI elements, and any text requiring structural weight. 700-800 font weight for maximum impact.
Raleway
Used for body text, descriptions, and narrative content. 500-600 font weight balances readability with authority.
All code operates within Squarespace's code block environment, which imposes specific technical limitations:
14px minimum text size across all breakpoints. WCAG AA contrast ratios on all color combinations. Fluid typography scales smoothly across devices without breaking readability.
Every section follows Label → Title → Content pattern. Typography and spacing create rhythm, not decoration. Restraint signals confidence.
Premium moments (CTAs, interactive elements) use subtle shadows and the light runner animation. Not everything floats. Elevation is earned, not default.
One burgundy inversion (Value Prop). One animated grid (Mind Map). Repeating effects dilute impact. Every design decision is intentional, not decorative.
These animations prioritize purpose over decoration. The light runner signals premium CTAs, while the rising moon reveals content without disrupting hierarchy. Both use custom cubic-bezier curves for organic, non-linear motion that feels intentional, not mechanical.
START
FINISH
These scores validate that the portfolio meets production-ready standards. Performance optimizations, WCAG AA compliance, and zero console errors prove technical rigor beyond visual design. All metrics measured on mobile devices to reflect real-world recruiter behavior.
Status: Go
This portfolio was built using a modern LLM-assisted workflow. Rather than hiding AI involvement, this process proves I can leverage cutting-edge tools to ship faster without sacrificing quality. Different models serve different strengths - AI accelerates, humans validate.
Thank you for reviewing this case study. This portfolio was built to prove I can design systems, ship fast, and validate quality - not just make things look good. If this approach aligns with what you're building, let's talk.