My portfolio looked fine to me and broken to everyone else. Rebuilding tirup.in taught me that a portfolio isn't a gallery. It's a 30-second job interview conducted by a stranger holding a phone on a bus. Three mistakes, three fixes, and the signaling logic behind every choice.
The first version of my portfolio had everything a developer portfolio is supposed to have: dark mode, project cards, smooth animations. And three problems I was blind to until I tested it like a visitor instead of admiring it like its author. But before the fixes, the reframe that changed how I think about portfolios entirely:
Nobody browses your portfolio. They interview it.
Here's the uncomfortable truth: visitors don't explore. A recruiter, a potential client, a curious engineer gives you roughly 30 seconds on a phone, usually distracted. They're not reading. They're scanning for signals: does this person ship? do they sweat details? can they explain anything? Every element must answer in seconds. A clever animation that takes ten seconds to understand is not a feature; it's a failed interview answer. A wall of skills with no proof is not comprehensiveness; it's noise. Once I saw the portfolio as an interview, not a gallery, every decision got easier, mostly by deletion.
That includes the tech choices. My stack is boring on purpose: Next.js, Tailwind, zero exotic dependencies. Boring means it still builds in a year, loads fast on the bus-phone, and never breaks because some animation library's maintainer lost interest. Choose boring technology for your showcase. The portfolio demonstrates judgment, and nothing demonstrates judgment like restraint. Every project in the work archive ships under the same philosophy.
Mistake one: the snapping text
Font sizes set at specific screen widths: small on phones, big on desktops. Between those widths nothing adapted, and at each breakpoint the page visibly jumped. A friend's tablet watched my headings lurch. The fix is one line per size: declare a smooth glide instead of steps, and the browser interpolates every width between:
:root {
/* Grows smoothly from 16px on phones to 20px on desktops. No jumps. */
--font-body: clamp(1rem, 0.917rem + 0.44vw, 1.25rem);
--font-h1: clamp(1.75rem, 1.337rem + 2.21vw, 3rem);
}
Mistake two: the crooked cards
Project cards side by side, buttons landing at random heights because descriptions varied in length. Sloppy. And invisible to me until someone pointed. The fix, subgrid: cards share one alignment grid instead of laying out alone, so every button lands on the same invisible line regardless of text above it. Details like this are exactly what the 30-second scanner unconsciously scores.
Mistake three: the wrong-color flash
Every first visit blinked the wrong theme before correcting. My theme script ran after first paint. The fix was deleting the script: both themes as pure CSS, the browser's own day/night preference picking correctly on the first paint, zero code running. The fastest script is the one you delete. And a portfolio that flashes wrong colors is failing its own interview in the first half-second.
The maintenance test
One more filter I now apply to every portfolio decision: will this still work in two years with zero attention? Fancy wins short-term admiration and charges long-term maintenance: dead demo links, rotted dependencies, animations that break on browser updates. A portfolio that slowly decays signals the opposite of craft. Boring, budgeted, and checklist-gated (Lighthouse per deploy, 40KB JS budget, four-width screenshot sweep, keyboard pass) is how the page stays employable while I sleep.
This blog runs on the same system. If text glides, nothing flashes, nothing jumps. That’s the checklist working, and that's the whole pitch: I build things that behave.
- Your portfolio is a 30-second interview on a bus-phone. Design for the scanner, not the admirer.
- Boring technology is a feature. Restraint is the signal.
- Smooth scaling, shared grids, deleted scripts. Then a checklist that keeps it all true for years.