About this website

Hey, Welcome to my digital playground 🌱.

If you’re here, you’ve landed in my carefully crafted corner of the internet - a skeptic’s console - where tech, philosophy, creativity, and, yeah, a bit of obsession with clean design come together. This site is built to be something beyond a typical blog: accessible, readable, and distraction-free. It’s all about simplicity and just the right amount of design flair.

When creating this website, here’s what I aimed for: a site that’s not just visually chill but that also respects your brain. Think easy reading, good design, and zero tolerance for clutter.

Features and Design Principles

I drew inspiration from websites that prioritized readability, aiming to create a space where content takes center stage without distractions. It’s all about creating an environment where the content shines, rather than flashy designs that compete for attention. I also wanted the design to feel timeless - free from any specific design trends or a particular era, carrying an elusive, lasting appeal.

To achieve this, I opted for elegant fonts and typography, using a minimal color palette with just one primary color and one accent color, complemented by various shades of black and gray. I know this might seem different from the modern websites overflowing with flashy features and gimmicks, but I believe it can look elegant when executed thoughtfully.

• Minimalist Aesthetic with a hint of neo-brutalism.
• Progressive Enhancement: for seamless accessibility and functionality across devices.
• Elegant Details: Features like drop caps, syntax highlighting, footnotes, table of contents
• Essential and sensible Interactivity:
  • Table of Contents: Designed for easy navigation, allowing readers to jump straight to the sections that interest them most.
  • Collapsible Sections & Accordions: Allowing readers expand only what they need, keeping the experience clean and uncluttered.
  • Section Links: Easily share or reference specific sections of an article by clicking on a section heading. This generates a shareable link to that section, directly from the URL.
  • Code copy button: For code snippets, simply click the copy button to instantly copy the code to make it easy to use or test yourself.
• Dark Mode: Available for comfort in low-light settings. I’ve set this feature to automatically adapt to a visitor’s default theme preference (light or dark) based on their system or browser settings. If a preference isn’t set, then simply click this button to switch between light and dark modes –>

Epistemic labels

Content here doesn’t necessarily “expire” like in traditional blogs. It lives, changes, and sometimes needs a bit of maintenance. They broadly belong to one of the following statuses:

• Evergreen: Content that’s pretty timeless and will stay relevant.
• Budding: New, growing content that’ll expand and evolve over time.
• Aging: Still useful but could use a refresh now and then.

Tech Stack

1. Content Creation with Markdown: Think of Markdown as text files but with superpowers - such as formatting to plaintext text documents to keep things readable and structured.
2. The website theme is fully custom-built based on the design principles I had in mind, leveraging:
   • HTML5 for the structure.
   • CSS for the styling.
   • A sprinkle of JavaScript for some interactivity.
   • Prism.js for clean, colorful code snippets. It’s a JavaScript library designed to make code examples both beautiful and readable.
3. Hugo to generate web pages from content: Hugo is a static site generator. It’s a software that takes all of the raw content files and creates web pages out of them, using the HTML, CSS, and JavaScript from my custom theme. This process doesn’t just build individual pages - it also creates or updates any relevant topic, tag, and category pages that link to the new content.
4. Hosting on GitLab: All content and code for the theme live in a repository on this cloud-based version control platform. It also lets me track changes, experiment safely, and keep everything including content and code in one accessible place.
5. Deployed on Netlify: This cloud platform not only handles hosting but also automates the build process every time I make a change.

Thinking behind the tech

As a general rule, I like to ask myself whether I can achieve something using a less complex technology. It’s all about adhering to the principle of “least power”: choosing the simplest, most suitable language for a specific purpose. That’s why I opted for foundational tools like HTML5, CSS3, and minimal JavaScript over some heavy-duty web software framework — these technologies are reliable, future-proof, less fragile, easier to maintain, and just work without extra complexity. Less really is more.

When it comes to code, I wanted to lean on semantic HTML tags to provide important context for search engines. Accessible websites built with semantic HTML not only rank better in search results, but they also ensure that all users can engage with the content seamlessly. By using HTML and CSS as they were intended, the code also becomes easier to maintain in the long run.

Using a static site generator (Hugo, in this case) was very compelling for the following reasons:

• Unlike traditional application or web servers that generate pages on demand, static site generators build every page in advance. Each page is pre-built and ready to serve immediately, making site performance blazingly fast.
• Static sites are perfect for content that doesn’t require real-time updates. Unlike a platform like Twitter, where content constantly changes every minute, a personal website or blog has content that is “static”, which means that the page can be created prior to a visitor landing on the page.
• I don’t need a backend or a traditional database like SQL to store my actual content — the text (.md) files themselves act as a lightweight database. This setup makes it easy to copy, move, or back up my entire site whenever I want, with no complex dependencies or cloud costs to manage. In fact, the only recurring cost is my domain, ashwinhariharan.com, which runs about ₹2000 per year.
• The risk of security vulnerabilities is drastically reduced, since there is no database or a backend server to hack into in the first place!

