Version History & Progress Log

Version History & Progress Log#

Project Overview#

This document tracks the evolution of the Education Playground project, which consists of two integrated components:

  1. CodeBridge Labs Landing Page - B2B marketing site for schools

  2. Coding Playground - Interactive learning platform (Jupyter Book)

Version 3.0 (November 13, 2025) - Dark Mode & UX Fixes#

Issues Identified#

  • Dark mode completely broken on Coding Playground

  • Orange announcement banner covering top of screen

  • Mixed light/dark mode sections on landing page

  • Poor content alignment and centering throughout

  • Inconsistent spacing and layout

Fixes Implemented#

Coding Playground#

Dark Mode Implementation:

  • Added automatic dark mode detection via @media (prefers-color-scheme: dark) queries

  • Implemented CSS variables system for theme consistency

  • Fixed all UI components to respect dark mode:

    • Welcome modal and onboarding flow

    • Choice cards and interactive elements

    • Code blocks and syntax highlighting

    • Tables and data displays

    • Sidebar navigation

    • All text and backgrounds

UX Improvements:

  • Removed orange announcement banner (_config.yml)

  • Improved content alignment with max-width: 1000px

  • Better spacing for sections, lists, and paragraphs

  • Centered images and figures properly

  • Enhanced typography and readability

  • Consistent padding throughout the interface

