Building My Website (5): About Me and Reading List enhancements

A few minor updates since my last post. The first was adding a tagline onto the homepage:

What’s an appropriate tagline? How about… “Making products that people enjoy using”

Taglines in general can range from overly grand and hubristic to just plain cheesy. To explain where I was coming from, I decided to expand on it in the About Me section of the homepage below:

I spent a lot of time changing the original template from 2 columns to 1 column with multiple paragraphs. The idea was to try to explain 1) the tagline, 2) the purpose of building this website and 3) what I wanted people (including myself) to get out of it.

This ended up as multiple large blocks of text, which didn’t look great, I decided to go back to the tidier 2 column look. There is a large section for this type of text on the About page of the template so I can use that to expand into more detail later. There is a “More About Me” link in the template that I can use to link from the homepage About section to the full about page.

I also spent a lot of time tinkering with the look of the Reading List page. I wasn’t happy with the look and feel of the previous version so I went looking at some of the examples than inspired me to create such a page in the first place. The one that I found most useful was the reading list page at MarkManson.net:

The things that I took straight away were the colours of the section headers and links, as well as the link decoration on hover.

The most difficult part was copying the slanted edge of the section header. The HTML and CSS from the original page shows that it used an ::after pseudo-selector to add the slant. I wasn’t able to add this in Webflow in a straightforward way, so I instead went with a change to the border radius to curve the corners:

I also toyed with adjusting the width of the content on the page to match what was used on MarkManson.net. Since I don’t have much content yet it looked quite empty, so I returned it to the original width.

There’s still more to tweak on that page, but I’m much happier with it now, and feel freer to start adding sections or even using a similar layout on a Training/Certifications page.

That page would ideally go under the About page so I might have a look at either that or the Blog provided by the template next.

‍