Motivation

My “online presence” and general mode of interaction with the internet for the past 20 years has been to eagerly sign-up for websites and build profiles there. Facebook, Medium, Tumblr, Goodreads, ImDB, … I was everywhere. Except over time my trust in any internet company has depleted completely. As enshittification runs its course, users can expect to be extorted and milked for their own data. The sense of contributing to a commons is gone. This distrust is more so depleted with the advent of AI models being trained on user data - whether the user likes it or not. The second motivation was inspiration. Maggie Appleton’s website full of beautiful illustrations, pleasing layouts and visual garnishes; felt very lovely, and close to her espoused goal of a “digital garden”.

I had been resisting self-hosting for years; primarily because papercuts and small errors can have you stuck. Keeping your packages updated without breaking anything is like a full time job in itself. I didn’t want the hassle.

With these two motivations and the advent of AI coding tools, I decided to make the leap and build my own website.

Requirements

• Blog / Essays section
• Cinema shelf (Exit from Imdb)
• Library (Exit from Goodreads)
• Bookmarks (Exit from Raindrop)
• Cool links section (Stop using Twitter/Mastodon for these)
• Beliefs / Values
• About

Why?

• To look cool; to advocate for cloud exit and demonstrate sovereignty
• Personal branding / Appearing cool
• Maybe meet cool people

Functional readiness

I had initially experimented with “AI website builders” like Replit and v0. They generate very boring websites with zero personality. Given the prompt driven nature of website creation in these tools; it is very hard to specify or modify architecture. I’ve been building websites for a long time and know web fundamentals enough to have an opinion on how things should function. Sadly, these tools make no provision for that. In comparison, Claude Code was breath of fresh air. I tried it because of the online buzz and because my wife already had a Claude subscription.

I modeled my website on Maggie’s and borrowed a lot of visual as well as technical design choices from her. She has even made her website code repo public but I resisted the siren call of forking and editing it.

The site uses the Astro web framework as its base. I studied Astro a bit and found it appropriate for my design goals. Other static site generators like Hugo and Gatsby are focused on text. I wanted to use APIs, include dynamic components, and generally go beyond just loading text. So Astro with its “Islands architecture” and support for modern JavaScript frameworks felt like a good balance. I then scoured heaven and earth to find an Astro theme I could build on top of, finally settling on “Astro-nano” which was very well documented, simple, and fast. After that I used Claude Code to build the site. All the technology choices after that (MDX, Tailwind CSS, TypeScript, etc.) are either inherited from the Astro-nano theme or chosen by Claude Code with occasional assistance from Github Copilot.

With Claude code at my side, I just hammered away my functional requirements.

• Movies: Took my Imdb ratings, exported them, and converted them into a local json database. Then used that database to power the movies page with movie posters sourced from TMDB. While Claude code created very simple initial pages, they were largely just long lists with a lot of unwanted design choices. It took a lot of mostly easy tweaking to refine it into Recents and Top rated sections; and then apply optimizations like client side loading of movie posters.
• Library: Took my Goodreads ratings, exported them, and converted them into a local json database. Then used that database to power the books page, with book covers sourced from Open Library. Applied the same pattern as with movies to create Recent and Top rated sections. Unlike the TMDB API for movie posters, Open Library API calls for book covers don’t get rate limited as much, so I just load them all in one go on the server side.
• Blog: This one was a bit more complicated. Claude took my initial Tumblr export and was able to reformat the content to match how Astro expects it. However, this lead to a functional but ugly and broken import. Tumblr not only has text posts but also photos, links, etc, which may not have titles; which breaks the pattern the Astro theme expects. Also the conversion to markdown didn’t happen cleanly and there was a lot of borked formatting in the final posts. Having images in the site itself made the site very large, most importantly it made it larger than the Vercel free tier. I went about chiseling away at these problems. Images were migrated to Cloudinary and are served from their API. Multiple rounds of blog content review happened to find patterns of markdown formatting errors and fix them in bulk. I also use Claude’s AI capabilities to have it insert paragraph breaks where appropriate. Alongside content formatting, I also added tags along with sections for recent, random and featured posts; to help with non-linear exploration and break away from the long reverse chronological list that Claude code initially created.

After these core functional aspects were in good shape I focused on visual design.

Design

Just for fun, I had once looked at what inspires me and created a mood board in Figma. Building on that I just created an inspiration (“inspo”) dump of website designs I like in Figma. I built a theme switcher and kept trying on different colours and layouts. Instead of choosing between them, I decided to turn a bug (indecision) into a feature (variety) by adding a theme picker to the site. The two main themes I’ve settled on are “Erudition” reflecting my love for books and knowledge; and “Solarpunk” reflecting my hope for a more optimistic pleasant future. Erudite is the current default theme, because it is more soothing. I do plan to introduce some anarchy and/or modern animated styles later.

Apart from colours, I also tweaked the layout to be more eye-grabby and visual; instead of a boring text based website you see everywhere. I also didn’t want the movie posters, books, etc. to be the first thing you see. I was heavily inspired by Kevin Kelly’s homepage and luckily had a nice shot of me looking at the sky in Rajasthan. I later added my name in a strong capitalized sans serif font to do STRONG BRANDING, like a FASHION BRAND (:D)

The favicon (and home icon) is the endless knot. I went looking for symbols associated with Hinduism and eastern spirituality; the endless knot is associated with harmony and is also nice, symmetric, and pleasing! I also added icons to every section to make the website less text heavy.

Copy

The intro copy on the homepage is meant to remind me and the reader, that all of us have multiple dimensions in our lives. We tend to make work the only part of identity. I wanted to consciously get away from that. This is not a serious website, if you read Hire Me and other sections, you will see the humour bursting forth. I feel I haven’t gone far enough in adding non-sensical, fun, and honest copy to this website. But it shall be here soon, I promise!

Another aspect is having multiple languages. Like most Indians, I speak multiple languages and understand many more. Throughout the website are sprinkled some of my favourite quotes from Bollywood movies.

The end of the absolute beginning

I was wildly surprised that I could build this website. Even hosting on Github and deploying via Vercel has been a very straightforward process. I am mighty pleased that I could fulfil a long latent desire of mine. While many improvements could be done, the results aren’t too shabby and I will joyfully keep tweaking this site for fun.