# 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.