Back to portfolio
Animation / Motion Graphics / Studio ArtMarketing Website4 weeks

L Vega Animations

A portfolio site built with Next.js, Sanity v3, Tailwind CSS, Framer Motion, and Vercel, for an animation and motion graphics artist targeting studio and agency job applications.

L Vega Animations

Case Study

The brief was clear from the start: gallery-first, editorial, nothing competing with the work. Most of the interesting decisions happened at the component level. The HeroRotator had a layout shift problem on mobile that took real iteration to solve. The gallery curation happened through Sanity MCP tooling, which surfaced constraints I hadn't planned for. And a few infrastructure problems during deployment took longer to diagnose than they should have, mostly because the error messages weren't specific about what was actually wrong.

Technical Narrative

The stack made sense for this project from day one. Next.js handles static generation cleanly for content that doesn't change constantly, and Sanity v3 was the right CMS call because the client would eventually need to manage her own portfolio without developer involvement. Tailwind and Framer Motion gave me enough control to build motion that stayed within the design system rather than asserting itself.

The most iteration went into the HeroRotator. The first version worked fine on desktop. On mobile it had cumulative layout shift during slide transitions because the container height wasn't constrained per breakpoint. The fix was a fixed-height container approach that let the crossfade, progress indicator, and manual nav controls layer on top without affecting page flow. It's the kind of thing that's invisible when it works and immediately obvious to a recruiter scrolling on their phone when it doesn't.

The hover-preview category bands on the homepage weren't in the original brief, which called for large visual category cards. The hover approach ended up being the better call because it lets visitors get a sense of each portfolio sections without navigating away. That required thought about which images to use as previews and how to time the transition so the interaction felt considered rather than gratuitous.

Gallery curation happened through Sanity MCP tooling instead of manually in Studio. That let me batch-review and reorganize across 40+ pieces programmatically, which was the right call for that volume of content. What I didn't account for: create_documents_from_json is the only reliable MCP write operation when the schema hasn't been deployed to Sanity Cloud. patch_document_from_json fails in that state without useful error output, so I spent longer than I should have figuring out why patches weren't going through. Three pieces with circular document references couldn't be unpublished via MCP at all and needed manual Studio intervention.

On the infrastructure side, the client's domain registrar had a redirect configuration that interfered with Vercel's domain validation process. The error from Vercel wasn't specific about the cause. The fix was removing the redirect in IONOS and letting Vercel handle routing at the edge. CORS configuration for the preview deployment URL also needed a separate pass.

Two things I'd do differently from day one: deploy the Sanity schema to Sanity Cloud in the first week, not at the end, because deferring it blocked a meaningful portion of the MCP write tooling longer than necessary. And I'd build the category system as CMS-managed document types from the start rather than hardcoded values. I drafted a full migration plan partway through the build, but the sequencing risk at that stage made it not worth the disruption. It's not a problem now, but it's work that exists because I didn't front-load a decision.

Technical Narrative

Challenges

Mobile layout shift in HeroRotator No constrained height on mobile caused the page to reflow as slides loaded. Fixed by establishing a fixed-height container per breakpoint that let the crossfade transitions and controls layer on top without affecting the surrounding layout.

Sanity MCP patches silently failing patch_document_from_json fails without surfacing a useful error when the Sanity schema hasn't been deployed to Sanity Cloud. Took longer than it should have to identify the constraint. Reframing the content workflow around create_documents_from_json as the only reliable write path made the rest of the build workable.

Domain validation interference from IONOS An existing redirect in IONOS conflicted with Vercel's domain validation. Vercel's error didn't identify the cause. Removing the IONOS redirect and letting Vercel handle routing at the edge resolved it.

Circular references blocking MCP unpublish Three gallery pieces had mutual document references that prevented MCP-based unpublishing. No mechanism in MCP tooling for breaking reference cycles, so those required direct Studio intervention.

Screenshots