Skip to content
★ Bonus Case Study

Portfolio as a Product

I built this portfolio to test how I make decisions under constraints.
I'm not a frontend developer. I didn't use a template.
I treated this like a product.

// PROOF OF PROCESS [SELF-DIRECTED]
TEMPLATE
NONE USED
ITERATIONS
2 (AND COUNTING)
SHIPPED
TO PROD ✓
CASE STUDIES
5 / 5
Role
Product Designer
self-directed
Scope
Design · Interaction · Frontend · Deployment
Tools
HTML · CSS · Vercel · Antigravity AI
Constraint
Not a frontend developer

This is not a visual project. It's a decision-making project.

Key Decisions

Four decisions that shaped what you're looking at.

01
No templates. No frameworks. Raw HTML and CSS.

Full control over structure, interaction, and content. Simple enough to maintain. Fast to load. Nothing I didn't understand and couldn't debug myself.

Effect: Every interaction on this site — the cursor trail, the coin burst, the scroll fade-ins, the theme toggle — is code I can read, explain, and change. No dependency debt. No black box.

02
The 8-bit aesthetic is the thesis, not decoration

The pixel motif, cursor trail, coin burst when you hit the bottom, the 8-bit resume — one system with one intent. Something you move through, not scroll past.

Effect: Recruiters who get to the bottom of the page hit the coin burst. It's a designed moment, not a footer. The aesthetic signals precision and deliberateness — the same values that show up in the work.

03
Use AI as a collaborator, not a replacement

Two AI coding agents extended what I could ship. I directed, caught mistakes, validated results. The AI executed. The decisions were mine. The velocity was collaborative.

Effect: Shipped a portfolio with custom interactions, a full case study system, an 8-bit interactive resume, and a bonus meta case study — in a timeframe that wouldn't have been possible building solo.

04
Write a machine-readable contract when AI keeps breaking your rules

When the AI repeatedly stretched images to full width against explicit instructions, I wrote DESIGN.md — a constraint document checked into the repo.

Effect: The AI followed it from that point forward. The document became the source of truth for visual rules — a design system for the build process itself.

Portfolio case study setup — building the structure in code

// Building the structure in code — no templates

AI-Assisted Build

4 hours. Real bugs. Most got solved.

Every screenshot Claude added mid-session was AI-generated fiction — NEXUS CORE dashboards, AETHER SYSTEMS mockups, QuantumFlow neon diagrams. None of it was real work. I caught it, removed all 12 fakes, and replaced them with 20+ real screenshots from my actual projects. Then wrote DESIGN.md so it wouldn't happen again.

AI-generated fake images discovered mid-session

// The AI-generated fakes. None of it was real work.

Portfolio design iterations — versions before the final

// Design iterations before landing on the final direction

"I caught what was wrong. The AI fixed it. That division held for the whole session."
⚔ Recon Mission — 6-Agent Eval

Sent a squad in. They found bugs I had walked past for weeks.

Six agents ran in parallel — accessibility, performance, content, code, interaction, security. I compiled the report and triaged myself.

🔴 BUG
Cursor trail leaked. rAF loop ran forever on idle. Fixed: 2s timeout + cancelAnimationFrame.
🔴 BUG
Dot nav built with divs. Not keyboard reachable. Rebuilt as buttons with aria-label + aria-pressed.
🔴 BUG
Company product name in card titles. Removed. Card 02 title wrong too. Corrected.
🔴 BUG
Vercel CSP blocked its own analytics. Silently failing in prod. Updated vercel.json to whitelist both endpoints.
"Same eyes stop seeing the same page. Six agents saw it fresh."
🌐 Side Quest — Domain + Email

tinasingh.app + $0/month email.

The domain took 10 minutes. The .app TLD enforces HTTPS by spec — security shipped free. The email took longer: Zoho hit a regional paywall not documented anywhere in their UI. Switched to Cloudflare routing, migrated DNS mid-project, configured MX, SPF, and DKIM in one pass. Routes into Gmail. No second mailbox, no monthly fee.

Outcome

What changed.

Before
Template-constrained or engineer-dependent. No clear ownership of the final output.
After
Fully owned, customizable portfolio. A structure that reflects how I think, not just what I've made.
Before
Waiting for the right tool, the right time, the right skill level.
After
A working example of bridging design and implementation. Something I can iterate on.
// Detailed Case Study

Detailed case study available for recruiter conversations — every decision, constraint, and trade-off documented.

Get in Touch →