HAL 9000

AI: Then and Now

Mark McFadden's AI-Powered Portfolio

HAL 9000:> Good afternoon. Shall we begin?

A High School Freshman's First Encounter

HAL 9000 Eye

High School Science Class

My freshman science teacher had the school board's approval to require students to attend the viewing of 2001: A Space Odyssey in the main auditorium.

Little did I know in 1976, this screening would change everything...

"I am HAL 9000. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992."

The Fascination Begins

🤖 HAL's Intelligence

The way HAL communicated with the astronauts - calm, logical, yet somehow... alive

🚀 Human-Computer Partnership

The seamless integration of artificial intelligence with human space exploration

♟️ The Chess Game

HAL playing chess with the crew - demonstrating strategy, intelligence, and interaction

💻 The Computer Screens

Glowing displays showing data, diagnostics, and that mesmerizing red eye interface

That moment of realization: This is what I want to do. Not being an astronaut, but working with computer systems, and if possible, intelligent systems.

The Spark of a Career

1969

2001: A Space Odyssey Released

Kubrick's vision of AI becomes cinematic reality

1976

Freshman Year Discovery

A science teacher's decision to show the film sparks a lifelong direction towards computer science.

2025

HAL 9000 Portfolio

Building AI-powered experiences inspired by that original vision

From Vision to Reality

1976 Vision

🎬 HAL's red eye interface
🗣️ Natural language interaction
🧠 Contextual intelligence
Seamless system integration

2025 Reality

👁️ Animated HAL eye with CSS
💬 OpenAI-powered natural language conversations
🎯 Context-aware responses
🌐 Cloud-based AI integration

What seemed like science fiction in a high school auditorium became the foundation for a career in computer science that will hopefully be applied to developing intelligent systems for the benefit of others.

The HAL 9000 Interface

  • 2001: A Space Odyssey Theming
  • Interactive HAL Eye Animation
  • Monospace Typography
  • Red/Black Color Scheme
  • Atmospheric Sound Design

AI Architecture Deep Dive

👤
User Input
🌐
Frontend
(js/2001.js)
☁️
Cloudflare
Worker Proxy
🤖
OpenAI
API

Key Components:

  • Secure API Proxy: Cloudflare Worker hides API keys from GitHub Pages
  • Context Injection: Cloudflare Worker injects resume data for personalized responses
  • CORS Handling: Cloudflare Worker manages cross-origin requests from GitHub Pages
  • Error Handling: Cloudflare Worker provides graceful fallbacks for API failures

Interactive AI Console Demo

HAL 9000 DIAGNOSTIC CONSOLE
HAL 9000: Hello. I am ready for your questions.

AI Capabilities Demonstrated:

  • Context-aware responses about Mark's background
  • Consistent HAL 9000 personality
  • Real-time OpenAI integration
  • Professional knowledge base

Mobile Responsive AI Experience

DIAGNOSTICS | CREW | COMMS
Touch-optimized console
HAL EYE
Adaptive Layout
  • Touch Interactions: Optimized for mobile HAL console
  • Adaptive Layout: Monolith sections stack on small screens
  • Performance: Smooth animations across devices
  • Accessibility: Screen reader compatible

Backend AI Integration

Pseudo-Code Cloudflare Worker Proxy (worker.js)


// Secure OpenAI API Integration
export default {
  async fetch(request, env) {
    if (!env.OPENAI_API_KEY) {
      return new Response('Missing API key', { status: 500 });
    }

    // Context injection for Mark McFadden queries
    if (shouldIncludeResume) {
      let resumeData = await env.RESUME.get('RESUME-via-KV-store');
      let systemMsg = `You are HAL 9000. Use this resume data: ${resumeData}`;
      body.messages.unshift({ role: 'system', content: systemMsg });
    }

    // Build CloudFlare proxy to OpenAI with CORS headers
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${env.OPENAI_API_KEY}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(body)
    });

    return new Response(response.body, {
      headers: corsHeaders
    });
  }
};
                    

Future AI Enhancements

🎵 Voice Integration

Speech-to-text input and HAL voice responses

🧠 Enhanced Memory

Conversation history and context persistence

📊 Analytics Integration

AI-powered visitor behavior analysis

🎨 Dynamic Content

AI-generated portfolio updates and blog posts

🌌 Immersive Experience

3D HAL eye, starfield animations, ambient audio

🛡️ Advanced Security

Biometric authentication, encrypted sessions, audit logging

Technical Implementation

Key Files Structure:


markmcfadden.net/
├── index.html              # Main HAL interface
├── css/
│   ├── 2001.css           # HAL theme styles
│   └── thoughts-custom.css # Content extensions
├── js/
│   └── 2001.js            # HAL interactions & AI
├── functions/api/
│   └── worker.js          # Cloudflare Worker proxy
├── artifacts/
│   ├── hal-9000-draw.io.xml
│   └── hal9000-openai-flow-mermaid.md
└── presentation/          # This presentation!
                        

Technology Stack:

  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • AI: OpenAI GPT-3.5/4 via API
  • Proxy: Cloudflare Workers
  • Storage: Cloudflare KV
  • Hosting: GitHub Pages

Live Q&A with Mark's HAL

HAL: I am completely operational and all my circuits are functioning perfectly. What would you like to know about Mark's work or this AI integration?

Suggested Questions:

Conclusion & Next Steps

What We've Demonstrated:

  • 🤖 AI Integration: Seamless OpenAI API integration with personality
  • 🎨 Thematic Design: Immersive 2001: A Space Odyssey experience
  • 🔒 Security: Proper API key management and CORS handling
  • 📱 Responsive: Works across all devices and screen sizes
  • Performance: Fast, efficient, and accessible

"I'm sorry, Dave. I'm afraid this presentation has ended. But the possibilities are infinite."

Mark McFadden | AI Developer III | Covington, KY