|
1 | | -# 🖥️ Computer Parts Map — Version 2.0 🚀 |
| 1 | +# ⚡ Computer Parts Map (CPMap) — Version 2.0 🚀 |
2 | 2 |
|
3 | | -> The ultimate interactive, research-level web encyclopedia for computer hardware and software. Explore everything from nano-transistors to global servers. |
| 3 | +[](https://tcode-motion.github.io/computer-part-map/) |
| 4 | +[](https://github.com/Tcode-Motion/computer-part-map) |
| 5 | +[](LICENSE) |
| 6 | +[](https://developer.mozilla.org/en-US/docs/Web/HTML) |
4 | 7 |
|
5 | | -[](https://tcode-motion.github.io/computer-part-map/) |
6 | | -[](https://github.com/Tcode-Motion/computer-part-map/) |
7 | | -[](https://developer.mozilla.org/en-US/docs/Web/HTML) |
8 | | -[](https://developer.mozilla.org/en-US/docs/Web/CSS) |
9 | | -[](https://developer.mozilla.org/en-US/docs/Web/JavaScript) |
| 8 | +> **The world's most detailed interactive encyclopedia for computer hardware and software.** |
| 9 | +> Designed for students, engineers, and researchers to bridge the gap between basic guides and academic papers. |
10 | 10 |
|
11 | 11 | --- |
12 | 12 |
|
13 | | -## 🌐 Live Access |
| 13 | +## 📖 Project Vision |
14 | 14 |
|
15 | | -| Resource | URL | |
16 | | -|---|---| |
17 | | -| 🔴 **Live Website** | [https://tcode-motion.github.io/computer-part-map/](https://tcode-motion.github.io/computer-part-map/) | |
18 | | -| 📁 **GitHub Repository** | [https://github.com/Tcode-Motion/computer-part-map/](https://github.com/Tcode-Motion/computer-part-map/) | |
| 15 | +**CPMap** is more than just a list of parts. It is a **Research-Grade Educational Platform**. While Version 1.0 focused on basic hardware definitions, **Version 2.0 (Premium)** transforms the site into a high-density knowledge base with automated media ingestion, academic referencing, and advanced computing sections. |
| 16 | + |
| 17 | +### 🔬 What's New in Version 2.0? |
| 18 | +* **Academic Integration**: Every page features a "Research Hub" with direct query links to **Google Scholar** and **IEEE Xplore**. |
| 19 | +* **Modern Paradigms**: Dedicated deep-dives into **NPU (AI)**, **Quantum Computing**, and **SBC (Raspberry Pi)** architecture. |
| 20 | +* **Data Enrichment**: Expanded to **70+ total pages**, including 30+ detailed technical sub-pages. |
| 21 | +* **Interactive Search**: Migrated from basic filters to a full-text inverted index search powered by **Lunr.js**. |
| 22 | +* **Automation Suite**: Integrated Python tools to fetch public-domain media from NASA and Wikimedia automatically. |
19 | 23 |
|
20 | 24 | --- |
21 | 25 |
|
22 | | -## 📖 About the Project |
| 26 | +## ✨ Premium Features |
| 27 | + |
| 28 | +### 🧭 Advanced Navigation |
| 29 | +A **Mega-Dropdown Navbar** categorizes the entire computing landscape: |
| 30 | +* **Hardware**: Core (CPU/GPU/NPU), Input (Webcam/Touchpad), and Output/Storage. |
| 31 | +* **Software**: Comprehensive guides for Windows, Linux, macOS, Android, and iOS. |
| 32 | +* **Computing**: Timeline of History, Server Infrastructure, and Future Tech. |
23 | 33 |
|
24 | | -**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. |
| 34 | +### 🖼️ Automated Visual Galleries |
| 35 | +Every component page includes a high-resolution gallery of technical diagrams and real-world screenshots, sourced automatically from open libraries like **Wikimedia Commons** and **NASA**. |
25 | 36 |
|
26 | | -### What makes Version 2.0 different? |
27 | | -- **Research-Level Depth**: Every page features an academic "Deep Dive" section designed to help students and enthusiasts write their own research papers. |
28 | | -- **Academic Integration**: Direct links to **Google Scholar** and **IEEE Xplore** for every component. |
29 | | -- **Embedded Lectures**: Intelligent YouTube integration that surfaces CS university lectures relevant to each topic. |
30 | | -- **Modern Hardware**: New dedicated guides for **NPUs (AI Processors)**, **Quantum Computing**, and **Raspberry Pi Architecture**. |
| 37 | +### 🎥 Embedded University Lectures |
| 38 | +Instead of broken video links, CPMap dynamically surfaces university-level CS lectures and engineering demonstrations directly related to the topic being studied. |
| 39 | + |
| 40 | +### 🌙 Premium UI/UX |
| 41 | +* **Glassmorphism Navbar**: Sticky, blurred glass effect for modern aesthetics. |
| 42 | +* **Stats Counter**: Animated counters on the homepage showing the library's growth. |
| 43 | +* **Pure Dark Mode**: A custom-engineered dark theme optimized for long study sessions. |
31 | 44 |
|
32 | 45 | --- |
33 | 46 |
|
34 | | -## ✨ Features |
| 47 | +## 🗂️ Knowledge Architecture |
35 | 48 |
|
36 | | -- 📚 **35+ Detailed Guides** — Comprehensive technical specs for hardware and software. |
37 | | -- 🧭 **Premium Mega Navbar** — Reorganized category-based navigation (Core, Input, Output, Software, Computing). |
38 | | -- 🔬 **Research Section** — Auto-generated academic resource hubs on every page. |
39 | | -- 🌓 **Dynamic Dark Mode** — Persistent, modern dark-mode aesthetic. |
40 | | -- ⚡ **Anime.js Animations** — Smooth transitions, statistics counters, and interactive loaders. |
41 | | -- 🔍 **Global Search** — Real-time search engine to find any guide instantly. |
42 | | -- 📱 **Mobile Optimized** — Fully responsive design for learning on the go. |
| 49 | +| Category | High-Level Topics | Research Sub-pages | |
| 50 | +|:---|:---|:---| |
| 51 | +| **Core Hardware** | CPU, GPU, NPU, RAM, Motherboard | Architecture, Benchmarks, Logic | |
| 52 | +| **Mobile & OS** | Android, iOS, Windows, Linux, macOS | Kernels, NT Architecture, Distros | |
| 53 | +| **Networking** | Router, NIC, WiFi-7, Server Infrastructure | Protocols, Signal Physics | |
| 54 | +| **Storage** | SSD, HDD, NVMe, Optical/Laser | Flash Physics, Laser Tech | |
| 55 | +| **Future Tech** | Quantum Computing, Neural Engines | Qubits, Tensor Math, SBCs | |
43 | 56 |
|
44 | 57 | --- |
45 | 58 |
|
46 | | -## 🔬 Research & Study Capability |
| 59 | +## 🛠️ Tech Stack & Automation |
47 | 60 |
|
48 | | -This project is built to be more than just a list of parts. It is a **Research Springboard**. By studying the data-rich paragraphs, spec tables, and academic links provided on every page, anyone can: |
49 | | -1. Understand the underlying physics of transistors and qubits. |
50 | | -2. Analyze the architectural differences between Scalar, Vector, and Matrix processing. |
51 | | -3. Gather sources for independent academic engineering papers. |
52 | | -4. Watch university-level demonstrations directly within the interface. |
| 61 | +### Frontend |
| 62 | +* **Core**: Semantic HTML5, Modular CSS3 (Custom Design System). |
| 63 | +* **Logic**: Vanilla JavaScript (ES6+). |
| 64 | +* **Search**: [Lunr.js](https://lunrjs.com/) for site-wide full-text indexing. |
| 65 | +* **Animations**: [Anime.js](https://animejs.com/) for high-end UI feedback. |
| 66 | + |
| 67 | +### Automation (The Ingest Suite) |
| 68 | +Located in `/tools` and `/scripts`, these Python tools maintain the library's depth: |
| 69 | +* `cpmap_ingest.py`: Idempotent asset downloader (NASA/YouTube). |
| 70 | +* `build_search_index.py`: Rebuilds the Lunr index across all 70+ pages. |
| 71 | +* `generate_detail_pages.py`: Uses Jinja2 templates to create technical sub-pages from JSON datasets. |
53 | 72 |
|
54 | 73 | --- |
55 | 74 |
|
56 | | -## 🗂️ Knowledge Architecture |
| 75 | +## 🚀 Deployment & Local Setup |
57 | 76 |
|
58 | | -| Category | Topics | |
59 | | -|---|---| |
60 | | -| ⚙️ **Core Hardware** | CPU, GPU, **NPU (AI)**, RAM, Motherboard, PSU, Cooling | |
61 | | -| ⌨️ **Input Devices** | Keyboard, Mouse, Webcam, Microphone, Touchpad, Scanner | |
62 | | -| 🖥️ **Output & Storage** | Monitor, Printer, Projector, SSD, HDD, Optical Drives | |
63 | | -| 💻 **Software & OS** | Windows, Linux, macOS, OS Architecture, Software Types | |
64 | | -| ⚛️ **Modern Computing** | **Quantum Computing**, **Raspberry Pi**, Servers, Networking | |
| 77 | +### 1. Hard Refresh (Live Site) |
| 78 | +If you are visiting the [Live Site](https://tcode-motion.github.io/computer-part-map/) and see old content, please perform a **Hard Refresh**: |
| 79 | +* **Windows**: `Ctrl + F5` |
| 80 | +* **Mac**: `Cmd + Shift + R` |
65 | 81 |
|
66 | | ---- |
| 82 | +### 2. Local Development |
| 83 | +```bash |
| 84 | +# Clone the repo |
| 85 | +git clone https://github.com/Tcode-Motion/computer-part-map.git |
67 | 86 |
|
68 | | -## 🛠️ Tech Stack |
| 87 | +# Install Ingest Tools dependencies |
| 88 | +pip install -r tools/requirements.txt |
69 | 89 |
|
70 | | -- **Pure HTML5 & CSS3**: Custom design system without heavy frameworks. |
71 | | -- **Vanilla JavaScript**: Modular layout injection and dynamic section generation. |
72 | | -- **Anime.js**: Powering the high-end UI animations and stat-counters. |
73 | | -- **Academic APIs**: Dynamic linking to scholarly databases. |
| 90 | +# Run local server |
| 91 | +python -m http.server 8000 |
| 92 | +``` |
74 | 93 |
|
75 | 94 | --- |
76 | 95 |
|
77 | 96 | ## 👨💻 Developed By |
78 | 97 |
|
79 | | -**Tcode Motion** |
80 | | -- GitHub: [@Tcode-Motion](https://github.com/Tcode-Motion) |
81 | | -- Website: [Made by Tcode Motion](https://tcode-motion.github.io/computer-part-map/) |
| 98 | +**Tcode Motion** |
| 99 | +*Building the future of open-source computer education.* |
| 100 | + |
| 101 | +* **GitHub**: [@Tcode-Motion](https://github.com/Tcode-Motion) |
| 102 | +* **Live Library**: [Computer Parts Map](https://tcode-motion.github.io/computer-part-map/) |
82 | 103 |
|
83 | 104 | --- |
84 | 105 |
|
85 | 106 | <div align="center"> |
86 | | - <sub>Built for students, engineers, and the curious. Open-source under the MIT mindset.</sub> |
| 107 | + <sub>CPMap is an Open Source project. "Truth through Data." — Made by Tcode Motion.</sub> |
87 | 108 | </div> |
0 commit comments