Laying it all out

Building the site

I considered having this site itself be a Work for this year, but that seemed a little like cheating. Plus, I had intended to finish it last year, so if anything it’s finishing a Work from last year. If I retroactively add a 2023 entry, I’ll include it there.

For the time being, I’ve decided to just designate it as a special work called “Meta”.

Technology used

This site is built with Jekyll, a static-site generator. That’s fancy talk for “It’s a framework that let’s me write stuff and then it transcribes it all into HTML with script magic”.

Theming

Initially, I tried using a theme made by someone else, but it just didn’t work. I kept hitting limitations of the intentions of those themes; most were project-oriented, which is great for a singular collection of projects. What I really wanted, though, was a bespoke set of projects where the projects, the Works, are the centerpiece, not illustrative context for something else.

So this is instead a custom theme I built. I’ve been playing with Jekyll for a few years now and am getting used to it and what it can do.

As with many other projects, I am using Tania Rascia’s Primitive UI CSS framework. I really love the simplicity and flexibility of this as a bootstrapping starting point. I really love just letting the HTML elements be and styling them from that, only lightly-touching with classes and attributes as needed.

So many frameworks are so heavy-handed with using classes and IDs and other attributes to shoehorn the content to be styled in certain ways. I find it really annoying when people do either <div id="footer"> when <footer> exists, or <blockquote class="blockquote"> – like, why? The <div> tag has its uses, but there are so many other block-level elements that provide better semantic-context for what a block means.

Signage

Logo

I created the logo in photoshop. I wanted something simple that emphasized the concept of 12 – 12 is 6 doubled, and 6 is a hexagon and hexagons are fun. I found a hexagon SVG on wikipedia, and imported that into Photoshop as a path. I did path stroke once, rotated it 30º, then path stroked it again. Inside I put a big ol’ 12. The coloration scheme began with C-M-Y-K spaced evenly: 4 colors – I considered R-G-B, but that didn’t give the gradient I wanted. Then between those I approximated a hue that felt like it fit.

Favicons

This was exported at 260x260, and imported into realfavicongenerator.net. I’ve used others in the past, but this one was what I used this time. A few selections, an export, and some CSS insertions and files copied into the site, et voilà.

Year Tiles on Homepage

Again leaning on math, here. 12 divides evenly by 2, 3, 4, and 6. I tweaked the native breakpoints in the SCSS just slightly, then used SCSS calculations to set the widths. The containing <ol> tag is set to display: flex; flex-wrap: wrap; flex-direction: row;, so it will automatically space the items and wrap them cleanly.

$tile-width: 200px;
$gap-width: 8px;

margin: 0 auto;
width: calc($tile-width * 2 + ($gap-width));       // 200 * 2 + 8 => 408

@include tablet-breakpoint {
  width: calc($tile-width * 3 + ($gap-width * 2)); // 200 * 3 + (8 * 2) => 616
}

@include desktop-breakpoint {
  width: calc($tile-width * 4 + ($gap-width * 3)); // 200 * 4 + (8 * 3) => 824
}

@include fullscreen-breakpoint {
  width: calc($tile-width * 6 + ($gap-width * 5)); // 200 * 6 + (8 * 5) => 1240
}

The default background image is something I did up quickly in Photoshop. I created a 200x200 image, switched to Channels view, then selected each channel (R,G,B) and did a Render -> Difference Clouds on them, individually. This creates a dreamy-ethereal look. I added an 8px border with a little bit of contrast to give it a bevel effect.

The text on top of it is plainly rendered, but I reduced the opacity to 0.5 and had that transition to 1 on hover, with a transition: 0.5s so that it fades in and out. This maybe makes it a little less accessible because the font-contrast is weak, so I may revisit it.

The plan is to have each work have an image that is the thumbnail for it that will be used in place of these images, as it is completed.