Table of Contents

About this website

A short look into how Claude helped me rejuvenate this dead website.
  Published on · Last Updated on

Claude Claude helped write this page.

What is this about?#

Hugo to Astro#

During my time at CMI, building personal portfolio websites was all the craze amongst then first year students. Taking inspiration from one of my classmates, I got around to making a website for myself in Hugo. This was in 2022. Not being a web dev by training meant I was stuck in a labyrinth of terminologies, frameworks, concepts, and programming languages that were completely alien to me. Stackoverflow and github issues were all that I had. Pressure of coursework meant I did not have enough time to invest on learning them or fixing issues. Eventually, in May 2023, I ended up archiving my old website.

In December 2023, I started work on this website. The internet is full of posts of people migrating from Hugo to Astro. So I thought, why not? A few reasons for my switch to Astro:

  • Much higher degree of customisability as offered by Hugo; one of the primary roadblocks I faced with Hugo was adding styles and modifying the content rendered by the markdown files. Using layouts in Astro and typography in tailwind greatly simplifies that.
  • Documentation - The Astro docs is one of the most detailed docs I have seen till date, and contained information on about every single problem I encountered.

Building a castle under water#

ChatGPT was released around the time I started work on the new website. Like all skeptical new users, I tried leaning on it to get this website up and running. It did help, unsurprisingly. But back then, even ChatGPT had its limits. Building this website was akin to building a castle underwater, the lack of knowledge simply dissolving all progress instantly.

Eventually, I gave up trying to maintain it. After graduation, proessional engagements demanded 100% of my time, hence I never really got around to rebuilding my site.

2026 and the age of coding agents#

Then 2026 rolled around and the age of the Claude Codes and the Codexes and the Pis and the OpenCodes were upon us. These agents bestowed great power upon us and with this great power, I had to take the great responsibility of fixing this website.

Hence, there I went and dumped $20 into a Claude Code subscription, and boy was I blown away. Claude is like that hyperactive, overenthusiastic and highly skilled junior dev who has not slept in a year. I let it loose on this repo and it did godforsaken things I could not comprehend for the love of my life. But here we are. The site is alive again, with broken stylesheets, animations, transitions all fixed and things looking coherent and the code even more alien.

I will let Claude write a short technical treatise on the architecture of this page below (note the em-dashes). From this point onward, each page will have an AI use disclaimer at the top of the page.

Architecture#

Integrations#

The site uses three Astro integrations:

  • @astrojs/mdx — lets pages mix Markdown with components.
  • @astrojs/sitemap — builds sitemap.xml at build time.
  • @astrojs/partytown — moves the Google Analytics script to a web worker. This keeps the main thread free of the analytics script.

Plugins#

The Markdown pipeline uses one remark plugin and five rehype plugins:

  • remark-math — finds math syntax in Markdown.
  • rehype-slug — adds an ID to each heading.
  • rehype-autolink-headings — adds a link icon after each heading, except h1.
  • rehype-katex — renders the math syntax as KaTeX output.
  • rehype-expressive-code — renders code blocks with syntax highlighting and a custom language-badge plugin.
  • rehype-external-links — opens external links in a new tab.

Frameworks and libraries#

  • Astro 7 — renders the site as static HTML at build time.
  • Markdown and MDX — author the content.
  • Tailwind CSS 4, through the @tailwindcss/vite plugin — provides the utility classes.
  • Catppuccin Mocha, through @catppuccin/tailwindcss — provides the color tokens.
  • KaTeX — renders math. The stylesheet and fonts are self-hosted, not loaded from a CDN.
  • Shiki, bundled inside rehype-expressive-code — renders code syntax.

Technical designs#

  • Table of contents as a tree command. The table of contents renders as the output of the Unix tree command. It clones the real heading markup into each entry, then wraps and collapses long branches at any heading depth.
  • Git-derived footer. The footer reads the current commit hash and branch name at build time, through import.meta.env.PUBLIC_GIT_HASH and PUBLIC_GIT_BRANCH. Each post footer also shows a last-edited date, read from the git history of the content file, not from frontmatter.
  • Structured data and SEO. The homepage carries WebSite and Person JSON-LD schema. Each post carries BlogPosting schema. Pages carry Open Graph and Twitter Card meta tags. An RSS feed and a sitemap.xml file list all published content.

Theming#

The site uses one color theme: Catppuccin Mocha. The site has no light mode. Tailwind 4 stores the theme tokens in src/styles/base.css, inside a @theme block. The tokens set the fonts, font sizes, and breakpoints. Two fonts render the text: Computer Modern for body text, and Victor Mono Nerd Font for code. Both fonts are self-hosted in public/fonts/; the site does not load fonts from a CDN.