Meta

Colophon

This is the personal website of Kynson Szetau. This site started as a really simple static page with minimal content when I was learning how to build a website, gradually expanded to a larger site with more concrete content, including a blog sister site. The current version of the site is created with Astro and hosted on Cloudflare Workers, most of the content is prerendered to ensure optimal performance.

If you are interested in the source code of this site, you can find it on Github. The code is licensed under MIT, and the content is licensed under CC-BY 4.0, feel free to fork it if you wanted to create your own version.

I also loved the idea of breaking the fourth wall, although I can’t do it like in a video game or a drama, I still include some elements (although very subtle) in this site that reflect reality state.

CSS

At first, I was struggling whether or not to use TailwindCSS for this site. On one hand, it is really intutive to write, but on the down side, it can easily bulk up the site, especially those long utility classes in the HTML. Still, after trying to integrate TailwindCSS, I found that it is actually not that bad in terms of size so I decided to keep it. Although there are still room for improvement like CSS variables compression (which are quite long).

The main color palette is a custom blue shade matching the primary color of my logo and mixing some colors from TailwindCSS’s gray palette. The primary blue and white used for text pass WCAG AAA to ensure enough contrast with the background.

Font

The following fonts are used in this site:

Monospace: Fira code
Sans-serf: Montserrat

Performance

I am (somewhat) obessed with optimizing the performance of this site. That’s why this site is:

Statically prerendered.
Heavily cached by CDN.
Use next-gen image format like WebP.
Lazy load heavy JavaScript library like Turnstile.
Self-hosting the web fonts.

I also try to minimize the amount of CSS and JavaScript used in this site by:

Use built-in browser features like form validation with HTML5 form.
Minimize interactive elements.

However, this is proven to be challenging as this often result in sacrificing some features like beautify the alert dialog for the contact form. Yet, making the right compromise is the art of computer science and I currently quite satisfied with what I have achieved.

Badges

Badges are commonly found in the old days of the Internet, they usually represents the communities and stands of the author and/ or the site itself.

I think it would be interesting to have a coner for retro and modern style badges related to this site. Feel free to suggest more if you know others that suit here!

Note: Currently limited to a few badges only as loading too many images on the same page hurts performance. Furthermore, animated badges are avoided as some visitors, for example those with vestibular motion disorders, might found them uncomfortable to view.