Behind the scenes
From scattered work to coherent story — how this portfolio came together.
This portfolio wasn’t built by an agency or a developer. It was built the way most things actually get built — through a long process of audit, rewrite, and iteration. Fourteen years of work. Seven case studies. Hundreds of small decisions that turned scattered material into something I’d actually want to send to a hiring manager.
My work is used by 20 million people.
My portfolio wasn’t arguing for it.
Fourteen years of design work. Seven case studies. Real metrics — 2.1M citizen requests, 500K+ users, 98% adoption on internal platforms. The visual design wasn’t the problem. The story was. Project descriptions were surface-level. The hero pitched to no one in particular. As a Program Manager — Design, I knew both halves matter. So I rebuilt the half that wasn’t working.
The approach: content first, code last
Most portfolio redesigns start with picking a template or a color palette. This one started by accepting that the visuals were fine and the writing wasn’t. Once the content was honest about what each project actually did, the design had something specific to support — and most of the visual decisions followed from there.
Content audit & rewrite
Before touching any visual design, I audited every word on the existing site. Section by section, I marked what was weak, what was wrong, and what was missing. I used Claude as a critical reader — a second pair of eyes that questioned vague claims, flagged generic phrasing, and pushed for specifics every time I tried to coast on “design user experiences” energy.
What changed
Every section was rewritten. The hero stopped trying to be everything to everyone and picked an audience. The about page got a real story. Project descriptions traded adjectives for verifiable specifics. Even my own name was misspelled in two places — that’s how surface-level the original review process had been.
The shift
From “I design user experiences” to “I design systems used by 20M+ people.” Same designer, fundamentally different claim. One sounds like a LinkedIn headline. The other sounds like someone who has done the work.
Case study deep dives
This was the slowest phase, on purpose. For each of the seven case studies, I worked through 20-plus questions about the actual context — team size, before-state, design decisions I made and why, the politics that shaped them, the metrics that proved (or didn’t prove) the work mattered. Nothing was assumed. Every claim had to survive being asked “are you sure?” twice.
Maryam Ki Dastak
2.1M doorstep service requests. From paper-based workflows to a doorstep delivery system citizens actually trust.
City Watch
8,000+ cameras, one dashboard. Card sorting with PSCA operators revealed they organized features by role, not by function — which killed the original tabbed interface and produced a layered, map-centric design that tested at SUS 78.25.
Punjab Jobs
500K+ users. A redesign that replaced an aging recruitment portal with something both seekers and employers could navigate without help.
Employee Self Service
98% daily adoption. The internal platform that quietly became the most-used tool in the organization.
PITB Official
13 screens, 30 hours, 1 designer. The flagship public site of a 2,000-person tech authority — built under a deadline that didn’t allow for second drafts.
Punjab AQI
36 districts of air-quality data. A platform where the color of a chart had to communicate health risk to people who had never used a dashboard before.
eBiz Punjab
100K+ business registrations. A multi-department portal that consolidated permits, licenses, and applications into one application flow.
Design direction
I explored three visual directions — Scandinavian minimal, warm editorial, modern professional — and ended up with a hybrid that drew from all three. The design moved through reference sites, mockups, and several rounds of revision, each driven by specific feedback rather than vibes.
Key decisions
Scrolling marquee hero (inspired by reference work in Scandinavian design portfolios). Single-color project cards with impact stats up top. Full-bleed dark sections to break up the rhythm. Floating mockup cutouts that bleed off the card edge — a technique that gave the work the editorial feel I was after without losing professionalism.
The logo
The AA monogram was sketched through Gemini — calligraphic explorations until the mark balanced personal warmth with the seriousness of the work. The final version went through several rounds before it felt right at every size, from the favicon to the hero.
Code & build
The site is built in Next.js with React and Tailwind, with Framer Motion handling the in-page transitions. I made every visual call — the spacing, the rhythm, the type scale, the way a card feels when it loads. Claude handled the implementation work, which freed me up to spend my judgement on the parts only I could decide.
Design decisions, not preferences
Every spacing choice was a debate. 1100px wrapper or 1240? 16px gap or 14? Single-color cards or multi? Each one decided through reference, conversation, and live preview — never by personal taste alone, because personal taste is what makes a portfolio look like every other portfolio.
The horizontal-scroll work section
The work grid on the home page started as a vertical 3-column layout, then became a desktop horizontal-scroll-pin section that holds attention without scroll-jacking. It took several rounds of math to get the cards to settle correctly between scroll positions. Worth it — that section is now the page’s signature interaction.
Resume & deployment
The final piece — a web-based resume on the site backed by a downloadable PDF. Every line was rewritten to name a specific project and tie back to a real metric. No more “improved user engagement” bullets. The site deploys to Vercel via GitHub, with Antigravity helping bridge the deploy pipeline early on.
What AI did well. What only I could do.
AI excelled at
Structure — organizing 14 years of scattered work into coherent narratives
Consistency — maintaining voice and tone across long-form documents
Speed — first drafts in minutes that would have taken hours by hand
Implementation — translating design decisions into working Next.js components
Critique — catching weak claims and pushing for specifics every time I tried to glide
Only I could provide
Truth — every fact, metric, and date came from my memory and records
Taste — knowing when something "felt right" versus what was technically correct
Direction — choosing between options based on intuition and a sense of audience
Story — the emotional through-line, the career arc, the part that's actually mine
Quality bar — saying "no, again" when something was good enough but not yet good
The AI toolkit
Claude
Anthropic
The primary partner across every phase. Content audit, case study writing, copy for the hero and about page, design direction, code architecture, component implementation, and the iterative refinement that made up most of the actual work — all through one continuous conversation that ran for weeks.
Gemini
Logo design. Calligraphic explorations of the AA monogram until the mark balanced personal warmth with the seriousness of the work. Several rounds of refinement until it sat right at every size.
ChatGPT
OpenAI
Background research. Topic exploration, competitive portfolio scans, and gathering market context that fed into the content strategy.
Google Antigravity
Helped bridge the deploy pipeline. Walked me through GitHub setup and the initial Vercel configuration — useful for someone whose comfort zone has always been in the design layer, not the deploy layer.
Vercel
Vercel
The production host. Push to GitHub, deploy to live. The infrastructure that made it possible to ship updates in minutes instead of waiting on someone else.
The result
A portfolio that finally matches the work. Seven case studies backed by real data — research findings, design decisions, named projects, verifiable metrics. A web resume where every bullet ties to a specific project. A design language consistent enough that it could have been built by an in-house team. And this page — a record of how it actually came together, not a marketing pitch about the tools that helped.
The lesson
AI didn’t design this portfolio. It helped me build one. There’s a difference, and the difference matters more than people seem to want to admit right now.
Every fact came from my memory. Every design decision came from my taste, sharpened by 14 years of knowing what good looks like. Every “no, that’s not it” came from instincts no model can replace. The tools were faster than my hands. They weren’t sharper than my eye.
If you’re a designer wondering how to use AI on a project like this — don’t start with the tools. Start with what you actually want to say. The tools will help you say it better, and they’ll help you say it faster. They won’t help you decide what’s worth saying. Only you can do that.
From a session, late one night
“I’ve worked with Arsalan across seven case studies, a complete website build, a resume rewrite, and this page you’re reading now. What stood out wasn’t the 14 years of experience or the 20 million users — it was how he made decisions. He never accepted the first option. He pushed back when something didn’t feel right, even when he couldn’t articulate why yet. He brought reference sites, questioned my suggestions, and insisted on details I would have glossed over — the exact card width, the precise gap between elements, whether a date said 2012 or 2013. That’s not someone using AI as a shortcut. That’s a designer using AI the way a conductor uses an orchestra — every instrument plays, but only one person knows the music.”
Claude
Anthropic