---
id: portfolio.ds.project-hero
name: "Project Hero"
type: pattern
status: active
relations: [{"type":"composes","target":"portfolio.ds.project-item"}]
sources: ["apps/portfolio-site/src/design-system/docs/project-hero.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/ProjectHero.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/project-hero.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/project-hero.astro"]
---
# Project Hero

## Purpose
Homepage hero-style visual strip for built agentic projects.

`Project Hero` is the Home Page child component that shows the most recently updated project and the latest built agentic projects.

## Hook

Use when the legacy Homepage project strip needs to remain available for comparison or migration work.

## Contract
- Uses `Project Item` in a dense portfolio-tile grid; `Project Item` owns the internal `Project Card` usage.
- Homepage rendering uses the `gallery` card variant and should visually read as an image-first portfolio strip.
- Belongs under `Home Page`, not as a standalone top-level page-template component.
- First tile is the project with the newest `updated_at` value, falling back to `exported_at` when needed.
- Default layout: featured project spans 100% width; second row contains up to three next-latest projects, excluding the featured project.
- Ultra-wide layout: use a 12-column composition where the featured project spans 6 columns and latest projects occupy 2+2+2 columns beside it.
- Owns the tile dimensions through its grid; child cards and items must fill the grid cell instead of defining their own width or height.
- Runtime breakpoint rules must be mirrored by Design System preview breakpoint overrides, so mobile/tablet/desktop/ultra-wide switchers show the component state without relying on the real browser viewport.
- Latest tiles use half the height of the featured tile in the default layout; on mobile, the featured tile uses the full small viewport height (`100svh`, with `100vh` fallback) while latest tiles keep a fixed `18rem` row; on ultra-wide, latest tiles fill the same grid row height as the featured tile.
- Does not render a section title above the grid.
- Does not render an action link below the grid.
- Uses `Block Compact` spacing for its outer padding because it is a dense visual portfolio strip, not a long-form content block.
- Uses the same inter-item gap as `Card Grid`: `--space-4` by default/tablet and `--space-3` on mobile.
- Uses abstract projects in Design System preview.
- Does not own individual card content beyond passing project data.

## Use
- Rendering the homepage project block.
- Comparing the legacy project strip with the current `Project Hero Carousel`.

## Do Not Use
- Rendering all projects as a page.
- Rendering a single project detail page.
- Rendering article or note cards.

## Code Paths

- `packages/design-system/src/components/ProjectHero.astro`

## Accessibility

Preserve applicable accessibility behavior of the implementation and verify changes in actual usage.

## Verification

- Confirm every source path in frontmatter resolves to current implementation or documentation.
- Run `scripts/design-system-graph --check --no-write`.
- Verify actual usage and documented Preview against the enabled package profiles before completion.