Introduction
The Challenge: Art vs. Code "Gabi" is a beloved illustrated character created by Marie-Hortense Camous, representing the culture of Nice. The author had a very specific vision: she didn't want a standard grid-based website. She wanted the site to feel like opening one of her books full of sprawling, hand-drawn landscapes.
The Solution I partnered with the author to act as the bridge between art and technology. While she provided the artistic direction and page illustrations, my role was to translate those static, pixel-perfect drawings into a fluid, responsive website that works on every screen size.
Responsive Adaptation
Preserving the Composition Translating full-page illustrations into the web is notoriously difficult. A standard responsive behavior would often crop the image awkwardly or hide key details on smaller screens.
To solve this, I meticulously calibrated the background positioning and scale for every breakpoint. Instead of a "one-size-fits-all" crop, I adjusted the alignment of the illustrations to ensure Gabi and the iconic landscapes remained the focal point, whether viewed on a wide monitor or a smartphone.
Technical Architecture
The "Headless-Lite" Approach The client needed e-commerce functionality but wanted to avoid the high monthly fees and rigid templates of a full Shopify store. I engineered a hybrid solution:
- Build: I developed the frontend in Webflow for total design freedom.
- Host: I exported the code to self-host it. This strategy eliminated recurring monthly platform fees, providing a highly cost-effective solution for the client without sacrificing quality
- Commerce: I integrated Shopify Buy Buttons. This injects a secure, world-class checkout system directly into the custom design, offering the best of both worlds.
Performance
Heavy Visuals, Light Code Websites rich in illustrations often suffer from slow load times. Through aggressive asset optimization and clean HTML/CSS export, I achieved near-perfect scores on Google PageSpeed Insights.
This proves that you don't have to sacrifice creativity for performance. The site is accessible, SEO-friendly, and loads instantly.
