Skip to content
All work

Personal|Jul 2026 – Present

Personal Portfolio

gyanendra.in

Personal Portfolio

Next.js 16 · React 19 · Tailwind CSS v4 · Motion

Client
Through
Independent
Role
Sole Developer, Designer & Content Author

Problem

A résumé PDF and a one-page portfolio prove nothing about how someone builds software. Anyone can list React and .NET. I wanted the portfolio itself to be the strongest engineering sample: real APIs, real data, real tools, and this case study included.

Role

Everything. Architecture, design system, motion, content, the backend glue, and every word on the site. Built solo on Next.js 16 and React 19, in the open, since July 2026.

Constraints

  • No third-party form service and no analytics script: the contact pipeline and visitor tracking are self-built and documented on the privacy page.
  • Static output wherever possible, so the site stays fast on a phone in Gurugram on a bad connection.
  • Forty-one tools had to keep working through a ground-up redesign.
  • Animation everywhere, but never in the way of reading: every effect collapses under reduced motion.

Architecture

The App Router owns routing and layouts. Content is data first: project, experience, tool and post records live in src/data and flow through small helpers into presentation components. Server route handlers call Groq for résumé tailoring, a server action sends contact mail through Resend, and the blog reads from a Google Sheet with the in-repo posts as a fallback.

Next.js 16 App RouterUI, routing & layoutsData-first content layersrc/data/*.js → src/lib/* helpersServer route handlersAI resume tailoring & text-enhanceExternal servicesGroq · Google Apps Script · GitHubGroq LLM APIGoogle Apps Script (Sheets + email)GitHub contributions APIIP geolocationVercel

Key decisions

  • GSAP for all motion, through one primitive layer. SplitReveal, ScrambleText, Magnetic, ClipReveal, Counter, Marquee, DrawSVG, TiltCard and the cursor are built once and reused, each with a reduced-motion branch.
  • Tokens before components. Both themes are CSS custom properties; no component carries a hex value, so dark mode is designed rather than inverted.
  • Real tools, not screenshots. The tools hub is forty-one working utilities with typo-tolerant search, because a fake dashboard would undercut the whole premise.
  • The case-study framework applied to itself. Problem, role, constraints, architecture, decisions and results, for every project, including this one.

Results

Ten-plus routes, a forty-one tool hub, a blog with twenty-five published posts, and a motion system measured against a Lighthouse budget rather than a feeling.

41
working tools
25+
published posts
10+
routes

Stack

  • Next.js 16
  • React 19
  • Tailwind CSS v4
  • Motion
  • Radix UI
  • Groq LLM API
  • @react-pdf/renderer
  • Google Apps Script
  • Vercel

Next project

Catalis Tax

Read the case study

Catalis
Catalis Tax parcel record, redrawn: account header, current balance and invoices