Skip to Main Content

Bude Global Tech Presentations

Bude Global Tech Presentations — a cutting-edge platform designed to democratize technical knowledge through engaging, interactive presentations. Built by developers, for developers, this platform serves as a centralized hub where the Bude Global community can discover, share, and learn from expertly crafted technical content.

Repository Demo
Team: BUDE GLOBAL
ARAVIND GOVINDHASAMY
ARAVIND GOVINDHASAMY
aravind_govindhasamy
Description

🚀 Bude Global Tech Presentations 🚀

A Dynamic, Interactive Platform for Technical Knowledge Sharing

💚 Join our WhatsApp Community 💚

View Demo • Report Bug • Request Feature

Scan the QR to support the project 👇

Sponsors

Become a sponsor and get your logo on our README on GitHub with a link to your site.

🌟 Overview

Welcome to the official repository for Bude Global Tech Presentations — a cutting-edge platform designed to democratize technical knowledge through engaging, interactive presentations. Built by developers, for developers, this platform serves as a centralized hub where the Bude Global community can discover, share, and learn from expertly crafted technical content.

Important: By using this service, you agree to our Terms and Conditions and Privacy Policy.

🎯 Mission

Our mission is to foster a culture of continuous learning and knowledge sharing by providing an accessible, modern platform for technical presentations that covers everything from programming languages and frameworks to DevOps tools and best practices.

📝 Table of Contents

✨ Features

🎨 Core Functionality

  • 🔍 Smart Discovery System: Automatically scans and validates presentation JSON files with built-in format checking

  • ⚡ Real-Time Search: Instantly filter presentations by title, description, or keywords with autocomplete suggestions

  • 📱 Fully Responsive: Seamless experience across desktops, tablets, and mobile devices with adaptive layouts

  • 🎭 Beautiful UI/UX: Modern gradient designs, smooth animations, and intuitive navigation

  • ⌨️ Keyboard Navigation: Full keyboard support for power users (arrow keys, shortcuts, and more)

  • 📊 Format Validation: Only displays presentations that pass strict JSON schema validation

  • 🎯 Modular Architecture: Clean separation of concerns with easy-to-maintain codebase

🎓 Presentation Features

  • 📖 Multi-Topic Support: Organize content into logical sections and topics

  • 💻 Code Syntax Highlighting: Beautiful code blocks with proper formatting

  • 🎨 Rich Content Types: Support for text, code, lists, images, emojis, and custom styling

  • 📝 Speaker Notes: Built-in support for presenter notes (Reveal.js feature)

  • 🔄 Smooth Transitions: Professional slide transitions and animations

  • 📏 Scrollable Content: Handles long slides with smooth scrolling

🔧 Developer Experience

  • 📦 JSON-Based: Simple JSON format for easy content creation

  • 🎨 Customizable Themes: Easy to customize colors, fonts, and styles

  • 🔌 Extensible: Built on Reveal.js with support for plugins

  • 📋 Template System: Pre-built templates for quick presentation creation

  • 🚀 No Build Process: Pure HTML/CSS/JS — no compilation required

🎬 Demo & Screenshots

🏠 Home Page - Presentation Selector

Smart search and autocomplete for quick presentation discovery

👤 Author/Presenter Page

Professional presenter introduction with social links

📊 React Presentation Example

Clean, modern slide design with code examples

🛠️ Technologies Used

This project leverages modern web technologies for optimal performance and developer experience:

TechnologyPurposeVersionHTML5Structure and semantic markupLatestCSS3Styling, animations, and responsive designLatestJavaScript (ES6+)Dynamic behavior and presentation logicES2020+Reveal.jsPresentation framework4.6.0RemixiconIcon system4.3.0Google FontsCustom typography (Molot)-

Why These Technologies?

  • ✅ No dependencies: Zero npm packages, runs directly in browser

  • ✅ Fast loading: Minimal external resources with CDN optimization

  • ✅ Easy deployment: Static files — host anywhere

  • ✅ Cross-browser: Compatible with all modern browsers

⚡ Performance Optimizations

This project includes several performance optimizations:

OptimizationBenefitPreconnect hintsFaster CDN resource loadingDNS prefetchEarly DNS resolutionDeferred scriptsNon-blocking page renderSRI hashesSecure CDN resourcesLazy animationsAnimations start after page loadAdaptive qualityAuto-adjusts for mobile devices

🧩 Modular Architecture

The codebase is organized into modular files in src/ for easier maintenance:

