jyx10
This site. The portfolio is itself a project — it has objectives, design factors, architectural decisions, and an implementation. Those are all documented in docs/ and accessible at /meta. The short version: voice methodology and audience framework were done before any writing started; stack decisions were made deliberately during the build and back-filled into ADRs afterward.
Design
Objective: Support a targeted job application while demonstrating that the design-first process I advocate is one I actually use. The site needed to work as a professional artifact for three audiences — recruiter, hiring manager, principal engineer — without condescension, generic aesthetics, or detectable AI writing.
Ten ADRs cover the stack decisions. Key ones:
Audience structure before content. The three-tier progressive disclosure structure (always-visible opener, collapsible Design, collapsible Implementation) was designed and documented before any project card was written. The audience framework determines the writing register per section; the <details>/<summary> mechanism makes the depth opt-in without labeling it.
Voice register sourced from corpus. A register was compiled from two years of real conversations before a single card was drafted. The prohibitions are specific: no em dashes, no “not X / it’s Y” dichotomies, no “load-bearing” / “robust” / “leverage”. Generic instructions to “write naturally” are not actionable. A list of what the voice actually does and doesn’t do is.
Stack selected for coherence, not novelty. Astro 6 for content collections with typed frontmatter and remark plugin composability. Cloudflare Pages (already in the DNS stack) for deployment. Nord because it was already in use on OCULUS and provides a designed dark/light pair, not a retrofitted one. Space Grotesk and Space Mono because they were designed as a pair and read at technical densities. Native <details>/<summary> because the browser handles it without JavaScript.
Privacy as a first-class constraint. No legal name on the domain (WHOIS privacy via Cloudflare Registrar), no GitHub footprint, hosted away from any platform that would associate the handle with the person. This shapes infrastructure choices, not just content choices.
Implementation
Astro 6 content collections with glob loader. Two remark plugins at build time: remarkMermaid() converts Mermaid code fences to <pre class="mermaid"> blocks; remarkDetailsAccordion() wraps ## Design and ## Implementation headings into <details class="section-detail"> accordions. Content authors write plain markdown — the structural transforms are invisible.
Nord CSS variables in Base.astro with [data-theme="light"] overrides for Snow Storm. Three-way theme picker (☀ / ⬤ / ☾) with localStorage persistence and OS preference detection. No-flash theme initialization runs inline before first paint. Mermaid re-initializes on theme switch via window.__mermaidRerender — the generic dark theme produced near-black nodes on Polar Night backgrounds; theme: 'base' with Nord-matched themeVariables per mode was the fix.
Full documentation: docs/objectives.md, docs/design-factors.md, docs/adr/ — eleven ADRs covering every significant decision.