Website Renovations

Tools & Resources

Four or five months ago I decided that I was getting bored of my portfolio website, so, I tore it all down and rebuilt it from scratch. Here's a little showcase of the stuff I made for this project! I'll start with the flashy stuff first, but after that it'll get a bit more technical and arcane.

Art

One of the first things I decided with this "renovation project" was to give every page unique banner art — you know, to set the scene; adorn the page with some ambiance.

Of the six banners I made myself, these are the ones I am proudest of:

For my post on fantasy races. One of the things I wanted to do in the post was talk about all the little, minor, aesthetic details of fantasy races, and how they're often kind of superfluous, but also very fun. I had to cut it, though.

Fantasy Race – June 2023

For my very first short story. I think I was imagining this very image when I first wrote it.

The Golden Herons – April 2022

For another short story. Probably the most involved of my banners — I really liked doing all the layers and stuff, but you'll notice I butchered the perspective on the shrine. Oops!

First Lesson – October 2022

You'll also notice that all the banners have a parallax effect when you scroll! It took way too long to get that working.

Splash Text

Now, if you go to the main page of the site, you'll notice there's a little line of extraneous text below the title.

You may also notice that it changes whenever you refresh! The different messages are mainly corny references or quotes. I got the idea from back when I used to use put different quotes in my social media bios each month.

I do vaguely worry about what kind of first impression an unlucky message might leave on someone's first visit, though.

Postboxes

Another thing that was really important to me with this "renovation" project was to improve the archives page — I didn't want to greet people with a vague list of cryptic post titles: I wanted descriptions, and tags, and thumbnails, and so I hacked together some javascript and got this:

January 1999 | Tools & Resources | Example

Example

An example page. For example purposes!

(There's a box for each post on the archives page, hence the name!)

Tiling Backgrounds

Ok so here's the part where it starts getting technical.

On every page of my website, I use a particular, parchment-style background texture. I believe I got it from Jared Ondricek's Watercolor Stains Gallery, but it's gone so through many filters and resizes that I can't identify which exact texture it originated as.

Anyway, the issue with Ondricek's texture is that it's meant for print, and is only a page long. I had to make it tileable, so I could extend it onto a web page of arbitrary length. There's plenty of smart AI tools on the internet for this, but I just wrote my own python script:

          import imageio, numpy, math

# parameters
INPUT_FILE = "input.png" # location to take the source from
OUTPUT_FILE = "output.png" # location to save the result to
BLEED = 0.5 # percent of the result that should be taken up by margin. 0-1.

def blend(c1,c2,grade):
red = int(round((c1[0] * (1 - grade)) + (c2[0] * grade)))
green = int(round((c1[1] * (1 - grade)) + (c2[1] * grade)))
blue = int(round((c1[2] * (1 - grade)) + (c2[2] * grade)))
return (red, green, blue, 255)

# load
input_image = imageio.imread(INPUT_FILE)

# create new canvas
dimensions = input_image.shape
margin = math.floor(dimensions[0] * (1 - 1/(BLEED + 1))) # number of pixels in each margin. Can be set manually if you want
output_image = numpy.zeros((dimensions[0] - margin,dimensions[1], 4), dtype=numpy.uint8)

# iterate through every pixel
for x in range(dimensions[1]):
for y in range(margin, dimensions[0] - margin):
    output_image[y - margin][x] = input_image[y][x] + (255,)

for y in range(dimensions[0] - margin, dimensions[0]):
    grade = (y - dimensions[0] + margin + 1) / (margin + 1)
    output_image[y - margin][x] = blend(input_image[y][x], input_image[y - dimensions[0] + margin][x], grade)

# save
imageio.imwrite(OUTPUT_FILE,output_image)

Basically, it designates a section on the top and bottom of the source image as a "bleed margin". These then get layered on top of eachother and blended smoothly, while the rest of the image is preserved. It's not the cleanest, but it worked for the background texture.

Floating Columns

Another thing that bugged me on the old website was how it handled columns. It was such a hack, and it used float for something that definitely shouldn't require float. Columns are hard to do on the web, so let me step you through my thought process.

How are you supposed to create columns on a webpage? Well, with the columns property of course! It does it all for you!

But here's the issue. Suppose you want to split sections of your page into columns, but such that they merge like this:

This is very difficult to do with just the columns property, and so on the old website I resorted to making each of the sections individually float to the left and right. Besides being a misuse of the float property, this also breaks down as soon as either of the two columns gets too long.

So how does my website do it now?

Well, throughout these renovations, I've been toying around with CSS flexbox. I realised I could use a flexbox with the flex-wrap property to split content over seperate columns, and then use the order property on each section to specify whether it should go to the left or the right.

The only other step is to force the flexbox to split itself over the two columns where I wanted. Unfortunately, flexbox doesn't have a built in column-break, but there is a workaround. I can have an element like so...

          .break {
    content: "";
    height: 100%;
    width: 0;
}

...which forces the flexbox to wrap. The downside is that this requires the flexbox to have a fixed height, but I don't necessarily know the height of the contents until they display. Ultimately, after exhausting all other options, I resorted to a system which sets the height using javascript:

          let leftHeight = 0;
let rightHeight = 0;
for (let child of section.children) {
    if (child.classList.contains("bind-left")) {
        leftHeight += child.offsetHeight;
    } else {
        rightHeight += child.offsetHeight;
    }
    }
    section.style.height = Math.max(leftHeight, rightHeight) + "px";
}

Which is ugly, and it's annoying that I have to use javascript for formatting, but it works. I'm too tired of CSS to try and find a better solution.

So that's it!

Only took four months, but I'm happy with it! It's part of the reason I haven't written since January, but that's also because of school. We'll see how I go for the rest of the year.