System.Return('/work')
Next.js Frontend UI/UX

Spilled Palette Studio

Built a high-performance, aesthetic-first Next.js portfolio for digital artist Aswathi Bindhu Jawahar, featuring dynamic masonry layouts, Cloudinary image optimization, and smooth Framer Motion interactions.

Spilled Palette Studio
Date 2026
Status Completed & Operational
Initiate Live Application Source Code

Overview

Spilled Palette Homepage

Spilled Palette Studio is a premium digital art portfolio crafted for artist Aswathi Bindhu Jawahar. The project required designing an immersive digital gallery that feels like a quiet luxury physical space—where the art is the absolute hero, and the technology powering it is completely invisible to the user.

As a Senior Systems Engineer transitioning into modern frontend architecture, I utilized Next.js 14, Tailwind CSS, and Framer Motion to deliver a lightning-fast, highly aesthetic web experience.

The Challenge

Digital art galleries face a unique set of technical contradictions:

  1. High Visual Fidelity vs. Performance: The artwork files are massive, but the website must load instantly.
  2. Dynamic Filtering vs. SEO: Users need to filter artwork by category (Botanical, Sanctuary Series) seamlessly, without sacrificing search engine discoverability.
  3. Immersive UX vs. Clean Design: Interactions should feel alive but must not distract from the subtle, minimalist aesthetic of the artwork itself.

Architecture & Execution

Spilled Palette Studio — Frontend Architecture

Architecture: Visitor → Vercel Edge → Next.js 14 App Router → Tailwind CSS + Framer Motion → Cloudinary CDN

1. Image Engineering with Cloudinary

Serving raw, high-resolution artwork files directly would cripple performance. I implemented Cloudinary for dynamic image manipulation on the edge.

  • Original high-res .tiff and .png files are automatically converted to WebP and AVIF formats based on client browser capabilities.
  • Intelligent cropping and responsive image srcsets ensure mobile users aren’t downloading 4K images.

2. “Quiet Luxury” UI with Tailwind CSS

The design language is intentionally subdued. Using Tailwind CSS, I crafted a custom theme utilizing off-whites (#FDFBF7), soft charcoals (#2C2C2C), and elegant typography pairings (Playfair Display for headings, Inter for body text).

Aesthetic About Page demonstrating the clean typography and soft color palette

Clean, sophisticated layout using Tailwind CSS

3. Fluid Experiences with Framer Motion

A static gallery feels empty. I integrated Framer Motion to drive the dynamic masonry grid layouts and smooth page transitions. Category filtering executes instantly on the client side, with artwork elegantly cross-fading in and out of the viewport.

Dynamic Category Filtering

Real-time artwork filtering with smooth layout animations

Key Results

  • Performance: Achieved 95+ Lighthouse scores across Desktop and Mobile due to aggressive caching and Next.js Image Optimization.
  • Client Ownership: The project includes a customized JSON data structure (artworks-list.json), allowing the artist to easily append new collections without touching complex routing logic.
  • Conversion Optimization: Implemented straightforward, elegant “Inquire” channels that seamlessly link potential buyers to the artist.

Technical Stack

  • Framework: Next.js 14 (App Router)
  • Styling: Tailwind CSS
  • Animations: Framer Motion
  • Media Delivery: Cloudinary
  • Deployment: Vercel (CI/CD Pipeline)

“You don’t just build systems; you build experiences. Spilled Palette Studio bridges my backend expertise with pixel-perfect frontend execution.”