biohazard-vfx/docs/stories/1.5.process-pages.md

Status

Ready for Review

Story

As a technical stakeholder, I want pipeline/tools/infrastructure pages, so that I understand reliability and stack.

Acceptance Criteria

1. /process/{pipeline,tools,infrastructure} pages implemented with sticky split or light reveals.
2. Badge and icon components for stack and capabilities.
3. Cross‑links to Projects and Contact.

Tasks / Subtasks

• Create Process Route Group (AC: 1)
  • Add directories: src/app/process/pipeline, src/app/process/tools, src/app/process/infrastructure
  • Each with page.tsx implementing a top section and content blocks
  • Use StickySplit pattern from Story 1.3 when available; until then, use light IntersectionObserver reveals
• Pipeline Page (AC: 1, 3)
  • Content outline: Ingest → Tracking → FX → Lighting → Comp → Review; each as a Panel/Section
  • Include a small stepper or numbered headings; use token colors and spacing
  • Cross‑links: CTA buttons to /projects and /contact
• Tools Page (AC: 1, 2, 3)
  • Content outline: Houdini, Nuke, Unreal, Custom pipeline; brief capability notes
  • Implement Badge component for tool tags: src/components/ui/Badge.tsx or utility class; tokenized colors
  • Optional icon grid using Tabler icons already in repo (@tabler/icons-react)
  • Cross‑links to Projects/Contact
• Infrastructure Page (AC: 1, 2, 3)
  • Content outline: Render, Storage, Automation/CI for assets; reliability notes
  • Use badges for capability indicators (e.g., GPU, caching, versioning)
  • Cross‑links to Projects/Contact
• A11y and Responsive
  • Mobile stacks; if StickySplit used, disable sticky on small screens
  • Keyboard focus order logical; visible focus rings; headings structured (h1→h2→h3)
• Quality and Integration Verification
  • Lint/build pass: npm run lint / npm run build
  • IV1: No regressions to other routes
  • IV2: A11y checks pass (landmarks, headings, focus ring)
  • IV3: Bundle size growth <10% vs prior story

Dev Notes

• Context
  • PRD Story 1.5. New route group; no backend changes required.
  • Prefer StickySplit components if Story 1.3 is implemented first; otherwise keep implementation simple.
• Relevant Source Tree
  • New routes: src/app/process/*
  • Components: src/components/Navigation.tsx (reference AdminSidebar styles), src/components for potential reuse
  • Icons: @tabler/icons-react already in dependencies
• Implementation Guidance
  • Keep copy concise; use tokens for surface and text colors
  • Reuse button styles for CTAs; ensure links include descriptive aria-labels

Testing

• Manual
  • Verify each page renders and links to /projects and /contact
  • StickySplit (if used) respects reduced-motion and does not block native scroll
• Regression
  • Ensure new routes do not affect existing /projects or admin behavior

Change Log

Date	Version	Description	Author
2025-09-24	v1	Initial draft from PRD Story 1.5	Scrum Master
2025-09-24	v2	Implemented process sub-pages and badge component	James

Dev Agent Record

Agent Model Used

gpt-5.1-codex

Debug Log References

• 2025-09-24: npm run lint (fails – pre-existing repository lint debt outside scope)
• 2025-09-24: npm run build

Completion Notes List

• Added /process/pipeline, /process/tools, and /process/infrastructure pages with StickySplit layouts, mobile fallbacks, and CTA cross-links.
• Introduced reusable badge component for tooling and capability indicators.
• Lint task blocked by unrelated legacy formatting; recorded failure, build validated.

File List

• src/app/process/pipeline/page.tsx
• src/app/process/tools/page.tsx
• src/app/process/infrastructure/page.tsx
• src/components/ui/Badge.tsx

QA Results