Components

Reusable React components organized by domain.

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

• 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

• 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

• VscoGallery - Infinite scroll VSCO gallery
• FeaturedGallery - Curated homepage gallery

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

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

Icons

• ProjectIcon - Renders image, emoji, or SVG component icons