src/
├── js/
│   ├── config.js           # Global configuration
│   ├── main.js             # Entry point
│   ├── animations/         # 8 animation modes
│   ├── ui/                 # UI components
│   └── utils/              # Utility functions
└── css/
    ├── base/               # Variables, reset
    ├── components/         # Header, cards, footer, etc.
    └── utilities/          # Responsive styles

🏗️ Project Structure

bude-global-tech-presentations/
│
├── 📁 assets/                          # Static assets
│   ├── 📁 fonts/                       # Custom fonts (Molot)
│   │   └── Molot.otf
│   ├── 📁 icons/                       # Custom icons
│   └── 📁 images/                      # Images and logos
│       ├── budeglobal_logo.png
│       └── 📁 Readme/                  # README screenshots
│           ├── home.png
│           ├── author.png
│           └── intro-react.png
│
├── 📁 presentations/                   # Presentation JSON files
│   ├── intro-oss.json                  # Open Source Software
│   ├── intro-python.json               # Python Programming
│   ├── intro-csharp.json               # C# Programming
│   └── ... (40+ presentations)
│
├── 📁 src/                             # Modular source code (for bundlers)
│   ├── 📁 js/                          # JavaScript modules
│   │   ├── config.js                   # Animation configuration
│   │   ├── main.js                     # Entry point
│   │   ├── 📁 animations/              # 8 animation modes
│   │   ├── 📁 ui/                      # UI components
│   │   └── 📁 utils/                   # Utility functions
│   └── 📁 css/                         # CSS modules
│       ├── 📁 base/                    # Variables, reset
│       ├── 📁 components/              # Header, cards, footer
│       └── 📁 utilities/               # Responsive styles
│
├── 📁 templates/                       # Template files
│   └── sample-presentation.json        # Template for new presentations
│
├── 📄 index.html                       # Main entry point
├── 📄 presentations.js                 # Presentation configuration
├── 📄 presenter.js                     # Animation & slide rendering
├── 📄 loader.js                        # Dynamic loading logic
├── 📄 style.css                        # Custom styles
├── 📄 github-live.js                   # GitHub API integration
├── 📄 theme-switcher.js                # Dark/Light theme toggle
├── 📄 orientation-handler.js           # Mobile orientation handler
├── 📄 README.md                        # This file
├── 📄 CONTRIBUTING.md                  # Contribution guidelines
└── 📄 LICENSE                          # GNU GENERAL PUBLIC LICENSE

🚀 Quick Start

Get up and running in under 2 minutes!

Prerequisites

  • A modern web browser (Chrome, Firefox, Edge, Safari)

  • Basic knowledge of JSON (for creating presentations)

  • Git installed (optional, for cloning)

Installation

Option 1: Clone the Repository

# Clone the repository
git clone https://github.com/BUDEGlobalEnterprise/bude-global-tech-presentations.git

# Navigate to the project directory
cd bude-global-tech-presentations

# Open in browser
open index.html
# Or on Windows: start index.html
# Or on Linux: xdg-open index.html

Option 2: Download ZIP

  1. Download the latest release

  2. Extract the ZIP file

  3. Open index.html in your browser

Option 3: GitHub Pages (Live Demo)

Simply visit: https://budeglobalenterprise.github.io/bude-global-tech-presentations

👀 How to View Presentations

Browser Experience

  1. Open the Platform: Launch index.html in your browser

  2. Browse Presentations: View all available presentations in the selector modal

  3. Search: Type keywords to filter presentations instantly

  4. Select: Click on any presentation to begin viewing

  5. Navigate: Use arrow keys or on-screen controls to move between slides

  6. Return Home: Press H to return to the presentation selector

Navigation Controls

ActionKeyboardMouse/TouchNext Slide→ or ↓ or SpaceClick right arrowPrevious Slide← or ↑Click left arrowScroll Slide↓ / ↑ (if content overflows)Mouse wheelFirst SlideHome-Last SlideEnd-Slide OverviewEsc or O-FullscreenF-Return to SelectorH-

➕ How to Add a New Presentation

Adding a new presentation is straightforward and takes just 3 steps!

Step 1: Create Your JSON File

Create a new .json file in the presentations/ directory:

touch presentations/my-awesome-tech-talk.json

Use the template structure (see Presentation JSON Schema) or copy from templates/sample-presentation.json.

Step 2: Update Configuration

Open index.html and locate the PRESENTATIONS_CONFIG array. Add your presentation:

