biohazard-vfx/docs/stories/1.4.projects-section-revamp.md

Status

Ready for Review

Story

As a prospect, I want a Reel and clear Case Studies, so that I can assess capability fast.

Acceptance Criteria

1. /projects index offers Reel + Case Studies tabs with filters.
2. Case Study detail template with hero, problem, approach, pipeline, results, credits, CTA.
3. Media player wrapper standardized.
4. Reel asset source uses explicit priority order: prefer projects.reel.video → then projects.reel.embed → then fallback projects.hero.image.
5. Defaults are clear and testable: initial tab = Case Studies; filters default to All (no category/year/search applied); selected tab and filters reflected in URL query params.

Tasks / Subtasks

• Projects Index: Tabs + Filters (AC: 1)

  • Update src/app/projects/ProjectsPageClient.tsx to render two tabs: "Reel" and "Case Studies"; default tab = Case Studies
  • Reel tab: show a featured hero reel using asset priority: projects.reel.video → projects.reel.embed → projects.hero.image (fallback), via MediaPlayer wrapper
  • Case Studies tab: grid/list using existing ProjectGrid or current card layout; integrate filters: Category, Year (from createdAt), and a text Search; default filters = All
  • Persist selected tab and filters in URL query params (e.g., ?tab=case-studies&category=...&year=...&q=...)
  • Ensure server data fetch in src/app/projects/page.tsx still passes through; client filters run on received data without extra queries

• Case Study Detail Template Enhancements (AC: 2)

  • In src/app/projects/[id]/ProjectPageClient.tsx, introduce section layout: Hero → Problem → Approach → Pipeline Highlights → Results → Credits → CTA
  • Map to existing fields without schema changes: use info for Problem/Approach/Pipeline/Results via subheadings if markdown; keep Credits as is
  • Add a CTA block at end (e.g., Link to /contact) styled with token classes
  • Replace inline video/embed rendering with MediaPlayer wrapper component
  • Maintain existing SEO metadata in [id]/page.tsx

• Media Player Wrapper (AC: 3)

  • Create src/components/media/MediaPlayer.tsx that accepts: { video?: string; embed?: string; poster?: string; className?: string }
  • Standardize controls, aspect ratio, poster overlay, and mute/autoplay policy; integrate useAutoplayVideos for in-view playback when muted
  • Support iframe embeds safely with required attributes; fall back to poster image
  • Replace usages in Project detail and Reel tab

• Quality and Integration Verification

  • Lint/build pass: npm run lint / npm run build
  • IV1: Existing project data remains valid; no runtime errors if fields missing
  • IV2: SEO titles/descriptions preserved or improved (no regressions in generatePageMetadata)
  • IV3: Page LCP/TTFB within current budgets; avoid heavy client work on first paint; lazy-load media

Dev Notes

• Context
  • PRD Story 1.4. No DB schema changes; use current fields (category, tags, createdAt, video, embed, thumbnail, info, credits).
  • Standardize media with a wrapper used in both index (Reel) and detail.
• Relevant Source Tree
  • Index: src/app/projects/page.tsx, src/app/projects/ProjectsPageClient.tsx
  • Detail: src/app/projects/[id]/page.tsx, src/app/projects/[id]/ProjectPageClient.tsx
  • Components: src/components/ProjectGrid.tsx, src/components/ScrollEnhancements.tsx, src/components/motion/useAutoplayVideos.ts
  • Assets/Metadata: src/lib/metadata.ts, src/lib/assets.ts, Prisma models in prisma/*
• Implementation Guidance
  • Tabs can be simple client state with tokens; no dependency on heavy UI libs necessary.
  • Filters operate on the in-memory list from server; for Year, derive from createdAt.
  • If markdown present in info/credits, MarkdownContent already used in detail; leverage for subheadings.
  • Keep accessibility: keyboard focus, visible focus rings, no scroll-jacking.

Testing

• Manual
  • /projects: switching tabs does not remount unnecessarily; URL reflects current tab/filters.
  • Filters: combining Category + Year + Search updates the grid correctly; clearing filters resets view.
  • Detail page: sections render with meaningful headings; CTA routes to /contact.
• Regression
  • Deep-links to existing /projects/[id] still function.
  • No console errors/warnings introduced.
  • Media playback behaves consistently and does not auto-play with sound.

Change Log

Date	Version	Description	Author
2025-09-24	v1	Initial draft from PRD Story 1.4	Scrum Master
2025-09-24	v2	Implemented tabs/filters, media wrapper, and detail layout revamp	James

Dev Agent Record

Agent Model Used

gpt-5.0-codex

Debug Log References

• npm run lint (fails: existing repository-wide Prettier/ESLint violations unrelated to this story)
• npm run build

Completion Notes List

• Added tabbed projects index with persistent category/year/search filters and reel media priority fallback
• Standardized media playback through new MediaPlayer component across index and project detail views
• Reworked project detail page sections (Problem/Approach/Pipeline/Results/Credits + CTA) without schema changes

File List

• src/components/media/MediaPlayer.tsx
• src/app/projects/ProjectsPageClient.tsx
• src/app/projects/page.tsx
• src/app/projects/[id]/ProjectPageClient.tsx QA Results