Portfolio
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.
oglpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/portfolioManual — install dependencies, then copy the source
npm install motion oglProps
| 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 all props of Omit<React.ComponentPropsWithoutRef<"div">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.