Web AppFrontendPerformance

This Portfolio

A portfolio engineered as its own strongest case study.

Next.js 15
React 19
TypeScript
Tailwind CSS
MDX

Role: Design, Engineering, Content: end to end
Year: 2026
Focus: Web App, Frontend, Performance

Fully verifiable. This is the site you're reading.

What it delivers

95+ / 100 / 100 / 100Lighthouse targetPerformance, accessibility, best practices, SEO. Verify live via PageSpeed Insights.

Measured liveCore Web VitalsSee the readout under the hero: real field data from your device.

Minimal by designClient JS (content pages)Server Components first, and no animation library in the bundle.

The problem

A developer portfolio has to do the impossible: look considered, load instantly, rank on Google and AI search, and prove real engineering, all at once. Most portfolios pick one and fabricate the rest.

Decisions and trade-offs

Designed a three-layer design-token system (primitive, then semantic, then component) so the entire palette and type scale are swappable from one file, with light and dark contrast checked against the thresholds rather than eyeballed.
Built on the Next.js App Router with React Server Components. Content ships as HTML, keeping client JavaScript minimal and search and AI crawlers happy.
Kept motion in CSS, gated behind a pre-paint check for prefers-reduced-motion, and driven by one shared IntersectionObserver. No animation library reaches the browser.
Wrote full JSON-LD structured data, a machine-readable llms.txt, and answer-first copy so AI engines can describe me accurately.

How it fits together

Visitor or AI crawler
Browser, search bot or LLM fetcher
Vercel edge CDN
Cached, globally distributed HTML
Next.js App Router
Server Components render HTML; minimal client JS
Content layer
Typed TypeScript data, MDX and design tokens in git
Progressive enhancement
Scroll reveals and live Web Vitals, after paint

Content ships as HTML; interactivity is layered on top.

Details that matter

Live self-measurement

The page shows your real LCP, INP and CLS via the web-vitals API. The performance claim proves itself.

No animation library

Every reveal and transition is CSS behind one IntersectionObserver, so nothing animated sits in the critical path.

Design system, not a template

Every color, space, and type step is a token. No magic numbers.

The token system, made visible

Drag the handle. The same content before and after the design tokens: a live demo of the component, not a screenshot.

Devang Patel

Full-Stack Web Developer

View work

Devang Patel

Full-Stack Web Developer

View work

UnstyledDesigned

Illustrative comparison rendered live in the browser.

Next case studyAgency OS: Multi-Tenant SaaS

Want results like this?

Tell me about your project and I'll reply myself.

Contact devangtopper2004@gmail.com

Open to full-time roles & freelance projects