Overprint

About this template

Overprint is a complete website for Pomelo Press, the fictional Louisville studio of illustrator Pipa Valdespino: editorial illustration, picture books, packaging and posters. Every picture is drawn in SVG as three spot-ink plates that overprint like a real riso, a little off register and speckled, on cream paper or dark paper. It has a filterable portfolio with case studies that step from pencil sketch to separate plates to the final print, a shop of prints, zines and stickers with a cart and checkout, a four-step commission enquiry with a fee range and dated timeline, and fair dates that roll forward so the demo never goes stale.

Features

• Risograph artwork drawn in SVG: three spot-ink plates per picture that overprint with multiply (screen on dark paper), slightly off register, with halftone screens and ink speckle
• Twelve projects from one data file, each with its own drawing, filterable by type with keyboard-accessible chips and a shareable ?type= link
• A case study for every project (?project=) with Sketch, Plates and Final print tabs and buttons that switch each ink off the press
• Shop of twelve prints, zines, stickers and postcards with sizes, numbered editions and stock, filterable by ?filter=
• Cart saved in localStorage (in memory when storage is blocked) with a drawer, quantity steppers, free-shipping progress and Kentucky sales tax
• Front-end checkout with delivery options, address and card validation, ending in an order confirmation with the next mail day
• Four-step commission enquiry with project type, license, budget and deadline, showing a live fee range and a dated timeline in working days
• Dates worked out in Louisville time with US holidays and the studio's winter break: booking month, reply date, open studio and mail days
• Fairs and events that roll forward by whole weeks once they pass, so the demo never shows an empty or past list
• Light and dark paper themes that follow the system and remember the visitor's choice

Pages included

• Homeindex.html
• Workwork.html
• Case studyproject.html
• Shopshop.html
• Checkoutcheckout.html
• Commissionscommissions.html
• About and eventsabout.html
• Contactcontact.html
• 404404.html

Quick start

unzip overprint.zip && cd overprintopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build

Changelog