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
    */