# Design Guidelines: Terminal Portfolio Website

## Design Approach
**Minimalist Terminal Aesthetic** - A single-purpose portfolio page featuring an interactive particle background with cursor-following character effects, inspired by terminal/matrix aesthetics with Catppuccin Mocha color palette.

## Color Palette (Catppuccin Mocha)
- **Base Background**: `#1e1e2e` (dark background)
- **Primary Text**: `#cdd6f4` (lavender)
- **Accent/Green**: `#a6e3a1` (green - for terminal command)
- **Teal Accent**: `#94e2d5` (teal - for particles/effects)
- **Surface/Card**: `#313244` (surface for command box)
- **Pure Black**: `#000000` (areas outside particles)

## Layout System
**Centered Single-Screen Layout**
- Full viewport height (100vh) single page
- Centered content vertically and horizontally
- No scrolling required
- Spacing: Use Tailwind units of 2, 4, 6, 8 for consistent rhythm

## Typography
- **Font Family**: JetBrains Mono (monospace) via Google Fonts for authentic terminal feel
- **Command Text**: `text-xl md:text-2xl` - the SSH command
- **Copy Button**: `text-sm` - button label
- **Font Weights**: Regular (400) for all text

## Core Components

### 1. Interactive Particle Background
- Full-screen HTML5 canvas element
- Random terminal characters (ASCII: `~!@#$%^&*()_+-=[]{}|;:,.<>?/\` and alphanumeric)
- Characters appear and trail near cursor position
- Particles follow mouse movement with smooth easing
- Character opacity fades based on distance from cursor
- Use Catppuccin Mocha teal (`#94e2d5`) and green (`#a6e3a1`) colors
- Canvas covers entire viewport, positioned fixed behind content

### 2. Terminal Command Display
- **Container**: Rounded rectangle box (`rounded-lg md:rounded-xl`)
- **Background**: Semi-transparent surface (`bg-surface/80` with backdrop blur)
- **Padding**: `p-6 md:p-8`
- **Border**: Subtle 1px border in lavender with low opacity
- **Layout**: Horizontal flex with command text + copy button
- **Command Text**: Monospace font, green accent color (`#a6e3a1`)
- **Spacing**: Gap of 4-6 units between command and button

### 3. Copy Button
- **Style**: Minimal icon button with subtle background
- **Icon**: Use Heroicons "ClipboardDocumentIcon" (outline variant)
- **Size**: `w-10 h-10` icon container
- **Background**: Surface color with hover state
- **Hover Effect**: Slight brightness increase
- **Click Feedback**: Brief scale animation and color change to indicate copied state
- **Success State**: Swap to "CheckIcon" for 2 seconds after successful copy
- **Position**: Aligned right next to the SSH command text

## Animations
- **Particle Movement**: Smooth 60fps canvas animation with requestAnimationFrame
- **Cursor Following**: Particles attracted to mouse with easing (0.1-0.2 factor)
- **Copy Feedback**: Scale pulse (scale-95 to scale-100) on click
- **Icon Transition**: Smooth swap between clipboard and check icons

## Responsive Behavior
- **Desktop (lg+)**: Full particle effect, larger command box
- **Tablet (md)**: Reduced particle count for performance
- **Mobile (base)**: Minimal particles, smaller command box, touch-friendly button size

## Component Structure Priority
1. Canvas background layer (z-index: 0)
2. Centered command container (z-index: 10)
3. Copy button (inline with command)

## Images
No images required - purely code-based particle canvas effect.

## Accessibility
- Copy button has proper ARIA label: "Copy SSH command"
- Success state announces "Copied to clipboard"
- Keyboard accessible (Enter/Space to copy)
- Sufficient color contrast for terminal text

## Technical Implementation Notes
- Use vanilla Canvas API or lightweight library for particle system
- Implement mouse position tracking with throttling for performance
- Use clipboard API for copy functionality
- Ensure particles don't interfere with text readability (low opacity when not near cursor)