LinkedIn Watch on Twitch
Static-first portfolio + lab runtime

ExNulla Site

A portfolio system engineered like a product surface: static-first rendering, deterministic builds, atomic release promotion, isolated live-status state, and a clean path for shipping demo artifacts without turning the main site into a JS swamp.

astronginxstatic-firstcicdatomic
← All projects Repo Watch Live (Kick) LinkedIn

Problem

  • A serious portfolio cannot read like a brochure. It has to load fast, survive infra mistakes, and prove real engineering work without forcing the whole site into a heavy SPA runtime.
  • The site also had to support embedded lab demos, public case studies, live stream status, and iterative shipping on a single droplet without turning deployment into a trust fall.

System Constraints

  • Production serving is static Nginx, not an always-on app server; this keeps the runtime simple and failure recovery legible.
  • Atomic release discipline matters because a bad build can otherwise publish an empty or partial site. Build output is generated under site/dist, promoted into releases/<timestamp>, and only then exposed by flipping the current symlink.
  • The live stream indicator is intentionally isolated under shared/stream so normal site deploys do not overwrite runtime status state.
  • Interactive demos are built as separate artifacts and copied into /demos/<slug>/ so the main site remains fast while the lab can still host richer proof-of-work modules.

Architecture

  • Astro is used as the static shell so content routes, project pages, CV, links, and documentation remain scanable and CDN-friendly by default.
  • Project and lab metadata are centralized in siteConfig.ts, which gives a single source of truth for cards, detail routes, repo links, and public demo exposure.
  • The deploy path is intentionally boring: build, verify version metadata, promote release, flip symlink, reload Nginx. That is the right kind of boring.
  • Docker exists for deterministic build validation and provenance stamping, but production remains static-hosted. That separation is deliberate: reproducibility in CI without dragging container runtime complexity into the public site path.

Engineering Value

  • This project demonstrates more than frontend polish; it demonstrates release hygiene, information architecture, public-proof packaging, and the ability to design for maintenance instead of demo-day optimism.
  • The site is effectively a delivery chassis for future demos: build artifacts can be pinned, copied, deployed, and rolled back without rewriting the site architecture each time a new proof module ships.
  • It also shows judgment: dynamic behavior is isolated to the smallest viable surface, while the public shell stays static, inspectable, and fast.

Result

  • The result is a portfolio that behaves like production infrastructure: predictable build outputs, atomic promotion, rollback-friendly serving, and a clean route structure for case studies and demos.
  • Most portfolio sites showcase taste; I chose to showcase operational discipline.

Links