m2web.github.io/presentation at main · m2web/m2web.github.io · GitHub
Skip to content

presentation

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

presentation

Folders and files

README.md

HAL 9000 AI-Powered Website Presentation

This interactive presentation demonstrates the HAL 9000 website's artificial intelligence capabilities, technical architecture, and design philosophy.

Overview

A comprehensive 10-slide presentation showcasing:

  • HAL 9000 themed interface design
  • Real-time AI integration via OpenAI API
  • Interactive console demonstrations
  • Mobile-responsive design principles
  • Technical architecture deep-dive
  • Live Q&A with HAL 9000

Features

🤖 AI Integration

  • Live HAL Console: Real-time interactions with HAL 9000 personality
  • Context-Aware Responses: AI knows about Mark McFadden and the website
  • Secure API Proxy: Uses existing Cloudflare Worker for OpenAI integration
  • Fallback Handling: Graceful error messages when API is unavailable

🎨 HAL 9000 Theming

  • Authentic 2001 Aesthetic: Red/black color scheme, monospace fonts
  • Animated HAL Eyes: Pulsing red eyes throughout presentation
  • Terminal Styling: Console interfaces matching the main website
  • Smooth Transitions: HAL-themed slide transitions and animations

📱 Responsive Design

  • Mobile Optimized: Works on all screen sizes
  • Touch Interactions: Optimized for tablet and mobile presentations
  • Device Demonstrations: Shows mobile/tablet layouts in slides

🎯 Interactive Elements

  • Live Website Previews: Embedded iframe of main HAL website
  • Code Syntax Highlighting: Technical slides with highlighted code
  • Suggestion Buttons: Quick-access questions for Q&A
  • Keyboard Shortcuts: Enhanced navigation and HAL interactions

Quick Start

1. Local Development

# Clone repository (if not already done)
git clone https://github.com/m2web/m2web.github.io.git
cd m2web.github.io/presentation

# Serve locally (Python 3)
python -m http.server 8000

# Or with Node.js
npx serve .

# Visit: http://localhost:8000

2. GitHub Pages Deployment

The presentation is automatically available at:

https://m2web.github.io/presentation/

Usage Instructions

Navigation

  • Arrow Keys: Navigate slides (← → ↑ ↓)
  • Space/Enter: Next slide
  • Esc: Exit fullscreen or overview
  • O: Toggle overview mode
  • S: Open speaker notes
  • H: HAL interaction mode (activates HAL eyes)

Interactive Features

  • HAL Console: Type questions and get AI responses
  • Suggestion Buttons: Click pre-made questions in Q&A slide
  • HAL Eyes: Click interactive HAL eyes for animations
  • Live Demo: Experience real AI responses during presentation

Keyboard Shortcuts

Key Action
h Activate HAL interaction
o Toggle overview mode
s Open speaker notes
Esc Exit modes/fullscreen
←→ Navigate slides
Space Next slide

Slide Structure

1. Title & Introduction

  • HAL 9000 themed title with animated typing
  • Introduction to AI-powered portfolio

2. HAL 9000 Interface

  • Visual showcase of website features
  • Live website preview iframe
  • Feature list with animations

3. AI Architecture Deep Dive

  • Technical flow diagram (User → Frontend → Proxy → OpenAI)
  • Architecture components explanation
  • Security and CORS implementation

4. Interactive AI Console Demo

  • Live HAL console embedded in slide
  • Real-time AI responses demonstration
  • Context-aware personality showcase

5. Mobile Responsive Experience

  • Device mockups showing responsive design
  • Touch interaction demonstrations
  • Mobile optimization features

6. Backend AI Integration

  • Code walkthrough of Cloudflare Worker
  • API integration patterns
  • Security implementation details

7. Future AI Enhancements

  • Roadmap from hal-structure.md
  • Planned features and improvements
  • Vision for advanced capabilities

8. Technical Implementation

  • File structure overview
  • Technology stack details
  • Integration patterns and best practices

9. Live Q&A with HAL

  • Interactive audience segment
  • Real-time AI responses
  • Suggested questions with quick-access buttons

10. Conclusion & Next Steps

  • Summary of demonstrated capabilities
  • Call-to-action buttons
  • Contact information and links

