I made this website using Next.js and React combined with Biome.js for code quality and formatting which I think is very important. As a developer I wrote all the content in simple markdown files, because the syntax is pretty familiar to me and it looks amazing everywhere throught the site Thanks to Remark and Rehype Plugins which I have used.

The Homepage shows a preview of a few Articles and Poems written by me, at the Center and Right respectively.

The Articles page is simple clean text on a white background centered for reading easily. It handles all the basic markdown you’d expect like: Headings (from H1 to H6), Bold, Italics, Bold-Italics, and Blockquotes. It also supports GitHub Flavored Markdown (GFM) for things like Tables and Tasklists which are very useful.

To fix the age-old problem of copying HTML tables and having the data turn into a raw messy dump of unicode, I built a custom JavaScript Table To CSV Copier Extension which is installed right into this site. If you highlight a table and hit copy, it converts it into clean CSV format, so you can paste it into Excel or Notepad without any problem. This was inspired by KaTex library’s official copy-tex extension. No buttons or extra tools are required at all, because it works in the simplest way anyone would expect.

But what makes it special, is that the site supports KaTeX for rendering mathematical equations (Which you can copy without losing the syntax too). The codeblocks have amazing syntax highlighting using my personal favorite Tokyo-Night theme. Tables and blockquotes nicely “bleed” past the main text area instead of feeling cramped at the center.
Below each Article is a Share option by which you can share that Article on social media. Make sure to use the Share option for any Article or Poem you liked, have some critiques, wanna chat about it with a friend, reference it somewhere or just hated it and want others to know the “Why” behind it, perhaps the “What” you liked or hated I guess. You can also share a specific section from an Article by hovering on its heading and using the anchor link.

Here, you will find long form expressions and explanations of what I learn.

The Poems page uses what I call a “Warm Editorial Style” aesthetic that has an unbleached crisped cream paper background with dark charcoal like serif typography for a literary vibe.
On desktop screens, you’ll see that cream background with double-pane parchments containing the Cover Artwork image on the left and the poem’s title, text and information on the Right like when I started writing that Poem or when I completed writing that Poem with date and time, sometimes paried with a Song which I find suitable with its vibe.
On mobile screens, you’ll see the Cover image is in the background behind the poem’s parchment and will transition slowly as you’ll scroll it down to the next Poem, which is called Parallax Effect as I know. On hovering over or clicking My Name signature below the Poem, you’ll see the Share option (And now you know what to do).

Here, you will find my emotions expressed in words.

The Quotes page shares a similar style but it uniquely has 8 different, layout designs; like Sine Waves, Overlapping Circles, and Morphic Overlays and more... It uses SVG geometry for this. The font size adjusts itself based on the length of the quote, so you can read it without being overwhelmed. If a quote has additional context, then it gets a label (Like “CITATION” or “REFERENCE”); if it does not have it, then the UI remains as is without generating that extra stuff around the quote.

Here, you’ll find my remarkably remembrable compressed mental models from what I learned.

I really wanted this site to be as Ineffable as much as it is Readable. It does not use any databases, because everything is just simple markdown files read directly from the filesystem, which makes it super-fast and statically generated. I used Zod for data validation, so that if I ever mess up a YAML frontmatter field while writing any Article or Poem or Quote, the site handles it properly.

There’s also a self-organizing system with a dedicated Tag Page that groups and sorts my articles based on the topics using the tag list I provided in the frontmatter. Even the global metadata for the site (Like the footer copyright, social links, email ID, profile picture, etc. you see) are controlled by this very About Page’s markdown file! The YAML frontmatter of this file is the Global Config, if any value like the name suppose is missed anywhere on a post, then it fallbacks to the global values and uses it.

Ultimately, I poured so much effort into this because, to me, Code Quality matters a lot. I built this so that the Responsibilities of every file or folder are instantly obvious, without any abstractions or ambiguity. Because I think this way I’ll be able to open the codebase of my site decades from now and still understand “How exactly it works” within thirty seconds, or perhaps a minute or two...

NOTE: I’m planning to change this entire system of markdown files to a WYSIWYG system, because currently the markdown system takes a lot of time plus it requires visual comparision. Although the syntax will remain Markdown, the way I’ll write would be changed (At least for the articles page).