🖥️ Computer Parts Map
An interactive, educational web encyclopedia that maps and explains every major computer hardware component — from CPUs and GPUs to routers, scanners, and projectors.
🌐 Links
🖥️ Computer Parts Map — Version 2.0 🚀
The ultimate interactive, research-level web encyclopedia for computer hardware and software. Explore everything from nano-transistors to global servers.
🌐 Live Access
📖 About
Computer Parts Map is a pure HTML/CSS/JavaScript static website that serves as a beginner-friendly yet comprehensive reference for all major computer hardware components. Each component has its own dedicated page with detailed explanations, images, specifications, use cases, and modern advancements.
Perfect for:
- 🎓 Students learning computer hardware
- 🔧 PC builders looking for quick references
- 👨🏫 Teachers and educators
- 🧠 Anyone curious about what's inside a computer
📖 About the Project
Computer Parts Map is an open-source educational library designed to bridge the gap between "basic hardware guides" and "complex engineering papers." It provides a structured, interactive journey through every layer of modern computing.
What makes Version 2.0 different?
- Research-Level Depth: Every page now features an academic "Deep Dive" section.
- Academic Integration: Direct links to Google Scholar and IEEE Xplore for every component.
- Embedded Lectures: Intelligent YouTube integration that surfaces CS university lectures relevant to each topic.
- Modern Hardware: New dedicated guides for NPUs (AI Processors), Quantum Computing, and Raspberry Pi Architecture.
✨ Features
- 📚 19 Dedicated Component Pages — each with detailed content, images, and explanations
- 🧭 Categorized Navigation Bar — hover-activated dropdown menus for 6 hardware categories
- 🌙 Dark Mode Toggle — fixed button that switches the entire site to dark mode
- ⚡ Animated Loading Skeleton — Anime.js powered loader on every page
- 🎞️ Smooth Animations —
fadeInanimations, hover zoom effects, and transition effects throughout - 📱 Responsive Layout — works across different screen sizes
- 🔐 AES-GCM Encryption Demo — uses the Web Crypto API in
script.js(educational demo) - 🖼️ Rich Image Library — 45 hardware images across all component pages
🗂️ Hardware Categories
| Category | Components |
|---|---|
| ⌨️ Input Devices | Keyboard, Mouse, Scanner, Microphone |
| 🖥️ Output Devices | Monitor, Printer, Speakers, Projector |
| ⚙️ Main Components | CPU, GPU, RAM, HDD, SSD, USB Flash Drive, Graphics Card |
| 🔋 Power Supply | Power Supply Unit (PSU), Battery |
| 🌐 Networking | Network Interface Card (NIC), Wi-Fi Adapter, Router |
| 🔊 Audio | Sound Card, Graphics Card (HDMI audio) |
- 📚 35+ Detailed Guides — Comprehensive technical specs for hardware and software.
- 🧭 Premium Mega Navbar — Reorganized category-based navigation (Core, Input, Output, Software, Computing).
- 🔬 Research Section — Auto-generated academic resource hubs on every page.
- 🌓 Dynamic Dark Mode — Persistent, modern dark-mode aesthetic.
- ⚡ Anime.js Animations — Smooth transitions, statistics counters, and interactive loaders.
- 🔍 Global Search — Real-time search engine to find any guide instantly.
- 📱 Mobile Optimized — Fully responsive design for learning on the go.
🗂️ Knowledge Architecture
| Category | Topics |
|---|---|
| ⚙️ Core Hardware | CPU, GPU, NPU (AI), RAM, Motherboard, PSU, Cooling |
| ⌨️ Input Devices | Keyboard, Mouse, Webcam, Microphone, Touchpad, Scanner |
| 🖥️ Output & Storage | Monitor, Printer, Projector, SSD, HDD, Optical Drives |
| 💻 Software & OS | Windows, Linux, macOS, OS Architecture, Software Types |
| ⚛️ Modern Computing | Quantum Computing, Raspberry Pi, Servers, Networking |
🛠️ Tech Stack
| Technology | Usage |
|---|---|
| HTML5 | Structure of all pages |
| CSS3 | Styling, animations, dark mode, responsive design |
| Vanilla JavaScript | Navbar behavior, dark mode toggle, smooth scroll, animations |
| Anime.js v3.2.1 | Loading skeleton animation (CDN) |
| Web Crypto API | AES-GCM encryption demo (built-in browser API) |
📁 File Map
computer-part-map/
│
├── index.html # Home page — overview of all 6 categories
│
├── 📄 Input Device Pages
│ ├── keyboard.html # Keyboard — types, features, mechanical vs membrane
│ ├── mouse.html # Mouse — DPI, wireless, ergonomic designs
│ ├── scanner.html # Scanner — resolution, cloud scanning
│ └── microphone.html # Microphone — noise canceling, streaming use
│
├── 📄 Output Device Pages
│ ├── monitor.html # Monitor — HDR, refresh rate, ultra-wide
│ ├── printer.html # Printer — wireless, eco-friendly ink
│ ├── speakers.html # Speakers — Bluetooth, smart assistant
│ └── projector.html # Projector — portable, HD resolution
│
├── 📄 Main Component Pages
│ ├── cpu.html # CPU — cores, threads, multitasking
│ ├── gpu.html # GPU — gaming, AI, video editing
│ ├── ram.html # RAM — speed, RGB, DDR generations
│ ├── hdd.html # HDD — platters, legacy storage
│ ├── ssd.html # SSD — NVMe, flash memory, speed
│ ├── usb-flash.html # USB Flash Drive — portable, encrypted storage
│ └── graphics-card.html # Graphics Card — ray tracing, AI rendering
│
├── 📄 Power Supply Pages
│ ├── psu.html # PSU — wattage, modular design, efficiency
│ └── battery.html # Battery — UPS, laptop batteries, fast charge
│
├── 📄 Networking Pages
│ ├── nic.html # NIC — gigabit, multi-gigabit speeds
│ ├── wifi-adapter.html # Wi-Fi Adapter — Wi-Fi 6 support
│ └── router.html # Router — mesh networking, parental controls
│
├── 📄 Audio Pages
│ └── sound-card.html # Sound Card — surround sound, high-res audio
│
├── css/ # Per-component stylesheets + global styles
│ ├── styles.css # Global styles — navbar, dark mode, animations
│ ├── battery.css
│ ├── cpu.css
│ ├── gpu.css
│ ├── graphics-card.css
│ ├── hdd.css
│ ├── keyboard.css
│ ├── microphone.css
│ ├── monitor.css
│ ├── mouse.css
│ ├── nic.css
│ ├── printer.css
│ ├── projector.css
│ ├── psu.css
│ ├── ram.css
│ ├── router.css
│ ├── scanner.css
│ ├── sound-card.css
│ ├── speakers.css
│ ├── ssd.css
│ ├── usb-flash.css
│ └── wifi-adapter.css
│
├── js/
│ └── script.js # Sticky navbar, dark mode, smooth scroll, Anime.js loader, AES-GCM demo
│
├── images/ # Hardware images (45 files)
│ ├── bk.jpg # Site background image
│ ├── computer.jpg
│ ├── cpu.jpg
│ ├── gpu.jpg
│ ├── ram.jpg
│ ├── hdd.jpg / harddick drive.jpg
│ ├── ssd.jpg
│ ├── psu.jpg
│ ├── nic.jpg
│ ├── router.jpg
│ ├── keyboard.jpg
│ ├── mouse.jpg
│ ├── scanner.jpg
│ ├── microphone.jpg
│ ├── monitor.jpg / tft-monitor.jpg
│ ├── printer.jpg / plotter-printer.jpg
│ ├── speakers.jpg / speaker.jpg
│ ├── projector.jpg
│ ├── sound-card.jpg
│ ├── graphics-card.jpg
│ ├── usb-flash.jpg / pendrive.jpg
│ ├── wifi-adapter.jpg
│ ├── battery.jpg
│ ├── motherboard.jpg
│ ├── LAN.jpg
│ ├── modem.jpg
│ ├── cache.jpg
│ ├── headphone.jpg
│ ├── webcam.jpg
│ ├── touchpad.jpg
│ ├── sd card.jpg
│ ├── game drive.jpg
│ ├── gaming control.jpg
│ ├── frameless fan.jpg
│ ├── cd dvd rider.jpg
│ ├── USB adopter.jpg
│ ├── windows operating system.jpg
│ └── ... (45 total)
│
├── map # Raw site map / route reference file
├── server.py # Local Python HTTP server for development
└── README.md # This file
🚀 Getting Started
Option 1 — Open Directly
Just open index.html in any modern web browser. No build step or server required.
Option 2 — Local Python Server (Recommended)
A server.py is included for local development:
python server.py
Then visit http://localhost:8000 in your browser.
Option 3 — Live Site
Visit the deployed GitHub Pages site directly: 👉 https://tcode-motion.github.io/computer-part-map/
🧩 How It Works
Navigation
The top navbar has 6 dropdown categories. On hover, a sub-menu appears with links to individual component pages. This is handled by CSS transitions + JS mouseenter/mouseleave events in script.js.
Per-Page Architecture
Each component page (cpu.html, ram.html, etc.) follows the same layout:
- Shared navbar linking back to all pages
- A
<section>with:- Component image
- Introduction paragraph
- Detailed specs/features list
- Modern advancements
- Per-component CSS in the
css/folder
Animations
- Loading Skeleton: Every page shows an animated pulsing circle using Anime.js until the page finishes loading, then fades out.
-
FadeIn: CSS
@keyframes fadeInapplied to headings and paragraphs. -
Hover Zoom: List items and cards scale up on hover using CSS
transform: scale(1.05). -
Navbar Scroll: Navbar gets a
scrolledclass after 50px scroll, handled in JS.
Dark Mode
A floating "Toggle Dark Mode" button (bottom-right) adds/removes the dark-mode class on <body>. All dark mode overrides are defined in styles.css.
📸 Screenshots
Visit the live site for a full visual experience: 🌐 https://tcode-motion.github.io/computer-part-map/
🤝 Contributing
- Fork the repository
- Create a new branch:
git checkout -b feature/new-component - Add your HTML page + CSS in the correct folders
- Update
index.htmlnavbar with a link to the new page - Submit a Pull Request
📄 License
This project is open-source. Feel free to use, modify, and distribute for educational purposes.
👨💻 Author
- Pure HTML5 & CSS3: Custom design system without heavy frameworks.
- Vanilla JavaScript: Modular layout injection and dynamic section generation.
- Anime.js: Powering the high-end UI animations and stat-counters.
- Academic APIs: Dynamic linking to scholarly databases.
📁 Project Structure
computer-part-map/
├── index.html # Version 2.0 Premium Home Page
├── cpu.html, gpu.html, ... # 35+ Component Guides
├── npu.html # New: AI Processor Deep-Dive
├── quantum-computing.html # New: Quantum Mechanics in Computing
├── raspberry-pi.html # New: SBC & IoT Architecture
├── css/
│ └── styles.css # Unified Global Design System (v2.0)
├── js/
│ └── script.js # Core Engine (Search, Injection, Animation)
└── images/ # 45+ High-resolution hardware assets
👨💻 Developed By
Tcode Motion
- GitHub: @Tcode-Motion
- Live Project: computer-part-map
- Website: Made by Tcode Motion
0 commit comments