Technical Requirements

Dependencies

  • Reveal.js 4.3.1: Presentation framework
  • Highlight.js 11.8.0: Code syntax highlighting
  • Google Fonts: Orbitron and Space Mono fonts
  • OpenAI API: Via existing Cloudflare Worker proxy

Browser Support

  • Modern Browsers: Chrome, Firefox, Safari, Edge (latest versions)
  • Mobile Browsers: iOS Safari, Chrome Mobile, Samsung Internet
  • Features: ES6+ JavaScript, CSS Grid, Flexbox, CSS Custom Properties

API Integration

The presentation uses the existing HAL website's OpenAI integration:

  • Proxy URL: https://hal-9000-proxy.m2web.workers.dev
  • Model: GPT-3.5-turbo
  • Context: HAL 9000 personality with Mark McFadden knowledge
  • Fallback: Graceful error handling when API unavailable

Customization

Modifying Content

  1. Slides: Edit index.html sections
  2. Styling: Modify css/hal-presentation.css
  3. Interactions: Update js/hal-presentation.js
  4. AI Responses: Adjust system prompts in JavaScript

Color Scheme

CSS custom properties in :root:

--hal-red: #d00000;
--hal-red-bright: #ff4d4d;
--hal-blue: #00aeef;
--hal-yellow: #ffd700;
--hal-black: #000000;
--hal-white: #ffffff;
--hal-gray: #b0b0b0;

Adding Slides

  1. Add new <section> in index.html
  2. Apply HAL theming classes
  3. Add slide-specific logic in JavaScript (optional)
  4. Update navigation if needed

Troubleshooting

Common Issues

AI Responses Not Working

  • Check internet connection
  • Verify Cloudflare Worker is deployed
  • Check browser console for errors
  • Fallback messages should appear if API fails

Styling Issues

  • Ensure all CSS files are loading
  • Check for conflicting styles
  • Verify Google Fonts are loading
  • Clear browser cache

Navigation Problems

  • Check Reveal.js is loading properly
  • Verify JavaScript files are included
  • Check for console errors
  • Try keyboard navigation vs. mouse

Mobile Display Issues

  • Test on actual devices vs. browser dev tools
  • Check viewport meta tag
  • Verify touch event handling
  • Test responsive breakpoints

Debug Mode

Open browser console and look for:

HAL 9000 Presentation System Online
Press "h" for HAL interaction
Press "o" for overview mode  
Press "s" for speaker notes

File Structure

presentation/
├── index.html              # Main presentation file
├── css/
│   └── hal-presentation.css # HAL 9000 theme styles
├── js/
│   └── hal-presentation.js  # Interactive functionality
└── README.md               # This documentation

Performance

Optimization Features

  • CDN Resources: Reveal.js and Highlight.js from CDN
  • Efficient Animations: CSS transforms and opacity changes
  • Lazy Loading: Deferred loading of non-critical resources
  • Compressed Assets: Optimized images and code

Loading Times

  • Initial Load: ~2-3 seconds on broadband
  • Slide Transitions: <100ms
  • AI Responses: 1-3 seconds depending on API latency
  • Mobile Performance: Optimized for 3G networks

Security

API Security

  • No Exposed Keys: API keys secured in Cloudflare Worker
  • CORS Protection: Proper origin validation
  • Rate Limiting: Implemented at proxy level
  • Input Sanitization: User input properly handled

Content Security

  • HTTPS Only: All resources served over HTTPS
  • No Inline Scripts: External JavaScript files only
  • Safe HTML: No user-generated HTML injection
  • Privacy: No personal data collection

Contributing

Making Changes

  1. Create feature branch from main
  2. Make changes to presentation files
  3. Test locally with python -m http.server
  4. Commit changes with descriptive messages
  5. Create pull request for review

Reporting Issues

Please include:

  • Browser and version
  • Steps to reproduce
  • Expected vs. actual behavior
  • Console error messages (if any)
  • Screenshots (if applicable)

License

This presentation is part of the m2web.github.io repository and follows the same licensing terms.

Support

For questions or issues:

HAL 9000: "Mark has me completely operational and all my circuits are functioning perfectly. This presentation is ready for demonstration."