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.

tasks/todo.md

@@ -0,0 +1,43 @@
+# Responsive Three.js Portfolio
+
+## Task 1: Responsive layout foundation
+
+- [ ] Remove fixed minimum widths without changing the 1440px composition.
+- [ ] Make the shared content container and typography scale safely.
+- [ ] Verify with `npx tsc --noEmit`.
+
+## Task 2: Three.js scene foundation
+
+- [ ] Add Three.js and shared renderer lifecycle utilities.
+- [ ] Use transparent, accessible canvases with DPR and visibility controls.
+- [ ] Verify cleanup, theme changes, and reduced motion.
+
+## Task 3: Hero landscape
+
+- [ ] Recreate the mountain silhouette and central clearing with simple geometry.
+- [ ] Show a left-side sun in light mode and moon with night lighting in dark mode.
+- [ ] Reduce object density below desktop widths.
+
+## Task 4: About river
+
+- [ ] Recreate the river, land plates, pads, grid, and trees.
+- [ ] Keep all five milestones and provide a compact mobile timeline.
+- [ ] Ensure text remains readable over both themes.
+
+## Checkpoint: Scenic sections
+
+- [ ] Hero and About are visually verified at 320px, 768px, 1024px, and 1440px.
+- [ ] Reduced motion removes spatial decorative movement.
+
+## Task 5: Remaining responsive sections
+
+- [ ] Projects and Experience adapt to smaller screens.
+- [ ] Skills, Education, Milestones, and Footer adapt to smaller screens.
+- [ ] All interaction feedback is pointer-gated and keyboard focus remains visible.
+
+## Task 6: Final verification
+
+- [ ] Type check passes.
+- [ ] Production build passes.
+- [ ] Browser console has no errors.
+- [ ] Layouts are checked at target widths in light and dark themes.