Plan v1.0

Deployment Plan

Technical blueprint for the GitHub Pages website — file structure, design system, task breakdown, KaTeX integration, and deployment verification

Static HTML/CSS/JS KaTeX Math GitHub Pages Mobile-First

Overview

This document describes the complete deployment plan for transforming the "How Math Powers AI in Everyday Finance" talk plan into a live GitHub Pages website.

Property Value
Plan Version 1.0
Target Repository Digital-AI-Finance/mathematics-for-ai
Live URL https://digital-ai-finance.github.io/mathematics-for-ai/
GitHub Pages Main branch, root path (/)
Status Ready for Execution
Created 2026-02-18

Work Objectives

Core Objective

Transform the talk plan content into a visually stunning, responsive, single-page website that serves as both a talk companion and standalone educational resource.

Deliverables

  1. New GitHub repository created and configured
  2. Complete static website (HTML/CSS/JS) deployed via GitHub Pages
  3. All mathematical formulas rendered with KaTeX
  4. Responsive design working on mobile and desktop
  5. All 10 sections, 8 history vignettes, 7 formulas, BankBot journey, and resources presented

Definition of Done

Must Have / Must NOT Have

MUST Have

  • Static HTML/CSS/JS (no build tools, no Jekyll — pure static for instant GitHub Pages deployment)
  • KaTeX loaded via CDN for math rendering
  • Responsive CSS with mobile-first approach
  • Smooth-scroll navigation with a sticky/fixed nav
  • Hero section with talk title, subtitle, speaker placeholder
  • All 10 talk sections as cards or expandable areas
  • 5-act story arc as a visual timeline
  • Math cheat sheet section with all 7 formulas rendered in KaTeX
  • History of mathematics timeline (8 vignettes)
  • BankBot journey section
  • Interactive elements summary
  • Resources section with external links
  • Color scheme: deep blues, teals, accent colors
  • Clean sans-serif typography (Inter)
  • Semantic HTML5 (<header>, <nav>, <section>, <footer>)
  • Fast loading (no heavy frameworks, CDN for KaTeX only)

Must NOT Have

  • No JavaScript frameworks (React, Vue, etc.)
  • No build tools or bundlers
  • No server-side rendering
  • No heavy image files (use CSS gradients, emojis/unicode, SVG icons)
  • No cookie banners or analytics
  • No databases or APIs
  • No Jekyll/Ruby dependencies (pure static HTML)

Technical Decisions

Why Static HTML/CSS/JS

  • Zero build step — push and it deploys instantly
  • Full control over design without Jekyll theme constraints
  • KaTeX integration is simpler in raw HTML
  • No Ruby/Gem dependency issues
  • Content is fixed (not a blog), so Jekyll adds no value

KaTeX for Math Rendering

  • CDN: cdn.jsdelivr.net/npm/katex@0.16.9
  • Auto-render extension for $...$ and $$...$$
  • Lighter and faster than MathJax
  • Renders on page load, no FOUC

CSS Architecture

  • Single CSS file with CSS custom properties for theming
  • Mobile-first responsive design
  • CSS Grid for card layouts, Flexbox for nav and components
  • No CSS framework — too heavy for a single page

File Structure

Total: 5 files + 1 directory structure. Minimal.

mathematics-for-ai/
|-- .nojekyll               # Prevent Jekyll processing (empty file)
|-- index.html              # Main (and only) page
|-- css/
|   |-- style.css           # All styles
|-- js/
|   |-- main.js             # Navigation, smooth scroll, interactions
|-- images/
|   |-- (empty initially -- site uses CSS/SVG/emoji for visuals)
|-- README.md               # Repo description (brief, links to site)

Task Flow

Seven sequential tasks with clear dependencies. Tasks 3, 4, and 5 reference the same HTML structure and can be developed in parallel once Task 2 establishes the class/ID naming.

