fix: portfolio card style

[Sembauke]

The new design for the project cards. I and Ahmad decided on a new design, this design offers consistency with our news platform. Meaning, the cards look like the landing page on news. While keeping the flexibility of the old design.

We need to make sure this is what we want.

related to #48234

[Sembauke]

@ahmaxed, you are using an older version of the branch please update :)

[ahmaxed]

Here is the last layout. it accommodates for larger titles and larger descriptions. I removed the button in favor of turning the whole card to a link. We do have a similar pattern in news but I am not sure if it is obvious enough.

[huyenltnguyen]

We do have a similar pattern in news but I am not sure if it is obvious enough.

I just tested the PR locally and the changes look great.

I think the user would know that the title and the image are a link thanks to the pointer cursor and the hover state (the title has an underline, and the image has an overlay).

Though I'm wondering if we could/should add a border around the a. It's just that there is quite a lot of empty space in the item description, so the user could place the cursor on the empty space, without knowing it's still on the card, and accidentally clicks it. Having a border would help communicate where the card ends. (/news is a little different since the title and the image are separate links living in the same div, rather than two static elements grouped in a single a.)

Alternatively, I guess we could copy /news and have the image and the title as separate links?

[ahmaxed]

Thanks for the feedback. The border is going to look strange if the description and the title exceed the height of the image. Since there is a lot of space between the two cards, finding and clicking on the desired card should be straightforward.