lkhrs.com version 8

Pushed a new version of www.lkhrs.com this morning! It’s built with 11ty and the templates are written in JavaScript. Here’s a screenshot:

The new design features a green color palette with intersecting lines. Type is set in Recursive Sans, with sturdy 1000-weight headings.

This layout was a challenge because I needed the lines to match up at different screen sizes. This was achieved with CSS Grid’s grid-template-columns and grid-template-rows, where I set the first track to the same size, allowing the rest to remain flexible. On screen widths smaller than 550px I got rid of the fixed tracks and lines altogether; they took up too much space.

Writing the templates in JavaScript was easier than I thought! Big thanks to Reuben Lillie and his well-documented site. The benefits over a templating language like Liquid or Nunjucks are subjective: I find it helpful to immerse myself in things I’m learning, and writing my personal site in JavaScript helps me apply what I’ve learned and learn more in the process.

I need to tackle things like image optimization and optimal font loading, but this is a decent MVP. I want to share the source in the future, but I need to figure out a way to do that without my Markdown files being crawled by search engines. Otherwise I might end up competing with my own source.

If you notice any issues, let me know!