Portfolio Site & Virtual Bruce Chatbot

Architecture

A static portfolio site with a serverless AI chatbot backend, secured by Delinea Platform for API key management.

Visitor Browser
        |
        |  Static HTML / CSS / JS
        v
Cloudflare Pages  (serves portfolio site from /public)
        |
        |  POST /api/chat
        v
Cloudflare Worker  (functions/api/chat.js)
  |-- Delinea Platform   OAuth2 client_credentials → bearer token
  |-- Secret Server      fetch Anthropic API key from vault
  |-- Anthropic API      Claude Haiku with "Virtual Bruce" system prompt
        |
        v
Chat Response  → rendered in floating chat widget

Features

8 capabilities

A full portfolio experience with an AI chatbot that knows Bruce's career, projects, and personality.

Virtual Bruce Chatbot

An AI persona that responds in first person as Bruce — covering career history, projects, PAM expertise, and competitive insights.

Delinea Vault Integration

Anthropic API key is never hardcoded — fetched at runtime from Delinea Secret Server via OAuth2 client credentials flow.

Dark / Light Mode

Full theme support across the entire site and chatbot widget, persisted in localStorage.

Project Showcase

Interactive project cards with detail pages for each build, including architecture diagrams, tech stacks, and file trees.

Career Timeline

Chronological view of project releases and milestones with status badges and scroll animations.

Scroll Reveal Animations

Content sections animate into view using IntersectionObserver for a polished browsing experience.

Cloudflare Pages Deployment

Zero-config static hosting with automatic deploys on git push and serverless functions at the edge.

Responsive Design

Fully responsive layout with sticky navigation, smooth scrolling, and mobile-optimized typography.

Project Structure

Static site in the root, serverless chatbot function, and Cloudflare Pages build output.

my-bio/
|-- index.html               # Main portfolio page (hero, projects, timeline, contact)
|-- favicon.svg              # Browser tab icon
|-- headshot.jpg             # Profile photo
|-- delinea-logo.svg         # Company branding
|-- wrangler.toml            # Cloudflare Pages config
|-- projects/                # Individual project detail pages
|   |-- teams.html           # PrivMan Teams integration
|   |-- slack.html           # PrivMan Slack integration
|   |-- webex.html           # PrivMan Webex integration
|   |-- spyglass.html        # MCP Policy Finder
|   |-- se-assessments.html  # SE Skills Assessment Tracker
|   |-- portfolio.html       # This page
|-- functions/               # Cloudflare Workers (serverless)
|   |-- api/
|       |-- chat.js          # Virtual Bruce chatbot endpoint
|-- public/                  # Cloudflare Pages build output
|   |-- index.html           # Deployed version with chatbot widget
|   |-- projects/            # Deployed project pages

How It Works

From visitor question to AI-powered response in under a second.

Visitor opens the chat widget

A floating action button on the bottom-right opens the chat window. A greeting bubble introduces Virtual Bruce.

Message hits the Cloudflare Worker

The chat widget sends a POST /api/chat request with the conversation history (last 20 messages) to the edge function.

Worker fetches the API key from Delinea

The Worker authenticates to the Delinea Platform with OAuth2 client credentials, then retrieves the Anthropic API key from Secret Server. The key is cached in-memory for 5 minutes.

Claude responds as Bruce

The Worker calls the Anthropic Messages API with a detailed system prompt that defines Bruce's voice, career, projects, and formatting rules. Claude Haiku responds in character.

Response rendered in the widget

The reply is displayed in the chat window with markdown formatting. The conversation persists during the session for follow-up questions.

Portfolio Site & Virtual Bruce