How this site is made

Ethos

In kleonic fashion, this site is a garden of things I found interesting, tended over time into its current shape. It's been through many forms over the years (Jekyll, FastAPI, even Notion at one point). But ultimately (est. 2023), I ended up just making a static website (with some good old HTML, CSS, JS, elbow grease, and transformer assistance for gruntwork).

The site started off like something you make in Notepad, and over time I added features only when necessary. For example, I adjusted readability (line-height, etc.) after publishing Compass Wrapped and realising it was unreadable on phones, and only added image grids and lightboxes when I ported image-heavy Sauntering Vancouver blog posts over from Substack

Under the Hood

• Code for this site is stored on GitHub and hosted on Cloudflare Pages, which auto-deploys any changes I make.
• Under domain kevindeyoungster.com, also managed by Cloudflare
• Media assets are stored on BunnyCDN, and routed through my domain (https://cdn.kevindeyoungster.com/**)
  • I use Transmit to upload files, but lately prefer mounting the FTP connection as a volume on my machine with Mountain Duck
• Email subscriptions are powered by Buttondown
• I use git hooks for the site's RSS feed validation, dead link scanning, etc.

My authoring flow is to draft in Bear or Google Docs, export to HTML, and have a bot integrate that into my site's existing codebase (media preprocessing, CDN upload, edge-case transformations, etc.)

All pages being static allows me full flexibility to make custom pages (like /bricks and /dispatch-from-tundra), and easily add components like the "show my comments" toggle.

Design

General

• Fonts: for header, sans-serif system-fonts, for body, PT Serif
• Colours: I go for an earthy swatch to match the profile pic () of me holding a terrarium. I used to have dark mode but removed it because only real, true information comes from the light.
• Favicon: the dame-dame adinkra symbol (), which represents intelligence and ingenuity

Home

• Header is a list of nav links, my name with One Piece motifs, then profile pic with a speech bubble adapted from Verou's generator
• Main content format ("I'm...", "In the past I've...") was inspired by Molly Mielke's. I liked using pithy one-liners but grimaced at how highfalutin I sounded on the page. Bookending the list with a self-deprecating joke seemed to balance it out.
• On the bullet about my quest to walk all the roads in Vancouver, you'll see a stat pop in: loading.... This is coming straight from Gogomi! (technically, through a proxy API powered by a val).
• Footer used to be a simple <hr>, but when I started my sabbatical, I got the idea to make it wavy to represent ground, and planted a little outgrowth to match the sowing-seeds theme. There's a link hidden behind it.
• Beneath the footer is a randomly picked quote from some of my favourites. Refresh the page to hear from Howard Thurman, Rengoku, Adrienne Rich et al.

Blog

• Styling is heavily inspired by Instapaper's, but I admit my copy could use some more tweaking (I'm open to suggestions)
• The table of contents (toc) shows inline on small-screens. For larger screens, it sticks and to the right, highlighting where you are on the page (took inspo from Quartz)
• The blog index itself is simple and sectioned by year. I put a () next to the popular ones, and a custom () for my most recent data science x Ghanaian pop culture post

Other

• The directory section that maps all the corners of my website in case you get lost is inspired by Robin Sloan's index. I also added lines connecting sections. Zoom in and you'll see a traced SVG () of an ancient Mauritanian arrowhead.
• The bookshelf has a skeuomorphic hardcover effect on the book covers (used Varun Dhawan's tutorial).

Advice

Focus on your site's content first. Have three blog posts before touching the design

If you live near a tree, go outside and take a look at it. Notice the browning at the edges of some leaves, the lush green of others, the peeling bark, and the new shoots growing from underneath that. Life is simultaneously living and dying, and so will your website. Don't fret.