How I Built This Site

This is my second time rewriting my personal site. My first attempt took an exorbitant amount of time and lacked in feeling; this second time went far faster and looks far better than I initially intended. This new site is a reflection of my values and my evolved digital taste profile as a developer and aspiring designer.

I took to many different blogs for inspiration in the process of the redesign. Some of my favourites include kepano, eugeneyan, and maximeheckel. Each of these sites served a different purpose; Eugene’s was technical writing, Maxime’s served to showcase his abilities with ThreeJS and WebGL, whilst Kepano’s was a digital garden, a reflection of his mind. Some other honourable mentions:

• Crafting Interpreters by Robert Nystrom
• Openbook, my digital book project
• 37 Signals Libary, built on Writebook
• Guillermo Rauch
• Hussam Zaghal
• Some Considerations about the Future of Reading
• Practical Typography

The above gave me a flavour of what I wanted to build; something functional, simple, elegant. Coupled with my experience building openbook, I decided I would build a site that felt like you were reading a book, with a highly regimented, utilitarian aesthetic.

Technical Overview

This site is built on AstroJS and no other framework dependencies. You can view the source code here.

As AI tooling progresses further, the average developer is ever eager to build on abstractions to expedite the software development process. The result is a proliferation of websites running on Shadcn components, TailwindCSS, and NextJS (guilty!). Although the efficiency gains are real, the consolidation of certain standards will result in an inevitable lack of differentiation between modern websites. The result is a lack of taste, for lack of a better term.

I wanted this site to move in the opposite direction. Instead of relying on pre-styled components, tailwind, and other abstractions, I wanted to build everything from scratch. What if there was no layer between what I wanted to build and what I had write code for? What would the website look like? What would it feel like? As I began the development process with this in mind, I found that every pixel on the screen suddenly became more intentional. If I had to write a <p> tag, it meant thinking of css classes, global styles, manually writing @media queries, and other additional properties that us developers usually take for granted. The outcome is something that feels deeply personal to me; a site that represents my current state in my evolution as a developer.

Design Inspiration

Some of you may know that I completed my undergraduate studies in Germany. During this time I was exposed to Berlin’s various inspired architectures, from Bauhaus to Brutalism. One of the main buildings I marvelled at whenever I perused the city was the Marie-Elisabeth-Lüders-Haus, just within view of the Reichstag.

Inspired by my time in Germany, the design of this site is largely utilitarian and brutalist at it’s core, following clear grid patterns and mathematical spacing guidelines. The idea was that a highly structured and regimented layout gives me more room to play with chaotic elements and visual artifacts in my writing. With a more structured layout, adding 3D models or chaotic visual elements helps create visual interest.

The Future

The ultimate aim is to have a designated space for learning in public (see: Big L Notation) and to write in a way that isn’t possible on Substack. I’d love to bring 3D scenes into my writing, interactive components, and social reading to create a special space for my writing and fellow readers. If this sounds exciting to you, please subscribe to my newsletter down below!