Project

Artist Portfolio

Screenshot of Jennifer Dionisio's website showing a selection of artwork.

Jennifer is an artist and illustrator and uses her website to share her portfolio for freelance work. The design of her previous site was basic, and it was hard to manage her portfolio in the Content Management System (CMS).

We worked together to design a site that better represents her artwork. As well as building the site, I created a customised Sanity Studio for her to easily add new artwork, change content and publish her site.

Design

The goal of the design was to showcase Jennifer's artwork, so the design of the site needed to complement her artwork while helping it stand out. This was achieved using a muted colour palette and minimalist design.

The initial designs were done in Sketch for a small mobile (320px wide) and desktop screen (1440px). I used fluid type and space systems, and flexible layouts, to bridge between these two sizes - so the website looks good on any screen size.

Tech Stack

  • Eleventy

  • CUBE CSS

  • Custom JavaScript

  • Sanity Studio CMS

  • Hosted on Netlify

Technical

I built the site with Eleventy because:

  • It generates a static site, so there is no server to run, scale and secure.
  • You can build fast sites with minimal or no JavaScript.
  • Static pages work well for Search Engine Optimisation.
  • It's written in JavaScript, so is relatively easy to integrate with a CMS (most have vanilla JavaScript support).

Integrating with a CMS is essential so Jennifer can easily update and add to her portfolio. I chose Sanity Studio because I could customise the workspace, it has native support for images, and a generous free tier.

Using Sanity I was also able to solve a pain point in Jennifer's old site. To order the artwork on the home page she was using index numbers. Which meant she had to adjust multiple artwork indexes when adding new artwork to her home page. With Sanity I implemented drag and drop ordering.

For site performance I focused on optimising the images (the largest assets in the site) and shipping as little JavaScript as possible (JavaScript is processed by the user's browser and can make the site feel sluggish if there is too much of it).

I also used progressive enhancement to use new CSS features.

For example, the masonry layout on the home page uses the CSS grid masonry layout. But for browsers yet to support this feature, JavaScript is used to achieve the same result (1KB unzipped). The JavaScript is also specific to each page and only shipped when needed.

The result was a significant performance improvement on Jennifer's previous site, which was built with Webflow.