Production
stories.nancyhuynh.com
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
calcto 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-lambdapackage - 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
npmpackages for Netlify Functions)
Production setup
- Netlify for static hosting; automatic builds from Github repo
- Netlify Functions to enable communication with Mailchimp API in order to capture email addresses for future notifications