This websiteThis websiteThis website

This is my personal website!! It’s a static website generated by the SSG Astro and hosted on Vercel’s generous free tier. I use it to publish projects, photographs, mathematical notes, and anything else I want to share with people.

Design

Headings are set in Jersey 10 and IBM Plex Serif, body text is set in IBM Plex Sans, and monospace text is set in IBM Plex Mono.

• Accent#2a5aab#96b9f1
• Soft accent#e5efff#28364d
• Text#262626#e6e6e6
• Muted text#585858#ababab
• Background#ffffff#181818

The tiled background is a small GLSL shader running on WebGL2. Each tile pulses at its own pace, and your cursor leaves a fading trail behind it. It stops drawing when it’s offscreen and holds still if you prefer reduced motion.

How it works

Now, it’s time to discuss some features (in alphabetical order)!

Accessibility

My website aims to be WCAG AAA-compliant. To check for accessibility, I use a complex combination of axe-core, Pa11y, HTML Codesniffer, and custom integration tests using Puppeteer.

One surprising factor that affects accessibility are the colors used for Syntax Highlighting! I use the Modus Operandi and Modus Vivandi themes, which are extremely high contrast¹.

Diagrams and math

I wrote a small rehype plugin which renders Mermaid diagrams to SVG with Pele during the build and embeds them into my website, and use KaTeX in a configuration which pre-builds LaTeX formulae and emits MathML during website generation; this allows me to serve diagrams and equations to the website viewer without Javascript!

Open Graph images

The Opengraph standard allows for the creation of a “social preview” for each page in a website. This is pretty annoying to do by hand, so I use Satori to generate these images from the title, description, and date of a page. Thanks to Kian for the inspiration!

Each card’s background is a still frame of the same tiled shader, computed during the build. It’s seeded by the page’s URL, so every page gets its own pattern and trail, and they stay the same from one build to the next. As an example, the Open Graph image for this page is:

Remote files & Caching

I implement a system which can locally copy remote files to be part of the final website; during the build, the site downloads files and saves them to a local /files/ URL. I also implemented caching and some name disambiguation to make this faster.

Typst documents

I write my résumé and course notes in Typst. I don’t want these documents to drift significantly from the one on my website, so I just use my website repo as my source for typst files and have the website auto-build them during the Astro website’s build step. To do this, I created a Remark plugin that looks for links to files of the form

:file[...](./abc.typ)

and then using typst.ts and some simple regex substitution of packages to ensure that all .typ files in my repository are ready to be viewed by anyone!