AJ
Back to Builds
WebComplete

Ajay Kanzariya

Personal portfolio for a MERN/Node.js backend-leaning Software Engineer. Fully static and hard-coded from his resume PDF, with a 5-theme switcher (Terminal, Midnight, Paper, Neo-Brutal, Solar) and a Cmd+K command palette, built to a full written spec with a 9-sprint history.

Next.js 15Tailwind CSS v4TypeScriptPlaywright

Overview

A hard-coded, multi-page portfolio for Ajay Kanzariya, a Software Engineer with a MERN/Node.js backend-leaning full-stack background. Unlike the other builds in this batch, this one shipped against a full written specification: a 9-sprint plan with acceptance criteria and test tables for every sprint, non-negotiable constraints (no contact form, no database, no CMS), and a rule that every piece of content had to trace back verbatim to his resume PDF, with a documented list of what was deliberately left off because it wasn't in the source resume.

Why it was built

Client project: a personal portfolio for a MERN-stack software engineer, scoped and specced in full before any code was written, an unusually rigorous approach for a single-person portfolio, chosen specifically because the site's differentiator (a 5-theme switcher that changes color, typography, radius, and shadow per theme) needed disciplined CSS-variable architecture to avoid becoming five half-finished skins.

5 Distinct Themes, Not Just Light/Dark

Terminal (green-on-black, JetBrains Mono, scanline texture), Midnight (default, deep violet glow), Paper (warm editorial serif), Neo-Brutal (3px black borders, hard offset shadows, zero radius), and Solar (warm amber, ember gradients) each define their own font, radius, shadow, and border-width tokens, applied via a blocking inline script so there's no flash of the wrong theme on load.

Cmd+K Command Palette

A command palette lets a visitor jump to any page, switch themes, or fire a contact action without touching the mouse, a developer-portfolio detail meant to feel like a tool rather than a brochure.

Floating WhatsApp, No Contact Form

Contact is deliberately direct-action only: mailto:, tel:, wa.me, and LinkedIn links, with a persistent floating WhatsApp button on every page. A hard constraint in the spec bans any form, input, or database entirely.

Tech Breakdown

Next.js 15 App Router

Every page statically generated at build time; the only client components are the theme switcher, mobile nav, command palette, and WhatsApp button, everything else ships as static HTML.

CSS custom properties per theme

Every colour, radius, shadow, border, and font is a token on the root element, swapped via a data attribute, so switching themes swaps variables only with zero re-render or layout shift.

Zero runtime dependencies beyond React/Next

No database, no CMS, no API routes. All resume content lives in one typed data file that the spec requires every page to source from, with zero string literals of resume content anywhere else.

Playwright

Smoke-tests routes, all 5 themes, and every contact link, added specifically because a site whose entire differentiator is a working theme system needs regression coverage on that system.

Challenges
  • 1

    Getting five genuinely distinct visual identities (not just recolours) to share one component tree meant every token, including font family, radius, and shadow, had to be theme-scoped from the start, not retrofitted after the first theme was built.

  • 2

    The written spec's constraint that content match the resume PDF verbatim meant every bullet had to be diffed word-for-word against the source PDF rather than lightly rewritten for web tone, a stricter bar than a typical content pass.

What's Next

The spec's own roadmap flags the resume-download button as something to reconsider if privacy becomes a concern, since it exposes his phone and email in one more machine-scrapeable place.

See it live

Check out the deployed site.