Mobile Portfolio View

A mobile-first scrollable page layout with a bottom thumbnail drawer (MobilePageThumbnails), intersection-observer page tracking, and a floating action button.

MobilePortfolioView renders a vertically scrollable stack of page cards. An IntersectionObserver updates the active page as the user scrolls. A collapsible bottom tray (MobilePageThumbnails) lets users jump between pages. A FloatingActionButton is positioned above the tray.

All content is passed via props — no routing or data coupling. An optional headerAction slot accepts any ReactNode (e.g. a theme toggle).

Installation

npx shadcn@latest add @adv/mobile-portfolio-view

Usage

import MobilePortfolioView from '@/components/mobile-portfolio-view';

const pages = [
  <IntroPage key="1" />,
  <ExperiencePage key="2" />,
  <PortfolioPage key="3" />,
];

<MobilePortfolioView
  pages={pages}
  pageTitles={['Introduction', 'Experience', 'Portfolio']}
  onFabAction={(action) => console.log(action)}
  headerAction={<ThemeToggle />}
/>

Example

Hello, I'm Jane

Product Designer · San Francisco

Crafting thoughtful digital experiences that connect people and products.

Page 1 of 3

Experience

Acme Corp — Senior Product Designer (2021–present)

Beta Inc — Product Designer (2018–2021)

Page 2 of 3

Portfolio

Checkout Optimisation

Reduced drop-off by 23%

Page 3 of 3

1 / 3

Props

Prop	Type	Default	Description
`pages`	`ReactNode[]`	—	Required. Page content nodes — one per page.
`pageTitles`	`string[]`	—	Human-readable titles passed to the thumbnail tray.
`onFabAction`	`(action: string) => void`	no-op	Called with the FAB action id (`"shorter"`, `"summary"`, `"share"`, `"chat"`).
`headerAction`	`ReactNode`	—	Optional element placed in the top-right corner (e.g. a ThemeToggle).