colophon
wait what’s a colophon?
/käləˌfän/: an inscription at the end of a book or manuscript usually with facts about its production (Merriam-Webster ↗)
The colophon is an anachronistic literary construct that appears to have fallen out of fashion for nearly two centuries ↗:
With the birth of the internet, we now have a completely new media format to cultivate— and there’s so much more to explain about the inner workings of a website compared to a book. Recently, the term seems to be gaining traction within the IndieWeb community. Here’s an excerpt from their wiki ↗:
A colophon is a useful place to share the principles that govern your website. For instance, if you do not track users, or if you have taken specific precautions to protect privacy, you can list these principles on your colophon. Having the key principles that govern your site in one place means that any user who visits does not need to read through the archives of your site or speak with you to understand what mattered most to you when you constructed your site.
Although it’s definitely not mainstream yet, I’m starting to see them pop up more frequently in random places, like the website of my favorite coffee roaster ↗. It seems like a neat idea, so I’ll throw one in the mix!
my homepage for the internet
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. -jacky zhao on website redesigns ↗
I’ve rebuilt my website every year for the past 6 years, more as a hobby than out of necessity.
This year marks 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 is purely functional. I have actual real content for once, and it needs a place to live!
design
colors
I was going to make my own color scheme, but ultimately decided to leave this one to the experts. This site uses the Catppuccin theme ↗. Here’s the full palette, nabbed from their README:
🌻 Latte
| Labels | Hex | RGB | HSL | |
|---|---|---|---|---|
 | Rosewater | #dc8a78 | rgb(220, 138, 120) | hsl(11, 59%, 67%) |
 | Flamingo | #dd7878 | rgb(221, 120, 120) | hsl(0, 60%, 67%) |
 | Pink | #ea76cb | rgb(234, 118, 203) | hsl(316, 73%, 69%) |
 | Mauve | #8839ef | rgb(136, 57, 239) | hsl(266, 85%, 58%) |
 | Red | #d20f39 | rgb(210, 15, 57) | hsl(347, 87%, 44%) |
 | Maroon | #e64553 | rgb(230, 69, 83) | hsl(355, 76%, 59%) |
 | Peach | #fe640b | rgb(254, 100, 11) | hsl(22, 99%, 52%) |
 | Yellow | #df8e1d | rgb(223, 142, 29) | hsl(35, 77%, 49%) |
 | Green | #40a02b | rgb(64, 160, 43) | hsl(109, 58%, 40%) |
 | Teal | #179299 | rgb(23, 146, 153) | hsl(183, 74%, 35%) |
 | Sky | #04a5e5 | rgb(4, 165, 229) | hsl(197, 97%, 46%) |
 | Sapphire | #209fb5 | rgb(32, 159, 181) | hsl(189, 70%, 42%) |
 | Blue | #1e66f5 | rgb(30, 102, 245) | hsl(220, 91%, 54%) |
 | Lavender | #7287fd | rgb(114, 135, 253) | hsl(231, 97%, 72%) |
 | Text | #4c4f69 | rgb(76, 79, 105) | hsl(234, 16%, 35%) |
 | Subtext1 | #5c5f77 | rgb(92, 95, 119) | hsl(233, 13%, 41%) |
 | Subtext0 | #6c6f85 | rgb(108, 111, 133) | hsl(233, 10%, 47%) |
 | Overlay2 | #7c7f93 | rgb(124, 127, 147) | hsl(232, 10%, 53%) |
 | Overlay1 | #8c8fa1 | rgb(140, 143, 161) | hsl(231, 10%, 59%) |
 | Overlay0 | #9ca0b0 | rgb(156, 160, 176) | hsl(228, 11%, 65%) |
 | Surface2 | #acb0be | rgb(172, 176, 190) | hsl(227, 12%, 71%) |
 | Surface1 | #bcc0cc | rgb(188, 192, 204) | hsl(225, 14%, 77%) |
 | Surface0 | #ccd0da | rgb(204, 208, 218) | hsl(223, 16%, 83%) |
 | Base | #eff1f5 | rgb(239, 241, 245) | hsl(220, 23%, 95%) |
 | Mantle | #e6e9ef | rgb(230, 233, 239) | hsl(220, 22%, 92%) |
 | Crust | #dce0e8 | rgb(220, 224, 232) | hsl(220, 21%, 89%) |
typography
My name on the homepage in Pine Tree by UppercapType.
Major headings are in Novela by atipo foundry ↗.
Body text is in Garamond (google fonts ↗) or Neue Montreal (Pangram Pangram ↗) depending on whether I feel like writing in serif or sans-serif.
I also use Fraktion by Pangram Pangram for certain interactive elements, like the footer and in buttons.
Garamond and Fraktion are variable weight fonts, which mean they can do cool transitions like this:
links
Mystery meat navigation may have died out, but it’s still ridiculously easy to make mysterious links on a blog (like this! ↗).
I do my best to put all external links in context (click here if you like penguins ↗). There’s also a hover tooltip just in case it’s not clear where you’re headed.
Internal links are highlighted.
footnotes
I don’t like the standard digital footnote format that makes you jump to the end of the page and back just to view it. This method
visitor interaction
The only analytics I collect from my site are from explicit button presses, like the one on my homepage. There are no cookies, GDPR banners, or trackers— I genuinely have no idea how many people come here and what they do, nor do I really care.
I’m toying with some additional components to keep building on top of the limited button-clicks available to guests (like a Q&A section, or public bulletin board, etc). Rather than the standard imagery of browsing in isolation, I’d like to think of this space as a train station full of strangers coming and going on their own journeys scrolling through the internet, brought together briefly by coincidence or fate.
technical stuff
This website is hosted on Netlify ↗ and is built with Astro ↗ using a mixture of components (Astro, MDX, and React with typescript). Astro is the third build system I’ve used for this site (2018-2019 was static HTML, 2020-2021 used Eleventy, and 2022 used Gatsby) and my favorite so far. Look at those ✨ build speeds ✨!
19:40:10 [build] Rearranging server assets...
19:40:10 [@astrojs/sitemap] `sitemap-index.xml` created at `dist`
19:40:10 [@astrojs/netlify] Emitted _redirects
19:40:10 [@astrojs/netlify] Generated SSR Function
19:40:10 [build] Server built in 4.35s
19:40:10 [build] Complete!Stylesheets are in SCSS. All font-family, font-size, and color are specified as variables in _fonts.scss ↗and _colors.scss ↗
The opt-in visitor counters send API requests to my homebrewed backend (api.bencuan.me) hosted on turtlenet ↗. It’s written in Go and derived from the Clap Button ↗ source code.
You can view the source on GitHub here ↗ (or by clicking the version tag in the footer!).
This website has received a 100/100 on all categories of PageSpeed Insights:
