Uptoolkit
GitHub

Person Page

Person detail page with bio, contact details, and Schema.org Person structured data.

1920px

Open

Installation

npx shadcn@latest add https://ui.uptoolkit.com/r/person-page.json

Usage

A bio header, an experience timeline, and a details sidebar with profile links and publications. The page emits one Schema.org Person node built straight from the same record the page renders, so there is nothing to keep in sync.

npx shadcn@latest add @uptoolkit/person-page

Installs app/person/page.tsx and the person-data fixtures.

Wiring it to a real person

Move the page to a dynamic segment and resolve the record from the route:

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const person = await db.person.findUniqueOrThrow({ where: { slug } });

  // ...pass person, experience, and publications into the same sections
}

Structured data

toPersonJsonLd in page.tsx maps the PersonProfile record directly onto schema.org/Person: jobTitle, worksFor, sameAs, and knowsAbout all come from fields the header and sidebar already render. Swap the inline mapper for the shared schema-org helpers if this page also needs to represent a fediverse actor.

For an organization-scale version of the same idea, see organization-page.