This site will always be a work in progress

Exploring how I built this site, how it looked like in the past, and why it will always be a "work in progress."

Tags: Astro, TypeScript, Tailwind

This website's homepage is rendered on desktop and on mobile. The projects are blank and nondescript.

Hi, welcome to my little corner on the internet.

When I first started learning web dev, this was my first project. And what I’ve realized over time is that websites are never a finished product. They grow, evolve, and change, just like us.

With each successive version, my expectations, preferences, and goals for this website have changed. One central thing has remained the same, which is the desire to express myself and create things. So, how do you go about designing and building your own site from scratch?

A desire to express myself

I’ve always wanted a personal site. For one, it was a way of showing myself off. It’s easy to think of the Internet™ as just Google, or Twitter, or YouTube, and forget that it’s always been one computer, talking to another. You have unlimited control over how to present yourself, and in that way it was very freeing.

As a college student, I could also use it to showcase and talk about projects and work I’ve done (like this one). However, this has led to its own issues, with me torn between making my site look how I want it, and optimizing it for recruiters and employers.

Take aczw.dev, for instance. This was the first version of my site, and simultaneously looks completely different and very similar to what I have now.

Screenshot of the first version of my website. Colors are a bit brighter and everything is much, much bigger.

There are a lot of design elements that persist to this day: the purple color scheme, particular font choices, and an obsession with letting people know what song I last listened to.

The groundwork was laid for what’s to come. Almost immediately though, there were things that dissatisfied me. On the technical side, I chose to use Create T3 App to jumpstart my site, which was overkill for so, so many reasons. The layout, while unique, also felt too busy and distracting.

From this iteration, I tried to be more subtle and tone things down when not necessary.

Switching frameworks

It was around this time that I discovered Astro, which advertised itself as a framework that focused on content-first websites. That immediately caught my eye, and pretty soon I made the switch.

Here are some reasons that I decided to restart and use Astro instead:

With the technology chosen, I now wanted to condense the key components of my website into their own chunks. That’s when I started experimenting with the idea of separating things into “blocks.”

A Figma file containing many different iterations of what my site could look like.

I liked the idea because it contained the chaos of the previous site. I liked the idea of content collapsing depending on the screen size, and I liked how organized the overall presentation was.

I also spent some time updating other things, like the limited color palette I was working with. I chose a wider range of purples that were… less pink. I was greatly inspired by, and continue to be inspired by the way Material You handles colors and design elements.

The new purple color palette, now in 10 different shades. There also exists a green palette.

Building on the music links from before, I now make an API call to the Last.fm servers to fetch information about my account, including actual live data about what I was currently playing. Yes, I’m obsessed.

With the Astro docs open in another window, I started coding. The final result:

The new homescreen, with information contained in rounded blocks.

Everything looked exactly as I had imagined it. It was perfect, perfect, perfect… until it wasn’t, again. In my quest to become quieter, I somehow jumped even further in the other direction.

Rethinking what I want

What did I want out of my website? What did I want other people to see when they visit? The answers to these questions were often in conflict. It didn’t help that I also wasn’t sure what to show off to people.

Aside: how not to fetch data

In the past, in order to make requests to the Last.fm API, I used React and SWR. For this React component to access my API key from the client, I chose to make it publicly available by prefixing it with PUBLIC_. Theoretically, anyone visiting my site could simply Ctrl+F it. Actually, I’ll just show it:

The inspector is open. I searched for 'api' in the JavaScript code and immediately found my secret API key.

Was I seriously expecting anyone to steal the key and use it maliciously? No, but it reflected my inexperience with data fetching and keeping things secure on the web.

I know better now. All the data fetching is performed on the server, which my API key will never leave. I use Astro’s API routes to perform a GET request that separates the work from the component that is displaying it. This does mean you have to mark the pages that display this data as SSR only.

I’ve also gotten rid of the dependency on React and SWR.

Doing some research and reflection

To aid my redesign, I wanted to see how other people interpreted the idea of a personal website. This included fellow people from DMD, my friends, and other websites that I found intriguing.

I realize now that what I need is simplification. I don’t want to overwhelm any visitors with extraneous info. I’ve seen how you can show off your personality with constraint and in more subtle ways. Instead, I focused on crafting a design that I truly wanted people to see first.

I keep everything at fixed widths now. This was an intentional choice I took from the other sites I was stalking taking inspiration from. Reading becomes much easier when your eyes don’t have to scan across a large horizontal distance.

The cycle continues

What you’re currently reading has been rewritten over and over as this place has developed and changed. Every new version meant I had to update past sections, and then add a new section explaining why everything before sucked. This went on for quite a while. But I’m kinda tired of it now! No more!

The revisions my site has gone through reflect how I’ve changed as a person, and will continue to change. I will start letting that speak for itself. So, thanks for reading!

Colophon

This site was built with pure Astro and styled using Tailwind. It’s currently deployed on Vercel’s free plan, but uses Cloudflare DNS. All prototyping was done in Procreate and Figma.

Primary type is Atkinson Hyperlegible. Code is written in Berkeley Mono. Icons are from Lucide.