Skip to content

feat(about): Implement Interactive Photo Collage for WAG Profile#28

Merged
TKanX merged 5 commits intomainfrom
feature/27-implement-interactive-photo-collage-for-wag-profile-page
Feb 13, 2026
Merged

feat(about): Implement Interactive Photo Collage for WAG Profile#28
TKanX merged 5 commits intomainfrom
feature/27-implement-interactive-photo-collage-for-wag-profile-page

Conversation

@TKanX
Copy link
Copy Markdown
Member

@TKanX TKanX commented Feb 13, 2026

Summary:

Replaced the static portrait on Prof. Goddard's biography page with a dynamic, interactive photo collage. This new component (PhotoCollage) displays multiple images in an artistically layered arrangement, featuring smooth hover animations that bring the active photo to the foreground. This enhancement adds visual richness and interactivity to the profile page.

Changes:

  • Created Photo Collage Component (src/app/(public)/about/wag/_components.tsx):

    • Designed an interactive photo gallery that layers multiple images with specific aspect ratios and rotations.
    • Implemented CSS transitions for transform and box-shadow to create a smooth "lift-and-straighten" effect on hover.
    • Configured z-index management to ensure the hovered image always appears on top.
  • Updated WAG Profile Page (src/app/(public)/about/wag/page.tsx):

    • Replaced the previous single-image portrait section with the new PhotoCollage component.
    • Adjusted the layout flexbox and spacing to accommodate the new visual element, optimizing for both mobile and desktop (lg) breakpoints.
  • Asset Management:

    • Added new high-quality images to public/images/wag/: blue-beret-coconut-restaurant.jpg and red-beret-suit-portrait.jpg.
    • Renamed portrait.png to red-beret-closeup.png for clarity.

@TKanX TKanX self-assigned this Feb 13, 2026
Copilot AI review requested due to automatic review settings February 13, 2026 02:30
@TKanX TKanX added the enhancement ✨ New feature or request label Feb 13, 2026
@TKanX TKanX linked an issue Feb 13, 2026 that may be closed by this pull request
6 tasks
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR enhances Prof. Goddard's biography page by replacing a static portrait with an interactive photo collage component. The collage displays three overlapping images with different rotations and positions, featuring hover animations that lift and straighten photos when users interact with them.

Changes:

  • Created a new PhotoCollage client component with hover-based animations
  • Replaced static portrait section with the interactive collage
  • Updated responsive breakpoints from sm: to lg: for better layout control

Reviewed changes

Copilot reviewed 2 out of 5 changed files in this pull request and generated 2 comments.

File Description
src/app/(public)/about/wag/page.tsx Integrated PhotoCollage component and adjusted responsive layout breakpoints
src/app/(public)/about/wag/_components.tsx Implemented interactive photo collage with hover animations and z-index management

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/app/(public)/about/wag/_components.tsx Outdated
Comment thread src/app/(public)/about/wag/_components.tsx Outdated
@TKanX TKanX merged commit c2cfc63 into main Feb 13, 2026
2 checks passed
@TKanX TKanX deleted the feature/27-implement-interactive-photo-collage-for-wag-profile-page branch February 13, 2026 02:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement ✨ New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement Interactive Photo Collage for WAG Profile Page

2 participants