A First Draft

There are a TON of blog websites out there. Some are awesome, some are unassuming. Some are simple, others are extremely intricate. I knew I did not want to reinvent the wheel, I just wanted to build something battle tested but add my own creativity on top of it.

First thing I did was recon. I went to some of my favorite design engineer websites and took a look at their blogs. Some of the names I looked into were Rauno, Emil, Jakub, Nanda, Paco, Maxime, Raphael Salaja, etc. I noticed they all shared a common 3 column layout. Quickly this made sense, Having it set this way ensures not only that content is always at the center of the show, but it is also extremely easy to make responsive and looks clean. I knew I wanted my website to look effortlessly easy, so I went with it, even though I want to admit I did iterate on a couple different approaches but realized that the 3 column layout was the best way to go.

The look I knew I wanted to go for was clean but also utilitarian. Additionally, I had this idea in mind where I wanted to generate this "editorial" feeling.

this does not need to be all design, can even touch on the voice I am trying to achieve in this blog and how I plan to write it

Editorial, minimal, clean, easy to read, good UX. Notebook, handwritten notes, active learning, interesting - With a huge caveat, I am not great at writing.

The use of em dashes is a stylistic choice, but I promise you I did not write this whole thing with AI (hehe). I will also be using bold and itallic text.

I usually ramble too much, so I will also be trying to keep it to the point and have different parts.

Based on research from this article

In terms of typography, I need to admit that it's not my strong suit, but I did want to exercise my design skills and go with fonts that I do not commonly see, meaning I knew I did not want to use the same fonts as my inspirations. I did know I wanted a serif font for the title, while keeping it sans serif for the body.

When I first saw Instrument Serif I fell in love. I immediately knew I wanted to use it, but that's when the realization hit me, Maxime's website uses the same font for its headings, so that was a bummer. I did want to keep this big condensed serif font, so I had to look for alternatives, that's when I came across Libre Caslon Condensed.

With the heading font down, I needed to pick a font for the rest of the website. For this, I knew a couple of things besides not wanting to copy the font from other websites. I did not want to use Inter, since 99.37824691% of people uses it. I did however, need something that was extremely legible and easy to glance at. I tried several font families, Work Sans, BDO Grotesk, Source Sans 3, etc, but eventually landed on Manrope. I thought it was a great balance of being easy to read, but also having a bit of personality. Besides, I thought that its width contrasted nicely with the condensed serif headings.

I've been slowly transitioning from all dark-mode to an ice color pallete preference for some reason. This is why Emil's blog resonated so much with me. That being said, since the other inspirations for this blog were: Editorial, notebook, handwritten, I wanted to simulate a blank notebook. I went with a kind of stone-ish pallete, with the selection/highlight text being a nice blue/purple that is close to a stabilo highlighter I have at my desk (hehe).

I also wanted to add some sort of texture, like a paper grain, or something that would make it feel more tactile and personal and would add character.

I was super inspired by maxime's sticky navigation. I liked the looks — even though I knew the design language was different to what I was going for. That said, I had noticed a

Talk about the table of contents. Talk about the issue I initially had where I was using an interpolated intersection observer. How I then simplified the approach with a fixed line. How I wanted to make it better, and created the animated line on the left that shows the titles in the viewport. How I also added the heading highlight when clicked to point the reader to the exact title they clicked on. I started by showing headings that were in the screen only, but realized that if there were no headings on screen due to a long section, i had no active heading on the toc and that looked unintuitive, so I had to start tracking the whole heading Since I decided to show h2/3 and 4, I realized some longer issues would clutter the ToC quickly, so I had to set a maximum heihgt, but with that came the obvious issue, the ToC would scroll. Now, allowing the user to freely scroll is prbably a bad idea, because if they scroll all the way to bottom on toc, and then article is in beginning, they will not be able to see active headings, so I knew the toc scroll position and article scroll position needed to be somehow related

I initially created a donut-like circle like the one Maxime has also inspired by the SVG Animations course by Nanda, and placed it next to the Table of Contents header. It looked nice and animated nicely as well, but then I realized that it was not conveying any extra information since the table of contents animated line was already telling the user how far they are within the article. So even though it was fun building it, I had to scrap it because it would just clutter the UI with no tangible benefits.

Check if progress circle is necessary, given the fact that with the animated line, it is already clear wehere the reader is within the article.

This section is all about the svg overlays. Create custom mdx tag, get bounding box of text, place the svg, offset if necessary, animate it. Go over some of the struggles I went through when thinking about the takeaways feature.

Now I wonder if I should get an iPad and the Pencil to make them nicer, but we'll see.

I also added a shadow to allow users to visually see there's more content in that direction. I decided to add this since ToC is collapsible and I needed to provide that user feedback at all circumstances.

Talk about the fun parts of creating these components, no need to mention them all, just go over valuable insights. The components created are: Image / Video, Code (Inline and Block), Link, Lists, Embeds, Quote, Subscribe, Buttons, Footnotes (resources). Image component, center stage (overlay), issue with z index, positioning (centering on screen no matter y posiition) Code components and variations

• SVG animations (copy url, copy code, clock detail)
• metadata section (layout animation)
• Josh W Comeau blog was helpful Heart in his website. &

There are so many things I want to do, my issue is usually cutting down on the scope, not being able to come up with stuff. At the same time I do not want to clutter the UI since that is the antithesis of what I am going for.

Mobile version lacks a lot of these features. Particularly the svg placement becomes extremely tricky, but I'll eventually find an alternative to convey the same information, perhaps I can generate the highlighting effect without the ornamental SVGs which are all absolutely positioned.

One thing I thougth it was cool, even though it has not major value is adding website preview in a tooltip when hovering over an external link, like a window to the website.

Expect improvements here and there.

Names I need to explicitly name since I took a lot of inspiration from: Dan Hollick, Josh Comeau, Maxime, Paco, Jakub, Emil, Nanda, Rauno. Link to their socials/blog website when named first time.

Dan hollick / Rauno: section preview / word lookup (respectively)