86 lines
3.8 KiB
Markdown
86 lines
3.8 KiB
Markdown
# 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) |