Folio Forge
A deterministic portfolio OS — design, theme, and export complete Astro sites.
A self-contained Astro 6 builder app with a React island editor. Template chooser, section manager, content editor, theme/token editor, motion + highlight controls, Pexels material background pack, live iframe preview, and an export center that ships a complete Astro portfolio project ZIP. No AI runtime dependency. Section schema, theme engine, exporter, and site runtime all live as shared packages alongside the app.
What it is
A self-contained portfolio builder. Pick a template, arrange sections, edit content and theme tokens, preview live, and export the whole thing as a complete Astro project ZIP. No AI runtime dependency at runtime — every output is deterministic and inspectable.
The whole app runs in your browser, server-side static, no account required. The launch button above opens it in a new tab on this same domain — /folio-forge/.
Architecture
The repo is a small workspace, not a monolith.
apps/builder— the Astro 6 builder app with a React island editor and a live iframe previewpackages/section-schema— Zod schemas for every section type a portfolio can containpackages/theme-engine— token system: typography, color, spacing, motion presetspackages/exporter— packages a builder state into a complete Astro 6 project, ZIPed and ready to deploypackages/site-runtime— the runtime that exported portfolios use (View Transitions, theme switch,prefers-reduced-motiondefaults)packages/ui— primitives shared between builder and exported sites
What’s in the editor
- Template chooser — six starting points, each schema-typed
- Section manager — add, reorder, duplicate, hide
- Content editor — typed forms generated automatically from the section-schema
- Theme + token editor — colors, fonts, spacing, motion as live design tokens
- Motion controls — entrance:
none / fade / rise / slide / blur / clip / scale / scroll-rise - Hover controls —
none / arrow / accent-line / lift / spotlight / underline / material - Highlight controls —
none / accent / marker / border-glow / section-line - Pexels material background pack — optimized assets with manifest, browse and drop
- Live iframe preview — every change reflects instantly
- Export center — emits a fresh Astro 6 portfolio project ZIP, ready for
pnpm install && astro build
Why deterministic
Generated portfolios drift. A schema-driven, deterministic builder produces the same output for the same input every time. The export ships static HTML, the owner can read every line, and the export’s package.json doesn’t depend on a hosted service to render. Surface variety comes from the Pexels material packs and the motion presets; the Astro export is what actually gets deployed.
How it deploys
Folio Forge is mounted under /folio-forge/ on this same site (zacgibson.work) — same Cloudflare Pages project, separate route. The builder app’s source lives in a workspace at apps/builder next to the shared packages; this site’s build step copies the builder’s dist/ into public/folio-forge/ so visitors land on a fully working SPA without leaving the domain.
Status
Build passes. Local dev runs at 127.0.0.1:4321. Live at /folio-forge/ on this site. Exports tested across the six built-in templates.