Skip to content

Implement Interactive Photo Collage for WAG Profile Page #27

@TKanX

Description

@TKanX

Description:

Replace the static single portrait on Professor Goddard's about page with an interactive photo collage component. The layout should display three photos in a scattered arrangement with polaroid-style frames at different rotation angles. On hover, each photo straightens and elevates to the front with a spring animation, ensuring clear visibility without overlap interference.

Tasks:

  • Create PhotoCollage client component with absolute positioning and 16:9 responsive container
  • Implement polaroid-style frames with custom rotation angles (-5°, +3°, -1.5°) and layered z-index
  • Add hover interactions (straighten rotation, z-index:50, scale 1.05x with cubic-bezier spring)
  • Support dark mode with adjusted shadows and background colors
  • Integrate into WAG page layout (flex-col mobile → lg:flex-row desktop, 45% collage / 55% info)
  • Replace original single portrait with collage in header section

Metadata

Metadata

Assignees

Labels

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions