The Hidden Door to My Best Work
Your best design work often comes with strings attached.
I've spent years building case studies that showcase real impact — strategic decisions, measurable outcomes. But many of these projects involve client-sensitive information. NDAs exist for good reasons.
I wanted to share my work with potential employers and collaborators, but I couldn't put it on the public internet. Password protection seemed obvious. Gate the sensitive pages, share the password with people who need access.
Except it didn't work.
The Problem with "Simple" Solutions
My portfolio lives on Framer. I love its design flexibility and publishing speed, but Framer doesn't offer native password protection for individual pages. The common workaround is building a client-side password gate using React components.
I tried this. Built a clean login form, stored the authentication state in sessionStorage, called it done.
Then I opened DevTools.
Within thirty seconds, I had bypassed my own protection. A quick modification to sessionStorage and the "protected" content was visible. View Source revealed everything. The content was always there, hidden behind a JavaScript curtain.
Security theater. Any technically-minded person — most people reviewing portfolios in tech — could walk right through. I needed server-level protection, where bypassing it means bypassing the internet itself.
Cloudflare Workers
I reframed the problem. Instead of hiding content that's already been delivered, what if the browser never received the content?
Cloudflare Workers operate at the network edge, between a user's request and your origin server. They intercept and modify requests before they reach your site. I could build a gatekeeper that checks authentication before proxying requests to Framer.
No cookie, no content. The browser doesn't receive hidden content. It receives nothing.
The architecture required careful implementation. The worker monitors requests to protected paths. Missing a valid authentication cookie? It returns a login page instead of proxying to Framer. Successful logins generate cryptographically random session tokens stored as HTTP-only cookies. Since Framer uses client-side navigation, I injected a script forcing full page reloads on protected routes, ensuring the worker validates every access.
The login page is server-rendered HTML, clean and minimal. It contains zero traces of protected content because the worker hasn't fetched anything from Framer yet.
The Details That Matter
Passwords are never stored in plain text, only SHA-256 hashes. I built a standalone hash generator that runs entirely in the browser — the actual password never leaves my machine. Session cookies are HTTP-only (JavaScript can't read them), Secure (HTTPS only), and SameSite=Lax (CSRF protection).
Protected content is served with aggressive no-cache headers at every layer: browser, CDN, edge cache. Even temporary access doesn't leave content sitting in a cache.
What I Learned
My initial approach failed because I was solving a server-side problem with client-side tools. The fix came from questioning which layer I was working at.
Now my protected case studies are genuinely protected. I share a password with people who need access. Everyone else sees a login page. No security theater.
The hidden door isn't about what you show. It's about what you never send.
(Of course, you can always build your own site easily using Claude Code these days — that's for another project sometime!)
Built with Cloudflare Workers, Framer, and a healthy distrust of client-side authentication!