home/blog/how-it-works-site

How it works: site basics

2/25/2024

Infrastructure

Hosting for the webserver and most auxillary services is hosted on Vercel in their various offerings:

Some stuff lives outside Vercel, mostly because there are some things that're easier that way:

Technology

As of writing, I'm using Next.JS 14.1, and everything's using the App Router. I've just recently done some trimming to move helper code and components into a separate folder tree. Most pages are using the edge runtime, but I was running into compatibility issues with the stuff needed for the blog pages, so that's still using centralized functions (for now).

As you can probably infer from my previous post, everything is Typescript. The only file that's plain JS, and only because it has to be, is my Next.js config.

Styles are written in SCSS, mostly just for the nesting. I realize CSS Nesting is available in the major engines now, but Next.JS doesn't support it yet. There's one mixin that I'm going to refactor out at some point just so that switching to plain CSS is a file-extension change when Next supports it, but that's a problem for later me.

Design aspects

The font I use, B612, was designed by Intactile DESIGN and Airbus for high legibility and reading comfort - something that's pretty important in an aircraft cockpit. I like the way it looks, I like that story, and it's free.

This site is sensitive to your light/dark-mode choices as configured in your browser. I haven't built a site-specific toggle for it because I think it's unnecessary - you've already expressed your preferences.

The "white" color used everywhere isn't actually pure white - it's actually #FFF8E7, a color called Cosmic Latte, which is the average color of sample of stars large enough to be representative of the universe.

On the homepage, the blue-green gradient in my name is achieved by setting the text color to transparent and setting a background-image generated by the linear gradient function. The specific colors there get shifted based on the page's current text color to stay legible against the background; it gets lighter in dark mode and darker in light mode. The base colors are picked from the MLM pride flag because hey, I like men.

The purple I use everywhere is just my favorite color. Sometimes I play with the saturation/lightness, but the hue's always 261°.

My profile icon isn't based on me, but rather art I commissioned from @souldagger of my favorite D&D character. It's technically a warforged, but RP'd as the Forgotten Realms' equivelant of a SecUnit from Martha Wells' The Murderbot Diaries, complete with the utter lack of interest in applying concepts like "gender" and "sexuality" to itself. It's an artificer, and its favorite weapon is a shotgun with the repeating shot infusion and an underbarrel mount for its tiny eldritch cannon. It also built itself a familiar: that tiny robotic fox you see on its shoulder.