Skip to content

Commit 9a5fb79

Browse files
Tcode-MotionTcode-Motion
committed
Major Update: Transition to Version 2.0, Research-Level Data Enrichment, and New Modern Computing Pages (NPU, Raspberry Pi, Quantum)
1 parent 41fc11f commit 9a5fb79

42 files changed

Lines changed: 1860 additions & 152 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎about.html‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>About — Computer Parts Map</title>
77
<meta name="description" content="About Tcode Motion and the Computer Parts Map project.">
8-
<link rel="stylesheet" href="css/styles.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="css/styles.css">
99
</head>
10-
<body>
10+
<body class="dark-mode">
1111

1212
<div id="navbar-placeholder"></div>
1313

@@ -16,10 +16,9 @@
1616
<div class="about-avatar-placeholder">👨‍💻</div>
1717
<h1>Tcode Motion</h1>
1818
<div class="role-tag">🎬 Content Creator &amp; Developer</div>
19-
<p class="about-tagline">Building open-source educational tools and running the Satch Ka Switch YouTube network.</p>
19+
<p class="about-tagline">Building open-source educational tools. Made by <strong>Tcode Motion</strong>.</p>
2020
<div class="social-links">
2121
<a href="https://github.com/Tcode-Motion" target="_blank" rel="noopener" class="social-link github">🐙 GitHub</a>
22-
<a href="https://youtube.com/@SatchKaSwitch" target="_blank" rel="noopener" class="social-link youtube">▶️ YouTube</a>
2322
<a href="https://tcode-motion.github.io/computer-part-map/" target="_blank" rel="noopener" class="social-link linkedin" style="background:#10b981">🌐 Live Site</a>
2423
</div>
2524
</section>
@@ -40,8 +39,8 @@ <h2>📖 About This Project</h2>
4039
Everything is built from scratch using pure HTML, CSS, and Vanilla JavaScript — no frameworks, no build tools.
4140
</p>
4241
<div class="did-you-know">
43-
<div class="dyk-label">💡 Project Stats</div>
44-
<p>20+ pages · 6 categories · 45+ images · 100% free and open-source · Hosted on GitHub Pages</p>
42+
<div class="dyk-label">💡 Made By</div>
43+
<p>This project is proudly maintained and <strong>Made by Tcode Motion</strong>.</p>
4544
</div>
4645
</div>
4746

@@ -63,19 +62,14 @@ <h2>🛠️ Tech Stack</h2>
6362
</table>
6463
</div>
6564

66-
<!-- Satch Ka Switch -->
65+
<!-- Links -->
6766
<div class="content-section">
68-
<h2>📺 Satch Ka Switch — YouTube Network</h2>
69-
<p>
70-
<strong>Satch Ka Switch</strong> is an independent YouTube network focused on data-driven, analytical
71-
content about the Indian education system and career conformity. The channel takes a skeptical, root-cause
72-
approach to socio-economic issues — asking uncomfortable questions that mainstream media ignores.
73-
</p>
74-
<p>The network includes a Bengali language channel for deeper, more nuanced discussions.</p>
67+
<h2>🔗 Official Links</h2>
68+
<p>Explore the project source code or visit the live deployment.</p>
7569
<div class="related-grid">
76-
<a href="https://youtube.com/@SatchKaSwitch" target="_blank" rel="noopener" class="related-link">▶️ Watch on YouTube</a>
7770
<a href="https://github.com/Tcode-Motion" target="_blank" rel="noopener" class="related-link">🐙 GitHub Projects</a>
7871
<a href="https://tcode-motion.github.io/computer-part-map/" target="_blank" rel="noopener" class="related-link">🌐 Live Website</a>
72+
<a href="index.html" class="related-link">🏠 Back to Home</a>
7973
</div>
8074
</div>
8175

@@ -123,3 +117,6 @@ <h2>📬 Get In Touch</h2>
123117
<script src="js/script.js"></script>
124118
</body>
125119
</html>
120+
121+
122+

