Person Page
Person detail page with bio, contact details, and Schema.org Person structured data.
1920px
OpenInstallation
npx shadcn@latest add https://ui.uptoolkit.com/r/person-page.jsonUsage
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-pageInstalls 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.