Projects 18 block design & features
The section begins with a header containing an uppercase label, a large bold heading, a descriptive paragraph, and a shadcn/ui outline Button with a down-right arrow. Below, project entries stack vertically as full-bleed rows with background images, each at minimum 288px tall.
At rest, a heavy dark overlay with subtle backdrop blur obscures each image, rendering the white text content legible. On hover the overlay lightens and the blur drops, revealing the underlying photograph. Simultaneously a "View project" outline button fades in beneath the description text. Each row contains a numbered index, title, subheading, and paragraph arranged in a flexible row layout.
The treatment creates a reveal-on-demand pattern where content is teased but imagery is held back until interaction. The dark default state keeps the section text-focused and scannable, while hover rewards curiosity with the full visual.
On mobile the row content stacks vertically within each background-image section, and the hover reveal adapts to tap interaction.