A few weeks ago I decided to try approaching updating my site with a "release" oriented mindset. This meant picking a set of tasks I would do, and putting everything else on the backlog until these tasks were done.

What does a "release" look like"

I created a markdown file with the following headings: Goals, Brainstorm, Inspiration, Tasks. Then I filled in the first three respective sections, then proceeded to turn that into actionable tasks.

My goal for this release — 0.0.1 — was the following:

  • bring a bit more life / be less serious / make the home page more personal
  • remove reliance on daisyui, and fix darkmode once and for all.
  • research typefaces that are unique.
  • make subscription easier (better success state)

Let’s walk through some of the changes.

A lively home banner

Last week I purchased the recently released Procreate Dreams app. I don’t have much intention to do animation work, but I figured it would be fun. For a test, I started to brainstorm some subtle animations that could work as a background for the landing page image.

My first Ideas was a sort of frame consisting of drawn plants that would slowly rotate and move as if the wind was passing through them. I set to it and learned a bit about procreate dreams along the way. The learning curve was both simple yet complex (compared to plain ol’ procreate). Dreams is more complicated by nature of having a timeline, and finding where you are on that timeline alone can be a bit finicky.

Thinking in animation is very foreign to me, and it takes skill to imagine and execute a scene, no matter how simple. you need to think on varying axis - from static to dynamic, beginning to end, inconsistent to consistency with frames.

I quickly gave up on trying to do frame by frame animation - it would take both too long, and was far too jumpy. Instead, I used keyframing to start warping and transforming the drawings of plants I did.

My first clumsy attempt
My first clumsy attempt

I didn’t get very far before tabling this idea — mostly I got frustrated and a bit overwhelmed in Dreams — before long I had a whole mess of layers and struggled to find my way through the app.

I moved onto another animation, and lowered my expectations quite a bit. I made a simple farmhouse in a field, and animated smoke coming out of the chimney and a gust of wind going passing by overhead. The animation runs far too quickly, but I’ll take it. Overall, it’s my own special fun attempt at something new and challenging.

In order to get the animation onto the site, I tossed a <video> tag onto home page and nested it in a relatively positioned parent element, taking up the full width and height of the screen. I couldn’t get Dreams to export transparent video, so I exported all the png’s (a 15 seconds animation turned out to be some 300mb) and then converted them with ffmpeg into a webm file with this command:

ffmpeg -framerate 30 -pattern_type glob -i '*.png' -c:v libvpx-vp9 -b:v 0 -crf 41 -pix_fmt yuva420p output.webm

I intentionally used a dark grey while drawing so that the background image could work in dark mode or light mode — and having webm as a format for the video means that the transparency is respected. I definitely want to play around with other video/animation ideas now seeing that this worked. And the file size is only 500~kb.

Dark/Light mode side by side.
Dark/Light mode side by side.

Putting a full-width image or video on a webpage is sort of a dicey thing. It’s difficult navigating what to do with the media when on various screen sizes. I decided to axe the background video when on mobile, as well as at extreme browser widths.

But, I kind of like it, especially compared to how things used to be.

A fun avatar

Next, I wanted to try making an avatar. The easy path would be just picking a photo of myself, but for various reasons I feel like trying an avatar of some kind would be more fun. I was about to set out to draw myself in some capacity (more good practice for me), when I thought it would be fun to draw various incarnations of myself instead. Me as a bike, a cloud, a toad, a kite, etc. I could do all of the above and more, and load one of them randomly when the page loads. I could make it so that when you hover over the avatar, it changes slightly! There is so much fun to be had on the web; I feel like I’m learning to program again. The joy of websites.

So, I had a lot of ideas, a few too many, really. I decided it would be enough to just make one avatar and see how excited I would be by the idea after some time had passed.

This reminds me of a cute little pin I have lying around which is very similar. I’m looking forward to coming back to this idea.

Hand-written headings

I’d like to spend more time immersing myself in the world of typography. While I can appreciate good font selection and typographic design, it does not come easy to me. In the coming months and years, I’d like to slowly absorb what makes for unique and strong design via typography, but I think it will be a passive absorption. Until I have a stronger understanding of typography, I’m fine to choose recommended fonts or just … do something new.

With the intention of trying to make my site more personal, I thought I’d try doing some hand-written headings for the sections Recent Writings, Select Essays, and Explore Topics.

This hand written idea is not something I would normally do, partly because I don’t find my handwriting particularly appealing (typographically) and because it seemed like it might be inaccessible. But I think with alt-tags attached to the images, it wouldn’t be the worst. Let’s see how that looks.

A scrappy lowres set of titles
A scrappy lowres set of titles

Fun. Generally speaking, this kind of design on the web is about 20 years out of date? People generally don’t use images of text. It’s unresponsive, and doesn’t scale well with high-resolution screens unless you explicitly account for that. But I don’t really care, It’s nice to integrate hand written things with digital typography.

Would I do this process again?

To step back from the actual content changes, I found that working in a "release" model (as I would at work as a software developer) on a hobby project to be satisfying. I was able to feel like I’m making marked improvements and progress. Further, if I tag the releases, I’ll be able to go back in git history and see the scope of how things have changed at significant milestones on this site.

It can be absolutely soul sucking to think about applying processes at work to your hobbies — but it might help. I think I’ll write a post about that over in the general store. Keep your eyes peeled.

Meanwhile, I'm already thinking forward to how I can bring more whimsy into the design for this site. For too long everything has been shades of black and white. I'd like to explore colour and illustration to make this site a little lighter, playful and energetic.