Fine Artist

Back

The
Challenge

The client is a fine artist who sells original paintings and prints and paints live at weddings. She needed one site to show her portfolio, sell her work and take wedding bookings. Each artwork carries detail that buyers filter on: material, size, frame, surface, subject, collection, series and sale status. She needed to add new work herself without a developer, and the pages had to stay on brand when she did. The site needed a design that let the paintings lead, with a look that felt like the artist's own work and not a template. That design then had to survive real use: every block had to stay on brand whatever content the artist put in it. The site also had to stay fast, accessible and easy for search engines to read.

The
Solution

I built a custom Full Site Editing theme from scratch, with 13 custom Gutenberg blocks and Tailwind CSS v4. The blocks share one set of editor controls for buttons, colours, overlays, forms and section headers, so each block behaves the same way in the editor. I modelled the content as four post types (Portfolio, Weddings, Prints and Testimonials) and eight taxonomies, and the gallery and carousel blocks can pull from more than one post type at a time. Paintings with a Sold status show a Sold badge on every card and on the artwork page. For weddings, I connected an availability calendar to a Contact Form 7 request form: a click on a free day fills in the date field. The motion uses GSAP scroll reveals and Swiper carousels, with pause controls and full support for reduced motion. I added schema.org data for the artist and each artwork, and a GitHub Actions workflow builds the theme and deploys it to Bluehost on every push.

The
Result

The client has a gallery site that she manages herself, from a new painting to a booked wedding date. The client has a gallery site that she manages herself, from a new painting to a booked wedding date. Because I designed and built it, the design system and the code are the same thing: the colours and type in the design are the tokens the blocks use, so a page she builds herself still looks designed. Before launch, I tested every page at six screen widths from 320 to 1440 px with Playwright and fixed every overflow. I also ran Lighthouse and fixed the performance and contrast findings: one decorative SVG went from 920 KB to 376 KB, and it now downloads once instead of being inlined four times per page.

Built
With

Platform

• WordPress

Languages

• PHP
• JavaScript
• HTML
• CSS
• React

Frameworks and Libraries

• Gutenberg Blocks
• Tailwind CSS
• GSAP
• Swiper

Tools and Services

• Contact Form 7
• Booking Calendar
• LiteSpeed Cache
• GitHub Actions
• Bluehost