Loading...
Loading...
This catalog defines reusable UI building blocks for this portfolio. Each component is independent and can be composed safely across pages and features.
Navbar
Top-level navigation and route discovery.
Dock
Compact floating shortcut launcher.
Command Menu
Keyboard-driven command/search surface.
Spotlight
Global search and navigation spotlight.
Animated Grid
Decorative motion-based layout background.
Timeline
Chronological storytelling and process steps.
Magic Cards
Interactive spotlight cards with glow behavior.
Project Card
Project preview with tags and outcomes.
Case Study Card
Impact-oriented case study preview.
Glass Card
Reusable glassmorphism container.
Gradient Button
Primary CTA with premium gradient styling.
Magnetic Button
Cursor-reactive CTA micro-interaction.
Infinite Marquee
Continuously scrolling logos or messages.
AI Chat Bubble
Message bubble for AI/user chat roles.
Pricing Card
Plan details with scope and CTA.
Animated Counter
Metric count-up display for KPI proof.
Theme Switch
Light/dark theme toggling control.
Code Block
Formatted code presentation with actions.
Blog Card
Article preview card with metadata.
Footer
Global footer with links and legal navigation.
No Page Coupling
Components must not import feature/page modules directly; all content enters through props.
No Data Fetching in Primitives
Reusable UI components do not call APIs; data orchestration belongs to feature containers.
Typed Public API
Each component exposes typed props for variants, size, state, and accessibility labels.
No Hardcoded Routes
Navigation actions are passed as handlers or href props to avoid business-specific assumptions.
Token-Driven Styling
Visual output must rely on design tokens and semantic classes instead of literal values.