UI Component Showcase

Explore all the UI components used throughout this portfolio. Built with shadcn/ui and customized for optimal user experience.

Carousel

A responsive carousel/slider component with keyboard navigation, touch support, and multiple configuration options.

Featured Projects Carousel

This mimics the homepage featured projects section with 3 cards on desktop, 2 on tablet, 1 on mobile.

AI Integration
AI Chatbot Platform
Conversational AI platform with natural language processing capabilities
Python
AI
NLP
Learn More →
Cloud Automation
Cloud Infrastructure Manager
Deploy and manage cloud resources across multiple providers
AWS
Terraform
Go
Learn More →
DevOps
DevOps Pipeline Tool
Automated CI/CD pipeline with intelligent testing and deployment
Jenkins
Docker
K8s
Learn More →
Data Analytics
Data Analytics Dashboard
Real-time analytics and visualization for business intelligence
Python
PostgreSQL
React
Learn More →
Mobile Development
Mobile App Builder
No-code platform for building mobile applications quickly
React Native
Node.js
MongoDB
Learn More →
Security
Security Scanner
Automated security vulnerability scanning and reporting
Go
Security
API
Learn More →

Slide 0 of 0 • Swipe on mobile, use arrows on desktop

With Progress Indicator

Shows current slide position with dot indicators.

Slide 1

This is slide content 1

Slide 2

This is slide content 2

Slide 3

This is slide content 3

Slide 4

This is slide content 4

Slide 5

This is slide content 5

Single Item Full Width

One item per view with center alignment - great for testimonials or featured content.

AI Chatbot Platform
Conversational AI platform with natural language processing capabilities
PythonAINLP
Cloud Infrastructure Manager
Deploy and manage cloud resources across multiple providers
AWSTerraformGo
DevOps Pipeline Tool
Automated CI/CD pipeline with intelligent testing and deployment
JenkinsDockerK8s

Multiple Items Per View

Shows 4 items on desktop, 3 on tablet, 2 on mobile with smooth scrolling.

1

Item 1

2

Item 2

3

Item 3

4

Item 4

5

Item 5

6

Item 6

7

Item 7

8

Item 8

9

Item 9

10

Item 10

11

Item 11

12

Item 12

Bounded Carousel (No Loop)

Buttons disable at the boundaries - notice the previous button is disabled at the start.

AI Chatbot Platform

Conversational AI platform with natural language processing capabilities

Cloud Infrastructure Manager

Deploy and manage cloud resources across multiple providers

DevOps Pipeline Tool

Automated CI/CD pipeline with intelligent testing and deployment

Data Analytics Dashboard

Real-time analytics and visualization for business intelligence

Mobile App Builder

No-code platform for building mobile applications quickly

Security Scanner

Automated security vulnerability scanning and reporting

Try navigating to the edges - buttons will disable

Vertical Orientation

Carousel can also scroll vertically. Useful for timelines or stacked content.

Step 1

Vertical carousel item 1

Step 2

Vertical carousel item 2

Step 3

Vertical carousel item 3

Step 4

Vertical carousel item 4

Step 5

Vertical carousel item 5

Usage Notes

  • Keyboard: Use arrow keys to navigate when focused
  • Touch: Swipe left/right on mobile and tablet devices
  • Responsive: Automatically adjusts items per view based on screen size
  • Loop: Can be configured to loop infinitely or stop at boundaries
  • Accessibility: Proper ARIA labels and keyboard navigation support