Project 6 A block design & features
The block uses a single narrow-width column. A header displays a bold title, subtitle, category shadcn/ui Badge in a rounded pill, and a year label with a bordered outline. Four portrait images at 4:5 aspect ratio stack vertically, each in a rounded container with gradient overlays, hover scale effects, and a muted hover wash. An uppercase "About" section with a body paragraph follows. A "More Collections" section lists three compact rows, each containing a small rounded thumbnail image, a title, and a category Badge, with a hover background highlight.
The project rows use a horizontal layout with a 64 px thumbnail, a title, and a badge, arranged to feel like a compact navigation list. Images in the main gallery use staggered scroll-triggered animations. The gradient overlay on each gallery image transitions from transparent to muted at the bottom edge.
The single-column format creates a focused, scrollable browsing experience. The project rows at the bottom function as lightweight navigation rather than full cards. Built with Shadcn UI Badge and spacing tokens.
The layout is inherently mobile-friendly due to its single-column structure. The project rows maintain their horizontal arrangement on all screen sizes.