This website brings my portfolio and connected notes together. The public and authenticated editions share a design system and are built separately from an explicitly selected set of source notes.
Content and publishing
The source is a Markdown knowledge vault maintained with Obsidian-compatible links, YAML metadata and Git version history. d8p’s Python and JavaScript publishing tools select eligible notes, resolve links and assets, and produce separate public and authenticated inputs. Draft review and publication are separate steps.
Website stack
Quartz 5 generates the static site. TypeScript and Preact provide the components; Sass and CSS provide layout and themes. The Markdown pipeline uses unified, remark and rehype. Node.js 24 and npm run the build, with esbuild, Lightning CSS and Sharp supporting compilation, styling and image processing.
Quartz community components provide search, Explorer, breadcrumbs, backlinks, the local graph, page metadata and section navigation. Micromorph supports page-to-page navigation without a full reload. D3 and PixiJS power the graph, Mermaid renders diagrams, and KaTeX renders mathematical notation. Browser resources and fonts are served locally with the site.
Design
The typography pairs Schibsted Grotesk headings with Source Sans Pro body text and IBM Plex Mono code. The palette comes from my d8p brand: navy and cream in dark mode, white and brand blue in light mode, and yellow-green accents. The circular d8p logo is the original brand artwork. The header and footer icons are lightweight inline SVG.
Hosting and access
The intended production platform is Cloudflare Pages, with Cloudflare Access protecting the authenticated edition. These local draft previews do not establish a live authentication boundary or a deployed release. Production setup and verification are separate from this review.
Plausible is the selected public analytics integration, subject to separate production configuration and approval. Automatic analytics on the authenticated edition is disabled.
How the work is made
Dan Patton directs the design, content and editorial decisions in collaboration with AI. Read the AI use disclosure for how we work together. The d8p case study explains the broader system behind this website.