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

Canvas background layer (z-index: 0)
Centered command container (z-index: 10)
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)

3.8 KiB Raw Blame History