🎓 STEM Hub

A Modern Open-Source Learning Portal for STEM Education

Features • Demo • Getting Started • Structure • Topics • Contributing

---

📖 About

STEM Hub is a comprehensive, free learning resource portal designed for students, educators, and lifelong learners. It provides curated educational content across 42 topics spanning 6 major STEM disciplines: Mathematics, Science, Mechanical Engineering, Electrical Engineering, Computer Science, and Artificial Intelligence.

Built with modern web technologies and a focus on clean, accessible design inspired by GitHub, MDN Web Docs, and Stripe Documentation.

🤖 Built with GitHub Copilot — This entire project was developed with the assistance of GitHub Copilot, demonstrating AI-powered development workflows.

---

✨ Features

Feature	Description
📚 42 Curated Topics	Comprehensive learning resources across 6 STEM disciplines
🎨 Modern Dark Theme	GitHub-inspired design with smooth animations and gradient accents
⚡ Auto-Populated Homepage	Add a topic to navbar → homepage updates automatically
📱 Responsive Design	Collapsible sidebar navigation that works on all devices
🔗 Single Source of Truth	All navigation managed from one navbar.html file
🚀 Zero Dependencies	Pure HTML, CSS, and vanilla JavaScript — no frameworks needed
🎯 Fast & Lightweight	Static site with instant page loads
♿ Accessible	Semantic HTML and keyboard navigation support

---

🖥️ Demo

🔗 Live Site: https://nguyenle15325.github.io/STEM-Hub/

Screenshots:

Homepage	Topic Page	Sidebar Navigation
Hero section with stats	Resource sections with cards	Collapsible categories
Quick start links	External resource links	Active link highlighting
Category grid cards	Clean typography	Mobile responsive

---

🚀 Getting Started

Prerequisites

• Any modern web browser (Chrome, Firefox, Safari, Edge)
• A local development server (VS Code Live Server recommended)

Installation

1. Clone the repository

   git clone https://github.com/NguyenLe15325/STEM-Hub.git
   cd STEM-Hub

2. Start a local server

   Using VS Code Live Server:

   • Install the Live Server extension
   • Right-click index.html → "Open with Live Server"

   Or using Python:

   python -m http.server 5500

   Or using Node.js:

   npx serve .

3. Open in browser

   http://localhost:5500
   

---

📁 Project Structure

STEM-Hub/
│
├── 📄 index.html                    # Dynamic homepage (auto-populated)
├── 📄 README.md                     # This file
│
├── 📂 assets/
│   ├── 📂 css/
│   │   └── styles.css               # Global stylesheet with CSS variables
│   ├── 📂 js/
│   │   ├── script.js                # Navigation & core functionality
│   │   └── home.js                  # Homepage auto-population logic
│   └── 📂 images/
│       └── favicon-32x32.png        # Site favicon
│
├── 📂 components/
│   └── navbar.html                  # 🔑 SINGLE SOURCE OF TRUTH for navigation
│
├── 📂 pages/                        # Topic pages organized by discipline
│   ├── 📂 mathematics/              # 6 topics
│   ├── 📂 science/                  # 4 topics
│   ├── 📂 mechanical-engineering/   # 8 topics
│   ├── 📂 electrical-engineering/   # 9 topics
│   ├── 📂 computer-science/         # 8 topics
│   └── 📂 artificial-intelligence/  # 7 topics
│
├── 📂 templates/
│   └── page-template.html           # Boilerplate for creating new pages
│
└── 📂 .github/
    └── copilot-instructions.md      # AI coding agent instructions

---

📚 Topics Covered

🔢 Mathematics (6 Topics)

Topic	Description
Calculus	Limits, derivatives, integrals, and applications
Linear Algebra	Vectors, matrices, transformations, eigenvalues
Statistics & Probability	Data analysis, distributions, hypothesis testing
Discrete Mathematics	Logic, sets, combinatorics, graph theory
Differential Equations	ODEs, PDEs, and solution methods
Number Theory	Prime numbers, modular arithmetic, cryptography

🔬 Science (4 Topics)

Topic	Description
Physics	Mechanics, electromagnetism, thermodynamics, quantum
Chemistry	Atomic structure, reactions, organic chemistry
Biology	Cell biology, genetics, evolution, ecology
Materials Science	Material properties, crystallography, composites

⚙️ Mechanical Engineering (8 Topics)

