Page Thumbnails
A fixed left-sidebar thumbnail navigator for multi-page document views, with smooth auto-scroll to keep the active thumbnail visible.
PageThumbnails renders a 120 px fixed sidebar on the left edge. It shows one thumbnail per page — each is an A4-aspect-ratio card with a simplified visual layout preview. Clicking a thumbnail fires onPageSelect. The sidebar auto-scrolls so the active thumbnail is always visible.
The component is fully data-agnostic: no portfolio data dependency. Page titles and a footer label are passed via props.
Installation
npx shadcn@latest add @adv/page-thumbnailsUsage
import PageThumbnails from '@/components/page-thumbnails';
<PageThumbnails
currentPage={2}
totalPages={5}
pageTitles={['Intro', 'Experience', 'Skills', 'Projects', 'Contact']}
footerLabel="Jane Designer"
onPageSelect={(page) => setCurrentPage(page)}
/>Example
Introduction
Page 1 of 3
Props
| Prop | Type | Default | Description |
|---|---|---|---|
currentPage | number | — | Required. 1-based index of the active page. |
totalPages | number | — | Required. Total number of pages to render thumbnails for. |
onPageSelect | (pageNumber: number) => void | — | Required. Called with the 1-based page number when a thumbnail is clicked. |
pageTitles | string[] | [] | Human-readable label shown below each thumbnail. Falls back to "Page N". |
footerLabel | string | — | Optional label shown in the sidebar footer (e.g. author name). |
Envelope Animation
A multi-stage Framer Motion animation that opens an envelope to reveal a portfolio book — envelope seal, 3D rotation, flap opening, and a paginated book view.
Mobile Portfolio View
A mobile-first scrollable page layout with a bottom thumbnail drawer (MobilePageThumbnails), intersection-observer page tracking, and a floating action button.