fix: polish responsive scene composition
This commit is contained in:
@@ -2,42 +2,42 @@
|
||||
|
||||
## 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`.
|
||||
- [x] Remove fixed minimum widths without changing the 1440px composition.
|
||||
- [x] Make the shared content container and typography scale safely.
|
||||
- [x] 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.
|
||||
- [x] Add Three.js and shared renderer lifecycle utilities.
|
||||
- [x] Use transparent, accessible canvases with DPR and visibility controls.
|
||||
- [x] 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.
|
||||
- [x] Recreate the mountain silhouette and central clearing with simple geometry.
|
||||
- [x] Show a left-side sun in light mode and moon with night lighting in dark mode.
|
||||
- [x] 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.
|
||||
- [x] Recreate the river, land plates, pads, grid, and trees.
|
||||
- [x] Keep all five milestones and provide a compact mobile timeline.
|
||||
- [x] 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.
|
||||
- [x] Hero and About are visually verified across mobile, tablet, and desktop layouts.
|
||||
- [x] 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.
|
||||
- [x] Projects and Experience adapt to smaller screens.
|
||||
- [x] Skills, Education, Milestones, and Footer adapt to smaller screens.
|
||||
- [x] 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.
|
||||
- [x] Type check passes.
|
||||
- [x] Production build passes.
|
||||
- [x] Browser console has no source-code errors.
|
||||
- [x] Layouts are checked at target widths in light and dark themes.
|
||||
|
||||
Reference in New Issue
Block a user