Building my portfolio (accidentally rebuilt Figma)

I wanted a personal website that felt, well… personal. Not just another portfolio with a grid of thumbnails and a bit of text (which granted, it does also have 🤦‍♂️). I wanted something playful and interactive. So naturally, I built multiplayer cursors, a live chat, comments, and an entire blog & case studies platform that could also import from in Notion.

It starts with one thing…

I first saw a Figma-style cursor on Alex Manthei’s portfolio and thought they were brilliant, such a nice little touch. But I couldn’t help wondering: what if they actually worked?

So I did what any normal person would do and built real-time multiplayer cursors using ActionCable Server Broadcasting in Rails. Users can set their name (press "esc") and the cursor will change color between the Figma palette on each page refresh (as well as the text background, using ::selection). Now visitors can see each other's cursors moving around in real time. I also added custom cursors by request, so there are some little easter eggs in there too.

Then I added chat mode (press "/") so visitors could chat in real-time. It worked great and was fun to use. Only one problem: if I wasn't on the site when someone dropped by, I'd miss this entirely.

Building commenting

So I figured: sod it, I’ll build commenting too. I need that sweet feedback nectar.

Now you can enter comment mode (press "c"), select anywhere on the site, and leave a comment. Users can delete their own comments, and I can clear all comments from the admin panel.

I might even push it as far as to allow replies and reactions, who knows how far is too far until someone goes that far.

That being said, just because you can build something doesn’t mean you should. And no, I definitely shouldn’t have done this 😂. But I learnt loads doing it and it was fun.

Notion page import

I enjoy writing in Notion but dislike the hassle of formatting and editing in a CMS. I made Notion my default writing tool and needed a simple way to import and format text and images.

I use Notion-to-MD to convert my Notion pages to markdown. Since Notion image URLs are temporary (probably to stop stupid things like this), I modified the importer to upload images to an AWS bucket. This way, all my writing stays in one place, and I avoid wrestling with markdown or unfamiliar editors.

The stack & tools

This whole project came from a desire to build something end-to-end, just for myself. I’d picked up some Rails experience shipping features at Jitty (cheers Coops 🍺), and wanted to push things further.

The stack’s simple: Ruby on Rails, Tailwind, and ActionCable for the real-time magic.

I used Cursor for this project as it gave me a way into the deeper technical layers. It unlocked new capabilities for me as a builder. I got to own every part of it, from the code to the visuals.

Why not just use Lovable, Bolt, v0 or Replit? I’ve tried them all, they’re great for quick prototypes and products and will get you 80% there fast. But that last 20%? It’s painful without full control, especially if you don’t know the stack. I wanted something I could edit deeply, and Rails (which I’d used at Jitty) gave me that flexibility.

Mostly, I just want this to be a home for my stuff. A place I can play, share, break things, fix them again, and document the journey.

Thanks for stopping by,

James 👋