# Portfolio — Page Template for React

> A full single-page portfolio landing template for a developer or designer: a striking hero (name, role, one-line pitch) over a soft WebGL gradient mesh, a selected-work grid of tilting Facet cards, a count-up metrics band, an about + skills section, a compact experience timeline, and a contact footer — every string a prop, one cool indigo accent knob, fully reduced-motion-safe.

- Page: https://crucibleui.com/components/templates/portfolio
- Category: [templates](https://crucibleui.com/components/templates)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: ogl
- npm dependencies: motion, ogl

## Install

```bash
npx shadcn@latest add @crucible/portfolio
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/portfolio`.

## Props (`PortfolioTemplateProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name?` | `string` | `"Noa Ellison"` | Your name, oversized in the hero and shown in the nav. |
| `logo?` | `React.ReactNode` | `a monogram` | Inline logo mark (a 1em-scalable SVG using currentColor). |
| `role?` | `string` | `"Design Engineer"` | Role line under the name, e.g. "Design Engineer". |
| `kicker?` | `string` | `"Available for select work"` | Short kicker above the name. |
| `pitch?` | `string` | — | Hero pitch paragraph, revealed word by word. |
| `nav?` | `PortfolioNavItem[]` | — | Top navigation links. |
| `primaryCta?` | `PortfolioAction` | `"View work"` | Primary hero CTA. |
| `secondaryCta?` | `PortfolioAction` | `"Get in touch"` | Secondary hero CTA. |
| `projects?` | `PortfolioProject[]` | — | Selected-work entries. |
| `metrics?` | `PortfolioMetric[]` | — | Headline metrics shown as a count-up band. |
| `about?` | `string` | — | About statement paragraph. |
| `skills?` | `PortfolioSkillGroup[]` | — | Skill clusters. |
| `experience?` | `PortfolioExperience[]` | — | Experience / timeline entries. |
| `contactEmail?` | `string` | `"hello@noaellison.studio"` | Contact email rendered as the oversized footer link. |
| `contactHeadline?` | `string` | `"Have a project in mind?"` | Short line above the contact email. |
| `socials?` | `PortfolioSocial[]` | — | Footer social links. |
| `footerNote?` | `string` | — | Closing footer line. |
| `accent?` | `string` | `"#818cf8"` | The single cool accent (indigo by default) used for rules, chips, hover states, and the hero glow. |

Also accepts: `Omit<React.ComponentPropsWithoutRef<"div">, "children">`.

## Usage example

```tsx
import { PortfolioTemplate } from "@/components/crucible/portfolio";

export default function PortfolioTemplateDemo() {
  return (
    <div className="relative isolate h-[560px] w-full overflow-hidden rounded-xl bg-neutral-950">
      <PortfolioTemplate className="h-full overflow-y-auto overflow-x-hidden overscroll-contain" />
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. Pauses offscreen and on hidden tabs, clamps device pixel ratio, and tears down its GL/canvas context on unmount.