meow

css/main.css

@@ -1696,6 +1696,117 @@ body:has(.waka) {
   margin: 1.4rem 0 0;
 }
 
+/* ---- collapsible dropdown sections (details/summary) ---- */
+details.waka-section {
+  /* keep the card padding tight when collapsed; expands via [open] below */
+  padding-bottom: 1.15rem;
+  transition: padding-bottom 0.15s ease;
+}
+
+details.waka-section[open] {
+  padding-bottom: 1.35rem;
+}
+
+/* The clickable header row */
+summary.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  margin-bottom: 0;
+  transition: margin-bottom 0.15s ease, color 0.15s ease;
+}
+
+/* Hide the native disclosure triangle (both engines) */
+summary.section-title::-webkit-details-marker {
+  display: none;
+}
+
+summary.section-title::marker {
+  content: "";
+}
+
+summary.section-title:hover {
+  color: rgb(var(--accent-rgb));
+}
+
+summary.section-title:focus-visible {
+  outline: 2px solid rgb(var(--accent-rgb));
+  outline-offset: 3px;
+  border-radius: 6px;
+}
+
+/* Custom chevron that flips when the section is open */
+summary.section-title::after {
+  content: "";
+  flex: none;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-right: 0.15rem;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(45deg);
+  transition: transform 0.2s ease;
+}
+
+details.waka-section[open] > summary.section-title {
+  margin-bottom: 1rem;
+}
+
+details.waka-section[open] > summary.section-title::after {
+  transform: rotate(-135deg);
+}
+
+/* Tech-stack icons sit inside a collapsible card now: drop the big
+   page-bottom padding the standalone .dev-info block used. */
+.tech-stack .dev-info {
+  padding-bottom: 0;
+  justify-content: flex-start;
+}
+
+/* ---- hardware spec list ---- */
+.hw-intro {
+  margin: 0 0 0.9rem;
+  font-size: 0.8rem;
+  color: var(--subtext-0);
+}
+
+.hw-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  margin: 0;
+}
+
+.hw-row {
+  display: grid;
+  grid-template-columns: 8rem 1fr;
+  gap: 0.7rem;
+  align-items: baseline;
+}
+
+.hw-row dt {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--subtext-0);
+}
+
+.hw-row dd {
+  margin: 0;
+  font-size: 0.88rem;
+  color: var(--text);
+}
+
+@media (max-width: 560px) {
+  .hw-row {
+    grid-template-columns: 6rem 1fr;
+  }
+}
+
 
 /* ============================================================
    14. TERMINAL HOMEPAGE  (+ 88x31 button wall)

dev-info/index.html

@@ -100,6 +100,8 @@
             <p class="waka-meta" id="waka-meta" hidden></p>
         </header>
 
+        <details class="waka-section tech-stack" id="tech-stack">
+            <summary class="section-title">Tech Stack</summary>
             <section class="dev-info" aria-label="Tech stack">
             <span class="tech-icon pink" style="--si:url('https://cdn.simpleicons.org/javascript')" role="img"
                 aria-label="JavaScript"></span>
@@ -189,7 +191,65 @@
                 aria-label="Raspberry Pi"></span>
             <span class="tech-icon blue" style="--si:url('https://cdn.simpleicons.org/vscodium')" role="img"
                 aria-label="VSCodium"></span>
+                <span class="tech-icon teal" style="--si:url('https://cdn.simpleicons.org/css')" role="img"
+                aria-label="CSS"></span>
             </section>
+        </details>
+
+        <details class="waka-section hardware" id="waka-section-hardware">
+            <summary class="section-title">Hardware</summary>
+            <p class="hw-intro">This is the beast setup I daily-drive. ✨</p>
+            <dl class="hw-list">
+                <div class="hw-row">
+                    <dt>CPU</dt>
+                    <dd>AMD Ryzen 9 9950x3d 4.3 GHz 16-Core Processor</dd>
+                </div>
+                <div class="hw-row">
+                    <dt>GPU</dt>
+                    <dd>XFX Speedster MERC 310 Black Edition Radeon RX 7900 XTX 24 GB Video Card</dd>
+                </div>
+                <div class="hw-row">
+                    <dt>RAM</dt>
+                    <dd>Corsair Vengeance 64 GB (2 x 32 GB) DDR5-6000 CL40 Memory</dd>
+                </div>
+                <div class="hw-row">
+                    <dt>Storage</dt>
+                    <dd>2x 1 TB NVMe + 10TB HDD</dd>
+                </div>
+                <div class="hw-row">
+                    <dt>Motherboard</dt>
+                    <dd>Gigabyte B850M AORUS ELITE WIFI6E ICE Micro ATX AM5 Motherboard</dd>
+                </div>
+                <div class="hw-row">
+                    <dt>Cooling</dt>
+                    <dd>Thermalright Aqua Elite V3 66.17 CFM Liquid CPU Cooler</dd>
+                </div>
+                <div class="hw-row">
+                    <dt>Keyboard</dt>
+                    <dd>Akko Sakura Miku 5108B Plus</dd>
+                </div>
+                <div class="hw-row">
+                    <dt>Mouse</dt>
+                    <dd>Logitech G502 X Gaming Lightspeed Wireless</dd>
+                </div>
+                <div class="hw-row">
+                    <dt>Monitor(s)</dt>
+                    <dd>Gigabyte G34WQCP 34.0" 3440 x 1440 180 Hz Curved Monitor</dd>
+                </div>
+                <div class="hw-row">
+                    <dt>Headphones</dt>
+                    <dd>Yowu  Cat Ear Headphones Hatsune Miku NX</dd>
+                </div>
+                <div class="hw-row">
+                    <dt>Microphone</dt>
+                    <dd>Aokeo AK-60 USB Microphone</dd>
+                </div>
+                <div class="hw-row">
+                    <dt>OS</dt>
+                    <dd>Arch Linux | Windows 11</dd>
+                </div>
+            </dl>
+        </details>
 
         <div id="contrib"></div>
 
@@ -201,26 +261,26 @@
                 <div class="waka-week" id="waka-week"></div>
             </section>
 
-            <section class="waka-section" id="waka-section-languages" hidden>
+            <details class="waka-section" id="waka-section-languages" hidden>
-                <h2 class="section-title">Languages</h2>
+                <summary class="section-title">Languages</summary>
                 <div class="waka-bars" id="waka-languages"></div>
-            </section>
+            </details>
 
-            <section class="waka-section" id="waka-section-categories" hidden>
+            <details class="waka-section" id="waka-section-categories" hidden>
-                <h2 class="section-title">Categories</h2>
+                <summary class="section-title">Categories</summary>
                 <div class="waka-bars" id="waka-categories"></div>
-            </section>
+            </details>
 
             <div class="waka-grid2">
-                <section class="waka-section" id="waka-section-editors" hidden>
+                <details class="waka-section" id="waka-section-editors" hidden>
-                    <h2 class="section-title">Editors</h2>
+                    <summary class="section-title">Editors</summary>
                     <div class="waka-bars" id="waka-editors"></div>
-                </section>
+                </details>
 
-                <section class="waka-section" id="waka-section-os" hidden>
+                <details class="waka-section" id="waka-section-os" hidden>
-                    <h2 class="section-title">Operating Systems</h2>
+                    <summary class="section-title">Operating Systems</summary>
                     <div class="waka-bars" id="waka-os"></div>
-                </section>
+                </details>
             </div>
 
             <p class="waka-credit">Tracked automatically with <a href="https://wakatime.com" target="_blank"