🖥️ 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
| Resource | URL |
|---|---|
| 🔴 Live Website | https://tcode-motion.github.io/computer-part-map/ |
| 📁 GitHub Repository | https://github.com/Tcode-Motion/computer-part-map/ |
📖 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
✨ 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) |
🛠️ 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
Tcode Motion
- GitHub: @Tcode-Motion
- Live Project: computer-part-map
Built with ❤️ using pure HTML, CSS, and JavaScript — no frameworks needed.
0 commit comments