add side menu to homepage

Author: noahbaculi

index.html

@@ -226,9 +226,118 @@ <h1 class="home_entrance_title">
         </div>
       </header>
       <!-- Header -->
-      <header id="header"></header>
+      <header id="header">
+        <div class="inner">
+          <!-- Nav -->
+          <nav>
+            <ul>
+              <li><a href="#menu">Menu</a></li>
+            </ul>
+          </nav>
+        </div>
+      </header>
       <!-- Menu -->
-      <nav id="menu" class="home-menu"></nav>
+      <nav id="menu">
+        <div class="inner">
+          <h2>Menu</h2>
+          <ul>
+            <li><a href="index.html" class="index">Home</a></li>
+            <li class="dropdown_row">
+              <a href="portfolio.html" class="portfolio">Portfolio</a>
+              <div class="dropdown">
+                <img
+                  srcset="./images/icons/icon_drop_down_50_w.webp 1000w"
+                  sizes="1.125em"
+                  loading="lazy"
+                  decoding="async"
+                  src="./images/icons/icon_drop_down.png"
+                  class="dropdown_icon"
+                  alt="Dropdown"
+                />
+                <div class="dropdown-content">
+                  <div class="dropdown-container">
+                    <!-- <a href="portfolio-enterprisedb.html">EnterpriseDB</a> -->
+                    <a href="portfolio-carium.html">Carium</a>
+                    <a href="portfolio-aldras.html">Aldras</a>
+                    <a href="portfolio-asme.html">ASME</a>
+                    <a href="portfolio-trane.html">Trane</a>
+                    <a href="portfolio-itw.html">ITW</a>
+                    <a href="portfolio-caffinator.html">Caffinator</a>
+                    <a href="portfolio-nanofluidics.html">Nanofluidics</a>
+                    <a href="portfolio-sciencecamp.html">Science Camp</a>
+                  </div>
+                  <br />
+                </div>
+              </div>
+            </li>
+            <li class="dropdown_row">
+              <a href="about.html" class="about">About</a>
+              <div class="dropdown">
+                <img
+                  srcset="./images/icons/icon_drop_down_50_w.webp 1000w"
+                  sizes="1.125em"
+                  loading="lazy"
+                  decoding="async"
+                  src="./images/icons/icon_drop_down.png"
+                  class="dropdown_icon"
+                  alt="Dropdown"
+                />
+                <div class="dropdown-content">
+                  <div class="dropdown-container">
+                    <a href="about-learning.html" class="learning">Learning</a>
+                    <a href="about-music.html" class="music">Music</a>
+                    <a href="about-swim.html" class="swim">Swim</a>
+                    <a href="about-travel.html" class="travel">Travel</a>
+                  </div>
+                  <br />
+                </div>
+              </div>
+            </li>
+            <li><a href="contact.html" class="contact">Contact</a></li>
+            <li style="padding-top: 3em">Projects</li>
+            <li>
+              <a href="./guitartab.html" target="_blank" class="project_item"
+                >🎸 Guitar Tab Generator</a
+              >
+            </li>
+            <li>
+              <a href="./portfolio-pet-feeder.html" class="project_item"
+                >🐈 Automatic Pet Feeder</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://aldras.netlify.app/"
+                target="_blank"
+                class="project_item"
+                >🖥️ Aldras Automation</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://salesforcegalaxy.com/"
+                target="_blank"
+                class="project_item"
+                >☁️ Salesforce Galaxy</a
+              >
+            </li>
+            <li>
+              <a href="./doc-tool.html" target="_blank" class="project_item"
+                >📄 Document Modifier</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://magspics.com/"
+                target="_blank"
+                class="project_item"
+                >📷 Maggie Photo Portfolio</a
+              >
+            </li>
+          </ul>
+        </div>
+        <a class="close" href="#menu">Close</a>
+      </nav>
       <!-- Main -->
       <div id="main" style="padding-bottom: 3em">
         <div class="inner">