COLOPHON

A brief overview of the design choices, tools, and technologies used to build this website. This page is currently being fleshed out.

WHY THIS SITE EXISTS

I needed an e-space to curate a whole bunch of content. Fortunately, I also happened to stumble upon Hugo and decided to make the best of it by learning it and using it to create a personal site along the way.

The main features I wanted to target are a place to share my academic transcriptions, a blog, shelf, cataloging my projects, and so on.

BUILT WITH

STACK

ToolVersion
Git2.38.1.windows.1
Hugov0.136.5
KaTeXv0.16.22

TECHNOLOGY & BUILD

Core Platform: Hugo

Generated statically using Hugo. Content is managed efficiently via Markdown, with Hugo Pipes handling CSS/JS asset bundling.

Mathematics Rendering: KaTeX

Mathematical notation uses the KaTeX library for fast, high-quality client-side typesetting from LaTeX syntax.

Styling & Layout System

I learned from this fantastic book called Every Layout and tried to broadly implement a layout according to these principles.

Interactivity

Minimal JavaScript adds necessary enhancements like theme switching, dynamic table of contents, and scroll-to-top functionality.

Infrastructure

  • Version Control: Git (hosted on GitHub)
  • Deployment & Hosting: Automated via Netlify

VISUAL DESIGN ELEMENTS

Typography

Arbutus Slab
Body Text
Alphabet (Uppercase)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Alphabet (Lowercase)

abcdefghijklmnopqrstuvwxyz

Numerals

0123456789

Example

The quick brown fox jumps over the lazy dog.

Roboto Mono
Headings & Code
Alphabet (Uppercase)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Alphabet (Lowercase)

abcdefghijklmnopqrstuvwxyz

Numerals

0123456789

Example

The quick brown fox jumps over the lazy dog.

Colour Palette

This table outlines the core color palette used throughout the site. It shows the hex codes assigned to key interface roles (like text, background, accents) for each of the available themes: Light, Dark, and High Contrast.

Role Light Dark Contrast
Background
#F8F0E3
#1A1C1E
#000000
Text
#402F2F
#EDEAE6
#FFFFFF
Accent
#B46857
#F8F0E3
#FFFFFF
Muted
#756341
#B8BCC0
#CCCCCC
Border
#BCAE90
#4A4D50
#666666
Accent Hover
#A55A48
#D47A36
#CCCCCC

ACKNOWLEDGEMENTS

This site uses the following open-source fonts: