Feature/navbar update

css/dropdown.css

@@ -0,0 +1,125 @@
+/* ===== Dropdown Base ===== */
+.dropdown {
+    position: relative;
+}
+
+.dropdown-toggle {
+    cursor: pointer;
+    display: inline-block;
+}
+
+/* Dropdown menu hidden by default */
+.dropdown-menu {
+    display: none;
+    position: absolute;
+    background-color: #333;
+    top: 100%;
+    left: 0;
+    min-width: 180px;
+    border-radius: 6px;
+    padding: 10px 0;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+}
+
+/* Dropdown menu links */
+.dropdown-menu li {
+    list-style: none;
+}
+
+.dropdown-menu a {
+    display: block;
+    color: #fff;
+    padding: 8px 16px;
+    text-decoration: none;
+    transition: background 0.3s;
+}
+
+.dropdown-menu a:hover {
+    background-color: #444;
+}
+
+/* Arrow indicator (base) */
+.dropdown-toggle::after {
+    content: "▾";
+    display: inline-block;
+    margin-left: 6px;
+    transition: transform 0.3s ease;
+}
+
+/* Rotate arrow upward when open */
+.dropdown.open .dropdown-toggle::after {
+    transform: rotate(180deg);
+}
+
+/* ===== Desktop Hover Dropdown ===== */
+@media (min-width: 769px) {
+    .dropdown:hover .dropdown-menu {
+        display: block;
+    }
+
+    .dropdown-menu {
+        position: absolute;
+        background: #333;
+        padding: 0.5rem 1rem;
+        border-radius: 5px;
+        z-index: 100;
+    }
+}
+
+/* ===== Mobile Dropdown and Hamburger ===== */
+@media (max-width: 768px) {
+    .nav-links {
+        flex-direction: column;
+        display: none;
+    }
+
+    .nav-links.active {
+        display: flex;
+    }
+
+    .hamburger {
+        display: block;
+        font-size: 28px;
+        cursor: pointer;
+    }
+
+    .dropdown-menu {
+        position: static;
+        /* Prevents overlap */
+        background: #333;
+        padding-left: 16px;
+        border-radius: 5px;
+        width: 100%;
+        overflow: hidden;
+        max-height: 0;
+        transition: max-height 0.3s ease;
+    }
+
+    .dropdown.open .dropdown-menu {
+        max-height: 500px;
+        /* Adjust as needed */
+    }
+
+    .dropdown-toggle {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+    }
+
+    .dropdown-toggle::after {
+        content: "▾";
+        margin-left: 8px;
+        transition: transform 0.3s;
+    }
+
+    .dropdown.open .dropdown-toggle::after {
+        transform: rotate(180deg);
+    }
+
+    .dropdown-menu li a {
+        display: block;
+        padding: 8px 0;
+    }
+}

css/main.css

@@ -66,30 +66,6 @@
   text-align: center;
 }
 
-/* ===================================================
-   ===== Teck Stack Section =====
-=================================================== */
-#tech-stack {
-  text-align: center;
-  /* height: 20vh; */
-}
-
-.tech-stack .btn {
-  display: inline-block;
-  padding: 12px 25px;
-  border-radius: 30px;
-  background: #ff9800;
-  color: #fff;
-  text-decoration: none;
-  font-weight: bold;
-  transition: background 0.3s, transform 0.3s;
-}
-
-.tech-stack .btn:hover {
-  background: #e68900;
-  transform: translateY(-3px);
-}
-
 /* ===================================================
    ===== Skills Section =====
 =================================================== */
@@ -151,6 +127,44 @@
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
 }
 
+/* ===================================================
+   ===== Teck Stack Section =====
+=================================================== */
+#portfolio {
+  text-align: center;
+  /* height: 20vh; */
+}
+
+.portfolio .btn {
+  display: inline-block;
+  padding: 12px 25px;
+  border-radius: 30px;
+  background: #ff9800;
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  transition: background 0.3s, transform 0.3s;
+}
+
+.portfolio .btn:hover {
+  background: #e68900;
+  transform: translateY(-3px);
+}
+
+.portfolio-card {
+  background: rgba(179, 105, 105, 0.3);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 20px;
+  margin: 20px 0;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+body.dark .portfolio-card {
+  background-color: #467db4;
+  color: #000;
+}
+
 /* ===================================================
    ===== Dark Mode =====
 =================================================== */
@@ -245,7 +259,7 @@ body.dark #darkModeToggle:hover {
 
 /* Hover effect for interactivity */
 .visitor-count:hover {
-  transform: translateY(-3px);
+  transform: translateY(-10px);
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), 0 0 30px rgba(255, 87, 34, 0.2);
   /* stronger glow on hover */
 }

index.html

@@ -4,14 +4,15 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vimal Tech - Portfolio</title>
+  <title>Vimal Tech</title>
   <!-- Favicon -->
   <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
   <!-- Main Stylesheet -->
   <link rel="stylesheet" href="/css/main.css">
   <link rel="stylesheet" href="/css/common.css">
