Syransong / portfolio-2022

0 stars 0 forks source link

Project Cards are not clickable #5

Open Syransong opened 1 year ago

Syransong commented 1 year ago

Description

When a user hovers over a project card (found on home page and discipline pages), the entire card animates a few pixels upward. This is an affordance that indicates that the entire card serves some sort of function. In this case, the function would be that it's clickable and would bring the user to the project page. However, the only interactive element on the card is the link. Thus, this is a false affordance to users, which may cause frustration or confusion as they expect a certain behaviour.

The solution to this is to make the entire card component interactive, by wrapping it in an a tag.

Steps to Reproduce

  1. Go to the home page (karinasong.com).
  2. Scroll to the Featured Work section of the page
  3. Hover the cursor over one of the project cards, for instance, Linmon.
  4. Click on the project card.

Expected Result

The cursor turns into a pointer and the user is able to click anywhere on the project card area to navigate to the project page.

Actual Result

The cursor remains to show the default state. The project card is not clickable. Only the "View Project" link can be used to navigate to the project page.

Environments

This issue is present on all environments across all browsers.

Screenshots

Large Project Card: Screen Shot 2023-03-19 at 9 23 05 PM

Small Project Card: Screen Shot 2023-03-19 at 10 28 48 PM

Syransong commented 1 year ago

entire card area for both large and small cards are now clickable