How this site is actually built.
The portfolio is itself a case study. Everything below is verifiable against the source: measurements carry dates, claims carry mechanisms, and nothing here is aspirational.
The rendering trade-off, stated plainly
Every HTML document on this site is rendered per request. That is unusual for a portfolio, and it is deliberate: the Content-Security-Policy mints a cryptographically random script nonce on every response, which eliminates inline-script XSS as a class but is incompatible with caching one prerendered page forever. The cost is server render time per document; every sub-resource below it is aggressively cached. The decision is documented in the middleware and will be revisited when Next.js Partial Prerendering stabilizes. Security decisions here are trade-offs made on purpose, not defaults left in place.
Content is code: projects, essays, testimonials, and credentials live as typed TypeScript modules validated by Zod schemas at module load, so a malformed record fails the build, not the visitor. There is no CMS and no database to operate, patch, or breach.
Secure by architecture.
Per-request CSP nonce + strict-dynamic
Middleware mints a cryptographically random nonce for every response; only scripts carrying it may execute. This removes inline-script XSS as a class and is the deliberate reason every page renders dynamically.
Layered contact anti-abuse
One Zod schema shared verbatim by client and server, an HMAC-signed server-verified challenge with a TTL and a time-trap, a honeypot field, and distributed rate limiting. Email is dispatched only after every layer passes.
Hardened response headers
HSTS with preload, COOP/CORP cross-origin isolation, Permissions-Policy denying camera/mic/geolocation, nosniff, and a strict referrer policy, all set once in framework config and applied to every route.
Violation reporting, not hoping
CSP violations and uncaught server errors forward to a monitored webhook (report-uri + the Reporting API, and Next's instrumentation hook). A strict policy without reporting fails silently; this one doesn't.
Coordinated disclosure
A security.txt (RFC 9116) at /.well-known/security.txt states the contact and expiry for security reports.
Fast, with receipts.
Zero-CLS font strategy
The display face is a self-hosted latin subset woff2, explicitly preloaded, with a metric-matched Arial fallback whose size-adjust and vertical metrics are computed from the actual font file by a maintained script. The font swap is a pure repaint, with no layout shift.
Images on a one-year budget
AVIF/WebP via the framework image pipeline, responsive device sizes, immutable caching for build assets, and pre-compressed source rasters (a scripted pass took /public from 30 MB to 12 MB).
Third-party JavaScript deferred to idle
Analytics loads after the page is interactive (Consent Mode defaults run inline first, so denied-state pings still work). The WebGL hero background initializes on idle and is skipped entirely on touch devices and on machines without GPU acceleration, where WebGL would fall back to slow CPU rendering.
Measured, with dates
Local Lighthouse (desktop, July 2026): performance 99, best-practices 100, CLS 0. CI asserts Lighthouse budgets on every push so regressions fail the build rather than ship.
Tokens, rendered live.
These swatches read the same CSS custom properties the entire interface is built from. Flip the theme toggle and watch them re-resolve. One token sheet drives both themes; components never hard-code a colour.
Every change earns its way in.
- TypeScript strict compile and zero-warning ESLint on every push
- Vitest unit suites for the security primitives (challenge crypto, rate limiter, contact schema) and content integrity (every cover exists, every slug unique)
- Playwright end-to-end: contact flow with mocked network, theme transitions, share bar, an axe-core accessibility scan, and a circular-geometry invariant asserting every round UI element renders perfectly symmetrical
- Production build + Lighthouse budget assertions in CI; a five-browser matrix runs nightly
- Dependabot keeps the deliberately small dependency tree current
The interface never overstates.
Status surfaces report reality
The AI terminal's badge reflects the actual serving mode returned by the API (live model vs. curated fallback); it is never hard-coded. The hero availability chip is curated content a human updates, not a computed date.
Dates are honest or absent
The sitemap's lastModified comes from real content dates; nothing stamps 'now' on every crawl. Posts carry an explicit revision date only when substantively revised.
No structured-data claims the site can't honour
There is no SearchAction in the WebSite schema, because the site's search is a client-side command palette, not a crawlable results page.
Deliberately small.
Want this level of care on your product?
This is the standard applied to ramonloganjr.com, the same one applied to client work: security by design, performance with receipts, and interfaces that never overstate.