deadlime: terminal velocity

The blog turned twenty last year, but I only got around to doing this now

07 April 2025

Eight years. The appearance of the site hasn't changed significantly for about eight years. There were some minor design changes here and there, but nothing major. I had planned a facelift for 2024 since the site turned 20 that year, but the inspiration never came. I did make a header image back in January 2024, but I wasn't satisfied with it. Then, just like that, a year flew by, and here we are.

The background image

Little did I know when I started working on the background image that I'd finish the whole redesign. I just thought it'd be funny to scatter programming-related characters around randomly. Maybe even color them as if it were syntax highlighting. I ended up scrapping that idea so that it wouldn't draw too much attention away from the content. Instead, I tried to use random shades of gray, but it was too random. In the end, I based the colors on Perlin noise.

I quickly created a little single-use PHP script that generated the proper HTML, then saved it as an image to use as the background. The dark theme variant is simply the inverted version of that.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
html, body {
  font: 24px 'DejaVu Sans Mono';
  margin: 0;
  padding: 0;
}
.bg {
  background-color: #e6e6e6;
  color: #000;
  width: 1920px;
}
.char {
  display: inline-block;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 60px;
}
    </style>
</head>
<body>
<div class="bg">
<!-- Put the PHP script here -->
</div>
</body>
</html>

The site's syntax highlighting couldn't handle the PHP code embedded in the HTML, so I decided to separate them instead.

<?php
$chars = '\'"+!%/=(),.-?:_$\|<>#&@{}[]';

for ($y = 0; $y < 32; ++$y) {
  for ($x = 0; $x < 32; ++$x) {
    $p = round(20 + perlin($x*0.25, $y*0.25) * 80, 2);
    print('<div class="char" style="filter: opacity(' . $p . '%);">');
    print(htmlspecialchars($chars[mt_rand(0, strlen($chars) - 1)]));
    print('</div>');
  }
}
?>

I left the PHP implementation of the perlin() function to an AI. It worked okay, but sometimes it returned negative values, even though the result was supposed to be between 0 and 1.

The header image

I had the new tagline in mind for quite a while. I liked the little wordplay between terminal velocity and the velocity of the terminal emulator. That pretty much set the direction I wanted to go in. Something reminiscent of a terminal, something related to speed, and of course, it had to include lime.

An AI provided the base image with the lime slices and bubbles. I usually hunt for free stock photos, but this time I couldn't find anything that inspired me.

I added some CRT scanlines, which may give it a bit of a terminal feel. The tagline itself is styled like a root terminal prompt, with a cursor at the end (# terminal velocity_). The horizontal glitch lines are there not just for visual interest, they might also convey a sense of motion or speed. But I won't go too deep into art analysis. :)

I used Krita to create the image. Even with my rusty Photoshop skills, it felt somewhat familiar. It didn't feel as alien as GIMP usually does to me.

And the rest

The rest hasn't really changed. I'm mostly satisfied with the layout of the text, the font sizes, and the colors. Minor tweaks between versions usually happen in this area. A little padding fix here, a slight font size tweak there, or the development of dark mode.

The blog engine hasn't changed much either. The HTML for the site is still generated by my homemade static site generator. Maybe the only noteworthy change is that I switched the syntax highlighting from client-side to server-side, so the page no longer relies on JavaScript to function.

So, that's about it. Enjoy reading for the next 20 years as well!

deadlime