What sound does a giraffe make?

What sound does a giraffe make? website screen captures; desktop and mobile

Project overview

A small website to share a self-published children’s story to celebrate the birth of my niece. The site also captures user emails into Mailchimp for future notifications of new stories.

Goals

  • Fully responsive and accessible website including responsive SVG background images that minimizes text overlapping on images to ensure readability while also maintaining a sense of whimsy.
  • I also did not want to spend resources on maintaining a CMS like WordPress and related plugins.

Key lessons learned

  • Learned and used common aria-* attributes and patterns (i.e. temporary keyboard traps on modals to maintain focus) to enable accessibility
  • CSS calc to ensure backgrounds scale and maintain position without overlapping with text
  • CSS to use multiple SVG images and gradients to create a fully responsive background
  • Creating serverless functions (Netlify Functions) using netlify-lambda package
  • Gulp to speed up workflow for Babel and Pug as well as running Netlify Functions on a development server

Key technologies used

  • Babel
  • Pug
  • Netlify Functions
  • JavaScript (vanilla for webpages, several npm packages for Netlify Functions)

Production setup