SPEC.md

Retro Terminal Portfolio Website

Project Overview

• Project Name: Retro Terminal Portfolio
• Type: Interactive single-page website
• Core Functionality: A desktop-inspired interface with draggable folder windows and retro terminal aesthetics
• Target Users: Visitors viewing a personal portfolio/resume website

---

UI/UX Specification

Layout Structure

Desktop (≥1024px)

• Full viewport height (100vh)
• Desktop-like interface with wallpaper background
• Folders arranged in a grid (3-4 columns)
• Draggable windows centered initially, can be repositioned

Tablet (768px - 1023px)

• Folders in 2-3 column grid
• Smaller window sizes (80% viewport width max 600px)

Mobile (<768px)

• Single column folder layout
• Windows take 90% viewport width
• Touch-friendly drag handles

Visual Design

Color Palette

• Background: #0a0a0a (deep black)
• Terminal Green: #00ff41 (primary accent - Matrix green)
• Terminal Dim: #00cc33 (secondary)
• Text Primary: #ffffff (white)
• Text Secondary: #888888 (gray)
• Window Background: #1a1a1a (dark gray)
• Window Border: #00ff41 (terminal green glow)
• Folder Icon: #ffffff (white)
• Folder Hover: #00ff41 (green)

Typography

• Font Family: "VT323", "Fira Code", monospace
• Heading Size: 24px (window titles)
• Body Size: 16px
• Terminal Text: 14px
• Line Height: 1.5

Spacing System

• Base unit: 8px
• Folder gap: 24px
• Window padding: 16px
• Window header height: 40px

Visual Effects

• CRT scanline overlay effect (subtle)
• Text glow: 0 0 10px #00ff41
• Window border glow: 0 0 20px rgba(0, 255, 65, 0.3)
• Folder hover: scale(1.1) with glow
• Window appear: fade-in + scale from 0.9 to 1
• Terminal cursor blink animation

Components

1. Desktop Background

• Black with subtle grid pattern
• Optional: faint scanlines overlay
• CRT screen curvature effect (subtle vignette)

2. Folder Items

• Folder icon (SVG or CSS-based)
• Label below icon
• States:
  • Default: white icon, gray text
  • Hover: green icon with glow, scale up
  • Active/Pressed: slight scale down

3. Draggable Window

• Header bar with title and close button
• Draggable by header
• Cannot resize/minimize
• Close button: "X" in top-right
• Z-index management (click brings to front)
• Content area with scroll if needed

4. Terminal Effect Elements

• Blinking cursor
• Typewriter text animation on window open
• Command prompt styling: > _

---

Functionality Specification

Core Features

1. Folder Grid Display

   • Display folders: Work Experience, Education, Projects, Skills, Contact
   • Each folder has icon + label
   • Responsive grid layout

2. Window Management

   • Click folder → opens corresponding window
   • Windows are draggable (mouse/touch)
   • Click window header to bring to front
   • Close button closes window
   • No minimize/maximize buttons

3. Window Content

   • Each folder shows relevant content
   • Content is scrollable if overflow
   • Terminal-styled content display

4. Retro Terminal Effects

   • CRT scanline overlay
   • Text glow effect
   • Blinking cursor animation
   • Typewriter reveal animation on open

User Interactions

• Click folder → open window
• Drag window header → move window
• Click close → close window
• Click window → bring to front
• Hover folder → visual feedback

Edge Cases

• Multiple windows can be open simultaneously
• Window cannot be dragged outside viewport
• Mobile: touch drag support
• Window position resets if closed and reopened

---

Acceptance Criteria

1. ✅ Website loads with black/white/green retro terminal aesthetic
2. ✅ Folders display in responsive grid
3. ✅ Clicking folder opens draggable window
4. ✅ Window has working close button
5. ✅ No minimize/maximize functionality
6. ✅ Windows can be dragged around viewport
7. ✅ CRT/retro terminal effects visible (scanlines, glow, cursor)
8. ✅ Responsive on mobile/tablet/desktop
9. ✅ Built with Vite + React + TypeScript
10. ✅ Z-index: clicking window brings it to front