1
Create GitHub Repo
→
2
Build index.html
→
3
Build css/style.css
→
4
Build js/main.js
→
5
Create README.md
→
6
Enable GitHub Pages
→
7
Verify Deployment

Detailed Tasks

1

Create GitHub Repository

executor

Estimated time: 2 minutes

Steps

  1. Create the repo via gh repo create Digital-AI-Finance/mathematics-for-ai --public
  2. Clone locally to the working directory
  3. Create directory structure: css/, js/, images/
  4. Create .nojekyll file to prevent Jekyll processing

Acceptance Criteria

  • Repo exists at github.com/Digital-AI-Finance/mathematics-for-ai
  • Repo is public with correct description
  • Local clone ready with directory structure
2

Build index.html

executor-high

Estimated time: 15–20 minutes

This is the largest task. The HTML contains ALL content from the talk plan, structured for web presentation: navigation, hero, 10 section cards, math concepts table, cheat sheet, history timeline, BankBot journey, interactive elements, resources, and speaker notes.

Acceptance Criteria

  • Valid HTML5, passes basic validation
  • All 10 section cards present with correct content
  • All 7+ KaTeX formulas present with correct LaTeX syntax
  • History timeline has all 8 entries
  • BankBot journey section present
  • Resources section with all links
  • Navigation links match section IDs
  • Semantic HTML structure
3

Build css/style.css

executor-high

Estimated time: 15–20 minutes

Complete responsive stylesheet with CSS custom properties for theming, mobile-first breakpoints at 768px / 1024px / 1400px, and all component styles for cards, timeline, tables, formula display, navigation, and hero.

Acceptance Criteria

  • Renders correctly at 375px, 768px, 1200px, and 1920px
  • Color contrast meets WCAG AA (4.5:1 for text)
  • No horizontal scrollbar at any viewport width
  • Cards have consistent spacing and alignment
  • KaTeX formulas styled with appropriate background and padding
  • Navigation functional on mobile (hamburger)
  • Hero section fills viewport
4

Build js/main.js

executor

Estimated time: 8–10 minutes

Vanilla JavaScript with six features: mobile navigation toggle, scroll spy via IntersectionObserver, smooth scroll with fixed-nav offset, scroll-triggered reveal animations, navbar background on scroll, and KaTeX auto-render initialization. No external JS libraries.

Acceptance Criteria

  • Mobile menu opens and closes correctly
  • Active nav link updates on scroll
  • Smooth scroll works on nav click
  • Cards animate in on scroll
  • Nav background changes on scroll past hero
  • KaTeX renders all formulas on page load
5

Create README.md

executor-low

Estimated time: 2 minutes

Brief README with talk title and subtitle, link to the live site, brief description (2–3 sentences), tech stack mention (HTML/CSS/JS, KaTeX), and link to the GitHub org.

Acceptance Criteria

  • Clear, concise README
  • Live site link present and correct
  • No broken links
6

Enable GitHub Pages

executor

Estimated time: 3 minutes

Steps

  1. Commit all files: git add -A && git commit -m "Initial site"
  2. Push to main: git push origin main
  3. Enable GitHub Pages via gh api — source: main branch, root path
  4. Verify Pages is enabled: gh api repos/.../pages

Acceptance Criteria

  • GitHub Pages enabled on main branch, root path
  • No build errors in GitHub Actions
  • Pages URL returns 200 within a few minutes
7

Verify Deployment

executor-low

Estimated time: 5 minutes (includes waiting for GitHub Pages build)

Verification Checklist

  • Page loads without errors
  • Navigation works (smooth scroll to all sections)
  • All sections visible and content complete
  • KaTeX formulas render (Bayes, sigmoid, weighted average, etc.)
  • Mobile responsive (resize browser or use dev tools)
  • All external links work and open in new tabs
  • No console errors

KaTeX Formulas Reference

All 8 LaTeX strings used across the site, rendered here for verification.

