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.

2.9 KiB Raw Blame History