Jez Milledge

Gatsby - Contentful - Recoil
[object Object]

Sydney Pawtraits is a portfolio for a client who specialises in highly-detailed pencil portaits of pets. The brief was to create a playful but minimalist site which very much focuses on the artworks themselves. A completely custom modal-based image viewer was used in order to only provide features that were desired. The final piece is an easy-to-use, intuitive contact form. In order to reduce back-and-forth between client and artist, all required information in order to create the artwork may be entered in this process.

For snappy performance, this is a statically-generated site via Gatsby and hosted with Netlify. Content management is performed via Contentful - for both new artworks that may be uploaded, and also for managing portrait orders. A webhook is used to trigger an email notification to the artist when a new order is placed. The form was created with react-hook-form and features custom validation, and a bespoke paper size selector.

Styles, like the clean pastel palette, grid index page, and modals were achieved using a combination Emotion CSS-in-JS and Framer Motion.

Global state management is entirely atomic to avoid unnecessary rerenders. This is managed by Recoil.js, and provides state for things like form data and modal opening. Custom React hooks allow simple implentation of control of this state anywhere in the website.

© 2021 — Jeremy Milledge