print("Hello, World!")If you're reading this, welcome to my little corner of the internet.
I’m Vatsal Vora, and this is my very first blog post on my newly minted personal website. I’ve been using Obsidian for quite a while to jot down my notes, list out ideas, and keep track of my learnings. I always wanted to host these notes somewhere accessible. I checked out Obsidian publish plugins and various custom solutions, but eventually, I thought: why don't I just build my own personal website and host my notes there?
Why a Personal Website?
After way too much procrastination, I finally built a new website. It was the perfect excuse to do a little bit of "vibe coding" and create something that felt truly mine.
Finally, I want to write more. More posts about things I’m building, solutions to problems that took forever to figure out, and short notes that don’t need to be full blog posts but might help someone.
So, I built vectorbuilds.dev.
The Tech: Going Headless with GitHub
I didn't want just another generic blog template. I wanted a system that fit my exact workflow. I wanted to be able to publish my notes to the world without ever opening a CMS, running a build step, or managing a database.
So, I built a custom Headless GitHub CMS using Next.js. Here is the breakdown:
- The Digital Garden (
/notes): All my raw, unpolished reference notes live in a public GitHub repository. My Next.js app uses the GitHub API to fetch them on the fly. When I write a note in Obsidian, I just push it to GitHub, and Next.js automatically caches and renders it. Zero build time. - The Articles (
/articles): For longer, polished posts (like this one!), I built a separate pipeline. These pull from a private GitHub repository using a secure token, rendered with beautiful, VS Code-like syntax highlighting. - The Core Stack: It's all glued together with Next.js 14, Tailwind CSS for styling, and Framer Motion for those smooth, minimalist animations.
The Cool Integrations
Since I was building this from scratch, I decided to have some fun and add some cool tracking integrations:
- Spotify Now Playing: You can see exactly what I'm listening to in real-time.
- TMDB Integration: Check out what Anime or movies I am currently watching or have recently finished.
- GitHub Last Commit: A live look at my latest coding activity.
- Abacus Clicker: A persistent global click counter just for fun.
If you are curious about how any of this is built, you can check out the source code for my portfolio here on GitHub.
Right now, my goal is to consistently populate the Digital Garden with raw snippets, while pushing out deep-dives here in the Articles section. In the meantime, feel free to poke around the Projects I’ve worked on, or jump into my Toolkit to use my custom utilities like the Pomodoro timer and ambient noise generator for your next focused productivity session.
Stay tuned 👀.