A Singular Reading Experience

You’re reading this inside a notebook.

Not a theme named after one. Not a paper texture slapped on a blog template. A kraft-covered book on a wooden desk, pages that turn, an Index tab that slides out from the leaf like it belongs there. If your browser and screen can carry it, Three.js is holding the physical object while the words you’re reading are still real HTML, selectable, searchable, indexable.

Closed kraft notebook on a wooden easel, front cover embossed with Adam's Notebook — The establishing shot — closed cover on the easel before the book opens.

A month ago this site already looked like an engineer’s notebook. Warm paper. Dot grid. Better than boilerplate. That was enough for a while. Then I made the metaphor literal.

Why the whole site had to become the piece

I’ve been mulling this update over for a while. I started learning Three.js at my last job, and the itch never really went away. Then the job search got real, I’d been part of a workforce reduction earlier in the rebuild, and I took stock of what I could actually show people.

A lot of the work I’d done since becoming a software engineer was either no longer published, or lived behind private company repos. Transforming my blog from a simple set of styled posts into a solid portfolio piece in and of itself was a no-brainer. I’ve got other projects coming online soon. But this is the URL on my resume. Making it fun to visit seemed like a great use of my time.

The CSS notebook look had been a test and a practical decision: push past default AI aesthetics, make the site feel human. I wrote about that rebuild in Better Than Boilerplate, the Astro migration, the engineering journal habit, the push against anonymous scaffolding. It worked. It also still felt unfinished. Looking like a notebook isn’t the same as being one, and when the site is the portfolio, half-measures start to read as half-effort.

Open notebook showing the inside cover and table of contents spread on a wooden desk — Open on the desk — dossier on the left, table of contents on the right.

Ink on paper, not paint in a canvas

The early bet was simple: the book can be 3D, but the words should stay real.

Three.js owns the desk, the covers, the lighting, the page turns. The text, links, and forms stay ordinary markup, projected onto the page so they line up with the spread. That keeps the writing selectable and searchable, and it keeps the site honest as a website underneath the theater.

I may still go further someday. I’d love to bake the text into the pages themselves. I think it can be done, but I’d want a shadow DOM (or equivalent) for SEO, and I don’t yet know enough about what happens when everything lives purely in the canvas. Hybrid is the honest choice for now.

It’s also where most of the sweat went. Two rendering systems pretending to be one object will fight you: text that flashes in the wrong corner before the intro finishes, paper textures painting twice, a flipping page that somehow ends up behind the words you’re reading. None of that belongs in a feature list. It’s just the cost of making the metaphor hold.

Open notebook showing an article spread with hero image and prose — An article leaf in the book — same reading surface as this one.

Not protecting, just porting

Early builds still linked out to legacy chrome for About, Contact, and the policy pages. The notebook had an escape hatch. The site didn’t feel cohesive.

I wasn’t protecting immersion for its own sake. I was porting. If it couldn’t be a singular experience, it felt like I was half-assing it.

So the back matter moved into the book: About, Contact, Policies as leaves you turn to, not destinations you leave for. On phones and small screens, the 3D desk steps aside for a simpler paper spread, because a singular experience still has to work when the easel won’t fit.

Desktop gets the desk. Everyone gets a notebook.

Tall phone screenshot of an article leaf in the stacked CSS notebook layout — On a phone, the desk goes away — the notebook stays.

Perfect is the enemy of done

Ask me what still bothers me and I’ll point at page turning.

It’s better than it was. And it’s still buggy. I plan to learn more about making the pages feel like paper. For now, this had to be good enough so I didn’t spend all my time chasing perfection.

Perfect is the enemy of done. I have a job search to continue and other side projects to build. I can always iterate.

That sentence is doing a lot of work in this article, and I mean it. The portfolio value of shipping a coherent experience beats the portfolio value of an unfinished masterpiece of paper physics.

Something to stumble into

I left a little something past the last “serious” page of the book.

A playful hint — something small and glowing waiting at the edge of a kraft-paper notebook — You'll know it when you find it.

I’m not going to tell you where it is, or what it is. Intrigue has a half-life, and I’d rather you find it, or not, on your own terms. What I will say: it’d be great if people stumbled onto it and just started smiling. I’m particularly proud that, on a phone, that little corner of the site behaves like an old handheld. Mobile visitors miss the full Three.js desk. They still get a reason to grin.

If you never find it, the notebook still holds. If you do, you already know why I bothered.

What you might take from this

I don’t have a single lesson queued up for a single audience. Recruiters, engineers, people shipping under pressure, people who care about progressive enhancement, people who just like weird personal sites, pull whatever speaks to you.

For me, the through-line looks like this:

When most of your real work can’t leave private repos, the public surface has to carry more weight. The site stops being a brochure and becomes evidence.
Metaphor only holds if you commit. Port the edges. Kill the exits that break the story. Half-ported experiences read as unfinished.
Keep the words real until you have a better reason not to. The 3D book is the show; the ink still has a job to do.
Ship the coherent version. Iterate the paper physics later.
Leave room for delight that isn’t on the resume bullet list, then don’t spoil it in the writeup.

The beauty of this project is that this article is meta-built inside of it. You’re not reading a retrospective hosted next to the work. You’re turning pages in the work.

The page turns still aren’t perfect. The book is open anyway.