interest drop down button

static/about.html

@@ -88,10 +88,8 @@
 
       <div style="flex: 1;"></div>
     </aside>
-
     <main id="about">
-
-      <div class="hero">
+      <section class="hero">
         <p class="hero-eyebrow">About Me · 2026</p>
         <h1>Samantha<br><span>Vero Friis</span>
         </h1>
@@ -104,8 +102,7 @@
           <span>samantha42.xyz</span>
           <span>me@samantha42.xyz</span>
         </div>
-      </div>
-
+      </section>
       <section id="experience">
         <div class="section-head">
           <h2>experience</h2>
@@ -133,7 +130,6 @@
           </div>
         </div>
       </section>
-
       <section id="education">
         <div class="section-head">
           <h2>education</h2>
@@ -168,7 +164,6 @@
           </div>
         </div>
       </section>
-
       <section id="opinion">
         <div class="section-head">
           <h2>opinion</h2>
@@ -179,10 +174,6 @@
           <a class="opinion-link" href="/infra">infra</a>
         </div>
       </section>
-
-
-      <section>
-
         <section id="automation">
           <div class="page-header">
             <h2 class="page-title">Technical Tools & Automation</h2>
@@ -233,8 +224,6 @@
             </div>
           </div>
         </section>
-        <br>
-
         <section id="research">
           <div class="page-header">
             <h2 class="page-title">Equity Research</h2>
@@ -282,11 +271,14 @@
           </div>
           <br>
         </section>
-        <br>
-
         <section id="interests">
+
           <div class="page-header">
-            <h2 class="page-title" id="interest">interests</h2>
+            <h2 class="page-title" id="interest">
+              interests 
+              <button onclick="toggleInterests()" class="">open</button>
+            </h2>
+
             <span class="page-sub" id="interest-sub">Fav lists</span>
             <span class="matrix-hidden" id="matrix-hidden">
               Boy: Do not try and bend the spoon. That's impossible. Instead... only try to realize the truth.
@@ -296,7 +288,9 @@
               Boy: There is no spoon.
             </span>
           </div>
-          <div class="section-head">
+          <div id="interests-body" class="hidden">
+          
+            <div class="section-head">
             <h2>Movie/Show Top list</h2>
           </div>
           <div class="toplist-group">
@@ -427,10 +421,9 @@
               </div>
 
             </div>
+          </div>
         </section>
-  </div>
-  </section>
-  </main>
+    </main>
   </div>
 
   <footer>

static/about.js

@@ -50,4 +50,19 @@ function closeOverlay() {
 // or toggle it from anywhere:
 function openOverlay() {
   document.getElementById('overlay').style.display = 'flex';
-}
+}
+
+function InterestShow() {
+      const body = document.getElementById('interests-body');
+      const chevron = document.getElementById('interests-chevron');
+      chevron.classList.add("hidden")
+      body.classList.remove("hidden")
+      chevron.textContent = hidden ? '▶' : '▼';
+    }
+
+    function toggleInterests() {
+      const body = document.getElementById('interests-body');
+      const chevron = document.getElementById('interests-chevron');
+      const hidden = body.classList.toggle('hidden');
+      chevron.textContent = hidden ? '▶' : '▼';
+      }

static/style/styles2.css

@@ -617,4 +617,8 @@ button {
 
 button:hover {
   border:1px solid rgb(26, 87, 219);
+}
+
+.hidden {
+  display: none;
 }