Personal site of Sagar Shah — full stack AI engineer in Ahmedabad, India.
Live: sagarshah.dev
| Lighthouse (desktop) | 99 performance · 100 accessibility · 100 SEO |
| Lighthouse (mobile) | 86 performance · 100 accessibility · 100 SEO |
| Layout shift (CLS) | 0 |
| Client-side JavaScript | 3 small components in the whole site |
| Dependencies beyond React/Next | 6 |
| License | MIT |
-
All styling lives in one file. Every colour, font size, radius and shadow is defined in
src/design/tokens.ts. If a style is written anywhere else, the build fails. Restyling the entire site means editing that one file — and a commit in the git history proves it: fonts, weights and surfaces were swapped without touching a single section file. -
Almost no JavaScript in the browser. The mobile menu, the FAQ accordion and the navigation highlighting all use built-in browser features instead of React code. Only three client components exist: the mobile nav, a copy button, and the error screen.
-
The build checks the copy. A link to a section that doesn't exist fails the build. The day "over a decade of experience" stops being true, the build fails and says so — the words on the page can't quietly go stale.
-
Accessibility is measured, not assumed. Colour-contrast numbers are recorded next to the colours they justify, and combinations that fail the standard are blocked — some of them by the type checker itself.
-
Minimal on purpose. No UI library, no animation library, no state library. Decisions that were tried and rejected are written down in the code as comments, with the numbers that justified them.
Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Lucide icons
src/
├── content/ all the words on the page, in typed files
├── design/ tokens.ts — every style decision in the project
├── components/ building blocks → cards → page sections → the 3 client components
├── lib/ small helpers
└── app/ the page itself, plus icons, sitemap and social-preview image
To change what the site says, edit src/content/. To change how it looks, edit
src/design/tokens.ts. The two never mix.
git clone https://github.com/shahsagarm/sagarshah.dev.git
cd sagarshah.dev
npm install
npm run devRequires Node 22.18 or newer. One optional environment variable:
GOOGLE_ANALYTICS_ID (analytics only load when it is set).
| Script | What it does |
|---|---|
npm run dev |
Development server |
npm run build |
Production build |
npm run verify |
Every check plus the build — the single gate before shipping |
MIT-licensed, so fork away. The build catches most mistakes for you:
- Content — edit the files in
src/content/. Dead links and stale dates fail the build on their own. - Images — replace the files in
src/assets/; the CV PDF lives inpublic/. - Restyle — change
src/design/tokens.tsand the three font lines insrc/app/globals.css. Nothing else to hunt down. - Verify —
npm run verify. If it passes, ship it.
DESIGN.md is the full design spec. AGENTS.md briefs AI coding
agents on the house rules.
- v2 (this branch) — live at sagarshah.dev
- v1 — preserved on the
v1branch and live at v1.sagarshah.dev
Code is MIT. The content is personal — copy, images, CV, client logos and testimonials describe a real person and real work; please replace them with your own.