Hello, World!

Much of what you see on your screen has been built from semi-scratch to be as modular, convenient and dynamic as possible. This should allow me to hopefully write more often and reduce the friction between that first draft and the commit button. In appearance, this page is definitely more maximalist when compared to the rest of the site, whether that be the non-centred alignment or the funky-looking thing to the right if you're on desktop (I'll explain).

I'm not sure if that is a. an attempt to stand out or b. just an urge to build something slightly more sophisticated. Either way, there is always the possibility that that will change.

The website itself is built primarily using Typescript, NextJS, TailwindCSS and Firebase Admin (so access is only on the server side). I also have a really small custom CLI tool that right now has two commands: one to update the location that you see on the entry-point route and another to add microblog entries visible on the /writing route.

All of the code is open source, so you can find the entire repository with the source code for the website and also the CLI tool.

In what follows, I outline some of what was used to build much of my website, focusing specifically on the writing section. I've relied primarily on @mdxjs alongside a collection of growing custom components, that I would like to quickly demonstrate down below.

Blog Components

Since, these are all markdown files there is support for the standard <h1> through <h6> heading structure (like seen above), italics, bolding and more right out of the box.

After the image, there's this way for me to leave side-notes [@1], in case I need to add additional detail that isn't directly relevant to what I'm talking about. I can also cite other more extensive sources like this ¹ so that you can click on them and be taken to the bottom of this page with more details about why I said what I said. There are also ways for me to cite some interesting resources in-text like this cool paper for example.

Attention is all you need | Ashish Vaswani, Noam Shazeer, Niki Parmar, Jakob Uszkoreit, Llion Jones, Aidan N. Gomez, Lukasz Kaiser, Illia Polosukhin

Alternatively, if I'm feeling oddly philosophical or find myself in need of some expert "ethos" to make my argument stand out, I can choose to simply include a quote using the > character followed by what I want to say as shown below.

Or if I feel like laying out a series of simple bullet points I can do that too,

• this is exhibit a
• this would be exhibit b

There is support for LaTeX math, meaning this would be the Pythagorean theorem: $a^2 + b^2 = c^2$, #quickmaths and there is also support for syntax highlighting and neat code snippets like the one shown below:

 
Copyimport ImageComp from "@/components/blog/standard/ImageComp";
import InTextCitationComp from "@/components/blog/standard/InTextCitationComp";
import SideCitationComp from "@/components/blog/standard/SideCitationComp";
import SideNoteComp from "@/components/blog/standard/SideNoteComp";

import { passenger } from "./fonts";

const MarkdownComponents = {
  h1: (props: any) => (
 <h1 className=" my-6 text-4xl md:text-5xl dark:text-a-white" {...props} />
 ),
  h2: (props: any) => (
 <h2 className=" my-5 text-3xl md:text-4xl dark:text-a-white" {...props} />
 ),
  h3: (props: any) => (
 <h3 className=" my-4 text-2xl md:text-3xl dark:text-a-white" {...props} />
 ),
  h4: (props: any) => (
 <h4 className=" my-3 text-xl md:text-2xl dark:text-a-white" {...props} />
 ),
  h5: (props: any) => (
 <h5 className=" my-2 text-lg md:text-xl dark:text-a-white" {...props} />
 ),
  h6: (props: any) => (
 <h6 className=" my-2 text-base md:text-lg dark:text-a-white" {...props} />
 )

That code snippet above is from my MarkdownComponents.tsx file which lists a much larger range of the custom components for the blogging section that I've already displayed. Lastly, for some reason, I did decide to add some attempt towards world generation towards the right end of the screen with this desert-like environment (shouldn't be visible on mobile).

To briefly summarize, a height tracker component is passed all of the content retrieved using compileMDX() alongside the title of the blog post. The height tracker then calculates the total height in px along which the desert can be painted (limited to the content area), done using the requestAnimationFrame() function and debouncing over 100ms to prevent excessive calculations, when there are changes in viewport height.

Deserts are then generated using the title of the blog as the key to creating a hash (using the FNV hash function) and a set of pre-defined probabilities for each of the components. Two different deserts are generated to account for the different components in light mode and dark mode (toggle on the upper right-hand corner to see a different desert!).

I'll likely be monitoring performance and trying to make improvements to make sure this isn't impeding loading times for the actual page. Also, this is all recalled from frankly vague memory because the code for this was written 5 months ago so I apologize. If anyone is actually reading this and is interested in a better explanation, please let me know! The code is available regardless so you can just have a look for yourself!

To conclude...

Anyways, that is pretty much it. I hope you had fun reading whatever that was. I'll try to actually use this section of my website that I spent so much time on and actually write something that has been well-thought-out. If you're experiencing bugs or have any other feedback, please please let me know 🙏 Have a great rest of your day!

[1] Garapati, Akshith. “Random Citation Source Article woah” Akshith Garapati , May 23, 2025.