Standalone chat-first portfolio HTML with split-pane layout

Building a conversational portfolio website as a single HTML file with no external dependencies (except Google Fonts), featuring a chat interface that drives content display on a companion canvas panel.

Use a split-pane layout (40% chat / 60% canvas) with CSS flexbox. Implement a scripted chat engine that pattern-matches user input to intents (projects, skills, about, experience, contact, surprise). Each intent triggers both a chat bubble response and a canvas view switch with smooth CSS animations. Use CSS custom properties for theming, a typing indicator with bouncing dots animation, and quick-reply buttons for guided exploration. For mobile, hide the canvas panel and show inline content within chat bubbles using a media query breakpoint. All data (projects, skills, timeline, contacts) stored as JS objects in the same file. Key techniques: force reflow before re-adding animation class for canvas transitions, natural response delays with random offset (600-1500ms), and scroll-to-bottom on each message append.