I just updated my personal website for the first time in a while, to reflect my dope new job at schoolhouse.world. While doing so, I decided to checkout random commits in the repository to see how the website has changed over time. This was surprisingly fun and nostalgic, so naturally, I wrote up a script to visualize the changes.

First, I iterated through every commit in the repo, opened the index.html page using Selenium, took a screenshot, and saved it as a PNG. I had to wait three seconds between page loads because my website has a few animations.

import git
import time
import os
import shutil
from selenium import webdriver

REPO_DIR = '/Users/akshay/Documents/random/akshayravikumar.github.io'
SCREENSHOT_DIR_NAME = "screenshots"
FILE_PATH = '/index.html'

repo = git.Repo(REPO_DIR)
driver = webdriver.Chrome()

if os.path.exists(SCREENSHOT_DIR_NAME):
    shutil.rmtree(SCREENSHOT_DIR_NAME)
os.mkdir(SCREENSHOT_DIR_NAME)

index = 0
for commit in repo.iter_commits(rev='master'):
    repo.git.checkout(commit)
    driver.get("file://" + REPO_DIR + FILE_PATH)
    time.sleep(3)
    driver.get_screenshot_as_file(SCREENSHOT_DIR_NAME + "/" + str(index).zfill(3) + ".png")
    index += 1

There were ~260 commits, so this took 13 minutes. After that, I used ffmpeg to string the PNGs together into a video.

ffmpeg -framerate 10 -pattern_type glob -i 'screenshots/*.png' -vf reverse -pix_fmt yuv420p -c:v libx264 out.mp4

And here’s the end result!

My personal website is a tiny piece of who I am, and it evolves along with me. While the code changes aren’t drastic, they document transformations in my age, appearance, maturity, aesthetic, career, and programming skill over the last seven years. I can only imagine what it’ll look like seven years from now.