Building this site

The goal with nds is to experiment with things I find cool or interesting. Even though this site currently has good performance, my ultimate goal is not to make a site with the trendiest designs or the perfect lighthouse scores. I initially started it to learn Gatsby. As time went on I added tech and concepts I liked.

1. Design

I designed the website in Figma. You can see it here. There are two takeaways I would like to mention from that experience.

a. Design System

Figma lets you define your design system.

I set up font size, weight, letter spacing for different levels of header and paragraph texts. I also set up primary, secondary and tertiary colors. You can then apply these properties to any thing you design within Figma. And when these styles are updated, the components that apply these styles will update to the new look as well.

This was a difficult step for me as I felt I needed to constantly tweak some looks. But the beautiful thing is, once I set up these styles and set up my design hierarchy, designing became a much more organized effort. The opposite is constantly feeling lost and making unnecessary decisions. It’s okay to have a non-perfect design system at first.

b. Variable Fonts

Fonts are used sparingly when building a website. The reasons being the website will look wonky with too many typefaces, and fonts actually have big file sizes. A Regular, Bold and Italic (each of these is a different file) styles of one typeface can take up around 500KB. This can quickly get out of hand as you try to use a couple of typefaces with different fonts.

For this site, I used one font! I’m happy with how it turned out. How did I get away with one font? Variable fonts! They are amazing! Specifically, I used Inter.

Knowing I have a variable font, it freed me to design however I wanted because it would not negatively affect my website.

2. Gatsby

Gatsby is a framework based on React. It’s feels incredibly developer friendly and helps make very fast websites. I feel comfortable writing React apps so using Gatsby was an easy transition.

3. Markdown

I use markdown to write my posts. I wanted the site to be extremely low maintenance. Markdown was very easy to learn, can be converted to HTML very easily, and I can simply care about writing once the website is up. No need to have a CMS. I might start using MDX in the future.

4. Framer Motion

Framer motion is an animation library for React. There are some pain points when animating in react. Framer motion’s API makes animating things simple and easy.

5. Styled components

Styled Components is one of the most popular ways of styling in React. I personally like how setting up themes and structuring CSS works with Styled components.