Grisaille

Grisaille is a free black-and-white personal site for a freelance designer or developer. It opens on a large grey portrait under your name. Visitors paint the photo back into colour with the cursor, and the colour fades again after a moment.

What you get

• Pages: Home, a Work index with All / Client / Personal tabs, a project page template and a 404 page

• A Projects CMS collection with 6 made-up projects (cover, gallery, client, service, timeline, tools and a write-up)

• Code components: the portrait colour brush with your fitted name, a rows component that runs both the services accordion and the experience list with a cursor preview, a copy-email button, a phone-menu scroll lock, and a small site-style component for focus rings and link hovers

• Desktop, tablet and phone layouts

• Plan: a free Framer account can remix, edit and publish it on a framer.website subdomain. A custom domain needs a paid Framer plan.

Good to know

• The person, clients and projects are made up. Photos are from Unsplash.

• The brush works best with a cut-out portrait (background removed). A photo with a busy background turns grey too.

• On touch screens it paints on tap or a sideways drag; vertical swipes scroll the page. With reduced motion on, the whole portrait fades to colour instead.

• Services and experience rows are edited in the component's Items list, not in the CMS.

• There is no contact form: you get an email link and a copy-email button.

• The cursor preview on the experience list is desktop only.

• The /work tabs are not keyboard-operable.