How I Built My Digital Garden
Welcome to my little corner of the internet. I am Kesaru, a twenty-one-year-old undergraduate from the splendid island of Sri Lanka.
Since launching kesaru.me, I have been asked a rather persistent question: "How on earth did you build this?"
The honest answer might surprise you. I did not spend weeks hunched over a keyboard, memorizing the complex syntax of CSS grids, nor did I lose sleep fighting with semicolons. The truth is, I didn't work "hard" in the traditional, Victorian sense of the word. I simply... vibed until it worked.
You see, building a website today is less about typing code and more about architecture. It is about knowing what you want and asking for it politely.
What follows is not merely a technical explanation. Consider it a Masterclass on Vibe Coding. It contains the logic and the exact "Master Prompts" I used to whisper this site into existence.
What is "Vibe Coding"?
Before we look at the prompts, we must agree on the philosophy.
- Old Coding: You act as the Bricklayer. You place every
<div>by hand. You worry about centering things. It is drudgery. - Vibe Coding: You act as the Architect. You tell the machine the "vibe"—the lighting, the mood, the function—and you let the machine lay the bricks.
If you wish to build something similar, do stop writing code from scratch. It is time to start prompting.
Phase 1: The "Liquid Glass" Aesthetic
The Goal: A dark, premium website that looks as though it were made of smoked glass. I wanted it to feel like a high-end operating system, not a blog.
The Master Prompt:
Role: You are a Senior Creative Frontend Architect with an eye for "Apple-esque" dark mode aesthetics.
Task: Architect and implement the core layout for a personal portfolio website using Next.js and Tailwind CSS.
Design Philosophy & Rules:
1. "Liquid Glass" Theme: The UI must feel like looking through smoked glass. Use deep, rich blacks for backgrounds (not pure #000, but slightly lighter, e.g., #0a0a0a).
2. Lighting: Implement a static, subtle "spotlight" effect at the top of the viewport using a radial gradient.
3. Glassmorphism: All cards must use `bg-white/5` with a subtle border (`border-white/10`) to create a frosted effect.
4. Typography: Use a clean Sans-Serif (Inter) for the body, but a Monospace font (Source Code Pro) for headings to enforce a "developer/hacker" identity.
Output:
Generate the code for the main layout wrapper and a sample "Hero" section. Do not explain the CSS; just give me the code.
The Result: Note that I never told the AI how to write the CSS gradient. I simply told it I wanted a "spotlight." It figured out the rest.
Phase 2: The "Infinite Content" Engine
The Goal: I despise writing HTML. I wanted to write my thoughts in Notion and have them magically appear on my site.
The Master Prompt:
Plaintext
Role: You are a Backend Integration Specialist and Clean Code Advocate.
Task: Create a robust script to sync a Notion Database to a local Markdown website.
Requirements:
1. Headless CMS: Query the Notion API.
2. Transformation: Convert rich text to Markdown, preserving code blocks.
3. Asset Handling: THIS IS CRITICAL. Download cover images locally to `public/images`. Do not link to Notion's AWS URLs as they expire.
Output:
Write a single, self-contained TypeScript script using `@notionhq/client`.
The Result:
The AI wrote a script that not only fetches my articles but automatically formats the frontmatter. I run one command—npm run sync—and my site is updated.
Phase 3: The Pulse (Instant Notifications)
The Goal: A delightful system that pings my phone via Telegram the moment someone uses the contact form.
The Master Prompt:
Plaintext
Role: You are a DevOps Engineer focusing on observability.
Task: Implement a lightweight notification system for Node.js using the Telegram Bot API.
Requirements:
1. Simplicity: No heavy SDKs. Use native `fetch`.
2. Robustness: If the notification fails, fail silently. Do not crash the app.
Output:
Provide a copy-pasteable TypeScript module `telegram.ts`.
The Reality Check (It wasn't all perfect)
I must be candid with you. "Vibe coding" is not magic; it is a conversation.
The AI will occasionally hallucinate. At one point, it tried to invent a Tailwind class that does not exist. It once forgot to close a div tag, breaking the entire layout.
The trick is not to panic, but to correct it like a Senior Engineer reviewing a Junior's code. "That looks splendid," I would say, "but you’ve forgotten the mobile responsiveness. Do try again."
A Gift for You
If you wish to plant your own digital garden but simply cannot be bothered to prompt it into existence from scratch, I have done the heavy lifting for you.
I have open-sourced the entire template. The glassmorphism, the Notion sync, the vibes—it is all there, waiting for you.
📂 Get the Template: github.com/kesaruhasun/kesaru.me-template
If you use it, do send me a ping. I should love to see what you build.
Happy vibing. 🍵