Skip to content

Terminal Feature

Jump to bottom
aiyu-ayaan edited this page Dec 30, 2025 · 1 revision

Terminal Navigation Feature

An interactive terminal-style navigation system built into the portfolio website, providing a unique command-line interface for browsing content.

🖥️ Overview

The Terminal feature transforms the traditional breadcrumb navigation into an interactive command-line interface that allows users to navigate and interact with the portfolio using Unix-like terminal commands. It appears at the top of every page and provides an engaging, developer-friendly way to explore the site.

🎯 Key Features

  • Interactive Command Line: Type commands directly in the navigation bar
  • Auto-completion: Tab completion for commands and paths
  • Context-Aware Navigation: Intelligent suggestions based on current location
  • Command History: Track and recall previous commands
  • Built-in Commands: 25+ commands for navigation and interaction
  • Customizable: Configure prompt symbol, username, and more
  • Theme Integration: Follows your active theme colors
  • Keyboard Shortcut: Press Ctrl+\`` (or Cmd+`` on Mac) to focus the terminal

🚀 Accessing the Terminal

The terminal is always visible at the top of every page as part of the navigation bar. Simply:

  1. Click anywhere on the terminal bar to focus
  2. Press Ctrl+\`` (Windows/Linux) or Cmd+`` (Mac) to focus from anywhere
  3. Type your command and press Enter
  4. Use Tab for auto-completion

📝 Navigation Commands

cd - Change Directory

Navigate between pages using familiar Unix-style paths.

# Navigate to specific pages
cd about-me
cd projects
cd blogs
cd gallery
cd admin

# Navigate home
cd ~
cd home

# Go back one level
cd ..

# Navigate to specific blog by title
cd blogs/My Blog Title

# Navigate to admin sections
cd admin/dashboard
cd admin/themes

Context-Aware Features:

  • When on /blogs, you can cd directly to blog titles
  • When in /admin, you can navigate to admin sections
  • Tab completion suggests valid paths based on your location

ls - List Contents

Display available navigation options from current location.

ls  # Shows available pages/sections

Dynamic Listing:

  • Root (/): Shows all main sections (about-me, blogs, projects, etc.)
  • /blogs: Fetches and displays all blog titles
  • /admin: Shows admin panel sections (dashboard, themes, config, etc.)

pwd - Print Working Directory

Display current page path.

pwd  # Example output: /projects

🛠️ Utility Commands

Information Commands

# Show current date and time
date

# Display user information
whoami

# View command history (last 10 commands)
history

# Get system information (browser, OS, theme, resolution)
sysinfo

Content Commands

# Open resume in new tab
resume

# Copy email to clipboard
email

# List social media links
socials

# Navigate to projects page
projects

Theme Commands

# View current theme
theme

# Switch to light mode
theme light

# Switch to dark mode
theme dark

Display Commands

# Print text to output
echo Hello, World!

# Show help menu with all commands
help

# Clear terminal output
clear

🎮 Fun Commands

# Display random ASCII art
ascii

# Roll a 6-sided die
roll

# Flip a coin
flip

# Ask the Magic 8-Ball a question
magic8 Will I get the job?

# Tell a programming joke
joke

# Party mode! (Rapid theme cycling with confetti)
disco

🎨 Auto-Completion

The terminal features intelligent Tab completion:

Command Completion

Type partial command and press Tab:

cd [Tab]      # Suggests available paths
th [Tab]      # Completes to "theme"
his [Tab]     # Completes to "history"

Path Completion

Context-aware path suggestions:

cd proj [Tab]           # Completes to "projects"
cd blogs/My Bl [Tab]    # Completes to full blog title
cd admin/th [Tab]       # Completes to "themes"

Nested Path Completion

cd blogs/ [Tab]         # Shows blog titles
cd admin/ [Tab]         # Shows admin sections

⚙️ Configuration

Configure the terminal behavior in the Admin Panel under Config section:

Available Settings

{
  "terminal": {
    "promptSymbol": "➜",           // Custom prompt symbol
    "username": "Visitor",         // Display name for whoami
    "showGitBranch": true,         // Show git:(master) indicator
    "asciiArts": [                 // Custom ASCII art
      {
        "name": "custom",
        "art": "  your\n  ascii\n  here"
      }
    ]
  }
}

Accessing Configuration

  1. Navigate to Admin Panel → Config
  2. Locate the terminal section
  3. Modify settings as needed
  4. Click Save Configuration

📚 Command Reference

Navigation Commands