const PRESENTATIONS_CONFIG = [
    // ... existing presentations ...
    {
        file: 'presentations/my-awesome-tech-talk.json',
        title: 'My Awesome Tech Talk',
        description: 'A comprehensive guide to an amazing technology',
        keywords: ['awesome', 'tech', 'innovation', 'tutorial']
    }
];

Step 3: Test & Commit

# Test locally
open index.html

# Commit your changes
git add presentations/my-awesome-tech-talk.json index.html
git commit -m "Add: My Awesome Tech Talk presentation"
git push origin main

That's it! Your presentation is now live and searchable! 🎉

📋 Presentation JSON Schema

Basic Structure

{
  "presentation": {
    "topics": [
      {
        "id": "unique-topic-id",
        "title": "Topic Title",
        "slides": [
          {
            "type": "title|presenter|topic-title|content|qa|thank-you",
            "title": "Slide Title",
            "emoji": "🚀",
            "box": {
              "title": "Box Title",
              "content": "Box content with <strong>HTML</strong>",
              "code": "const example = 'code block';",
              "list": [
                { "emoji": "✅", "text": "List item with emoji" },
                { "emoji": "❌", "text": "Another item" }
              ]
            },
            "list": [
              { "emoji": "📌", "text": "Top-level list item" }
            ],
            "note": {
              "text": "Additional note or tip"
            }
          }
        ]
      }
    ]
  }
}

Slide Types

1. Title Slide

{
  "type": "title",
  "title": "Presentation Title",
  "subtitle": "Subtitle or tagline"
}

2. Presenter Slide

{
  "type": "presenter",
  "name": "Your Name",
  "title": "Your Title",
  "experience": "Years of experience",
  "oss_experience": "OSS contribution details",
  "github": "https://github.com/username",
  "website": "https://yoursite.com"
}

3. Topic Title Slide

{
  "type": "topic-title",
  "title": "Section Title",
  "box": {
    "content": "Section introduction"
  }
}

4. Content Slide

{
  "type": "content",
  "emoji": "💡",
  "title": "Slide Title",
  "box": {
    "title": "Optional box title",
    "content": "Main content",
    "code": "// Code example\nfunction hello() {\n  console.log('Hello');\n}",
    "list": [
      { "emoji": "✅", "text": "Feature one" },
      { "emoji": "✅", "text": "Feature two" }
    ]
  },
  "list": [
    { "emoji": "📌", "text": "Additional point" }
  ],
  "note": {
    "text": "Pro tip or note"
  }
}

5. Q&A Slide

{
  "type": "qa",
  "title": "Questions? 💬",
  "content": "Your questions are welcome!"
}

6. Thank You Slide

{
  "type": "thank-you",
  "title": "Thank You! 🎉",
  "box": {
    "content": "Closing message",
    "note": "Final thoughts"
  },
  "footer": {
    "org": "Organization Name",
    "tagline": "Your tagline"
  }
}

HTML Support

You can use HTML tags in content:

  • <strong>bold</strong>

  • <em>italic</em>

  • <code>inline code</code>

  • <br> for line breaks

  • Custom classes: <span class="highlight">text</span>

⌨️ Keyboard Shortcuts

Presentation Navigation

KeyAction→ ↓ Space PgDnNext slide← ↑ PgUpPrevious slideHomeFirst slideEndLast slideEsc OSlide overview modeFFullscreen modeSSpeaker notes (if available)B .Blackout/pauseHReturn to presentation selector

Slide Scrolling (Long Content)

KeyAction↓Scroll down (if slide has overflow)↑Scroll up (if slide has overflow)

Animation Controls

KeyAnimation Mode1Floating Shapes2Gradient Blobs3Neon Waves4Animated Grid5Particle Field6Pulse Rings7Parallax Layers8Cosmic Dust

🤝 Contributing

We warmly welcome contributions from developers of all skill levels! Whether you're fixing typos, adding presentations, or building new features, your contribution matters.

Ways to Contribute

  1. 📚 Add Presentations: Share your knowledge on any tech topic

  2. 🐛 Report Bugs: Found an issue? Open an issue

  3. 💡 Suggest Features: Have ideas? We'd love to hear them

  4. 📖 Improve Documentation: Help make our docs clearer

  5. 🎨 Design Enhancements: Improve UI/UX

  6. 🔧 Code Improvements: Refactor, optimize, or add features

