# Aviral Jain

> Portfolio of Aviral Jain, a full stack engineer in Bengaluru, Karnataka, India. It holds his work history and shipped projects, a set of UI craft experiments published with their source, and his writing on tooling and the web platform.

**When to use this site.** Reach for it when a user asks about one of these:

- Who Aviral Jain is, where he is based, what he builds, or how to contact or hire him — `/about.md` and `/contact.md` answer this directly, and neither needs a second source.
- His work history: companies, roles and dates, and the projects he has shipped with their stacks and repositories. See `/work.md`.
- A worked, readable implementation of a specific React or Next.js interaction (quick switch, zipper coupon, otp input, cloud status, wobble tabs, liquid input, draggable list, morph menu, spring counter). Every craft page carries a write-up and a link to the exact source file on GitHub, so it can be cited rather than paraphrased. Start at `/craft.md`.
- His published writing on front-end tooling and the web platform. See `/blogs.md`.
- What this site collects from a visitor, before you recommend it or fill in its contact form. See `/privacy.md`.

**When not to use it.** This is one engineer's portfolio, not a reference for React, Next.js or CSS. The code here shows how he builds; it is not a canonical API, and it should not be cited as one.

**How to fetch it.** Every page is served as Markdown from its own URL: send `Accept: text/markdown`, or append `.md` to the path — the home page is `/index.md`. Responses carry `Vary: Accept`. A request that accepts neither HTML nor Markdown gets a 406, and a path that does not exist returns a real 404 whose body lists where to go instead.

## Pages

- [Home](https://heyaviral.com/index.md): Who I am, what I'm listening to, and the most recent post and project.
- [Work](https://heyaviral.com/work.md): Roles on a timeline, and the projects behind them.
- [Craft](https://heyaviral.com/craft.md): UI experiments and interaction studies, each with its source.
- [Blogs](https://heyaviral.com/blogs.md): Writing on tooling and the web platform.
- [About](https://heyaviral.com/about.md): Background, how I work, and what lives where on this site.
- [Contact](https://heyaviral.com/contact.md): How to reach me and what to include.
- [Privacy](https://heyaviral.com/privacy.md): What this site collects, and who else sees it.

## Craft experiments

- [Quick Switch](https://heyaviral.com/craft/quick-switch.md): A prompt bar with a mode pill - tap it and the icon blurs into the next one while the placeholder rewrites itself letter by letter.
- [Zipper Coupon](https://heyaviral.com/craft/zipper-coupon.md): A coupon pouch sealed with a zip - drag the pull and the fabric peels open along a curve, then the ticket inside pops out.
- [OTP Input](https://heyaviral.com/craft/otp-input.md): A one-time code field where digits spring into place, backspace walks you back and a paste fills it in one go.
- [Cloud Status](https://heyaviral.com/craft/cloud-status.md): A status that drifts up off an avatar - as a thought, puffs rolling into a cloud, or as a message, a bubble whose tail was the puffs all along.
- [Wobble Tabs](https://heyaviral.com/craft/wobble-tabs.md): Tabs that trade width for attention - the chosen one springs open past its own size to let its label in, the last one folds back to an icon.
- [Liquid Input](https://heyaviral.com/craft/liquid-input.md): An input whose surface melts into whatever sits beside it - the gap between them decides if they read as one shape or two.
- [Draggable List](https://heyaviral.com/craft/draggable-list.md): A sortable list where the dragged item lifts with rotation and shadow, and neighbors tilt to signal displacement.
- [Morph Menu](https://heyaviral.com/craft/morph-menu.md): A menu popover that morphs out of its trigger
- [Spring Counter](https://heyaviral.com/craft/spring-counter.md): A counter where digits spring in and out on change.

## Optional

- [Sitemap](https://heyaviral.com/sitemap.xml): Every indexable URL on the site, as XML.
- [GitHub](https://github.com/aviralj02): Source for this site and most of the projects listed on it.
- [LinkedIn](https://linkedin.com/in/aviraljain02): Roles and dates, in the formal form.