From 9db1379b16ae07b873084ac9be4c2b1add31f1e6 Mon Sep 17 00:00:00 2001
From: vimal-java-dev <vimal929@gmail.com>
Date: Sat, 12 Sep 2026 08:03:49 +0530
Subject: [PATCH] Mobile updated, and Tablet view added

Dropdown menu for both mobile and tablet

Footer needs to be added to table view as occupied space

Make this for the live work-from-home page for mobile and tablet view

Signed-off-by: vimal-java-dev <vimal929@gmail.com>
---
 components/footer.html     |   1 +
 components/header.html     |   1 -
 components/load-footer.js  |   1 +
 components/load-header.js  |  13 +-
 css/dropdown.css           | 160 +++++++++++--
 css/global.css             | 330 +++++++++++++++++++++++++--
 css/index.css              |  40 +---
 css/latest-works.css       | 214 ++++++++++++++++-
 css/utilities-sections.css |  29 +++
 index.html                 |  37 ++-
 js/latest-works.js         | 455 ++++++++++++++++++++++++++++++++++++-
 11 files changed, 1173 insertions(+), 108 deletions(-)
 create mode 100644 css/utilities-sections.css

diff --git a/components/footer.html b/components/footer.html
index 9f80d9b..98c7adf 100644
--- a/components/footer.html
+++ b/components/footer.html
@@ -1,4 +1,5 @@
 <!-- Footer -->
+<!-- /components/footer.html -->
 <footer class="site-footer">
     <div class="footer-divider-top"></div>
     <div class="footer-container">
diff --git a/components/header.html b/components/header.html
index 852c7d6..a112484 100644
--- a/components/header.html
+++ b/components/header.html
@@ -1,6 +1,5 @@
 <!-- Header / Navbar -->
 <!-- /components/header.html -->
-<!-- /components/header.html -->
 <nav class="navbar glass-nav">
     <div>
         <a href="/" class="brand">
diff --git a/components/load-footer.js b/components/load-footer.js
index f1ce13c..cfee66e 100644
--- a/components/load-footer.js
+++ b/components/load-footer.js
@@ -1,4 +1,5 @@
 // load-footer.js
