diff --git a/.github/workflows/pr-checks.yaml b/.github/workflows/pr-checks.yaml
index f322884..0238e40 100644
--- a/.github/workflows/pr-checks.yaml
+++ b/.github/workflows/pr-checks.yaml
@@ -34,6 +34,9 @@ jobs:
       - name: Install Dependencies
         run: npm ci --legacy-peer-deps
 
+      - name: Mock Portfolio Template Library for CI
+        run: node scripts/mock-template-library.mjs
+
       - name: Linting & Formatting
         run: |
           npm run lint
diff --git a/.hallmark/log.json b/.hallmark/log.json
new file mode 100644
index 0000000..68525aa
--- /dev/null
+++ b/.hallmark/log.json
@@ -0,0 +1,18 @@
+[
+  {
+    "date": "2026-05-30",
+    "scope": "app",
+    "macrostructure": "Readable portfolio tour + Tabbed studio",
+    "theme": "VeriWorkly platform",
+    "enrichment": "Interactive full-template preview",
+    "brief": "Corrective portfolio makeover: readable landing page, compact studio, complete billing decision page, populated demos, and retuned templates."
+  },
+  {
+    "date": "2026-05-30",
+    "scope": "app",
+    "macrostructure": "Editorial product tour + Workbench",
+    "theme": "VeriWorkly platform",
+    "enrichment": "Tier-A CSS grid surface",
+    "brief": "Full production makeover for the portfolio builder, editor, billing view, gallery, and public templates."
+  }
+]
diff --git a/apps/blog-platform/package.json b/apps/blog-platform/package.json
index e873156..c975c6f 100644
--- a/apps/blog-platform/package.json
+++ b/apps/blog-platform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@veriworkly/blog-platform",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/apps/docs-platform/package.json b/apps/docs-platform/package.json
index 41be754..5348794 100644
--- a/apps/docs-platform/package.json
+++ b/apps/docs-platform/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@veriworkly/docs-platform",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/apps/portfolio/.env.example b/apps/portfolio/.env.example
new file mode 100644
index 0000000..6b8eed3
--- /dev/null
+++ b/apps/portfolio/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_BACKEND_URL=http://localhost:8080/api/v1
+BACKEND_INTERNAL_URL=http://localhost:8080/api/v1
diff --git a/apps/portfolio/.gitignore b/apps/portfolio/.gitignore
new file mode 100644
index 0000000..0df97fb
--- /dev/null
+++ b/apps/portfolio/.gitignore
@@ -0,0 +1,51 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# except example file
+!.env.example
+!.env.docker.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# fumadocs generated files
+.source
+
+# testing
+/app/og-generator
diff --git a/apps/portfolio/README.md b/apps/portfolio/README.md
new file mode 100644
index 0000000..45c61aa
--- /dev/null
+++ b/apps/portfolio/README.md
@@ -0,0 +1,41 @@
+# VeriWorkly Portfolio
+
+The public portfolio platform. Private template implementations are mounted as a Git submodule at `template-library/`.
+
+## Setup
+
+Clone with the private templates:
+
+```bash
+git clone --recurse-submodules git@github.com:VeriWorkly/veriworkly.git
+```
+
+For an existing checkout:
+
+```bash
+git submodule update --init --recursive
+```
+
+The private repository uses GitHub SSH access. The machine running development or deployment must trust GitHub's SSH host key and have access to `VeriWorkly/portfolio-templates`.
+
+## Add A Template
+
+1. Add a folder in `template-library/` with its own React component and optional scoped stylesheet.
+2. Add one dynamic loader entry in `template-library/registry.ts`.
+3. Add public gallery metadata in `templates/catalog/templates.ts`.
+4. Commit and push the private repository first.
+5. Commit the updated submodule pointer in this repository.
+
+Do not import template styles from `app/globals.css`. Template modules own their styles so Next.js can emit per-template assets.
+
+## Production Deployment
+
+Portfolio publishing requires:
+
+1. Point `portfolio.veriworkly.com` and `*.veriworkly.com` at the portfolio Next.js deployment.
+2. Provision TLS coverage for `portfolio.veriworkly.com` and `*.veriworkly.com`.
+3. Configure `NEXT_PUBLIC_BACKEND_URL` and `BACKEND_INTERNAL_URL`.
+4. Configure the server Dodo Payments and Cloudflare R2 variables documented in `apps/server/.env.example`.
+5. Set the auth cookie domain to `.veriworkly.com` so Studio and Portfolio share the signed-in session.
+
+Only VeriWorkly subdomains are supported at launch. Custom-domain routing and certificate automation are intentionally out of scope.
diff --git a/apps/portfolio/app/api/render/route.ts b/apps/portfolio/app/api/render/route.ts
new file mode 100644
index 0000000..be3b97d
--- /dev/null
+++ b/apps/portfolio/app/api/render/route.ts
@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+
+import { parsePortfolioContent } from "@/lib/portfolio";
+
+import { renderTemplate } from "@/templates/runtime/registry";
+
+export async function POST(request: Request) {
+  try {
+    const project = parsePortfolioContent(await request.json());
+
+    const element = await renderTemplate(project);
+
+    const { renderToString } = await import("react-dom/server");
+    const html = renderToString(element);
+
+    return new NextResponse(html, {
+      headers: {
+        "Content-Type": "text/html; charset=utf-8",
+        "Cache-Control": "no-store, max-age=0",
+      },
+    });
+  } catch (error) {
+    console.error("Failed to render preview template:", error);
+    return new NextResponse("Error rendering template", { status: 500 });
+  }
+}
diff --git a/apps/portfolio/app/api/revalidate/route.ts b/apps/portfolio/app/api/revalidate/route.ts
new file mode 100644
index 0000000..5404ee1
--- /dev/null
+++ b/apps/portfolio/app/api/revalidate/route.ts
@@ -0,0 +1,41 @@
+import { revalidatePath, revalidateTag } from "next/cache";
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+  let body: { paths?: string[]; tags?: string[]; secret?: string };
+
+  try {
+    body = (await request.json()) as { paths?: string[]; tags?: string[]; secret?: string };
+  } catch {
+    return NextResponse.json({ message: "Invalid JSON body" }, { status: 400 });
+  }
+
+  const { paths, tags, secret } = body;
+  const expectedSecret = process.env.PORTFOLIO_REVALIDATE_SECRET || "dev-revalidate-secret";
+
+  if (secret !== expectedSecret) {
+    return NextResponse.json({ message: "Invalid secret" }, { status: 401 });
+  }
+
+  if (tags && Array.isArray(tags)) {
+    for (const tag of tags) {
+      try {
+        (revalidateTag as unknown as (tag: string) => void)(tag);
+      } catch (err) {
+        console.error(`Failed to revalidate tag: ${tag}`, err);
+      }
+    }
+  }
+
+  if (paths && Array.isArray(paths)) {
+    for (const path of paths) {
+      try {
+        revalidatePath(path);
+      } catch (err) {
+        console.error(`Failed to revalidate path: ${path}`, err);
+      }
+    }
+  }
+
+  return NextResponse.json({ revalidated: true, paths, tags });
+}
diff --git a/apps/portfolio/app/billing/page.tsx b/apps/portfolio/app/billing/page.tsx
new file mode 100644
index 0000000..4fe1a56
--- /dev/null
+++ b/apps/portfolio/app/billing/page.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import { BillingWorkspace } from "@/components/BillingWorkspace";
+
+export const metadata: Metadata = {
+  title: "Portfolio Pro billing",
+  robots: { index: false, follow: false },
+};
+export default function BillingPage() {
+  return <BillingWorkspace />;
+}
diff --git a/apps/portfolio/app/dashboard/page.tsx b/apps/portfolio/app/dashboard/page.tsx
new file mode 100644
index 0000000..8d8fbd4
--- /dev/null
+++ b/apps/portfolio/app/dashboard/page.tsx
@@ -0,0 +1,7 @@
+import type { Metadata } from "next";
+import { DashboardWorkspace } from "@/components/DashboardWorkspace";
+
+export const metadata: Metadata = { title: "Dashboard", robots: { index: false, follow: false } };
+export default function DashboardPage() {
+  return <DashboardWorkspace />;
+}
diff --git a/apps/portfolio/app/error.tsx b/apps/portfolio/app/error.tsx
new file mode 100644
index 0000000..479655a
--- /dev/null
+++ b/apps/portfolio/app/error.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+export default function ErrorPage({ reset }: { reset: () => void }) {
+  return (
+    <main className="grid min-h-screen place-items-center bg-[var(--color-paper)] p-6 text-center">
+      <div className="max-w-md rounded-xl border border-[var(--color-line)] bg-[var(--color-panel)] p-7">
+        <p className="text-[11px] font-extrabold tracking-[.14em] text-[var(--color-accent)] uppercase">
+          Temporary issue
+        </p>
+        <h1 className="mt-3 text-3xl font-bold tracking-[-.06em]">This page could not load.</h1>
+        <p className="mt-3 text-sm leading-6 text-[var(--color-muted)]">
+          Your work has not been lost. Try the request again, or return after the service connection
+          recovers.
+        </p>
+        <button
+          className="mt-5 inline-flex min-h-10 items-center rounded-lg bg-[var(--color-accent)] px-4 text-xs font-extrabold text-[var(--color-accent-ink)]"
+          onClick={reset}
+        >
+          Try again
+        </button>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/portfolio/app/globals.css b/apps/portfolio/app/globals.css
new file mode 100644
index 0000000..cc1938b
--- /dev/null
+++ b/apps/portfolio/app/globals.css
@@ -0,0 +1,96 @@
+/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
+ * genre: modern-minimal · macrostructure: Editorial product tour + Workbench · tone: structured confidence · anchor hue: blue
+ * contrast: pass (46-50) · nav: N1 · footer: Ft1 · tokens: pass (58) · mobile: pass (36, 59, 61-69)
+ */
+@import "tailwindcss";
+@import "./tokens.css";
+
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+  overflow-x: clip;
+  scroll-behavior: smooth;
+}
+body {
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+}
+.surface-grid {
+  background-image:
+    linear-gradient(to right, var(--color-line) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--color-line) 1px, transparent 1px);
+  background-size: 28px 28px;
+}
+.paper-noise {
+  background:
+    radial-gradient(circle at 10% 0%, var(--color-accent-soft), transparent 26rem),
+    var(--color-paper);
+}
+.reveal {
+  animation: reveal var(--dur-slow) var(--ease-out) both;
+}
+.reveal-delay {
+  animation-delay: 120ms;
+}
+@keyframes reveal {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+button,
+input,
+textarea {
+  font: inherit;
+}
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+  outline: 3px solid var(--color-accent);
+  outline-offset: 3px;
+}
+button:active,
+a:active {
+  opacity: 0.72;
+}
+button:disabled,
+input:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+h1,
+h2 {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+@media (prefers-reduced-motion: reduce) {
+  html,
+  body {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+  }
+}
diff --git a/apps/portfolio/app/layout.tsx b/apps/portfolio/app/layout.tsx
new file mode 100644
index 0000000..3a0b1f9
--- /dev/null
+++ b/apps/portfolio/app/layout.tsx
@@ -0,0 +1,48 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { portfolioSiteConfig } from "@/config/site";
+
+export const metadata: Metadata = {
+  metadataBase: new URL(portfolioSiteConfig.url),
+  title: {
+    default: "Professional Portfolio Builder | VeriWorkly",
+    template: "%s | VeriWorkly Portfolio",
+  },
+  description: portfolioSiteConfig.description,
+  keywords: [...portfolioSiteConfig.keywords],
+  authors: [{ name: "VeriWorkly" }],
+  creator: "VeriWorkly",
+  publisher: "VeriWorkly",
+  openGraph: {
+    type: "website",
+    url: portfolioSiteConfig.url,
+    title: "Professional Portfolio Builder | VeriWorkly",
+    description: portfolioSiteConfig.description,
+    siteName: portfolioSiteConfig.name,
+  },
+  twitter: {
+    card: "summary",
+    title: "Professional Portfolio Builder | VeriWorkly",
+    description: portfolioSiteConfig.description,
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+      "max-video-preview": -1,
+    },
+  },
+  alternates: { canonical: "/" },
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/apps/portfolio/app/page.tsx b/apps/portfolio/app/page.tsx
new file mode 100644
index 0000000..6def580
--- /dev/null
+++ b/apps/portfolio/app/page.tsx
@@ -0,0 +1,188 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight, Check, CirclePlay, LayoutTemplate, MoveUpRight, Sparkles } from "lucide-react";
+import { TemplateFrame } from "@/components/TemplateFrame";
+
+const shell = "mx-auto w-[min(1240px,calc(100%-48px))] max-sm:w-[min(100%-32px,1240px)]";
+const cta =
+  "inline-flex min-h-11 items-center gap-2 whitespace-nowrap rounded-full bg-[var(--color-accent)] px-5 text-sm font-extrabold text-[var(--color-accent-ink)] transition-transform duration-150 hover:-translate-y-0.5";
+
+export default function HomePage() {
+  return (
+    <main className="bg-[var(--color-paper)]">
+      <nav className="border-b border-[var(--color-line)] bg-[var(--color-paper)]">
+        <div className={`${shell} flex min-h-[72px] items-center justify-between gap-4`}>
+          <Link
+            href="/"
+            className="inline-flex items-center gap-3 text-sm font-extrabold tracking-[-.03em] whitespace-nowrap"
+          >
+            <Image src="/veriworkly-logo.png" width={28} height={28} alt="" /> VeriWorkly Portfolio
+          </Link>
+          <div className="flex items-center gap-6 text-sm font-bold">
+            <a className="max-sm:hidden" href="#templates">
+              Templates
+            </a>
+            <a className="max-sm:hidden" href="#workflow">
+              Workflow
+            </a>
+            <Link href="/dashboard" className={cta}>
+              Start building <ArrowRight size={15} />
+            </Link>
+          </div>
+        </div>
+      </nav>
+
+      <section
+        className={`${shell} grid min-h-[650px] grid-cols-[minmax(0,1fr)_minmax(260px,360px)] items-end gap-14 py-20 max-[860px]:grid-cols-1 max-[860px]:gap-10 max-sm:min-h-0 max-sm:py-14`}
+      >
+        <div>
+          <p className="flex items-center gap-2 text-xs font-extrabold tracking-[.14em] text-[var(--color-accent)] uppercase">
+            <Sparkles size={14} /> Portfolio studio
+          </p>
+          <h1 className="mt-5 max-w-[820px] text-[clamp(4rem,8vw,7.25rem)] leading-[.94] font-semibold tracking-[-.1em] max-sm:text-[clamp(3.5rem,17vw,5.5rem)]">
+            Your work.
+            <br />
+            <span className="text-[var(--color-accent)]">Presented with intent.</span>
+          </h1>
+          <p className="mt-7 max-w-[620px] text-lg leading-8 text-[var(--color-muted)]">
+            Build a portfolio that reads clearly, looks considered, and stays easy to update. Start
+            with a complete template, then shape every section in one focused workspace.
+          </p>
+          <div className="mt-8 flex flex-wrap items-center gap-4">
+            <Link href="/dashboard" className={cta}>
+              Create your portfolio <ArrowRight size={16} />
+            </Link>
+            <a
+              className="inline-flex items-center gap-2 text-sm font-extrabold whitespace-nowrap"
+              href="#templates"
+            >
+              <CirclePlay size={17} /> Explore templates
+            </a>
+          </div>
+        </div>
+        <aside className="border-t-2 border-[var(--color-ink)] pb-2">
+          <p className="py-4 text-xs font-extrabold tracking-[.12em] uppercase">
+            Built for a faster edit
+          </p>
+          {[
+            "Guided section-specific fields",
+            "Live preview while you write",
+            "A publish-ready subdomain",
+          ].map((item, index) => (
+            <div
+              className="grid grid-cols-[34px_1fr] border-t border-[var(--color-line)] py-4"
+              key={item}
+            >
+              <span className="font-[family-name:var(--font-mono)] text-xs text-[var(--color-accent)]">
+                0{index + 1}
+              </span>
+              <p className="text-sm leading-5 font-bold">{item}</p>
+            </div>
+          ))}
+        </aside>
+      </section>
+
+      <section
+        className="bg-[var(--color-ink)] px-6 text-[var(--color-panel)] max-sm:px-4"
+        id="templates"
+      >
+        <TemplateFrame />
+      </section>
+
+      <section className={`${shell} py-24 max-sm:py-16`} id="workflow">
+        <div className="grid grid-cols-[minmax(0,420px)_minmax(0,1fr)] gap-16 max-[860px]:grid-cols-1 max-[860px]:gap-8">
+          <div>
+            <p className="text-xs font-extrabold tracking-[.14em] text-[var(--color-accent)] uppercase">
+              A focused workflow
+            </p>
+            <h2 className="mt-4 text-[clamp(2.8rem,5vw,4.7rem)] leading-[.98] font-semibold tracking-[-.085em]">
+              Edit less.
+              <br />
+              Show more.
+            </h2>
+            <p className="mt-5 max-w-sm text-base leading-7 text-[var(--color-muted)]">
+              The studio keeps the work visible and the forms compact. You always know which part of
+              the portfolio you are shaping.
+            </p>
+          </div>
+          <div className="border-t border-[var(--color-line)]">
+            {[
+              {
+                Icon: LayoutTemplate,
+                title: "Pick a complete direction",
+                copy: "Preview realistic templates with projects, experience, services, skills, writing, and testimonials already represented.",
+              },
+              {
+                Icon: Sparkles,
+                title: "Work section by section",
+                copy: "Use a compact studio with dedicated tabs instead of one endless form.",
+              },
+              {
+                Icon: MoveUpRight,
+                title: "Publish when it reads well",
+                copy: "Preview privately, then publish the finished portfolio on your VeriWorkly subdomain.",
+              },
+            ].map(({ Icon, title, copy }) => (
+              <article
+                className="grid grid-cols-[44px_minmax(0,1fr)] gap-4 border-b border-[var(--color-line)] py-6"
+                key={title}
+              >
+                <span className="grid size-10 place-items-center rounded-full bg-[var(--color-accent-soft)] text-[var(--color-accent)]">
+                  <Icon size={17} />
+                </span>
+                <div>
+                  <h3 className="text-lg font-bold tracking-[-.03em]">{title}</h3>
+                  <p className="mt-2 max-w-xl text-sm leading-6 text-[var(--color-muted)]">
+                    {copy}
+                  </p>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-[var(--color-accent-soft)]">
+        <div
+          className={`${shell} grid grid-cols-[minmax(0,1fr)_320px] items-center gap-10 py-20 max-[760px]:grid-cols-1 max-sm:py-14`}
+        >
+          <div>
+            <p className="flex items-center gap-2 text-xs font-extrabold tracking-[.12em] text-[var(--color-accent)] uppercase">
+              <Check size={15} /> Draft for free
+            </p>
+            <h2 className="mt-4 max-w-3xl text-[clamp(2.8rem,5vw,4.8rem)] leading-[.98] font-semibold tracking-[-.085em]">
+              Build privately. Publish when it feels right.
+            </h2>
+          </div>
+          <article className="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-[var(--color-panel)] p-6">
+            <p className="text-sm font-extrabold">Portfolio Pro</p>
+            <p className="mt-4 text-4xl font-extrabold tracking-[-.08em]">
+              $12
+              <span className="ml-1 text-sm tracking-normal text-[var(--color-muted)]">
+                / month
+              </span>
+            </p>
+            <p className="mt-2 text-sm leading-6 text-[var(--color-muted)]">
+              One published subdomain and privacy-first portfolio analytics.
+            </p>
+            <Link className={`${cta} mt-5`} href="/billing">
+              See plans <ArrowRight size={15} />
+            </Link>
+          </article>
+        </div>
+      </section>
+
+      <footer
+        className={`${shell} flex min-h-[88px] items-center justify-between gap-4 text-sm text-[var(--color-muted)] max-sm:flex-col max-sm:items-start max-sm:justify-center`}
+      >
+        <Link className="font-extrabold text-[var(--color-ink)]" href="/">
+          VeriWorkly Portfolio
+        </Link>
+        <p>A sharper home for your work.</p>
+        <Link className="font-extrabold text-[var(--color-ink)]" href="/dashboard">
+          Open studio
+        </Link>
+      </footer>
+    </main>
+  );
+}
diff --git a/apps/portfolio/app/portfolios/[username]/page.tsx b/apps/portfolio/app/portfolios/[username]/page.tsx
new file mode 100644
index 0000000..9b3dd07
--- /dev/null
+++ b/apps/portfolio/app/portfolios/[username]/page.tsx
@@ -0,0 +1,82 @@
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { portfolioPublicUrl } from "@/config/site";
+
+import { getPublishedPortfolio } from "@/lib/published-portfolio";
+import { renderTemplate } from "@/templates/runtime/registry";
+import { PublicViewTracker } from "@/components/PublicViewTracker";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ username: string }>;
+}): Promise<Metadata> {
+  const { username } = await params;
+  const publication = await getPublishedPortfolio(username);
+  if (!publication)
+    return { title: "Portfolio not found", robots: { index: false, follow: false } };
+  const project = publication.snapshot;
+  const url = portfolioPublicUrl(publication.subdomain);
+  const title = project.seo.title || `${project.identity.name} | Portfolio`;
+  const images = project.seo.socialImage ? [{ url: project.seo.socialImage.url }] : undefined;
+  return {
+    title,
+    description: project.seo.description,
+    alternates: { canonical: url },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        "max-image-preview": "large",
+        "max-snippet": -1,
+        "max-video-preview": -1,
+      },
+    },
+    openGraph: {
+      type: "profile",
+      url,
+      title,
+      description: project.seo.description,
+      siteName: "VeriWorkly Portfolio",
+      images,
+    },
+    twitter: {
+      card: images ? "summary_large_image" : "summary",
+      title,
+      description: project.seo.description,
+      images,
+    },
+  };
+}
+
+export default async function Portfolio({ params }: { params: Promise<{ username: string }> }) {
+  const { username } = await params;
+  const publication = await getPublishedPortfolio(username);
+  if (!publication) notFound();
+  const project = publication.snapshot;
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "ProfilePage",
+    name: `${project.identity.name} portfolio`,
+    url: portfolioPublicUrl(publication.subdomain),
+    mainEntity: {
+      "@type": "Person",
+      name: project.identity.name,
+      jobTitle: project.identity.headline,
+      email: project.identity.email,
+      address: project.identity.location,
+    },
+  };
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }}
+      />
+      <PublicViewTracker subdomain={publication.subdomain} />
+      {await renderTemplate(project)}
+    </>
+  );
+}
diff --git a/apps/portfolio/app/preview/[documentId]/page.tsx b/apps/portfolio/app/preview/[documentId]/page.tsx
new file mode 100644
index 0000000..078672d
--- /dev/null
+++ b/apps/portfolio/app/preview/[documentId]/page.tsx
@@ -0,0 +1,51 @@
+import { cookies } from "next/headers";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { backendApiUrl } from "@/lib/backend";
+import { parsePortfolioContent } from "@/lib/portfolio";
+import { LivePortfolioPreview } from "@/components/LivePortfolioPreview";
+
+export const metadata = {
+  title: "Private portfolio preview",
+  robots: { index: false, follow: false },
+};
+
+export default async function PreviewPage({ params }: { params: Promise<{ documentId: string }> }) {
+  const { documentId } = await params;
+  let response: Response;
+  try {
+    response = await fetch(
+      backendApiUrl(`/portfolios/preview/${encodeURIComponent(documentId)}`, true),
+      {
+        headers: { Cookie: (await cookies()).toString() },
+        cache: "no-store",
+      },
+    );
+  } catch {
+    return <PreviewUnavailable />;
+  }
+  if (response.status === 404) notFound();
+  if (!response.ok) return <PreviewUnavailable />;
+  const payload = await response.json();
+  return <LivePortfolioPreview initialContent={parsePortfolioContent(payload.data.content)} />;
+}
+
+function PreviewUnavailable() {
+  return (
+    <main className="grid min-h-screen place-items-center bg-[var(--color-paper)] p-6 text-center">
+      <div className="max-w-sm rounded-xl border border-[var(--color-line)] bg-[var(--color-panel)] p-6">
+        <h1 className="text-lg font-extrabold">Preview temporarily unavailable</h1>
+        <p className="mt-2 text-sm leading-6 text-[var(--color-muted)]">
+          We could not load this private preview. Return to the workspace and try again after the
+          connection recovers.
+        </p>
+        <Link
+          className="mt-5 inline-flex min-h-10 items-center rounded-lg bg-[var(--color-accent)] px-4 text-xs font-extrabold text-[var(--color-accent-ink)]"
+          href="/dashboard"
+        >
+          Return to workspace
+        </Link>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/portfolio/app/robots.ts b/apps/portfolio/app/robots.ts
new file mode 100644
index 0000000..bc1efca
--- /dev/null
+++ b/apps/portfolio/app/robots.ts
@@ -0,0 +1,9 @@
+import type { MetadataRoute } from "next";
+import { portfolioSiteConfig } from "@/config/site";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [{ userAgent: "*", allow: "/", disallow: ["/dashboard", "/templates/*/preview"] }],
+    sitemap: `${portfolioSiteConfig.url}/sitemap.xml`,
+  };
+}
diff --git a/apps/portfolio/app/sitemap.ts b/apps/portfolio/app/sitemap.ts
new file mode 100644
index 0000000..9a08207
--- /dev/null
+++ b/apps/portfolio/app/sitemap.ts
@@ -0,0 +1,36 @@
+import type { MetadataRoute } from "next";
+import { portfolioPublicUrl, portfolioSiteConfig } from "@/config/site";
+import { backendApiUrl } from "@/lib/backend";
+
+export const revalidate = 3600;
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const routes: MetadataRoute.Sitemap = [
+    {
+      url: portfolioSiteConfig.url,
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 1,
+    },
+  ];
+  try {
+    const response = await fetch(backendApiUrl("/portfolios/public", true), {
+      next: { revalidate, tags: ["portfolios-list"] },
+    });
+    if (!response.ok) return routes;
+    const payload = (await response.json()) as {
+      data?: Array<{ subdomain: string; updatedAt: string }>;
+    };
+    return [
+      ...routes,
+      ...(payload.data ?? []).map((publication) => ({
+        url: portfolioPublicUrl(publication.subdomain),
+        lastModified: new Date(publication.updatedAt),
+        changeFrequency: "weekly" as const,
+        priority: 0.8,
+      })),
+    ];
+  } catch {
+    return routes;
+  }
+}
diff --git a/apps/portfolio/app/templates/[id]/preview/page.tsx b/apps/portfolio/app/templates/[id]/preview/page.tsx
new file mode 100644
index 0000000..5a9ac0c
--- /dev/null
+++ b/apps/portfolio/app/templates/[id]/preview/page.tsx
@@ -0,0 +1,15 @@
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { DraftPreview } from "@/components/DraftPreview";
+import { isTemplateId } from "@/templates/catalog/templates";
+
+export const metadata: Metadata = {
+  title: "Portfolio preview",
+  robots: { index: false, follow: false },
+};
+
+export default async function Preview({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  if (!isTemplateId(id)) notFound();
+  return <DraftPreview templateId={id} />;
+}
diff --git a/apps/portfolio/app/tokens.css b/apps/portfolio/app/tokens.css
new file mode 100644
index 0000000..6d7beb7
--- /dev/null
+++ b/apps/portfolio/app/tokens.css
@@ -0,0 +1,49 @@
+:root {
+  --color-paper: oklch(97% 0.008 95);
+  --color-paper-2: oklch(94% 0.01 95);
+  --color-panel: oklch(100% 0 0);
+  --color-panel-raised: oklch(99% 0.004 95);
+  --color-ink: oklch(20% 0.012 250);
+  --color-ink-soft: oklch(31% 0.018 250);
+  --color-muted: oklch(49% 0.018 250);
+  --color-line: oklch(20% 0.012 250 / 14%);
+  --color-line-strong: oklch(20% 0.012 250 / 24%);
+  --color-accent: oklch(55% 0.2 258);
+  --color-accent-strong: oklch(46% 0.2 258);
+  --color-accent-soft: oklch(93% 0.035 258);
+  --color-accent-ink: oklch(99% 0.005 258);
+  --color-success: oklch(52% 0.15 158);
+  --color-success-soft: oklch(94% 0.04 158);
+  --color-warning: oklch(59% 0.14 68);
+  --color-warning-soft: oklch(95% 0.05 68);
+  --color-danger: oklch(54% 0.2 28);
+  --color-danger-soft: oklch(95% 0.035 28);
+  --color-panel-18: oklch(100% 0 0 / 18%);
+  --color-panel-20: oklch(100% 0 0 / 20%);
+  --color-panel-22: oklch(100% 0 0 / 22%);
+  --color-shadow: oklch(10% 0.02 250 / 18%);
+  --color-paper-glass: oklch(97% 0.008 95 / 90%);
+  --font-body: "Geist", "Inter", Arial, Helvetica, sans-serif;
+  --font-display: "Geist", "Inter", Arial, Helvetica, sans-serif;
+  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  --space-2xl: 48px;
+  --space-3xl: 72px;
+  --space-4xl: 112px;
+  --radius-xs: 6px;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-xl: 32px;
+  --rule: 1px solid var(--color-line);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-fast: 160ms;
+  --dur-medium: 320ms;
+  --dur-slow: 700ms;
+}
diff --git a/apps/portfolio/components/BillingWorkspace.tsx b/apps/portfolio/components/BillingWorkspace.tsx
new file mode 100644
index 0000000..c00c4fb
--- /dev/null
+++ b/apps/portfolio/components/BillingWorkspace.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Link from "next/link";
+import { ArrowLeft, Check, ExternalLink, LoaderCircle, ShieldCheck, Sparkles } from "lucide-react";
+import { backendApiUrl } from "@/lib/backend";
+
+type BillingSummary = {
+  plan: string;
+  status: string;
+  interval: "MONTHLY" | "ANNUAL" | null;
+  currentPeriodEnd: string | null;
+  cancelAtPeriodEnd: boolean;
+  graceEndsAt: string | null;
+  canPublish: boolean;
+};
+
+const benefits = [
+  "One published VeriWorkly subdomain",
+  "Privacy-first portfolio view analytics",
+  "Unlimited draft edits and private previews",
+  "Both production portfolio templates",
+];
+
+export function BillingWorkspace() {
+  const [billing, setBilling] = useState<BillingSummary | null>(null);
+  const [loading, setLoading] = useState("");
+  const [message, setMessage] = useState("");
+  const loadBilling = useCallback(async () => {
+    setLoading("/billing/me");
+    setMessage("");
+    try {
+      const response = await fetch(backendApiUrl("/billing/me"), { credentials: "include" });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok || !payload.data)
+        throw new Error(payload.message || "Could not load billing status.");
+      setBilling(payload.data);
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : "Could not load billing status.");
+    } finally {
+      setLoading("");
+    }
+  }, []);
+  useEffect(() => {
+    const timer = window.setTimeout(() => void loadBilling(), 0);
+    return () => window.clearTimeout(timer);
+  }, [loadBilling]);
+
+  const open = async (path: string, body?: object) => {
+    setLoading(path);
+    setMessage("");
+    try {
+      const response = await fetch(backendApiUrl(path), {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body ?? {}),
+      });
+      const payload = await response.json();
+      if (!response.ok) throw new Error(payload.message || "Billing request failed.");
+      window.location.assign(payload.data.url);
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : "Billing request failed.");
+      setLoading("");
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-[var(--color-paper)]">
+      <header className="border-b border-[var(--color-line)]">
+        <div className="mx-auto flex min-h-[68px] max-w-6xl items-center justify-between px-5">
+          <Link className="inline-flex items-center gap-2 text-sm font-extrabold" href="/dashboard">
+            <ArrowLeft size={15} /> Portfolio studio
+          </Link>
+          <span className="text-xs font-bold text-[var(--color-muted)]">Secure billing</span>
+        </div>
+      </header>
+      <div className="mx-auto max-w-6xl px-5 py-16 max-sm:py-10">
+        <section className="grid grid-cols-[minmax(0,1fr)_300px] items-end gap-10 border-b border-[var(--color-line)] pb-12 max-[780px]:grid-cols-1">
+          <div>
+            <p className="flex items-center gap-2 text-xs font-extrabold tracking-[.14em] text-[var(--color-accent)] uppercase">
+              <Sparkles size={14} /> Portfolio Pro
+            </p>
+            <h1 className="mt-5 max-w-3xl text-[clamp(3.4rem,7vw,6.2rem)] leading-[.94] font-semibold tracking-[-.1em]">
+              Publish the portfolio you are proud to send.
+            </h1>
+            <p className="mt-6 max-w-2xl text-lg leading-8 text-[var(--color-muted)]">
+              Drafts and private previews stay free. Upgrade only when your site is ready for the
+              world.
+            </p>
+          </div>
+          <div className="rounded-[var(--radius-lg)] bg-[var(--color-ink)] p-5 text-[var(--color-panel)]">
+            <ShieldCheck size={20} />
+            <p className="mt-4 text-sm font-extrabold">No pressure to publish early.</p>
+            <p className="mt-2 text-sm leading-6 text-[var(--color-panel)]/70">
+              Build privately for as long as you need. Your draft remains editable on either plan.
+            </p>
+          </div>
+        </section>
+
+        {message ? (
+          <div
+            className="mt-6 flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-sm)] border border-[var(--color-line)] bg-[var(--color-panel)] p-4 text-sm font-bold"
+            role="alert"
+          >
+            <p>{message}</p>
+            {!billing ? (
+              <button className="text-[var(--color-accent)]" onClick={() => void loadBilling()}>
+                Try again
+              </button>
+            ) : null}
+          </div>
+        ) : null}
+
+        <section className="grid grid-cols-[minmax(0,1fr)_minmax(0,1.35fr)] gap-6 py-10 max-[860px]:grid-cols-1">
+          <div>
+            <p className="text-xs font-extrabold tracking-[.12em] text-[var(--color-muted)] uppercase">
+              Included with Pro
+            </p>
+            <ul className="mt-5 space-y-4">
+              {benefits.map((benefit) => (
+                <li className="flex gap-3 text-sm font-bold" key={benefit}>
+                  <Check className="mt-0.5 shrink-0 text-[var(--color-accent)]" size={16} />
+                  {benefit}
+                </li>
+              ))}
+            </ul>
+            {billing ? (
+              <article className="mt-9 rounded-[var(--radius-md)] border border-[var(--color-line)] bg-[var(--color-panel)] p-4">
+                <p className="text-xs font-extrabold tracking-[.12em] text-[var(--color-muted)] uppercase">
+                  Current access
+                </p>
+                <div className="mt-2 flex flex-wrap items-center justify-between gap-3">
+                  <p className="text-lg font-extrabold">
+                    {billing.plan === "PORTFOLIO_PRO" ? "Portfolio Pro" : "Free drafts"}{" "}
+                    <span className="text-sm text-[var(--color-muted)]">· {billing.status}</span>
+                  </p>
+                  {billing.plan === "PORTFOLIO_PRO" ? (
+                    <button
+                      className="inline-flex items-center gap-2 text-sm font-extrabold whitespace-nowrap text-[var(--color-accent)]"
+                      onClick={() => void open("/billing/portal")}
+                    >
+                      Manage billing <ExternalLink size={14} />
+                    </button>
+                  ) : null}
+                </div>
+                {billing.currentPeriodEnd ? (
+                  <p className="mt-2 text-sm text-[var(--color-muted)]">
+                    {billing.cancelAtPeriodEnd ? "Access ends" : "Renews"}{" "}
+                    {new Date(billing.currentPeriodEnd).toLocaleDateString()}.
+                  </p>
+                ) : null}
+                {billing.graceEndsAt ? (
+                  <p className="mt-2 text-sm font-bold text-[var(--color-danger)]">
+                    Payment recovery grace period ends{" "}
+                    {new Date(billing.graceEndsAt).toLocaleDateString()}.
+                  </p>
+                ) : null}
+              </article>
+            ) : null}
+          </div>
+          <div className="grid grid-cols-2 gap-4 max-sm:grid-cols-1">
+            <Plan
+              title="Monthly"
+              price="$12"
+              suffix="/ month"
+              copy="Flexible billing for a portfolio you can pause or change later."
+              onClick={() => void open("/billing/checkout", { interval: "monthly" })}
+              loading={loading === "/billing/checkout"}
+              disabled={loading !== ""}
+            />
+            <Plan
+              featured
+              title="Annual"
+              price="$120"
+              suffix="/ year"
+              copy="The same full access with two months effectively included."
+              note="Save $24 each year"
+              onClick={() => void open("/billing/checkout", { interval: "annual" })}
+              loading={loading === "/billing/checkout"}
+              disabled={loading !== ""}
+            />
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}
+
+function Plan({
+  title,
+  price,
+  suffix,
+  copy,
+  note,
+  featured,
+  onClick,
+  loading,
+  disabled,
+}: {
+  title: string;
+  price: string;
+  suffix: string;
+  copy: string;
+  note?: string;
+  featured?: boolean;
+  onClick: () => void;
+  loading: boolean;
+  disabled: boolean;
+}) {
+  return (
+    <article
+      className={`flex min-h-[350px] flex-col rounded-[var(--radius-lg)] border p-5 ${featured ? "border-[var(--color-accent)] bg-[var(--color-accent-soft)]" : "border-[var(--color-line)] bg-[var(--color-panel)]"}`}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <p className="text-sm font-extrabold">{title}</p>
+        {featured ? (
+          <span className="rounded-full bg-[var(--color-accent)] px-2.5 py-1 text-[10px] font-extrabold tracking-[.08em] text-[var(--color-accent-ink)] uppercase">
+            Best value
+          </span>
+        ) : null}
+      </div>
+      <p className="mt-8 text-5xl font-extrabold tracking-[-.1em]">
+        {price}
+        <span className="ml-1 text-sm tracking-normal text-[var(--color-muted)]">{suffix}</span>
+      </p>
+      <p className="mt-5 text-sm leading-6 text-[var(--color-muted)]">{copy}</p>
+      <p className="mt-3 text-xs font-extrabold text-[var(--color-accent)]">
+        {note ?? "Cancel when you need to"}
+      </p>
+      <button
+        className={`mt-auto inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-full px-4 text-sm font-extrabold whitespace-nowrap transition ${featured ? "bg-[var(--color-accent)] text-[var(--color-accent-ink)] hover:bg-[var(--color-accent-strong)]" : "bg-[var(--color-ink)] text-[var(--color-panel)]"}`}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {loading ? <LoaderCircle className="animate-spin" size={15} /> : null} Choose{" "}
+        {title.toLowerCase()}
+      </button>
+    </article>
+  );
+}
diff --git a/apps/portfolio/components/DashboardWorkspace.tsx b/apps/portfolio/components/DashboardWorkspace.tsx
new file mode 100644
index 0000000..276518f
--- /dev/null
+++ b/apps/portfolio/components/DashboardWorkspace.tsx
@@ -0,0 +1,1122 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronDown,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  Globe2,
+  LoaderCircle,
+  Palette,
+  Plus,
+  Save,
+  Share2,
+  Trash2,
+  Upload,
+  UserRound,
+  Files,
+} from "lucide-react";
+
+import { portfolioPublicUrl } from "@/config/site";
+import {
+  createId,
+  normalizeSlug,
+  portfolioSectionTypes,
+  type PortfolioContent,
+  type PortfolioSectionType,
+} from "@/lib/portfolio";
+import { useShallow } from "zustand/react/shallow";
+import { usePortfolioStore } from "@/store/portfolio-store";
+
+const sectionTypes = portfolioSectionTypes;
+const inputClass =
+  "w-full rounded-[var(--radius-sm)] border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2.5 text-sm text-[var(--color-ink)] outline-none transition duration-150 placeholder:text-[var(--color-muted)]/70 hover:border-[var(--color-line-strong)] focus:border-[var(--color-accent)] focus:ring-4 focus:ring-[var(--color-accent-soft)]";
+const buttonClass =
+  "inline-flex min-h-10 items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-sm)] bg-[var(--color-accent)] px-3.5 text-xs font-extrabold text-[var(--color-accent-ink)] transition duration-150 hover:-translate-y-0.5 hover:bg-[var(--color-accent-strong)] disabled:cursor-not-allowed disabled:opacity-50";
+
+const sectionDetails: Record<PortfolioSectionType, { label: string; description: string }> = {
+  projects: { label: "Projects", description: "Case studies and shipped work." },
+  experience: { label: "Experience", description: "Roles, companies, and outcomes." },
+  services: { label: "Services", description: "Ways clients can work with you." },
+  skills: { label: "Skills", description: "Tools and areas of expertise." },
+  education: { label: "Education", description: "Courses, degrees, and training." },
+  writing: { label: "Writing", description: "Articles, talks, or publications." },
+  testimonials: { label: "Testimonials", description: "Credible words from collaborators." },
+  awards: { label: "Awards", description: "Recognition and milestones." },
+  contact: { label: "Contact", description: "A closing invitation to reach out." },
+};
+
+export function DashboardWorkspace() {
+  const loadWorkspace = usePortfolioStore((state) => state.loadWorkspace);
+  const workspaceState = usePortfolioStore((state) => state.workspaceState);
+  const saveDraft = usePortfolioStore((state) => state.saveDraft);
+  const ready = usePortfolioStore((state) => state.ready);
+
+  // Load workspace on mount
+  useEffect(() => {
+    void loadWorkspace();
+  }, [loadWorkspace]);
+
+  // Interval-based background autosave (runs every 15 seconds, only if isDirty is true)
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const state = usePortfolioStore.getState();
+      if (state.ready && state.isDirty) {
+        void saveDraft();
+      }
+    }, 15000); // 15 seconds interval
+
+    return () => clearInterval(interval);
+  }, [saveDraft]);
+
+  if (workspaceState === "loading" && !ready) {
+    return (
+      <div
+        className="grid min-h-screen place-items-center bg-[var(--color-paper)]"
+        aria-live="polite"
+      >
+        <div className="text-center">
+          <LoaderCircle className="mx-auto animate-spin text-[var(--color-accent)]" />
+          <p className="mt-3 text-xs font-bold text-[var(--color-muted)]">
+            Loading your workspace...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <main className="paper-noise min-h-screen bg-[var(--color-paper)]">
+      <WorkspaceHeader />
+      <div className="mx-auto grid max-w-[1580px] grid-cols-[minmax(0,580px)_minmax(0,1fr)] gap-5 p-5 max-[980px]:grid-cols-1 max-sm:p-3">
+        <section className="space-y-4">
+          <WorkspaceTitleSection />
+          <WorkspaceMessage />
+          <EditorPanelSelector />
+          <ProUpgradeCard />
+          <EditorPanelContainer />
+        </section>
+        <PreviewPane />
+      </div>
+    </main>
+  );
+}
+
+function WorkspaceHeader() {
+  const status = usePortfolioStore((state) => state.status);
+  const canPublish = usePortfolioStore((state) => state.billing.canPublish);
+  const saveDraft = usePortfolioStore((state) => state.saveDraft);
+  const publish = usePortfolioStore((state) => state.publish);
+
+  return (
+    <header className="sticky top-0 z-30 flex min-h-16 items-center justify-between border-b border-[var(--color-line)] bg-[var(--color-paper-glass)] px-5 backdrop-blur-xl">
+      <Link
+        href="/"
+        className="flex items-center gap-2.5 text-sm font-extrabold tracking-[-.025em]"
+      >
+        <Image src="/veriworkly-logo.png" width={28} height={28} alt="" priority />
+        <span>
+          VeriWorkly{" "}
+          <span className="font-semibold text-[var(--color-muted)]">Portfolio Studio</span>
+        </span>
+      </Link>
+      <div className="flex items-center gap-2">
+        <span className="hidden text-xs font-bold text-[var(--color-muted)] sm:inline">
+          {status === "Unsaved changes" ? "Unsaved changes (saving in bg)" : status}
+        </span>
+        <Link
+          className={`${buttonClass} bg-[var(--color-panel)] text-[var(--color-ink)] ring-1 ring-[var(--color-line)]`}
+          href="/billing"
+        >
+          Billing
+        </Link>
+        <button className={buttonClass} onClick={() => void saveDraft()}>
+          <Save size={14} /> Save
+        </button>
+        <button
+          className={`${buttonClass} bg-[var(--color-ink)]`}
+          onClick={() => void publish()}
+          disabled={!canPublish}
+        >
+          <Globe2 size={14} /> Publish
+        </button>
+      </div>
+    </header>
+  );
+}
+
+function WorkspaceTitleSection() {
+  const name = usePortfolioStore((state) => state.content.identity.name);
+  const analytics = usePortfolioStore((state) => state.analytics);
+  const publication = usePortfolioStore(useShallow((state) => state.publication));
+  const unpublish = usePortfolioStore((state) => state.unpublish);
+
+  return (
+    <div className="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-[var(--color-ink)] p-4 text-[var(--color-panel)]">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <p className="text-[11px] font-extrabold tracking-[.14em] text-[var(--color-panel)]/60 uppercase">
+            Editing portfolio
+          </p>
+          <h1 className="mt-1 text-xl font-bold tracking-[-.04em]">
+            {name || "Untitled portfolio"}
+          </h1>
+        </div>
+        <span className="rounded-full bg-[var(--color-panel-18)] px-3 py-1.5 text-xs font-bold">
+          {analytics} views
+        </span>
+      </div>
+      <div className="mt-3 flex flex-wrap items-center gap-3 text-xs font-bold">
+        {publication?.status === "LIVE" ? (
+          <a
+            className="text-[var(--color-accent)]"
+            href={portfolioPublicUrl(publication.subdomain)}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Open live site <ExternalLink className="inline" size={12} />
+          </a>
+        ) : null}
+        {publication && publication.status !== "SUSPENDED" ? (
+          <button
+            className="cursor-pointer text-[var(--color-panel)]/70"
+            onClick={() => void unpublish()}
+          >
+            Unpublish
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function WorkspaceMessage() {
+  const message = usePortfolioStore((state) => state.message);
+  if (!message) return null;
+  return (
+    <p
+      className="rounded-lg border border-[var(--color-line)] bg-[var(--color-panel)] p-3 text-xs font-bold"
+      role="status"
+    >
+      {message}
+    </p>
+  );
+}
+
+function EditorPanelSelector() {
+  const activePanel = usePortfolioStore((state) => state.activePanel);
+  const setActivePanel = usePortfolioStore((state) => state.setActivePanel);
+
+  return (
+    <nav
+      className="grid grid-cols-4 gap-1 rounded-[var(--radius-md)] border border-[var(--color-line)] bg-[var(--color-panel)] p-1"
+      aria-label="Portfolio editor sections"
+    >
+      <PanelButton
+        active={activePanel === "profile"}
+        icon={<UserRound size={15} />}
+        label="Profile"
+        onClick={() => setActivePanel("profile")}
+      />
+      <PanelButton
+        active={activePanel === "sections"}
+        icon={<Files size={15} />}
+        label="Sections"
+        onClick={() => setActivePanel("sections")}
+      />
+      <PanelButton
+        active={activePanel === "style"}
+        icon={<Palette size={15} />}
+        label="Style"
+        onClick={() => setActivePanel("style")}
+      />
+      <PanelButton
+        active={activePanel === "sharing"}
+        icon={<Share2 size={15} />}
+        label="Sharing"
+        onClick={() => setActivePanel("sharing")}
+      />
+    </nav>
+  );
+}
+
+function ProUpgradeCard() {
+  const canPublish = usePortfolioStore((state) => state.billing.canPublish);
+  if (canPublish) return null;
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-[var(--radius-md)] border border-[var(--color-line)] bg-[var(--color-accent-soft)] p-3 text-xs">
+      <p>
+        <strong>Ready to publish?</strong> Portfolio Pro unlocks your live subdomain.
+      </p>
+      <Link className="shrink-0 font-extrabold text-[var(--color-accent)]" href="/billing">
+        See plans
+      </Link>
+    </div>
+  );
+}
+
+function EditorPanelContainer() {
+  const activePanel = usePortfolioStore((state) => state.activePanel);
+  if (activePanel === "profile") return <ProfilePanel />;
+  if (activePanel === "sections") return <SectionsPanel />;
+  if (activePanel === "style") return <StylePanel />;
+  if (activePanel === "sharing") return <SharingPanel />;
+  return null;
+}
+
+function ProfilePanel() {
+  return (
+    <EditorCard
+      title="Profile essentials"
+      description="The first screen of your portfolio. Keep it specific and easy to scan."
+    >
+      <div className="grid grid-cols-2 gap-3 max-sm:grid-cols-1">
+        <ProfileField fieldName="name" label="Name" hint="Your professional name." required />
+        <ProfileField
+          fieldName="email"
+          label="Email"
+          hint="Used by your contact links."
+          required
+          type="email"
+        />
+        <SubdomainField />
+        <ProfileField
+          fieldName="location"
+          label="Location"
+          hint="Optional. City or timezone."
+          placeholder="Bengaluru, India"
+        />
+        <ProfileField
+          fieldName="headline"
+          label="Headline"
+          hint="Say what you do and why it matters."
+          textarea
+          rows={2}
+          maxLength={240}
+        />
+        <ProfileField
+          fieldName="bio"
+          label="Short introduction"
+          hint="Add your point of view, not a full resume."
+          textarea
+          rows={4}
+          maxLength={1600}
+        />
+        <ProfileField
+          fieldName="availability"
+          label="Availability"
+          hint="Example: Available for select product design projects."
+        />
+        <AvatarField />
+      </div>
+    </EditorCard>
+  );
+}
+
+function ProfileField({
+  fieldName,
+  label,
+  hint,
+  required,
+  type = "text",
+  placeholder,
+  textarea,
+  rows,
+  maxLength,
+}: {
+  fieldName: keyof PortfolioContent["identity"];
+  label: string;
+  hint?: string;
+  required?: boolean;
+  type?: string;
+  placeholder?: string;
+  textarea?: boolean;
+  rows?: number;
+  maxLength?: number;
+}) {
+  const value = usePortfolioStore((state) => {
+    const val = state.content.identity[fieldName];
+    return typeof val === "string" ? val : "";
+  });
+  const updateIdentity = usePortfolioStore((state) => state.updateIdentity);
+
+  const lengthHint = textarea && maxLength ? `${value.length}/${maxLength} characters. ` : "";
+  const fullHint = hint ? `${lengthHint}${hint}` : lengthHint || undefined;
+
+  return (
+    <Field label={label} hint={fullHint} wide={textarea || fieldName === "availability"}>
+      {textarea ? (
+        <textarea
+          className={inputClass}
+          maxLength={maxLength}
+          rows={rows}
+          value={value}
+          onChange={(event) => updateIdentity({ [fieldName]: event.target.value })}
+        />
+      ) : (
+        <input
+          className={inputClass}
+          required={required}
+          type={type}
+          placeholder={placeholder}
+          value={value}
+          onChange={(event) => updateIdentity({ [fieldName]: event.target.value })}
+        />
+      )}
+    </Field>
+  );
+}
+
+function SubdomainField() {
+  const slug = usePortfolioStore((state) => state.slug);
+  const updateSlug = usePortfolioStore((state) => state.updateSlug);
+
+  return (
+    <Field
+      label="Subdomain"
+      hint={portfolioPublicUrl(slug || "your-name").replace(/^https?:\/\//, "")}
+    >
+      <input
+        className={inputClass}
+        required
+        value={slug}
+        onChange={(event) => updateSlug(normalizeSlug(event.target.value))}
+      />
+    </Field>
+  );
+}
+
+function AvatarField() {
+  const avatar = usePortfolioStore((state) => state.content.identity.avatar);
+  const updateIdentity = usePortfolioStore((state) => state.updateIdentity);
+
+  return (
+    <Field wide label="Avatar">
+      <AssetUpload
+        kind="AVATAR"
+        value={avatar?.url}
+        onUploaded={(uploadedAvatar) => updateIdentity({ avatar: uploadedAvatar })}
+      />
+    </Field>
+  );
+}
+
+function StylePanel() {
+  const templateId = usePortfolioStore((state) => state.content.templateId);
+  const updateContent = usePortfolioStore((state) => state.updateContent);
+
+  return (
+    <EditorCard
+      title="Visual direction"
+      description="Your content stays intact when you switch templates."
+    >
+      <div className="grid grid-cols-2 gap-2">
+        {(["signal", "atelier"] as const).map((id) => (
+          <button
+            key={id}
+            className={`rounded-[var(--radius-sm)] border p-3 text-left transition ${
+              templateId === id
+                ? "border-[var(--color-accent)] bg-[var(--color-accent-soft)]"
+                : "border-[var(--color-line)] bg-[var(--color-panel)] hover:border-[var(--color-line-strong)]"
+            }`}
+            onClick={() => updateContent({ templateId: id })}
+          >
+            <strong className="block text-sm capitalize">{id}</strong>
+            <span className="mt-1 block text-xs leading-5 text-[var(--color-muted)]">
+              {id === "signal"
+                ? "Clean, technical, proof-first."
+                : "Editorial, expressive, image-led."}
+            </span>
+          </button>
+        ))}
+      </div>
+    </EditorCard>
+  );
+}
+
+function SharingPanel() {
+  return (
+    <>
+      <EditorCard
+        title="Search and sharing"
+        description="Control how your portfolio appears in search results and shared links."
+      >
+        <div className="grid gap-3">
+          <SEOField fieldName="title" label="SEO title" />
+          <SEOField fieldName="description" label="SEO description" textarea rows={2} />
+          <SEOSocialImageField />
+        </div>
+      </EditorCard>
+      <SocialLinksCard />
+    </>
+  );
+}
+
+function SEOField({
+  fieldName,
+  label,
+  hint,
+  textarea,
+  rows,
+}: {
+  fieldName: keyof PortfolioContent["seo"];
+  label: string;
+  hint?: string;
+  textarea?: boolean;
+  rows?: number;
+}) {
+  const value = usePortfolioStore((state) => {
+    const val = state.content.seo[fieldName];
+    return typeof val === "string" ? val : "";
+  });
+  const updateContent = usePortfolioStore((state) => state.updateContent);
+
+  const onChange = (val: string) => {
+    const currentSeo = usePortfolioStore.getState().content.seo;
+    updateContent({ seo: { ...currentSeo, [fieldName]: val } });
+  };
+
+  return (
+    <Field label={label} hint={hint}>
+      {textarea ? (
+        <textarea
+          className={inputClass}
+          rows={rows}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      ) : (
+        <input
+          className={inputClass}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+        />
+      )}
+    </Field>
+  );
+}
+
+function SEOSocialImageField() {
+  const socialImage = usePortfolioStore((state) => state.content.seo.socialImage);
+  const updateContent = usePortfolioStore((state) => state.updateContent);
+
+  return (
+    <Field label="Social sharing image">
+      <AssetUpload
+        kind="SOCIAL_IMAGE"
+        value={socialImage?.url}
+        onUploaded={(img) => {
+          const currentSeo = usePortfolioStore.getState().content.seo;
+          updateContent({ seo: { ...currentSeo, socialImage: img } });
+        }}
+      />
+    </Field>
+  );
+}
+
+function SocialLinksCard() {
+  const linkCount = usePortfolioStore((state) => state.content.socialLinks.length);
+  const updateContent = usePortfolioStore((state) => state.updateContent);
+
+  const addLink = () => {
+    const currentLinks = usePortfolioStore.getState().content.socialLinks;
+    updateContent({ socialLinks: [...currentLinks, { id: createId("link"), label: "", url: "" }] });
+  };
+
+  return (
+    <EditorCard
+      title="Social links"
+      description="Add only the places that strengthen your professional story."
+    >
+      <div className="space-y-2">
+        {Array.from({ length: linkCount }).map((_, index) => (
+          <SocialLinkItemRow key={index} index={index} />
+        ))}
+        <button
+          className="cursor-pointer text-xs font-bold text-[var(--color-accent)]"
+          onClick={addLink}
+        >
+          <Plus className="mr-1 inline" size={12} />
+          Add social link
+        </button>
+      </div>
+    </EditorCard>
+  );
+}
+
+function SocialLinkItemRow({ index }: { index: number }) {
+  const link = usePortfolioStore(useShallow((state) => state.content.socialLinks[index]));
+  const updateContent = usePortfolioStore((state) => state.updateContent);
+
+  if (!link) return null;
+
+  const updateField = (key: "label" | "url", val: string) => {
+    const currentLinks = usePortfolioStore.getState().content.socialLinks;
+    const updated = currentLinks.map((item, i) => (i === index ? { ...item, [key]: val } : item));
+    updateContent({ socialLinks: updated });
+  };
+
+  const removeLink = () => {
+    const currentLinks = usePortfolioStore.getState().content.socialLinks;
+    updateContent({ socialLinks: currentLinks.filter((_, i) => i !== index) });
+  };
+
+  return (
+    <div className="grid grid-cols-[140px_1fr_auto] gap-2 max-sm:grid-cols-1">
+      <input
+        className={inputClass}
+        placeholder="Label"
+        value={link.label}
+        onChange={(event) => updateField("label", event.target.value)}
+      />
+      <input
+        className={inputClass}
+        placeholder="https://..."
+        value={link.url}
+        onChange={(event) => updateField("url", event.target.value)}
+      />
+      <button
+        title="Remove link"
+        className="cursor-pointer p-2 text-[var(--color-muted)] transition hover:text-[var(--color-danger)]"
+        onClick={removeLink}
+      >
+        <Trash2 size={14} />
+      </button>
+    </div>
+  );
+}
+
+function SectionsPanel() {
+  const sectionIds = usePortfolioStore(
+    useShallow((state) => state.content.sections.map((s) => s.id)),
+  );
+  const activeSectionTypes = usePortfolioStore(
+    useShallow((state) => state.content.sections.map((s) => s.type)),
+  );
+  const addSection = usePortfolioStore((state) => state.addSection);
+
+  return (
+    <EditorCard
+      title="Portfolio sections"
+      description="Lead with proof. Add only the sections that help someone understand your work."
+    >
+      <div className="space-y-3">
+        {sectionIds.map((id, index) => (
+          <SectionEditor key={id} sectionId={id} index={index} />
+        ))}
+        <div className="flex flex-wrap gap-2">
+          {sectionTypes
+            .filter((type) => !activeSectionTypes.includes(type))
+            .map((type) => (
+              <button
+                className="cursor-pointer rounded-lg border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2 text-left text-xs font-bold transition hover:border-[var(--color-accent)] hover:text-[var(--color-accent)]"
+                key={type}
+                onClick={() => addSection(type)}
+              >
+                <Plus className="mr-1 inline" size={12} />
+                {sectionDetails[type].label}
+              </button>
+            ))}
+        </div>
+      </div>
+    </EditorCard>
+  );
+}
+
+function SectionEditor({ sectionId, index }: { sectionId: string; index: number }) {
+  const sectionMeta = usePortfolioStore(
+    useShallow((state) => {
+      const s = state.content.sections.find((sec) => sec.id === sectionId);
+      if (!s) return null;
+      return {
+        title: s.title,
+        type: s.type,
+        visible: s.visible,
+        itemsCount: s.items.length,
+      };
+    }),
+  );
+  const itemIds = usePortfolioStore(
+    useShallow((state) => {
+      const s = state.content.sections.find((sec) => sec.id === sectionId);
+      return s ? s.items.map((item) => String(item.id ?? "")) : [];
+    }),
+  );
+
+  const updateSection = usePortfolioStore((state) => state.updateSection);
+  const moveSection = usePortfolioStore((state) => state.moveSection);
+  const removeSection = usePortfolioStore((state) => state.removeSection);
+
+  const [expanded, setExpanded] = useState(sectionMeta?.type === "projects");
+
+  if (!sectionMeta) return null;
+  const details = sectionDetails[sectionMeta.type];
+
+  const onAdd = () => {
+    const section = usePortfolioStore.getState().content.sections.find((s) => s.id === sectionId);
+    if (!section) return;
+    updateSection(sectionId, {
+      items: [
+        ...section.items,
+        { id: createId("item"), title: "", summary: "", year: "", tags: [] },
+      ],
+    });
+  };
+
+  return (
+    <div className="rounded-[var(--radius-md)] border border-[var(--color-line)] bg-[var(--color-panel-raised)] p-3">
+      <div className="flex items-center gap-2">
+        <button
+          className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 text-left"
+          onClick={() => setExpanded((current) => !current)}
+          aria-expanded={expanded}
+        >
+          <ChevronDown
+            className={`shrink-0 transition-transform ${expanded ? "rotate-180" : ""}`}
+            size={16}
+          />
+          <div className="min-w-0">
+            <p className="truncate text-sm font-extrabold">{sectionMeta.title}</p>
+            <p className="mt-0.5 text-[11px] leading-4 text-[var(--color-muted)]">
+              {details.label} · {sectionMeta.itemsCount}{" "}
+              {sectionMeta.itemsCount === 1 ? "item" : "items"}
+            </p>
+          </div>
+        </button>
+        <div className="flex gap-1">
+          <IconButton title="Move section up" onClick={() => moveSection(index, -1)}>
+            <ArrowUp size={15} />
+          </IconButton>
+          <IconButton title="Move section down" onClick={() => moveSection(index, 1)}>
+            <ArrowDown size={15} />
+          </IconButton>
+          <IconButton
+            title={sectionMeta.visible ? "Hide section" : "Show section"}
+            onClick={() => updateSection(sectionId, { visible: !sectionMeta.visible })}
+          >
+            {sectionMeta.visible ? <Eye size={15} /> : <EyeOff size={15} />}
+          </IconButton>
+          <IconButton title="Remove section" danger onClick={() => removeSection(sectionId)}>
+            <Trash2 size={15} />
+          </IconButton>
+        </div>
+      </div>
+      {expanded ? (
+        <div className="mt-4 border-t border-[var(--color-line)] pt-4">
+          <Field label="Section title" hint={details.description}>
+            <input
+              aria-label={`${details.label} section title`}
+              className={inputClass}
+              value={sectionMeta.title}
+              onChange={(event) => updateSection(sectionId, { title: event.target.value })}
+            />
+          </Field>
+          {sectionMeta.type !== "contact" ? (
+            <div className="mt-4 space-y-3">
+              {itemIds.map((itemId, itemIdx) => (
+                <SectionItemEditor
+                  key={itemId || itemIdx}
+                  sectionId={sectionId}
+                  itemIndex={itemIdx}
+                />
+              ))}
+              <button
+                className="inline-flex cursor-pointer items-center gap-1 text-xs font-extrabold text-[var(--color-accent)]"
+                onClick={onAdd}
+              >
+                <Plus size={12} />
+                Add {sectionMeta.type === "projects" ? "project" : "item"}
+              </button>
+            </div>
+          ) : (
+            <p className="mt-3 text-xs leading-5 text-[var(--color-muted)]">
+              Your email and social links automatically appear in this closing section.
+            </p>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function SectionItemEditor({ sectionId, itemIndex }: { sectionId: string; itemIndex: number }) {
+  const item = usePortfolioStore(
+    useShallow((state) => {
+      const section = state.content.sections.find((s) => s.id === sectionId);
+      return section?.items[itemIndex] as Record<string, unknown> | undefined;
+    }),
+  );
+  const type = usePortfolioStore(
+    (state) => state.content.sections.find((s) => s.id === sectionId)?.type,
+  );
+  const updateSection = usePortfolioStore((state) => state.updateSection);
+
+  if (!item || !type) return null;
+
+  const onChange = (patch: Record<string, unknown>) => {
+    const section = usePortfolioStore.getState().content.sections.find((s) => s.id === sectionId);
+    if (!section) return;
+    const updatedItems = section.items.map((it, idx) =>
+      idx === itemIndex ? { ...it, ...patch } : it,
+    );
+    updateSection(sectionId, { items: updatedItems });
+  };
+
+  const onRemove = () => {
+    const section = usePortfolioStore.getState().content.sections.find((s) => s.id === sectionId);
+    if (!section) return;
+    const updatedItems = section.items.filter((_, idx) => idx !== itemIndex);
+    updateSection(sectionId, { items: updatedItems });
+  };
+
+  const titleLabel =
+    type === "testimonials"
+      ? "Person or company"
+      : type === "experience"
+        ? "Role and company"
+        : type === "education"
+          ? "Course or institution"
+          : "Title";
+  const summaryLabel =
+    type === "testimonials" ? "Quote" : type === "skills" ? "Details or tools" : "Summary";
+
+  return (
+    <div className="rounded-[var(--radius-sm)] border border-[var(--color-line)] bg-[var(--color-paper)] p-3">
+      <div className="mb-3 flex items-center justify-between">
+        <p className="text-xs font-extrabold">
+          {type === "projects" ? "Project" : "Item"} {itemIndex + 1}
+        </p>
+        <IconButton title="Remove item" danger onClick={onRemove}>
+          <Trash2 size={14} />
+        </IconButton>
+      </div>
+      <div className="grid grid-cols-[minmax(0,1fr)_92px] gap-3 max-sm:grid-cols-1">
+        <Field label={titleLabel}>
+          <input
+            className={inputClass}
+            placeholder={type === "projects" ? "A product, campaign, or case study" : titleLabel}
+            value={String(item.title ?? item.name ?? "")}
+            onChange={(event) => onChange({ title: event.target.value })}
+          />
+        </Field>
+        <Field label="Year">
+          <input
+            className={inputClass}
+            inputMode="numeric"
+            maxLength={12}
+            placeholder="2026"
+            value={String(item.year ?? "")}
+            onChange={(event) => onChange({ year: event.target.value })}
+          />
+        </Field>
+        <Field wide label={summaryLabel}>
+          <textarea
+            className={inputClass}
+            maxLength={600}
+            placeholder={
+              type === "projects"
+                ? "What was the problem, what did you do, and what changed?"
+                : "Add the detail a visitor needs to understand this item."
+            }
+            rows={3}
+            value={String(item.summary ?? "")}
+            onChange={(event) => onChange({ summary: event.target.value })}
+          />
+        </Field>
+        {type === "projects" ? (
+          <Field
+            wide
+            label="Project cover"
+            hint="Optional. A strong image helps Atelier and enriches Signal."
+          >
+            <AssetUpload
+              kind="PROJECT_COVER"
+              value={
+                typeof item.coverImage === "object" && item.coverImage
+                  ? String((item.coverImage as { url?: unknown }).url ?? "")
+                  : undefined
+              }
+              onUploaded={(coverImage) => onChange({ coverImage })}
+            />
+          </Field>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function PreviewPane() {
+  const draftId = usePortfolioStore((state) => state.draft?.id);
+  const draftExists = usePortfolioStore((state) => !!state.draft);
+  const workspaceState = usePortfolioStore((state) => state.workspaceState);
+  const status = usePortfolioStore((state) => state.status);
+  const previewIssue = usePortfolioStore((state) => state.previewIssue);
+  const loadWorkspace = usePortfolioStore((state) => state.loadWorkspace);
+
+  const previewRef = useRef<HTMLIFrameElement>(null);
+
+  const postPreview = useCallback(() => {
+    const content = usePortfolioStore.getState().content;
+    previewRef.current?.contentWindow?.postMessage(
+      { type: "veriworkly:portfolio-preview", content },
+      window.location.origin,
+    );
+  }, []);
+
+  // Send updates to iframe preview via postMessage whenever the content slice changes
+  useEffect(() => {
+    const unsubscribe = usePortfolioStore.subscribe(
+      (state) => state.content,
+      (content) => {
+        const isReady = usePortfolioStore.getState().ready;
+        if (!isReady) return;
+        previewRef.current?.contentWindow?.postMessage(
+          { type: "veriworkly:portfolio-preview", content },
+          window.location.origin,
+        );
+      },
+    );
+    return unsubscribe;
+  }, []);
+
+  return (
+    <aside className="sticky top-20 h-[calc(100vh-100px)] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-[var(--color-panel)] shadow-[0_24px_70px_var(--color-shadow)] max-[980px]:relative max-[980px]:top-0 max-[980px]:h-[720px]">
+      <div className="flex h-10 items-center justify-between border-b border-[var(--color-line)] px-3 text-xs font-bold">
+        <span>Private live preview</span>
+        {draftExists && draftId ? (
+          <Link
+            className="flex items-center gap-1 font-extrabold text-[var(--color-accent)]"
+            href={`/preview/${draftId}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Full preview <ExternalLink size={12} />
+          </Link>
+        ) : workspaceState === "loading" || status === "Saving" ? (
+          <span>Saving first draft...</span>
+        ) : (
+          <span>Preview paused</span>
+        )}
+      </div>
+      {draftExists && draftId ? (
+        <iframe
+          ref={previewRef}
+          onLoad={postPreview}
+          className="h-[calc(100%-40px)] w-full border-0"
+          src={`/preview/${draftId}`}
+          title="Private portfolio preview"
+        />
+      ) : workspaceState === "loading" || status === "Saving" ? (
+        <div className="grid h-full place-items-center" aria-live="polite">
+          <div className="text-center">
+            <LoaderCircle className="mx-auto animate-spin" />
+            <p className="mt-3 text-xs font-bold text-[var(--color-muted)]">
+              Preparing your private preview...
+            </p>
+          </div>
+        </div>
+      ) : (
+        <PreviewUnavailable message={previewIssue} onRetry={() => void loadWorkspace()} />
+      )}
+    </aside>
+  );
+}
+
+function AssetUpload({
+  kind,
+  value,
+  onUploaded,
+}: {
+  kind: "AVATAR" | "PROJECT_COVER" | "SOCIAL_IMAGE";
+  value?: string;
+  onUploaded: (asset: { id: string; url: string }) => void;
+}) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const upload = async (file?: File) => {
+    if (!file) return;
+    setLoading(true);
+    setError("");
+    try {
+      const { backendApiUrl: getBackendUrl } = await import("@/lib/backend");
+      const prepared = await fetch(getBackendUrl("/portfolio-assets/upload-url"), {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ kind, mimeType: file.type, sizeBytes: file.size }),
+      }).then((response) => response.json());
+      if (!prepared.data?.uploadUrl) throw new Error(prepared.message || "Upload could not start.");
+      const uploaded = await fetch(prepared.data.uploadUrl, {
+        method: "PUT",
+        headers: { "Content-Type": file.type },
+        body: file,
+      });
+      if (!uploaded.ok) throw new Error("Image upload failed.");
+      const completed = await fetch(getBackendUrl("/portfolio-assets/complete"), {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ assetId: prepared.data.assetId }),
+      }).then((response) => response.json());
+      if (!completed.data) throw new Error(completed.message || "Upload could not complete.");
+      onUploaded(completed.data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Image upload failed.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <label className="flex cursor-pointer flex-wrap items-center gap-3 rounded-lg border border-dashed border-[var(--color-line)] p-3 text-xs font-bold text-[var(--color-muted)]">
+      {value ? (
+        <Image
+          className="size-10 rounded-full object-cover"
+          src={value}
+          alt=""
+          width={40}
+          height={40}
+          unoptimized
+        />
+      ) : (
+        <Upload size={16} />
+      )}
+      <span>
+        {loading ? "Uploading..." : value ? "Replace image" : "Upload JPG, PNG, or WebP image"}
+      </span>
+      {error ? (
+        <span className="basis-full text-red-600" role="alert">
+          {error}
+        </span>
+      ) : null}
+      <input
+        className="sr-only"
+        type="file"
+        accept="image/jpeg,image/png,image/webp"
+        onChange={(event) => void upload(event.target.files?.[0])}
+        disabled={loading}
+      />
+    </label>
+  );
+}
+
+function PreviewUnavailable({ message, onRetry }: { message: string; onRetry: () => void }) {
+  return (
+    <div className="grid h-full place-items-center p-6 text-center" role="alert">
+      <div className="max-w-sm">
+        <p className="text-sm font-extrabold">Preview temporarily unavailable</p>
+        <p className="mt-2 text-xs leading-5 text-[var(--color-muted)]">
+          {message ||
+            "Your changes remain saved in this browser. Reconnect to sync and restore the live preview."}
+        </p>
+        <button className={`${buttonClass} mt-4 cursor-pointer`} onClick={onRetry}>
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function EditorCard({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <article className="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-[var(--color-panel)] p-4 shadow-[0_12px_36px_var(--color-shadow)]">
+      <div className="mb-4">
+        <h2 className="text-sm font-extrabold tracking-[-.02em]">{title}</h2>
+        {description ? (
+          <p className="mt-1 max-w-xl text-xs leading-5 text-[var(--color-muted)]">{description}</p>
+        ) : null}
+      </div>
+      {children}
+    </article>
+  );
+}
+
+function Field({
+  label,
+  hint,
+  wide,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  wide?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <label
+      className={`grid gap-1.5 text-xs font-bold text-[var(--color-ink-soft)] ${wide ? "col-span-full" : ""}`}
+    >
+      <span>{label}</span>
+      {children}
+      {hint ? (
+        <span className="text-[11px] leading-4 font-medium text-[var(--color-muted)]">{hint}</span>
+      ) : null}
+    </label>
+  );
+}
+
+function IconButton({
+  title,
+  danger,
+  onClick,
+  children,
+}: {
+  title: string;
+  danger?: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      className={`grid size-8 shrink-0 cursor-pointer place-items-center rounded-lg transition hover:bg-[var(--color-accent-soft)] ${
+        danger ? "text-[var(--color-danger)]" : "text-[var(--color-muted)]"
+      }`}
+      title={title}
+      aria-label={title}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+function PanelButton({
+  active,
+  icon,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      className={`flex min-h-12 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius-sm)] px-2 text-xs font-extrabold whitespace-nowrap transition ${
+        active
+          ? "bg-[var(--color-ink)] text-[var(--color-panel)]"
+          : "text-[var(--color-muted)] hover:bg-[var(--color-paper-2)] hover:text-[var(--color-ink)]"
+      }`}
+      aria-pressed={active}
+      onClick={onClick}
+    >
+      {icon}
+      <span className="max-sm:hidden">{label}</span>
+    </button>
+  );
+}
diff --git a/apps/portfolio/components/DraftPreview.tsx b/apps/portfolio/components/DraftPreview.tsx
new file mode 100644
index 0000000..df6a58b
--- /dev/null
+++ b/apps/portfolio/components/DraftPreview.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { demoPortfolio, type TemplateId } from "@/lib/portfolio";
+
+const templates = {
+  signal: dynamic(() => import("@/template-library/signal/SignalTemplate")),
+  atelier: dynamic(() => import("@/template-library/atelier/AtelierTemplate")),
+};
+
+export function DraftPreview({ templateId }: { templateId: TemplateId }) {
+  const Template = templates[templateId];
+  return <Template project={{ ...demoPortfolio, templateId }} />;
+}
diff --git a/apps/portfolio/components/LivePortfolioPreview.tsx b/apps/portfolio/components/LivePortfolioPreview.tsx
new file mode 100644
index 0000000..c0b48eb
--- /dev/null
+++ b/apps/portfolio/components/LivePortfolioPreview.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+import { parsePortfolioContent, type PortfolioContent } from "@/lib/portfolio";
+
+const templates = {
+  signal: dynamic(() => import("@/template-library/signal/SignalTemplate")),
+  atelier: dynamic(() => import("@/template-library/atelier/AtelierTemplate")),
+};
+
+export function LivePortfolioPreview({ initialContent }: { initialContent: PortfolioContent }) {
+  const [content, setContent] = useState(initialContent);
+  useEffect(() => {
+    const receive = (event: MessageEvent) => {
+      if (
+        event.origin !== window.location.origin ||
+        event.data?.type !== "veriworkly:portfolio-preview"
+      )
+        return;
+      setContent((current) => parsePortfolioContent(event.data.content, current));
+    };
+    window.addEventListener("message", receive);
+    return () => window.removeEventListener("message", receive);
+  }, []);
+  const Template = templates[content.templateId];
+  return <Template project={content} />;
+}
diff --git a/apps/portfolio/components/PortfolioSite.tsx b/apps/portfolio/components/PortfolioSite.tsx
new file mode 100644
index 0000000..7466efb
--- /dev/null
+++ b/apps/portfolio/components/PortfolioSite.tsx
@@ -0,0 +1,10 @@
+import type { PortfolioContent } from "@/lib/portfolio";
+import { renderTemplate } from "@/templates/runtime/registry";
+
+/**
+ * Compatibility wrapper for routes or integrations that render a portfolio.
+ * Template implementations live in the server-only runtime registry.
+ */
+export async function PortfolioSite({ project }: { project: PortfolioContent }) {
+  return await renderTemplate(project);
+}
diff --git a/apps/portfolio/components/PublicViewTracker.tsx b/apps/portfolio/components/PublicViewTracker.tsx
new file mode 100644
index 0000000..0191a5d
--- /dev/null
+++ b/apps/portfolio/components/PublicViewTracker.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import { backendApiUrl } from "@/lib/backend";
+
+export function PublicViewTracker({ subdomain }: { subdomain: string }) {
+  useEffect(() => {
+    try {
+      void fetch(backendApiUrl(`/portfolios/public/${encodeURIComponent(subdomain)}/view`), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ referrer: document.referrer }),
+        keepalive: true,
+      }).catch(() => undefined);
+    } catch {
+      // Analytics must never interrupt the published portfolio.
+    }
+  }, [subdomain]);
+  return null;
+}
diff --git a/apps/portfolio/components/TemplateFrame.tsx b/apps/portfolio/components/TemplateFrame.tsx
new file mode 100644
index 0000000..ec0999c
--- /dev/null
+++ b/apps/portfolio/components/TemplateFrame.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from "react";
+import { templates, type TemplateId } from "@/lib/portfolio";
+
+export function TemplateFrame() {
+  const [templateId, setTemplateId] = useState<TemplateId>("signal");
+  return (
+    <div className="mx-auto w-full max-w-[1312px] py-16 max-sm:py-9">
+      <div className="mb-7 flex items-end justify-between gap-5 max-sm:flex-col max-sm:items-start">
+        <div>
+          <p className="mb-2 text-[11px] font-extrabold tracking-[.14em] text-[var(--color-accent-soft)] uppercase">
+            Two distinct directions
+          </p>
+          <h2 className="font-[family-name:var(--font-display)] text-[clamp(2.2rem,5vw,4.5rem)] font-medium tracking-[-.065em]">
+            Choose a voice, not a skin.
+          </h2>
+        </div>
+        <div className="flex gap-2" role="tablist" aria-label="Portfolio templates">
+          {templates.map((template) => (
+            <button
+              className="min-h-10 rounded-full border border-[var(--color-panel-20)] px-4 text-xs font-extrabold whitespace-nowrap transition duration-150 hover:-translate-y-0.5 aria-selected:bg-[var(--color-panel)] aria-selected:text-[var(--color-ink)]"
+              key={template.id}
+              role="tab"
+              aria-selected={templateId === template.id}
+              onClick={() => setTemplateId(template.id)}
+            >
+              {template.name}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-panel-18)] bg-[var(--color-panel)] shadow-[0_30px_80px_var(--color-shadow)]">
+        <div className="flex min-h-[46px] items-center justify-between gap-4 px-4 font-[family-name:var(--font-mono)] text-[10px] tracking-[.08em] text-[var(--color-muted)] uppercase">
+          <span>Live sample · {templateId}</span>
+          <a
+            className="font-extrabold text-[var(--color-accent)]"
+            href={`/templates/${templateId}/preview`}
+          >
+            Full preview &#8599;
+          </a>
+        </div>
+        <div className="relative h-[680px] overflow-hidden max-sm:h-[590px]">
+          <iframe
+            className="size-full border-0 bg-[var(--color-panel)]"
+            title={`${templateId} template preview`}
+            src={`/templates/${templateId}/preview`}
+            tabIndex={-1}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portfolio/config/site.ts b/apps/portfolio/config/site.ts
new file mode 100644
index 0000000..4f68d6c
--- /dev/null
+++ b/apps/portfolio/config/site.ts
@@ -0,0 +1,21 @@
+const isDev = process.env.NODE_ENV === "development";
+
+export const portfolioSiteConfig = {
+  name: "VeriWorkly Portfolio",
+  url:
+    process.env.SITE_URL ||
+    (isDev ? "http://portfolio.localhost:3004" : "https://portfolio.veriworkly.com"),
+  description:
+    "Build and publish a professional portfolio website on your own VeriWorkly subdomain.",
+  keywords: [
+    "portfolio builder",
+    "professional portfolio website",
+    "developer portfolio",
+    "designer portfolio",
+    "online portfolio builder",
+  ],
+} as const;
+
+export function portfolioPublicUrl(subdomain: string) {
+  return isDev ? `http://${subdomain}.localhost:3004` : `https://${subdomain}.veriworkly.com`;
+}
diff --git a/apps/portfolio/lib/backend.ts b/apps/portfolio/lib/backend.ts
new file mode 100644
index 0000000..e2f4988
--- /dev/null
+++ b/apps/portfolio/lib/backend.ts
@@ -0,0 +1,8 @@
+const publicBackendUrl = process.env.NEXT_PUBLIC_BACKEND_URL?.replace(/\/+$/, "") || "";
+const internalBackendUrl = process.env.BACKEND_INTERNAL_URL?.replace(/\/+$/, "") || "";
+
+export function backendApiUrl(path: string, serverSide = false) {
+  const baseUrl = serverSide ? internalBackendUrl || publicBackendUrl : publicBackendUrl;
+  if (!baseUrl) throw new Error("Portfolio backend URL is not configured.");
+  return `${baseUrl}${path.startsWith("/") ? path : `/${path}`}`;
+}
diff --git a/apps/portfolio/lib/portfolio-storage.ts b/apps/portfolio/lib/portfolio-storage.ts
new file mode 100644
index 0000000..2362892
--- /dev/null
+++ b/apps/portfolio/lib/portfolio-storage.ts
@@ -0,0 +1,30 @@
+"use client";
+
+import {
+  PORTFOLIO_CACHE_KEY,
+  parsePortfolioContent,
+  type CloudPortfolioDraft,
+  type PortfolioContent,
+} from "@/lib/portfolio";
+
+export function loadPortfolioCache(): { slug: string; content: PortfolioContent } | null {
+  try {
+    const raw = window.localStorage.getItem(PORTFOLIO_CACHE_KEY);
+    if (!raw) return null;
+    const value = JSON.parse(raw) as { slug?: unknown; content?: unknown };
+    return {
+      slug: typeof value.slug === "string" ? value.slug : "portfolio",
+      content: parsePortfolioContent(value.content),
+    };
+  } catch {
+    window.localStorage.removeItem(PORTFOLIO_CACHE_KEY);
+    return null;
+  }
+}
+
+export function savePortfolioCache(draft: Pick<CloudPortfolioDraft, "slug" | "content">) {
+  window.localStorage.setItem(
+    PORTFOLIO_CACHE_KEY,
+    JSON.stringify({ slug: draft.slug, content: draft.content }),
+  );
+}
diff --git a/apps/portfolio/lib/portfolio.ts b/apps/portfolio/lib/portfolio.ts
new file mode 100644
index 0000000..5d96dd8
--- /dev/null
+++ b/apps/portfolio/lib/portfolio.ts
@@ -0,0 +1,380 @@
+import type { TemplateId } from "@/templates/catalog/templates";
+
+export { templates } from "@/templates/catalog/templates";
+export type { TemplateId } from "@/templates/catalog/templates";
+
+export type PortfolioSectionType =
+  | "projects"
+  | "experience"
+  | "services"
+  | "skills"
+  | "education"
+  | "writing"
+  | "testimonials"
+  | "awards"
+  | "contact";
+
+export const portfolioSectionTypes: PortfolioSectionType[] = [
+  "projects",
+  "experience",
+  "services",
+  "skills",
+  "education",
+  "writing",
+  "testimonials",
+  "awards",
+  "contact",
+];
+
+export interface PortfolioAssetReference {
+  id: string;
+  url: string;
+}
+
+export interface PortfolioLink {
+  id: string;
+  label: string;
+  url: string;
+}
+
+export interface PortfolioSection {
+  id: string;
+  type: PortfolioSectionType;
+  title: string;
+  visible: boolean;
+  items: Array<Record<string, unknown>>;
+}
+
+export interface PortfolioContent {
+  schemaVersion: 1;
+  templateId: TemplateId;
+  identity: {
+    name: string;
+    headline: string;
+    bio: string;
+    location: string;
+    email: string;
+    availability: string;
+    avatar: PortfolioAssetReference | null;
+  };
+  seo: {
+    title: string;
+    description: string;
+    socialImage: PortfolioAssetReference | null;
+  };
+  socialLinks: PortfolioLink[];
+  sections: PortfolioSection[];
+}
+
+export interface CloudPortfolioDraft {
+  id: string;
+  slug: string;
+  templateId: TemplateId;
+  content: PortfolioContent;
+  revision: number;
+  updatedAt: string;
+}
+
+export const PORTFOLIO_CACHE_KEY = "veriworkly:portfolio:draft-cache:v4";
+
+export function createId(prefix: string) {
+  return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export function createDefaultPortfolio(user?: {
+  name?: string | null;
+  email?: string | null;
+}): PortfolioContent {
+  const name = user?.name?.trim() || "VeriWorkly User";
+  const email = user?.email?.trim() || "hello@veriworkly.com";
+  return {
+    schemaVersion: 1,
+    templateId: "signal",
+    identity: {
+      name,
+      email,
+      headline: "Professional building useful, considered work.",
+      bio: "Introduce your work, your point of view, and the problems you solve.",
+      location: "",
+      availability: "Available for selected opportunities",
+      avatar: null,
+    },
+    seo: { title: `${name} | Portfolio`, description: "Professional portfolio", socialImage: null },
+    socialLinks: [],
+    sections: [
+      {
+        id: createId("section"),
+        type: "projects",
+        title: "Selected work",
+        visible: true,
+        items: [
+          {
+            id: createId("project"),
+            title: "Your strongest project",
+            summary: "Explain the problem, the work, and the result with specific details.",
+            description: "",
+            year: new Date().getFullYear().toString(),
+            tags: ["Case study"],
+            links: [],
+            coverImage: null,
+          },
+        ],
+      },
+      { id: createId("section"), type: "contact", title: "Contact", visible: true, items: [] },
+    ],
+  };
+}
+
+export const demoPortfolio: PortfolioContent = {
+  schemaVersion: 1,
+  templateId: "signal",
+  identity: {
+    name: "Avery Morgan",
+    email: "hello@averymorgan.dev",
+    headline: "Product engineer turning complex systems into calm software.",
+    bio: "I design and build digital products for teams working through operational complexity. My practice combines product thinking, interface design, and frontend engineering.",
+    location: "Brooklyn, New York",
+    availability: "Available for selected collaborations",
+    avatar: null,
+  },
+  seo: {
+    title: "Avery Morgan | Product engineer",
+    description: "Selected product engineering work by Avery Morgan.",
+    socialImage: null,
+  },
+  socialLinks: [
+    { id: "linkedin", label: "LinkedIn", url: "https://www.linkedin.com" },
+    { id: "github", label: "GitHub", url: "https://github.com" },
+    { id: "writing", label: "Writing", url: "https://example.com" },
+  ],
+  sections: [
+    {
+      id: "projects",
+      type: "projects",
+      title: "Selected work",
+      visible: true,
+      items: [
+        {
+          id: "project-1",
+          title: "Field Notes",
+          summary:
+            "A planning workspace that helps distributed product teams turn research into clear delivery decisions.",
+          year: "2026",
+          tags: ["Product design", "Frontend", "Systems"],
+        },
+        {
+          id: "project-2",
+          title: "Northline",
+          summary:
+            "A service operations platform redesigned around the daily decisions of dispatch teams and field managers.",
+          year: "2025",
+          tags: ["UX strategy", "Design system"],
+        },
+        {
+          id: "project-3",
+          title: "Ledger",
+          summary:
+            "A focused financial reporting experience for independent studios that need clarity without accounting overhead.",
+          year: "2024",
+          tags: ["Research", "React", "Data"],
+        },
+      ],
+    },
+    {
+      id: "experience",
+      type: "experience",
+      title: "Experience",
+      visible: true,
+      items: [
+        {
+          id: "experience-1",
+          title: "Independent product engineer",
+          summary:
+            "Partnering with early-stage teams on product strategy, interface systems, and production frontend builds.",
+          year: "2023 — now",
+        },
+        {
+          id: "experience-2",
+          title: "Senior product designer · Northstar",
+          summary:
+            "Led the design system and core workflow redesign for a multi-product operations platform.",
+          year: "2020 — 2023",
+        },
+      ],
+    },
+    {
+      id: "services",
+      type: "services",
+      title: "Ways to work together",
+      visible: true,
+      items: [
+        {
+          id: "service-1",
+          title: "Product direction",
+          summary:
+            "Clarify the problem, shape the experience, and define the smallest useful release.",
+        },
+        {
+          id: "service-2",
+          title: "Interface systems",
+          summary: "Build a reusable visual language that remains coherent as the product grows.",
+        },
+      ],
+    },
+    {
+      id: "skills",
+      type: "skills",
+      title: "Capabilities",
+      visible: true,
+      items: [
+        {
+          id: "skill-1",
+          title: "Design and research",
+          summary:
+            "Product strategy, interface design, prototyping, usability testing, design systems.",
+        },
+        {
+          id: "skill-2",
+          title: "Engineering",
+          summary:
+            "React, Next.js, TypeScript, accessible component systems, frontend architecture.",
+        },
+      ],
+    },
+    {
+      id: "writing",
+      type: "writing",
+      title: "Writing and notes",
+      visible: true,
+      items: [
+        {
+          id: "writing-1",
+          title: "Designing for the decision",
+          summary:
+            "Why the best workflow interfaces reduce interpretation before they reduce clicks.",
+          year: "2026",
+        },
+        {
+          id: "writing-2",
+          title: "A smaller, stronger design system",
+          summary: "How product teams can choose consistency without flattening every interaction.",
+          year: "2025",
+        },
+      ],
+    },
+    {
+      id: "testimonials",
+      type: "testimonials",
+      title: "Kind words",
+      visible: true,
+      items: [
+        {
+          id: "testimonial-1",
+          title: "Mina Patel · Northline",
+          summary:
+            "Avery made a complicated product feel obvious without making it simplistic. The work changed how our team makes decisions.",
+        },
+        {
+          id: "testimonial-2",
+          title: "Jon Bell · Field Notes",
+          summary:
+            "The rare partner who can move from product framing to a production interface without losing the thread.",
+        },
+      ],
+    },
+    {
+      id: "awards",
+      type: "awards",
+      title: "Recognition",
+      visible: true,
+      items: [
+        {
+          id: "award-1",
+          title: "Independent Site of the Day",
+          summary: "Field Notes product story.",
+          year: "2026",
+        },
+      ],
+    },
+    { id: "contact", type: "contact", title: "Contact", visible: true, items: [] },
+  ],
+};
+
+function text(value: unknown, fallback = "", max = 2000) {
+  return typeof value === "string" ? value.slice(0, max) : fallback;
+}
+
+function asset(value: unknown): PortfolioAssetReference | null {
+  if (!value || typeof value !== "object") return null;
+  const item = value as Record<string, unknown>;
+  return typeof item.id === "string" && typeof item.url === "string"
+    ? { id: item.id, url: item.url }
+    : null;
+}
+
+export function normalizeSlug(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "")
+    .slice(0, 63);
+}
+
+export function isPortfolioSectionType(value: unknown): value is PortfolioSectionType {
+  return typeof value === "string" && portfolioSectionTypes.includes(value as PortfolioSectionType);
+}
+
+export function parsePortfolioContent(input: unknown, fallback = demoPortfolio): PortfolioContent {
+  if (!input || typeof input !== "object") return fallback;
+  const value = input as Record<string, unknown>;
+  if (value.schemaVersion !== 1 || !value.identity || !Array.isArray(value.sections)) {
+    const legacy = value as Record<string, unknown>;
+    const migrated = createDefaultPortfolio({
+      name: text(legacy.name, fallback.identity.name, 120),
+      email: text(legacy.email, fallback.identity.email, 254),
+    });
+    migrated.templateId = legacy.templateId === "atelier" ? "atelier" : "signal";
+    migrated.identity.headline = text(legacy.role, migrated.identity.headline, 240);
+    migrated.identity.bio = text(legacy.intro, migrated.identity.bio, 1600);
+    migrated.identity.location = text(legacy.location, "", 120);
+    migrated.identity.availability = text(legacy.availability, migrated.identity.availability, 160);
+    if (Array.isArray(legacy.projects))
+      migrated.sections[0].items = legacy.projects as Array<Record<string, unknown>>;
+    return migrated;
+  }
+  const identity = value.identity as Record<string, unknown>;
+  const seo = (value.seo ?? {}) as Record<string, unknown>;
+  return {
+    schemaVersion: 1,
+    templateId: value.templateId === "atelier" ? "atelier" : "signal",
+    identity: {
+      name: text(identity.name, fallback.identity.name, 120),
+      headline: text(identity.headline, fallback.identity.headline, 240),
+      bio: text(identity.bio, fallback.identity.bio, 1600),
+      location: text(identity.location, "", 120),
+      email: text(identity.email, fallback.identity.email, 254),
+      availability: text(identity.availability, fallback.identity.availability, 160),
+      avatar: asset(identity.avatar),
+    },
+    seo: {
+      title: text(seo.title, fallback.seo.title, 120),
+      description: text(seo.description, fallback.seo.description, 300),
+      socialImage: asset(seo.socialImage),
+    },
+    socialLinks: Array.isArray(value.socialLinks)
+      ? (value.socialLinks as PortfolioLink[]).slice(0, 12)
+      : [],
+    sections: (value.sections as PortfolioSection[])
+      .slice(0, 24)
+      .filter((section) => isPortfolioSectionType(section.type))
+      .map((section) => ({
+        id: text(section.id, createId("section"), 128),
+        type: section.type,
+        title: text(section.title, "Section", 120),
+        visible: section.visible !== false,
+        items: Array.isArray(section.items) ? section.items.slice(0, 24) : [],
+      })),
+  };
+}
diff --git a/apps/portfolio/lib/published-portfolio.ts b/apps/portfolio/lib/published-portfolio.ts
new file mode 100644
index 0000000..196c49e
--- /dev/null
+++ b/apps/portfolio/lib/published-portfolio.ts
@@ -0,0 +1,28 @@
+import { cache } from "react";
+import { backendApiUrl } from "@/lib/backend";
+import { parsePortfolioContent, type PortfolioContent } from "@/lib/portfolio";
+
+export interface PublishedPortfolio {
+  subdomain: string;
+  snapshot: PortfolioContent;
+  templateId: string;
+  updatedAt: string;
+}
+
+export const getPublishedPortfolio = cache(
+  async (subdomain: string): Promise<PublishedPortfolio | null> => {
+    const response = await fetch(
+      backendApiUrl(`/portfolios/public/${encodeURIComponent(subdomain)}`, true),
+      { next: { revalidate: 3600, tags: [`portfolio-${subdomain}`] } },
+    );
+    if (!response.ok) return null;
+    const payload = (await response.json()) as { data?: Partial<PublishedPortfolio> };
+    if (!payload.data?.snapshot || !payload.data.subdomain) return null;
+    return {
+      subdomain: payload.data.subdomain,
+      snapshot: parsePortfolioContent(payload.data.snapshot),
+      templateId: String(payload.data.templateId ?? ""),
+      updatedAt: String(payload.data.updatedAt ?? ""),
+    };
+  },
+);
diff --git a/apps/portfolio/next.config.ts b/apps/portfolio/next.config.ts
new file mode 100644
index 0000000..320d5fa
--- /dev/null
+++ b/apps/portfolio/next.config.ts
@@ -0,0 +1,32 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          {
+            key: "X-Frame-Options",
+            value: "SAMEORIGIN",
+          },
+          {
+            key: "X-Content-Type-Options",
+            value: "nosniff",
+          },
+          {
+            key: "Referrer-Policy",
+            value: "strict-origin-when-cross-origin",
+          },
+          {
+            key: "Permissions-Policy",
+            value: "camera=(), microphone=(), geolocation=()",
+          },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;
diff --git a/apps/portfolio/package.json b/apps/portfolio/package.json
new file mode 100644
index 0000000..0a3a0fc
--- /dev/null
+++ b/apps/portfolio/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@veriworkly/portfolio",
+  "version": "3.12.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint .",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "lucide-react": "^1.16.0",
+    "next": "16.2.6",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "zustand": "^5.0.14"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^25",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.6",
+    "postcss": "8.5.14",
+    "tailwindcss": "^4",
+    "typescript": "^6",
+    "vitest": "^4.1.5"
+  }
+}
diff --git a/apps/portfolio/postcss.config.mjs b/apps/portfolio/postcss.config.mjs
new file mode 100644
index 0000000..a898ee3
--- /dev/null
+++ b/apps/portfolio/postcss.config.mjs
@@ -0,0 +1,3 @@
+const config = { plugins: { "@tailwindcss/postcss": {} } };
+
+export default config;
diff --git a/apps/portfolio/proxy.ts b/apps/portfolio/proxy.ts
new file mode 100644
index 0000000..cc9d7fa
--- /dev/null
+++ b/apps/portfolio/proxy.ts
@@ -0,0 +1,42 @@
+import { NextResponse, type NextRequest } from "next/server";
+
+const PLATFORM_HOST = "portfolio.veriworkly.com";
+const protectedPaths = ["/dashboard", "/billing", "/preview"];
+
+export default function proxy(request: NextRequest) {
+  const hostname = (request.headers.get("host") ?? "").split(":")[0];
+  const path = request.nextUrl.pathname;
+  if (protectedPaths.some((prefix) => path === prefix || path.startsWith(`${prefix}/`))) {
+    const hasSession = request.cookies
+      .getAll()
+      .some((cookie) => cookie.name.startsWith("veriworkly-auth"));
+    if (!hasSession) {
+      const loginUrl =
+        process.env.NODE_ENV === "development"
+          ? "http://localhost:3001/login"
+          : "https://app.veriworkly.com/login";
+      return NextResponse.redirect(`${loginUrl}?callbackURL=${encodeURIComponent(request.url)}`);
+    }
+  }
+  if (path.startsWith("/_next") || path.startsWith("/api") || path.includes(".")) {
+    return NextResponse.next();
+  }
+  const isPlatformHost =
+    hostname === PLATFORM_HOST || hostname === "localhost" || hostname === "portfolio.localhost";
+  if (isPlatformHost) {
+    const match = path.match(/^\/user\/([^/]+)(.*)$/);
+    return match
+      ? NextResponse.rewrite(new URL(`/portfolios/${match[1]}${match[2]}`, request.url))
+      : NextResponse.next();
+  }
+  const username = hostname.endsWith(".veriworkly.com")
+    ? hostname.replace(".veriworkly.com", "")
+    : hostname.endsWith(".localhost")
+      ? hostname.replace(".localhost", "")
+      : null;
+  return username
+    ? NextResponse.rewrite(new URL(`/portfolios/${username}${path}`, request.url))
+    : NextResponse.next();
+}
+
+export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"] };
diff --git a/apps/portfolio/public/veriworkly-logo.png b/apps/portfolio/public/veriworkly-logo.png
new file mode 100644
index 0000000..424a50f
Binary files /dev/null and b/apps/portfolio/public/veriworkly-logo.png differ
diff --git a/apps/portfolio/store/portfolio-store.ts b/apps/portfolio/store/portfolio-store.ts
new file mode 100644
index 0000000..10c1e0c
--- /dev/null
+++ b/apps/portfolio/store/portfolio-store.ts
@@ -0,0 +1,337 @@
+"use client";
+
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
+import { backendApiUrl } from "@/lib/backend";
+import {
+  createDefaultPortfolio,
+  createId,
+  normalizeSlug,
+  parsePortfolioContent,
+  type CloudPortfolioDraft,
+  type PortfolioContent,
+  type PortfolioSection,
+  type PortfolioSectionType,
+} from "@/lib/portfolio";
+import { loadPortfolioCache, savePortfolioCache } from "@/lib/portfolio-storage";
+
+export type SaveStatus =
+  | "Saving"
+  | "Saved"
+  | "Offline"
+  | "Conflict"
+  | "Publish pending"
+  | "Unsaved changes";
+export type WorkspaceState = "loading" | "ready" | "error";
+export type Publication = { subdomain: string; status: "LIVE" | "GRACE" | "SUSPENDED" } | null;
+export type Billing = { canPublish: boolean; status: string; graceEndsAt?: string | null };
+export type EditorPanel = "profile" | "sections" | "style" | "sharing";
+
+async function fetchPayload(path: string, fallbackMessage: string, init?: RequestInit) {
+  const response = await fetch(backendApiUrl(path), { credentials: "include", ...init });
+  const payload = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(payload.message || fallbackMessage);
+  return payload;
+}
+
+interface PortfolioStoreState {
+  content: PortfolioContent;
+  slug: string;
+  draft: CloudPortfolioDraft | null;
+  publication: Publication;
+  billing: Billing;
+  analytics: number;
+  status: SaveStatus;
+  message: string;
+  ready: boolean;
+  workspaceState: WorkspaceState;
+  previewIssue: string;
+  activePanel: EditorPanel;
+  isDirty: boolean;
+
+  // Setters
+  setContent: (content: PortfolioContent) => void;
+  setSlug: (slug: string) => void;
+  updateSlug: (slug: string) => void;
+  setDraft: (draft: CloudPortfolioDraft | null) => void;
+  setPublication: (publication: Publication) => void;
+  setBilling: (billing: Billing) => void;
+  setAnalytics: (analytics: number) => void;
+  setStatus: (status: SaveStatus) => void;
+  setMessage: (message: string) => void;
+  setReady: (ready: boolean) => void;
+  setWorkspaceState: (workspaceState: WorkspaceState) => void;
+  setPreviewIssue: (previewIssue: string) => void;
+  setActivePanel: (activePanel: EditorPanel) => void;
+  setIsDirty: (isDirty: boolean) => void;
+
+  // State Updaters
+  updateContent: (patch: Partial<PortfolioContent>) => void;
+  updateIdentity: (patch: Partial<PortfolioContent["identity"]>) => void;
+  updateSection: (id: string, patch: Partial<PortfolioSection>) => void;
+  moveSection: (index: number, direction: -1 | 1) => void;
+  addSection: (type: PortfolioSectionType) => void;
+  removeSection: (id: string) => void;
+
+  // Async Actions
+  loadWorkspace: () => Promise<void>;
+  saveDraft: () => Promise<CloudPortfolioDraft | null>;
+  publish: () => Promise<void>;
+  unpublish: () => Promise<void>;
+}
+
+export const usePortfolioStore = create<PortfolioStoreState>()(
+  subscribeWithSelector((set, get) => ({
+    content: createDefaultPortfolio(),
+    slug: "portfolio",
+    draft: null,
+    publication: null,
+    billing: { canPublish: false, status: "INACTIVE" },
+    analytics: 0,
+    status: "Saved",
+    message: "",
+    ready: false,
+    workspaceState: "loading",
+    previewIssue: "",
+    activePanel: "profile",
+    isDirty: false,
+
+    setContent: (content) => set({ content }),
+    setSlug: (slug) => set({ slug }),
+    updateSlug: (slug) =>
+      set((state) => ({
+        slug,
+        isDirty: state.ready ? true : state.isDirty,
+        status: state.ready ? "Unsaved changes" : state.status,
+      })),
+    setDraft: (draft) => set({ draft }),
+    setPublication: (publication) => set({ publication }),
+    setBilling: (billing) => set({ billing }),
+    setAnalytics: (analytics) => set({ analytics }),
+    setStatus: (status) => set({ status }),
+    setMessage: (message) => set({ message }),
+    setReady: (ready) => set({ ready }),
+    setWorkspaceState: (workspaceState) => set({ workspaceState }),
+    setPreviewIssue: (previewIssue) => set({ previewIssue }),
+    setActivePanel: (activePanel) => set({ activePanel }),
+    setIsDirty: (isDirty) => set({ isDirty }),
+
+    updateContent: (patch) =>
+      set((state) => ({
+        content: { ...state.content, ...patch },
+        isDirty: state.ready ? true : state.isDirty,
+        status: state.ready ? "Unsaved changes" : state.status,
+      })),
+
+    updateIdentity: (patch) =>
+      set((state) => ({
+        content: {
+          ...state.content,
+          identity: { ...state.content.identity, ...patch },
+        },
+        isDirty: state.ready ? true : state.isDirty,
+        status: state.ready ? "Unsaved changes" : state.status,
+      })),
+
+    updateSection: (id, patch) =>
+      set((state) => ({
+        content: {
+          ...state.content,
+          sections: state.content.sections.map((section) =>
+            section.id === id ? { ...section, ...patch } : section,
+          ),
+        },
+        isDirty: state.ready ? true : state.isDirty,
+        status: state.ready ? "Unsaved changes" : state.status,
+      })),
+
+    moveSection: (index, direction) =>
+      set((state) => {
+        const sections = [...state.content.sections];
+        const target = index + direction;
+        if (target < 0 || target >= sections.length) return {};
+        return {
+          content: { ...state.content, sections },
+          isDirty: state.ready ? true : state.isDirty,
+          status: state.ready ? "Unsaved changes" : state.status,
+        };
+      }),
+
+    addSection: (type) =>
+      set((state) => {
+        const label = type[0].toUpperCase() + type.slice(1);
+        return {
+          content: {
+            ...state.content,
+            sections: [
+              ...state.content.sections,
+              { id: createId("section"), type, title: label, visible: true, items: [] },
+            ],
+          },
+          isDirty: state.ready ? true : state.isDirty,
+          status: state.ready ? "Unsaved changes" : state.status,
+        };
+      }),
+
+    removeSection: (id) =>
+      set((state) => ({
+        content: {
+          ...state.content,
+          sections: state.content.sections.filter((item) => item.id !== id),
+        },
+        isDirty: state.ready ? true : state.isDirty,
+        status: state.ready ? "Unsaved changes" : state.status,
+      })),
+
+    loadWorkspace: async () => {
+      const cached = loadPortfolioCache();
+      if (cached) {
+        set({ content: cached.content, slug: cached.slug });
+      }
+      set({ workspaceState: "loading", previewIssue: "" });
+      try {
+        const [userPayload, portfolioPayload, analyticsPayload] = await Promise.all([
+          fetchPayload("/users/me", "Could not load your account.").catch(() => null),
+          fetchPayload("/portfolios/me", "Could not load your portfolio workspace."),
+          fetchPayload("/portfolios/analytics", "Could not load portfolio analytics.").catch(
+            () => null,
+          ),
+        ]);
+        const cloud = portfolioPayload?.data?.draft;
+        if (cloud) {
+          const restored = {
+            ...cloud,
+            content: parsePortfolioContent(cloud.content),
+          } as CloudPortfolioDraft;
+          set({
+            draft: restored,
+            content: restored.content,
+            slug: restored.slug,
+          });
+          savePortfolioCache(restored);
+        } else if (!cached) {
+          const seeded = createDefaultPortfolio(userPayload?.data);
+          set({
+            content: seeded,
+            slug: normalizeSlug(userPayload?.data?.name || "portfolio") || "portfolio",
+          });
+        }
+        set({
+          publication: portfolioPayload?.data?.publication ?? null,
+          billing: portfolioPayload?.data?.billing ?? { canPublish: false, status: "INACTIVE" },
+          analytics: analyticsPayload?.data?.totalViews ?? 0,
+          message: "",
+          workspaceState: "ready",
+          ready: true,
+        });
+      } catch (error) {
+        set({
+          status: "Offline",
+          workspaceState: "error",
+          previewIssue: "Live preview is unavailable until the workspace reconnects.",
+          message:
+            error instanceof Error ? error.message : "Could not load your portfolio workspace.",
+          ready: true,
+        });
+      }
+    },
+
+    saveDraft: async () => {
+      const current = get();
+      set({ status: "Saving" });
+      savePortfolioCache({ slug: current.slug, content: current.content });
+      try {
+        const response = await fetch(backendApiUrl("/portfolios/draft"), {
+          method: "PUT",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            documentId: current.draft?.id,
+            subdomain: current.slug,
+            revision: current.draft?.revision,
+            snapshot: current.content,
+          }),
+        });
+        const payload = await response.json().catch(() => ({}));
+        if (response.status === 409) {
+          set({
+            status: "Conflict",
+            message: "This draft changed in another session. Refresh before continuing.",
+          });
+          return null;
+        }
+        if (!response.ok) throw new Error(payload.message || "Draft sync failed.");
+        const saved = {
+          ...payload.data,
+          content: parsePortfolioContent(payload.data.content),
+        } as CloudPortfolioDraft;
+        set({
+          draft: saved,
+          status: "Saved",
+          isDirty: false,
+          message: "",
+          previewIssue: "",
+        });
+        return saved;
+      } catch (error) {
+        set({
+          status: "Offline",
+          previewIssue: "Live preview is unavailable while your draft cannot sync.",
+          message:
+            error instanceof Error
+              ? `${error.message} Your changes remain in this browser.`
+              : "Draft sync failed. Your changes remain in this browser.",
+        });
+        return null;
+      }
+    },
+
+    publish: async () => {
+      const current = get();
+      set({ status: "Publish pending" });
+      const saved = await current.saveDraft();
+      if (!saved) return;
+      try {
+        const response = await fetch(backendApiUrl("/portfolios/publish"), {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            documentId: saved.id,
+            subdomain: saved.slug,
+            revision: saved.revision,
+          }),
+        });
+        const payload = await response.json().catch(() => ({}));
+        if (!response.ok) throw new Error(payload.message || "Unable to publish.");
+        set({
+          publication: { subdomain: payload.data.subdomain, status: "LIVE" },
+          status: "Saved",
+          message: `Published at ${payload.data.publicUrl}`,
+        });
+      } catch (error) {
+        set({
+          status: "Saved",
+          message: error instanceof Error ? error.message : "Unable to publish.",
+        });
+      }
+    },
+
+    unpublish: async () => {
+      try {
+        await fetchPayload("/portfolios/unpublish", "Unable to unpublish your portfolio.", {
+          method: "POST",
+        });
+        const pub = get().publication;
+        set({
+          publication: pub ? { ...pub, status: "SUSPENDED" } : null,
+          message: "Public site unpublished. Your draft is retained.",
+        });
+      } catch (error) {
+        set({
+          message: error instanceof Error ? error.message : "Unable to unpublish your portfolio.",
+        });
+      }
+    },
+  })),
+);
diff --git a/apps/portfolio/template-library b/apps/portfolio/template-library
new file mode 160000
index 0000000..9530d5a
--- /dev/null
+++ b/apps/portfolio/template-library
@@ -0,0 +1 @@
+Subproject commit 9530d5abd38de7c53a9634805f386cb70cf26824
diff --git a/apps/portfolio/templates/catalog/templates.ts b/apps/portfolio/templates/catalog/templates.ts
new file mode 100644
index 0000000..4a52fd2
--- /dev/null
+++ b/apps/portfolio/templates/catalog/templates.ts
@@ -0,0 +1,29 @@
+export const templateIds = ["signal", "atelier"] as const;
+
+export type TemplateId = (typeof templateIds)[number];
+
+export interface TemplateSummary {
+  id: TemplateId;
+  name: string;
+  note: string;
+  mood: string;
+}
+
+export const templates: TemplateSummary[] = [
+  {
+    id: "signal",
+    name: "Signal",
+    note: "A precise, proof-first profile for product engineers.",
+    mood: "Structured / technical",
+  },
+  {
+    id: "atelier",
+    name: "Atelier",
+    note: "An editorial canvas for designers and independent builders.",
+    mood: "Expressive / editorial",
+  },
+];
+
+export function isTemplateId(value: string): value is TemplateId {
+  return templateIds.includes(value as TemplateId);
+}
diff --git a/apps/portfolio/templates/runtime/registry.tsx b/apps/portfolio/templates/runtime/registry.tsx
new file mode 100644
index 0000000..fe08d4d
--- /dev/null
+++ b/apps/portfolio/templates/runtime/registry.tsx
@@ -0,0 +1,11 @@
+import "server-only";
+
+import { notFound } from "next/navigation";
+import type { PortfolioContent } from "@/lib/portfolio";
+import { hasPrivateTemplate, templateLoaders } from "@/template-library/registry";
+
+export async function renderTemplate(project: PortfolioContent) {
+  if (!hasPrivateTemplate(project.templateId)) notFound();
+  const { default: Template } = await templateLoaders[project.templateId]();
+  return <Template project={project} />;
+}
diff --git a/apps/portfolio/tests/portfolio-contract.test.tsx b/apps/portfolio/tests/portfolio-contract.test.tsx
new file mode 100644
index 0000000..09cd128
--- /dev/null
+++ b/apps/portfolio/tests/portfolio-contract.test.tsx
@@ -0,0 +1,151 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import AtelierTemplate from "@/template-library/atelier/AtelierTemplate";
+import SignalTemplate from "@/template-library/signal/SignalTemplate";
+import { createDefaultPortfolio, demoPortfolio, parsePortfolioContent } from "@/lib/portfolio";
+
+describe("portfolio content contract", () => {
+  it("seeds signed-in identity without placeholder names", () => {
+    const content = createDefaultPortfolio({ name: "Gautam Raj", email: "gautam@veriworkly.com" });
+    expect(content.identity.name).toBe("Gautam Raj");
+    expect(content.identity.email).toBe("gautam@veriworkly.com");
+  });
+
+  it("migrates legacy portfolio snapshots", () => {
+    const content = parsePortfolioContent({
+      name: "Legacy User",
+      email: "legacy@example.com",
+      role: "Engineer",
+      intro: "Builds products.",
+      templateId: "atelier",
+      projects: [{ name: "Old project", summary: "Still useful", tags: [], year: "2025" }],
+    });
+    expect(content.templateId).toBe("atelier");
+    expect(content.identity.headline).toBe("Engineer");
+    expect(content.sections[0].items).toHaveLength(1);
+  });
+
+  it("omits hidden projects and renders empty project sections safely", () => {
+    const hidden = createDefaultPortfolio();
+    hidden.sections[0].visible = false;
+    expect(renderToStaticMarkup(<SignalTemplate project={hidden} />)).not.toContain(
+      "Your strongest project",
+    );
+
+    const empty = createDefaultPortfolio();
+    empty.sections[0].items = [];
+    expect(() => renderToStaticMarkup(<AtelierTemplate project={empty} />)).not.toThrow();
+  });
+
+  it("renders visible supporting sections in both launch templates", () => {
+    const content = createDefaultPortfolio();
+    content.sections.push({
+      id: "services",
+      type: "services",
+      title: "Services",
+      visible: true,
+      items: [{ id: "strategy", title: "Product strategy", summary: "Focused product direction." }],
+    });
+    expect(renderToStaticMarkup(<SignalTemplate project={content} />)).toContain(
+      "Product strategy",
+    );
+    expect(renderToStaticMarkup(<AtelierTemplate project={content} />)).toContain(
+      "Product strategy",
+    );
+  });
+
+  it("renders sections in the order selected in the editor", () => {
+    const content = createDefaultPortfolio();
+    content.sections = [
+      { id: "services", type: "services", title: "Services first", visible: true, items: [] },
+      ...content.sections,
+    ];
+    const signal = renderToStaticMarkup(<SignalTemplate project={content} />);
+    const atelier = renderToStaticMarkup(<AtelierTemplate project={content} />);
+    expect(signal.indexOf("Services first")).toBeLessThan(signal.indexOf("Selected work"));
+    expect(atelier.indexOf("Services first")).toBeLessThan(
+      atelier.indexOf("Your strongest project"),
+    );
+  });
+
+  it("does not render unsafe or incomplete social links", () => {
+    const content = createDefaultPortfolio();
+    content.socialLinks = [
+      { id: "unsafe", label: "Unsafe", url: "javascript:alert(1)" },
+      { id: "incomplete", label: "", url: "" },
+      { id: "safe", label: "Website", url: "https://example.com" },
+    ];
+    const markup = renderToStaticMarkup(<SignalTemplate project={content} />);
+    expect(markup).not.toContain("javascript:");
+    expect(markup).not.toContain("Unsafe");
+    expect(markup).toContain("https://example.com/");
+    expect(markup).toContain("Website");
+    expect(renderToStaticMarkup(<AtelierTemplate project={content} />)).toContain("Website");
+  });
+
+  it("drops unsupported section types from stored snapshots", () => {
+    const content = createDefaultPortfolio();
+    const parsed = parsePortfolioContent({
+      ...content,
+      sections: [
+        ...content.sections,
+        { id: "unknown", type: "script", title: "Unsafe", visible: true, items: [] },
+      ],
+    });
+    expect(parsed.sections.some((section) => section.id === "unknown")).toBe(false);
+  });
+
+  it("ships a complete template gallery demo", () => {
+    expect(demoPortfolio.sections.map((section) => section.type)).toEqual([
+      "projects",
+      "experience",
+      "services",
+      "skills",
+      "writing",
+      "testimonials",
+      "awards",
+      "contact",
+    ]);
+    expect(
+      demoPortfolio.sections.find((section) => section.type === "projects")?.items,
+    ).toHaveLength(3);
+    expect(demoPortfolio.socialLinks).toHaveLength(3);
+  });
+
+  it("renders supporting content with section-specific compositions", () => {
+    const content = {
+      ...demoPortfolio,
+      sections: [
+        ...demoPortfolio.sections,
+        {
+          id: "education",
+          type: "education",
+          title: "Education",
+          visible: true,
+          items: [
+            { id: "course", title: "Systems course", summary: "A focused course.", year: "2024" },
+          ],
+        },
+      ],
+    };
+    const signal = renderToStaticMarkup(<SignalTemplate project={content} />);
+    const atelier = renderToStaticMarkup(<AtelierTemplate project={content} />);
+    for (const section of [
+      "experience",
+      "services",
+      "skills",
+      "education",
+      "writing",
+      "testimonials",
+      "awards",
+    ]) {
+      expect(signal).toContain(`data-section="${section}"`);
+      expect(atelier).toContain(`data-section="${section}"`);
+    }
+    expect(signal).toContain("signal-timeline");
+    expect(signal).toContain("signal-quote-grid");
+    expect(atelier).toContain("atelier-service-list");
+    expect(atelier).toContain("atelier-testimonial-list");
+  });
+});
diff --git a/apps/portfolio/tsconfig.json b/apps/portfolio/tsconfig.json
new file mode 100644
index 0000000..705f5ce
--- /dev/null
+++ b/apps/portfolio/tsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/portfolio/vitest.config.ts b/apps/portfolio/vitest.config.ts
new file mode 100644
index 0000000..9e3941c
--- /dev/null
+++ b/apps/portfolio/vitest.config.ts
@@ -0,0 +1,7 @@
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  resolve: { alias: { "@": fileURLToPath(new URL(".", import.meta.url)) } },
+  test: { environment: "node" },
+});
diff --git a/apps/server/package.json b/apps/server/package.json
index 731bdbe..ef2e052 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@veriworkly/server",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "description": "VeriWorkly Resume Backend API",
   "main": "dist/index.js",
   "type": "module",
diff --git a/apps/site/package.json b/apps/site/package.json
index f1d3798..0ad5447 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@veriworkly/site",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/apps/studio/components/dashboard/StudioNavigation.tsx b/apps/studio/components/dashboard/StudioNavigation.tsx
index 560ee5e..0df5cc3 100644
--- a/apps/studio/components/dashboard/StudioNavigation.tsx
+++ b/apps/studio/components/dashboard/StudioNavigation.tsx
@@ -11,6 +11,7 @@ import {
   Newspaper,
   FolderOpen,
   HelpCircle,
+  PanelsTopLeft,
 } from "lucide-react";
 import Link from "next/link";
 
@@ -47,6 +48,14 @@ export const mainNav: StudioNavItem[] = [
     external: true,
     match: () => false,
   },
+
+  {
+    href: siteConfig.links.portfolio,
+    label: "Portfolio",
+    icon: PanelsTopLeft,
+    external: true,
+    match: () => false,
+  },
 ];
 
 export const supportNav: StudioNavItem[] = [
diff --git a/apps/studio/components/dashboard/StudioShell.tsx b/apps/studio/components/dashboard/StudioShell.tsx
index af405d8..8c9c031 100644
--- a/apps/studio/components/dashboard/StudioShell.tsx
+++ b/apps/studio/components/dashboard/StudioShell.tsx
@@ -35,7 +35,7 @@ interface StudioShellProps {
   mainClassName?: string;
 }
 
-const STUDIO_VERSION = "v3.11.0";
+const STUDIO_VERSION = "v3.12.0";
 
 const StudioShell = ({ children, mainClassName }: StudioShellProps) => {
   const router = useRouter();
diff --git a/apps/studio/config/site.ts b/apps/studio/config/site.ts
index 38490b4..1e4eee8 100644
--- a/apps/studio/config/site.ts
+++ b/apps/studio/config/site.ts
@@ -22,6 +22,9 @@ export const siteConfig = {
     app: isDev ? "http://localhost:3001" : "https://app.veriworkly.com",
     docs: isDev ? "http://localhost:3002" : "https://docs.veriworkly.com",
     blog: isDev ? "http://localhost:3003" : "https://blog.veriworkly.com",
+    portfolio: isDev
+      ? "http://localhost:3004/dashboard"
+      : "https://portfolio.veriworkly.com/dashboard",
   },
 
   keywords: [
diff --git a/apps/studio/package.json b/apps/studio/package.json
index 1b69cfa..2dbfd64 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@veriworkly/studio",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/package.json b/package.json
index 720b1c6..3e342d1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "veriworkly",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "private": true,
   "repository": {
     "type": "git",
diff --git a/scripts/mock-template-library.mjs b/scripts/mock-template-library.mjs
new file mode 100644
index 0000000..05490e8
--- /dev/null
+++ b/scripts/mock-template-library.mjs
@@ -0,0 +1,134 @@
+import fs from "fs";
+import path from "path";
+import { execSync } from "child_process";
+
+const projectRoot = process.cwd();
+const templateLibPath = path.join(projectRoot, "apps", "portfolio", "template-library");
+const registryFilePath = path.join(templateLibPath, "registry.ts");
+
+if (fs.existsSync(registryFilePath)) {
+  console.log("Template library already exists. Skipping mock setup.");
+  process.exit(0);
+}
+
+console.log("Template library not found. Setting up mock templates for CI build...");
+
+// Create directories
+fs.mkdirSync(templateLibPath, { recursive: true });
+fs.mkdirSync(path.join(templateLibPath, "atelier"), { recursive: true });
+fs.mkdirSync(path.join(templateLibPath, "signal"), { recursive: true });
+
+// Types
+const typesContent = `export interface PortfolioSection {
+  id: string;
+  type: string;
+  title: string;
+  visible: boolean;
+  items: Array<Record<string, unknown>>;
+}
+
+export interface PortfolioProject {
+  schemaVersion: 1;
+  templateId: string;
+  identity: {
+    name: string;
+    headline: string;
+    bio: string;
+    location: string;
+    email: string;
+    availability: string;
+    avatar: { id: string; url: string } | null;
+  };
+  seo: { title: string; description: string; socialImage: { id: string; url: string } | null };
+  socialLinks: Array<{ id: string; label: string; url: string }>;
+  sections: PortfolioSection[];
+}
+
+export function visibleSection(project: PortfolioProject, type: string) {
+  return project.sections.find((section) => section.type === type && section.visible);
+}
+
+export function itemText(item: Record<string, unknown>, key: string, fallback = "") {
+  return typeof item[key] === "string" ? item[key] : fallback;
+}
+
+export function itemTags(item: Record<string, unknown>) {
+  return Array.isArray(item.tags)
+    ? item.tags.filter((tag): tag is string => typeof tag === "string")
+    : [];
+}
+
+export function itemAssetUrl(item: Record<string, unknown>, key: string) {
+  const value = item[key];
+  return value && typeof value === "object" && typeof (value as { url?: unknown }).url === "string"
+    ? (value as { url: string }).url
+    : "";
+}
+
+export function safeExternalUrl(value: string) {
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.toString() : "";
+  } catch {
+    return "";
+  }
+}
+`;
+
+fs.writeFileSync(path.join(templateLibPath, "types.ts"), typesContent);
+
+// Registry
+const registryContent = `import type { ComponentType } from "react";
+import type { PortfolioProject } from "./types";
+
+export type TemplateComponent = ComponentType<{ project: PortfolioProject }>;
+
+export const templateLoaders = {
+  atelier: () => import("./atelier/AtelierTemplate"),
+  signal: () => import("./signal/SignalTemplate"),
+} satisfies Record<string, () => Promise<{ default: TemplateComponent }>>;
+
+export type PrivateTemplateId = keyof typeof templateLoaders;
+
+export function hasPrivateTemplate(id: string): id is PrivateTemplateId {
+  return id in templateLoaders;
+}
+`;
+
+fs.writeFileSync(registryFilePath, registryContent);
+
+// AtelierTemplate
+const atelierContent = `import React from "react";
+import type { PortfolioProject } from "../types";
+import "./styles.css";
+
+export default function AtelierTemplate({ project }: { project: PortfolioProject }) {
+  return React.createElement("div", null, "Mock Atelier Template: " + project.identity.name);
+}
+`;
+
+fs.writeFileSync(path.join(templateLibPath, "atelier", "AtelierTemplate.tsx"), atelierContent);
+fs.writeFileSync(path.join(templateLibPath, "atelier", "styles.css"), "/* Mock styles */");
+
+// SignalTemplate
+const signalContent = `import React from "react";
+import type { PortfolioProject } from "../types";
+import "./styles.css";
+
+export default function SignalTemplate({ project }: { project: PortfolioProject }) {
+  return React.createElement("div", null, "Mock Signal Template: " + project.identity.name);
+}
+`;
+
+fs.writeFileSync(path.join(templateLibPath, "signal", "SignalTemplate.tsx"), signalContent);
+fs.writeFileSync(path.join(templateLibPath, "signal", "styles.css"), "/* Mock styles */");
+
+console.log("Mock templates set up successfully.");
+
+try {
+  console.log("Formatting mocked files...");
+  execSync("npx prettier --write apps/portfolio/template-library", { stdio: "inherit" });
+  console.log("Formatting completed.");
+} catch (err) {
+  console.error("Failed to run prettier on mocked files:", err.message);
+}