Default Card
This is a default variant card with title and description.
UI Library
A small set of reusable components used across this portfolio, documented with their intended usage and accessibility notes.
Button Component Showcase
Variants
Sizes
All Variants × All Sizes
States
Link Buttons
Accessibility
Card Component Showcase
Variants
Feature Card
This is a feature variant card, perfect for showcasing features.
Content Card
This is a content variant card, optimized for content feeds.
Cards with Images
Card with Image
This card includes an image to demonstrate the image support.
Feature with Image
Feature cards can also include images to make them more visually appealing.
Content with Image
Content cards work great with images for displaying articles or posts.
Cards with Footer
Card with Footer
This card includes a footer section with action buttons.
Feature with Footer
Feature cards can have footers with multiple action options.
Content with Footer
Content cards often have footers with metadata or actions.
Cards with Custom Children
Custom Content Card
This card uses custom children instead of title and description props.
- Flexible content structure
- Full control over layout
- Perfect for complex content
Feature with Custom Content
You can combine custom children with other props for maximum flexibility.
Pro tip: Use children for complex layouts!
Complete Cards (All Features)
Complete Default Card
This card demonstrates all features: image, content, and footer.
This card also includes custom children content in addition to the title and description.
Complete Feature Card
Feature cards can showcase all capabilities together.
Tag Component Showcase
Variants
Default TagPrimary TagSecondary Tag
Sizes
Small TagMedium Tag
All Variants × All Sizes
Default
SmallMedium
Primary
SmallMedium
Secondary
SmallMedium
Usage Examples
Categories
ReactTypeScriptNext.jsSCSS
Technologies
FrontendBackendFull StackDevOps
Skills
Responsive DesignAccessibilityPerformance
Badge Component Showcase
Status Variants
LiveUpcomingDraft
All Status Types
LiveUpcomingDraft
Usage Examples
Content Status
LivePublishedActive
Upcoming Content
UpcomingScheduledComing Soon
Draft Content
DraftIn ReviewPending
Mixed Statuses
LiveUpcomingDraftPublished
Input Component Showcase
Input Types
Required Inputs
Error States
This field is required
Please enter a valid email address
All States Combined
This field has an error
This required field has an error
Select Component Showcase
Basic Select
Required Select
Error States
Please select an option
This field is required
Usage Examples
Toggle Component Showcase
Basic Toggle
Toggle States
Usage Examples
Loader Component Showcase
Basic Loader
Loading...
Please wait
Loader Sizes
Small loader
Medium loader
Large loader
Loader Without Text
Usage Examples
Loading Content
Loading content...
Processing Request
Processing your request
Fetching Data
Fetching data...
ErrorMessage Component Showcase
Basic Error Message
Error Message with Retry Button
Error Message Sizes
Error Message Without Retry
Usage Examples
API Error
Network Error
Validation Error
Toast Component Showcase
Toast Variants
Toast Sizes
Toast Positions
Auto-Dismiss Options
Usage Examples
Success Notification
Error Notification
Info Notification
FeatureCard Component Showcase
Basic FeatureCard
Design-to-Code Translation
Converts Figma and wireframes into clean, semantic HTML/CSS and reusable React components.
Responsive & Mobile-First
Optimized for all breakpoints. Designed to behave nicely on phones your stakeholders actually use.
API Integration Module
While this portfolio prototype demonstrates front-end capabilities without external API integration, I have extensive experience building production applications that integrate REST APIs, JSON data structures, and HTTP services. My public GitHub repositories showcase multiple projects with comprehensive API integrations, CMS systems, and external web services.