docs: plan responsive Three.js scenes

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.