‎battery.html‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Battery — Laptop &amp; UPS Guide | Computer Parts Map</title>
77
<meta name="description" content="Battery technology guide — Li-Ion vs LiPo, UPS, laptop battery care, and top picks.">
8-
<link rel="stylesheet" href="css/styles.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="css/styles.css">
99
</head>
10-
<body>
10+
<body class="dark-mode">
1111
<div id="navbar-placeholder"></div>
1212
<div class="component-hero">
1313
<div class="badge">🔋 Power Supply</div>
@@ -67,9 +67,36 @@ <h2>🔗 Related Components</h2>
6767
</div>
6868
</div>
6969

70+
71+
<!-- Auto-Generated Research Section -->
72+
<div class="content-section" id="deep-dive-research">
73+
<h2>🔬 Deep Dive & Research Resources</h2>
74+
<p>To elevate your understanding of <strong>Battery</strong> to an academic and engineering level, explore the curated resources below. These materials cover the fundamental physics, architectural evolution, and advanced implementation details required for independent research.</p>
75+
76+
<div style="display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px;">
77+
<div style="flex: 1; min-width: 300px;">
78+
<h3 style="font-size: 1.2rem; color: #fff; margin-bottom: 10px;">📚 Academic & Technical Reading</h3>
79+
<ul style="color: rgba(255,255,255,0.7); line-height: 1.8;">
80+
<li><a href="https://en.wikipedia.org/wiki/battery" target="_blank" style="color: #60a5fa;">Wikipedia: Deep Dive into Battery</a></li>
81+
<li><a href="https://scholar.google.com/scholar?q=Battery+architecture" target="_blank" style="color: #60a5fa;">Google Scholar: Recent Papers on Battery</a></li>
82+
<li><a href="https://ieeexplore.ieee.org/search/searchresult.jsp?newsearch=true&queryText=Battery" target="_blank" style="color: #60a5fa;">IEEE Xplore: Engineering Specifications</a></li>
83+
</ul>
84+
</div>
85+
86+
<div style="flex: 1; min-width: 300px;">
87+
<h3 style="font-size: 1.2rem; color: #fff; margin-bottom: 10px;">🎥 Video Lecture / Demonstration</h3>
88+
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; background: #000;">
89+
<iframe src="https://www.youtube.com/embed?listType=search&list=Battery+explained+computer+science" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allowfullscreen></iframe>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
7094
</div>
7195
<div id="footer-placeholder"></div>
7296
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
7397
<script src="js/script.js"></script>
7498
</body>
75-
</html>
99+
</html>
100+
101+
102+

‎computer-history.html‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Computer History — Full Timeline | Computer Parts Map</title>
77
<meta name="description" content="History of computing — from abacus to ENIAC to transistor to AI, a complete timeline.">
8-
<link rel="stylesheet" href="css/styles.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="css/styles.css">
99
</head>
10-
<body>
10+
<body class="dark-mode">
1111
<div id="navbar-placeholder"></div>
1212
<div class="component-hero">
1313
<div class="badge">📜 More</div>
@@ -25,9 +25,36 @@ <h2>📅 Milestone Timeline</h2>
2525
<p><strong>2022-2024:</strong> Generative AI Revolution (LLMs)</p>
2626
</div>
2727
</div>
28+
29+
<!-- Auto-Generated Research Section -->
30+
<div class="content-section" id="deep-dive-research">
31+
<h2>🔬 Deep Dive & Research Resources</h2>
32+
<p>To elevate your understanding of <strong>Computer History</strong> to an academic and engineering level, explore the curated resources below. These materials cover the fundamental physics, architectural evolution, and advanced implementation details required for independent research.</p>
33+
34+
<div style="display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px;">
35+
<div style="flex: 1; min-width: 300px;">
36+
<h3 style="font-size: 1.2rem; color: #fff; margin-bottom: 10px;">📚 Academic & Technical Reading</h3>
37+
<ul style="color: rgba(255,255,255,0.7); line-height: 1.8;">
38+
<li><a href="https://en.wikipedia.org/wiki/computer-history" target="_blank" style="color: #60a5fa;">Wikipedia: Deep Dive into Computer History</a></li>
39+
<li><a href="https://scholar.google.com/scholar?q=Computer+History+architecture" target="_blank" style="color: #60a5fa;">Google Scholar: Recent Papers on Computer History</a></li>
40+
<li><a href="https://ieeexplore.ieee.org/search/searchresult.jsp?newsearch=true&queryText=Computer+History" target="_blank" style="color: #60a5fa;">IEEE Xplore: Engineering Specifications</a></li>
41+
</ul>
42+
</div>
43+
44+
<div style="flex: 1; min-width: 300px;">
45+
<h3 style="font-size: 1.2rem; color: #fff; margin-bottom: 10px;">🎥 Video Lecture / Demonstration</h3>
46+
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; background: #000;">
47+
<iframe src="https://www.youtube.com/embed?listType=search&list=Computer+History+explained+computer+science" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allowfullscreen></iframe>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
2852
</div>
2953
<div id="footer-placeholder"></div>
3054
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
3155
<script src="js/script.js"></script>
3256
</body>
3357
</html>
58+
59+
60+

