Tech Pioneers Network 🌟

An interactive p5.js visualization celebrating the groundbreaking women who shaped the world of technology. Each glowing node represents a pioneer, connected in a cosmic network that illuminates their collective impact on innovation.

✨ Live Demo

🚀 View the Live Interactive Network

Built for the #WeCoded 2026 challenge

🎯 What is This?

This project visualizes the interconnected stories of 20 remarkable women who revolutionized technology. From Ada Lovelace, the first programmer, to modern pioneers like Fei-Fei Li and Audrey Tang, each node represents a breakthrough moment in tech history.

The visualization uses a cosmic theme to symbolize how these women didn't just work in technology—they expanded it, pushing boundaries like astronauts exploring new frontiers.

🌟 Features

Interactive Elements

• 20 Glowing Nodes - Each representing a real tech pioneer
• Dynamic Connections - Lines form between nearby nodes with color blending
• Hover Tooltips - Reveal detailed information about each pioneer
• Click Activation - Permanently illuminate nodes and create ripple effects
• Physics-Based Movement - Nodes float with realistic boundary physics

Visual Effects

• Cosmic Nebula - Ambient background that intensifies with network strength
• Ripple Effects - Animated bursts when nodes are activated
• Data Flow Animation - Traveling dots between connected activated nodes
• Strength Meter - Progress bar showing network activation percentage
• Milestone Messages - Celebratory notifications at 25%, 50%, 75%, and 100%

Customization

• Real-time Controls - Adjust connection range, node speed, and pulse rate
• Color-Coded Pioneers - Each woman has a unique color palette
• Responsive Design - Adapts to any screen size

🚀 How to Run Locally

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Internet connection (for p5.js CDN)

Quick Start

1. Clone the repository:

   git clone https://github.com/codeexplorerray/tech-pioneers-network.git
   cd tech-pioneers-network

2. Open in browser:

   • Simply open index.html in your web browser
   • No server required!

Alternative: Local Server

For the best experience, run a local server:

# Using Python (if installed)
python -m http.server 8000

# Or using Node.js
npx serve .

# Then open http://localhost:8000

🎨 Customization Guide

Adding New Pioneers

Edit the PIONEERS array in script.js:

{ name: 'New Pioneer', role: 'Their Achievement', col: [R, G, B] }

Adjusting Visual Parameters

Modify these variables in script.js:

• CONNECTION_DIST - Distance threshold for connections (default: 185)
• NODE_SPEED - Floating speed of nodes (default: 0.38)
• PULSE_INTERVAL - Auto-pulse frequency in frames (default: 90)

Color Themes

Each pioneer has an RGB color array. Experiment with different palettes!

🛠️ Tech Stack

• p5.js - Interactive canvas rendering and animations
• Vanilla JavaScript - Modal interactions and real-time configuration
• HTML5/CSS3 - Structure and responsive styling
• GitHub Pages - Hosting for live demo

📁 Project Structure

tech-pioneers-network/
├── index.html          # Main HTML structure
├── style.css           # All styling and themes
├── script.js           # p5.js code and interactions
├── devto-submission.md # DEV.to challenge submission
├── how it works.txt    # Detailed feature explanations
└── README.md          # This file

🤝 Contributing

This project celebrates diversity and inclusion in tech. Contributions are welcome!

Ways to Contribute:

1. Add More Pioneers - Research and add underrepresented women in tech
2. Improve Accessibility - Add keyboard navigation, screen reader support
3. Enhance Visuals - New animations, themes, or particle effects
4. Performance Optimization - Optimize rendering for smoother animations
5. Localization - Add support for multiple languages

How to Contribute:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-enhancement
3. Commit your changes: git commit -m 'Add amazing enhancement'
4. Push to the branch: git push origin feature/amazing-enhancement
5. Open a Pull Request

📊 The Pioneers

This visualization features 20 groundbreaking women:

Pioneer	Achievement
Ada Lovelace	First Programmer
Grace Hopper	Inventor of the Compiler
Katherine Johnson	NASA Mathematician
Dorothy Vaughan	First Black NASA Supervisor
Mary Jackson	NASA Engineer & Advocate
Radia Perlman	Mother of the Internet
Hedy Lamarr	Wireless Communication Pioneer
Annie Easley	NASA Rocket Scientist
Anita Borg	Founder of Systers
Reshma Saujani	Founder of Girls Who Code
Kimberly Bryant	Founder of Black Girls CODE
Megan Smith	US Chief Technology Officer
Safiya Noble	Algorithmic Bias Researcher
Joy Buolamwini	Founder of AI Justice League
Timnit Gebru	AI Ethics Researcher
Limor Fried	Open Hardware Pioneer
Fei-Fei Li	Pioneer of Computer Vision
Audrey Tang	World's First Digital Minister
Parisa Tabriz	Google Security Princess
Corinna Cortes	Co-inventor of SVM Algorithm

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• #WeCoded 2026 Challenge - For inspiring this celebration of women in tech
• p5.js Community - For the amazing creative coding framework
• Open Source Community - For fostering inclusive technology
• All the Pioneers - For breaking barriers and lighting the way

📞 Contact

Created with ❤️ by CodeExplorerRay

Built with passion, no formal education required—just curiosity and code!

---

*"When you click on a pioneer, you don't just light up one node; you illuminate an entire network of influence."