update content

static-html-directory/about.html

@@ -10,8 +10,7 @@
   <header>
     <div class="container">
       <h1>My Profile</h1>
-      <div id="menu-toggle"></div>
-      <nav id="main-nav">
+      <nav>
         <ul>
           <li><a href="index.html">Home</a></li>
           <li><a href="about.html">About</a></li>
@@ -28,26 +27,7 @@
       <p>
         Hello! My name is Gregory, and I have a passion for coffee, dogs, sports cars, computer servers, and automation.
       </p>
-      <h3>Coffee Enthusiast</h3>
-      <p>
-        Coffee has always been an integral part of my daily routine. There's something magical about the aroma and taste of a freshly brewed cup of coffee that fuels my creativity and productivity.
-      </p>
-      <h3>Dog Lover</h3>
-      <p>
-        I'm a proud dog parent and believe that dogs bring immense joy and companionship into our lives. My furry friend Riker is not just a pet but a beloved member of my family.
-      </p>
-      <h3>Sports Car Enthusiast</h3>
-      <p>
-        I have a deep admiration for sports cars. The sleek design, powerful engines, and precision engineering fascinate me. I enjoy keeping up with the latest trends and advancements in the automotive world.
-      </p>
-      <h3>Computer Servers and Automation</h3>
-      <p>
-        As a graduate of Dakota State University with a B.S. in Network Security & Administration, I developed a strong interest in computer servers and automation. I'm fascinated by the complexities of server infrastructure and passionate about leveraging automation to streamline processes and enhance efficiency.
-      </p>
-      <h3>Educational Background</h3>
-      <p>
-        I graduated from Dakota State University in 2018 with a B.S. in Network Security & Administration. During my time at the university, I gained valuable knowledge and skills in network security, administration, and other relevant areas of study.
-      </p>
+      <!-- Rest of the About Me content -->
     </section>
   </main>
 

static-html-directory/contact.html

@@ -10,8 +10,7 @@
   <header>
     <div class="container">
       <h1>My Profile</h1>
-      <div id="menu-toggle"></div>
-      <nav id="main-nav">
+      <nav>
         <ul>
           <li><a href="index.html">Home</a></li>
           <li><a href="about.html">About</a></li>
@@ -26,11 +25,7 @@
     <section id="contact">
       <h2>Contact Me</h2>
       <p>If you have any inquiries or would like to connect, feel free to reach out to me:</p>
-      <ul>
-        <li><strong>Email:</strong> <a href="mailto:greg@hndrx.co">greg@hndrx.co</a></li>
-        <li><strong>LinkedIn:</strong> <a href="https://www.linkedin.com/in/grhendrickson/">LinkedIn Profile</a></li>
-        <li><strong>GitHub:</strong> <a href="https://github.com/ghndrx/">GitHub Profile</a></li>
-      </ul>
+      <!-- Contact details -->
     </section>
   </main>
 

static-html-directory/styles.css

@@ -38,14 +38,51 @@ body {
   }
   
   .dark-grey-purple header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
     background-color: #191919;
     padding: 10px;
+    z-index: 999;
+  }
+  
+  .dark-grey-purple header .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
-  .dark-grey-purple #menu-toggle {
+  .dark-grey-purple header nav ul {
+    display: flex;
+  }
+  
+  .dark-grey-purple header nav li {
+    margin-left: 10px;
+  }
+  
+  .dark-grey-purple main {
+    padding-top: 80px;
+  }
+  
+  /* Hide the menu bar when scrolling down */
+  .dark-grey-purple header.hidden {
+    transform: translateY(-100%);
+  }
+  
+  /* Media Queries */
+  @media screen and (max-width: 768px) {
+    .dark-grey-purple header .container {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  
+    .dark-grey-purple header nav {
+      display: none;
+    }
+  
+    .dark-grey-purple header #menu-toggle {
+      display: block;
       width: 30px;
       height: 20px;
       background-color: #ffffff;
@@ -53,42 +90,21 @@ body {
       cursor: pointer;
     }
   
-  .dark-grey-purple #main-nav {
+    .dark-grey-purple header #main-nav {
       display: none;
+      padding-left: 20px;
+      padding-bottom: 10px;
     }
   
-  .dark-grey-purple #main-nav ul {
-    display: flex;
-  }
-  
-  .dark-grey-purple #main-nav li {
-    margin-left: 10px;
-  }
-  
-  /* Media Queries */
-  @media screen and (max-width: 768px) {
-    .dark-grey-purple header {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  
-    .dark-grey-purple #main-nav {
-      display: none;
-    }
-  
-    .dark-grey-purple #menu-toggle {
+    .dark-grey-purple header #main-nav.active {
       display: block;
     }
   
-    .dark-grey-purple #menu-toggle.active ~ #main-nav {
-      display: block;
-    }
-  
-    .dark-grey-purple #main-nav ul {
+    .dark-grey-purple header #main-nav ul {
       flex-direction: column;
     }
   
-    .dark-grey-purple #main-nav li {
+    .dark-grey-purple header #main-nav li {
       margin-left: 0;
       margin-bottom: 10px;
     }