The Colophon

What is a colophon?

A colophon is a page or section (typically in a footer) of a site that describes how the site is made, with what tools, supporting what technologies, and often published on personal sites at a top level /colophon page.

Tools

This website is:

• handwritten in VS Code - always without the use of AI
  • VS Code has treated me very well so far. It's got color-coding for different types of text (element tags, links, comments, etc.), a file viewer, auto-complete (including file paths), and the ability to set up a local server to preview my site as I'm working on it. It's totally free and you're able to turn off the AI features.
• hosted on Neocities
  • Neocities is a free website host with an optional premium tier. The free tier gives you 1GB of storage, which I've barely even touched. It also has a nice community of other personal sites, which makes other sites more accessible without feeling too much like social media to me.
• tested on Firefox for desktop and Android
  • Firefox is my favorite of the mainstream browsers because of its privacy policies and the ability to turn off the AI features. I also appreciate the usefulness of keywords for bookmarks, which allow me to easily get to a variety of different sites without digging through a million bookmark folders.
  • My first phone was an Android, and I've been on it ever since. I don't like Apple's closed garden environment, nor do I like the level of customizability Apple offers. All of this to say, this site will unfortunately never be tested on Safari.
  • This site should work on all browsers and screen sizes, but please let me know if you see something broken!
• tested on a 24" monitor, a 13" laptop, and a Samsung Galaxy S24
  • I hate when a website looks good on my monitor at work, then I go to look at it at home on my laptop, and the layout is messed up. I understand it's part of the experience of being amongst other people learning coding (and I've been guilty of forgetting to properly check responsiveness myself at times), but I still strive to keep my website looking good no matter what size screen you're on.
  • I also use the Responsive Design Mode in Firefox's Inspector, but the final OK comes from when it looks right on all 3 of my devices. I don't always trust the Inspector version.

Graphical tools

• GIMP for image editing/manipulation
  • GIMP is a free, open-source graphics editing program that I've been using since I was 12 years old. It has most of the functionality of Photoshop and Illustrator, but less polished at times. I've personally never had a problem using it, though I will admit the Adobe products are pretty nice.
• XP Pen Deco 3 tablet for drawing
  • I've had a few drawing tablets over the years, but this has by far been my favorite. The Deco 3 has 6 function buttons and a multi-fucntion dial that's great for zooming and undos/redos across large amounts of changes. The pen also has 2 function buttons, bringing the total to 10 different functions right at your fingertips. It's wireless, comes with a bunch of extra nibs and 2 drawing support gloves, and is all around a great tablet.
• Dithermark and Dither It for image dithering
  • While Dithermark is my favorite, since I'm able to create a black/white/red color palette with it, Dither It is also a great tool that I'll sometimes use instead, depending on the image. Both are totally free to use and do a fantastic job at shrinking image sizes.
• Specific resources and other useful websites can be found on the Resources page.

Accessibility and Privacy

I have absolutely no interest in tracking you or in any kind of persistent user data storage. I also don't want to learn how to do this, so this will never change.

This site does use Javascript for more complex functions and to save me time writing out repetitive HTML.

I do my best to keep the site accessible, but I'm not a professional and I don't use any accessibility features myself, so they're a bit hard to test sometimes.

Current accessibility features

• Alt text on all images, including emojis.
• High contrast for text content.
• Reduced motion controls - click the profile picture to stop its motion!
• Dithered images for reduced loading times. Full resolution is available by clicking the image.
• Keyboard controls for more complex pages like the library.
• Use of semantic elements and trying to avoid general <div>'s for better human and machine understanding.

Planned accessibility features

• Aria-labels for appropriate elements.
• Ensuring focus is correctly selected in the library after opening modals.
• Please leave me a message in the chat if there's another feature you'd like to see!

Javascript uses

For reference, I'm listing the uses of Javascript on this site. These features will be broken unless it is turned on.

Sitewide

• Creating the navigation, including sourcing, alt text, and stop/start motion controls for the profile picture.
• Sourcing and adding alt text for the emojis.
• Stylizing external links to have solid underlines. This specifically looks for links outside my site and adds the class "external" to it. Links are stylized to have dotted underlines by default (for internal links).

Library

• Opens modals for non-link books.

Cookbook

• Alphabetizes recipes.
• Gives functionality to category filtering buttons at the top of the page.
• Assigns category buttons based on classes to individual recipes.
• Gives functionality to extra (collapsed) text for recipes.

Media Log

• Gives functionality to category filtering buttons at the top of the page.
• Gives functionality to chronological sorting button at the top of the page.
• Assigns category buttons based on classes to individual entries.

My design philosophy

In short: I'm a sucker for clean designs and limited color palettes.

General rules

Text should be high contrast and should be fully visible (not hiding behind any other elements), with as many semantic elements as possible. For this site, I've chosen an all caps font to better convey the assertiveness I'm trying to cultivate - and I've grown fond of it.

Links to all pages should be easily accessible, either through a navigation menu or site map. Obscure pages don't get many visitors.

Images should be dithered for both aesthetics, loading times, and optimized file hosting. The exception to this is the Ar(t)chive page, which currently features the normal image.

The more limited your palette, the better

There are some sites with 20 fonts and 17 different colors. That's great for them! I find that I work best within pretty harsh restrictions, finding a way to create something within the confines of my self-imposed rules.

This site has 4 main colors:

With the exception of emojis, the Ar(t)chive page, and the media log page, these are the only colors that you should see. I've even started dithering my images in monochrome with red in order to maintain that color scheme.

Art palettes

The same philosophy applies to my art, where I try to stay within a pre-defined 12-color palette based on each season.

Spring	Summer
Coming soon
Fall	Winter
	Coming soon

More on fonts

Similar to the color palette, I only have a total of 4 fonts across all my webpages:

• The majority of the website is in Home Video, like you're reading now, for headings and general text.
• Silkscreen is a nice companion that stays within the ALL CAPS style and disappears into the background for my category buttons in the Media Log and the Cookbook
• Tox Typewriter is perfect for creating the clean-yet-vintage feel I want in the sketchbook, while being much more legible at length for poetry
• Ancient Computer, which I'm using for Weird Web October, may be one of my new favorites, but I'm desperately trying to not switch to something that would allow me to minimize myself by typing in all lowercase for the rest of the website like this tempts me to.

Simplicity where possible, Complexity where it's interesting

The format of this website should stay fairly simple: A navigation menu on the left (or top, on mobile) and the main content to the right of it, roughly in the middle of the screen, with semantic elements for easier parsing by all.

However, this doesn't mean that the content won't get more complex - there's a decent amount of Javascript under the hood in order to make the navigation, category sorting, emojis, and other semi-essential parts of the site run.

I choose to use JS whenever it's interesting to me - sure, I could type out all the alt text for my emojis, but I don't want to! I could just have the library be standard posts like the media log, but I think it's neat to have a skeumorphic shelf and little books to click on!

What it boils down to is: will it make my life and website better, and can I do it without straight copy-pasting? Then it's probably getting some sort of JS functionality added to it.

My site philosophy

I've already talked about this at length in my site manifesto, but I may come back to this spot and expand on it later.

Inspirations

Coming soon