Portfolio Components
Supporting notes for app-owned components documented in Storybook.
Portfolio components live in apps/web. They are app implementation details documented and tested through Storybook, not a reusable package API.
Use this page as a stable pointer for agents that already know /components.md. New component evidence belongs in Storybook stories colocated with the app component or under apps/web/src/stories.
@mun.digital/tokens remains the shared design source. App components should use token-backed Tailwind utilities and the local apps/web/src/lib/cn.ts helper when class composition is needed.
CVA and package-level abstractions remain deferred until there is real variant complexity and a second consumer.
SectionHeader
SectionHeader renders the portfolio section rail label and heading from apps/web/src/components/resume/SectionHeader.tsx.
| Prop | Type | Control | Notes |
|---|---|---|---|
index | string | text | Used by the default bracketed label. |
title | string | text | Rendered as the section heading. |
label | ReactNode | disabled | Optional custom label slot. Disabled in Storybook Controls because freeform ReactNode editing is noisy. |
className | string | disabled | Root override for integration layout. |
labelClassName | string | disabled | Label override for integration cases. |
titleClassName | string | disabled | Heading override for integration cases. |
import { SectionHeader } from "@/components/resume/SectionHeader";
<SectionHeader index="02" title="Experience" />
Acceptance Surface
- Storybook Docs describes app component props and representative states.
- Storybook Controls expose useful primitive props.
- Storybook play functions assert stateful behavior and visible output.
- Storybook a11y runs checked stories in hard-error mode.
- App unit tests are reserved for real logic such as resume adaptation, not duplicate presentational assertions.