made the resume better (is collpased by default,

and can be expanded)

assets/css/style.css

@@ -682,6 +682,45 @@ section {
     display: flex;
     flex-direction: column;
     align-items: center;
+    overflow: visible;
+}
+
+.resume-content {
+    max-height: 110vh;
+    overflow-y: hidden;
+}
+
+.resume-content.expanded {
+    display:block;
+    max-height: none;
+    overflow-y: visible;
+}
+
+.resume-fade {
+    position: absolute;
+    display:flex;
+    justify-content: center;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    background: linear-gradient(to bottom, transparent, var(--background) 50%);
+    pointer-events: none;
+}
+
+.resume-fade.expanded {
+    background: var(--background);
+}
+
+.resume-btn {
+    position: absolute;
+    bottom: 0;
+    font-size: 1em !important;
+
+    border: none;
+    text-align: center;
+    z-index: 100;
+    box-shadow: none !important;
+    pointer-events: auto;
 }
 
 .resume .resume-title {
@@ -694,7 +733,7 @@ section {
 
 .resume .resume-item {
     padding: 0 0 20px 20px;
-    margin-top: -2px;
+    margin-left: 8px;
     border-left: 2px solid var(--resume-border);
     position: relative;
 }

assets/js/main.js

@@ -161,6 +161,19 @@
     true
   );
 
+  on("click", "#resume-toggle", e => {
+      console.log("sup")
+      const sec = select("#resume-section");
+      const btn = e.target;
+      sec.classList.toggle("expanded");
+      select(".resume-fade").classList.toggle("expanded");
+      if (sec.classList.contains("expanded"))
+          btn.innerHTML = 'Hide <i class="bi bi-chevron-up"></i>';
+      else
+          btn.innerHTML = 'Expand <i class="bi bi-chevron-down"></i>';
+      AOS.refresh();
+  })
+
   /**
    * Scroll with ofset on page load with hash links in the url
    */

index.html

@@ -442,10 +442,12 @@
                         </div>
                     </div>
 
-                    <div class="col-lg-6">
+                        <div class=" col-lg-6">
 
                             <div data-aos="fade-up-left">
                                 <h3 class="resume-title">Professional Experience</h3>
+                                <div class="resume-content" id="resume-section">
+                                    <div>
                                         <div class="resume-item">
                                             <h4>Research Lab Assistant</h4>
                                             <h5>August 2024 - June 2024</h5>
@@ -509,7 +511,8 @@
                                         </div>
                                     </div>
 
-                        <div class="resume-item">
+                                    <div>
+                                    <div class="resume-item" data-aos="fade-up">
                                         <h4>UROP</h4>
                                         <h5>Summer 2023</h5>
                                         <p><em>Internship at Università della Svizzera Italiana, Lugano, CH</em></p>
@@ -534,6 +537,7 @@
                                             </ul>
                                         </p>
                                     </div>
+                                    </div>
 
                                     <div class="resume-item" data-aos="fade-up">
                                         <h4>Front-end Intern</h4>
@@ -572,6 +576,12 @@
                                             </ul>
                                         </p>
                                     </div>
+
+                                    <div class="resume-fade">
+                                        <button id="resume-toggle" class="btn resume-btn">Expand <i class="bi bi-chevron-down"></i></button>
+                                        </div>
+                                </div>
+                            </div>
                         </div>
                     </div>