blossom 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.
introduction
Our digital artifacts and spaces are reflections of our real selves. We feel like we outgrow digital spaces just as we change, learn, and grow in real life.
I’ve rebuilt my website, bencuan.me, every year for the past 7 years. Upon reflection, it’s become a surprisingly accurate representation of who I remember myself as throughout my various eras of college and post-college life.
The purpose of my website has evolved over time: first as purely a playground; then as a portfolio; and most recently, as a vessel for my blog.
Although I’m not a frontend engineer or designer by trade, I find joy in understanding how websites work and aim to make as much of it from scratch as felt reasonable with my skills at the time. As a result, many of the site’s iterations feel less refined (and more broken) than what you’d expect by most standards, but I’ve come to embrace that as a feature rather than a bug! There’s still a lot more room to grow and refine my craft.
As I continue to understand myself and the world more clearly (and become more proficient in building maintainable software), I anticipate that changes to my website will become more and more incremental. My hope is that the exercise of distilling myself into an artifact on the internet can help me reduce the drift between who I am internally and how I present myself to others.
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!
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!
I built several other websites during my high school years before I started bencuan.me: a homepage for my game development work (which later became Hexcaliber Studios), various frontends for hackathon projects (which later aggregated under the Bananium website), and a landing page for a hackathon that I helped host myself, LaunchHacks. Most of these have fallen into various states of disrepair, but I still find it cool that my past self left a bunch of artifacts that still survive to this day!
v1: 2018
https://bencuan.me/2018
I’m 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!)
From the commit history, this started pretty much as from-scratch as one could, with the html5 boilerplate. I saw a few other sites that had cool particles.js background effects; after playing around with it a bit I quickly found a configuration that looked vaguely like stars and ran the whole way with it.
The blimps, hot air balloons, and sky-to-ground theming came shortly after. I didn’t make any of the SVG assets myself, and forget where they originated from. (I have since gotten better at source attribution.)
2018 was a top-3 era in bencuan.me history, and I assume it will stay that way for a while.
v2: 2019
https://bencuan.me/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 to anyone during this era.
This was the first time I’d experimented with something vaguely railroad-diagram-like (inspired by metro system maps). I still think this is a really interesting idea and hope to come back to it someday.
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 (with Sass for stylesheets) due to its flexibility and Node compatibility. These workflow improvements made my life a whole lot easier compared to plain HTML/CSS, and resulted in much more maintainable code.
At this point in time, I was approaching the midpoint of college and actively looking for internships. I don’t think this website made any amount of difference in the levels of success I had with that search, but the process of aggregating my portfolio into a presentable manner helped me describe my work to interviewers more effectively. (However, the site I made for my game development org definitely did help— my first ever internship interview ended up being with Activision, where a recruiter found a game I made and reached out!)
v4: 2021
https://bencuan.me/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 notable changes:
- I’m really happy with how the new landing page splash animation 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 2019 website’s loading animation and stole it back.
- This was probably my first time actively thinking about color palettes. In hindsight it was still fairly sloppy work, but at least it was a step up from the previous year’s complete lack of cohesion.
- Relatedly, I also thought about fonts for the first time. We got a free Adobe subscription for school, and it happened to be bundled with Adobe Fonts, so I got to try out a bunch of fonts that would have otherwise cost a lot of money to license.;
- I started teaching a number of classes and got to add a new section to highlight my teaching experience! Many of my students ended up finding this website.
v5: 2022
By the time late 2022 rolled around, I’d secured a couple job offers and was transitioning into full senioritis mode. Luckily for bencuan.me, this meant I could shift away from designing glorified portfolios and focus solely on showcasing all the fun things I was 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. This was around the point where I started adopting the “let my work speak for itself” ideal.
I built the 2022 website with Gatsby. I’d gotten a little tired of Eleventy’s various quirks and undeveloped features; Gatsby’s additional polish was somewhat refreshing. In hindsight, though, Gatsby was probably too overpowered for what I needed at the time.
v6: 2023-2024
https://bencuan.me/2024
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:
- Find a build system that I could stick with for years to come, regardless of website content or structure
- Make a platform to publish content on (blog posts, recipes, and so on)
I ended up going with Astro and am still really enjoying it to this day. 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.
This was the first year I wrote a colophon for my website, a practice I hope to continue in addition to keeping a log of my various design decisions on this page itself. You can read the 2024-archived version at https://bencuan.me/2024/colophon/.
My favorite feature of this iteration was the friendnet, which I’ve since moved to the Garden (see friendnet). I encourage all of my IRL friends to try making websites of their own if it makes sense for them. Many have done so, and it’s cool to see them all in one place!
In addition to the Friendnet, I’ve since moved many of the 2024-era subpages into the Garden as well. For example, the bookshelf is here, and the recipes are coming very soon :)
v7: 2025
The future is now! The latest iteration of bencuan.me is here!!
Moreso than any of the previous iterations, I’ve tried to make my homepage as minimal and intentionally designed as possible.
This year was the first time I made my own color scheme. I moved and redesigned my physical space, and thought it’d be cool if my digital space also reflected some of the same themes from around my room (natural light tones and lots of green).
The existence of this Garden, which I launched earlier in 2025 (see Garden Design and the Build Log for more info!), drove most of the high-level design decisions for my main website. Now that I have a space dedicated to chaos and playful experimentation, I could reserve bencuan.me to become my curated, organized, forward-facing side on the internet.