Here are 3 features of this site that have been really fun to implement and might prove to be useful if you're starting out to create your own website!

Note this website is created using GatsbyJS and so some features are unique to it.

1. CUSTOMIZING MARKDOWN COMPONENTS

This website uses Gatsby's data layer to arrange and view blog posts and uses GraphiQL to explore the data in the data layer. The blog posts are written in Markdown.

With MDXProvider, "you can replace every HTML element that Markdown renders with a custom implementation."

It's not mentioned in the GatsbyJS starter tutorial, but talked about here. There's also a list of components that can be customized.

In the blog posts, you can see the bold text is coloured randomly; the anchor links appear in orange instead of the default purple; and code blocks (take a look at the one below) have been customized with a grey background colour and a certain padding.

This was possible using the components property of MDXProvider.

E.g.-

<MDXProvider
  components={{
    a: (props) => <a {...props} style={{ color: "orange" }} />,
    code: (props) => ...,
    ...
  }}
>
  <MDXRenderer>...</MDXRenderer>
</MDXProvider>

2. DARK MODE TOGGLE

The dark mode toggle (button on top left) implementation is on Medium and is also referenced in my blog post "Setting Up Dark Mode".

Once done with the basic set up, there's really no limit to how you can customize the look of the website in light vs dark mode!

Next steps - add animation to the dark mode toggle.

3. BLOG CARD

Initially I had a blog list instead of displaying cards. This was very limiting, in terms of what I could display (only the title) and didn't look that great.

With the cards, there's a colour element to it which definitely adds an appeal and chance for customization. I've also displayed the date the blog was posted and a one-liner summary giving more information to the reader at a glance.

The BlogCard itself was easy to implement using the Card MaterialUI component; what took a while was the styling in a grid layout and making it responsive.

Hope this helps and thank you for reading!

The code for my site can be found on GitHub.