Skip to content

Commit da4640c

Browse files
Tcode-MotionTcode-Motion
committed
update full website
1 parent 36bba69 commit da4640c

2 files changed

Lines changed: 328 additions & 27 deletions

File tree

‎css/styles.css‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1625,3 +1625,220 @@ body.nav-open {
16251625
right: 20px;
16261626
}
16271627
}
1628+
1629+
/* ==============================================
1630+
PHASE 4: VISUAL HOMEPAGE REDESIGN
1631+
============================================== */
1632+
1633+
/* Zero to Hero Explainer Pathway */
1634+
.zth-pathway {
1635+
display: flex;
1636+
justify-content: space-between;
1637+
align-items: center;
1638+
gap: 20px;
1639+
margin-top: 40px;
1640+
flex-wrap: wrap;
1641+
}
1642+
1643+
@media (max-width: 768px) {
1644+
.zth-pathway {
1645+
flex-direction: column;
1646+
gap: 10px;
1647+
}
1648+
}
1649+
1650+
.zth-step {
1651+
flex: 1;
1652+
background: rgba(30, 41, 59, 0.4);
1653+
backdrop-filter: blur(12px);
1654+
-webkit-backdrop-filter: blur(12px);
1655+
border: 1px solid rgba(255, 255, 255, 0.05);
1656+
border-radius: 16px;
1657+
padding: 30px 20px;
1658+
text-align: center;
1659+
min-width: 250px;
1660+
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
1661+
}
1662+
1663+
.zth-step:hover {
1664+
transform: translateY(-5px);
1665+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(96, 165, 250, 0.1);
1666+
border-color: rgba(96, 165, 250, 0.3);
1667+
}
1668+
1669+
.zth-icon {
1670+
font-size: 3rem;
1671+
margin-bottom: 15px;
1672+
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
1673+
}
1674+
1675+
.zth-step h4 {
1676+
color: #f8fafc;
1677+
font-weight: 600;
1678+
margin-bottom: 10px;
1679+
}
1680+
1681+
.zth-step p {
1682+
color: #94a3b8;
1683+
font-size: 0.95rem;
1684+
margin: 0;
1685+
}
1686+
1687+
.zth-connector {
1688+
flex-shrink: 0;
1689+
width: 40px;
1690+
height: 4px;
1691+
background: linear-gradient(90deg, rgba(96, 165, 250, 0.5), rgba(192, 132, 252, 0.5));
1692+
border-radius: 2px;
1693+
position: relative;
1694+
}
1695+
1696+
@media (max-width: 768px) {
1697+
.zth-connector {
1698+
width: 4px;
1699+
height: 40px;
1700+
background: linear-gradient(180deg, rgba(96, 165, 250, 0.5), rgba(192, 132, 252, 0.5));
1701+
}
1702+
}
1703+
1704+
.zth-connector::after {
1705+
content: '';
1706+
position: absolute;
1707+
top: 50%;
1708+
left: 50%;
1709+
transform: translate(-50%, -50%);
1710+
width: 12px;
1711+
height: 12px;
1712+
background: #3b82f6;
1713+
border-radius: 50%;
1714+
box-shadow: 0 0 10px #3b82f6, 0 0 20px #c084fc;
1715+
animation: pulseNeon 2s infinite;
1716+
}
1717+
1718+
@keyframes pulseNeon {
1719+
0% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 20px rgba(192, 132, 252, 0.2); transform: translate(-50%, -50%) scale(1); }
1720+
50% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.9), 0 0 30px rgba(192, 132, 252, 0.6); transform: translate(-50%, -50%) scale(1.2); }
1721+
100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 20px rgba(192, 132, 252, 0.2); transform: translate(-50%, -50%) scale(1); }
1722+
}
1723+
1724+
/* Massive Visual Category Cards */
1725+
.visual-category-grid {
1726+
display: grid;
1727+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
1728+
gap: 30px;
1729+
margin-top: 30px;
1730+
margin-bottom: 80px;
1731+
}
1732+
1733+
.v-cat-card {
1734+
position: relative;
1735+
border-radius: 20px;
1736+
overflow: hidden;
1737+
text-decoration: none;
1738+
background: #0f172a;
1739+
border: 1px solid rgba(255, 255, 255, 0.05);
1740+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
1741+
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
1742+
display: flex;
1743+
flex-direction: column;
1744+
min-height: 480px;
1745+
}
1746+
1747+
.v-cat-card:hover {
1748+
transform: translateY(-10px) scale(1.02);
1749+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(59, 130, 246, 0.2);
1750+
border-color: rgba(96, 165, 250, 0.4);
1751+
}
1752+
1753+
.v-cat-img-wrapper {
1754+
position: absolute;
1755+
top: 0;
1756+
left: 0;
1757+
width: 100%;
1758+
height: 60%;
1759+
overflow: hidden;
1760+
z-index: 0;
1761+
}
1762+
1763+
.v-cat-img {
1764+
width: 100%;
1765+
height: 100%;
1766+
object-fit: cover;
1767+
transition: transform 0.8s ease, filter 0.8s ease;
1768+
filter: brightness(0.6) saturate(0.8);
1769+
}
1770+
1771+
.v-cat-card:hover .v-cat-img {
1772+
transform: scale(1.1);
1773+
filter: brightness(0.9) saturate(1.2);
1774+
}
1775+
1776+
.v-cat-overlay {
1777+
position: absolute;
1778+
bottom: 0;
1779+
left: 0;
1780+
width: 100%;
1781+
height: 100%;
1782+
background: linear-gradient(to top, #0f172a 10%, rgba(15, 23, 42, 0.8) 50%, rgba(15, 23, 42, 0) 100%);
1783+
}
1784+
1785+
.v-cat-content {
1786+
position: absolute;
1787+
bottom: 0;
1788+
left: 0;
1789+
width: 100%;
1790+
padding: 30px;
1791+
z-index: 1;
1792+
display: flex;
1793+
flex-direction: column;
1794+
justify-content: flex-end;
1795+
height: 60%;
1796+
}
1797+
1798+
.v-cat-icon {
1799+
font-size: 2.5rem;
1800+
margin-bottom: 10px;
1801+
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
1802+
transition: transform 0.3s ease;
1803+
}
1804+
1805+
.v-cat-card:hover .v-cat-icon {
1806+
transform: scale(1.1) rotate(5deg);
1807+
}
1808+
1809+
.v-cat-content h3 {
1810+
color: #fff;
1811+
font-size: 1.8rem;
1812+
font-weight: 700;
1813+
margin-bottom: 10px;
1814+
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
1815+
}
1816+
1817+
.v-cat-content p {
1818+
color: #cbd5e1;
1819+
font-size: 1rem;
1820+
line-height: 1.5;
1821+
margin-bottom: 25px;
1822+
text-shadow: 0 1px 5px rgba(0,0,0,0.8);
1823+
}
1824+
1825+
.v-cat-btn {
1826+
align-self: flex-start;
1827+
padding: 10px 24px;
1828+
background: rgba(255, 255, 255, 0.1);
1829+
backdrop-filter: blur(4px);
1830+
-webkit-backdrop-filter: blur(4px);
1831+
border: 1px solid rgba(255, 255, 255, 0.2);
1832+
border-radius: 30px;
1833+
color: #fff;
1834+
font-weight: 600;
1835+
font-size: 0.95rem;
1836+
transition: all 0.3s ease;
1837+
}
1838+
1839+
.v-cat-card:hover .v-cat-btn {
1840+
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
1841+
border-color: transparent;
1842+
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
1843+
transform: translateX(5px);
1844+
}

‎index.html‎

Lines changed: 111 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,17 @@
2121

2222
<div id="navbar-placeholder"></div>
2323

24-
<section class="premium-hero">
25-
<div class="hero-glow"></div>
26-
<div class="hero-orb orb-1"></div>
27-
<div class="hero-orb orb-2"></div>
24+
<section class="premium-hero" style="position: relative; overflow: hidden;">
25+
<!-- 3D Particle Network Background -->
26+
<div id="particles-js" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; pointer-events: auto;"></div>
2827

29-
<div class="hero-container">
28+
<div class="hero-glow" style="z-index: 1;"></div>
29+
<div class="hero-orb orb-1" style="z-index: 1;"></div>
30+
<div class="hero-orb orb-2" style="z-index: 1;"></div>
31+
32+
<div class="hero-container" style="position: relative; z-index: 2; pointer-events: none;">
33+
<div style="pointer-events: auto;">
34+
3035
<div class="badge-new">✨ Version 2.0 Live</div>
3136
<h1>Master Your <span>Computer</span> Knowledge</h1>
3237
<p class="hero-description">The ultimate interactive guide to hardware, software, and the secrets behind the screen. From nano-transistors to global servers.</p>
@@ -55,35 +60,82 @@ <h1>Master Your <span>Computer</span> Knowledge</h1>
5560
<span class="stat-label">% Open Source</span>
5661
</div>
5762
</div>
63+
</div>
5864
</div>
5965
</section>
6066

61-
<main class="main-container">
62-
<div class="section-header">
63-
<h2>Explore Categories</h2>
64-
<p>Select a component category to dive deep into specifications and historical context.</p>
67+
<main class="main-container" style="position: relative; z-index: 5;">
68+
<!-- ZERO TO HERO EXPLAINER (Beginner Pathway) -->
69+
<div class="zero-to-hero-section reveal" style="padding: 40px 0 80px;">
70+
<div class="section-header">
71+
<h2 style="font-size: 2.5rem; background: linear-gradient(90deg, #60a5fa, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">From Zero to Hardware Hero</h2>
72+
<p style="font-size: 1.2rem; color: #94a3b8;">No tech knowledge? No problem. Follow the path to absolute tech mastery.</p>
73+
</div>
74+
<div class="zth-pathway">
75+
<div class="zth-step reveal-left">
76+
<div class="zth-icon">❓</div>
77+
<h4>1. You Are Here</h4>
78+
<p>Curious but overwhelmed by tech jargon like "CPU" and "RAM".</p>
79+
</div>
80+
<div class="zth-connector reveal"></div>
81+
<div class="zth-step reveal-scale">
82+
<div class="zth-icon">🗺️</div>
83+
<h4>2. The Journey</h4>
84+
<p>Explore our visual maps, interactive analogies, and fun facts.</p>
85+
</div>
86+
<div class="zth-connector reveal"></div>
87+
<div class="zth-step reveal-left">
88+
<div class="zth-icon">⚡</div>
89+
<h4>3. Hardware Mastery</h4>
90+
<p>Understand how every single part of a computer actually works.</p>
91+
</div>
92+
</div>
6593
</div>
6694

67-
<div class="category-grid">
68-
<a href="pages/explore.html" class="cat-card">
69-
<div class="cat-icon">⚙️</div>
70-
<h3>Core Hardware</h3>
71-
<p>CPU, RAM, GPU, SSD, Motherboard...</p>
72-
</a>
73-
<a href="pages/operating-systems.html" class="cat-card">
74-
<div class="cat-icon">💻</div>
75-
<h3>Software &amp; OS</h3>
76-
<p>Windows, Linux, Android, iOS...</p>
95+
<!-- MASSIVE VISUAL CATEGORY CARDS -->
96+
<div class="section-header" style="margin-top: 40px;">
97+
<h2 style="font-size: 2.5rem;">Choose Your Domain</h2>
98+
<p style="font-size: 1.2rem;">Select a massive component below to begin your visual journey.</p>
99+
</div>
100+
101+
<div class="visual-category-grid">
102+
<a href="pages/cpu/index.html" class="v-cat-card reveal-left">
103+
<div class="v-cat-img-wrapper">
104+
<img src="images/cpu.jpg" alt="CPU Processor" class="v-cat-img" onerror="this.src='https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?auto=format&fit=crop&q=80&w=600';">
105+
<div class="v-cat-overlay"></div>
106+
</div>
107+
<div class="v-cat-content">
108+
<div class="v-cat-icon">⚙️</div>
109+
<h3>Core Hardware</h3>
110+
<p>Dive into CPUs, GPUs, RAM, and Motherboards. The physical engines of raw computing.</p>
111+
<span class="v-cat-btn">Explore Hardware →</span>
112+
</div>
77113
</a>
78-
<a href="pages/architecture.html" class="cat-card">
79-
<div class="cat-icon">🏛️</div>
80-
<h3>Systems Arch</h3>
81-
<p>Von Neumann, Bus, Logic, Pipelines...</p>
114+
115+
<a href="pages/operating-systems.html" class="v-cat-card reveal-scale">
116+
<div class="v-cat-img-wrapper">
117+
<img src="images/os.jpg" alt="Operating System" class="v-cat-img" onerror="this.src='https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=600';">
118+
<div class="v-cat-overlay"></div>
119+
</div>
120+
<div class="v-cat-content">
121+
<div class="v-cat-icon">💻</div>
122+
<h3>Software & OS</h3>
123+
<p>Windows, Linux, code execution, and how invisible software commands physical hardware.</p>
124+
<span class="v-cat-btn">Explore Software →</span>
125+
</div>
82126
</a>
83-
<a href="pages/history.html" class="cat-card">
84-
<div class="cat-icon">📜</div>
85-
<h3>History</h3>
86-
<p>Generations, Timelines, Evolution...</p>
127+
128+
<a href="pages/architecture.html" class="v-cat-card reveal">
129+
<div class="v-cat-img-wrapper">
130+
<img src="images/architecture.jpg" alt="System Architecture" class="v-cat-img" onerror="this.src='https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=600';">
131+
<div class="v-cat-overlay"></div>
132+
</div>
133+
<div class="v-cat-content">
134+
<div class="v-cat-icon">🏛️</div>
135+
<h3>System Architecture</h3>
136+
<p>Pipelines, Von Neumann design, and how data physically travels through the machine.</p>
137+
<span class="v-cat-btn">Explore Architecture →</span>
138+
</div>
87139
</a>
88140
</div>
89141

@@ -92,8 +144,40 @@ <h3>History</h3>
92144

93145
<div id="footer-placeholder"></div>
94146

147+
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
95148
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
96149
<script src="js/script.js"></script>
150+
<script>
151+
// Initialize Particles JS Background for Premium Feel
152+
document.addEventListener("DOMContentLoaded", function() {
153+
if(document.getElementById('particles-js')){
154+
particlesJS("particles-js", {
155+
"particles": {
156+
"number": { "value": 70, "density": { "enable": true, "value_area": 800 } },
157+
"color": { "value": "#60a5fa" },
158+
"shape": { "type": "circle" },
159+
"opacity": { "value": 0.4, "random": true, "anim": { "enable": true, "speed": 1, "opacity_min": 0.1, "sync": false } },
160+
"size": { "value": 3, "random": true, "anim": { "enable": true, "speed": 2, "size_min": 0.1, "sync": false } },
161+
"line_linked": { "enable": true, "distance": 150, "color": "#c084fc", "opacity": 0.4, "width": 1 },
162+
"move": { "enable": true, "speed": 1.5, "direction": "none", "random": true, "straight": false, "out_mode": "out", "bounce": false }
163+
},
164+
"interactivity": {
165+
"detect_on": "canvas",
166+
"events": {
167+
"onhover": { "enable": true, "mode": "grab" },
168+
"onclick": { "enable": true, "mode": "push" },
169+
"resize": true
170+
},
171+
"modes": {
172+
"grab": { "distance": 200, "line_linked": { "opacity": 0.8, "color": "#ec4899" } },
173+
"push": { "particles_nb": 4 }
174+
}
175+
},
176+
"retina_detect": true
177+
});
178+
}
179+
});
180+
</script>
97181
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
98182
</body>
99183
</html>

0 commit comments

Comments
 (0)