created and incorporated rateLimitedFunctionFactory

scripts/header.js

@@ -1,38 +1,40 @@
 (() => {
+  function rateLimitedFunctionFactory({ sideEffect, triggeredWhileLockedEffect, timeout = 300 }) {
+    let locked = false;
+
+    return () => {
+      if (!locked) {
+        locked = true;
+        setTimeout(() => {
+          locked = false;
+          sideEffect();
+        }, timeout);
+      } else if (triggeredWhileLockedEffect) {
+        triggeredWhileLockedEffect();
+      }
+    };
+  }
+
   function newMenuButton({ menuBtnElement }) {
-    const _nav = document.getElementsByTagName('nav')[0];
-    const _timeout = 300;
+    const _nav = document.querySelector('nav');
     const _maxMobileWidth = 500;
 
     const toggleNav = () => {
       _nav.classList.toggle('menu--open');
     };
 
-    (() => {
-      let locked = false;
-      let firedWhileLocked = false;
-
-      window.addEventListener('resize', () => {
-        if (!locked) {
-          locked = true;
-          if (parseInt(window.innerWidth, 10) > _maxMobileWidth) {
-            _nav.classList.remove('menu--open');
-          }
-          setTimeout(() => {
-            locked = false;
-            if (firedWhileLocked && parseInt(window.innerWidth, 10) > _maxMobileWidth) {
-              firedWhileLocked = false;
-              _nav.classList.remove('menu--open');
-            }
-          }, _timeout);
-        } else {
-          firedWhileLocked = true;
+    const conditionallyCloseMenu = rateLimitedFunctionFactory({
+      sideEffect: () => {
+        if (parseInt(window.innerWidth, 10) > _maxMobileWidth) {
+          _nav.classList.remove('menu--open');
         }
-      });
-    })();
+      },
+    });
 
     menuBtnElement.addEventListener('click', toggleNav);
+    window.addEventListener('resize', conditionallyCloseMenu);
   }
 
+
   newMenuButton({ menuBtnElement: document.querySelector('.menu-btn') });
 })();

scripts/profile.js

@@ -12,6 +12,22 @@ window.onclick = (event) => {
   }
 };
 
+function rateLimitedFunctionFactory({ sideEffect, triggeredWhileLockedEffect, timeout = 300 }) {
+  let locked = false;
+
+  return () => {
+    if (!locked) {
+      locked = true;
+      setTimeout(() => {
+        locked = false;
+        sideEffect();
+      }, timeout);
+    } else if (triggeredWhileLockedEffect) {
+      triggeredWhileLockedEffect();
+    }
+  };
+}
+
 class Profile {
   constructor(element) {
     this.element = element;
@@ -43,54 +59,6 @@ class Profile {
     this.close.addEventListener('click', () => {
       this.bioInfo.classList.remove('bio-toggle');
     });
-
-    (() => {
-      let lock = false;
-      let firedWhileLocked = false;
-
-      window.addEventListener('resize', () => {
-        const maxMobileWidth = 500;
-        if (!lock) {
-          lock = true;
-          setTimeout(() => {
-            lock = false;
-            if (firedWhileLocked && parseInt(window.innerWidth, 10) > maxMobileWidth) {
-              firedWhileLocked = false;
-              this.bioInfo.classList.remove('bio-toggle');
-            }
-          }, 250);
-          if (parseInt(window.innerWidth, 10) > maxMobileWidth) {
-            this.bioInfo.classList.remove('bio-toggle');
-          }
-        } else {
-          firedWhileLocked = true;
-        }
-      });
-    })();
-
-    (() => {
-      let modalLock = false;
-      let firedWhileLocked = false;
-
-      window.addEventListener('resize', () => {
-        const minTabletWidth = 500;
-        if (!modalLock) {
-          modalLock = true;
-          setTimeout(() => {
-            modalLock = false;
-            if (firedWhileLocked && parseInt(window.innerWidth, 10) <= minTabletWidth) {
-              firedWhileLocked = false;
-              modal.style.display = 'none';
-            }
-          }, 250);
-          if (parseInt(window.innerWidth, 10) <= minTabletWidth) {
-            modal.style.display = 'none';
-          }
-        } else {
-          firedWhileLocked = true;
-        }
-      });
-    })();
   }
 
   bioToggleMobile() {
@@ -104,3 +72,27 @@ class Profile {
 
 const profiles = document.querySelectorAll('.profile');
 profiles.forEach(profile => new Profile(profile));
+
+window.addEventListener('resize', rateLimitedFunctionFactory({
+  sideEffect: () => {
+    const minTabletWidth = 501;
+
+    if (parseInt(window.innerWidth, 10) < minTabletWidth) {
+      modal.style.display = 'none';
+    }
+  },
+}));
+
+const bios = document.querySelectorAll('.bio');
+
+window.addEventListener('resize', rateLimitedFunctionFactory({
+  sideEffect: () => {
+    const maxMobileWidth = 500;
+
+    if (parseInt(window.innerWidth, 10) > maxMobileWidth) {
+      bios.forEach((bio) => {
+        bio.classList.remove('bio-toggle');
+      });
+    }
+  },
+}));

scss/2-layouts/_about.scss

@@ -15,24 +15,28 @@
   }
 
   .modal-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: #fefefe;
-    margin: 15% auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 400px;
-    height: 500px;
-    border-radius: 15px;
-
-    img {
-      height: 250px;
-      width: 250px;
-    }
+    display: none;
+
+    @include tablet {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-color: #fefefe;
+      margin: 15% auto;
+      padding: 20px;
+      border: 1px solid #888;
+      width: 400px;
+      height: 500px;
+      border-radius: 15px;
+
+      img {
+        height: 250px;
+        width: 250px;
+      }
 
-    .modal-bio {
-      font-size: 1.5rem;
+      .modal-bio {
+        font-size: 1.5rem;
+      }
     }
   }
 
@@ -108,7 +112,7 @@
           font-size: 2.5rem;
           font-weight: lighter;
         }
-      
+
         @include desktop {
           font-size: 2.9rem;
           font-weight: lighter;
@@ -126,11 +130,14 @@
           font-size: 3rem;
         }
 
-
       }
 
       .bio-toggle {
         display: block;
+
+        @include tablet {
+          display: none;
+        }
       }
     }
   }