1. Bayes' Theorem
$$P(\text{Fraud} \mid \text{Data}) = \frac{P(\text{Data} \mid \text{Fraud}) \cdot P(\text{Fraud})}{P(\text{Data})}$$
2. Sigmoid Function
$$\sigma(x) = \frac{1}{1 + e^{-x}}$$
3. Sigmoid Derivative (bonus)
$$\sigma'(x) = \sigma(x)(1 - \sigma(x))$$
4. Weighted Average
$$\text{Score} = w_1 x_1 + w_2 x_2 + w_3 x_3 + \cdots + w_n x_n$$
5. Dot Product
$$\mathbf{A} \cdot \mathbf{B} = a_1 b_1 + a_2 b_2 + \cdots + a_n b_n$$
6. Cosine Similarity
$$\cos(\theta) = \frac{\mathbf{A} \cdot \mathbf{B}}{|\mathbf{A}| \cdot |\mathbf{B}|}$$
7. Linear Regression
$$y = mx + b$$
8. Normal Distribution (PDF)
$$f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}$$

Content References

Section Timing Table

Time Section Duration Energy
0:00 – 3:00 Opening Hook 3 min HIGH
3:00 – 7:00 You Already Think Like an AI 4 min WARM
7:00 – 15:30 Fraud Detection 8.5 min HIGH
15:30 – 17:00 How Does the AI Learn? 1.5 min MEDIUM
17:00 – 21:00 Interactive: Spot the Fraud 4 min PEAK
21:00 – 28:00 Credit Scoring 7 min MEDIUM
28:00 – 32:00 Interactive: Live Demo 4 min PEAK
32:00 – 34:00 Recommendation Engines 2 min HIGH
34:00 – 37:00 Interactive: Design Your Own AI 3 min PEAK
37:00 – 42:00 Ethics, Careers, and Closing 5 min HIGH
42:00 – 45:00 Buffer / Q&A 3 min —

Interactive Elements

# Type Time Description
1 Hand raise 0:30 “Raise your hand if you KNEW that”
2 Hand raise ~10:00 Mid-section prompt: “Should the AI block this?”
3 Audience vote 17:00 “Spot the Fraud” — 3 scenarios
4 Thumbs up/down 28:00 Predictions during demo
5 Shout response 34:00 “USE IT or SKIP IT” exercise

BankBot Arc

Stage Section Quote State
Intro 1 “I analyzed your breakfast. You are 94% human.” Overconfident
Smug 4 (warmup) “Too easy. Next.” Cocky
Nightmare 3 (sweating on boundary) Stressed
Learning 3.5 “FRAUD!” → “Most things are fine” → “Let me calculate…” Growing
False Positive 4 “FRAUD DETECTED!” / “…suspicious flowers.” Humbled
Recommendation 7 “Plant parents are savers.” Observant
Skeptic 8 (shaking head at social media data) Critical
Final Form 10 “I am 73% confident. But I defer to the human.” Wise

Success Criteria

Criterion How to Verify
Site is live GET https://digital-ai-finance.github.io/mathematics-for-ai/ returns 200
All formulas render Visual check of all 7+ KaTeX formulas
Responsive Browser dev tools at 375px, 768px, 1200px
Navigation works Click each nav link, verify smooth scroll
Content complete Verify all 10 sections, 8 historians, 7 formulas, BankBot, resources
Fast loading No heavy assets, KaTeX from CDN
Accessible Heading hierarchy (h1 > h2 > h3), semantic HTML, alt text
No errors Browser console clean

Risk Mitigation

Risk Likelihood Mitigation
KaTeX CDN down Very low Pin specific version, fallback to plain text
GitHub Pages build fails Low Pure static HTML has no build step to fail
Formula rendering issues Medium Test each formula individually, use KaTeX documentation for escaping
Mobile layout breaks Medium Test at all breakpoints during development
gh CLI auth issues Low Verify auth before starting: gh auth status