+  <link rel="stylesheet" href="/css/dropdown.css">
   <link rel="stylesheet" href="/css/mini-services.css">
   <link rel="stylesheet" href="/css/whatsapp-floating.css">
   <!-- Font Awesome -->
@@ -42,11 +43,19 @@
     <ul class="nav-links" id="nav-links">
       <li><a href="#hero" class="active">Home</a></li>
       <li><a href="#about">About</a></li>
-      <li><a href="#tech-stack">Tech Stack</a></li>
-      <li><a href="#services-preview">Services-Preview</a></li>
-      <li><a href="#visitor-counter">Visitor-Counter</a></li>
-      <li><a href="#skills">Skills</a></li>
-      <li><a href="#projects">Projects</a></li>
+      <li><a href="#services-preview">Offering</a></li>
+      <!-- <li><a href="#visitor-counter">Visitor-Counter</a></li> -->
+
+      <!-- Dropdown Section -->
+      <li class="dropdown">
+        <a href="#" class="dropdown-toggle">Expertise</a>
+        <ul class="dropdown-menu">
+          <li><a href="#skills">Skills</a></li>
+          <li><a href="#projects">Projects</a></li>
+          <li><a href="#portfolio">Portfolio</a></li>
+        </ul>
+      </li>
+
       <li><a href="services.html">Services</a></li> <!-- New Services link -->
       <li><a href="#contact">Contact</a></li>
     </ul>
@@ -77,12 +86,6 @@ <h2>About Me</h2>
     </p>
   </section>
 
-  <!-- Tech Stack Section -->
-  <section id="tech-stack" class="container fade-in tech-stack">
-    <h2>Tech Stack Dashboard</h2>
-    <a href="https://vimal-java-dev.github.io/" target="_blank" class="btn">Tap to read Overview</a>
-  </section>
-
   <!-- Mini Services Preview Section -->
   <section id="services-preview" class="container fade-in">
     <h2>Services I Offer I Preview</h2>
@@ -113,7 +116,6 @@ <h3>Project Consulting</h3>
 
     <div class="services-preview" style="margin-top:20px; margin-bottom:10px">
       <a href="services.html" target="_blank" class="btn">View All Services</a><br /><br />
-      <a href="https://alexfoodcorner.netlify.app/" target="_blank" class="btn">Alex Food Corner Live Project</a>
     </div>
   </section>
 
@@ -237,6 +239,14 @@ <h3>Desktop Chat Application (Local Area Network)</h3>
     </div>
   </section><br />
 
+  <!-- Portfolio Section -->
+  <section id="portfolio" class="container fade-in portfolio counter-container">
+    <div class="portfolio-card">
+      <h2>Portfolio</h2>
+      <a href="https://vimal-java-dev.github.io/" target="_blank" class="btn">Tap to read Overview</a>
+    </div>
+  </section>
+
   <!-- Contact Section -->
   <section id="contact" class="container fade-in">
     <h2>Contact Me</h2>
@@ -273,6 +283,7 @@ <h2>Contact Me</h2>
   <script src="/js/common.js"></script>
   <script type="module" src="/js/visitorCounter.js"></script>
   <script src="/js/main.js"></script>
+  <script src="/js/dropdown.js"></script>
 </body>
 
 </html>

js/common.js

@@ -34,7 +34,6 @@ document.addEventListener("DOMContentLoaded", () => {
         hamburger.textContent = "☰";
       }
     });
-
   }
 
   /* ============================
@@ -111,4 +110,47 @@ document.addEventListener("DOMContentLoaded", () => {
       });
     });
   }
+
+  // Dropdown toggle for Desktop
+  const dropdownToggles = document.querySelectorAll(".dropdown-toggle");
+
+  dropdownToggles.forEach(toggle => {
+    toggle.addEventListener("click", (e) => {
+      e.preventDefault();
+      const parent = toggle.parentElement;
+      parent.classList.toggle("open");
+
+      const menu = parent.querySelector(".dropdown-menu");
+      if (menu) {
+        menu.style.display = menu.style.display === "block" ? "none" : "block";
+      }
+    });
+  });
+
+  // Ensure all dropdowns are closed on page load (prevents an open menu after refresh)
+  function resetDropdowns() {
+    const dropdowns = document.querySelectorAll(".dropdown");
+    dropdowns.forEach(drop => {
+      drop.classList.remove("open");
+      const menu = drop.querySelector(".dropdown-menu");
+      if (menu) menu.style.display = "none";
+    });
+  }
+
+  // Close dropdown when clicking outside
+  document.addEventListener("click", (e) => {
+    const isDropdownToggle = e.target.matches(".dropdown-toggle");
+    const dropdown = e.target.closest(".dropdown");
+
+    document.querySelectorAll(".dropdown").forEach(drop => {
+      const menu = drop.querySelector(".dropdown-menu");
+
+      // If clicked outside this dropdown, close it
+      if (drop !== dropdown && menu) {
+        drop.classList.remove("open");
+        menu.style.display = "none";
+      }
+    });
+  });
+
 });