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.Share