+//  /components/footer.js
 // Add the folder name to the fetch path
 fetch('/components/footer.html')
   .then(response => {
diff --git a/components/load-header.js b/components/load-header.js
index b22487a..30c49b2 100644
--- a/components/load-header.js
+++ b/components/load-header.js
@@ -1,4 +1,5 @@
 /* ===== load-header.js ===== */
+//  /components/header.js
 fetch("/components/header.html")
   .then((response) => {
     if (!response.ok) throw new Error("Header not found");
@@ -93,21 +94,21 @@ fetch("/components/header.html")
 
       // DESKTOP HOVER
       dropdown.addEventListener("mouseenter", () => {
-        if (window.innerWidth > 768) {
+        if (window.innerWidth > 1024) {
           menu.style.display = "block";
           setTimeout(() => {
             menu.style.opacity = "1";
             menu.style.visibility = "visible";
-            menu.style.transform = "translateY(0)";
+            menu.style.transform = "translateX(-50%) translateY(0)";
           }, 10);
         }
       });
 
       dropdown.addEventListener("mouseleave", () => {
-        if (window.innerWidth > 768) {
+        if (window.innerWidth > 1024) {
           menu.style.opacity = "0";
           menu.style.visibility = "hidden";
-          menu.style.transform = "translateY(10px)";
+          menu.style.transform = "translateX(-50%) translateY(10px)";
           setTimeout(() => {
             if (menu.style.opacity === "0") {
               menu.style.display = "none";
@@ -165,7 +166,7 @@ fetch("/components/header.html")
           // If they clicked the dropdown toggle on mobile, ignore it so the submenu can open
           if (
             e.target.classList.contains("dropdown-toggle") &&
-            window.innerWidth <= 768
+            window.innerWidth <= 1024
           ) {
             return;
           }
@@ -235,7 +236,7 @@ fetch("/components/header.html")
             }
           });
         },
-        { threshold: 0.6 }
+        { threshold: 0.6 },
       );
 
       sections.forEach((section) => {
diff --git a/css/dropdown.css b/css/dropdown.css
index 3f06540..496b0e6 100644
--- a/css/dropdown.css
+++ b/css/dropdown.css
@@ -14,35 +14,53 @@
 .dropdown-menu {
     display: none;
     position: absolute;
-    /* top: 150%; */
-    left: -10px;
-    min-width: 180px;
+    left: 50%;
+    min-width: 240px;
     border-radius: 12px;
+    margin-top: 20px;
     padding: 12px 0;
     z-index: 1000;
     opacity: 0;
-    transform: translateY(10px);
-    /* transition: opacity 0.3s ease, transform 0.3s ease; */
-
+    transform: translateX(-50%) translateY(10px);
     visibility: hidden;
     /* ADD THIS: A small delay (0.2s) when mouse leaves so it doesn't flicker shut */
     transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.2s;
     /* CRITICAL: Ensure there's no physical gap. 
        If your menu is lower down, use a transparent border to bridge the gap */
     border-top: 10px solid transparent;
-    /* margin-top: -10px; */
 }
 
 /* 2. The Hover State */
 /* Show dropdown on hover */
-.dropdown:hover .dropdown-menu,
-.dropdown-menu:hover {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
+@media (min-width: 1025px) {
+
+    .dropdown:hover .dropdown-menu,
+    .dropdown-menu:hover {
+        overflow: visible;
+        opacity: 1;
+        visibility: visible;
+        transform: translateX(-50%) translateY(0);
+        /* Remove the delay on hover-in so it feels instant */
+        transition-delay: 0s;
+    }
+
+    .dropdown-menu::before {
+        content: "";
+        position: absolute;
+        top: -18px;
+        left: 50%;
+        transform: translateX(-50%);
 
-    /* Remove the delay on hover-in so it feels instant */
-    transition-delay: 0s;
+        width: 0;
+        height: 0;
+
+        border-left: 18px solid transparent;
+        border-right: 18px solid transparent;
+        border-bottom: 18px solid rgba(255, 255, 255, 0.9);
+
+        pointer-events: none;
+        z-index: 1001;
+    }
 }
 
 .dropdown:hover .dropdown-menu {
@@ -121,18 +139,98 @@
     transform: rotate(180deg);
 }
 
-/* ===== Mobile Dropdown and Hamburger ===== */
+/* =========================================
+   TABLET DROPDOWN
+   769px – 1024px
+========================================= */
+
+@media (min-width: 769px) and (max-width: 1024px) {
+    .dropdown-menu {
+        position: static !important;
+        top: auto !important;
+        left: auto !important;
+        right: auto !important;
+        transform: none !important;
+        display: none;
+        border: none;
+        width: 100% !important;
+        margin: 0 auto !important;
+        padding: 0 20% 0 20% !important;
+        border-radius: 12px;
+        overflow: hidden;
+        max-height: 0;
+        opacity: 0;
+        visibility: hidden;
+        transition: max-height 0.3s ease, opacity 0.3s ease;
+
+        background: rgba(30, 41, 59, 0.85);
+        box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.3);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        will-change: max-height;
+        min-width: 400px;
+    }
+
+    body.dark .dropdown-menu {
+        background: rgba(15, 23, 42, 0.85);
+        /* order work for this BG */
+        box-shadow: 0 8px 32px rgba(255, 255, 255, 0.2);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        backdrop-filter: blur(10px);
+        will-change: max-height;
+    }
+
+    nav.scrolled .dropdown-menu {
+        /* order work for this BG */
+        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+    }
+
+    body.dark nav.scrolled .dropdown-menu {
+        background: rgba(15, 23, 42, 0.85);
+        /* order work for this BG */
+    }
+
+    .dropdown.open .dropdown-menu {
+        display: block !important;
+        opacity: 1 !important;
+        visibility: visible !important;
+        max-height: 500px;
+        transform: none !important;
+    }
+
+    .dropdown-menu li {
+        margin: 0 0 !important;
+    }
+
+    .dropdown-menu li a {
+        color: #ffffff !important;
+        font-size: 1rem;
+        display: block;
+        width: 100%;
+    }
+
+    /* The Active State - When the user is scrolling that section */
+    .dropdown-menu li a.active {
+        width: 90% !important;
+        margin: 0 30% !important;
+        padding: 10px 10px !important;
+    }
+}
+
+/* ===== Mobile Dropdown Up to 768px ===== */
 @media (max-width: 768px) {
     .dropdown-menu {
         position: static;
-        /* Prevents overlap */
-        /* background: #333; */
-        /* background: transparent; */
+        top: auto !important;
+        left: auto !important;
+        right: auto !important;
+        transform: none !important;
         border: none;
         display: none;
-        /* Handled by mobile JS */
-        width: 100%;
-        /* padding-left: 16px; */
+        width: 100% !important;
+        margin: 0 auto !important;
+        padding: 0 auto !important;
         border-radius: 10px;
         overflow: hidden;
         max-height: 0;
@@ -140,10 +238,10 @@
 
         background: rgba(30, 41, 59, 0.85);
         /* order work for this BG */
-
         box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.3);
         border: 1px solid rgba(255, 255, 255, 0.2);
         backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
         will-change: max-height;
     }
 
@@ -168,8 +266,17 @@
     }
 
     .dropdown.open .dropdown-menu {
+        display: block !important;
+        opacity: 1 !important;
+        visibility: visible !important;
         max-height: 500px;
-        /* Adjust as needed */
+        transform: none !important;
+        transition: max-height 0.3s ease, opacity 0.3s ease;
+    }
+
+    /* Mobile view dropdown item styles */
+    .dropdown-menu li {
+        margin: -5px 0 -5px 0 !important;
     }
 
     .dropdown-menu li a {
@@ -179,6 +286,13 @@
         width: 100%;
     }
 
+    /* The Active State - When the user is scrolling that section */
+    .dropdown-menu li a.active {
+        width: 80% !important;
+        margin: 0 20% !important;
+        padding: 10px 10px !important;
+    }
+
     /* Mobile view click/tap effect */
     /* Target the active state when JS adds the 'open' class */
     .dropdown.open .dropdown-toggle::after {
diff --git a/css/global.css b/css/global.css
index 156bdb1..c41beae 100644
--- a/css/global.css
+++ b/css/global.css
@@ -58,12 +58,13 @@ h2 {
 }
 
 h3 {
-    font-size: 1.3rem;
+    font-size: 1.2rem;
     font-family: "Montserrat", sans-serif;
     font-optical-sizing: auto;
     /* font-weight: 500; */
     font-style: normal;
     margin-bottom: 1.5rem;
+    color: var(--color-text);
 }
 
 h4 {
@@ -81,7 +82,7 @@ p {
     color: var(--color-muted);
     font-family: "Outfit", sans-serif;
     font-optical-sizing: auto;
-    font-weight: 500;
+    /* font-weight: 500; */
     font-style: normal;
 }
 
@@ -285,7 +286,7 @@ body.dark .glass-nav.scrolled .brand-name-vimal {
     font-family: "Outfit", sans-serif;
     font-size: 1.1rem;
     font-weight: 500;
-    margin-right: 10px;
+    /* margin-right: 10px; */
 }
 
 .nav-links li a {
@@ -363,7 +364,181 @@ body.dark nav.scrolled .hamburger {
     color: #ffffff;
 }
 
-/* ===== MOBILE RESPONSIVE ===== */
+/* =========================================
+   TABLET RESPONSIVE
+   769px – 1024px
+========================================= */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .hero-content {
+        max-width: 750px;
+        margin: auto;
+        text-align: center;
+    }
+
+    .hero-content h1 {
+        font-size: 3rem;
+        line-height: 1.2;
+    }
+
+    .hero-content p {
+        font-size: 1.1rem;
+        line-height: 1.8;
+        max-width: 650px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .hero-buttons {
+        display: flex;
+        justify-content: center;
+        gap: 20px;
+        margin-top: 30px;
+    }
+
+    /* ================================
+       NAVBAR
+    ================================ */
+    .navbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 1rem;
+        top: 10px;
+        left: 15px;
+        right: 15px;
+        border-radius: 12px;
+        transition: all 0.3s ease;
+    }
+
+    .navbar.scrolled {
+        /* top: 10px; */
+        left: 20px;
+        right: 20px;
+    }
+
+    /* ================================
+       BRAND
+    ================================ */
+    .brand {
+        display: flex;
+        align-items: center;
+    }
+
+    .logo {
+        height: 35px;
+        width: auto;
+        object-fit: contain;
+    }
+
+    .brand-name {
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        gap: 6px;
+        white-space: nowrap;
+        font-size: 1.8rem;
+        transition: all 0.3s ease;
+    }
+
+    /* ================================
+       HAMBURGER
+    ================================ */
+    .hamburger {
+        display: block;
+        font-size: 32px;
+        cursor: pointer;
+        color: #ffffff;
+        transition: transform 0.3s ease, color 0.3s ease;
+    }
+
+    nav.scrolled .hamburger {
+        color: #000000;
+    }
+
+    body.dark nav.scrolled .hamburger {
+        color: #ffffff;
+    }
+
+    .hamburger.active {
+        transform: rotate(180deg);
+        font-weight: bolder !important;
+    }
+
+    /* ================================
+       NAVIGATION LINKS
+    ================================ */
+    .nav-links {
+        display: none;
+        position: absolute;
+        top: 70px;
+        left: 10px;
+        right: 10px;
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+        padding: 25px;
+        border-radius: 12px;
+        text-align: center;
+        background: rgba(112, 108, 108, 0.35);
+        backdrop-filter: blur(40px);
+        -webkit-backdrop-filter: blur(40px);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
+        will-change: backdrop-filter;
+
+        /* Scrolling */
+        max-height: calc(100vh - 90px);
+        overflow-y: auto;
+        overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    body.dark .nav-links {
+        background: rgba(15, 23, 42, 0.5);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    nav.scrolled .nav-links {
+        background: rgba(255, 255, 255, 0.9);
+        backdrop-filter: blur(40px);
+        -webkit-backdrop-filter: blur(40px);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    body.dark nav.scrolled .nav-links {
+        background: rgba(15, 23, 42, 0.9);
+        backdrop-filter: blur(40px);
+        -webkit-backdrop-filter: blur(40px);
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        box-shadow: 0 8px 12px rgba(255, 255, 255, 0.1);
+    }
+
+    /* ================================
+       MENU ITEMS
+    ================================ */
+    .nav-links li {
+        margin: 8px 0;
+    }
+
+    .nav-links li a,
+    body.dark .nav-links li a {
+        font-size: 1rem;
+        text-shadow: 1px 4px 8px rgba(0, 0, 0, 0.3);
+    }
+
+    .nav-links.active {
+        display: flex;
+    }
+}
+
+/* =========================================
+   MOBILE RESPONSIVE
+   Up to 768px
+========================================= */
 @media (max-width: 768px) {
     .navbar {
         display: flex;
@@ -437,14 +612,20 @@ body.dark nav.scrolled .hamburger {
         display: none;
         position: absolute;
         top: 55px;
-        right: -10px;
+        right: 0;
         left: 0;
         flex-direction: column;
         gap: 15px;
-        padding: 20px;
+        padding: 20px 20px 40px;
         border-radius: 12px;
         text-align: center;
-        /* width: 300px; */
+
+        /* Scroll menu on small/old mobile screens */
+        max-height: calc(100vh - 75px);
+        overflow-y: auto;
+        overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
+
         background: rgba(112, 108, 108, 0.35);
         /* Increased blur to a heavy but stable range */
         backdrop-filter: blur(40px);
@@ -792,13 +973,9 @@ body.dark .section-title {
     }
 }
 
-/* ===================================================
-   ===== Footer =====
-=================================================== */
 /* ===================================================
    ===== Premium Footer =====
 =================================================== */
-
 .site-footer {
     background: #090e17;
     /* Deep, rich tech slate */
@@ -1120,7 +1297,6 @@ body.dark .section-title {
 /* ===================================================
    ===== Footer Logos & Alignment =====
 =================================================== */
-
 /* Vimal Tech Logo Alignment */
 .footer-brand-header {
     display: flex;
@@ -1195,6 +1371,133 @@ body.dark .section-title {
     }
 }
 
+/* ===================================================
+   ===== TABLET FOOTER RESPONSIVE =====
+   ===== 769px - 1024px =====
+=================================================== */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .site-footer {
+        padding: 45px 25px 20px;
+    }
+
+    /* Main Footer Layout */
+    .footer-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 30px 20px;
+        align-items: start;
+    }
+
+    /* Vimal Tech Section */
+    .footer-vimal-tech {
+        width: 100%;
+        padding: 0 20px 0 0;
+        border-left: none;
+        border-right: 1px solid rgba(255, 255, 255, 0.08);
+        border-top: none;
+        border-bottom: none;
+    }
+
+    /* Vimal Patel Section */
+    .footer-vimal-patel {
+        width: 100%;
+        padding: 0 0 0 20px;
+        border-left: none;
+        border-right: none;
+        border-top: none;
+        border-bottom: none;
+    }
+
+    /* Quick Links + Resources */
+    .footer-links-row {
+        grid-column: 1 / -1;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 30px;
+        width: 100%;
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
+        padding-top: 25px;
+    }
+
+    .footer-quick-links,
+    .footer-resources {
+        width: 100%;
+        padding: 0 20px;
+        border-left: none;
+    }
+
+    /* More Info */
+    .footer-more-info {
+        grid-column: 1 / -1;
+        width: 100%;
+        padding: 25px 20px 0;
+        border-left: none;
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    /* More Info Links in Rows */
+    .footer-more-info .quick-links-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px 25px;
+    }
+
+    .footer-more-info .quick-links-list li {
+        margin-bottom: 5px;
+    }
+
+    /* Typography */
+    .site-footer h3 {
+        font-size: 1.15rem;
+    }
+
+    .site-footer p {
+        margin: 6px 0;
+    }
+
+    /* Smaller Spacing */
+    .brand-divider {
+        margin: 10px 0 15px;
+        width: 50px;
+    }
+
+    /* Contact Spacing */
+    .footer-contact-list li {
+        margin-bottom: 9px;
+    }
+
+    /* Social Media */
+    .footer-social {
+        gap: 10px;
+        margin-top: 10px;
+        padding: 0;
+        width: auto;
+        border-bottom: none;
+    }
+
+    .footer-social a {
+        width: 36px;
+        height: 36px;
+        font-size: 1rem;
+    }
+
+    /* Quick Links */
+    .quick-links-list li {
+        margin-bottom: 8px;
+    }
+
+    .quick-links-list a {
+        font-size: 0.9rem;
+    }
+
+    /* Footer Bottom */
+    .footer-bottom {
+        margin-top: 30px;
+        margin-bottom: 0;
+        padding: 15px 10px;
+    }
+}
+
 /* ===================================================
    ===== Floating Dark Mode Toggle =====
 =================================================== */
@@ -1282,9 +1585,6 @@ body.dark .section-title {
 /* ===================================================
    ===== Dark Mode =====
 =================================================== */
-/* ===== Dark Mode Override ===== */
-
-/* Dark mode appearance */
 body.dark #darkModeToggle {
     background: #00bcd4;
     /* Cyan glow in dark mode */
diff --git a/css/index.css b/css/index.css
index afce9ed..ba28e4c 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,33 +1,3 @@
-/* ===== UTILITIES & SECTIONS ===== */
-.section-header {
-  text-align: center;
-  margin-bottom: 3rem;
-}
-
-.section-subtitle {
-  font-size: 1.2rem;
-  color: var(--color-muted);
-  max-width: 700px;
-  margin: 0 auto;
-  line-height: 1.6;
-}
-
-.alt-bg {
-  background: rgba(255, 255, 255, 0.4);
-  border-radius: 20px;
-  margin-bottom: 2rem;
-  padding: 4rem 2rem;
-}
-
-body.dark .alt-bg {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.text-center {
-  text-align: center;
-}
-
 /* ===================================================
    ===== Experience Section =====
 =================================================== */
@@ -38,11 +8,9 @@ body.dark .alt-bg {
 }
 
 #experience p {
-  font-size: 1.1rem;
-  line-height: 1.8;
-  max-width: 800px;
+  line-height: 1.6;
+  /* max-width: 800px; */
   margin: 0 auto;
-  color: var(--color-text);
 }
 
 /* ===== GLASS PANEL (For Experience Section) ===== */
@@ -122,9 +90,7 @@ body.dark .glass-panel p {
 }
 
 .preview-card h3 {
-  font-size: 1.2rem;
   margin-bottom: 10px;
-  color: var(--color-text);
 }
 
 .preview-card p {
@@ -197,4 +163,4 @@ body.dark .project-card {
 .theme-neon>* {
   position: relative;
   z-index: 1;
-}
+}
\ No newline at end of file
diff --git a/css/latest-works.css b/css/latest-works.css
index 3d534d7..7718315 100644
--- a/css/latest-works.css
+++ b/css/latest-works.css
@@ -230,17 +230,6 @@ body.dark .project-card a:hover {
     background: rgba(255, 255, 255, 0.3);
 }
 
-@media (max-width: 768px) {
-    .projects-grid {
-        grid-template-columns: 1fr;
-        gap: 2.5rem;
-    }
-
-    .project-card {
-        height: 480px;
-    }
-}
-
 .project-tagline {
     display: block;
     font-size: 0.75rem;
@@ -323,4 +312,207 @@ body.dark #projects {
     position: relative;
     min-height: 500px;
     /* prevents jump */
+}
+
+.projects-navigation {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    margin-top: 20px;
+    margin-bottom: -40px;
+}
+
+.project-nav-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 20px;
+    border-radius: 25px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(30, 41, 59, 0.85);
+    color: #ffffff;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.project-nav-btn:hover {
+    transform: translateY(-2px);
+}
+
+/* ==========================================
+   TABLET — LIVE WORKS SECTION
+   769px to 1024px
+========================================== */
+@media (min-width: 769px) and (max-width: 1024px) {
+
+    /* ======================================
+       PROJECT FILTERS
+    ====================================== */
+
+    .project-filters {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+    }
+
+
+    /* Hide ALL button on tablet */
+    .filter-btn[data-filter="all"] {
+        display: none;
+    }
+
+
+    /* Tablet buttons are indicators */
+    .filter-btn {
+        pointer-events: auto;
+        cursor: pointer;
+    }
+
+    /* ======================================
+       PROJECT GRID
+    ====================================== */
+
+    .projects-grid {
+        grid-template-columns: repeat(2, minmax(280px, 350px));
+        justify-content: center;
+        align-items: start;
+        gap: 2rem;
+        min-height: auto;
+    }
+
+
+    /* ======================================
+       SINGLE CARD — CENTER
+    ====================================== */
+
+    .projects-grid.tablet-single {
+        grid-template-columns: minmax(280px, 350px);
+        justify-content: center;
+    }
+
+
+    /* ======================================
+       PROJECT CARD
+    ====================================== */
+
+    .project-card {
+        width: 100%;
+        max-width: 350px;
+        height: 420px;
+        margin: 0 auto;
+    }
+
+
+    /* ======================================
+       NAVIGATION
+    ====================================== */
+
+    .projects-navigation {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 12px;
+        margin-top: 25px;
+        margin-bottom: 0;
+    }
+
+
+    .project-nav-btn {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+}
+
+/* ==========================================
+   MOBILE — LIVE WORKS
+========================================== */
+
+@media (max-width: 768px) {
+
+    /* ======================================
+       FILTER BUTTONS
+    ====================================== */
+
+    .project-filters {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        flex-wrap: nowrap;
+    }
+
+
+    /* Hide ALL button on mobile */
+    .filter-btn[data-filter="all"] {
+        display: none;
+    }
+
+
+    /* Buttons are visual indicators only */
+    .filter-btn {
+        pointer-events: auto;
+        cursor: pointer;
+    }
+
+    /* ======================================
+       PROJECT GRID
+    ====================================== */
+
+    .projects-grid {
+        grid-template-columns: 1fr;
+        justify-content: center;
+        align-items: start;
+        gap: 2rem;
+        min-height: auto;
+    }
+
+
+    /* ======================================
+       SINGLE MOBILE CARD
+    ====================================== */
+
+    .projects-grid.mobile-single {
+        grid-template-columns: minmax(0, 350px);
+        justify-content: center;
+    }
+
+
+    /* ======================================
+       PROJECT CARD
+    ====================================== */
+
+    .project-card {
+        width: 100%;
+        max-width: 350px;
+        height: 480px;
+        margin: 0 auto;
+    }
+
+
+    /* ======================================
+       NAVIGATION
+    ====================================== */
+
+    .projects-navigation {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        margin-top: 20px;
+        margin-bottom: 0;
+    }
+
+
+    .project-nav-btn {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
 }
\ No newline at end of file
diff --git a/css/utilities-sections.css b/css/utilities-sections.css
new file mode 100644
index 0000000..871dd78
--- /dev/null
+++ b/css/utilities-sections.css
@@ -0,0 +1,29 @@
+/* ===== UTILITIES & SECTIONS ===== */
+.section-header {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+/* Used by p tag if it looks heading */
+.section-subtitle {
+    font-size: 1.2rem;
+    max-width: 700px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+.alt-bg {
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 20px;
+    margin-bottom: 2rem;
+    padding: 4rem 2rem;
+}
+
+body.dark .alt-bg {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.text-center {
+    text-align: center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index d11e19f..22bf518 100644
--- a/index.html
+++ b/index.html
@@ -59,6 +59,7 @@
     <!-- Main Stylesheet -->
     <link rel="stylesheet" href="/css/index.css" />
     <link rel="stylesheet" href="/css/global.css" />
+    <link rel="stylesheet" href="/css/utilities-sections.css" />
     <link rel="stylesheet" href="/css/latest-works.css" />
     <link rel="stylesheet" href="/css/dropdown.css" />
     <!-- Popup Window CSS -->
@@ -275,7 +276,9 @@ <h3>Project Consulting</h3>
     <section id="projects" class="projects-wrap">
       <div class="section-header">
         <h2 class="section-title">Live Works</h2>
-        <p class="section-subtitle">A selection of live frontend interfaces click to view</p>
+        <p class="section-subtitle">
+          A selection of live frontend interfaces click to view
+        </p>
       </div>
       <div class="project-filters">
         <button class="filter-btn active" data-filter="all">All</button>
@@ -387,10 +390,26 @@ <h3>🏋️ THE PERFORMANCE PLATFORM</h3>
           </div>
         </div>
       </div>
-      <div style="text-align: center; margin-top: 20px; margin-bottom: -40px">
-        <a href="/portfolio/#frontend-works" class="btn primary glow-btn"
-          >Portfolio →</a
+      <div class="projects-navigation">
+        <button
+          type="button"
+          class="project-nav-btn prev-project"
+          aria-label="Previous project"
         >
+          ← Prev
+        </button>
+
+        <a href="/portfolio/#frontend-works" class="btn primary glow-btn">
+          Portfolio →
+        </a>
+
+        <button
+          type="button"
+          class="project-nav-btn next-project"
+          aria-label="Next project"
+        >
+          Next →
+        </button>
       </div>
     </section>
     <!-- Infinite Carousel Section -->
@@ -738,7 +757,15 @@ <h3>ClinoraCare</h3>
       <div class="section-header">
         <h2 class="section-title fade-in">LATEST <span>BLOG POSTS</span></h2>
         <p class="section-subtitle">
-          Explore the latest insights, ideas, and technical articles from Vimal Tech.
+          Explore the latest insights, ideas, and technical articles from
+          <a
+            href="https://blog.vimaltech.dev/"
+            target="_blank"
+            rel="noopener"
+            class="blog-view-all"
+          >
+            Vimal Tech Blog. <i class="fas fa-arrow-up-right-from-square"></i>
+          </a>
         </p>
       </div>
 
diff --git a/js/latest-works.js b/js/latest-works.js
index 458429f..2fb9581 100644
--- a/js/latest-works.js
+++ b/js/latest-works.js
@@ -1,29 +1,464 @@
-// Filtering Logic
+/* ==========================================
+   LIVE WORKS
+   DESKTOP + TABLET + MOBILE
+========================================== */
+
+/* ==========================================
+   ELEMENTS
+========================================== */
+
 const filterButtons = document.querySelectorAll(".filter-btn");
 const projectCards = document.querySelectorAll(".project-card");
+const projectsGrid = document.querySelector(".projects-grid");
+
+const prevProjectBtn = document.querySelector(".prev-project");
+const nextProjectBtn = document.querySelector(".next-project");
+
+/* ==========================================
+   RESPONSIVE STATE
+
+   TABLET NAVIGATION:
+   -1 = React only
+    0 = React + Vue
+    1 = Vue + Angular
+    2 = Angular only
+
+   MOBILE:
+    0 = React
+    1 = Vue
+    2 = Angular
+========================================== */
+
+let tabletPosition = 0;
+let mobilePosition = 0;
+
+/* Direct tablet button selection */
+let tabletSelectedCategory = null;
+
+/* ==========================================
+   SCREEN CHECKS
+========================================== */
+
+function isMobile() {
+  return window.innerWidth <= 768;
+}
+
+function isTablet() {
+  return window.innerWidth >= 769 && window.innerWidth <= 1024;
+}
+
+function isResponsiveProjects() {
+  return isMobile() || isTablet();
+}
+
+/* ==========================================
+   GET CARD BY CATEGORY
+========================================== */
+
+function getCard(category) {
+  return document.querySelector(`.project-card[data-category="${category}"]`);
+}
+
+/* ==========================================
+   UPDATE ACTIVE CATEGORY BUTTONS
+
+   Only visible card categories become orange.
+========================================== */
+
+function updateActiveButtons(categories) {
+  filterButtons.forEach((button) => {
+    button.classList.remove("active");
+
+    const filterValue = button.getAttribute("data-filter");
+
+    if (categories.includes(filterValue)) {
+      button.classList.add("active");
+    }
+  });
+}
+
+/* ==========================================
+   RESET GRID
+========================================== */
+
+function resetGridLayout() {
+  if (!projectsGrid) return;
+
+  projectsGrid.classList.remove("tablet-single");
+  projectsGrid.classList.remove("mobile-single");
+  projectsGrid.classList.remove("single-card");
+}
+
+/* ==========================================
+   HIDE ALL CARDS FOR RESPONSIVE NAVIGATION
+========================================== */
+
+function hideAllResponsiveCards() {
+  projectCards.forEach((card) => {
+    card.style.display = "none";
+
+    card.classList.remove("hide");
+    card.classList.add("show");
+  });
+}
+
+/* ==========================================
+   SHOW SELECTED CARDS
+========================================== */
+
+function showCards(cards) {
+  cards.forEach((card) => {
+    if (card) {
+      card.style.display = "block";
+    }
+  });
+}
+
+/* ==========================================
+   TABLET PROJECT UPDATE
+
+   NORMAL NAVIGATION:
+
+   -1 = React only
+    0 = React + Vue
+    1 = Vue + Angular
+    2 = Angular only
+
+   DIRECT BUTTON:
+
+   React   = React only centered
+   Vue     = Vue only centered
+   Angular = Angular only centered
+========================================== */
+
+function updateTabletProjects() {
+  if (!isTablet()) return;
+
+  hideAllResponsiveCards();
+  resetGridLayout();
+
+  let visibleCards = [];
+  let visibleCategories = [];
+
+  /* Direct category button selection */
+  if (tabletSelectedCategory) {
+    visibleCards = [getCard(tabletSelectedCategory)];
+    visibleCategories = [tabletSelectedCategory];
+  } else if (tabletPosition === -1) {
+    /* Normal Prev / Next navigation */
+    /* React only */
+    visibleCards = [getCard("react")];
+    visibleCategories = ["react"];
+  } else if (tabletPosition === 0) {
+    /* React + Vue */
+    visibleCards = [getCard("react"), getCard("vue")];
+    visibleCategories = ["react", "vue"];
+  } else if (tabletPosition === 1) {
+    /* Vue + Angular */
+    visibleCards = [getCard("vue"), getCard("angular")];
+    visibleCategories = ["vue", "angular"];
+  } else if (tabletPosition === 2) {
+    /* Angular only */
+    visibleCards = [getCard("angular")];
+    visibleCategories = ["angular"];
+  }
+
+  /* Show cards */
+  showCards(visibleCards);
+
+  /* Center single card */
+  if (visibleCards.length === 1 && projectsGrid) {
+    projectsGrid.classList.add("tablet-single");
+  }
+
+  /* Update active buttons */
+  updateActiveButtons(visibleCategories);
+}
+
+/* ==========================================
+   MOBILE PROJECT UPDATE
+
+   React
+   ↓ Next
+
+   Vue
+   ↓ Next
+
+   Angular
+========================================== */
+
+function updateMobileProjects() {
+  if (!isMobile()) return;
+
+  hideAllResponsiveCards();
+  resetGridLayout();
+
+  let visibleCard = null;
+  let visibleCategory = null;
+
+  /* React */
+  if (mobilePosition === 0) {
+    visibleCard = getCard("react");
+    visibleCategory = "react";
+  } else if (mobilePosition === 1) {
+    /* Vue */
+    visibleCard = getCard("vue");
+    visibleCategory = "vue";
+  } else if (mobilePosition === 2) {
+    /* Angular */
+    visibleCard = getCard("angular");
+    visibleCategory = "angular";
+  }
+
+  /* Show card */
+  if (visibleCard) {
+    visibleCard.style.display = "block";
+  }
+
+  /* Mobile single card */
+  if (projectsGrid) {
+    projectsGrid.classList.add("mobile-single");
+  }
+
+  /* Update active button */
+  if (visibleCategory) {
+    updateActiveButtons([visibleCategory]);
+  }
+}
+
+/* ==========================================
+   FILTER BUTTONS
+
+   DESKTOP:
+   ORIGINAL BEHAVIOUR
+
+   TABLET:
+   SELECT SINGLE CARD
+
+   MOBILE:
+   SELECT SINGLE CARD
+========================================== */
 
 filterButtons.forEach((button) => {
   button.addEventListener("click", () => {
-    filterButtons.forEach((btn) => btn.classList.remove("active"));
-    button.classList.add("active");
-
     const filterValue = button.getAttribute("data-filter");
 
-    let delay = 0;
+    /* ======================================
+       MOBILE
+    ====================================== */
+
+    if (isMobile()) {
+      if (filterValue === "react") {
+        mobilePosition = 0;
+      } else if (filterValue === "vue") {
+        mobilePosition = 1;
+      } else if (filterValue === "angular") {
+        mobilePosition = 2;
+      }
+
+      updateMobileProjects();
+      return;
+    }
+
+    /* ======================================
+       TABLET
+    ====================================== */
+
+    if (isTablet()) {
+      if (
+        filterValue === "react" ||
+        filterValue === "vue" ||
+        filterValue === "angular"
+      ) {
+        tabletSelectedCategory = filterValue;
+      }
+
+      updateTabletProjects();
+      return;
+    }
+
+    /* ======================================
+       DESKTOP FILTERING
+
+       ORIGINAL BEHAVIOUR
+    ====================================== */
+
+    /* Remove active */
+    filterButtons.forEach((btn) => {
+      btn.classList.remove("active");
+    });
+
+    /* Activate clicked button */
+    button.classList.add("active");
+
+    let visibleCardsCount = 0;
 
     projectCards.forEach((card) => {
       const category = card.getAttribute("data-category");
 
+      /* Show */
       if (filterValue === "all" || category === filterValue) {
-        setTimeout(() => {
-          card.classList.remove("hide");
-          card.classList.add("show");
-        }, delay);
-        delay += 100; // stagger delay
+        card.classList.remove("hide");
+        card.classList.add("show");
+
+        card.style.display = "";
+
+        visibleCardsCount++;
       } else {
+        /* Hide */
         card.classList.remove("show");
         card.classList.add("hide");
       }
     });
+
+    /* Center single desktop card */
+    if (visibleCardsCount === 1 && projectsGrid) {
+      projectsGrid.classList.add("single-card");
+    } else if (projectsGrid) {
+      projectsGrid.classList.remove("single-card");
+    }
+  });
+});
+
+/* ==========================================
+   PREVIOUS BUTTON
+========================================== */
+
+if (prevProjectBtn) {
+  prevProjectBtn.addEventListener("click", () => {
+    /* MOBILE */
+    if (isMobile()) {
+      if (mobilePosition > 0) {
+        mobilePosition--;
+      }
+
+      updateMobileProjects();
+      return;
+    }
+
+    /* TABLET */
+    if (isTablet()) {
+      /* Direct button selection */
+      if (tabletSelectedCategory) {
+        if (tabletSelectedCategory === "react") {
+          tabletPosition = -1;
+        } else if (tabletSelectedCategory === "vue") {
+          tabletPosition = 0;
+        } else if (tabletSelectedCategory === "angular") {
+          tabletPosition = 1;
+        }
+
+        /* Return to navigation mode */
+        tabletSelectedCategory = null;
+      } else {
+        /* Normal navigation */
+        if (tabletPosition > -1) {
+          tabletPosition--;
+        }
+      }
+
+      updateTabletProjects();
+    }
+  });
+}
+
+/* ==========================================
+   NEXT BUTTON
+========================================== */
+
+if (nextProjectBtn) {
+  nextProjectBtn.addEventListener("click", () => {
+    /* MOBILE */
+    if (isMobile()) {
+      if (mobilePosition < 2) {
+        mobilePosition++;
+      }
+
+      updateMobileProjects();
+      return;
+    }
+
+    /* TABLET */
+    if (isTablet()) {
+      /* Direct button selection */
+      if (tabletSelectedCategory) {
+        if (tabletSelectedCategory === "react") {
+          tabletPosition = 0;
+        } else if (tabletSelectedCategory === "vue") {
+          tabletPosition = 1;
+        } else if (tabletSelectedCategory === "angular") {
+          tabletPosition = 2;
+        }
+
+        /* Return to navigation mode */
+        tabletSelectedCategory = null;
+      } else {
+        /* Normal navigation */
+        if (tabletPosition < 2) {
+          tabletPosition++;
+        }
+      }
+
+      updateTabletProjects();
+    }
   });
+}
+
+/* ==========================================
+   RESTORE DESKTOP
+
+   ORIGINAL DESKTOP BEHAVIOUR
+========================================== */
+
+function restoreDesktopProjects() {
+  projectCards.forEach((card) => {
+    card.style.display = "";
+
+    card.classList.remove("hide");
+    card.classList.add("show");
+  });
+
+  resetGridLayout();
+
+  /* Restore All as active */
+  filterButtons.forEach((button) => {
+    button.classList.remove("active");
+
+    if (button.getAttribute("data-filter") === "all") {
+      button.classList.add("active");
+    }
+  });
+}
+
+/* ==========================================
+   SCREEN RESIZE
+========================================== */
+
+window.addEventListener("resize", () => {
+  if (isMobile()) {
+    tabletSelectedCategory = null;
+    updateMobileProjects();
+  } else if (isTablet()) {
+    updateTabletProjects();
+  } else {
+    tabletSelectedCategory = null;
+    restoreDesktopProjects();
+  }
+});
+
+/* ==========================================
+   INITIAL LOAD
+========================================== */
+
+window.addEventListener("load", () => {
+  /* Mobile starts React */
+  if (isMobile()) {
+    mobilePosition = 0;
+    updateMobileProjects();
+  } else if (isTablet()) {
+    /* Tablet starts React + Vue */
+    tabletPosition = 0;
+    tabletSelectedCategory = null;
+    updateTabletProjects();
+  }
 });