# Personal — Page Template for React

> A warm, elegant personal home base: an intro hero with a monogram avatar and a live "now" line, a set of big tappable link rows, a "currently" highlight grid, a recent-writing list, and a magnetized contact footer — link-in-bio meets personal homepage, entirely props-driven with one warm accent.

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

## Install

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

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

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

## Props (`PersonalTemplateProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name?` | `string` | `"Nadia Ferrin"` | Full name, oversized in the hero. |
| `monogram?` | `string` | `"NF"` | Two-or-three-letter monogram used when no `avatar` is supplied. |
| `avatar?` | `React.ReactNode` | — | Optional avatar node (e.g. an `<img>`); replaces the monogram disc entirely. |
| `role?` | `string` | `"designer & writer"` | Role / one-liner shown beside the avatar. |
| `bio?` | `string` | — | Short intro paragraph, revealed word by word. |
| `now?` | `string` | — | Present-tense status line ("now" line) beside the pulse dot. |
| `location?` | `string` | `"Lisbon, PT"` | Location string in the hero meta row. |
| `nav?` | `PersonalNavItem[]` | — | Top navigation links. |
| `links?` | `PersonalLink[]` | — | Prominent home-base links (big tappable rows). |
| `currently?` | `PersonalCurrent[]` | — | "Currently" highlight facts. |
| `posts?` | `PersonalPost[]` | — | Recent-writing entries. |
| `contactEmail?` | `string` | `"hi@nadiaferrin.com"` | Contact email, rendered as the magnetized footer link. |
| `socials?` | `PersonalSocial[]` | — | Footer social links. |
| `footerNote?` | `string` | — | Quiet closing line in the footer. |
| `accent?` | `string` | `"#e2a06a"` | The single warm accent used for the avatar ring, the now-dot, hover rules and links. |

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

## Usage example

```tsx
import { PersonalTemplate } from "@/components/crucible/personal";

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

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.