Blog plan: Bubble sort algorithm with animation

Here's my plan:

TODO — Bubble Sort Blog Post

1. Create BubbleSortVisualization.astro component — Canvas-based interactive animation that visualizes bubble sort step-by-step: bars represent array values, comparisons highlighted in yellow, swaps in red/green, sorted elements locked in cyan. Controls: Play/Pause, Reset (new random array), and Speed slider. Follows the same dark-theme styling as the Lorenz/DoublePendulum components.

2. Create bubble-sort.mdx blog post — MDX file matching the existing "Prompt Training" series structure:

   • Intro — Brief, punchy opening explaining bubble sort as the simplest sorting algorithm
   • How It Works — Step-by-step description of the algorithm with the "bubbling up" analogy
   • Interactive Visualization — Embed the BubbleSortVisualization component
   • Python Implementation — Clean Python code snippet (matching the style of the other posts)
   • Time Complexity — Big-O analysis: best O(n), average/worst O(n²), with explanation
   • Why It Matters — Closing section on educational value and comparison to efficient algorithms

3. Build & Deploy — Run bun run build to verify no errors, then sudo ./deploy.sh to deploy

Shall I proceed with this plan?

Let me build both files in parallel.

Both files created. Let me verify them and build:

Both files look good. Now let me build:

Build succeeded. Deploying:

Done! The Bubble Sort blog post is live at https://robertsoare.xyz/blog/bubble-sort/. It includes:

• Interactive visualization with animated bars (cyan default → yellow comparing → red swapping → green sorted), celebration flash on completion
• Controls: Play/Pause, Reset, Speed slider, Array Size slider
• Blog content: How It Works, Python implementation with early-exit optimization, Time Complexity analysis (O(n) best / O(n²) worst), and Why It Matters closing section