Skip to content

Commit dbda05a

Browse files
Tcode-MotionTcode-Motion
authored
Update README.md
1 parent da4640c commit dbda05a

1 file changed

Lines changed: 152 additions & 43 deletions

File tree

‎README.md‎

Lines changed: 152 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,217 @@
1-
# ⚡ Computer Parts Map (CPMap) — Version 2.0 🚀
1+
<div align="center">
2+
3+
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:0d0d0d,40:0a1a0a,80:0d3d0d,100:00ff88&height=220&section=header&text=CPMap%202.0&fontSize=65&fontColor=00ff88&animation=fadeIn&fontAlignY=38&desc=⚡%20The%20World%27s%20Most%20Detailed%20Computer%20Hardware%20Encyclopedia&descAlignY=60&descColor=aaaaaa&descSize=15" width="100%"/>
4+
5+
</div>
6+
7+
<div align="center">
8+
9+
[![Typing SVG](https://readme-typing-svg.demolab.com?font=Fira+Code&weight=600&size=18&pause=1000&color=00FF88&center=true&vCenter=true&width=750&lines=⚡+Computer+Parts+Map+—+Version+2.0+Premium;🔬+70%2B+Pages+of+Research-Grade+Knowledge;🧠+CPU+%7C+GPU+%7C+NPU+%7C+Quantum+%7C+SBC;🔍+Full-Text+Search+Powered+by+Lunr.js;🤖+Automated+Media+from+NASA+%26+Wikimedia;📚+Academic+Links+to+Google+Scholar+%26+IEEE)](https://git.io/typing-svg)
10+
11+
</div>
12+
13+
<div align="center">
214

3-
[![Live Site](https://img.shields.io/badge/Live-Encyclopedia-brightgreen?style=for-the-badge&logo=google-chrome)](https://tcode-motion.github.io/computer-part-map/)
15+
[![Live Site](https://img.shields.io/badge/🌐%20Live%20Encyclopedia-Visit%20Now-00ff88?style=for-the-badge&logo=google-chrome&logoColor=black)](https://tcode-motion.github.io/computer-part-map/)
416
[![Version](https://img.shields.io/badge/Version-2.0%20Premium-blue?style=for-the-badge)](https://github.com/Tcode-Motion/computer-part-map)
517
[![License](https://img.shields.io/badge/License-MIT-orange?style=for-the-badge)](LICENSE)
618
[![Tech](https://img.shields.io/badge/Tech-Pure%20Web-red?style=for-the-badge)](https://developer.mozilla.org/en-US/docs/Web/HTML)
19+
[![Star](https://img.shields.io/github/stars/Tcode-Motion/computer-part-map?style=for-the-badge&color=yellow)](https://github.com/Tcode-Motion/computer-part-map/stargazers)
20+
21+
</div>
22+
23+
---
24+
25+
<div align="center">
26+
27+
```
28+
╔══════════════════════════════════════════════════════════════════════╗
29+
║ ║
30+
║ "Truth through Data." ║
31+
║ ║
32+
║ The world's most detailed interactive encyclopedia for ║
33+
║ computer hardware and software — designed for students, ║
34+
║ engineers, and researchers. ║
35+
║ ║
36+
╚══════════════════════════════════════════════════════════════════════╝
37+
```
738

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.
39+
</div>
1040

1141
---
1242

1343
## 📖 Project Vision
1444

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.
45+
**CPMap** is more than just a list of parts. It is a **Research-Grade Educational Platform**.
46+
47+
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 — bridging the gap between basic guides and academic papers.
48+
49+
---
50+
51+
## 🔬 What's New in Version 2.0?
1652

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.
53+
| 🆕 Feature | 📖 Description |
54+
|:---|:---|
55+
| 📚 **Academic Integration** | Every page has a "Research Hub" with direct links to **Google Scholar** and **IEEE Xplore** |
56+
| 🧠 **Modern Paradigms** | Deep-dives into **NPU (AI)**, **Quantum Computing**, and **SBC (Raspberry Pi)** |
57+
| 📦 **Data Enrichment** | Expanded to **70+ total pages** including 30+ detailed technical sub-pages |
58+
| 🔍 **Full-Text Search** | Migrated to full-text inverted index search powered by **Lunr.js** |
59+
| 🤖 **Automation Suite** | Python tools to auto-fetch public-domain media from **NASA** and **Wikimedia** |
2360

2461
---
2562

2663
## ✨ Premium Features
2764

2865
### 🧭 Advanced Navigation
2966
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.
67+
68+
<div align="center">
69+
70+
| 🖥️ Hardware | 💻 Software | 🔮 Computing |
71+
|:---:|:---:|:---:|
72+
| CPU / GPU / NPU | Windows | History Timeline |
73+
| Input Devices | Linux | Server Infrastructure |
74+
| Output & Storage | macOS / Android / iOS | Future Tech |
75+
76+
</div>
3377

3478
### 🖼️ 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**.
79+
Every component page includes a high-resolution gallery of technical diagrams sourced automatically from **Wikimedia Commons** and **NASA**.
3680

3781
### 🎥 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.
82+
CPMap dynamically surfaces **university-level CS lectures** and engineering demonstrations — no broken links, always relevant.
3983

4084
### 🌙 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.
85+
- **Glassmorphism Navbar** — sticky, blurred glass effect
86+
- **Stats Counter** — animated homepage counters showing library growth
87+
- **Pure Dark Mode** — custom-engineered dark theme for long study sessions
4488

4589
---
4690

4791
## 🗂️ Knowledge Architecture
4892

49-
| Category | High-Level Topics | Research Sub-pages |
93+
<div align="center">
94+
95+
| 🏷️ Category | 🔑 High-Level Topics | 🔬 Research Sub-pages |
5096
|:---|:---|:---|
5197
| **Core Hardware** | CPU, GPU, NPU, RAM, Motherboard | Architecture, Benchmarks, Logic |
5298
| **Mobile & OS** | Android, iOS, Windows, Linux, macOS | Kernels, NT Architecture, Distros |
5399
| **Networking** | Router, NIC, WiFi-7, Server Infrastructure | Protocols, Signal Physics |
54100
| **Storage** | SSD, HDD, NVMe, Optical/Laser | Flash Physics, Laser Tech |
55101
| **Future Tech** | Quantum Computing, Neural Engines | Qubits, Tensor Math, SBCs |
56102

103+
</div>
104+
57105
---
58106

59107
## 🛠️ Tech Stack & Automation
60108

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.
109+
### 🌐 Frontend
110+
111+
<div align="center">
112+
113+
![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
114+
![CSS3](https://img.shields.io/badge/CSS3_Custom_Design_System-1572B6?style=for-the-badge&logo=css3&logoColor=white)
115+
![JavaScript](https://img.shields.io/badge/JavaScript_ES6+-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
116+
![Lunr.js](https://img.shields.io/badge/Lunr.js-Full_Text_Search-FF6B35?style=for-the-badge)
117+
![Anime.js](https://img.shields.io/badge/Anime.js-UI_Animations-FF69B4?style=for-the-badge)
118+
119+
</div>
120+
121+
| Layer | Technology | Purpose |
122+
|:---|:---:|:---|
123+
| **Core** | Semantic HTML5 + Modular CSS3 | Custom Design System |
124+
| **Logic** | Vanilla JavaScript ES6+ | Interactivity & Search |
125+
| **Search** | [Lunr.js](https://lunrjs.com/) | Site-wide full-text indexing |
126+
| **Animations** | [Anime.js](https://animejs.com/) | High-end UI feedback |
66127

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.
128+
### 🤖 Automation Suite (Python)
129+
130+
Located in `/tools` and `/scripts`:
131+
132+
| 🐍 Script | ⚙️ Purpose |
133+
|:---|:---|
134+
| `cpmap_ingest.py` | Idempotent asset downloader — pulls from NASA & YouTube |
135+
| `build_search_index.py` | Rebuilds the Lunr.js index across all 70+ pages |
136+
| `generate_detail_pages.py` | Uses Jinja2 templates to create sub-pages from JSON datasets |
72137

73138
---
74139

75140
## 🚀 Deployment & Local Setup
76141

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`
142+
### 🌐 Visit the Live Site
143+
🔗 **[tcode-motion.github.io/computer-part-map/](https://tcode-motion.github.io/computer-part-map/)**
144+
145+
> If you see old content, do a **Hard Refresh:**
146+
> - **Windows:** `Ctrl + F5`
147+
> - **Mac:** `Cmd + Shift + R`
148+
149+
### 💻 Local Development
81150

82-
### 2. Local Development
83151
```bash
84-
# Clone the repo
152+
# 1. Clone the repository
85153
git clone https://github.com/Tcode-Motion/computer-part-map.git
86154

87-
# Install Ingest Tools dependencies
155+
# 2. Navigate into the project
156+
cd computer-part-map
157+
158+
# 3. Install Python automation tools
88159
pip install -r tools/requirements.txt
89160

90-
# Run local server
161+
# 4. Run local server
91162
python -m http.server 8000
92163
```
93164

165+
Open [http://localhost:8000](http://localhost:8000) in your browser 🎉
166+
167+
---
168+
169+
## 📁 Project Structure
170+
171+
```
172+
computer-part-map/
173+
├── index.html # Homepage with animated stats
174+
├── tools/
175+
│ ├── cpmap_ingest.py # NASA/Wikimedia auto-downloader
176+
│ ├── build_search_index.py
177+
│ └── requirements.txt
178+
├── scripts/
179+
│ └── generate_detail_pages.py # Jinja2 page generator
180+
├── assets/ # Auto-fetched media gallery
181+
└── README.md
182+
```
183+
184+
---
185+
186+
## 🤝 Contributing
187+
188+
Contributions, issues, and feature requests are welcome!
189+
190+
- ⭐ **Star** the repo if you find it useful
191+
- 🐛 **Open an issue** for bugs or missing topics
192+
- 🔧 **Submit a PR** to add new hardware sections
193+
94194
---
95195

96-
## 👨‍💻 Developed By
196+
## 👨‍💻 Author
197+
198+
<div align="center">
97199

98-
**Tcode Motion**
200+
**Tanmoy — Tcode-Motion**
99201
*Building the future of open-source computer education.*
100202

101-
* **GitHub**: [@Tcode-Motion](https://github.com/Tcode-Motion)
102-
* **Live Library**: [Computer Parts Map](https://tcode-motion.github.io/computer-part-map/)
203+
[![GitHub](https://img.shields.io/badge/GitHub-Tcode--Motion-181717?style=for-the-badge&logo=github)](https://github.com/Tcode-Motion)
204+
[![Live Library](https://img.shields.io/badge/Live-Computer%20Parts%20Map-00ff88?style=for-the-badge&logo=google-chrome&logoColor=black)](https://tcode-motion.github.io/computer-part-map/)
205+
[![YouTube](https://img.shields.io/badge/YouTube-Sach%20Ka%20Switch-FF0000?style=for-the-badge&logo=youtube)](https://youtube.com/@sachkaswitch)
206+
207+
*"Truth through Data." — CPMap is Open Source. Always.*
208+
209+
</div>
103210

104211
---
105212

106213
<div align="center">
107-
<sub>CPMap is an Open Source project. "Truth through Data." — Made by Tcode Motion.</sub>
214+
215+
<img src="https://capsule-render.vercel.app/api?type=waving&color=0:00ff88,50:0d3d0d,100:0d0d0d&height=120&section=footer&text=Truth%20through%20Data%20⚡&fontSize=22&fontColor=00ff88&animation=fadeIn&fontAlignY=65" width="100%"/>
216+
108217
</div>

0 commit comments

Comments
 (0)