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.
STACK
Tool | Version |
---|---|
Git | 2.38.1.windows.1 |
Hugo | v0.136.5 |
KaTeX | v0.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.
VISUAL DESIGN ELEMENTS
Typography
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
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.
ACKNOWLEDGEMENTS
This site uses the following open-source fonts:
- Arbutus Slab by Karolina Lach
- Roboto Mono by Christian Robertson