About this website

In this post I list the technologies and tools that went into building this website.

Developing the website

To develop the website, I used Gatsby and React. It is fully static and hosted on Github Pages in a private Github repo. I additionally use Google Analytics to monitor traffic.

Gatsby and React

React is a popular front-end JavaScript framework that allows you to build UI components, then reuse them flexibly in a “lego block” manner. It is also “state-based”, meaning UI components are automatically updated (e.g. by changing color) upon changes to state variables held by the component.

Gatsby is a static site builder built on top of React. This means that I do not need to write a complete HTML file for each blog post; rather, I save a Markdown file, which Gatsby converts into an HTML page with things like the navbar, footer, and styling attached.

I additionally used the following open-source libraries / frameworks, and would like to thank everyone who has contributed to them:

  • Styled Components: for managing CSS styles on a per-component basis.
  • MDX: to embed JS components within Markdown files, and to render them in HTML.
  • GraphQL: to query the website’s data, such as Markdown files and images.
  • Prism: for syntax-highlighting code blocks.
  • KaTeX: to write math equations in posts.
  • React Helmet: for Search Engine Optimization (SEO).
  • Normalize.css: for base CSS styling, ensuring that everything is displayed consistently across different browsers.
  • Yarn: to manage JS packages.

Designing the website

I used Adobe Illustrator to design the UI and choose colors for the website. My design goals were for the website to:

  1. Load fast
  2. Be comfortable to read
  3. Show personality and creativity

Typefaces

The webfonts used in this website are served from Adobe Fonts. The typefaces used are:

Comments

If you have questions or comments regarding the website, please feel free to email me, as the comment feature is currently under implementation.

Additional credits

  • Flaticon: for the Github and LinkedIn icons in the footer.