This Site
The dashed-grid portfolio you’re reading now — plus a full custom CMS behind it.
A portfolio should feel made, not templated. This site is a hand-built dashed-grid shell with a rotating banner, a film-strip of recent frames, and a Chronicle — all editable through a CMS I wrote so publishing a post or a craft takes one screen.
The challenge
I wanted an editorial, drawn-on-paper feel that most component libraries actively fight — dashed rules, a three-column shell, hover-reveal cards — without hand-editing markup every time I ship something.
So the design and the CMS had to be built together: every surface on the site is a record I can edit, not a file I redeploy.
Approach
The front end is a small set of composable sections driven entirely by data. The CMS is a thin authenticated layer over the same schema, with live preview.
The whole thing was first prototyped as this static UI kit — hand-written CSS mirroring the JSX — so the visual language could be locked before wiring the backend.
What I built
Dashed-grid shell
Three-column layout with dashed rules — an editorial, made-by-hand feel.
Rotating banner
Admin-queued blocks: a line, a featured craft, or a Chronicle entry.
Data-driven sections
Every surface renders from a record, so nothing needs a redeploy to change.
One-screen publishing
The custom CMS ships a post or craft with live preview.
Under the hood
a slice of the core logic1// the whole site is one hash router over data-driven sections2function App() {3 const route = useRoute(); // #home #blog #project/...4 const view =5 route.startsWith("project/") ? <CraftStudyView slug={id(route)} /> :6 route === "project" ? <CraftsView /> :7 route === "blog" ? <BlogListView /> :8 <HomeView />;9 return <Shell>{view}</Shell>;10}