Most artist websites fall into one of two traps. They are either generic templates that make every painter look identical, or they are overbuilt agency productions that bury the art beneath animation and branding. The goal for this project was different: build a portfolio for a real watercolor artist that treats her paintings as the center of the experience and makes the work feel tactile on a screen.
The site is for Marita, my mother, who paints watercolors and wanted a place to show and potentially sell her work. It is a personal project with real purpose.
Public repository: github.com/1Pio/watercolor
Real Art at the Center
The design direction started from the art itself. The homepage uses a warm paper-styled surface with physical art objects, a large pinned artwork print as the hero, and clear portfolio and inquiry calls to action. The hero cycles through the four most recent artworks at a fixed 4/5 aspect ratio, prewarmed for fast loading, with a calm seven-second interval and motion anchored at the golden pin that holds the artwork to the page.
The asset pipeline was built to respect the art. Raw Instagram archives stay untracked and unserved. Curated source assets are separated from generated optimized assets. The build regenerates optimized images before TypeScript and Vite compile, so the deployed site always serves compressed, correctly sized media. OptimizedImage handles priority loading for first-view and LCP images. DeferredVideo handles local process clips without blocking initial render.
The Room-preview System
The most product-meaningful feature is a buyer-facing tool called Find Your Piece. Instead of asking visitors to imagine how a painting might look on their wall, the site shows them. An artwork chooser lets you pick a piece, select a size, choose a frame finish, toggle gold-detail states, and see the result in a room mockup or placement context beside an inquiry call to action.
The design decision that makes this maintainable is that artwork-specific preview behavior lives in data records rather than disappearing inside JSX. The same feature handles both synthetic room overlays and real placement photos, so adding a new artwork means updating a data entry, not rewriting component logic.
Architecture and Deployment
The site is a static React app with TanStack Router handling routes for home, portfolio, individual works, process, commissions, exhibitions, about, journal, and contact. Contact is a mailto-based inquiry flow with no database, CMS, authentication, or payment backend. Tailwind CSS provides the styling layer with shadcn-style primitives and Radix components for dialog and slot patterns.
Netlify handles deployment with a configured build command, dist publishing, SPA fallback, and cache headers for optimized assets. The deployment contract is explicit and reproducible.
A later experimental pass implemented route transitions and framed-artwork shared transitions using the View Transitions API, verified in Chromium and intentionally left uncommitted pending review. The discipline was: implement, verify in browser, show for approval, commit only after acceptance. Visual work needs eyeballs before it gets a commit hash.
What I Take from it
This project taught me that the best art portfolio is the one that gets out of the way of the art. The interesting engineering, from the image pipeline to the room-preview data model to the hero motion calibration, exists to make paintings feel present and buyable online. That restraint is the design.
