Hello there! Welcome to my blog, and by extension, welcome to my personal website! It’s wonderful around here, being on the internet, having my own domain. It kind of feels like buying a car! (I don’t have a car, but I assume that’s what the feeling might be!) I mean, being a developer, it’s expected of one to have a portfolio after all.
I hope you’ve explored what I’ve built – clicked every link, checked if anything is broken (I’m sure there are a couple of things that are broken, but that’s to be expected). I wanted to write this post so I can give you a behind‑the‑scenes look at the thought process behind this website, and also add a post to showcase the blog/content functionality. (I’m very pleased with how it turned out!) Shall I start the ramble then? 😛
What took me so long to build this website?
Well, it’s a long story. But the short version is, I wasn’t very fond of my earlier designs. Either they looked too techy or simply not that good. Most of the designs I took inspiration from (at the time) were far too advanced for me to design as well. If I remember correctly, I started my first portfolio design around 2022. (That’s when I started playing around in Figma), so you can imagine how that design might have turned out!
I tried to find it, but I couldn’t. The design I could find was from 2024, and you can see my attempt to make it at least be unique. But seeing it back now, it would’ve been too cluttered for my liking.
Attempted bento style design
Portfolio Design in action
Tried to mimic a Tumblr post at one point
So, as you can see, from that to what I have now was a huge leap. Now you might wonder, “Where did you design this?” That’s the neat part – I didn’t sit down and design this website. Because I knew that if I was going to do it, I would eventually design it, come back after a couple of days, and realize I wasn’t fond of it. So this time I just started coding it. And look at me now – I finished it! My mom would be proud (she has no idea what I’m doing!).
You might be curious about why I made certain decisions.
The thinking behind the design
While I pride myself on my design capabilities, I knew that if I wanted to get this project done, I had to jump in head first. The best part of doing something personally and at one’s own pace is that there’s no one to rush or judge your approach. And that freedom allowed me to try out so many different designs I saw and took inspiration from.
When I started coding this project, I only had a “vibe” or a “look” of what the end product should be, but seeing it back now, it’s nothing like how I imagined it.
I wanted to try adding the subtle gradients I saw on the Tailwind website, and while I was searching for a way to do that, I came across this amazing website called Gradienty. So, most of my backgrounds were sourced from there.
The fading navigation bar was inspired by the Astro debug console in dev mode. I liked how it showed options but disappeared when not focused. From then, things started falling into place like Lego bricks. And about a month later, here we are! (Though it didn’t take a full month to build this – like I said, this wasn’t the only thing I was working on.)
Why design a blog?
I wasn’t exactly set on making a blog, as I didn’t really know what I wanted to share. But the thing is, this wasn’t my first attempt at playing around with a blog or an online journal. Last year (I think around 2024‑2025) I was playing D&D with a group of friends, so I wanted to share our session notes with the other players. So I created a website with the help of an open‑source project called Quartz.
And I like to write, so I thought, why not? Let me just carve out a small piece of the internet to showcase my stuff.
The architecture
So, how did I build this? I’m sure you’re curious. You might also be curious why I haven’t made the repository public, as most other developers would. The simple answer is: I didn’t want to. So, moving on.
What did I use to build this?
This website is built with the Astro framework (with React integration). Astro is perfect for mainly static websites with specific dynamic hydration using its island architecture. The website is hosted on Vercel and carefully deployed after GitHub workflows pass. Being a static site, there aren’t many tests I know to run the website against, so I simply added a linting test.
The blogs are written in MDX or Markdown with the ability to render ::React components::, integrated with Remark for custom parsing. That’s essentially all the tech stack used here.
I have not integrated a CDN because Vercel and Astro have amazing content optimization libraries, and it’s not like I expect this website to have thousands of visitors at any given time. So I think having everything in the same place is better.
As for the project structure. It looks something similar like this.
Functionality of the blog
I took inspiration from a couple of places, but mainly Obsidian.md. I mainly wanted everything to look and feel seamless, so I made everything get out of the way whenever possible. The table of contents can be disabled whenever I want. Everything is managed using Markdown frontmatter.
For example, below is the frontmatter used in this blog post.
And this way, writing these posts in Obsidian.md is such a wonderful feeling.
Currently, I’ve added multiple custom components and blog features, such as:
- Lists
- Custom links
- Custom image grids
- Syntax highlighting (inspired by Vercel code blocks)
- Outgoing link pills
- Recommended reads
- Previous and next navigation
Thank you for reading
I intend to expand this with many more ideas – I have such a backlog. But regardless, thank you for reading. It’s wonderful to give you a glimpse of what I built. If you have any thoughts, do send me an email, either to my personal address or to hello@kavindunirmal.com. (I just figured out how to make my own email domains – it’s so fun!) Anyway, I hope you have a wonderful day!