Command Description Example
cd [path] Navigate to path cd projects
ls List contents ls
pwd Print working directory pwd

Information Commands

Command Description Example
whoami Display user info whoami
date Show current date date
history Show command history history
sysinfo System information sysinfo
help Show all commands help

Action Commands

Command Description Example
resume Open resume resume
email Copy email email
socials List social links socials
projects Go to projects projects
theme [mode] Switch theme theme dark
echo [text] Print text echo Hello!
clear Clear output clear
reboot Reload page reboot

Fun Commands

Command Description Example
ascii Random ASCII art ascii
roll Roll a die roll
flip Flip a coin flip
magic8 [q] Magic 8-Ball magic8 Will it rain?
joke Tell a joke joke
disco Party mode disco

💡 Tips & Tricks

Keyboard Shortcuts

  • `Ctrl/Cmd + `` - Focus terminal from anywhere
  • Tab - Auto-complete command or path
  • Enter - Execute command

Navigation Shortcuts

  • cd ~ or cd home - Return to homepage
  • cd .. - Go back one level
  • cd /path - Navigate from root (leading slash)

Efficient Workflows

  1. Quick Blog Access: cd blogs/[Tab] then select from suggestions
  2. Admin Navigation: cd admin/themes to jump directly to theme editor
  3. Multi-word Paths: Use exact titles: cd blogs/My Blog Post Title

Command Output

  • Output appears in an overlay below the terminal
  • Auto-dismisses after a few seconds
  • Click [Close] to dismiss manually
  • New command clears previous output

🔧 Technical Details

Implementation

  • Component: TerminalPath.js in src/app/components/admin/
  • Framework: Next.js with React hooks
  • Styling: Tailwind CSS with CSS variables for theming
  • Dependencies: canvas-confetti for disco mode

Features Under the Hood

  • Blog Caching: Fetches blog list once for better performance
  • Context Awareness: Suggests paths based on current location
  • Command History: Stores all executed commands
  • Async Operations: Fetches blogs dynamically for ls command
  • Theme Integration: Uses ThemeContext for dynamic theming

Accessibility

  • Keyboard-first navigation
  • Screen reader compatible
  • Focus management
  • High contrast support via theme

🎬 Example Usage Scenarios

Scenario 1: Browse Blogs

cd blogs           # Navigate to blogs page
ls                 # List all blog titles
cd My First Blog   # Open specific blog

Scenario 2: Admin Tasks

cd admin           # Go to admin panel
ls                 # See admin sections
cd themes          # Open theme editor

Scenario 3: Quick Actions

email              # Copy contact email
socials            # View all social links
resume             # Open resume in new tab

Scenario 4: System Information

whoami             # Check current user
sysinfo            # View system details
theme dark         # Switch to dark mode

🐛 Common Issues

Tab completion not working

  • Ensure you're typing a valid command prefix
  • Check if you're in the correct context (e.g., blogs path requires being on /blogs)

Command not executing

  • Press Enter to execute command
  • Verify command syntax with help

Blog navigation not working

  • Ensure blogs exist in database
  • Use exact blog title for navigation
  • Check network tab for API errors

Theme commands not working

  • Use theme light or theme dark (lowercase)
  • Verify theme system is properly configured

🔐 Security Notes

  • Terminal commands are client-side only
  • No server-side command execution
  • sudo command intentionally blocked with humorous message
  • Admin navigation requires proper authentication

🚀 Future Enhancements

Potential features for future releases:

  • Command aliases (e.g., clear → cls)
  • Arrow keys for command history navigation
  • Search command for content
  • Bookmark favorite paths
  • Command scripting/macros
  • Multi-line commands
  • Output history scrollback

🔗 Integration with Other Features

Works With Global Search

  • Global Search: Ctrl/Cmd + K - Search all content instantly
  • Terminal: `Ctrl/Cmd + `` - Command-line navigation
  • Complementary navigation methods for different use cases
  • Global Search for finding content, Terminal for quick navigation

Navigation Comparison

Feature Shortcut Best For
Global Search Ctrl/Cmd + K Finding specific content by keywords
Terminal `Ctrl/Cmd + `` Quick page navigation with commands

📖 Related Documentation

🤝 Contributing

Found a bug or have a feature request for the terminal?

  • Check existing issues
  • Submit detailed bug reports
  • Suggest new commands or improvements

Note: The terminal feature is designed to enhance user experience while maintaining familiar Unix-like command patterns. It's both functional and fun, providing a unique way to explore the portfolio.

Clone this wiki locally