About this website

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

January 14, 2020

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:

Load fast
Be comfortable to read
Show personality and creativity

Typefaces

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

Europa: for headings.
Caecillia: for the body.
Noto Sans: for Korean text.

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.