This is an interactive map of my life, where each week I've been alive is a little box. The box's border color represents where I was living, the fill color what I was doing. Tap a box to see what I was doing where that week.
I made this to help myself see the bigger picture of the road I've walked.
Read more about Life in Weeks at Wait But Why.
This code was copied and adapted from Buster Benson. It is a single webpage statically-rendered with Hugo hosted on Netlify. It consists of two data files, an introduction, and a template.
- Install Hugo:
brew install hugo # Mac - Clone and run locally:
git clone https://github.com/ginatrapani/ginatrapani.org.git
cd ginatrapani.org
hugo server -D- Visit http://localhost:1313/.
content/→ Page contentlayouts/→ Templatesassets/scss/→ Stylesassets/imgs/→ Site-wide imagesstatic/→ Unprocessed assetshugo.toml→ Site settings
This page uses Bootstrap for layout and interaction, and a smidge of jQuery to reflect the current week on the map.
The font is Red Hat Display. Colors chosen via Color Hunt. Edited in Zed.
There are several neat Life in Weeks examples and tools, including:
- Weeksofyour.life: Make your own, completely browser-based
- Life Calendar: Make your own, with multiple layers
- My Life in Days: Beautiful refactor, by days
🍯 “I always get to where I am going by walking away from where I have been.” – Winnie the Pooh