Project 9 block design & features
The block splits into two equal columns. The left column is sticky and contains a breadcrumb navigation trail (Portfolio / Photography / Monochrome Stories), a light-weight title at a large scale, and three metadata sections separated by Shadcn UI Separator components: "Captured" with a date, "Location" with a region, and "Project Overview" with a body paragraph. The right column holds a featured image at a constrained height followed by an eight-image grid in two columns, each image in a rounded container with staggered entry animations and a hover zoom effect.
The breadcrumb uses small uppercase muted text with slash separators, where the current item renders in foreground color. The Separators provide horizontal rules between metadata rows. Images animate in with individual delays based on their index, and hover interactions combine container scale with image scale for a layered zoom. The sticky sidebar spans the viewport height.
The block reads as a portfolio project page with persistent context on the left and a browsable gallery on the right. The breadcrumb adds navigational context. The monochrome photography and light-weight typography create a quiet, contemplative mood.
On smaller screens the two-column layout stacks vertically, the sticky behavior is removed, and the image grid maintains its two-column structure.