61 lines
2.9 KiB
Markdown
61 lines
2.9 KiB
Markdown
# 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.
|