@mevdragon/vidfarm-devcli 0.18.1 → 0.19.1

package/dist/src/reskin/portfolio-page.js

@@ -0,0 +1,687 @@
+// /portfolio/:slug — a public-facing showcase for a creator / video agency.
+//
+// A standalone farmville-styled page (see .claude/skills/farmville-saas-ux) that
+// shows off a body of work: portfolio title + quick info, an author highlight
+// that stays sticky with a "Contact" CTA (opens in a new tab), and the reel
+// itself as rows of "video on the left, title + description on the right".
+//
+// All data is HARDCODED in the PORTFOLIOS map below (keyed by slug) — there is
+// no backend. Swap the entries (or point videoUrl/avatarUrl at real assets) to
+// publish a real portfolio. Every field is escaped on render.
+//
+// Interactions (self-contained inline script, no bundle):
+//   • Click any reel row → opens a fullscreen TikTok-style vertical scroll deck
+//     (wheel / swipe / ↑↓ keys / nav buttons between videos), autoplaying only
+//     the slide in view, sound toggle, ESC / scrim to close.
+//   • The modal slide keeps the same "video left, title+description right" split
+//     on desktop/tablet; on phones it collapses to just the video with a compact
+//     caption strip, exactly like the request asked.
+import { reskinDocument, rkEscape } from "./document.js";
+// Where the "Contact" and "Start Free Trial" CTAs point (ZoomGTM collab funnel).
+const CTA_URL = "https://catalog.zoomgtm.com/tiktok-collab-quiz";
+// Placeholder avatar for the example portfolios.
+const PROFILE_PIC = "https://rimage.gnst.jp/livejapan.com/public/article/detail/a/00/03/a0003572/img/basic/a0003572_main.jpg";
+// Real short-form videos reused from the live /discover/feed (public S3 media).
+const FEED_BASE = "https://vidfarmprodstack-vidfarmbucket335ee12f-0vsvtd5earqy.s3.us-east-1.amazonaws.com/primitives/primitive%3Avideo_download/users/cus_2cada8a884204713b9eb614b7ca1f50d/jobs";
+const feedVideo = (jobId) => `${FEED_BASE}/${jobId}/source-video.mp4`;
+const SAMPLE = {
+    bunny: feedVideo("job_c3ef70d83ec3414093213e7f100051bb"), // Stop motion
+    fun: feedVideo("job_2b012397282b49df835cb4b503e52139"), // Memoirs
+    joyrides: feedVideo("job_90a4f42224e04f85b2751f94da31ea61"), // Audiogram
+    escapes: feedVideo("job_0dae0ea1abdc46899ff6e8d1ee0ed12f"), // Podcast clip
+    blazes: feedVideo("job_bdfe356b33be4065a1e10431fbe53bdc"), // Motion graphics
+    meltdowns: feedVideo("job_bc20ac00e44b48e98a533e86acd1f33c"), // 2D character animation
+    sintel: feedVideo("job_53b10c76e3fc46cdb8b9263c04d2716c"), // Diary Confession
+    elephants: feedVideo("job_6341497d068b472e93e5223d796af901") // Montage Video
+};
+// ── the hardcoded portfolios ─────────────────────────────────────────────────
+export const PORTFOLIOS = {
+    "sunny-studio": {
+        slug: "sunny-studio",
+        title: "Sunny Studio — Short-form that sells",
+        tagline: "A boutique video studio turning brands into scroll-stopping short-form. 40+ ads shipped, 12M+ organic views.",
+        about: "We script, shoot, and edit high-retention vertical video for DTC and SaaS brands. Every cut below started as a rough brief and shipped in under a week. Hover to preview, tap any piece to watch it full-screen.",
+        author: {
+            name: "Mia Okonkwo",
+            role: "Founder & lead editor · Sunny Studio",
+            avatarUrl: PROFILE_PIC,
+            bio: "Ex-agency editor now running a two-person studio. I obsess over the first 3 seconds, punchy pacing, and captions that carry the story even on mute.",
+            location: "Lisbon · working worldwide",
+            availableForHire: true,
+            stats: [
+                { label: "Videos shipped", value: "140+" },
+                { label: "Starting from", value: "$75/hr" },
+                { label: "Client rating", value: "4.9/5" }
+            ],
+            certifications: [
+                { title: "Scroll-Stopping Hooks: The First 3 Seconds", hours: 2, grade: 95 },
+                { title: "Retention Editing Masterclass", hours: 44, grade: 91 },
+                { title: "Short-Form Story Structure & Pacing", hours: 48, grade: 88 },
+                { title: "Caption Craft: Kinetic Type on Mute", hours: 5, grade: 78 }
+            ]
+        },
+        videos: [
+            {
+                id: "v1",
+                title: "Skincare launch — 3-second hook test",
+                description: "A pattern-interrupt open, tight jump cuts, and a bold price reveal. Cut three ways to A/B the opening line — the winner ran as the brand's evergreen ad.",
+                videoUrl: SAMPLE.fun,
+                meta: "0:24 · Paid ad",
+                tags: ["DTC", "Paid social", "Hook test"]
+            },
+            {
+                id: "v2",
+                title: "SaaS explainer — feature in 20 seconds",
+                description: "Screen-recording b-roll dressed up with kinetic captions and a calm VO. Turns a dry feature into a story a founder can post on launch day.",
+                videoUrl: SAMPLE.joyrides,
+                meta: "0:21 · Explainer",
+                tags: ["SaaS", "Kinetic captions"]
+            },
+            {
+                id: "v3",
+                title: "Founder talking-head recut",
+                description: "One long ramble, recut into a tight 30-second story with on-screen callouts and lower-thirds. Same footage, 4× the watch time.",
+                videoUrl: SAMPLE.escapes,
+                meta: "0:31 · Recut",
+                tags: ["Talking head", "Retention edit"]
+            },
+            {
+                id: "v4",
+                title: "Product drop teaser",
+                description: "Moody, fast, and loop-friendly. Built to autoplay silently in-feed and still land the message in the last frame.",
+                videoUrl: SAMPLE.blazes,
+                meta: "0:15 · Teaser",
+                tags: ["Launch", "Loop"]
+            },
+            {
+                id: "v5",
+                title: "UGC-style testimonial polish",
+                description: "Raw phone footage color-matched, captioned, and paced into a believable, high-converting testimonial ad.",
+                videoUrl: SAMPLE.meltdowns,
+                meta: "0:28 · UGC",
+                tags: ["UGC", "Testimonial"]
+            },
+            {
+                id: "v6",
+                title: "Brand sizzle reel",
+                description: "A 60-second highlight montage cut to music for the top of a landing page — energy first, details second.",
+                videoUrl: SAMPLE.bunny,
+                meta: "1:00 · Reel",
+                tags: ["Sizzle", "Montage"]
+            }
+        ]
+    },
+    "aria-films": {
+        slug: "aria-films",
+        title: "Aria Films — Cinematic stories, vertical-first",
+        tagline: "Narrative-driven brand films and docu-style shorts. Featured by three creator funds.",
+        about: "Aria makes short films that happen to sell. We lean into story, sound design, and restraint. Below is a selection of recent work — tap to watch full-screen.",
+        author: {
+            name: "Daniel Reyes",
+            role: "Director & editor · Aria Films",
+            avatarUrl: PROFILE_PIC,
+            bio: "Documentary background, now directing brand shorts. I care about tension, quiet moments, and endings that make people rewatch.",
+            location: "Mexico City",
+            availableForHire: true,
+            stats: [
+                { label: "Films directed", value: "60+" },
+                { label: "Starting from", value: "$120/hr" },
+                { label: "Repeat clients", value: "80%" }
+            ],
+            certifications: [
+                { title: "Cinematic Vertical Storytelling", hours: 52, grade: 94 },
+                { title: "Directing Talking-Head & Interview", hours: 8, grade: 89 },
+                { title: "Color & Mood for Short Films", hours: 40, grade: 96 },
+                { title: "Sound Design for Emotional Impact", hours: 3, grade: 82 }
+            ]
+        },
+        videos: [
+            {
+                id: "a1",
+                title: "Coffee roaster origin short",
+                description: "A two-minute origin story shot on location, cut down to a punchy vertical for the brand's pinned post.",
+                videoUrl: SAMPLE.sintel,
+                meta: "0:52 · Brand film",
+                tags: ["Docu", "Origin story"]
+            },
+            {
+                id: "a2",
+                title: "Nonprofit awareness spot",
+                description: "Quiet, human, and unhurried. Built to make people stop scrolling and feel something before the ask.",
+                videoUrl: SAMPLE.elephants,
+                meta: "0:40 · Spot",
+                tags: ["Nonprofit", "Narrative"]
+            },
+            {
+                id: "a3",
+                title: "Fashion lookbook motion piece",
+                description: "Slow-motion b-roll and rhythmic cuts synced to a custom track for a seasonal drop.",
+                videoUrl: SAMPLE.escapes,
+                meta: "0:33 · Lookbook",
+                tags: ["Fashion", "Motion"]
+            },
+            {
+                id: "a4",
+                title: "Behind-the-scenes cutdown",
+                description: "The making-of, recut into a satisfying loop that doubled as social proof for the main campaign.",
+                videoUrl: SAMPLE.joyrides,
+                meta: "0:26 · BTS",
+                tags: ["BTS", "Loop"]
+            }
+        ]
+    }
+};
+/** The slug used when someone hits bare /portfolio. */
+export const DEFAULT_PORTFOLIO_SLUG = "sunny-studio";
+// ── icons ────────────────────────────────────────────────────────────────────
+const PLAY_ICON = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.4v13.2L19 12z"/></svg>`;
+const CROSS_ICON = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6L6 18"/></svg>`;
+const CHEV_UP_ICON = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 14.5 7-7 7 7"/></svg>`;
+const CHEV_DOWN_ICON = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 9.5 7 7 7-7"/></svg>`;
+const SOUND_ON_ICON = `<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5 6 9H3v6h3l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/><path d="M18.5 6a9 9 0 0 1 0 12"/></svg>`;
+const SOUND_OFF_ICON = `<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5 6 9H3v6h3l5 4z"/><path d="m16 9.5 5 5M21 9.5l-5 5"/></svg>`;
+const MAIL_ICON = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>`;
+// A filled "verified" seal (badge outline + inner check) — colored via CSS.
+const VERIFIED_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 1.6l2.4 1.9 3 .1 1 2.9 2.4 1.8-.8 2.9.8 2.9-2.4 1.8-1 2.9-3 .1L12 22.4l-2.4-1.9-3-.1-1-2.9L3.2 15.7l.8-2.9-.8-2.9 2.4-1.8 1-2.9 3-.1z"/><path d="M10.6 14.6l-2.2-2.2-1.3 1.3 3.5 3.5 6-6-1.3-1.3z" fill="#fff"/></svg>`;
+const CHECK_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 12.5l5 5 10-11"/></svg>`;
+// Award rosette for the Certified Expert credentials.
+const CERT_ICON = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="6"/><path d="M8.2 13.3 7 22l5-3 5 3-1.2-8.7"/></svg>`;
+const CAP_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 10 12 5 2 10l10 5 10-5Z"/><path d="M6 12v5c0 1 2.7 2.5 6 2.5s6-1.5 6-2.5v-5"/></svg>`;
+/** Exam-grade qualifier from a 0–100 score. */
+function gradeTier(g) {
+    if (g >= 90)
+        return { label: "Excellent", cls: "is-excellent" };
+    if (g >= 75)
+        return { label: "Good", cls: "is-good" };
+    return { label: "Passed", cls: "is-pass" };
+}
+/** monogram from a name (up to 2 initials). */
+function monogram(name) {
+    const parts = String(name || "").trim().split(/\s+/).filter(Boolean);
+    const letters = parts.slice(0, 2).map((p) => p.charAt(0).toUpperCase()).join("");
+    return letters || "V";
+}
+/** Render one avatar (image if given, else a gold monogram tile). */
+function avatarHtml(author, cls) {
+    if (author.avatarUrl) {
+        return `<span class="${cls}"><img src="${rkEscape(author.avatarUrl)}" alt="${rkEscape(author.name)}" loading="lazy" /></span>`;
+    }
+    return `<span class="${cls} pf-avatar-mono">${rkEscape(monogram(author.name))}</span>`;
+}
+/** Poster/video tile shared by reel rows + modal slides. */
+function mediaTile(v, opts = {}) {
+    const poster = v.posterUrl ? ` poster="${rkEscape(v.posterUrl)}"` : "";
+    // muted + playsinline so grid rows can quietly autoplay-on-hover; the modal
+    // controls playback itself. preload metadata keeps the page light.
+    const auto = opts.autoplay ? " autoplay" : "";
+    return `<video class="pf-video" src="${rkEscape(v.videoUrl)}"${poster} muted loop playsinline preload="metadata"${auto}></video>`;
+}
+// A single reel row: video on the left, title + description on the right. The
+// whole row is a button that opens the modal at this index.
+function reelRow(v, index) {
+    const metaChip = v.meta ? `<span class="pf-media-chip">${rkEscape(v.meta)}</span>` : "";
+    const tags = (v.tags && v.tags.length)
+        ? `<div class="pf-tags">${v.tags.map((t) => `<span class="pf-tag">${rkEscape(t)}</span>`).join("")}</div>`
+        : "";
+    return `<button type="button" class="pf-row rk-card-hover" data-pf-open="${index}" aria-label="Play ${rkEscape(v.title)}">
+    <span class="pf-row-media">
+      ${mediaTile(v, { autoplay: true })}
+      ${metaChip}
+      <span class="pf-row-play" aria-hidden="true">${PLAY_ICON}</span>
+    </span>
+    <span class="pf-row-body">
+      <span class="pf-row-index">${String(index + 1).padStart(2, "0")}</span>
+      <span class="pf-row-title">${rkEscape(v.title)}</span>
+      <span class="pf-row-desc">${rkEscape(v.description)}</span>
+      ${tags}
+    </span>
+  </button>`;
+}
+// A modal slide: keeps the "video left / info right" split on desktop & tablet;
+// phones collapse to the video with a compact caption strip (CSS-driven).
+function modalSlide(v, index, total) {
+    const tags = (v.tags && v.tags.length)
+        ? `<div class="pf-tags pf-tags-light">${v.tags.map((t) => `<span class="pf-tag">${rkEscape(t)}</span>`).join("")}</div>`
+        : "";
+    const meta = v.meta ? `<div class="pf-slide-meta">${rkEscape(v.meta)}</div>` : "";
+    return `<div class="pf-slide" data-pf-slide="${index}">
+    <div class="pf-slide-inner">
+      <div class="pf-slide-video">
+        ${mediaTile(v)}
+        <div class="pf-slide-cap"><div class="pf-slide-cap-title">${rkEscape(v.title)}</div><div class="pf-slide-cap-desc">${rkEscape(v.description)}</div></div>
+      </div>
+      <div class="pf-slide-info">
+        <div class="pf-slide-count">${index + 1} / ${total}</div>
+        ${meta}
+        <h3 class="pf-slide-title">${rkEscape(v.title)}</h3>
+        <p class="pf-slide-desc">${rkEscape(v.description)}</p>
+        ${tags}
+      </div>
+    </div>
+  </div>`;
+}
+/** Renders the /portfolio/:slug page. Returns null when the slug is unknown so
+ *  the route can 404. */
+export function renderReskinPortfolio(slug, input = {}) {
+    const data = PORTFOLIOS[slug];
+    if (!data)
+        return null;
+    const { author, videos } = data;
+    const contactLabel = author.contactLabel || "Check Availability";
+    const contactHref = author.contactUrl || CTA_URL;
+    const statPills = (author.stats && author.stats.length)
+        ? `<div class="pf-stats">${author.stats
+            .map((s) => `<div class="pf-stat"><span class="pf-stat-value">${rkEscape(s.value)}</span><span class="pf-stat-label">${rkEscape(s.label)}</span></div>`)
+            .join("")}</div>`
+        : "";
+    const locationLine = author.location
+        ? `<div class="pf-author-loc"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg><span>${rkEscape(author.location)}</span></div>`
+        : "";
+    const availableLine = author.availableForHire
+        ? `<div class="pf-badge pf-badge-gray">${CHECK_ICON}<span>Available for In-House Hire</span></div>`
+        : "";
+    // "Certified Expert" — the education/credential series. Each course row opens
+    // the same CTA funnel as "Start Free Trial" in a new tab.
+    const certs = author.certifications ?? [];
+    const certsBlock = certs.length
+        ? `<div class="pf-certs">
+      <div class="pf-certs-head">${CAP_ICON}<span>Certified Expert</span></div>
+      <div class="pf-certs-list">
+        ${certs
+            .map((cr) => {
+            const t = gradeTier(cr.grade);
+            const hrs = `${cr.hours} hour${cr.hours === 1 ? "" : "s"}`;
+            return `<a class="pf-cert" href="${CTA_URL}" target="_blank" rel="noopener noreferrer" title="View the VidFarm education series">
+            <span class="pf-cert-ic">${CERT_ICON}</span>
+            <span class="pf-cert-main">
+              <span class="pf-cert-title">${rkEscape(cr.title)}</span>
+              <span class="pf-cert-meta">${rkEscape(hrs)} + exam · <span class="pf-cert-grade ${t.cls}">${cr.grade}% ${rkEscape(t.label)}</span></span>
+            </span>
+          </a>`;
+        })
+            .join("")}
+      </div>
+    </div>`
+        : "";
+    // The real homepage top nav (floating frosted-glass pill), reproduced with
+    // reskin tokens so the public portfolio carries the same site chrome.
+    const topNav = `<header class="pf-topnav">
+    <nav class="pf-nav" aria-label="Primary">
+      <a class="pf-nav-brand" href="/"><span class="rk-brand-mark pf-nav-mark">V</span>VidFarm</a>
+      <ul class="pf-nav-links">
+        <li><a href="/discover">Templates</a></li>
+        <li><a href="/clips">Clips</a></li>
+        <li><a href="/chat">Brainstorm</a></li>
+      </ul>
+      <div class="pf-nav-cta">
+        <a class="pf-nav-quiet" href="/login">Log in</a>
+        <a class="pf-nav-btn" href="/discover">Get started <span class="rk-arrow">→</span></a>
+      </div>
+    </nav>
+  </header>`;
+    // The author highlight (sticky left rail on desktop, top of stack on mobile).
+    const authorCard = `<div class="pf-author-card rk-card">
+      <div class="pf-author-head">
+        ${avatarHtml(author, "pf-avatar")}
+        <div class="pf-author-id">
+          <div class="pf-author-name">${rkEscape(author.name)}</div>
+          <div class="pf-author-role">${rkEscape(author.role)}</div>
+        </div>
+      </div>
+      ${locationLine}
+      ${availableLine}
+      <p class="pf-author-bio">${rkEscape(author.bio)}</p>
+      ${certsBlock}
+      ${statPills}
+      <a class="rk-btn rk-btn-gold pf-contact" href="${rkEscape(contactHref)}" target="_blank" rel="noopener noreferrer">
+        ${MAIL_ICON}<span>${rkEscape(contactLabel)}</span>
+      </a>
+      <div class="pf-badge pf-badge-blue pf-author-foot">${VERIFIED_ICON}<span>Power User on VidFarm</span></div>
+    </div>`;
+    // Cardless VidFarm CTA below the author info (secondary button → collab funnel).
+    const ctaBlock = `<div class="pf-cta">
+    <p class="pf-cta-text">Looking to create videos for social media? Try VidFarm AI for high quality videos starting at <strong>$0.01</strong> each.</p>
+    <a class="rk-btn rk-btn-ghost pf-cta-btn" href="${CTA_URL}" target="_blank" rel="noopener noreferrer">Start Free Trial <span class="rk-arrow">→</span></a>
+  </div>`;
+    const railInner = `${authorCard}${ctaBlock}`;
+    const about = data.about ? `<p class="pf-about">${rkEscape(data.about)}</p>` : "";
+    const body = `
+<main class="rk-container rk-page pf-page">
+  ${topNav}
+  <div class="pf-layout">
+    <aside class="pf-rail" aria-label="About the creator">
+      <div class="pf-rail-inner">${railInner}</div>
+    </aside>
+    <div class="pf-main">
+      <header class="pf-head">
+        <span class="rk-eyebrow pf-eyebrow">Portfolio</span>
+        <h1 class="rk-h1 pf-title">${rkEscape(data.title)}</h1>
+        <p class="rk-sub pf-tagline">${rkEscape(data.tagline)}</p>
+        ${about}
+      </header>
+      <section class="pf-reel" aria-label="Selected work">
+        ${videos.map((v, i) => reelRow(v, i)).join("\n")}
+      </section>
+    </div>
+  </div>
+
+  <div class="pf-viewer" data-pf-viewer hidden role="dialog" aria-modal="true" aria-label="${rkEscape(data.title)} — video viewer">
+    <div class="pf-viewer-scrim" data-pf-close></div>
+    <div class="pf-viewer-track" data-pf-track>
+      ${videos.map((v, i) => modalSlide(v, i, videos.length)).join("\n")}
+    </div>
+    <div class="pf-viewer-ui">
+      <button type="button" class="pf-viewer-btn" data-pf-mute aria-label="Toggle sound"><span class="pf-m-on">${SOUND_ON_ICON}</span><span class="pf-m-off">${SOUND_OFF_ICON}</span></button>
+      <button type="button" class="pf-viewer-btn" data-pf-close aria-label="Close viewer">${CROSS_ICON}</button>
+    </div>
+    <div class="pf-viewer-nav">
+      <button type="button" class="pf-viewer-btn" data-pf-prev aria-label="Previous video">${CHEV_UP_ICON}</button>
+      <button type="button" class="pf-viewer-btn" data-pf-next aria-label="Next video">${CHEV_DOWN_ICON}</button>
+    </div>
+  </div>
+</main>`;
+    return reskinDocument({
+        // Signed-out, SEO-facing page: no left sidebar nav, no chat FAB/dock.
+        chrome: "bare",
+        title: `${data.title} — Portfolio`,
+        description: data.tagline,
+        activeSlug: null,
+        pageCss: PORTFOLIO_CSS,
+        script: PORTFOLIO_SCRIPT,
+        body
+    });
+}
+// ── page-scoped styles ────────────────────────────────────────────────────────
+const PORTFOLIO_CSS = `
+/* bare (no sidebar): the top nav owns the top air; container stays centered */
+.pf-page{padding-top:18px;padding-bottom:72px}
+
+/* homepage top nav — floating frosted-glass pill (reskin tokens), spaced below */
+.pf-topnav{display:flex;justify-content:center;margin:0 0 40px}
+.pf-nav{width:100%;display:flex;align-items:center;gap:24px;padding:10px 12px 10px 20px;border-radius:var(--rk-r-full);
+  background:rgba(255,255,255,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
+  border:1px solid var(--rk-border);box-shadow:0 4px 24px -8px #00000026,0 1px 2px #0000000d}
+.pf-nav-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--rk-font-display);font-weight:800;font-size:21px;color:var(--rk-ink);letter-spacing:-.02em}
+.pf-nav-mark{width:40px;height:40px;border-radius:11px;flex:none}
+.pf-nav-links{display:flex;gap:2px;margin:0 auto;list-style:none;padding:0}
+.pf-nav-links a{display:inline-flex;align-items:center;padding:8px 12px;border-radius:var(--rk-r-lg);font-size:15px;font-weight:500;color:var(--rk-n-700);transition:background var(--rk-dur) var(--rk-ease)}
+.pf-nav-links a:hover{background:#0000000a;color:var(--rk-ink)}
+.pf-nav-cta{display:flex;align-items:center;gap:6px}
+.pf-nav-quiet{padding:8px 12px;font-size:15px;font-weight:500;color:var(--rk-n-700);border-radius:var(--rk-r-lg);transition:background var(--rk-dur) var(--rk-ease)}
+.pf-nav-quiet:hover{background:#0000000a;color:var(--rk-ink)}
+/* .pf-nav-cta prefix lifts specificity above RESKIN's .rk-root a{color:inherit}
+   (0,1,1) — a bare .pf-nav-btn (0,1,0) loses, so the white text goes dark. */
+.pf-nav-cta .pf-nav-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--rk-r-full);font-size:15px;font-weight:600;color:#fff;background:var(--rk-ink);box-shadow:var(--rk-shadow-sm);white-space:nowrap;
+  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.pf-nav-cta .pf-nav-btn:hover{background:#000;color:#fff;box-shadow:var(--rk-shadow-md);transform:translateY(-1px)}
+.pf-nav-btn .rk-arrow{transition:transform var(--rk-dur) var(--rk-ease)}
+.pf-nav-btn:hover .rk-arrow{transform:translateX(3px)}
+@media(max-width:820px){.pf-nav-links{display:none}}
+@media(max-width:560px){.pf-topnav{margin-bottom:26px}.pf-nav{gap:12px}.pf-nav-quiet{display:none}}
+/* two-column: sticky about rail on the LEFT (wider), reel on the right */
+.pf-layout{display:grid;grid-template-columns:392px minmax(0,1fr);gap:44px;align-items:start}
+.pf-main{min-width:0}
+@media(max-width:980px){
+  .pf-layout{grid-template-columns:1fr;gap:26px}
+}
+
+/* ── page head ── */
+.pf-head{margin-bottom:30px;display:grid;gap:8px}
+.pf-eyebrow{color:var(--rk-gold-700)}
+.pf-title{max-width:18ch}
+.pf-tagline{max-width:60ch}
+.pf-about{margin-top:6px;max-width:64ch;font-size:14.5px;color:var(--rk-text-muted);line-height:1.6}
+
+/* ── sticky left rail (author + CTA) ── */
+.pf-rail{position:sticky;top:22px;align-self:start}
+@media(max-width:980px){.pf-rail{position:static}}
+.pf-rail-inner{display:grid;gap:18px}
+
+/* verified/available check badges */
+.pf-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;line-height:1.2;justify-self:start}
+.pf-badge svg{flex:none}
+.pf-badge-gray{color:var(--rk-n-600)}
+.pf-badge-gray svg{color:var(--rk-n-400)}
+.pf-badge-blue{color:var(--rk-ink)}
+.pf-badge-blue svg{color:#2f80ed}
+
+.pf-author-card{padding:22px;display:grid;gap:13px}
+.pf-author-head{display:flex;align-items:center;gap:13px;min-width:0}
+.pf-avatar{flex:none;width:56px;height:56px;border-radius:var(--rk-r-full);overflow:hidden;display:grid;place-items:center;
+  background:var(--rk-n-100);box-shadow:var(--rk-shadow-xs)}
+.pf-avatar img{width:100%;height:100%;object-fit:cover;display:block}
+.pf-avatar-mono{background:var(--rk-gold-500);color:var(--rk-ink);font-family:var(--rk-font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
+.pf-author-id{min-width:0}
+.pf-author-name{font-family:var(--rk-font-display);font-weight:800;font-size:1.12rem;color:var(--rk-ink);letter-spacing:-.01em;line-height:1.15}
+.pf-author-role{font-size:12.5px;font-weight:600;color:var(--rk-text-muted);margin-top:3px;line-height:1.3}
+.pf-author-loc{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--rk-text-faint)}
+.pf-author-loc svg{color:var(--rk-gold-700)}
+.pf-author-bio{font-size:13.5px;color:var(--rk-text-muted);line-height:1.55}
+
+/* Certified Expert — education/credential list (each row → CTA funnel) */
+.pf-certs{display:grid;gap:9px;padding-top:13px;border-top:1px solid var(--rk-border)}
+.pf-certs-head{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--rk-ink)}
+.pf-certs-head svg{color:var(--rk-gold-700)}
+.pf-certs-list{display:grid;gap:7px}
+.pf-cert{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-n-50);color:inherit;
+  transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.pf-cert:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);transform:translateY(-1px);box-shadow:var(--rk-shadow-xs)}
+.pf-cert-ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#fff;border:1px solid var(--rk-border);color:var(--rk-gold-700)}
+.pf-cert-main{display:grid;gap:2px;min-width:0}
+.pf-cert-title{font-size:12.5px;font-weight:700;color:var(--rk-ink);line-height:1.25}
+.pf-cert-meta{font-size:11px;font-weight:600;color:var(--rk-text-faint);line-height:1.35}
+.pf-cert-grade{font-weight:800}
+.pf-cert-grade.is-excellent{color:#1f7a4d}
+.pf-cert-grade.is-good{color:var(--rk-gold-700)}
+.pf-cert-grade.is-pass{color:var(--rk-text-muted)}
+.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 0 2px;border-top:1px solid var(--rk-border);padding-top:14px}
+.pf-stat{display:grid;gap:2px;text-align:center}
+.pf-stat-value{font-family:var(--rk-font-display);font-weight:800;font-size:1.02rem;color:var(--rk-ink);letter-spacing:-.01em}
+.pf-stat-label{font-size:10.5px;font-weight:600;color:var(--rk-text-faint);text-transform:uppercase;letter-spacing:.04em;line-height:1.25}
+.pf-contact{width:100%;justify-content:center;gap:8px;margin-top:2px}
+.pf-contact svg{margin-top:-1px}
+.pf-author-foot{justify-self:center;margin-top:1px;padding-top:12px;border-top:1px solid var(--rk-border);width:100%;justify-content:center}
+
+/* cardless VidFarm CTA below the author info */
+.pf-cta{display:grid;gap:12px;padding:2px 6px;justify-items:start}
+.pf-cta-text{font-size:13.5px;color:var(--rk-text-muted);line-height:1.55}
+.pf-cta-text strong{color:var(--rk-ink);font-weight:800}
+.pf-cta-btn{align-self:start}
+
+/* ── reel rows: video left, title + description right ── */
+.pf-reel{display:grid;gap:18px}
+.pf-row{display:grid;grid-template-columns:208px minmax(0,1fr);gap:24px;align-items:stretch;text-align:left;width:100%;
+  background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);padding:14px;cursor:pointer;
+  box-shadow:var(--rk-shadow-card);transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.pf-row:hover{transform:translateY(-2px);box-shadow:var(--rk-shadow-lg);border-color:var(--rk-border-strong)}
+.pf-row:focus-visible{outline:none;border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
+.pf-row-media{position:relative;aspect-ratio:9/16;border-radius:var(--rk-r-xl);overflow:hidden;background:#000;display:block}
+.pf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:linear-gradient(150deg,var(--rk-n-200),var(--rk-n-100))}
+.pf-media-chip{position:absolute;left:8px;top:8px;z-index:2;font-size:10.5px;font-weight:700;color:#fff;
+  background:rgba(0,0,0,.46);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:3px 8px;border-radius:var(--rk-r-full)}
+.pf-row-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:#fff;opacity:0;
+  background:rgba(0,0,0,.22);transition:opacity var(--rk-dur) var(--rk-ease)}
+.pf-row-play svg{width:34px;height:34px;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
+.pf-row:hover .pf-row-play,.pf-row:focus-visible .pf-row-play{opacity:1}
+.pf-row-body{display:grid;gap:8px;align-content:center;min-width:0;padding:4px 8px 4px 0;position:relative}
+.pf-row-index{font-family:var(--rk-font-display);font-weight:800;font-size:12px;color:var(--rk-gold-700);letter-spacing:.06em}
+.pf-row-title{font-family:var(--rk-font-display);font-weight:700;font-size:1.14rem;color:var(--rk-ink);letter-spacing:-.01em;line-height:1.2}
+.pf-row-desc{font-size:13.5px;color:var(--rk-text-muted);line-height:1.55;
+  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+.pf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
+.pf-tag{font-size:11px;font-weight:700;color:var(--rk-n-600);background:var(--rk-n-100);border:1px solid var(--rk-border);
+  padding:3px 9px;border-radius:var(--rk-r-full)}
+.pf-tags-light .pf-tag{color:rgba(255,255,255,.9);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
+/* mobile: compact — smaller video, text wraps under naturally (grid stays 2-col but tighter) */
+@media(max-width:560px){
+  .pf-row{grid-template-columns:132px minmax(0,1fr);gap:16px;padding:12px;border-radius:var(--rk-r-2xl)}
+  .pf-row-title{font-size:1.02rem}
+  .pf-row-desc{-webkit-line-clamp:2;font-size:12.5px}
+}
+@media(max-width:400px){
+  .pf-row{grid-template-columns:108px minmax(0,1fr);gap:13px}
+}
+
+/* ── fullscreen TikTok-style viewer ── */
+html.pf-noscroll,html.pf-noscroll body{overflow:hidden}
+.pf-viewer{position:fixed;inset:0;z-index:130}
+.pf-viewer[hidden]{display:none}
+.pf-viewer-scrim{position:absolute;inset:0;background:rgba(15,12,5,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
+.pf-viewer-track{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
+.pf-viewer-track::-webkit-scrollbar{display:none}
+.pf-slide{height:100%;display:grid;place-items:center;scroll-snap-align:start;scroll-snap-stop:always;padding:24px}
+/* the split: video left, info panel right */
+.pf-slide-inner{display:flex;align-items:center;justify-content:center;gap:34px;max-width:1100px;width:100%;height:100%}
+.pf-slide-video{position:relative;flex:none;height:min(86vh,760px);aspect-ratio:9/16;border-radius:var(--rk-r-3xl);overflow:hidden;
+  background:#000;box-shadow:var(--rk-shadow-xl)}
+.pf-slide-video .pf-video{object-fit:contain;background:#000}
+.pf-slide-info{flex:1;max-width:380px;color:#fff;display:grid;gap:14px;align-content:center}
+.pf-slide-count{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rk-gold-500)}
+.pf-slide-meta{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.66);letter-spacing:.02em}
+.pf-slide-title{font-family:var(--rk-font-display);font-weight:800;font-size:1.7rem;line-height:1.14;letter-spacing:-.02em;color:#fff}
+.pf-slide-desc{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82)}
+/* caption strip inside the video — only shown when the side panel is hidden (phones) */
+.pf-slide-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:none;padding:18px 18px 20px;
+  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.1) 78%,transparent);color:#fff;pointer-events:none}
+.pf-slide-cap-title{font-family:var(--rk-font-display);font-weight:700;font-size:1.02rem;line-height:1.2}
+.pf-slide-cap-desc{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.85);margin-top:4px;
+  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+
+.pf-viewer-ui{position:absolute;top:max(16px,env(safe-area-inset-top,0px));right:16px;z-index:5;display:flex;gap:10px}
+.pf-viewer-nav{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:5;display:grid;gap:12px}
+.pf-viewer-btn{width:44px;height:44px;border-radius:var(--rk-r-full);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);
+  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;
+  transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.pf-viewer-btn:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
+.pf-viewer-btn span{display:grid;place-items:center;line-height:0}
+.pf-viewer .pf-m-off{display:none}
+.pf-viewer.is-muted .pf-m-on{display:none}
+.pf-viewer.is-muted .pf-m-off{display:grid}
+
+/* tablet: keep the split but tighten */
+@media(max-width:900px){
+  .pf-slide-inner{gap:24px}
+  .pf-slide-video{height:min(80vh,640px)}
+  .pf-slide-info{max-width:300px}
+  .pf-slide-title{font-size:1.4rem}
+}
+/* phones: just the video (compact), caption strip overlaid, side panel + nav hidden */
+@media(max-width:640px){
+  .pf-viewer-nav{display:none}
+  .pf-slide{padding:0}
+  .pf-slide-inner{gap:0}
+  .pf-slide-info{display:none}
+  .pf-slide-video{height:100%;width:100%;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
+  .pf-slide-cap{display:block}
+}
+`;
+// ── inline client script ──────────────────────────────────────────────────────
+const PORTFOLIO_SCRIPT = `
+(function(){
+  var doc=document;
+  var viewer=doc.querySelector('[data-pf-viewer]');
+  var track=viewer?viewer.querySelector('[data-pf-track]'):null;
+  if(!viewer||!track) return;
+  var slides=Array.prototype.slice.call(track.querySelectorAll('[data-pf-slide]'));
+  var htmlEl=doc.documentElement;
+  var muted=true;
+  var current=0;
+
+  // Reel rows quietly autoplay their (muted) preview on hover; pause on leave to
+  // keep the page light. Touch devices skip this (no hover).
+  doc.querySelectorAll('.pf-row').forEach(function(row){
+    var vid=row.querySelector('video');
+    if(!vid) return;
+    row.addEventListener('mouseenter',function(){ var p=vid.play(); if(p&&p.catch)p.catch(function(){}); });
+    row.addEventListener('mouseleave',function(){ vid.pause(); });
+  });
+
+  function slideVideos(){ return slides.map(function(s){ return s.querySelector('video'); }); }
+  function playOnly(idx){
+    slideVideos().forEach(function(v,i){
+      if(!v) return;
+      if(i===idx){ v.muted=muted; var p=v.play(); if(p&&p.catch)p.catch(function(){ v.muted=true; v.play&&v.play(); }); }
+      else { v.pause(); try{ v.currentTime=v.currentTime; }catch(e){} }
+    });
+  }
+  function applyMuted(){
+    viewer.classList.toggle('is-muted',muted);
+    var v=slideVideos()[current];
+    if(v){ v.muted=muted; if(!muted){ var p=v.play(); if(p&&p.catch)p.catch(function(){}); } }
+  }
+
+  function open(idx){
+    current=Math.max(0,Math.min(idx,slides.length-1));
+    viewer.hidden=false;
+    htmlEl.classList.add('pf-noscroll');
+    viewer.classList.toggle('is-muted',muted);
+    // jump to the chosen slide without animation, then start playback
+    var target=slides[current];
+    if(target){ track.scrollTop=target.offsetTop; }
+    playOnly(current);
+  }
+  function close(){
+    viewer.hidden=true;
+    htmlEl.classList.remove('pf-noscroll');
+    slideVideos().forEach(function(v){ if(v) v.pause(); });
+  }
+  function goTo(idx){
+    idx=Math.max(0,Math.min(idx,slides.length-1));
+    var target=slides[idx];
+    if(target) target.scrollIntoView({behavior:'smooth',block:'start'});
+  }
+
+  // open from a reel row
+  doc.querySelectorAll('[data-pf-open]').forEach(function(btn){
+    btn.addEventListener('click',function(){ open(parseInt(btn.getAttribute('data-pf-open'),10)||0); });
+  });
+  // close (scrim + buttons)
+  viewer.querySelectorAll('[data-pf-close]').forEach(function(el){ el.addEventListener('click',close); });
+  // prev / next
+  var prevBtn=viewer.querySelector('[data-pf-prev]');
+  var nextBtn=viewer.querySelector('[data-pf-next]');
+  if(prevBtn) prevBtn.addEventListener('click',function(){ goTo(current-1); });
+  if(nextBtn) nextBtn.addEventListener('click',function(){ goTo(current+1); });
+  // mute toggle
+  var muteBtn=viewer.querySelector('[data-pf-mute]');
+  if(muteBtn) muteBtn.addEventListener('click',function(){ muted=!muted; applyMuted(); });
+  // tap a slide video to toggle play/pause
+  slides.forEach(function(s){
+    var v=s.querySelector('video');
+    var box=s.querySelector('.pf-slide-video');
+    if(!v||!box) return;
+    box.addEventListener('click',function(e){
+      if(e.target.closest('[data-pf-close]')) return;
+      if(v.paused){ var p=v.play(); if(p&&p.catch)p.catch(function(){}); } else { v.pause(); }
+    });
+  });
+
+  // track which slide is in view → autoplay it, pause the rest
+  if('IntersectionObserver' in window){
+    var io=new IntersectionObserver(function(entries){
+      entries.forEach(function(en){
+        if(en.isIntersecting && en.intersectionRatio>=0.6){
+          var idx=slides.indexOf(en.target);
+          if(idx>=0 && idx!==current){ current=idx; }
+          playOnly(current);
+        }
+      });
+    },{root:track,threshold:[0.6]});
+    slides.forEach(function(s){ io.observe(s); });
+  } else {
+    track.addEventListener('scroll',function(){
+      var idx=Math.round(track.scrollTop/track.clientHeight);
+      if(idx!==current){ current=idx; playOnly(current); }
+    });
+  }
+
+  // keyboard: ESC closes, ↑/↓ navigate
+  doc.addEventListener('keydown',function(e){
+    if(viewer.hidden) return;
+    if(e.key==='Escape'){ e.preventDefault(); close(); }
+    else if(e.key==='ArrowDown'||e.key==='PageDown'){ e.preventDefault(); goTo(current+1); }
+    else if(e.key==='ArrowUp'||e.key==='PageUp'){ e.preventDefault(); goTo(current-1); }
+  });
+})();
+`;
+//# sourceMappingURL=portfolio-page.js.map