Nerd Mode Documentation

Overview

The nerd mode toggle allows visitors to switch between two viewing modes:

Nerd Mode ON (default): Full terminal-style interface with command prompts, terminal styling, and console commands
Nerd Mode OFF: Clean, traditional website layout without terminal elements

How It Works

Toggle Location

Fixed position at top-right corner of all pages
Responsive design that adjusts for mobile devices
Terminal-style visual design matching the site theme

User Experience

First Visit: Shows a helpful tooltip explaining the feature
Preference Persistence: Uses cookies to remember user’s choice for 1 year
Instant Toggle: Immediate visual feedback when switching modes

What Changes in Non-Nerd Mode

Hidden Elements:

Terminal window menu bars (close/minimize/maximize buttons)
Command prompts (graydot.ai:~$ text)
Command text (ls, cat, etc.)
Terminal command lines (except section headings)

Preserved Elements:

All actual content (headings, paragraphs, cards)
Section headings from command-output (Portfolio, Blogs, etc.)
Navigation functionality
Project cards and carousels
Mind maps and interactive elements
Content structure and accessibility

Visual Changes:

Terminal boxes become clean white/light gray cards
Dark terminal styling becomes light, modern design
Navigation gets a “Navigation” label
Content text becomes standard black/dark gray
Cards maintain functionality with cleaner borders

Technical Implementation

CSS Classes

Terminal Command Lines

<p class="terminal-command">
    <span class="hostname">graydot.ai</span>:~$ 
    <span class="command">ls <span class="command-output">Portfolio</span></span>
</p>

Non-Nerd Mode Targeting

body.non-nerd-mode .terminal-command {
    display: block;
}

body.non-nerd-mode .terminal-command > * {
    display: none;
}

body.non-nerd-mode .command-output {
    display: block !important;
    color: #007acc;
    font-weight: bold;
    font-size: 18px;
}

body.non-nerd-mode .terminal-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

JavaScript Functionality

nerdMode: Stores user preference (true/false)
hasVisited: Tracks first-time visitors for tooltip display
Cookies persist for 365 days

Toggle Function

function toggleNerdMode() {
    const isNerdMode = !document.body.classList.contains('non-nerd-mode');
    setNerdMode(!isNerdMode);
    setCookie('nerdMode', (!isNerdMode).toString(), 365);
}

File Structure

_layouts/
├── default.html          # Contains nerd mode toggle implementation
├── blog.html             # Inherits nerd mode from default.html

index.html                # Uses terminal-command classes
about.html                # Uses terminal-command classes
_posts/                   # Blog posts inherit nerd mode functionality

Customization

Adding Nerd Mode to New Content

Command Lines: Add terminal-command class to command prompts:

<p class="terminal-command">
    <span class="hostname">graydot.ai</span>:~$ 
    <span class="command">your-command</span>
</p>

Terminal Elements: Use existing classes:
- .hostname - The terminal hostname
- .command - The command text
- .command-output - Command output/parameters
- .menu-bar - Terminal window controls

Styling Customization

Toggle Button

.nerd-toggle {
    /* Modify position, colors, size */
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #007acc;
}

Non-Nerd Mode Overrides

body.non-nerd-mode .your-element {
    /* Custom styling for non-nerd mode */
}

Mobile Responsiveness

Includes responsive design for mobile devices:

@media (max-width: 768px) {
    .nerd-toggle {
        top: 10px;
        right: 10px;
        font-size: 11px;
        z-index: 1002;
    }
    
    .mobile-sidebar-toggle {
        display: block;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1001;
    }
    
    .sidebar {
        position: fixed;
        left: -100%;
        width: 280px;
        transition: left 0.3s ease;
    }
    
    .sidebar.mobile-open {
        left: 0;
    }
}

Mobile Features:

Collapsible sidebar - Hidden by default on mobile (≤768px)
Hamburger menu - Animated toggle button in top-left
Slide-in animation - Smooth 0.3s transition
Backdrop overlay - Semi-transparent background when open
Auto-close - Closes when clicking navigation links or overlay
Keyboard support - ESC key closes the sidebar
Scroll prevention - Prevents background scrolling when open
Responsive resize - Auto-closes if window resized to desktop

Accessibility

ARIA Labels: Toggle includes proper labeling
Keyboard Navigation: Toggle is keyboard accessible
Screen Readers: Content remains accessible in both modes
Focus Management: Proper focus handling for interactive elements

Browser Compatibility

Modern Browsers: Full functionality (Chrome, Firefox, Safari, Edge)
CSS Features: Uses standard CSS transforms and transitions
JavaScript: Compatible with ES5+ browsers
Cookies: Standard document.cookie API

Testing

Manual Testing

Visit site for first time → Should show tooltip
Toggle nerd mode → Should hide terminal elements
Refresh page → Should remember preference
Clear cookies → Should reset to default (nerd mode on)

Elements to Verify

Command prompts disappear in non-nerd mode
Content remains visible and functional
Cards maintain proper styling
Navigation works in both modes
Tooltip shows for new visitors
Preference persists across sessions

Future Enhancements

Potential improvements:

Animation transitions between modes
Additional color theme options
Keyboard shortcut for toggle (e.g., ‘n’ key)
System preference detection (light/dark mode)
Analytics tracking for mode usage

Troubleshooting

Common Issues

Toggle not working: Check browser console for JavaScript errors
Styling issues: Verify CSS class names match implementation
Persistence problems: Check if cookies are enabled
Mobile layout: Test responsive design on various screen sizes

Debug Mode

Add to browser console:

// Check current mode
console.log('Nerd mode:', !document.body.classList.contains('non-nerd-mode'));

// Check cookies
console.log('Cookies:', document.cookie);

Share this page