The history of bencuan.me

Summary

A running chronology of my personal website (and this garden), and some things I’ve learned about myself and/or web development along the way.

Todo

This page is a very literal/factual account at the moment. I’d like to add some bits of reflection and insight once I think about this journey a bit more.

pre-history

I made my first ever website sometime in the early 2010’s: a very poorly designed Google Sites page where I put some Scratch games I’ve made. This site (and most of the games on it) have since been lost to time, but miraculously I uploaded a couple of them to the official website and they’re still playable!

(core memory unlocked!)

The first “real” site I ever contributed to was for my high school’s robotics team. It was basically just a re-dressed html5up template— they were pretty popular at the time. It’s very outdated now (and has since been replaced), but you can still view it on the wayback machine if you’re morbidly curious!

v1: 2018

I don’t exactly remember why I decided I needed my own website, but I’m glad I did! At this point, I’d created a few simple websites for some hackathon projects here and there, and wanted to see where my newfound knowledge could take me.

I’m actually super proud of past me for making this site! It’s quite cohesive and well-themed for a pure HTML/CSS/JS site with no design direction made by a high schooler who didn’t know how to write code. (As you scroll down, the sky gets brighter until you hit land!)

Definite top-3 era in bencuan.me history, and I assume it will stay that way for a while.

v2: 2019

As you can probably tell from the over-the-top loading animation (I screen-recorded myself timelapse drawing the background), my art phase was in full swing. I had a singular goal for this website: to figure out how extravagantly far can I take a website before I hit my limits.

I believe I’ve achieved this goal, though whether or not that translates into it being an actually good website is highly debatable. My artistic taste at this point in time was also mildly cringeworthy, so I apologize for any emotional damage done.

v3: 2020

This year, I completely redesigned the site from the ground up, focusing on simplicity and performance. (The site passes the Lighthouse audits with flying colors- something that cannot be said with last year’s!)

One of the highlights was experimenting with code preprocessors. After exploring some options such as Jekyll and Gatsby, I eventually settled on Eleventy due to its flexibility and Node compatibility. Also, I’m now using Sass These workflow improvements definitely made my life a whole lot easier, and resulted in much cleaner code.

v4: 2021

Unlike the past years, this iteration of the website is an incremental update from the previous version, with a few major upgrades here and there.

Some things that changed:

• Color scheme overhaul: make each section more coherent
• Fonts overhaul: cleaner, bolder, and more optimized!
• Add teaching section
• Add landing splash wave animation: i’m really happy with how this turned out! Lots of CSS trickery going on behind the scenes with repeating this mask horizontally a whole bunch of times and translating it. I actually used this trick for my 2021 website, and stole it back!
• Make favicon round
• Reorganize static files: no more monolithic dist; Netlify builds a public/ directory for deployment!
• Upgrade resume button (now changes color based on section)
• Section colors now change after nav clicks, and not just on waypoints
• Redesigned project link buttons
• More consistent color/design for featured projects
• Content update: resume and new projects
• Update dependencies

v5: 2022

I am happy to announce that the job search was successful this year!
As such, the purpose of my website has changed a bit— I can now omit things that employers care about, and focus solely on showcasing all the fun things I’m proud of making.

This year’s design was a step back from the flashy animations and colorful highlights. I carried out the design process with the intention of creating a site that’s snappy, simple, and easy to build upon in future iterations. Right now, I don’t need a cool site- I’d rather let my work speak for itself.

v6: 2023

This year marked a major shift in design philosophy. In every past iteration, the website was the focus in itself, raising the opportunity to figure out the limits of my design/engineering abilities at the time. But this time around, the redesign was purely functional. I have actual real content for once, and it needs a place to live!

With that in mind, I prioritized engineering design over visual design for this year’s makeover. The primary goals were twofold:

1. Find a build system that I could stick with for years to come, regardless of website content or structure
2. Make a platform to publish content on (blog posts, recipes, and so on)

I ended up going with Astro and am really enjoying it! It’s easily the fastest and most flexible SSG I’ve tried so far (beating out all of Gatsby, Eleventy, Jekyll, and Hugo) given that it can mix and match most of the popular templating languages.

For more info, see the colophon.

v7: 2025

The future is now! The latest iteration of bencuan.me is here, and you’re on it right now.

• Want a philosophical overview of the Garden? See about page.
• Refer to the Build Log to see the technical behind-the-scenes.
• See Garden Design for notes on how I built the visual elements.