I’ve rehauled this website from a simple placeholder to a portfolio site with a blog. This won’t be a traditional blog with long or even coherent posts. I’m going to write small posts about any curiosity I come across, whether a new tool or dataset. I’ll publish some things in a partial state, and I hope to continuously improve them.

If you have feedback, please email me at alex [at] this domain. Here’s a question: Do you prefer inline links or formal citations?

How it’s made

In the past I’ve used Pandoc, Eleventy, Gatsby, and NextJS to build these kinds of sites. I like Eleventy because it’s simple, fast, and has Collections built-in.

But this time I wanted to use React, so I can add interactive stuff later, and because I love Chakra UI, so I filtered this list of SSGs by that constraint, but didn’t find anything particularly great. I tried Next but was disappointed with 5-20 second “fast refreshes,” so I switched to Vite with vike. I’m pretty happy with it so far. I got rid of the two client-side components I was using, react-browser-frame and react-goodreads-shelf, and now everything is pre-rendered into plain HTML.

I looked into islands architecture libraries like iles or Tropical, and can imagine using them in the future to cut down on bundle sizes. But for now, I’m happy with the simplicity of this site. (Though I’ve realized Chakra UI CSS variables I’m not using are a sizeable portion of each HTML page now.)

For the books page, I switched from Goodreads, which deprecated their API, to Literal a nice sleek app that has an API and is actively working on new feature requests.

For the blog page, I’m using a bunch of unified plugins like this:

const pipeline = unified()
    .use(markdown)
    .use(remarkGfm)
    .use(remark2rehype)
    .use(rehypeCitation, {bibliography: data.bibliography, csl: "https://www.zotero.org/styles/chicago-note-bibliography"})
    .use(rehypeSlug)
    .use(rehypeAutolinkHeadings)
    .use(stringify);