1.5 KiB
1.5 KiB
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.