Status

Draft

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 |

Dev Agent Record

Agent Model Used

{{agent_model_name_version}}

Debug Log References



Completion Notes List



File List



QA Results