Making of
This portfolio is itself a case study.
Designed by me, built with Claude. The process is the proof, so I'm publishing it.
1 · Audience before pixels
Three readers were defined first: a human reviewer with 60 seconds, search crawlers needing semantic structure, and AI agents that will learn about me from this site. Every decision serves all three.
2 · Contextual prompting
I treated Claude like a design team: full resume and 66-page deck as source material, real job postings as context, numbered feedback after every round, and a demand that it audit its own UX and fix what it found.
3 · Values before visuals
Non-negotiables set on day one: WCAG 2.1 AA for real, a reader-controlled accessibility menu, zero fabricated claims, and evidence-first storytelling on every project.
4 · System, then pages
Tokens first, from the Snow UI design system: Inter across the ramp (64/48/18), ink #1C1C1C on soft paper, a 20px component radius, Snow pastels for categories, and one deep green accent used sparingly, with the accent discipline adopted from tasteskill.dev. Cards, pills, tiles and accordions share one radius, shadow and spacing family.
5 · Iterate with receipts
Each version was checked for mobile behaviour, no-JavaScript fallbacks, colour-blind support, print styles and SEO metadata. Pages compile CSS, JS and images into single files, so nothing ever breaks on extraction.
6 · Give the method away
The full thinking process is below as markdown. Copy it, replace my facts with yours, and you have a working method for building your own evidence-first portfolio with AI.
# How this portfolio was made: my thinking process By Mian Muhammad Adil, Product Designer, with Claude (Anthropic) as my build partner ## 1. Start with the audience, not the pages Before a single pixel, I defined three audiences: - A hiring reviewer scanning dozens of portfolios (needs signal in 60 seconds) - Applicant tracking systems and search crawlers (need semantic HTML and structured data) - AI agents that will summarize me from this site (need facts stated plainly, JSON-LD, clear headings) ## 2. Treat the AI like a design team, not a vending machine I did not ask for "a portfolio website." I practiced contextual prompting: - I gave Claude my full resume and my 66-page portfolio deck as source material - I supplied the actual job postings I was targeting, so copy could mirror real requirements - I gave feedback in numbered lists after every version, the way I would review a design team - I asked for a UX audit of the AI's own output, then made it fix its own findings - I challenged defaults: fonts, pills, animations, information architecture, tone Lesson: the quality of AI output is a mirror of the quality of context you provide. ## 3. Decide the values before the visuals Non-negotiables I set on day one: - WCAG 2.1 AA for real: skip links, keyboard support, visible focus, reduced-motion respect - A reader-controlled accessibility menu: dark mode, high contrast, text sizing - No fabricated claims. Every number on this site traces to a real project - Evidence-first storytelling: sector, challenge, solution, process, outcome for every project ## 4. Design system, then pages We standardized tokens first, adopting the Snow UI design system: Inter across the type ramp (64/48/18 at weights 600/400), ink #1C1C1C on soft paper surfaces, a 20px component radius scale, Snow pastels for categorization, and a single deep green accent (#1E6B45), applied with the accent discipline adopted from tasteskill.dev (base #F5F4F2 from their theme-color): reserved for borders, graphics and focus states, with a darker tone (#134D31) for text links to preserve WCAG contrast. Components (cards, pills, tiles, accordions) all draw from the same radius, shadow and spacing families. ## 5. Iterate in public, with receipts Every version was reviewed against a checklist: mobile behaviour, no-JavaScript fallbacks, colour-blind support, print styles, SEO metadata, and honest copy. The self-contained build (CSS, JS and images compiled into each HTML file) means the site works anywhere, with zero broken-path risk. ## 6. What I'd tell anyone copying this process 1. Give the AI your raw materials, not your conclusions 2. Ask it to audit itself; it finds real flaws when invited to 3. Keep a single source of truth for facts, and refuse invented ones 4. Accessibility is a feature you demo, not a paragraph you claim 5. Ship, review on a real phone, then iterate again Copy this file, replace my facts with yours, and you have a working method.