Portfolio System
The portfolio is the proof. One system from brand to front-end to performance, designed, written, and shipped solo, then measured on itself instead of described.
Self-initiated. This is the site you are reading, designed, written, and built by Pratik Mehta. No client, no team, no template.
Problem
Most portfolios describe the work. This one had to be it. A gallery of screenshots proves taste at best. It says nothing about whether the person can build a system, hold it together, and ship something that holds up under measurement. So the site itself is the artifact: the case study lives inside the thing it is describing.
The brief, set for myself, was narrow on purpose. Build the whole thing as one system, brand through front-end through performance. Ship it on real infrastructure. Then let it be measured, not asserted, so every claim on this page can be checked by the person reading it.
System
One system, brand to tokens to build. A single design system feeds everything: a token layer, an eight-tier type scale, one variable typeface per family so every weight the scale names is real. Structure and copy are typed content that fails the build when a field is missing or the wrong shape, so the site cannot ship half-built.
It runs same-origin on Cloudflare Workers. Fonts, media, and code are self-hosted, no CDN, so there is no second-origin handshake and nothing to leak. The only third party is analytics, and it sits behind a consent gate. The pages are built to be read by machines too, with a structured-data graph and semantic markup for search and answer engines.
Design system
Tokens, eight type tiers, one variable face per family.
→Content as data
A typed schema that fails the build on a missing field.
→Same-origin build
Self-hosted on Cloudflare Workers, no CDN.
→Built to be read
Structured data and semantic HTML for search and answer engines.
Decisions
A few choices kept the whole system honest and fast. Each one trades a convenience for a constraint the rest of the site can lean on, and none of them show on their own. That is the point: the discipline is in the build, not on the surface.
Built, not briefed
The site is a working prototype, shipped and measured, not a deck describing one.
Same-origin, no CDN
Self-host the fonts, media, and code. The only third party is consent-gated analytics.
One variable face per family
Every weight the type scale names is a real weight, so nothing fails silently to a faux bold.
Performance as a design constraint
An LCP-safe hero, transform-only reveals, and zero layout shift on every page, checked on each change.
Output
Desktop / one system, both themes
Mobile / the same system, responsive
Captured from the live site, both themes, desktop and mobile. The whole thing runs same-origin on Cloudflare Workers.
Proof
Measured on the live build, not projected, mobile and desktop. The table below carries the page count, the Lighthouse version, and the date it was run. Self-initiated: designed, written, and built solo since March 2026, in a public repo.
| Page / mobile | Perf | A11y | Best Pr. | SEO | LCP | CLS | Weight |
|---|---|---|---|---|---|---|---|
| Home | 99 | 100 | 100 | 100 | 2.3s | 0.00 | 1.4 MB |
| About | 99 | 100 | 100 | 100 | 2.0s | 0.00 | 229 KB |
| Brand | 99 | 100 | 100 | 100 | 1.8s | 0.00 | 190 KB |
| Contact | 100 | 100 | 100 | 100 | 1.7s | 0.00 | 183 KB |
| Journal | 100 | 100 | 100 | 100 | 1.7s | 0.00 | 183 KB |
| Privacy | 100 | 100 | 100 | 100 | 1.7s | 0.00 | 183 KB |
| Resume | 99 | 100 | 100 | 100 | 2.0s | 0.00 | 187 KB |
| Work index | 99 | 100 | 100 | 100 | 2.1s | 0.00 | 206 KB |
| Journal: engineer to creative | 100 | 100 | 100 | 100 | 1.7s | 0.00 | 185 KB |
| Journal: the handoff | 99 | 100 | 100 | 100 | 2.0s | 0.00 | 186 KB |
| Journal: AI + creative | 99 | 100 | 100 | 100 | 2.0s | 0.00 | 188 KB |
| Case: Agency FiveEighty | 96 | 100 | 100 | 100 | 2.7s | 0.00 | 219 KB |
| Case: DealNews | 99 | 100 | 100 | 100 | 2.1s | 0.00 | 212 KB |
| Case: Forest Road | 99 | 100 | 100 | 100 | 2.0s | 0.00 | 198 KB |
| Case: JMTP | 99 | 100 | 100 | 100 | 2.3s | 0.00 | 252 KB |
| Case: Level | 99 | 100 | 100 | 100 | 2.0s | 0.00 | 190 KB |
| Case: Pipeline Medical | 99 | 100 | 100 | 100 | 2.1s | 0.00 | 226 KB |
| Case: RAA | 95 | 100 | 100 | 100 | 2.9s | 0.00 | 243 KB |
| Case: SPORTIME | 99 | 100 | 100 | 100 | 2.1s | 0.00 | 231 KB |
| Case: SR Love & Care | 99 | 100 | 100 | 100 | 2.0s | 0.00 | 193 KB |
| Case: The Ninth | 97 | 100 | 100 | 100 | 2.6s | 0.00 | 194 KB |
| Case: WISP | 99 | 100 | 100 | 100 | 2.0s | 0.00 | 190 KB |
| Case: Portfolio System | 99 | 100 | 100 | 100 | 2.0s | 0.00 | 194 KB |
| Average | 98.8 | 100 | 100 | 100 | 2.1s | 0.00 | 254 KB |
Reflection
Portfolio System is the end-to-end proof. It shows the whole arc in one artifact, brand system, front-end, motion, content, and the infrastructure under it, built and held by one person and then measured instead of claimed. The portfolio is not a description of how I work. It is the work, running, and you can read the numbers yourself.