Projects 5 block design & features
The block presents six projects in a two-column grid beneath a large uppercase heading. Each card is a bordered container with a tall cover image at the top and a footer row below containing the project title, category text, and a pill-shaped year badge with rounded corners and border styling.
Cards animate into view on scroll with a fade and vertical slide, staggered progressively so each card enters slightly after the one before. Images scale up on hover within their overflow-hidden containers using a smooth 500ms ease transition.
Borders around each card and the year badge pill give the layout a structured, catalog-like quality. Typography pairs semibold titles with muted category text, keeping metadata scannable. The heading's uppercase treatment and large size anchor the section.
On mobile the grid collapses to a single column with the same card structure and animation behavior preserved.