💡 Idea 5: PortalPresenter — Turn Learning Docs into Presentations
| Field |
Detail |
| Priority |
📌 Important |
| Status |
✅ Complete |
| Category |
🎓 Learning / 💼 Official / 🎬 Content |
| Date added |
2026-03-29 |
| Source |
Copilot CLI brainstorm session |
What Is PortalPresenter? (The Simple Version)
☕ Cloud Café analogy: Imagine your café has a beautiful printed menu (the learning portal). Every time you do a cooking class or VIP tasting event, you've been making separate handwritten cards to explain each dish. PortalPresenter turns your printed menu INTO the cooking class — just press a button and each menu section becomes a beautiful display card, while your private notes appear on a screen only you can see.
PortalPresenter transforms the learning portal (learn.aguidetocloud.com) into a full presentation tool — replacing PowerPoint for both YouTube video recordings and customer enablement sessions.
No more:
- ❌ Creating PowerPoint slides from scratch
- ❌ Alt+Tabbing between apps during recordings
- ❌ Inconsistent branding between docs and slides
- ❌ Duplicating content that already exists in the portal
The Problem It Solves
Current Workflow (Painful)
Record demo → Alt+Tab to PowerPoint → Show 2-3 slides → Alt+Tab back → Resume demo
↑ ↑
Manually created Edit out messy
slides (time-consuming) transitions in post
New Workflow (PortalPresenter)
Record demo → Press 'P' key → Portal enters Presentation Mode → Navigate slides
↑ ↑
Content already Arrow keys +
exists in docs smooth transitions
Core Features (v1)
1. Presentation Mode
| Feature |
Detail |
| Enter mode |
Button on page + keyboard shortcut (P) |
| Slide splitting |
Auto-split by H2 and H3 headings |
| Large sections |
Auto-split across multiple slides (no cramming) |
| Transitions |
Clean fade between slides |
| Navigation |
Arrow keys + keyboard shortcuts |
| Exit |
Esc key |
2. Slide Picker / Overview
- Grid of slide thumbnails before presenting
- Check/uncheck slides to include or skip
- Creative freedom to curate the flow per session
- Different selections for different audiences
3. Lightbox Pop-out
- Click ANY element to pop it full-screen with dimmed background
- Works for: images, tables, code blocks, diagrams, bullet points, admonitions
- Works both in presentation mode AND normal browsing
- Close with Esc or click outside
4. Presenter View (Dual Screen)
| Screen |
What's Shown |
| Screen 1 (audience) |
Clean slide — visuals only, no progress indicator |
| Screen 2 (presenter) |
Current slide + speaker notes + next slide preview + timer |
5. Auto-Generated Speaker Notes
- Visuals (diagrams, tables, code, bullet points) stay on the SLIDE
- Explanatory paragraphs automatically move to SPEAKER NOTES
- No manual note-writing needed — content already exists in the docs
- Presenter reads notes on Screen 2, audience sees clean visuals on Screen 1
6. Auto-Generated Title Slide
- Generated from page title + portal branding
- Helps start each topic on video with a branded intro
- Uses the retro terminal theme / clean theme (TBD)
7. Interactive Mermaid Diagrams
- Live rendering in slides (not static images)
- Zoom and pan during presentation
- Perfect for explaining complex architecture to customers
- Laser pointer: Red dot follows mouse cursor
- Drawing tools: Draw circles, arrows, highlight areas over slides
- Toggle on/off with keyboard shortcut
- Clear annotations between slides
9. Offline Support
- Cache/download presentation for offline use
- Critical for customer sites with spotty WiFi
- All assets (images, diagrams, fonts) bundled
10. PDF Export
- Export static slides as PDF
- Share with customers after enablement sessions
- "Here are the slides we discussed" follow-up
Theme Options
Will prototype BOTH and let Sutheesh decide:
| Option |
Description |
| Retro Terminal |
Green-on-dark, terminal fonts, scanlines — full brand identity |
| Clean Minimal |
Same content, cleaner typography, white/dark background — max readability |
Keyboard Shortcuts (Presentation Mode)
| Key |
Action |
P |
Enter presentation mode |
← / → |
Previous / next slide |
Space |
Next (same as →) |
Esc |
Exit (priority: lightbox → picker → annotations → exit) |
O |
Slide picker / overview grid |
S |
Toggle speaker notes / presenter view |
F |
Toggle fullscreen |
L |
Toggle laser pointer |
D |
Toggle draw mode (shows toolbar: freehand, arrow, rect, circle, eraser, colors) |
E |
Toggle eraser (while in draw mode) |
C |
Clear annotations on current slide |
W |
Toggle whiteboard / blackboard canvas |
X |
Export presentation as PDF |
Home/End |
Jump to first/last slide |
Page Eligibility
- All pages presentable by default
- Exclude specific pages using frontmatter:
---
presentable: false
---
Pages to exclude: Task Board, Progress Tracker, Idea Vault index
Architecture (How It Works)
┌─────────────────────────────────────────────────────────────┐
│ LEARNING PORTAL (MkDocs) │
│ │
│ ┌─────────────┐ ┌──────────────┐ ┌────────────────┐ │
│ │ Normal Mode │ │ Presentation │ │ Presenter View │ │
│ │ (browsing) │◄──►│ Mode │◄──►│ (2nd screen) │ │
│ └─────────────┘ └──────┬───────┘ └────────────────┘ │
│ │ │
│ ┌─────────────────────────┼─────────────────────────────┐ │
│ │ Custom JavaScript Layer │ │
│ │ │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ │ Slide │ │ Lightbox │ │ Annotate │ │ Export │ │ │
│ │ │ Splitter │ │ Engine │ │ Tools │ │ (PDF) │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │
│ │ │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ │ Note │ │ Slide │ │ Offline │ │ Diagram │ │ │
│ │ │Generator │ │ Picker │ │ Cache │ │ Zoom │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ MkDocs Material Theme + Plugins │ │
│ │ (glightbox, mermaid, custom CSS/JS extensions) │ │
│ └────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Technology Considerations
| Component |
Options |
| Slide engine |
Custom JS (no external framework) |
| Lightbox |
Custom overlay with fit-content sizing |
| Presenter view |
Window.open() to 2nd screen + BroadcastChannel API |
| Annotations |
Canvas overlay + toolbar (freehand, arrow, rect, circle, eraser, 6 colors) |
| PDF export |
window.print() — no external library, respects picker selections |
| Offline |
Service Worker (network-first caching strategy) |
| Diagram zoom |
Custom pan/zoom (wheel + drag + pinch, no external library) |
v2 Features (Later)
| Feature |
Description |
| Customer branding |
Add customer logo to title slide ("Prepared for Contoso Ltd") |
| Phone remote |
QR code link to control slides from phone |
| Slide templates |
Pre-defined layouts (comparison, timeline, diagram-focus) |
| Recording integration |
Built-in screen recording from the portal |
Use Cases
- YouTube Videos: Record demos, press P to present a concept, resume demo — all in one app
- Customer Enablement: Present from the portal with branded slides, share PDF after
- Internal Training: Use the same content for team enablement at Microsoft
- Conference Talks: Full presentation tool with offline support
Success Criteria
- [x] Can enter/exit presentation mode on any doc page
- [x] Slides auto-split cleanly by headings
- [x] Speaker notes auto-generated from content (with contextual coaching)
- [x] Presenter view works on second screen (BroadcastChannel)
- [x] Lightbox pop-out works for all content elements
- [x] Clean fade transitions between slides
- [x] Slide picker/overview with element-level toggle
- [x] Laser pointer and drawing tools (freehand, arrow, rect, circle, eraser, colors)
- [x] Whiteboard/blackboard canvas for free explaining
- [x] Offline mode works reliably (Service Worker)
- [x] PDF export produces clean static slides
- [x] Mermaid diagrams enabled and zoomable/pannable
- [x] Retro neon theme applied throughout