Lovepreet Singh

What I build with

Tools, and why each one is here. Nothing on this page is a preference I cannot point at something for. The first two plates are this site: the rules it holds itself to, and what it runs on. You can check both against the page you are reading.

PL 02

What the lens is checking

  • Heading order

    h1 → h2 → h3

    One h1, then h2 and h3 in sequence, so a screen reader can move through the page by structure.

  • Contrast

    ≥ 4.5:1

    Body text at WCAG AA or better, in both light and dark themes. The lens shows the ratio against the actual background.

  • Target size

    ≥ 44 px

    Buttons and links you tap are at least 44 pixels in the direction that matters. Inline links are marked as inline.

  • Alt text

    alt=""

    Every image says what it shows, or is marked decorative on purpose.

  • Focus

    3 px ring

    A visible 3-pixel focus ring on everything you can reach with a keyboard. The lens follows keyboard focus too.

  • Motion

    reduce

    Nothing moves on its own when reduced motion is on, and nothing depends on moving to be understood.

Both client sites score 100 for Lighthouse accessibility and SEO, measured 2026-09-30. That was built in from the start, not fixed in an audit afterwards.

PL 03

This site

Everything below is checkable against the page you are reading. That is the point of listing it.

Next.js 16, App Router
Server Components by default; the homepage ships almost no interactive JavaScript of its own.
TypeScript, strict
Tailwind CSS v4
Design tokens as CSS custom properties, with no config file and no hardcoded colour outside them.
Keystatic
Git-backed content, flat YAML. Editing the site is a commit, not a database write.
Vercel
Static prerendering for every page a visitor sees.
Resend
Sends the contact form and nothing else. The API key cannot read delivery status.
Cloudflare Email Routing
Receives mail. Sending and receiving are separate systems, and treating them as one has caused an outage here before.
Vercel Analytics
Cookie-free, so the site needs no consent banner.
PL 04

For AI features

The set behind the agents on this site's work page.

LangGraph
Explicit nodes for context, routing, tools and the human gate, rather than one prompt doing all four.
LangChain
FastAPI
What the graphs are served from.
Langfuse
Tracing. A wrong answer should be something you open and read, not something you guess at.
Python
PL 05

For products and sites

React and Next.js
PostgreSQL and MySQL
Elasticsearch
Including kNN, which is how the compliance agent retrieves without a separate vector store.
Docker and AWS ECS
What the platform work ran on, migrated from EC2 with Copilot.
Figma