# Components

Reusable React components organized by domain.



Reusable React components organized by domain.

## Layout [#layout]

* `SiteNav` - Shared pill navigation with avatar, active section, and mobile menu
* `SmoothScroll` - Reduced-motion-aware scrolling with modal and nested-scroll handling
* `BottomNav` - Bottom navigation bar (detects active note slug for chatbot context)
* `CommandPalette` - Keyboard shortcut palette
* `ThemeProvider` - Theme context for light and dark mode

## Content [#content]

* `NoteList` - Blog post listing with view counts
* `ArticlePage` - Full article renderer
* `TableOfContents` - Auto-generated TOC from nested H2–H6 headings (fixed sidebar on desktop, inline collapsible on mobile)
* `PageActions` - Markdown copy/export, assistant links, sharing, and previous/next links
* `RelatedArticles` - Related post suggestions
* `ProjectList` - Project cards with filter bar

## Home [#home]

* `HomePage` - Shared content tree for Hero and Two columns layouts

* `LayoutDockButton` - Persistent homepage layout picker

* `SceneBackground` / `SceneSurface` - Theme-aware artwork and ready-frame crossfades

* `GlyphTrail` - Desktop pointer trail using the active scene’s accent colors

* `SpotifySection` - Now playing / recently played tracks from Spotify (used on home and about pages)

## Gallery [#gallery]

* `VscoGallery` - Infinite scroll VSCO gallery
* `FeaturedGallery` - Curated homepage gallery

## UI [#ui]

* `DockPanel` - Animated dock panel surface with inert exits and reduced-motion support
* `Tooltip` - Portaled, viewport-aware hints with safe focus restoration
* `UniversalImage` - Image with placeholder fallback
* `ImagePreview` - Hover preview portal
* `Table` - Enhanced MDX table
* `YouTubeEmbed` - Responsive video embed

## OG Image [#og-image]

* `OGLayout` - Server-rendered OG image layout
* `TextElement` - Styled text for OG images
* `ImageElement` - Image with fallback for OG images

## Icons [#icons]

* `ProjectIcon` - Renders image, emoji, or SVG component icons