Contribution Workflow

  1. Fork the repository

  2. Create a feature branch (git checkout -b feature/amazing-feature)

  3. Make your changes

  4. Test thoroughly

  5. Commit with clear messages (git commit -m 'Add: Amazing feature')

  6. Push to your fork (git push origin feature/amazing-feature)

  7. Open a Pull Request

Commit Message Convention

Type: Brief description

Types:
- Add: New feature or presentation
- Fix: Bug fix
- Update: Update existing content
- Docs: Documentation changes
- Style: Code style changes (formatting)
- Refactor: Code refactoring
- Test: Adding tests
- Chore: Maintenance tasks

Example: Add: Introduction to Kubernetes presentation

For detailed guidelines, see CONTRIBUTING.md.

📚 Available Presentations

Programming Languages

  • 🐍 Introduction to Python - From basics to advanced topics

  • 🎯 C# Programming - Modern C# with .NET

  • ⚛️ React.js - Building modern web apps

Frameworks & Libraries

  • 📱 .NET MAUI - Cross-platform app development

  • 🎨 Tailwind CSS - Utility-first CSS framework

  • 🅱️ Bootstrap - Responsive web design

  • 🔧 Frappe Framework - Full-stack Python framework

  • 📊 ERPNext - Open-source ERP system

DevOps & Tools

  • 🐧 Linux Fundamentals - Command line mastery

  • 🔀 Git & GitHub - Version control essentials

  • 🏠 Gitea - Self-hosted Git service

  • 🐳 Docker - Containerization basics

Security & Identity

  • 🔐 Keycloak - Identity and access management

Analytics & BI

  • 📈 Metabase - Business intelligence tool

Open Source

  • 🌐 Introduction to OSS - Open source fundamentals

More presentations are added regularly by our community!

🔧 Customization

Branding

Update colors in index.html CSS variables:

:root {
    --bude-primary: #0060a0;      /* Primary brand color */
    --bude-purple: #6f42c1;       /* Secondary color */
    --bude-pink: #cb6ce6;         /* Accent color */
    --bude-dark: #2c3e50;         /* Dark text */
}

Fonts

Replace the Molot font in assets/fonts/ and update the @font-face rule:

@font-face {
    font-family: 'YourFont';
    src: url('assets/fonts/YourFont.otf') format('opentype');
}

Logo

Replace assets/images/budeglobal_logo.png with your logo (recommended size: 400x400px).

Footer Links

Update social links in the <footer> section of index.html.

❓ FAQ

Q: Can I use this for my own presentations?

A: Absolutely! This project is open-source under GNU GENERAL PUBLIC LICENSE. Feel free to fork and customize.

Q: Do I need a server to host this?

A: No! It's a static site. You can host on GitHub Pages, Netlify, Vercel, or any static hosting service.

Q: Can I export presentations to PDF?

A: Yes! Use your browser's print function (Ctrl+P) and select "Save as PDF". Reveal.js handles print styling automatically.

Q: How do I add speaker notes?

A: Reveal.js supports speaker notes. Press S during presentation to open speaker view.

Q: Can I embed videos or interactive elements?

A: Yes! You can use HTML in your JSON content, including <iframe>, <video>, and interactive elements.

Q: Is there a limit to slide count?

A: No technical limit, but we recommend keeping presentations under 100 slides for optimal performance.

Q: Can I use this offline?

A: Mostly yes, but external resources (CDN fonts, icons) require internet. You can download and self-host these for full offline support.

©️ License

This project is licensed under the GNU GENERAL PUBLIC LICENSE - see the LICENSE file for details.

What This Means

✅ You can:

  • Use commercially

  • Modify and distribute

  • Use privately

  • Sublicense

❌ You cannot:

  • Hold us liable

  • Use our trademarks without permission

📝 You must:

  • Include the original license

  • Include copyright notice

📜 Terms and Conditions

By accessing and using this service, you agree to be bound by our Terms and Conditions.

🙏 Acknowledgments

Special thanks to:

  • OSSPhilippines/oss-101 - For inspiration and attribution

  • Reveal.js - Hakim El Hattab for the amazing presentation framework

  • Remixicon - For the beautiful icon system

  • Bude Global Community - For contributing presentations and feedback

  • All Contributors - Thank you for making this project better!

📧 Contact

Bude Global Enterprise

Support

⭐ Star this repository if you find it helpful!

Made with ❤️ by Bude Global Enterprise

Issues & PRs Board
No issues or pull requests added.