‎computer-types.html‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Computer Types — Desktop, Laptop, Server, Mainframe | Computer Parts Map</title>
77
<meta name="description" content="Types of computers — desktop, laptop, server, mainframe, supercomputer, embedded, and IoT explained.">
8-
<link rel="stylesheet" href="css/styles.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="css/styles.css">
99
</head>
10-
<body>
10+
<body class="dark-mode">
1111
<div id="navbar-placeholder"></div>
1212
<div class="component-hero">
1313
<div class="badge">📜 More</div>
@@ -28,9 +28,36 @@ <h2>🆚 Computer Types</h2>
2828
</tbody>
2929
</table>
3030
</div>
31+
32+
<!-- Auto-Generated Research Section -->
33+
<div class="content-section" id="deep-dive-research">
34+
<h2>🔬 Deep Dive & Research Resources</h2>
35+
<p>To elevate your understanding of <strong>Computer Types</strong> to an academic and engineering level, explore the curated resources below. These materials cover the fundamental physics, architectural evolution, and advanced implementation details required for independent research.</p>
36+
37+
<div style="display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px;">
38+
<div style="flex: 1; min-width: 300px;">
39+
<h3 style="font-size: 1.2rem; color: #fff; margin-bottom: 10px;">📚 Academic & Technical Reading</h3>
40+
<ul style="color: rgba(255,255,255,0.7); line-height: 1.8;">
41+
<li><a href="https://en.wikipedia.org/wiki/computer-types" target="_blank" style="color: #60a5fa;">Wikipedia: Deep Dive into Computer Types</a></li>
42+
<li><a href="https://scholar.google.com/scholar?q=Computer+Types+architecture" target="_blank" style="color: #60a5fa;">Google Scholar: Recent Papers on Computer Types</a></li>
43+
<li><a href="https://ieeexplore.ieee.org/search/searchresult.jsp?newsearch=true&queryText=Computer+Types" target="_blank" style="color: #60a5fa;">IEEE Xplore: Engineering Specifications</a></li>
44+
</ul>
45+
</div>
46+
47+
<div style="flex: 1; min-width: 300px;">
48+
<h3 style="font-size: 1.2rem; color: #fff; margin-bottom: 10px;">🎥 Video Lecture / Demonstration</h3>
49+
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; background: #000;">
50+
<iframe src="https://www.youtube.com/embed?listType=search&list=Computer+Types+explained+computer+science" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allowfullscreen></iframe>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
3155
</div>
3256
<div id="footer-placeholder"></div>
3357
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
3458
<script src="js/script.js"></script>
3559
</body>
3660
</html>
61+
62+
63+

