From 52cc0abef100f3df9868c69b0b9d8096158efd8b Mon Sep 17 00:00:00 2001
From: vimal-tech-dev <be08it929@gmail.com>
Date: Wed, 15 Jul 2026 03:38:43 +0530
Subject: [PATCH] Fix: Added portfolio link to navbar and footer (Issue #98)

Signed-off-by: vimal-tech-dev <be08it929@gmail.com>
---
 aboutUs/index.html    |   5 +-
 contactUs/index.html  |   2 +
 css/index.css         |   2 +-
 css/latest-works.css  |   2 +-
 css/portfolio-btn.css |  71 -----
 css/portfolio.css     | 665 +++++++++++++++++++++++++-----------------
 expertise/index.html  |  15 +-
 index.html            |  20 +-
 js/portfolio-btn.js   |  27 --
 js/portfolio.js       |  11 +
 portfolio/index.html  | 645 +++++++++++++++++++++++++++++++---------
 services/index.html   |   7 +-
 12 files changed, 941 insertions(+), 531 deletions(-)
 delete mode 100644 css/portfolio-btn.css
 delete mode 100644 js/portfolio-btn.js
 create mode 100644 js/portfolio.js

diff --git a/aboutUs/index.html b/aboutUs/index.html
index e82f603..ec38538 100644
--- a/aboutUs/index.html
+++ b/aboutUs/index.html
@@ -149,6 +149,7 @@
         <ul class="nav-links" id="nav-links">
             <li><a href="/">Home</a></li>
             <li><a href="/services">Services</a></li>
+            <li><a href="/portfolio">Portfolio</a></li>
             <li><a href="/expertise">Expertise</a></li>
             <li><a href="/aboutUs" class="active">About Us</a></li>
             <li><a href="/contactUs">Contact</a></li>
@@ -287,8 +288,7 @@ <h2 class="cta-title">Our Mission</h2>
                 preferred technology partner for small to medium enterprises looking to scale their digital presence
                 with confidence.
             </p>
-            <a href="/contactUs" class="open-modal-btn btn glow-btn">Partner With Us Today <i class="fas fa-arrow-right"
-                    style="margin-left:8px;"></i></a>
+            <a href="/contactUs/#contactForm" class="open-modal-btn btn glow-btn">Partner With Us Today <i class="fas fa-arrow-right" style="margin-left:8px;"></i></a>
         </div>
     </section>
 
@@ -384,6 +384,7 @@ <h3>
                 <ul class="quick-links-list">
                     <li><a href="/">Home<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/services">Services<i class="fas fa-angle-left"></i></a></li>
+                    <li><a href="/portfolio">Portfolio<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/expertise">Expertise<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/aboutUs">About Us<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/contactUs">Contact<i class="fas fa-angle-left"></i></a></li>
diff --git a/contactUs/index.html b/contactUs/index.html
index b4251be..7a15a3c 100644
--- a/contactUs/index.html
+++ b/contactUs/index.html
@@ -135,6 +135,7 @@
         <ul class="nav-links" id="nav-links">
             <li><a href="/">Home</a></li>
             <li><a href="/services">Services</a></li>
+            <li><a href="/portfolio">Portfolio</a></li>
             <li><a href="/expertise">Expertise</a></li>
             <li><a href="/aboutUs">About Us</a></li>
             <li><a href="/contactUs" class="active">Contact</a></li>
@@ -415,6 +416,7 @@ <h3>
                 <ul class="quick-links-list">
                     <li><a href="/">Home<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/services">Services<i class="fas fa-angle-left"></i></a></li>
+                    <li><a href="/portfolio">Portfolio<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/expertise">Expertise<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/aboutUs">About Us<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/contactUs">Contact<i class="fas fa-angle-left"></i></a></li>
diff --git a/css/index.css b/css/index.css
index d11edc3..afce9ed 100644
--- a/css/index.css
+++ b/css/index.css
@@ -47,7 +47,7 @@ body.dark .alt-bg {
 
 /* ===== GLASS PANEL (For Experience Section) ===== */
 .glass-panel {
-  background: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.4);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.5);
   border-radius: 24px;
diff --git a/css/latest-works.css b/css/latest-works.css
index a209a3c..7159818 100644
--- a/css/latest-works.css
+++ b/css/latest-works.css
@@ -4,7 +4,7 @@
 
 #projects {
     text-align: center;
-    background: #fff;
+    background: rgba(255, 255, 255, 0.4);
     margin-top: 20px;
     margin-bottom: 10px;
     border-radius: 16px;
diff --git a/css/portfolio-btn.css b/css/portfolio-btn.css
deleted file mode 100644
index 29c4d9e..0000000
--- a/css/portfolio-btn.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/* --- CENTERING THE BUTTON --- */
-.center-content {
-    /* Use Flexbox to center the content */
-    display: flex;
-    justify-content: center;
-    /* Center horizontally */
-    align-items: center;
-    /* Center vertically */
-    padding: 0px 0px 42px 0px;
-}
-
-/* Base Styling for Elegance */
-.elegant-back-button {
-    /* ... (rest of the button styles) */
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 12px 25px;
-    border: 3px solid #3498db;
-    border-radius: 15px;
-    background-color: #ffe88b;
-    color: #3498db;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    overflow: hidden;
-    position: relative;
-    z-index: 1;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-/* Hover Effect - Color Swap */
-.elegant-back-button:hover {
-    background-color: #3498db;
-    color: #ffffff;
-    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
-}
-
-/* Icon and Text Positioning */
-.elegant-back-button .icon {
-    display: inline-block;
-    margin-right: 10px;
-    font-size: 1.5em;
-    line-height: 1;
-    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* Hover Animation: Icon Slide and Rotate */
-.elegant-back-button:hover .icon {
-    transform: translateX(-3px) rotate(-15deg);
-}
-
-/* -------------------- RIPPLE EFFECT CSS -------------------- */
-.ripple {
-    position: absolute;
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.6);
-    transform: scale(0);
-    animation: ripple-effect 0.6s linear;
-    pointer-events: none;
-    z-index: 0;
-}
-
-@keyframes ripple-effect {
-    to {
-        transform: scale(4);
-        opacity: 0;
-    }
-}
\ No newline at end of file
diff --git a/css/portfolio.css b/css/portfolio.css
index 73684d6..a87e03c 100644
--- a/css/portfolio.css
+++ b/css/portfolio.css
@@ -1,289 +1,418 @@
-:root {
-    --accent: #ffd700;
-    --accent-light: #ffe88b;
-    --bg-dark: #1a1a1a;
-    --bg-mid: #333;
-    --highlight: #00b4d8;
-    --text-light: #f0f0f0;
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    scroll-behavior: smooth;
-}
-
-body {
-    font-family: 'Ubuntu', sans-serif;
-    background: linear-gradient(135deg, var(--bg-dark), var(--bg-mid));
-    color: var(--text-light);
-    overflow-x: hidden;
-}
-
-/* Floating Navbar */
-nav {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    background: rgba(26, 26, 26, 0.85);
-    backdrop-filter: blur(8px);
-    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
-    display: flex;
-    justify-content: center;
-    padding: 10px 0;
-    z-index: 999;
-    transition: all 0.3s ease;
-}
-
-nav a {
-    color: var(--accent);
-    text-decoration: none;
-    font-weight: 600;
-    margin: 0 20px;
-    transition: color 0.3s ease, transform 0.2s ease;
-    padding-bottom: 4px;
-    border-bottom: 2px solid transparent;
-}
-
-nav a:hover {
-    color: var(--highlight);
-    transform: translateY(-2px);
-}
-
-/* Active link (based on :target section) */
-section:target~nav a[href*="#overview"],
-section:target~nav a[href*="#design"],
-section:target~nav a[href*="#links"],
-section:target~nav a[href*="#footer"] {
-    border-bottom: 2px solid var(--highlight);
-    color: var(--highlight);
+/* ==========================================================================
+   Portfolio / Case Studies Styles
+   ========================================================================== */
+
+.case-study-list {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  margin-top: 40px;
+}
+
+.case-study-card {
+  display: flex;
+  flex-direction: column;
+  background: rgba(42, 30, 30, 0.594);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.case-study-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.779);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+/* Flex layout for desktop */
+@media (min-width: 992px) {
+  .case-study-card {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  /* Reverses the layout for alternating card designs */
+  .case-study-card.reverse-layout {
+    flex-direction: row-reverse;
+  }
 }
-
-/* Header */
-header {
-    background-color: #6a3800;
-    text-align: center;
-    padding: 70px 15px 35px;
-    color: #fff;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
-    margin-top: 45px;
-    animation: fadeDown 1s ease;
-}
-
-header h1 {
-    /* text-decoration: underline wavy var(--accent); */
-    font-size: 2rem;
-    letter-spacing: 1px;
-}
-
-h2 {
-    color: var(--accent);
-    text-align: center;
-    margin: 40px 0 20px;
-    animation: fadeIn 1.2s ease;
-}
-
-/* Collapsible Sections */
-details {
-    width: 90%;
-    margin: 20px auto;
-    background: rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
-    overflow: hidden;
-    transition: all 0.4s ease;
-}
-
-summary {
-    background: rgba(255, 255, 255, 0.12);
-    color: var(--accent-light);
-    font-weight: 700;
-    padding: 18px 20px;
-    font-size: 1.3rem;
-    cursor: pointer;
-    list-style: none;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    transition: background 0.3s ease;
-}
-
-summary:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
-
-details[open] summary {
-    background: rgba(255, 215, 0, 0.15);
-    color: var(--accent);
-}
-
-summary::after {
-    content: "▼";
-    font-size: 0.9rem;
-    color: var(--accent);
-}
-
-details[open] summary::after {
-    content: "▲";
-}
-
-/* Cards inside collapsibles */
-.card-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 25px;
-    padding: 25px;
-    animation: slideUp 1.2s ease;
-}
-
-.card {
-    background: rgba(255, 255, 255, 0.07);
-    border-radius: 12px;
-    padding: 20px;
-    text-align: center;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    backdrop-filter: blur(6px);
+
+.cs-content {
+  flex: 1.2;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
-
-.card:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
+
+.cs-badge {
+  display: inline-block;
+  background: rgba(56, 189, 248, 0.1);
+  color: #38bdf8;
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 20px;
+  width: max-content;
 }
 
-.card h3 {
-    color: var(--accent-light);
-    font-size: 1.2rem;
-    margin-bottom: 10px;
-}
+.cs-content h3 {
+  font-size: 1.8rem;
+  color: #ffffff;
+  margin-bottom: 16px;
+  font-family: 'Space Grotesk', sans-serif;
+}
 
-.card ul {
-    list-style: none;
-    padding: 0;
-    margin-top: 8px;
-}
+.cs-description {
+  color: #94a3b8;
+  line-height: 1.7;
+  margin-bottom: 24px;
+  font-size: 1.05rem;
+}
+
+.cs-highlights p {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 12px;
+  color: #cbd5e1;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
 
-.card ul li {
-    padding: 5px 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-}
+.cs-visual {
+  flex: 1;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  border-left: 1px solid rgba(255, 255, 255, 0.05);
+  min-height: 300px;
+  /* Ensure visual area has height even before adding images */
+}
+
+/* For reverse layout border fix */
+@media (min-width: 992px) {
+  .case-study-card.reverse-layout .cs-visual {
+    border-left: none;
+    border-right: 1px solid rgba(255, 255, 255, 0.05);
+  }
+}
+
+.diagram-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  color: #64748b;
+  text-align: center;
+  transition: color 0.3s ease;
+}
 
-/* Links Section */
-.links {
-    text-align: center;
-    font-size: 1.2rem;
-    margin: 50px 0;
-    animation: fadeIn 1.5s ease;
+.case-study-card:hover .diagram-placeholder {
+  color: #94a3b8;
 }
 
-.links a {
-    color: var(--accent);
-    text-decoration: none;
-    font-weight: 600;
-    transition: color 0.3s ease;
+.diagram-placeholder i {
+  font-size: 4.5rem;
+  opacity: 0.7;
 }
 
-.links a:hover {
-    color: var(--highlight);
+.diagram-placeholder span {
+  font-size: 0.9rem;
+  letter-spacing: 0.5px;
 }
 
-.links hr {
-    width: 60%;
-    border: 0;
-    height: 1px;
-    background: linear-gradient(to right, transparent, var(--accent), transparent);
-    margin: 25px auto;
-}
+/* If you add an image inside .cs-visual later */
+.cs-visual img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
 
-/* Footer */
-footer {
-    background-color: #6a3800;
-    text-align: center;
-    padding: 25px;
-    font-size: 1rem;
-    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4);
-    animation: fadeUp 1s ease;
+.tech-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+.tech-tags span {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #cbd5e1;
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  transition: all 0.3s ease;
+}
+
+.tech-tags span:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
 }
 
-footer a {
-    color: var(--accent);
-    font-weight: bold;
+/* Interactive Goodness */
+/* Enhanced Grid Layout for 5 Items */
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 2rem;
+  justify-content: center;
 }
 
-footer p {
-    margin-top: 10px;
-    font-size: 0.9rem;
-    color: #ffd700;
-}
-
-/* Animations */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes fadeDown {
-    from {
-        transform: translateY(-40px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
+/* Center the last card if it ends up on an odd row */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .projects-grid .project-card:last-child {
+    grid-column: span 2;
+    max-width: 50%;
+    margin: 0 auto;
+  }
+}
+
+@media (min-width: 1025px) {
+  .projects-grid .project-card:nth-last-child(-n+2):nth-child(odd) {
+    grid-column: span 3;
+    max-width: 33.33%;
+    margin: 0 auto;
+  }
 }
 
-@keyframes fadeUp {
-    from {
-        transform: translateY(40px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-@keyframes slideUp {
-    from {
-        transform: translateY(60px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-/* Responsive */
-@media (max-width: 600px) {
-    header h1 {
-        font-size: 1.5rem;
-    }
-
-    summary {
-        font-size: 1.1rem;
-    }
-
-    .card h3 {
-        font-size: 1.1rem;
-    }
-
-    .links hr {
-        width: 80%;
-    }
-
-    nav a {
-        margin: 0 10px;
-        font-size: 0.9rem;
-    }
+/* Glassmorphic Interaction Upgrades */
+.card-front,
+.card-back {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  transition: border 0.4s ease, box-shadow 0.4s ease;
+}
+
+.project-card:hover .card-front,
+.project-card:hover .card-back {
+  border: 1px solid rgba(56, 189, 248, 0.4);
+  /* Neon blue glow */
+  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
+}
+
+.card-thumbnail img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Enhancing the Tech Badges */
+.tech-badge {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(5px);
+  color: #e2e8f0;
+  transition: all 0.3s ease;
+}
+
+.tech-badge:hover {
+  background: rgba(56, 189, 248, 0.15);
+  border-color: rgba(56, 189, 248, 0.5);
+  color: #fff;
+  transform: translateY(-2px);
+}
+
+/* The Magic */
+/* ==========================================================================
+   Expanding Interactive Gallery Styles
+   ========================================================================== */
+
+.expanding-gallery {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 700px;
+  /* Height on mobile */
+  gap: 12px;
+  margin-top: 30px;
+}
+
+/* On Desktop, make it horizontal */
+@media (min-width: 992px) {
+  .expanding-gallery {
+    flex-direction: row;
+    height: 500px;
+    /* Height on desktop */
+  }
+}
+
+.gallery-panel {
+  position: relative;
+  flex: 0.5;
+  /* Default unexpanded size */
+  border-radius: 20px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Expansion Trigger */
+.gallery-panel:hover,
+.gallery-panel.active {
+  flex: 4;
+  /* Expanded size */
+  border-color: rgba(56, 189, 248, 0.4);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+}
+
+.panel-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.8s ease;
+}
+
+.gallery-panel:hover .panel-bg,
+.gallery-panel.active .panel-bg {
+  transform: scale(1.05);
+  /* Slight zoom on expand */
+}
+
+/* Dark gradient overlay so text is readable */
+.panel-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to top,
+      rgba(15, 23, 42, 1) 0%,
+      rgba(15, 23, 42, 0.6) 40%,
+      rgba(15, 23, 42, 0.1) 100%);
+  opacity: 0.8;
+  transition: opacity 0.6s ease;
+}
+
+.gallery-panel:hover .panel-overlay,
+.gallery-panel.active .panel-overlay {
+  opacity: 1;
+  /* Darken slightly to make text pop when active */
+}
+
+/* Center Icon (Visible when collapsed) */
+.panel-icon {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 50px;
+  height: 50px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(5px);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  color: #fff;
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.gallery-panel:hover .panel-icon,
+.gallery-panel.active .panel-icon {
+  opacity: 0;
+  transform: translate(-50%, 20px);
+  pointer-events: none;
+}
+
+/* Content (Hidden when collapsed, visible when expanded) */
+.panel-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 30px;
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
+  pointer-events: none;
+}
+
+.gallery-panel:hover .panel-content,
+.gallery-panel.active .panel-content {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 15px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.panel-content h3 {
+  font-size: 1.8rem;
+  color: #fff;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.panel-content p {
+  color: #cbd5e1;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  margin-bottom: 20px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* Limits description to 2 lines */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Button sizing */
+.btn-small {
+  padding: 8px 16px;
+  font-size: 0.9rem;
+}
+
+/* CTA Section */
+/* ===== CTA SECTION (NEON STYLE) ===== */
+.cta-card {
+  background: linear-gradient(135deg, #0f172a, #1e293b);
+  color: #fff;
+  padding: 60px 40px;
+  border-radius: 24px;
+  text-align: center;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.theme-neon {
+  background: linear-gradient(135deg, #020617, #0f172a);
+  position: relative;
+  overflow: hidden;
+}
+
+.theme-neon::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 60%);
+  z-index: 0;
+}
+
+.theme-neon>* {
+  position: relative;
+  z-index: 1;
 }
\ No newline at end of file
diff --git a/expertise/index.html b/expertise/index.html
index 283859b..960a5ce 100644
--- a/expertise/index.html
+++ b/expertise/index.html
@@ -150,15 +150,15 @@
 
         <ul class="nav-links" id="nav-links">
             <li><a href="/">Home</a></li>
-            <!-- New Services link -->
             <li><a href="/services">Services</a></li>
+            <li><a href="/portfolio">Portfolio</a></li>
             <!-- Dropdown Section -->
             <li class="dropdown">
                 <a href="/expertise" class="dropdown-toggle active">Expertise</a>
                 <ul class="dropdown-menu glass-dropdown">
                     <li><a href="#skills">Tech - Skills</a></li>
                     <li><a href="#projects">Projects</a></li>
-                    <li><a href="#portfolio">Portfolio</a></li>
+                    <li><a href="#profile">Profile</a></li>
                 </ul>
             </li>
             <li><a href="/aboutUs">About Us</a></li>
@@ -426,14 +426,14 @@ <h4>Desktop Chat (LAN)</h4>
         </div>
     </section>
 
-    <!-- Portfolio Section -->
-    <section id="portfolio" class="section container fade-in">
+    <!-- Professional Details Section -->
+    <section id="profile" class="section container fade-in">
         <div class="cta-card theme-neon">
-            <h2 class="cta-title">Explore My Full Portfolio</h2>
+            <h2 class="cta-title">Explore My Professional Details</h2>
             <p class="cta-subtitle" style="color: #fff; margin-bottom: 25px;">
                 Dive deeper into case studies, architecture diagrams, and comprehensive project overviews.</p>
-            <a href="/portfolio" class="open-modal-btn btn glow-btn">
-                View Portfolio Overview
+            <a href="https://vimal-java-dev.github.io/professional-details/" class="open-modal-btn btn glow-btn">
+                View Profile Overview
                 <i class="fas fa-arrow-right" style="margin-left:8px;"></i>
             </a>
         </div>
@@ -531,6 +531,7 @@ <h3>
                 <ul class="quick-links-list">
                     <li><a href="/">Home<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/services">Services<i class="fas fa-angle-left"></i></a></li>
+                    <li><a href="/portfolio">Portfolio<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/expertise">Expertise<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/aboutUs">About Us<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/contactUs">Contact<i class="fas fa-angle-left"></i></a></li>
diff --git a/index.html b/index.html
index 42daa5c..88db257 100644
--- a/index.html
+++ b/index.html
@@ -134,6 +134,7 @@
         </ul>
       </li>
       <li><a href="/services">Services</a></li>
+      <li><a href="/portfolio">Portfolio</a></li>
       <li><a href="/expertise">Expertise</a></li>
       <li><a href="/aboutUs">About Us</a></li>
       <li><a href="/contactUs">Contact</a></li>
@@ -154,14 +155,14 @@ <h1>
         <span class="gradient-text">Backend Systems</span>
       </h1>
       <p class="hero-subtext">
-        I'm <span class="highlight-text" style="font-weight: 600;">Vimal Patel</span>, a Java Backend
-        Developer specializing in
-        <span class="highlight-text" style="color: #38bdf8;">Spring Boot</span>,
-        <span class="highlight-text" style="color: #2496ed;">Docker</span> and
-        <span class="highlight-text" style="color: #a3e635;">Microservices</span>.
+        I'm <span class="highlight-text" style="font-weight: 600;">Vimal Patel</span> provides Software as a Service
+        <span class="highlight-text" style="color: #38bdf8;">(SaaS)</span> as a Java Backend Developer specializing in
+        <span class="highlight-text" style="color: #00d916;">Spring Boot</span>,
+        <span class="highlight-text" style="color: #033aff;">Docker</span> and
+        <span class="highlight-text" style="color: #2f78ffa9;">Microservices</span>.
       </p>
       <div class="hero-buttons">
-        <a href="#projects" class="btn primary glow-btn">View My Work</a>
+        <a href="#projects" class="btn primary glow-btn">Live Works</a>
         <a href="/contactUs" class="btn secondary glow-btn">Let's Connect</a>
       </div>
     </div>
@@ -221,8 +222,8 @@ <h3>Project Consulting</h3>
   <!-- Latest Works Section -->
   <section id="projects" class="projects-wrap">
     <div class="section-header">
-      <h2 class="section-title">Latest Works</h2>
-      <p class="section-subtitle">A selection of recent frontend interfaces and live
+      <h2 class="section-title">Live Works</h2>
+      <p class="section-subtitle">A selection of live frontend interfaces</p>
     </div>
     <div class="project-filters">
       <button class="filter-btn active" data-filter="all">All</button>
@@ -365,7 +366,7 @@ <h3>☕ Chai Café App</h3>
     </div>
   </section>
 
-  <!-- Visiting Card Section -->
+  <!-- CTA Section -->
   <section id="cta-section" class="section container fade-in">
     <div class="cta-card theme-neon">
       <h2 class="cta-title">
@@ -475,6 +476,7 @@ <h3>
         <ul class="quick-links-list">
           <li><a href="/">Home<i class="fas fa-angle-left"></i></a></li>
           <li><a href="/services">Services<i class="fas fa-angle-left"></i></a></li>
+          <li><a href="/portfolio">Portfolio<i class="fas fa-angle-left"></i></a></li>
           <li><a href="/expertise">Expertise<i class="fas fa-angle-left"></i></a></li>
           <li><a href="/aboutUs">About Us<i class="fas fa-angle-left"></i></a></li>
           <li><a href="/contactUs">Contact<i class="fas fa-angle-left"></i></a></li>
diff --git a/js/portfolio-btn.js b/js/portfolio-btn.js
deleted file mode 100644
index 0b0aefe..0000000
--- a/js/portfolio-btn.js
+++ /dev/null
@@ -1,27 +0,0 @@
-document.getElementById('backButton').addEventListener('click', function (e) {
-    // 1. Navigation Logic
-    history.back();
-
-    // 2. Ripple Effect Logic
-    const button = e.currentTarget;
-    const ripple = document.createElement('span');
-
-    // Calculate ripple position relative to the button
-    const diameter = Math.max(button.clientWidth, button.clientHeight);
-    const radius = diameter / 2;
-
-    // Position the ripple where the mouse clicked
-    ripple.style.width = ripple.style.height = `${diameter}px`;
-    ripple.style.left = `${e.clientX - (button.offsetLeft + radius)}px`;
-    ripple.style.top = `${e.clientY - (button.offsetTop + radius)}px`;
-
-    ripple.classList.add('ripple');
-
-    // Append the ripple
-    button.appendChild(ripple);
-
-    // Remove the ripple element after the animation finishes
-    ripple.addEventListener('animationend', () => {
-        ripple.remove();
-    });
-});
\ No newline at end of file
diff --git a/js/portfolio.js b/js/portfolio.js
new file mode 100644
index 0000000..8295daf
--- /dev/null
+++ b/js/portfolio.js
@@ -0,0 +1,11 @@
+// Script to handle mobile tapping for the expanding gallery
+const panels = document.querySelectorAll('.gallery-panel');
+
+panels.forEach(panel => {
+    panel.addEventListener('click', () => {
+        // Remove active class from all panels
+        panels.forEach(p => p.classList.remove('active'));
+        // Add active class to the clicked panel
+        panel.classList.add('active');
+    });
+});
\ No newline at end of file
diff --git a/portfolio/index.html b/portfolio/index.html
index 1f571b5..c573488 100644
--- a/portfolio/index.html
+++ b/portfolio/index.html
@@ -2,157 +2,518 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vimal Tech • Portfolio</title>
-    <!-- Favicon -->
-    <!-- <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> -->
-    <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">
-    <!-- Portfolio Stylesheet -->
-    <link rel="stylesheet" href="/css/portfolio.css">
-    <link rel="stylesheet" href="/css/portfolio-btn.css">
-    <!-- Ubuntu Font -->
-    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-3G79ZS5DSS"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+    gtag('config', 'G-3G79ZS5DSS');
+  </script>
+
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- SEO section -->
+  <title>Vimal Tech | Portfolio & Case Studies</title>
+  <meta name="description"
+    content="Explore the professional portfolio and in-depth backend case studies of Vimal Patel, specializing in Spring Boot, Microservices, and scalable architectures.">
+  <meta name="keywords"
+    content="Java Developer Portfolio, Spring Boot Case Studies, Backend Architecture, Microservices Projects, Vimal Tech Portfolio">
+  <meta name="author" content="Vimal Patel">
+  <meta name="robots" content="index, follow">
+  <link rel="canonical" href="https://vimaltech.dev/portfolio">
+
+  <link rel="preconnect" href="https://cdnjs.cloudflare.com">
+
+  <!-- Font Awesome -->
+  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" as="style"
+    onload="this.onload=null;this.rel='stylesheet'" referrerpolicy="no-referrer">
+
+  <noscript>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
+      referrerpolicy="no-referrer">
+  </noscript>
+
+  <!-- CSS -->
+  <link rel="stylesheet" href="/css/portfolio.css"> <!-- New CSS file below -->
+  <link rel="stylesheet" href="/css/global.css">
+  <link rel="stylesheet" href="/css/dropdown.css">
+  <link rel="stylesheet" href="/css/latest-works.css"> <!-- Reusing for the frontend grid -->
+  <link rel="stylesheet" href="/css/whatsapp-floating.css">
+
+  <!-- Open Graph (Social Sharing) -->
+  <meta property="og:title" content="Java Developer Expertise | Spring Boot, Microservices & Cloud">
+  <meta property="og:description"
+    content="Discover the technical stack and projects of Vimal Patel – backend development with Java, Spring Boot, Docker, AWS and modern web frameworks.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://vimaltech.dev/expertise">
+  <!-- <meta property="og:image" content="https://vimaltech.dev/images/logo-white.png"> -->
+
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Java Developer Expertise | Vimal Tech">
+  <meta name="twitter:description"
+    content="Skills and projects by Java developer Vimal Patel including Spring Boot, REST APIs, Docker, AWS and modern frontend frameworks.">
+  <!-- <meta name="twitter:image" content="https://vimaltech.dev/images/logo-white.png"> -->
+
+  <!-- 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">
+
+  <!-- Fonts -->
+  <!-- Inter -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+  <!-- Outfit -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&display=swap"
+    rel="stylesheet">
+  <!-- Space+Grotesk -->
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&display=swap"
+    rel="stylesheet">
+  <!-- Lexend -->
+  <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
+  <!-- Montserrat -->
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet">
+  <!-- Particles.js Library -->
+  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js">
+  </script>
+
 </head>
 
 <body>
-    <!-- Floating Navigation -->
-    <nav>
-        <a href="#overview">Overview</a>
-        <a href="#design">Design</a>
-        <a href="#github-links">GitHub</a>
-        <a href="/expertise">Expertise</a>
-        <a href="/">Home</a>
-    </nav>
-
-    <header>
-        <span style="color: #ffd700; font-weight: bold;">
-            <h1>Welcome To
-        </span><br />
-
-        <span style="color: #ffe88b; font-weight: bold;">Java Developer Portfolio</span>
-        </h1>
-    </header>
-
-    <!-- Sections -->
-    <section id="overview">
-        <h2>💻 Tech Stack Overview</h2>
-        <details open>
-            <summary>🧠 Developer Profile & Stack</summary>
-            <div class="card-container">
-                <div class="card">
-                    <h3>👨‍💻 Profession</h3>
-                    <ul>
-                        <li>Java Developer</li>
-                        <li>(BE-IT)</li>
-                    </ul>
-                </div>
-                <div class="card">
-                    <h3>⚙️ Backend</h3>
-                    <ul>
-                        <li>Java, Spring Boot, Web Services</li>
-                        <li>Microservices, Docker</li>
-                    </ul>
-                </div>
-                <div class="card">
-                    <h3>🗄️ Database / Workspace</h3>
-                    <ul>
-                        <li>SQL (Oracle, MySQL, PostgreSQL)</li>
-                        <li>NoSQL (MongoDB, Cassandra)</li>
-                    </ul>
-                </div>
-                <div class="card">
-                    <h3>🎨 Front-End</h3>
-                    <ul>
-                        <li>ReactJS</li>
-                        <li>AngularJS</li>
-                    </ul>
-                </div>
-            </div>
-        </details>
-    </section>
-
-    <section id="design">
-        <h2>🧩 Design & Architecture</h2>
-        <details>
-            <summary>🏗️ System & Design Patterns</summary>
-            <div class="card-container">
-                <div class="card">
-                    <h3>🧱 System Design</h3>
-                    <ul>
-                        <li>Low-level design</li>
-                        <li>High-level design</li>
-                    </ul>
-                </div>
-                <div class="card">
-                    <h3>♻️ Design Patterns</h3>
-                    <ul>
-                        <li>DAO</li>
-                        <li>Singleton</li>
-                    </ul>
-                </div>
-                <div class="card">
-                    <h3>📚 Core Subjects</h3>
-                    <ul>
-                        <li>J2SE</li>
-                        <li>J2EE</li>
-                    </ul>
-                </div>
-                <div class="card">
-                    <h3>🔧 API Tools</h3>
-                    <ul>
-                        <li>Postman</li>
-                        <li>Swagger</li>
-                    </ul>
-                </div>
-                <div class="card">
-                    <h3>📘 Field Subjects</h3>
-                    <ul>
-                        <li>DCN, DBMS, OOADU</li>
-                        <li>OS, DFS, DAA</li>
-                    </ul>
-                </div>
-            </div>
-        </details>
-    </section>
-
-    <section id="github-links">
-        <div class="links">
-            <hr>
-            <a href="https://github.com/vimal-java-dev/" target="_blank">GitHub Link - 1: Professional</a>
-            <hr>
-            <a href="https://github.com/vimal-tech-dev/" target="_blank">GitHub Link - 2: Vimal Tech</a>
-            <hr>
-            <a href="https://github.com/vimal-tech-starter/" target="_blank">GitHub Link - 3: Personal</a>
-            <hr>
+  <!-- Header / Navbar -->
+  <nav class="navbar glass-nav">
+    <div>
+      <a href="/" class="brand">
+        <img id="site-logo" src="/images/logo-white.png" alt="Vimal Tech Java Developer Logo" class="logo"
+          loading="lazy">
+        <span class="brand-name">
+          <span class="brand-name-vimal">Vimal</span>
+          <span class="brand-name-tech">Tech</span>
+        </span>
+      </a>
+    </div>
+
+    <ul class="nav-links" id="nav-links">
+      <li><a href="/">Home</a></li>
+      <li><a href="/services">Services</a></li>
+      <!-- Dropdown Section -->
+      <li class="dropdown">
+        <a href="/portfolio" class="dropdown-toggle active">Portfolio</a>
+        <ul class="dropdown-menu glass-dropdown">
+          <li><a href="#frontend-works">Frontend Works</a></li>
+          <li><a href="#case-studies">Backend Works</a></li>
+        </ul>
+      </li>
+      <li><a href="/expertise">Expertise</a></li>
+      <li><a href="/aboutUs">About Us</a></li>
+      <li><a href="/contactUs">Contact</a></li>
+    </ul>
+    <div style="display: flex; align-items: center;">
+      <div class="hamburger" id="hamburger">&#9776;</div>
+    </div>
+  </nav>
+
+  <!-- Hero Section -->
+  <section id="hero" class="hero">
+    <div id="particles-js"></div>
+    <div class="gradient-overlay"></div>
+    <div class="hero-content">
+      <h1>My Portfolio & <span class="gradient-text">Case Studies</span></h1>
+      <p class="hero-subtext">
+        Bridging the gap between <span class="highlight-text" style="font-weight: 600;">complex backend
+          architecture</span> and <span class="highlight-text" style="color: #38bdf8;">responsive user
+          interfaces</span>.
+      </p>
+      <div class="hero-buttons">
+        <a href="#frontend-works" class="btn primary glow-btn">Frontend Interfaces</a>
+        <a href="#case-studies" class="btn secondary glow-btn">Backend Architecture</a>        
+      </div>
+    </div>
+  </section>
+
+  <!-- Frontend Grid Section -->
+  <section id="frontend-works" class="section container fade-in alt-bg">
+    <div class="section-header text-center" style="margin-top: 40px;">
+      <h2 class="section-title">Live Frontend Interfaces</h2>
+      <p class="section-subtitle">Interactive web applications built with modern frontend frameworks.</p>
+    </div>
+
+    <div class="expanding-gallery">
+
+      <!-- 1. Foodaholic -->
+      <div class="gallery-panel active">
+        <img src="/images/foodaholic-preview.png" alt="Foodaholic"
+          onerror="this.src='https://placehold.co/800x600/1e293b/38bdf8?text=Foodaholic'" class="panel-bg">
+        <div class="panel-overlay"></div>
+
+        <div class="panel-icon"><i class="fas fa-hamburger"></i></div>
+
+        <div class="panel-content">
+          <div class="panel-header">
+            <h3>Foodaholic</h3>
+            <a href="https://foodaholic-test.vercel.app/" target="_blank" rel="noopener"
+              class="btn primary glow-btn btn-small">
+              Live Site <i class="fas fa-external-link-alt" style="margin-left: 5px; font-size: 0.8rem;"></i>
+            </a>
+          </div>
+          <p>Dynamic food delivery interface with highly interactive menu displays and smooth cart functionality.</p>
+          <div class="tech-tags">
+            <span>React</span><span>Tailwind</span>
+          </div>
         </div>
-    </section>
+      </div>
+
+      <!-- 2. RED & BLUE Clothing Studio -->
+      <div class="gallery-panel">
+        <img src="/images/red-n-blue-preview.png" alt="RED & BLUE"
+          onerror="this.src='https://placehold.co/800x600/1e293b/e23636?text=RED+%26+BLUE'" class="panel-bg">
+        <div class="panel-overlay"></div>
+
+        <div class="panel-icon"><i class="fas fa-tshirt"></i></div>
+
+        <div class="panel-content">
+          <div class="panel-header">
+            <h3>RED & BLUE Studio</h3>
+            <a href="http://red-n-blue-clothing-studio-test.vercel.app/" target="_blank" rel="noopener"
+              class="btn primary glow-btn btn-small">
+              Live Site <i class="fas fa-external-link-alt" style="margin-left: 5px; font-size: 0.8rem;"></i>
+            </a>
+          </div>
+          <p>Premium clothing brand storefront featuring product showcases, image galleries, and a sleek shopping
+            experience.</p>
+          <div class="tech-tags">
+            <span>E-Commerce</span><span>UI/UX</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 3. Golden Planet Jewellers -->
+      <div class="gallery-panel">
+        <img src="/images/golden-planet-preview.png" alt="Golden Planet"
+          onerror="this.src='https://placehold.co/800x600/1e293b/eab308?text=Golden+Planet'" class="panel-bg">
+        <div class="panel-overlay"></div>
+
+        <div class="panel-icon"><i class="fas fa-gem"></i></div>
+
+        <div class="panel-content">
+          <div class="panel-header">
+            <h3>Golden Planet</h3>
+            <a href="https://golden-planet-jewellers-test.vercel.app/" target="_blank" rel="noopener"
+              class="btn primary glow-btn btn-small">
+              Live Site <i class="fas fa-external-link-alt" style="margin-left: 5px; font-size: 0.8rem;"></i>
+            </a>
+          </div>
+          <p>Luxurious digital catalog designed to highlight premium jewelry collections with elegant typography.</p>
+          <div class="tech-tags">
+            <span>Web Design</span><span>Animations</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 4. Hotel Best Inn -->
+      <div class="gallery-panel">
+        <img src="/images/hotel-best-inn-preview.png" alt="Hotel Best Inn"
+          onerror="this.src='https://placehold.co/800x600/1e293b/22c55e?text=Hotel+Best+Inn'" class="panel-bg">
+        <div class="panel-overlay"></div>
+
+        <div class="panel-icon"><i class="fas fa-hotel"></i></div>
+
+        <div class="panel-content">
+          <div class="panel-header">
+            <h3>Hotel Best Inn</h3>
+            <a href="https://hotel-best-inn-test.vercel.app/" target="_blank" rel="noopener"
+              class="btn primary glow-btn btn-small">
+              Live Site <i class="fas fa-external-link-alt" style="margin-left: 5px; font-size: 0.8rem;"></i>
+            </a>
+          </div>
+          <p>Hospitality website interface featuring room showcases, amenities, and clean navigation for seamless user
+            journeys.</p>
+          <div class="tech-tags">
+            <span>Responsive</span><span>Booking UI</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 5. Jay Ambe Jewellers -->
+      <div class="gallery-panel">
+        <img src="/images/jay-ambe-preview.png" alt="Jay Ambe"
+          onerror="this.src='https://placehold.co/800x600/1e293b/a855f7?text=Jay+Ambe'" class="panel-bg">
+        <div class="panel-overlay"></div>
+
+        <div class="panel-icon"><i class="fas fa-ring"></i></div>
+
+        <div class="panel-content">
+          <div class="panel-header">
+            <h3>Jay Ambe Jewellers</h3>
+            <a href="https://jay-ambe-jewellers-test.vercel.app/" target="_blank" rel="noopener"
+              class="btn primary glow-btn btn-small">
+              Live Site <i class="fas fa-external-link-alt" style="margin-left: 5px; font-size: 0.8rem;"></i>
+            </a>
+          </div>
+          <p>A culturally rich jewelry showcase platform focusing on high-quality product imagery and fluid navigation.
+          </p>
+          <div class="tech-tags">
+            <span>Modern UI</span><span>CSS3</span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- Detailed Case Studies (Backend) -->
+  <section id="case-studies" class="section container fade-in">
+    <div class="section-header text-center">
+      <h2 class="section-title">In-Depth Case Studies</h2>
+      <p class="section-subtitle">A closer look at enterprise architecture, microservices, and real-time data
+        processing.</p>
+    </div>
+
+    <div class="case-study-list">
+
+      <!-- Case Study 1: Data Streaming -->
+      <div class="case-study-card glass-panel">
+        <div class="cs-content">
+          <span class="cs-badge">Proof of Concept</span>
+          <h3>Data Streaming & Fleet Management</h3>
+          <p class="cs-description">
+            Real-Time Data Processing system engineered to handle high-throughput telemetry data for fleet management.
+            Built utilizing a scalable event-driven architecture.
+          </p>
+          <div class="cs-highlights">
+            <p><i class="fas fa-check-circle" style="color: #22c55e;"></i> Engineered resilient event-driven
+              microservices.</p>
+            <p><i class="fas fa-check-circle" style="color: #22c55e;"></i> Containerized ecosystem for rapid, isolated
+              deployment.</p>
+          </div>
+          <div class="tech-tags">
+            <span>Spring Boot</span>
+            <span>Kafka</span>
+            <span>Spark</span>
+            <span>Docker</span>
+          </div>
+        </div>
+        <div class="cs-visual">
+          <div class="diagram-placeholder">
+            <i class="fas fa-project-diagram"></i>
+            <span>Architecture Diagram / Output Placeholder</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Case Study 2: PTC Windchill -->
+      <div class="case-study-card glass-panel reverse-layout">
+        <div class="cs-content">
+          <span class="cs-badge" style="color: #8b5cf6; background: rgba(139, 92, 246, 0.1);">Enterprise
+            Integration</span>
+          <h3>PTC Windchill (Java Product)</h3>
+          <p class="cs-description">
+            Customized Java Client for PTC Windchill PDMLink operating as a Shadow Resource. Streamlined product data
+            management workflows and database interactions.
+          </p>
+          <div class="cs-highlights">
+            <p><i class="fas fa-check-circle" style="color: #22c55e;"></i> Seamless legacy system integration and
+              customization.</p>
+            <p><i class="fas fa-check-circle" style="color: #22c55e;"></i> Optimized XML parsing and Oracle SQL database
+              querying.</p>
+          </div>
+          <div class="tech-tags">
+            <span>Core Java</span>
+            <span>Oracle SQL Developer</span>
+            <span>JSOUP</span>
+            <span>XML</span>
+          </div>
+        </div>
+        <div class="cs-visual">
+          <div class="diagram-placeholder">
+            <i class="fas fa-database"></i>
+            <span>System Integration Visualization</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Case Study 3: Parking System -->
+      <div class="case-study-card glass-panel">
+        <div class="cs-content">
+          <span class="cs-badge" style="color: #ff9800; background: rgba(255, 152, 0, 0.1);">API & Microservices</span>
+          <h3>Smart Parking System</h3>
+          <p class="cs-description">
+            A scalable backend architecture designed to manage parking lot availability, user ticketing, and automated
+            REST API communications.
+          </p>
+          <div class="cs-highlights">
+            <p><i class="fas fa-check-circle" style="color: #22c55e;"></i> Fully documented endpoints using Swagger-UI.
+            </p>
+            <p><i class="fas fa-check-circle" style="color: #22c55e;"></i> Microservices architecture managed via Docker
+              containers.</p>
+          </div>
+          <div class="tech-tags">
+            <span>REST API</span>
+            <span>Microservices</span>
+            <span>Docker</span>
+            <span>Swagger-UI</span>
+          </div>
+        </div>
+        <div class="cs-visual">
+          <div class="diagram-placeholder">
+            <i class="fas fa-cubes"></i>
+            <span>Microservices Topology Placeholder</span>
+          </div>
+        </div>
+      </div>
 
-    <div class="center-content">
-        <button id="backButton" class="elegant-back-button">
-            <span class="icon">&#x2190;</span> <span class="text">Go Back</span>
-        </button>
     </div>
+  </section>
+
+  <!-- CTA Section -->
+  <section id="cta-section" class="section container fade-in">
+    <div class="cta-card theme-neon">
+      <h2 class="cta-title">
+        Want to make fully scalable applications?
+      </h2>
+      <p class="cta-description" style="max-width: 600px; margin: 0 auto 30px auto; line-height: 1.6; color: #cbd5e1;">
+        Infrastructure as a Service (IaaS) and Platform as a Service (PaaS) solutions can help you build applications
+        that scale seamlessly with your business needs. Let's collaborate to create robust, high-performance software
+        tailored to your requirements.
+      </p>
+      <div class="cta-buttons" style="display: flex; gap: 15px; flex-wrap: wrap; justify-content: center;">
+        <a href="tel:+919638474047" class="btn primary glow-btn" target="_blank">
+          Direct Call <i class="fas fa-phone-alt" style="margin-left: 8px;"></i>
+        </a>
+        <a href="/contactUs/#contactForm" class="btn primary glow-btn">
+          Fill Requirements
+          <i class="fas fa-arrow-right" style="margin-left: 8px;"></i>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="site-footer">
+    <div class="footer-divider-top"></div>
+    <div class="footer-container">
 
-    <footer id="footer">
-        <div>
-            <b>
-                <p>&#9400; 23 - SEPT - 2023</p><br />
-                <p>
-                    | Vimal Patel |</br>
-                    | Software Development Engineer |</br>
-                    | Java Developer Portfolio |
-                </p>
-            </b>
+      <div class="footer-left">
+        <div class="footer-brand-header">
+          <a href="/" class="brand">
+            <img src="/images/logo-white.png" alt="Vimal Tech Logo" class="footer-logo">
+            <h3>
+              <span class="left-part">Vimal</span>
+              <span class="right-part">Tech</span>
+            </h3>
+          </a>
         </div>
-    </footer>
+        <div class="brand-divider"></div>
+        <p class="tagline">Freelance Software Development Services</p>
+        <p class="studio-line">Independent Software Development Studio</p>
+        <div class="brand-divider"></div>
+        <div class="msme-header">
+          <a href="https://udyamregistration.gov.in/" class="brand" target="_blank" rel="noopener">
+            <img src="/images/msme-logo-transparent.png" alt="MSME Logo" class="msme-logo">
+            <div class="msme-text-block">
+              <p class="msme"><strong>MSME Registered Micro Enterprise</strong></p>
+              <p class="studio-line">Under the Ministry of Micro, Small and Medium Enterprises<br />Government of India
+              </p>
+            </div>
+          </a>
+        </div>
+        <div class="brand-divider"></div>
+        <p class="udyam">Udyam Registration Number: <strong>UDYAM-GJ-25-0089795</strong></p>
+        <p class="udyam-verify">
+          <a href="https://udyamregistration.gov.in/Udyam_Verify.aspx" target="_blank" rel="noopener">
+            <i class="fas fa-check-circle"></i> Verify MSME Registration
+          </a>
+        </p>
+      </div>
+
+      <div class="footer-center">
+        <h3>
+          <span class="left-part">Vimal</span>
+          <span class="right-part">Patel</span>
+        </h3>
+        <div class="brand-divider"></div>
+        <p class="role-highlight">Founder & Software Developer</p>
+        <div class="brand-divider"></div>
+        <ul class="footer-contact-list">
+          <li><i class="fas fa-phone-alt"></i> <a href="tel:+919638474047">+91 9638 474047</a></li>
+          <li><i class="fas fa-envelope"></i> <a href="mailto:vimal.patel@vimaltech.dev">vimal.patel@vimaltech.dev</a>
+          </li>
+          <li><i class="fas fa-map-marker-alt"></i> Valsad, Gujarat, India - 396001</li>
+        </ul>
+
+        <div class="brand-divider"></div>
+
+        <p>Follow me on social media:</p>
+        <div class="footer-social">
+          <a href="https://github.com/vimal-tech-dev" target="_blank" rel="noopener" aria-label="Vimal Tech GitHub">
+            <i class="fa-brands fa-github"></i>
+          </a>
+          <a href="https://www.linkedin.com/in/vimaltech/" target="_blank" rel="noopener"
+            aria-label="Vimal Tech LinkedIn">
+            <i class="fa-brands fa-linkedin"></i>
+          </a>
+          <a href="https://x.com/vimal_tech_dev/" target="_blank" rel="noopener" aria-label="Vimal Tech Twitter">
+            <i class="fa-brands fa-twitter"></i>
+          </a>
+          <a href="https://www.instagram.com/vimaltech/" target="_blank" rel="noopener"
+            aria-label="Vimal Tech Instagram">
+            <i class="fa-brands fa-instagram"></i>
+          </a>
+          <a href="https://www.facebook.com/vimaltech.dev/" target="_blank" rel="noopener"
+            aria-label="Vimal Tech Facebook">
+            <i class="fa-brands fa-facebook"></i>
+          </a>
+        </div>
+      </div>
+
+      <div class="footer-links">
+        <h3>
+          <span class="left-part">Quick</span>
+          <span class="right-part">Links</span>
+        </h3>
+        <div class="brand-divider right-align-divider"></div>
+        <ul class="quick-links-list">
+          <li><a href="/">Home<i class="fas fa-angle-left"></i></a></li>
+          <li><a href="/services">Services<i class="fas fa-angle-left"></i></a></li>
+          <li><a href="/portfolio">Portfolio<i class="fas fa-angle-left"></i></a></li>
+          <li><a href="/expertise">Expertise<i class="fas fa-angle-left"></i></a></li>
+          <li><a href="/aboutUs">About Us<i class="fas fa-angle-left"></i></a></li>
+          <li><a href="/contactUs">Contact<i class="fas fa-angle-left"></i></a></li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="footer-bottom">
+      <p>&copy; 2026 Vimal Tech. All rights reserved.</p>
+    </div>
+  </footer>
+
+  <!-- Floating WhatsApp -->
+  <a href="https://wa.me/919638474047?text=Hello%20Vimal%2C%0AI%20would%20like%20to%20know%20more%20about%20your%20tech%20services."
+    class="whatsapp-float" target="_blank">
+    <i class="fab fa-whatsapp"></i>
+  </a>
+
+  <!-- Dark Mode Toggle -->
+  <button id="darkModeToggle">🌙</button>
+
+  <!-- Scroll to Top Button -->
+  <button id="scrollTopBtn" title="Go to top">
+    <i class="fas fa-arrow-up"></i>
+  </button>
 
-    <!-- Navigation Logic -->
-    <!-- history.back(); -->
-    <!-- Go Back Button JS -->
-    <script src="/js/portfolio-btn.js"></script>
+  <!-- JS -->
+  <script src="/js/global-dark-mode-particles.js"></script>
+  <script src="/js/global.js"></script>
+  <script src="/js/dropdown.js"></script>
+  <script src="/js/portfolio.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/services/index.html b/services/index.html
index f457c25..f1aaca9 100644
--- a/services/index.html
+++ b/services/index.html
@@ -219,7 +219,7 @@
                     <li><a href="#live-projects">Live Websites</a></li>
                 </ul>
             </li>
-            <!-- New Expertise link -->
+            <li><a href="/portfolio">Portfolio</a></li>
             <li><a href="/expertise">Expertise</a></li>
             <li><a href="/aboutUs">About Us</a></li>
             <li><a href="/contactUs">Contact</a></li>
@@ -243,7 +243,7 @@ <h1>Our <span>Professional Services</span>
                 <span class="highlight-text">Software Architect</span>,
                 build scalable, secure, and high-performance software systems — from
                 <span class="highlight-text">backend architecture</span> to
-                <span class="highlight-text">cloud-ready deployments</span>.
+                <span class="highlight-text">cloud-ready Software Deployment Strategies</span>.
             </p>
             <div class="hero-buttons">
                 <a href="#services-offer" class="btn primary glow-btn">Explore Services</a>
@@ -539,7 +539,7 @@ <h4>Do you help with MVP development?</h4>
             <h2 class="cta-title">Let’s Build Something Solid</h2>
             <p class="cta-subtitle" style="color: #fff; margin-bottom: 25px;">Have an idea or an existing system that
                 needs improvement?</p>
-            <a href="/contactUs" class="open-modal-btn btn glow-btn">Get in Touch <i class="fas fa-arrow-right"
+            <a href="/contactUs/#contactForm" class="open-modal-btn btn glow-btn">Get in Touch <i class="fas fa-arrow-right"
                     style="margin-left:8px;"></i></a>
         </div>
     </section>
@@ -636,6 +636,7 @@ <h3>
                 <ul class="quick-links-list">
                     <li><a href="/">Home<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/services">Services<i class="fas fa-angle-left"></i></a></li>
+                    <li><a href="/portfolio">Portfolio<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/expertise">Expertise<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/aboutUs">About Us<i class="fas fa-angle-left"></i></a></li>
                     <li><a href="/contactUs">Contact<i class="fas fa-angle-left"></i></a></li>