# SPIRE - Complete Guide

## About SPIRE

SPIRE is a file system-style interface for organizing and accessing learning resources, tutorials, and educational materials. This website mimics the look and feel of classic operating system file managers from the 1990s, designed to be simple, straightforward, and distraction-free.

### Key Features

• Classic retro file system interface
• Directory-style navigation
• Light/Dark mode support
• Fast loading and responsive design
• Built-in accessibility features
• Modern web technologies with nostalgic aesthetics

## Getting Started with SPIRE

### What You'll Learn in This Guide

• How to navigate the file system interface
• Understanding file types and content organization
• Using the built-in tools and features
• Customizing your experience with themes and accessibility
• Best practices for learning and organization

## Step 1: Understanding the Interface

SPIRE recreates the familiar file manager experience to create a comfortable learning environment.

### File System Navigation

• Files contain tutorials, guides, or reference materials
• Folders (when present) contain related learning materials
• Address Bar shows your current location (C:\SPIRE\)
• Menu Bar provides access to main functions

### Content Organization

The website is organized with logical structure:

• Home Directory: Main entry point with core resources
• Tools: Search functionality and utilities
• Help: Comprehensive documentation and support

### File Types You'll Encounter

• Text Documents (.txt) - Information and basic guides
• Markdown Files (.md) - Formatted tutorials with rich content
• Different file icons help you quickly identify content types

## Step 2: Navigation and Basic Usage

### How to Navigate

1. Single-click files to open and view their contents
2. Use the menu bar (Home, Tools, Help) for main navigation
3. Use your browser's back button to return to previous locations
4. Bookmark pages for quick access to important resources

### Understanding the Interface Elements

• Title Bar: Shows current file/page name
• Menu Bar: File operations (in individual documents)
• Toolbar: Shows available menu options
• Status Bar: Displays file information and system details
• Address Bar: Current directory path

## Step 3: Customizing Your Experience

### Theme Options

Access via the theme toggle button in the header:

• Light Theme: Darker backgrounds for comfortable reading
• Dark Theme: Maximum contrast (black/white) for accessibility
• Auto-save: Your preference is remembered between visits

### Font Size Controls

• A- button: Decrease font size
• A+ button: Increase font size
• Four sizes available: Small (11px), Medium (13px), Large (15px), XL (17px)
• Persistent: Settings automatically saved

### Accessibility Features

Access via the ♿ A11Y menu:

• Keyboard Navigation Mode: Enhanced focus indicators
• Reduced Motion: Disables animations for comfort
• Screen Reader Support: WCAG 2.1 AA compliant
• Skip Links: Jump to main content

## Step 4: Using the Tools

### Search Functionality

Located in Tools > Search:

• Find files by name across the entire site
• View results with file types and sizes
• Direct access to found resources
• Real-time search as you type

### Quick Actions

Available in the Tools section:

• Theme switching for immediate visual changes
• Homepage access for quick navigation
• Page refresh for troubleshooting
• System information viewing

## Step 5: Getting Help and Support

### Built-in Help System

Access via Help menu:

• Overview: Basic introduction and quick start
• Navigation Guide: Detailed interface explanation
• Keyboard Shortcuts: Complete shortcut reference
• FAQ: Common questions and solutions
• Technical Information: System requirements and browser support

### Accessibility Documentation

Dedicated accessibility page covers:

• Keyboard navigation techniques
• Screen reader optimization
• Visual accessibility options
• Browser compatibility information

## Best Practices for Learning

### Organizing Your Study Sessions

1. Start with this guide to understand the interface
2. Use browser tabs to keep multiple resources open
3. Take notes using your preferred method
4. Set up bookmarks for frequently accessed materials
5. Adjust themes based on lighting conditions

### Efficient Navigation Tips

• Use keyboard shortcuts for faster navigation
• Bookmark important pages for quick access
• Keep the Help section readily available
• Explore systematically rather than randomly clicking

### Accessibility Best Practices

• Enable keyboard navigation if you prefer keyboard control
• Adjust font sizes to your comfort level
• Use reduced motion if animations cause discomfort
• Try different themes to find what works best for your eyes

## Technical Information

### System Requirements

• Modern web browser with JavaScript enabled
• Internet connection for initial loading
• Minimum screen resolution: 320px width
• Input methods: Touch and mouse supported

### Browser Compatibility

• Chrome 80+ (recommended)
• Firefox 75+
• Safari 13+
• Edge 80+
• Mobile browsers on iOS and Android

### Technology Stack

• Next.js 14 React framework with TypeScript
• Tailwind CSS for responsive styling
• Heroicons for consistent iconography
• Modern web standards with backward compatibility

### What's Next?

Now that you understand the basics:

1. Explore the Tools section for search and utilities
2. Check out the Help system for detailed documentation
3. Customize your experience with themes and accessibility options
4. Start browsing available resources and tutorials
5. Bookmark this guide for future reference

### Need Support?

If you encounter any issues:

• Review this guide for common solutions
• Check the FAQ in the Help section
• Try different browsers if problems persist
• Adjust accessibility settings for better compatibility