If you are reading this, you are looking at a space I built from scratch. No WordPress theme, no Wix drag-and-drop builder, no React framework with a dozen dependencies. Just HTML, CSS, and a little bit of JavaScript.
When I decided to create my personal corner of the internet, I had a choice: take the easy route and use a template, or build it myself and learn exactly how the gears turn. I chose the latter. Here is the story behind basantasaru.com, the design philosophy that shaped it, and the tech stack that powers it.
Why Not Use a Template?
Templates are tempting. They are fast, they look professional out of the box, and they save you hours of debugging CSS. But they also come with a hidden cost: they make everyone look the same.
I am writing books, documenting my journey, and exploring the intersection of wonder and logic. My digital home needed to reflect that specific frequency. A pre-made template would have forced my thoughts into someone else's layout.
More importantly, I am a builder. The process of figuring out why a flexbox wasn't aligning, or how to make a typography scale feel "right" on mobile, is where the actual learning happens. I wanted this website to be a mirror of my current skills—imperfect, evolving, but entirely mine.
The Design Choices
I wanted a design that felt like a quiet room with good lighting. A place where you can read a long-form essay about consciousness, philosophy, or freelancing without your eyes getting tired.
- Typography: I paired Playfair Display (a classic serif) for headings with DM Sans for body text. The contrast between the elegant serif and the clean, modern sans-serif creates a balance between timeless wisdom and modern execution.
- Color Palette: Instead of harsh pure whites or deep blacks, I opted for a warm, neutral base with terracotta and deep teal accents. It feels organic, like paper and ink, reducing eye strain during long reading sessions.
- Whitespace: I gave the content room to breathe. The margins and line-heights are intentionally generous. Clutter is the enemy of deep thought.
The Tech Stack
The stack is deliberately simple. In an era where building a basic blog requires a Node.js server, a build step, and three different JavaScript frameworks, I went back to the fundamentals.
🛠️ The Core
- HTML5: For semantic structure.
- CSS3 (Custom Properties): For theming and layout. No Tailwind, no Bootstrap. Just raw CSS variables and Flexbox/Grid.
- Vanilla JavaScript: For interactivity (like the typing animation, reading tracker, and music toggle). No jQuery, no React.
I also wrote a small components.js file. Instead of copying and pasting the navbar and footer into every single HTML file, JavaScript injects them dynamically. It’s a tiny workaround that keeps the codebase clean and makes updating the navigation menu a one-line change.
The Philosophy of "Building in Public"
This website is not a finished product; it is a living document. As I learn more about web performance, accessibility, and design systems, this site will evolve. You might notice changes in the layout or new features appearing over time.
That is the point. I am documenting the journey of becoming—both in my books like Earn Before You Graduate and in my digital life. Building this site myself was a reminder that you don't need permission or expensive tools to create something meaningful. You just need curiosity, a text editor, and the patience to figure things out.
If you are thinking about starting your own blog or portfolio, my advice is simple: build it yourself first. Even if it breaks. Even if it looks ugly at first. The muscle memory you gain is worth more than any template could ever give you.
Thanks for reading. Let's keep building. ✦