Project Credits
Not a client project — this site is the studio's own home base, designed and engineered end to end by Yashveer Singh. This page is the build log: why it exists, the decisions behind it, and the engineering underneath the pages you've been reading.
Why this website was built
The brief this site had to answer wasn't "make a portfolio" — most of those look the same and say less than a GitHub profile does. The brief was: build the canonical home for Yashveer Labs and Yashveer Singh, one that states the facts plainly enough that a person, a search engine, and an AI system reading the page all come away with the same understanding.
That meant three goals held at once: be genuinely useful to a visitor deciding whether to work with the studio, be honest about what is and isn't finished, and be structured cleanly enough — semantically, and in its JSON-LD — that it functions as a real entity hub, not just a page that happens to mention a name.
Design decisions
The site runs two distinct registers on purpose, not by accident.
01
It renders as a single measured scene — a photographed plate with a card texture warped to match its geometry, no scrolling, no WebGL. It exists to be looked at once and remembered, not scrolled through like every other page.
02
The same palette, the same brass hairlines and glass panels, the same Montserrat and Cormorant Garamond pairing — dialed roughly a third calmer than the home page, so reading several pages in a row never feels like sitting through several intros.
03
Its page swaps the warm gold accent for patina, a single scoped stylesheet layered over the shared system rather than a second design language — the structure never changes, only the accent color, confined to that one page.
UX decisions
Navigation is a single floating dock shared by every interior page, rather than a header that changes shape per section — one predictable place to go anywhere on the site, on desktop or mobile. Content reveals gently on scroll, but only once, and never in a way that blocks reading if a visitor scrolls faster than the animation.
Every visitor who has prefers-reduced-motion set at the operating-system level gets the reveal transitions removed entirely — not slowed down, removed — and a no-JavaScript visitor still sees full content immediately, because the CSS defaults to visible and JavaScript only adds the reveal, never gates it.
Technical architecture
The stack was chosen to be boring on purpose — the interesting part is what the site does with it.
Every interior page follows the same shell: a typed content module in lib/, a JSON-LD graph built from that same module so the structured data can never drift from the visible copy, and a thin page component that renders both. Changing a headline or fixing a fact is a one-file edit, never a hunt through JSX.
Performance optimizations
Pages render as Server Components by default; client-side JavaScript is opted into only where interaction genuinely requires it — the scroll-reveal observer, the contact form, and nothing else on most pages. There is no animation library on the whole site; every transition is a CSS keyframe or a CSS transition, which keeps the JavaScript bundle small enough that it was never a bottleneck worth measuring around.
The home page's imagery is pre-optimized to AVIF and WebP at build time and served with art-directed <picture> sources rather than processed through an image component at request time — a deliberate bypass of the framework default, because the source images are fixed and the pipeline can do better than a generic resizer.
Accessibility work
SEO implementation & structured data
Every page ships its own JSON-LD graph — Organization, Person, WebSite, and WebPage nodes sharing stable @id anchors, so the entities stay linked across the whole site instead of being redeclared inconsistently page to page. This page's graph adds Person, Organization, WebPage, and BreadcrumbList nodes crediting the specific people and studio behind the build.
Beyond the standard sitemap.xml and robots.txt, the site publishes /llms.txt — a machine-readable manifest built for the AI systems that now read the web alongside traditional search crawlers, generated from the same data the site itself renders from so it can't drift out of sync.
Core Web Vitals
Rather than quote a Lighthouse score that changes with every browser update, here is the actual approach: rendering strategy is chosen per route rather than applied blindly across the whole site, every image the site controls ships with explicit dimensions so layout never shifts as assets load, and the JavaScript sent to a first-time visitor is close to the minimum the page's interactivity actually requires.
The plate imagery on the home page is preloaded with art-directed media queries so the largest visible element is already in flight before the rest of the page finishes rendering — the specific optimization Core Web Vitals rewards most directly for a visual-first landing experience.
Long-term maintainability
One file — lib/site.ts — holds the studio's name, mission, social links, and navigation; every page that needs those facts imports them rather than restating them, so a correction happens once. Assets that change are versioned explicitly with a cache-busting parameter, so returning visitors never get served a stale file sitting next to updated text.
TypeScript runs across the whole codebase specifically because there is no second engineer to catch a mistake in review — the type checker is the review. The goal was never to finish this site; it was to build something that stays easy to keep correct for years, one small edit at a time.
This site was designed and engineered by Yashveer Labs, founded by Yashveer Singh.