PERSONAL PORTFOLIO

"Any sufficiently advanced technology is indistinguishable from magic."

We use technology every day without really thinking about how it works. Most of the time, we just trust that it does. But when I started digging deeper into it, I became more and more interested in how much complexity is hidden underneath. A lot of things are abstracted away so well that, from the outside, it almost feels like magic, the kind portrayed in fantasy movies or games. Even after understanding more of it, that feeling never disappears.

And for that reason, I decided to build this personal portfolio as a way to share the magic behind the scenes. To pull back the curtain and show how all the pieces fit together, from the tech stack to the architecture decisions, and even the mistakes and learnings along the way. My hope is that by sharing this, you can learn from my journey and maybe even be inspired to build your own projects.

The floating button on this website is called VeilButton. It's named that way to work as a button to unveil the magic behind the scenes. That's the philosophy of the duality between the magic and cyber themes on this website.

Here are the technology stacks I used to develop this project. Special shoutout to Claude Code for helping me speed this up significantly. You're still expensive though.

You may check the details on each part of the stack in the backend and frontend sections below. I combined the infrastructure and backend layers into one section since they are closely related in this project.

The backend is built entirely on Cloudflare's edge infrastructure. This website is deployed as a serverless worker, and there is another worker that pulls blog content from Notion on a schedule and caches it in Workers KV, so the site never waits on Notion at request time. I also put a basic rate limiter and a WAF at the edge layer to keep bad actors from spamming this site. All of those pieces together make the backend blazingly fast.

The personal portfolio is deployed as a Cloudflare Worker via OpenNext. Blog content flows from Notion into Workers KV via the notion-blog-worker, then fetched by the portfolio worker, and finally served to the visitor.

The notion-blog-worker runs on a separate Cloudflare Worker. Every hour, a cron job fetches all posts from Notion, resolves tags and child blocks, builds a posts index, and writes everything to Workers KV. Reads are served straight from KV, so Notion is never touched on the read path. All read endpoints require an X-API-Key header, keeping the worker private.

Here are some backend implementation highlights:

The frontend is built with Next.js 15 and Tailwind CSS. Every component is built from scratch, with a theme-aware registry that swaps magic and cyber variants automatically. Blog content is rendered via a custom Notion block renderer with no external dependency.

Here are some frontend implementation highlights:

Every project has decision points where multiple reasonable paths exist. These are the ones that shaped how I built this site, what I picked, why, and the tradeoffs I accepted.

Not everything went smoothly. Some decisions I made paid off immediately, others cost me more than expected. These are the honest takeaways from building this.