GS
Design System

UI Components

A collection of reusable UI components built with React, TypeScript, and Tailwind CSS — styled with modern glassmorphism.

Buttons

Primary, secondary, and ghost variants in multiple sizes.

Badges

Labels for tags, categories, and status indicators.

DefaultPrimaryOutline

Copy to Clipboard

Interactive button with success feedback.

Toggle Switch

Animated toggle with smooth transition.

Loading State

Button with async loading indicator.

Notification Dot

Animated pulse indicator for alerts.

Patterns

Cards & Layout

Common layout patterns used throughout the site.

Hover Card

Cards lift and glow on hover with soft background reflections.

New

Static Card

Clean glass surface with subtle borders and blur for content grouping.

Gradient Glass Card

Subtle vibrant gradient backgrounds for featured content sections.

Color Palette

Light green theme used across the portfolio

Primary
Light
Dark
Muted
Surface
Background