‎cooling.html‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Cooling — Air, Water &amp; Thermal Paste | Computer Parts Map</title>
77
<meta name="description" content="Cooling guide — air vs liquid cooling, AIOs, case fans, and thermal paste importance.">
8-
<link rel="stylesheet" href="css/styles.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="css/styles.css">
99
</head>
10-
<body>
10+
<body class="dark-mode">
1111
<div id="navbar-placeholder"></div>
1212
<div class="component-hero">
1313
<div class="badge">⚙️ Core Component</div>
@@ -57,9 +57,36 @@ <h2>🔗 Related Components</h2>
5757
<a href="ups.html" class="related-link">🔋 UPS</a>
5858
</div>
5959
</div>
60+
61+
<!-- Auto-Generated Research Section -->
62+
<div class="content-section" id="deep-dive-research">
63+
<h2>🔬 Deep Dive & Research Resources</h2>
64+
<p>To elevate your understanding of <strong>Cooling</strong> to an academic and engineering level, explore the curated resources below. These materials cover the fundamental physics, architectural evolution, and advanced implementation details required for independent research.</p>
65+
66+
<div style="display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px;">
67+
<div style="flex: 1; min-width: 300px;">
68+
<h3 style="font-size: 1.2rem; color: #fff; margin-bottom: 10px;">📚 Academic & Technical Reading</h3>
69+
<ul style="color: rgba(255,255,255,0.7); line-height: 1.8;">
70+
<li><a href="https://en.wikipedia.org/wiki/cooling" target="_blank" style="color: #60a5fa;">Wikipedia: Deep Dive into Cooling</a></li>
71+
<li><a href="https://scholar.google.com/scholar?q=Cooling+architecture" target="_blank" style="color: #60a5fa;">Google Scholar: Recent Papers on Cooling</a></li>
72+
<li><a href="https://ieeexplore.ieee.org/search/searchresult.jsp?newsearch=true&queryText=Cooling" target="_blank" style="color: #60a5fa;">IEEE Xplore: Engineering Specifications</a></li>
73+
</ul>
74+
</div>
75+
76+
<div style="flex: 1; min-width: 300px;">
77+
<h3 style="font-size: 1.2rem; color: #fff; margin-bottom: 10px;">🎥 Video Lecture / Demonstration</h3>
78+
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; background: #000;">
79+
<iframe src="https://www.youtube.com/embed?listType=search&list=Cooling+explained+computer+science" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allowfullscreen></iframe>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
6084
</div>
6185
<div id="footer-placeholder"></div>
6286
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
6387
<script src="js/script.js"></script>
6488
</body>
6589
</html>
90+
91+
92+

‎cpu.html‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>CPU — Central Processing Unit | Computer Parts Map</title>
77
<meta name="description" content="Learn everything about CPUs — how they work, Intel vs AMD, cores, clock speeds, cache, and top products.">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
811
<link rel="stylesheet" href="css/styles.css">
912
</head>
10-
<body>
13+
<body class="dark-mode">
1114
<div id="navbar-placeholder"></div>
1215

1316
<div class="component-hero">
@@ -126,10 +129,34 @@ <h2>🔗 Related Components</h2>
126129
</div>
127130
</div>
128131

129-
</div>
130132

133+
<!-- Auto-Generated Research Section -->
134+
<div class="content-section" id="deep-dive-research">
135+
<h2>🔬 Deep Dive & Research Resources</h2>
136+
<p>To elevate your understanding of <strong>Central Processing Unit</strong> to an academic and engineering level, explore the curated resources below. These materials cover the fundamental physics, architectural evolution, and advanced implementation details required for independent research.</p>
137+
138+
<div style="display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px;">
139+
<div style="flex: 1; min-width: 300px;">
140+
<h3 style="font-size: 1.2rem; color: #fff; margin-bottom: 10px;">📚 Academic & Technical Reading</h3>
141+
<ul style="color: rgba(255,255,255,0.7); line-height: 1.8;">
142+
<li><a href="https://en.wikipedia.org/wiki/cpu" target="_blank" style="color: #60a5fa;">Wikipedia: Deep Dive into Central Processing Unit</a></li>
143+
<li><a href="https://scholar.google.com/scholar?q=Central+Processing+Unit+architecture" target="_blank" style="color: #60a5fa;">Google Scholar: Recent Papers on Central Processing Unit</a></li>
144+
<li><a href="https://ieeexplore.ieee.org/search/searchresult.jsp?newsearch=true&queryText=Central+Processing+Unit" target="_blank" style="color: #60a5fa;">IEEE Xplore: Engineering Specifications</a></li>
145+
</ul>
146+
</div>
147+
148+
<div style="flex: 1; min-width: 300px;">
149+
<h3 style="font-size: 1.2rem; color: #fff; margin-bottom: 10px;">🎥 Video Lecture / Demonstration</h3>
150+
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; background: #000;">
151+
<iframe src="https://www.youtube.com/embed?listType=search&list=Central+Processing+Unit+explained+computer+science" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allowfullscreen></iframe>
152+
</div>
153+
</div>
154+
</div>
155+
</div>
156+
</div>
131157
<div id="footer-placeholder"></div>
132158
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
133159
<script src="js/script.js"></script>
134160
</body>
135161
</html>
162+

0 commit comments

Comments
 (0)