How this site was built

arshroop.dev is a working recreation of the original 2007 iPhone. Instead of a scrolling résumé, the site boots to a home screen, and each icon opens a real app: Notes, Contacts, Experience, Projects, a guestbook, an Instagram client, and a Spotify app wired to a live API.

The whole thing is a Next.js App Router project on React and TypeScript, deployed on Vercel.

Why an iPhone

The first iPhone is a good constraint. It had a small, fixed set of apps and a strict visual language — brushed metal, glossy icons, Marker Felt on a yellow legal pad — which forces every piece of content into a shape that already exists. A portfolio section becomes an app, and an app has to justify itself.

Getting the period details right mattered more than getting them convenient. The Notes app uses the era's brown leather header and ruled paper. The boot screen writes out "hello" in a connected script, because Apple's own SF Hello face is not licensable, so the closest openly licensed match stands in for it.

The part crawlers see

A recreation of a phone is a hostile interface for a search engine. Google does not tap icons, and neither does GPTBot, ClaudeBot, or PerplexityBot. Everything inside the phone would have been invisible.

So the site ships two versions of itself from the same source. Every app reads from a data file, and a server-rendered mirror renders those same files as plain HTML in the initial response. Crawlers get the full text of every project, role, note, and photo caption without executing a line of JavaScript. Because both versions come from one source, they cannot drift apart — and the site is not cloaking, since the hidden block is the accessible version of the same content a screen reader would read.

On top of that there is a robots.txt that explicitly welcomes AI crawlers, an llms.txt that hands language models a plain-markdown summary of the site, a sitemap that lists every photo so image search can index them, and structured data describing the person behind it.

Writing lives in markdown

Notes and essays are markdown files in a content/ directory. Adding one file produces a page, a sitemap entry, an RSS item, a section of llms.txt, a card in the Notes app, and a block of crawlable HTML — with no other edits.

That is the actual design goal of the site: the interface is a 2007 iPhone, but underneath it behaves like a document store that publishes itself.