Extracted stack files

design_guidelines.md

@@ -0,0 +1,86 @@
+# 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)