Topic	Description
Mechanics	Statics, dynamics, strength of materials
Thermodynamics	Heat transfer, energy systems, cycles
Fluid Mechanics	Fluid dynamics, hydraulics, aerodynamics
CAD/CAM	Computer-aided design and manufacturing
Manufacturing	Processes, CNC, additive manufacturing
Control Systems	Feedback systems, PID controllers
Robotics	Kinematics, dynamics, robot design
Engineering Materials	Metals, polymers, ceramics, selection

⚡ Electrical Engineering (9 Topics)

Topic	Description
Circuit Analysis	DC/AC circuits, network theorems
Electronics	Semiconductors, amplifiers, digital circuits
Power Systems	Generation, transmission, distribution
Signal Processing	Analog/digital signals, filters, transforms
Electromagnetic Theory	Maxwell's equations, waves, antennas
Control Systems	System modeling, stability, design
Digital Systems	Logic design, FSMs, FPGA
Microcontrollers	Embedded systems, Arduino, ARM
Communication Systems	Modulation, wireless, networking

💻 Computer Science (8 Topics)

Topic	Description
Algorithms	Sorting, searching, graph algorithms, complexity
Data Structures	Arrays, trees, graphs, hash tables
OOP	Classes, inheritance, polymorphism, design patterns
Databases	SQL, NoSQL, normalization, transactions
Operating Systems	Processes, memory, file systems, scheduling
Computer Networks	OSI model, protocols, security
Web Development	Frontend, backend, full-stack, APIs
Software Engineering	SDLC, agile, testing, DevOps

🤖 Artificial Intelligence (7 Topics)

Topic	Description
Machine Learning	Supervised, unsupervised, reinforcement learning
Deep Learning	Neural networks, CNNs, RNNs, transformers
Natural Language Processing	Text processing, sentiment analysis, LLMs
Computer Vision	Image processing, object detection, segmentation
Robotics & AI	Autonomous systems, path planning, SLAM
Data Science	Data wrangling, visualization, analytics
AI Engineering	MLOps, deployment, production systems

---

🎨 Customization

Theme Configuration

Edit CSS variables in assets/css/styles.css:

:root {
    /* Colors */
    --bg-primary: #0d1117;          /* Main background */
    --bg-secondary: #161b22;        /* Cards, sidebar */
    --bg-tertiary: #21262d;         /* Hover states */
    --accent-primary: #58a6ff;      /* Links, highlights */
    --accent-secondary: #a371f7;    /* Gradients, accents */
    --text-primary: #e6edf3;        /* Main text */
    --text-secondary: #8b949e;      /* Muted text */
    --border-color: #30363d;        /* Borders */
    
    /* Spacing */
    --border-radius: 8px;
    --border-radius-lg: 12px;
    
    /* Sidebar */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 60px;
}

Adding a New Topic

1. Create the page in pages/[category]/topic-name.html
2. Use the template from templates/page-template.html
3. Add to navbar in components/navbar.html:

   <a href="/pages/category/topic-name.html" class="subtopic-link">Topic Name</a>

4. Done! Homepage updates automatically via home.js

Adding a New Category

1. Create folder: pages/new-category/
2. Add section to components/navbar.html
3. Add description to categoryDescriptions in assets/js/home.js

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

Ways to Contribute

• 📝 Add new topics — Create educational content for new subjects
• 🐛 Fix bugs — Report or fix issues you find
• 🎨 Improve design — Enhance UI/UX and accessibility
• 📚 Add resources — Suggest quality learning materials
• 🌍 Translate — Help make content available in other languages

Contribution Workflow

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/new-topic

3. Make your changes following the project conventions
4. Test locally with Live Server
5. Commit with clear messages

   git commit -m "Add: quantum-computing topic page"

6. Push and create a Pull Request

Code Style Guidelines

• Use 2-space indentation for HTML/CSS/JS
• Follow BEM-like class naming (e.g., .resource-section, .topic-header)
• Keep root-relative paths (e.g., /assets/css/styles.css)
• Add meaningful comments for complex logic

---

🛠️ Tech Stack

Technology	Purpose
	Semantic markup structure
	Styling with CSS Variables, Grid, Flexbox
	Dynamic functionality (ES6+)
	AI-assisted development

---

📄 License

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

MIT License

Copyright (c) 2024-2026 NguyenLe15325

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software...

---

🙏 Acknowledgments

• Design Inspiration: GitHub, MDN Web Docs, Stripe Docs
• Development: Built entirely with GitHub Copilot
• Icons: Emoji icons for visual categorization
• Community: Thanks to all future contributors!

---

⭐ Star this repo if you find it helpful!

Made with ❤️ for the STEM community