Above-the-fold and journal entries

Improved the home page by adding the above-the-fold dino image I generated in the last project session. Also listed the journal entries below that on the home page. Previously you had to click into a project to see them, but I think they're more important than what project they belong to.

Aug 31, 2024

Spent the last couple of hours improving the home page. This is what it looked like before:

This is what it looks like now:

Above-the-fold - Dino scene

I added the dino scene I generated in the last project session using Photoshops generative fill, bringing over the same fonts I used in Figma:

  • Hanalei fill for the "Tinyrawr" text, which reminds me of dino bones and crinkle cut fries at the same time.
  • Kavoon for "Everything is magical" and the journal entry section.

The image is added as a background image to a section element, so that I could add the navigation bar, text and button on top of it. It took a long time to get this mobile responsive across all of the different breakpoints you can see in the list of device screen sizes at the top of the Webflow page.

Journal entries

Below the dino scene, I displayed all of the journal entries so far. Previously, you could only see them by clicking into a project first. The journal entries are where all the learning magic happens, so wanted to surface those over the projects on the home page.

For the dino dates, I did a similar thing to the above-the-fold image, where I created a div element, added the dino as a background image and overlaid it with a date.

I thought I'd have to upgrade to a paid Webflow plan to be able to use custom JavaScript to format the dates as just the day rather than the full date. But Webflow had a built in option for doing it which was a pleasant surprise.

1% improvements

I like this approach to building a website. I started by adding the journal entries and projects in the CMS, so I didn't have to worry about any design. Then, I added the bare minimum elements to each webpage to be able to render them.

Today, I've made the home page better than it was. It still feels a long way off to what I want it to look and feel like. I don't really like the font and would love a bunch of cool animations. BUT, I can iteratively work towards this in free time around other projects when I feel like it.

It's a frictionless, messy, fun way of doing things!