The Making Of Year in Review

For the last 5 years, I have put together a personal year in review. What started as a fun way to share what I've been up to has turned into a more elaborate review exploration of new web technologies and a collection of some interesting stats.

Screenshot of year in review 2019 page
Screenshot of year in review 2020 page Screenshot of year in review 2020 page
Screenshot of year in review 2021 page Screenshot of year in review 2021 page
Screenshot of year in review 2022 page Screenshot of year in review 2022 page
Screenshot of year in review 2023 page Screenshot of year in review 2023 page
1,183,307,040 pixels
1,087,924 lines of code

Sketch to Production

Ideas often start on paper or in a sketchbook. Here are a handful of elements from the sketch to the final result.

Sketch of sticker section from 2019
Screenshot of the sticker section from 2019

Inspired by the sticker bombed laptop, this section features stickers I designed over the years.

Sketch of healthcare section from 2020
Screenshot of the healthcare section from 2020

Working in healthcare in 2020 meant a lot of unknowns and several efforts to help our frontline workers, which surfaced this idea of badges or patches for each project.

Sketches from the movie section of 2022
Screenshot of the movie section from 2022

Pop pop pop goes the movies!

Sketches from the favorite things section of 2023
Screenshot of the favorite things section from 2023

"Raindrops on roses and whiskers on kittens, Bright copper kettles and warm woolen mittens, Brown paper packages tied up with strings, These are a few of my favorite things"

New Home

As the year in review became a reoccurring project each year, it gained a permanent place on my home page. In 2021, I added the Year in Review section to rehanbutt.comOpens a new window.

screenshot of the year in review section from

Music Over the Years

Apple Music Replay first launched in at the end of 2019, Just out of reach to be included in my first year in review. For following years I used the stats they provided to help generate a unique music section each year.


Not Tracked





7% Increase



42% Decrease



34% Decrease

Movies Over the Years

Every year I try to generate a new way to visualize each section and add some new content over the years. Some sections, like this one requires quite a bit of prep to track each film watched. In 2021, I started a film log to help bring this section to life.


Not Tracked


Not Tracked





25% Decrease



54% Increase

Code Over the Years

With any software project many lines of code are needed to bring it to life. Over the years, I have experimented with new ways to implement sections and standardize others.





40% Decrease



48% Decrease



67% Increase



16% Decrease

Pixels Over the Years

Desiring a new way to visualize each section, each year comes with many mockups. Many frames, artboards, canvas, and iterations generate a ton of pixels, all helping to conceptualize what will be shared each year.





145% Increase



8% Decrease



4% Increase



30% Increase


The header is the start of the year in review experience and I like to have it start with something new, fresh, and bold. Check out my series of the sketches and iterations for each year's header.

2019 neon yellow header
2019 header with outlined letters and a gradient
Sketches of the 2019 header
2019 release header
2020 header with a giant gradient circle from the corner
2020 header with a small highlight circle on my logo
2020 header in dark mode
2020 release header
2021 header with numbering and small lettering
2021 header with stacked low opacity numbering
2021 header with giant numbering
2021 release header
2022 header within a card with stacked lettering
2022 header within a card with lettering
2022 header within a full height card with numbering
2022 release header
2023 header with sliced numbering
2023 header with abbreviated numbering
Sketches of 2023 headers
2023 release header


A deep dive look into the many iterations and unique aspects of the film strip movie section, from sketches and mockups to code experiments.

The first several tiles of the final film strip
Sketches for the movies section
Iterations of the 1st watch tile
Tiles from the film strip section
Code snippet and testing for the horizontal scrolling

Hidden Mickeys 2022

When I joined Disney I thought I'd add a Disney classic to the year in review. See if you can find the 5 hidden Mickey's shown below.

Hidden Mickey in an interstate sign from the driving section of 2022
Hidden Mickey from the farewell Pittsburgh section hidden in a chocolate bite
Hidden Mickey hidden in the address bar of the web section from 2022
Hidden Mickey hidden in the photography section in the plane window
Hidden Mickey hidden as the image frame from the new job section


Taking a cue from our passports, this year I created a stamp representing every major city I visited. These illustrations transformed a simple concept into a visual chronicle of my adventures.

Passport style stamp for the District of Colombia
Passport style stamp for Chicago
Passport style stamp for Los Angeles
Passport style stamp for New York City
Passport style stamp for Pittsburgh
Passport style stamp for Zurich
Passport style stamp for Colmar
Passport style stamp for Schwangau
Passport style stamp for Montreux
Passport style stamp for Doha
Passport style stamp for Abu Dhabi
Passport style stamp for Istanbul
Sketches of the passport stamp general concept
Sketches of the Montreux, Schwangau, Zurich and Colmar stamps
Sketches of the Abu Dhabi, Doha and Istanbul stamps
Sketches of the DC, NYC and Chicago stamps
Sketches of the Pittsburgh and Los Angeles stamps

Web Dev

Bringing these pages to life takes a bit of technical exploration. Experimenting with new web technologies or pushing existing ones to the limit is all part of the process.

CSS Grid Layout

Playing with CSS GridOpens a new window for the Github section


Horizontal scrollOpens a new window test for the movie section

CSS Grid Layout with Borders

Playing with CSS grid lineworkOpens a new window for the roads in the driving section

Multicolored movie tickets clipping path exploration

Playing with clipping pathsOpens a new window for the movie ticket


Plane windowOpens a new window interaction for the photography section


Scaling typeOpens a new window test for a responsive footer

Overlapping text test

Overlapping typeOpens a new window test for the header

Interactions & Easter Eggs

Fun little moments are a critical part of my work and my year in review is no exception. Each year I include a series of interaction, animations or an easter egg for a bit of delight.

Baggage tag barcode

rehanbutt.comOpens a new window encoded barcode


Wowwee, a secret emoji


Meow to Chicago!


Tag, tag, rainbow tag, you're it!


No flash photography 😛


"Metaman, express elevator! Dynaguy, snagged on takeoff! Splashdown, sucked into a vortex! No capes!"


Color separation interaction


Springy & bouncy lettering


Particle field background element


Filing away old projects


Movie posters fanning out


Popping popcorn & a hiding poster


Golden ticket reveal


Glowing jukebox at night


Chicago Cat 2


Hi Barbie!