Style Guide

Terminal-themed components for Matt's Portfolio

Typography & Colors

Font Families

JetBrains Mono (Headings)

The Quick Brown Fox

Inter (Body)

The quick brown fox jumps over the lazy dog

Color Palette

Primary

Theme accent color - var(--primary)

Secondary

Complementary accent - var(--secondary)

Foreground

Text color - var(--foreground)

Muted

Subtle backgrounds - var(--muted)

Buttons & Badges

Button Variants
All button styles with terminal theme

Default

Glassmorphic Buttons

Badge Variants

Default
Secondary
Destructive
Outline
Next.js
TypeScript
React

Cards & Containers

Standard Card
Default shadcn card styling

This uses the standard card component with terminal theme colors.

Glass Card
Glassmorphic styling

Uses the .glass utility for frosted glass effect.

Border Trail
Animated border effect

Motion primitive with animated border trail.

Skeleton Loading States

Form Components

Form Elements
Inputs, textareas, checkboxes, and more

Interactive Components

Dialogs & Overlays

Alerts & Notifications

Alerts
Display important messages and notifications
Alert Dialog
Modal dialogs for confirmations

Data Display

Table
Display structured data in rows and columns
Recent Projects
NameStackStatusStars
Terminal ChatGo, Bubbletea
Completed
127
Task ManagerNext.js, TypeScript
Active
89
API GatewayRust, Actix
In Progress
45
Progress
Show completion status
Next.js95%
TypeScript90%
Go75%
Spinner
Loading indicators
Small
Default
Large

Media & UI Elements

Avatar
Display user or project images
MC

Matt C

Full Stack Developer

SMMDLG
Keyboard Keys
Display keyboard shortcuts
Open command palette
⌘K
Save file
CtrlS
Copy selection
⌘C

Toggle Components

Toggles
Single and grouped toggle buttons

Single Toggle

Toggle Group

Multiple Selection

Motion Primitives

Smooth text morphing animation for dynamic content changes.

Glow Effect

Interactive glow that follows your cursor - very terminal-esque!

Floating Effect

Balatro-style subtle floating animation with multi-axis movement.

Y-axis:±5px
X-axis:±2px
Duration:4s
Hover:Enhanced ↑
Usage Notes

Floating Cards

Subtle continuous animation (4-6px range, 4s duration) with enhanced hover effect

Cursor Glow

Interactive radial gradient that follows mouse position

Text Morph

Smooth character-by-character transitions for dynamic text

Animated Background
Smooth background transitions on hover

Hover over the technology buttons above to see a smooth animated background that follows your selection.

Utility Classes

Custom Utilities
Terminal-themed utility classes

.glass

Light glassmorphic background with blur

.glass-dark

Dark glassmorphic background with blur

.terminal-glow

Terminal Phosphor Glow Effect

.border-glow

Glowing cyan border effect

Style Guide for Matt's Portfolio • Terminal Theme

40+ shadcn/ui components styled with terminal aesthetics

Next.js 15
TypeScript
Tailwind CSS
shadcn/ui
Motion Primitives
40+ Components