Welcome to my personal website: a repository of my thoughts and projects. I made it public so it can demonstrate my skills and to potentially inspire or inform hypothetical readers.

From its conception, my intent has been to build this website with simplicity, security, high performance, durability, accessibility, and maintainability. These goals inform my technical decisions...

Tech stack

As you navigate this website, you may notice a variety of fonts, colors, images, animations, and user experience quirks. This was almost all built by hand using the typical trio of frontend web technologies: HTML, CSS, and JavaScript. I considered using a library to make styling easier, but CSS is quite capable on its own when using SMACSS, CSS custom properties, and media queries. Inclusion of JavaScript is minimal because modern HTML and CSS are robust enough to solve most needs of a simple website like this.

The backend is a simple web server (nginx) that serves content over HTTP from a directory on the file system.

The supporting infrastructure is simply an old computer in my basement running NixOS. Linux server administration isn't my favorite pastime, but I like the price tag and the freedom to mess it all up at my leiseure.

Deployment is as simple as making sure the right files end up in the right directory at the right time. In practice this involves running my build command then copying the output files to the server.

The build process is probably the most complex piece. I thought about making my own static site generator, but there are plenty of great public source options. After experimenting with a few of those options, I landed on Zola; primarily it fits my needs, but also because it's incredibly fast, small, and well documented. Seeing your browser update in near-real-time with changes is as easy as running the command zola serve. Building to deploy for the world to see is as easy as running the command zola build.

In my experience, this tech stack is usually referred to as a static site; generated by a static site generator.

graph TB
    %% Entities
        You
        subgraph Client
            Browser
        end
        subgraph Server
            nginx
            Distributables
            Source
            Zola
        end
        Kevin
    %% Relationships
        You -- read with --> Browser
        Browser -- downloads from --> nginx
        nginx -- loads --> Distributables
        Kevin -- maintains --> Source
        Kevin -- runs --> Zola
        Zola -- builds from --> Source
        Zola -- builds to --> Distributables

Design

I have very little experience designing user interfaces, but have picked up some intuitions around user experience design throughout my career. With this in mind, I chose a primary color, gathered layout inspiration from other developer blogs, scoured through font repositories, and tried to keep the design simple.

More than one color is used on this site, not only to make the content readable, but to give a sense of personality. A good palette demands a high contrast-ratio between a foreground and background. I've learned that pure black and white is hard on the eyes. First I chose a primary color from a big list of "purple-ish" colors. Then I muted the primary color to produce what I call the neutral color. Beyond that I have some generic colors for success (green), warning (yellow), and error (red) states.

Having grown up with a NES controller in my hands, I often enjoy the lo-fi graphical style; which was the main driver for my font choices. I did some research to see what others have said publicly about typographical choices, but ultimately ended up picking a few fonts that I thought looked good together and fit the previously mentioned theme; another opportunity to express some personality.

I expect most readers (including myself) will read this on mobile devices, so I have been building mobile-first with a responsive design that grows naturally to a more desktop-friendly user experience.

Businesses often build their products with accessibility as a requirement, and although I'm only mildly blind, I often wonder whether I will someday need to learn how to take advantage of accessibility tools. I wanted to use this opportunity of building a website to research and implement techniques that allow a wider range of users to access the contents of my website and to better familiarize myself with the available tools. These considerations have been top of mind while writing HTML, adding images, and choosing colors.

Reflection

I've been following an iterative process that started with getting a minimal content website to be built and publicly deployed. I already had my server set up for a variety of other hobby projects, including publicly deploying static sites. The majority of my time was spent choosing a static site generator and convincing myself that I shouldn't build one from scratch.

Then I had to start organizing my thoughts around the kind of content I wanted to write about. You can see the primary result of this effort in the navigation bar at the top of the website. I thought to myself: I want to write about projects and occasionally write about arbitrary topics. I would also want a landing page to give the reader some context about the place he/she had just stumbled upon. And with the thought that people may want to contact me or employ me, I decided to include my resume and social media links. Then I stubbed out some of the projects that I wanted to write about, including this one (filling in the "personal website" project stub RIGHT HERE ON THIS PAGE).

Some of the biggest challenges have been related to exercising skills with which I have limited experience. I don't write often, so it can be difficult to dedicate time to writing and organizing my thoughts well enough that a future reader might stick around long enough to read a whole page (congrats on making it this far). Although I spent a lot of my professional career building user interfaces, user interface design was often delegated to a dedicated designer or design decisions could be copied from past design decisions; making the design of a whole website from scratch a somewhat daunting task. I can also struggle with the opposite problem: having great interest in technical things, I can easily dig myself into a deep hole of research and experimentation if I don't have a concrete task or goal. That's part of the reason I've formed the following list...

Roadmap

In the future I would like to do the following (and hopefully update this list as I add new things or complete existing things):

• automate build and deployment (git push to prod)
• create an interactive background using WebGL (or WebGPU when more broadly available (looking at you, Firefox))
• finish writing about the stubbed project pages
• write a proper blog post about a tech topic on my mind
• style project and blog listings with thumbnails, dates, etc.
• replace social image files with svg files
• improve styling of article headers
• add a 404 page
• add RSS feeds
• add search functionality
• optimize for search engines
• add descriptions to each tag page
• add this website to my resume