Color Palette:

  • Light Mode: Green primary (#4CAF50), Purple gradient secondary (#667eea to #764ba2)

  • Dark Mode: Lighter green (#66bb6a), dark backgrounds (#1a1a1a, #242424, #2d2d2d)

CodeBridge Landing Page#

Design Decisions:

  • Disabled dark mode auto-detection to maintain consistent professional appearance

  • B2B sites work best with uniform light themes for trust and accessibility

  • Fixed inconsistent section backgrounds (removed mixed light/dark)

Layout Improvements:

  • Fixed card alignment issues across all sections

  • Implemented flex flex-col h-full pattern for equal-height cards

  • Used flex-1 for expandable content and mt-auto for bottom-anchored elements

  • Standardized gap spacing to gap-8 throughout

  • Perfect symmetry in Problem, How It Works, and Results sections

Files Modified#

  • _config.yml - Removed announcement banner

  • _static/css/custom.css - Complete dark mode and layout overhaul (1,191 lines → 1,247 lines)

  • codebridge-landing/app/globals.css - Forced light mode for consistency

  • codebridge-landing/components/Problem.tsx - Card alignment

  • codebridge-landing/components/HowItWorks.tsx - Gap spacing and card heights

  • codebridge-landing/components/Results.tsx - Testimonial card alignment

Technical Highlights#

  • Automatic dark mode via CSS media queries (no JavaScript required)

  • CSS Custom Properties for maintainable theming

  • Flexbox layout patterns for responsive equal-height cards

  • Mobile-first responsive design principles

Version 2.0 (November 12-13, 2025) - Landing Page Integration#

Major Features#

CodeBridge Labs Landing Page:

  • Modern Next.js 16 (Turbopack) landing page

  • Full B2B marketing site with 6 main sections:

    • Hero with gradient background and CTAs

    • Problem/Solution positioning (Why Schools Choose Us)

    • How It Works (3-step process)

    • Courses catalog (6 course offerings)

    • Results & Testimonials

    • Pricing inquiry with custom quote form

Integration Strategy:

  • Landing page sits at root URL

  • “Start Learning” button navigates to Jupyter Book content

  • Unified color palette across both sites

  • Consistent branding and design language

Infrastructure:

  • GitHub Pages deployment via deploy.sh automation

  • Static export using Next.js with output: 'export'

  • PostHog analytics integration (ready for activation)

  • A/B testing framework documented in AB_TESTING_STRATEGY.md

Color Unification (Version 2.1)#

  • Primary: Green (#4CAF50) for action buttons and primary interactive elements

  • Secondary: Purple gradient (#667eea to #764ba2) for hero sections and highlights

  • Navy: #0D1B2A for headings and professional text

  • Backgrounds: White (#FFFFFF) and Soft Gray (#F3F4F6)

Card Alignment Fixes (Version 2.2)#

  • Fixed varying heights in grid layouts

  • Implemented equal-height card pattern using Flexbox

  • Proper content distribution within cards

  • Anchored elements (like testimonial author info) to card bottoms

Documentation Created#

  • ARCHITECTURE.md - System architecture and design decisions

  • QUICK_START.md - Daily operations guide

  • AB_TESTING_STRATEGY.md - A/B testing playbook

  • ANALYTICS_SETUP.md - PostHog integration guide

Version 1.0 (Original) - Jupyter Book Foundation#

Core Features#

Interactive Learning Platform:

  • Jupyter Book-based educational content

  • Multiple skill levels: Beginner, Easy, Medium, Hard

  • Python, Data Science, ML/AI, and GPU Computing content

  • 50+ lessons and tutorials

Interactive Onboarding:

  • Smart onboarding flow to guide new users

  • Skill level assessment

  • Personalized learning path recommendations

  • Progress tracking with localStorage

Content Organization:

  • beginner_scripts/ - 10 simple lessons for absolute beginners

  • easy/ - Introduction to Python fundamentals

  • medium/ - Functions, OOP, data structures

  • hard/ - Advanced topics: ML, CUDA, CTF challenges

Features:

  • Colab integration for running notebooks

  • Progress tracking and completion badges

  • “Continue Learning” banner for returning users

  • Mobile-responsive design

  • Quick navigation menus

Design Philosophy Evolution#

Version 1.0: Educational Focus#

  • Focused purely on content delivery

  • Simple, clean interface

  • Jupyter Book default theming with minimal customization

Version 2.0: Professional Polish#

  • Added professional landing page for B2B marketing

  • Dual-purpose: direct learning access + school outreach

  • Unified branding between marketing and product

  • Analytics and A/B testing infrastructure

Version 3.0: User Experience Excellence#

  • Accessibility improvements (dark mode support)

  • Better visual hierarchy and content organization

  • Polished, professional appearance throughout

  • Consistent, predictable layout patterns

Technical Stack#

CodeBridge Landing Page#

  • Framework: Next.js 16 (Turbopack)

  • Styling: Tailwind CSS 4

  • Deployment: GitHub Pages (static export)

  • Analytics: PostHog (ready for activation)

Coding Playground#

  • Generator: Jupyter Book

  • Build System: Sphinx

  • Styling: Custom CSS with CSS Variables

  • JavaScript: Vanilla JS for onboarding and progress tracking

  • Deployment: GitHub Pages

Deployment Infrastructure#

Known Issues & Future Improvements#

Resolved in Version 3.0#

  • ✅ Dark mode implementation

  • ✅ Orange banner removal

  • ✅ Landing page color consistency

  • ✅ Content alignment and centering

Potential Future Enhancements#

  • Manual dark mode toggle (currently auto-detects only)

  • Rebuild Jupyter Book to fix KeyError: ‘anchorname’ issue

  • Activate PostHog analytics for conversion tracking

  • Implement A/B testing for landing page optimization

  • Add more interactive elements (quizzes, code challenges)

  • User authentication and cloud progress sync

  • Certificate generation for course completion

  • Integration with LMS platforms

Deployment History#

Date

Version

Deployment

Changes

Nov 13, 2025

3.0

df18f30

Dark mode, UX fixes, alignment improvements

Nov 13, 2025

2.2

90b70c8

Card alignment fixes across all sections

Nov 12, 2025

2.1

8f9ef59

Color palette unification

Nov 12, 2025

2.0

Initial

Landing page integration

Earlier

1.0

-

Original Jupyter Book platform

Design Decisions & Rationale#

Why Disable Dark Mode on Landing Page?#

B2B marketing sites benefit from consistent, predictable appearance. Dark mode can:

  • Look unprofessional in corporate environments

  • Create inconsistency in screenshots and marketing materials

  • Reduce trust due to unexpected appearance changes

  • Complicate A/B testing and analytics

Why Green Instead of Blue?#

  • Green (#4CAF50) represents growth, learning, and success

  • Better accessibility (higher contrast options)

  • Differentiates from generic “tech blue” aesthetic

  • Warmer, more approachable feel for educational content

Why Purple Gradient for Secondary?#

  • Purple (#667eea to #764ba2) represents creativity and innovation

  • Creates visual interest without overwhelming

  • Works well for hero sections and highlights

  • Complements green primary without clashing

Why Max-Width 1000px for Content?#

  • Optimal line length for readability (45-75 characters)

  • Prevents eye strain from reading wide lines

  • Creates pleasant white space on large screens

  • Maintains focus on content over navigation

Metrics & Success Indicators#

User Experience (Version 3.0)#

  • ✅ No visual glitches or broken layouts

  • ✅ Consistent theming across light and dark modes

  • ✅ Proper alignment and spacing throughout

  • ✅ Mobile-responsive on all screen sizes

  • ✅ Professional appearance suitable for B2B marketing

Technical Performance#

  • ✅ Fast load times (static site)

  • ✅ No JavaScript errors

  • ✅ Smooth animations and transitions

  • ✅ Accessibility (dark mode support)

  • ✅ SEO optimized (static HTML)

Future Metrics (PostHog)#

  • Landing page conversion rate

  • Onboarding completion rate

  • Lesson completion rate

  • Time spent per lesson

  • Return visitor rate

  • A/B test performance

Contributors#

  • Mykolas Perevicius - Project Owner & Developer

  • Claude (Anthropic) - AI Development Assistant

Last Updated: November 13, 2025 Current Version: 3.0 Status: Production Ready ✅

Contents