How it all works?

1. I draft each piece in Markdown as .md files on my laptop, including meta-info like topics, tags, and categories.
2. A git push command from my computer syncs all my changes to GitLab, where everything is stored and ready for the next steps. At this point, my work is done - Gitlab and Netlify take over. All that’s left for me is to sit back, watch the dashboard for notifications, and refresh my screen after a minute to see it go live.
3. I’ve configured a CI/CD pipeline¹ between GitLab and Netlify, automating the entire process to roll-out the content after the previous step. Here’s how it works:
   • First, Netlify pulls the latest content / theme from my repository on GitLab.
   • Then, it installs Hugo on the server and runs it to compile all my content files into a fully-formed website, applying the custom theme I’ve developed.
   • Once the build is complete, Netlify publishes everything to a designated Netlify URL. The domain ashwinhariharan.com is linked to this Netlify site, so when you visit, you’re served the latest website from Netlify’s servers. And just like that, the content is live!
   • Post publishing the website, Netlify also uses Google Lighthouse to run a page audit to check for performance, SEO and other benchmarks to ensure a high-quality user experience.

Here’s a flowchart showing how all of this works:

Evolution: How It’s Grown Over Time 🌱

2015 - 2020

When I began writing for publications like FreeCodeCamp, which was hosted on Medium.com at the time, I was immediately drawn to Medium’s clean, minimalist design. The blog feed page displayed articles in card format, showing essential details like the author’s name, reading time, publish date, title, a brief excerpt, and a banner image. This simplicity and focus on readability really appealed to me, so I used it as inspiration when launching my own site.

Medium’s interface:

My website back in 2015-2020:

To get my site off the ground quickly, I used Materialize.css, a CSS library that brought Google’s popular “material design” aesthetic to web projects. Back then, I wasn’t deeply concerned with design principles - I just wanted a clean, modern look that was easy to implement, and this library served the job. It was simple, had good visual components, and had a modern “material design” vibe that everyone was obsessed with back then, and I was happy with it.

I also added a commenting feature to encourage engagement on my posts. For this, I used a forum software called Discourse, which I hosted on a DigitalOcean droplet, costing me around $5 per month. This setup allowed readers to leave feedback and discuss topics directly on my site.

2020 - 2023

Around 2020, I realized I was already overriding a ton of Materialize’s styles to make it look how I wanted, so I thought: why not just go all-in with custom CSS? I was also looking to level up my CSS skills, and doing things myself and treating this website as a learning playground seemed like the next logical step.

I also realized that since I was the only author on my own website, showing the author name on every single post on the list page was redundant. So this time, I put some thought into the design principles and did things right: no library crutches, using modern features like CSS variables, Flexbox, and other modern tricks. Going custom allowed me to build features like dark mode, modularize parts of my theme code. I finally wrote CSS classes I could live with - W3C-friendly names that make sense for the long haul. It wasn’t just a website makeover - it was a hands-on, project-based learning in front-end dev and CSS.

I also decided to remove the commenting feature. Only a few articles that went viral received meaningful engagement in the form of comments and questions, and it no longer made sense to spend $5 each month just to support a couple of comments on average under an article.

2024

By 2024, I was juggling two domains: ashwinhariharan.tech for the tech stuff and ashwinhariharan.com for more personal, reflective writing on philosophy and science. The problem? Managing two sites was a huge pain. Every time I made a tweak or fixed a bug, I had to do it twice. Besides, my personal blog had only a few posts published, and was practically a draft graveyard.

Then, I stumbled upon the idea of digital gardens. This approach was less about polished, finished articles and more about ongoing thoughts - notes, evolving ideas, and knowledge that keeps changing over time. It’s like a blog that’s never “done”. Epistemic Labels are also a theme that features in digital gardens.

That felt right to me, especially since I still update posts I wrote years ago, like my article on How to build your own Uber-for-X app from 2016 (and yes, people still find that useful). The digital garden format made perfect sense.

So I decided to merge everything into one domain, and configured 301 redirects to re-route traffic from ashwinhariharan.tech to ashwinhariharan.com. Now, I could focus on one evolving space instead of splitting my attention.

This is still a work in progress, but it’s evolving in a way that feels right. So here it is: a digital space that’s as much for me as it is for you, ready to grow with time. Thanks for stopping by! I hope you find something here worth coming back for.