docs: plan responsive Three.js scenes

tasks/plan.md

@@ -0,0 +1,60 @@
+# Implementation Plan: Responsive Three.js Portfolio Scenes
+
+## Overview
+
+Replace the fixed hero/about artwork with two decorative, low-poly Three.js scenes while preserving the existing content and design-system palette. Keep the current desktop composition at a 1440px maximum width, progressively simplify the scenes on smaller viewports, and make every page section responsive down to 320px.
+
+## Architecture Decisions
+
+- Use raw Three.js with orthographic cameras and small procedural geometries; no model or texture downloads are required.
+- Render with alpha so the canvas always exposes the section's exact `--bg-page` value.
+- Keep semantic content in HTML above decorative, `aria-hidden` canvases.
+- Select desktop, tablet, or mobile scene density at initialization; resize the camera without recreating assets unnecessarily.
+- Use CSS transitions for interface feedback and the render loop only for slow decorative scene motion while visible.
+- Preserve all five About milestones; switch from free positioning on desktop to a compact vertical timeline on mobile.
+
+## Task List
+
+### Phase 1: Responsive Foundation
+
+- [ ] Make the global frame, content container, typography, and spacing fluid below 1440px.
+- [ ] Add the Three.js runtime and its TypeScript declarations.
+
+### Checkpoint: Foundation
+
+- [ ] Type checking passes and 1440px layout dimensions remain unchanged.
+
+### Phase 2: Scenic Hero and About
+
+- [ ] Build the decorative hero scene with responsive mountains and a left-side sun/moon.
+- [ ] Build the decorative river scene with responsive geometry density.
+- [ ] Integrate both scenes behind accessible hero and milestone content.
+
+### Checkpoint: Scenes
+
+- [ ] Both themes render without canvas errors and reduced-motion mode is static.
+
+### Phase 3: Site-wide Responsive Layout
+
+- [ ] Adapt Projects and Experience for touch and narrow viewports.
+- [ ] Adapt Skills, Education, Milestones, and Footer for narrow viewports.
+- [ ] Add restrained, pointer-gated interaction feedback.
+
+### Checkpoint: Complete
+
+- [ ] Verify 320px, 768px, 1024px, 1440px, and wider-than-1440px layouts.
+- [ ] Type check and production build pass.
+- [ ] Light/dark themes, keyboard navigation, and reduced motion are verified.
+
+## Risks and Mitigations
+
+| Risk | Impact | Mitigation |
+| --- | --- | --- |
+| WebGL costs too much on mobile | High | Cap DPR, reduce geometry density, pause off-screen, and avoid post-processing. |
+| Decorative scene competes with text | Medium | Reserve central clearings and fade geometry near content. |
+| Theme background seam | Medium | Use transparent canvases over `var(--bg-page)`. |
+| Responsive changes alter the approved desktop design | Medium | Scope responsive overrides below 1440px and compare at the reference width. |
+
+## Open Questions
+
+All design questions were resolved before implementation: preserve all milestones, keep scenes decorative, and retain full desktop density while simplifying smaller layouts.