Make team portraits clickable with hover feedback and scroll to member name

[Skoivumaki]

✨ Enhancement Description

Provide a brief description of the enhancement or improvement being suggested:

• What is it?: Update the member page so that the current team portrait images are clickable and have hover feedback. When a portrait is clicked, the page should scroll to the first instance of that team member’s name on the page.
• Why improve it?: Portraits are currently static, making it harder for users to connect a face to additional details or mentions further down the page. Adding click and hover interactions improves navigation and overall usability.

---

🌟 Benefits of the Enhancement

Explain how this enhancement will improve the project or user experience:

• User Experience: Users can click a team member’s portrait to jump directly to their name or bio section, saving time and reducing manual scrolling. Hover feedback also makes the portraits feel more interactive and discoverable.
• Project Impact: Encourages better linking between visual elements and content.

---

🛠️ Proposed Implementation

Outline how the enhancement could be implemented, including any technical considerations:

• Technical Details:

  • Convert portrait images into clickable elements.
  • Add hover and focus-visible feedback (remember project style).
  • On click, smoothly scroll to the first DOM element containing the team member’s name.
  • May require updating Directus: ensure each portrait has a reliable identifier (e.g., team member name, slug, or relation) that can be used to target the corresponding name on the page. (but shouldn't be necessary)
  • Ensure accessibility: clickable area has an accessible name (e.g., aria-label="Go to [Name]").

• Implementation Plan:

  1. Inspect the current member page markup and Directus collection for team portraits and names.
  2. Determine if existing data can link each portrait to a name. If not, update Directus schema accordingly.
  3. Implement clickable portrait components in the frontend.
  4. Add hover/focus styles consistent with the site’s design system.
  5. Write logic to find the first instance of the team member’s name on the page (e.g., by ID, data attribute, or text content) and call scrollIntoView({ behavior: 'smooth' }) etc.
  6. Test responsivity.
  7. If unsure about the implementation plan or need feedback, PM in Discord as noted in the issue request.

Note: You are free to implement this feature as you wish. The above is a suggested approach.