diff --git a/api/chat.php b/api/chat.php
index 63c7705..6637e05 100644
--- a/api/chat.php
+++ b/api/chat.php
@@ -122,30 +122,44 @@ $systemPrompt .= "4. Do not make up facts or external projects not listed in the
 $systemPrompt .= "5. Format your output using simple markdown (like bolding or bullet points) to make it readable.\n";
 
 // Map chat history
+// Map chat history and prepend system instructions to the first user message
 $contents = [];
-if (isset($inputData['history']) && is_array($inputData['history'])) {
-    foreach ($inputData['history'] as $msg) {
+$firstMsgPrepended = false;
+
+if (isset($inputData['history']) && is_array($inputData['history']) && !empty($inputData['history'])) {
+    foreach ($inputData['history'] as $index => $msg) {
         if (isset($msg['role']) && isset($msg['text'])) {
             $role = ($msg['role'] === 'user') ? 'user' : 'model';
+            $text = $msg['text'];
+            
+            // Prepend system prompt to the first user message in history
+            if (!$firstMsgPrepended && $role === 'user') {
+                $text = "System Context & Instructions:\n" . $systemPrompt . "\n\nUser Message: " . $text;
+                $firstMsgPrepended = true;
+            }
+            
             $contents[] = [
                 'role' => $role,
-                'parts' => [['text' => $msg['text']]]
+                'parts' => [['text' => $text]]
             ];
         }
     }
 }
-// Add the current user message
+
+// Add the current user message (prepend system instructions if history was empty)
+$currentUserText = $userMessage;
+if (!$firstMsgPrepended) {
+    $currentUserText = "System Context & Instructions:\n" . $systemPrompt . "\n\nUser Message: " . $userMessage;
+}
+
 $contents[] = [
     'role' => 'user',
-    'parts' => [['text' => $userMessage]]
+    'parts' => [['text' => $currentUserText]]
 ];
 
-// Setup request body
+// Setup request body without systemInstruction key
 $requestPayload = [
     'contents' => $contents,
-    'systemInstruction' => [
-        'parts' => [['text' => $systemPrompt]]
-    ],
     'generationConfig' => [
         'temperature' => 0.7,
         'maxOutputTokens' => 800
@@ -153,7 +167,7 @@ $requestPayload = [
 ];
 
 // Call Gemini API via cURL
-$url = "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=" . urlencode($apiKey);
+$url = "https://generativelanguage.googleapis.com/v1/models/gemini-3.5-flash:generateContent?key=" . urlencode($apiKey);
 
 $ch = curl_init($url);
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
@@ -161,6 +175,7 @@ curl_setopt($ch, CURLOPT_POST, true);
 curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($requestPayload));
 curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
 curl_setopt($ch, CURLOPT_TIMEOUT, 15);
+curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
 
 $response = curl_exec($ch);
 $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
diff --git a/api/test_models.php b/api/test_models.php
new file mode 100644
index 0000000..caf424d
--- /dev/null
+++ b/api/test_models.php
@@ -0,0 +1,23 @@
+<?php
+require_once __DIR__ . '/../config/db.php';
+
+$apiKey = getenv('GEMINI_API_KEY') ?: ($_ENV['GEMINI_API_KEY'] ?? '');
+if (empty($apiKey)) {
+    echo "API Key is missing in .env";
+    exit;
+}
+
+$url = "https://generativelanguage.googleapis.com/v1/models?key=" . urlencode($apiKey);
+
+$ch = curl_init($url);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
+curl_setopt($ch, CURLOPT_TIMEOUT, 15);
+
+$response = curl_exec($ch);
+$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+curl_close($ch);
+
+echo "HTTP Code: $httpCode\n\n";
+echo "Response:\n";
+echo $response;
diff --git a/assets/css/style.css b/assets/css/style.css
index 4c40045..e778cb4 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -6,64 +6,70 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap');
 
 /* Prevent horizontal scroll on all viewports */
-html, body { overflow-x: hidden; max-width: 100%; }
+html,
+body {
+  overflow-x: hidden;
+  max-width: 100%;
+}
 
 /* --- CSS Variables (Dark Mode Default) --- */
 :root {
   /* Backgrounds */
-  --bg:           #090d16;
+  --bg: #090d16;
   --bg-secondary: #0f172a;
-  --card-bg:      rgba(30, 41, 59, 0.4);
-  --card-border:  rgba(148, 163, 184, 0.1);
-  --glass-bg:     rgba(9, 13, 22, 0.8);
+  --card-bg: rgba(30, 41, 59, 0.4);
+  --card-border: rgba(148, 163, 184, 0.1);
+  --glass-bg: rgba(9, 13, 22, 0.8);
 
   /* Text */
-  --text-main:    #f8fafc;
-  --text-muted:   #94a3b8;
-  --text-subtle:  #64748b;
+  --text-main: #f8fafc;
+  --text-muted: #94a3b8;
+  --text-subtle: #64748b;
 
   /* Accents */
-  --accent:       #2563eb;
-  --accent-2:     #3b82f6;
-  --accent-glow:  rgba(37, 99, 235, 0.15);
-  --grad-1:       #3b82f6;
-  --grad-2:       #2563eb;
-  --grad-3:       #1d4ed8;
+  --accent: #2563eb;
+  --accent-2: #3b82f6;
+  --accent-glow: rgba(37, 99, 235, 0.15);
+  --grad-1: #3b82f6;
+  --grad-2: #2563eb;
+  --grad-3: #1d4ed8;
 
   /* Borders */
-  --border:       rgba(148, 163, 184, 0.12);
+  --border: rgba(148, 163, 184, 0.12);
   --border-hover: rgba(37, 99, 235, 0.45);
 
   /* Shadows */
-  --shadow-card:  0 4px 20px rgba(0, 0, 0, 0.25);
-  --shadow-glow:  0 4px 20px rgba(37, 99, 235, 0.08);
+  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
+  --shadow-glow: 0 4px 20px rgba(37, 99, 235, 0.08);
 
   /* Transitions */
-  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* --- Light Mode Overrides --- */
 body:has(#dark-mode-toggle:not(:checked)) {
-  --bg:           #f8fafc;
+  --bg: #f8fafc;
   --bg-secondary: #f1f5f9;
-  --card-bg:      #ffffff;
-  --card-border:  rgba(148, 163, 184, 0.15);
-  --glass-bg:     rgba(248, 250, 252, 0.85);
-  --text-main:    #0f172a;
-  --text-muted:   #475569;
-  --text-subtle:  #94a3b8;
-  --accent:       #2563eb;
-  --accent-glow:  rgba(37, 99, 235, 0.1);
-  --border:       rgba(148, 163, 184, 0.12);
+  --card-bg: #ffffff;
+  --card-border: rgba(148, 163, 184, 0.15);
+  --glass-bg: rgba(248, 250, 252, 0.85);
+  --text-main: #0f172a;
+  --text-muted: #475569;
+  --text-subtle: #94a3b8;
+  --accent: #2563eb;
+  --accent-glow: rgba(37, 99, 235, 0.1);
+  --border: rgba(148, 163, 184, 0.12);
   --border-hover: rgba(37, 99, 235, 0.4);
-  --shadow-card:  0 4px 12px rgba(15, 23, 42, 0.05);
-  --shadow-glow:  0 4px 12px rgba(37, 99, 235, 0.05);
+  --shadow-card: 0 4px 12px rgba(15, 23, 42, 0.05);
+  --shadow-glow: 0 4px 12px rgba(37, 99, 235, 0.05);
 }
 
 /* =====================================================
    RESET & BASE
    ===================================================== */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -75,13 +81,22 @@ html {
 }
 
 /* Custom Scrollbar */
-html::-webkit-scrollbar { width: 6px; }
-html::-webkit-scrollbar-track { background: var(--bg); }
+html::-webkit-scrollbar {
+  width: 6px;
+}
+
+html::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+
 html::-webkit-scrollbar-thumb {
   background: var(--accent);
   border-radius: 3px;
 }
-html::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }
+
+html::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-2);
+}
 
 body {
   font-family: 'Inter', sans-serif;
@@ -92,7 +107,9 @@ body {
 }
 
 /* Hidden toggle */
-.toggle-checkbox { display: none; }
+.toggle-checkbox {
+  display: none;
+}
 
 /* =====================================================
    ANIMATED MESH BACKGROUND (Disabled for professional look)
@@ -110,39 +127,57 @@ body {
 }
 
 .orb-1 {
-  width: 600px; height: 600px;
+  width: 600px;
+  height: 600px;
   background: radial-gradient(circle, #7c3aed, transparent 70%);
-  top: -200px; left: -200px;
+  top: -200px;
+  left: -200px;
   animation-duration: 25s;
   animation-delay: 0s;
 }
 
 .orb-2 {
-  width: 500px; height: 500px;
+  width: 500px;
+  height: 500px;
   background: radial-gradient(circle, #6366f1, transparent 70%);
-  top: 30%; right: -150px;
+  top: 30%;
+  right: -150px;
   animation-duration: 20s;
   animation-delay: -8s;
   opacity: 0.12;
 }
 
 .orb-3 {
-  width: 400px; height: 400px;
+  width: 400px;
+  height: 400px;
   background: radial-gradient(circle, #06b6d4, transparent 70%);
-  bottom: 10%; left: 20%;
+  bottom: 10%;
+  left: 20%;
   animation-duration: 30s;
   animation-delay: -15s;
   opacity: 0.08;
 }
 
 @keyframes float-orb {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  33%       { transform: translate(40px, -60px) scale(1.08); }
-  66%       { transform: translate(-30px, 40px) scale(0.95); }
+
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+
+  33% {
+    transform: translate(40px, -60px) scale(1.08);
+  }
+
+  66% {
+    transform: translate(-30px, 40px) scale(0.95);
+  }
 }
 
 /* Light mode: softer orbs */
-.toggle-checkbox:not(:checked) ~ .mesh-bg .orb { opacity: 0.07; }
+.toggle-checkbox:not(:checked)~.mesh-bg .orb {
+  opacity: 0.07;
+}
 
 /* =====================================================
    SITE WRAPPER
@@ -154,6 +189,7 @@ body {
   width: 100%;
   display: flex;
   flex-direction: column;
+  padding-top: 73px; /* offset for fixed floating nav */
   transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
 }
 
@@ -161,7 +197,7 @@ body {
    NAVIGATION
    ===================================================== */
 nav {
-  position: sticky;
+  position: fixed;
   top: 0;
   z-index: 1000;
   display: flex;
@@ -173,7 +209,8 @@ nav {
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border);
-  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
+  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
 }
 
 .logo {
@@ -242,12 +279,27 @@ nav {
   transition: background 0.2s, border-color 0.2s, transform 0.2s;
   user-select: none;
 }
-.mode-btn:hover { border-color: var(--border-hover); transform: scale(1.05); }
 
-body:has(#dark-mode-toggle:checked) .icon-sun  { display: none; }
-body:has(#dark-mode-toggle:checked) .icon-moon { display: flex; }
-body:has(#dark-mode-toggle:not(:checked)) .icon-moon { display: none; }
-body:has(#dark-mode-toggle:not(:checked)) .icon-sun  { display: flex; }
+.mode-btn:hover {
+  border-color: var(--border-hover);
+  transform: scale(1.05);
+}
+
+body:has(#dark-mode-toggle:checked) .icon-sun {
+  display: none;
+}
+
+body:has(#dark-mode-toggle:checked) .icon-moon {
+  display: flex;
+}
+
+body:has(#dark-mode-toggle:not(:checked)) .icon-moon {
+  display: none;
+}
+
+body:has(#dark-mode-toggle:not(:checked)) .icon-sun {
+  display: flex;
+}
 
 /* Hamburger */
 .hamburger {
@@ -257,6 +309,16 @@ body:has(#dark-mode-toggle:not(:checked)) .icon-sun  { display: flex; }
   gap: 5px;
   padding: 4px;
 }
+
+/* Nav close button & overlay hidden on desktop */
+.nav-close-btn {
+  display: none;
+}
+
+.nav-overlay {
+  display: none;
+}
+
 .bar {
   display: block;
   width: 24px;
@@ -265,9 +327,19 @@ body:has(#dark-mode-toggle:not(:checked)) .icon-sun  { display: flex; }
   border-radius: 2px;
   transition: all 0.3s var(--ease);
 }
-.hamburger.active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
-.hamburger.active .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
-.hamburger.active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+
+.hamburger.active .bar:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+
+.hamburger.active .bar:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.hamburger.active .bar:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
 
 /* =====================================================
    SCROLL REVEAL
@@ -277,14 +349,27 @@ body:has(#dark-mode-toggle:not(:checked)) .icon-sun  { display: flex; }
   transform: translateY(40px);
   transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
 }
+
 .reveal.active {
   opacity: 1;
   transform: translateY(0);
 }
-.reveal-delay-1 { transition-delay: 0.1s; }
-.reveal-delay-2 { transition-delay: 0.2s; }
-.reveal-delay-3 { transition-delay: 0.3s; }
-.reveal-delay-4 { transition-delay: 0.4s; }
+
+.reveal-delay-1 {
+  transition-delay: 0.1s;
+}
+
+.reveal-delay-2 {
+  transition-delay: 0.2s;
+}
+
+.reveal-delay-3 {
+  transition-delay: 0.3s;
+}
+
+.reveal-delay-4 {
+  transition-delay: 0.4s;
+}
 
 /* =====================================================
    HERO SECTION
@@ -301,7 +386,9 @@ body:has(#dark-mode-toggle:not(:checked)) .icon-sun  { display: flex; }
   box-sizing: border-box;
 }
 
-.hero-text { flex: 1; }
+.hero-text {
+  flex: 1;
+}
 
 .hero-badge {
   display: inline-flex;
@@ -318,15 +405,27 @@ body:has(#dark-mode-toggle:not(:checked)) .icon-sun  { display: flex; }
   text-transform: uppercase;
   margin-bottom: 20px;
 }
+
 .hero-badge .dot {
-  width: 7px; height: 7px;
+  width: 7px;
+  height: 7px;
   background: #22c55e;
   border-radius: 50%;
   animation: pulse-dot 2s ease-in-out infinite;
 }
+
 @keyframes pulse-dot {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50%       { opacity: 0.6; transform: scale(0.8); }
+
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.6;
+    transform: scale(0.8);
+  }
 }
 
 h1 {
@@ -384,6 +483,7 @@ h1 {
   color: #fff;
   box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
 }
+
 .btn.primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
@@ -395,13 +495,17 @@ h1 {
   border: 1px solid var(--border);
   backdrop-filter: blur(10px);
 }
+
 .btn.secondary:hover {
   transform: translateY(-2px);
   border-color: var(--border-hover);
   background: rgba(37, 99, 235, 0.08);
 }
 
-.btn.full-width { width: 100%; justify-content: center; }
+.btn.full-width {
+  width: 100%;
+  justify-content: center;
+}
 
 /* =====================================================
    HERO PROFILE IMAGE
@@ -425,8 +529,10 @@ h1 {
 
 .profile-pic {
   position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
   border-radius: 20px;
   border: 2px solid var(--border);
@@ -436,16 +542,43 @@ h1 {
 }
 
 /* Dark mode (default) image states */
-.img-night-normal { opacity: 1; z-index: 3; cursor: default; }
-.hero-img-container:hover .img-night-hover { opacity: 1; z-index: 4; cursor: default; }
-.hero-img-container:hover .img-night-normal { opacity: 0; }
+.img-night-normal {
+  opacity: 1;
+  z-index: 3;
+  cursor: default;
+}
+
+.hero-img-container:hover .img-night-hover {
+  opacity: 1;
+  z-index: 4;
+  cursor: default;
+}
+
+.hero-img-container:hover .img-night-normal {
+  opacity: 0;
+}
 
 /* Light mode image states */
 body:has(#dark-mode-toggle:not(:checked)) .img-night-normal,
-body:has(#dark-mode-toggle:not(:checked)) .img-night-hover { opacity: 0 !important; }
-body:has(#dark-mode-toggle:not(:checked)) .img-day-normal { opacity: 1; z-index: 3; cursor: default; }
-body:has(#dark-mode-toggle:not(:checked)) .hero-img-container:hover .img-day-hover { opacity: 1; z-index: 4; cursor: default; }
-body:has(#dark-mode-toggle:not(:checked)) .hero-img-container:hover .img-day-normal { opacity: 0; }
+body:has(#dark-mode-toggle:not(:checked)) .img-night-hover {
+  opacity: 0 !important;
+}
+
+body:has(#dark-mode-toggle:not(:checked)) .img-day-normal {
+  opacity: 1;
+  z-index: 3;
+  cursor: default;
+}
+
+body:has(#dark-mode-toggle:not(:checked)) .hero-img-container:hover .img-day-hover {
+  opacity: 1;
+  z-index: 4;
+  cursor: default;
+}
+
+body:has(#dark-mode-toggle:not(:checked)) .hero-img-container:hover .img-day-normal {
+  opacity: 0;
+}
 
 .glow-effect {
   position: absolute;
@@ -458,7 +591,10 @@ body:has(#dark-mode-toggle:not(:checked)) .hero-img-container:hover .img-day-nor
   transform: translate(10px, 10px);
   transition: opacity 0.4s;
 }
-.hero-img-container:hover .glow-effect { opacity: 0.2; }
+
+.hero-img-container:hover .glow-effect {
+  opacity: 0.2;
+}
 
 /* =====================================================
    SECTION COMMONS
@@ -512,7 +648,11 @@ body:has(#dark-mode-toggle:not(:checked)) .hero-img-container:hover .img-day-nor
   font-size: 1.05rem;
   line-height: 1.8;
 }
-.about-text p strong { color: var(--text-main); font-weight: 600; }
+
+.about-text p strong {
+  color: var(--text-main);
+  font-weight: 600;
+}
 
 .tech-stack h3 {
   font-family: 'Outfit', sans-serif;
@@ -542,6 +682,7 @@ body:has(#dark-mode-toggle:not(:checked)) .hero-img-container:hover .img-day-nor
   transition: all 0.2s var(--ease);
   backdrop-filter: blur(10px);
 }
+
 .tags span:hover {
   border-color: var(--border-hover);
   color: var(--accent-2);
@@ -564,6 +705,7 @@ body:has(#dark-mode-toggle:not(:checked)) .hero-img-container:hover .img-day-nor
 .stat-item {
   text-align: center;
 }
+
 .stat-number {
   font-family: 'Outfit', sans-serif;
   font-size: 2.2rem;
@@ -575,6 +717,7 @@ body:has(#dark-mode-toggle:not(:checked)) .hero-img-container:hover .img-day-nor
   line-height: 1;
   margin-bottom: 6px;
 }
+
 .stat-label {
   font-size: 0.8rem;
   color: var(--text-muted);
@@ -603,6 +746,7 @@ a.project-card {
   transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
   backdrop-filter: blur(10px);
 }
+
 a.project-card:hover {
   transform: translateY(-6px);
   border-color: var(--border-hover);
@@ -614,12 +758,17 @@ a.project-card:hover {
   height: 200px;
   overflow: hidden;
 }
+
 .card-img img {
-  width: 100%; height: 100%;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
   transition: transform 0.5s var(--ease);
 }
-a.project-card:hover .card-img img { transform: scale(1.05); }
+
+a.project-card:hover .card-img img {
+  transform: scale(1.05);
+}
 
 .card-img-overlay {
   position: absolute;
@@ -628,7 +777,9 @@ a.project-card:hover .card-img img { transform: scale(1.05); }
   transition: opacity 0.3s;
 }
 
-.card-content { padding: 24px; }
+.card-content {
+  padding: 24px;
+}
 
 .card-header {
   display: flex;
@@ -637,6 +788,7 @@ a.project-card:hover .card-img img { transform: scale(1.05); }
   margin-bottom: 10px;
   gap: 10px;
 }
+
 .card-header h3 {
   font-family: 'Outfit', sans-serif;
   font-size: 1.15rem;
@@ -644,6 +796,7 @@ a.project-card:hover .card-img img { transform: scale(1.05); }
   color: var(--text-main);
   line-height: 1.3;
 }
+
 .arrow-icon {
   font-size: 1.1rem;
   opacity: 0;
@@ -652,6 +805,7 @@ a.project-card:hover .card-img img { transform: scale(1.05); }
   color: var(--accent-2);
   flex-shrink: 0;
 }
+
 a.project-card:hover .arrow-icon {
   opacity: 1;
   transform: translate(0, 0);
@@ -669,6 +823,7 @@ a.project-card:hover .arrow-icon {
   flex-wrap: wrap;
   gap: 6px;
 }
+
 .stack-badge {
   padding: 4px 10px;
   border-radius: 50px;
@@ -701,6 +856,7 @@ a.project-card:hover .arrow-icon {
   backdrop-filter: blur(10px);
   cursor: default;
 }
+
 .cert-card:hover {
   border-color: var(--border-hover);
   transform: translateY(-3px);
@@ -720,7 +876,10 @@ a.project-card:hover .arrow-icon {
   flex-shrink: 0;
   transition: background 0.3s;
 }
-.cert-card:hover .cert-icon { background: rgba(37, 99, 235, 0.18); }
+
+.cert-card:hover .cert-icon {
+  background: rgba(37, 99, 235, 0.18);
+}
 
 .cert-info h3 {
   font-family: 'Outfit', sans-serif;
@@ -729,11 +888,13 @@ a.project-card:hover .arrow-icon {
   margin-bottom: 4px;
   color: var(--text-main);
 }
+
 .issuer {
   color: var(--accent-2);
   font-size: 0.82rem;
   font-weight: 600;
 }
+
 .date {
   display: block;
   font-size: 0.75rem;
@@ -760,6 +921,7 @@ a.project-card:hover .arrow-icon {
   transition: all 0.3s var(--ease);
   backdrop-filter: blur(10px);
 }
+
 .blog-card:hover {
   transform: translateY(-5px);
   border-color: var(--border-hover);
@@ -777,6 +939,7 @@ a.project-card:hover .arrow-icon {
   letter-spacing: 0.08em;
   font-weight: 600;
 }
+
 .blog-tag {
   color: var(--accent-2);
   background: rgba(59, 130, 246, 0.12);
@@ -812,7 +975,11 @@ a.project-card:hover .arrow-icon {
   gap: 6px;
   transition: gap 0.2s var(--ease), opacity 0.2s;
 }
-.read-more:hover { gap: 10px; opacity: 0.8; }
+
+.read-more:hover {
+  gap: 10px;
+  opacity: 0.8;
+}
 
 /* =====================================================
    VIEW ALL BUTTON
@@ -831,7 +998,8 @@ a.project-card:hover .arrow-icon {
   margin: 0 auto;
   text-align: center;
 }
-.contact-container > p {
+
+.contact-container>p {
   color: var(--text-muted);
   margin-bottom: 40px;
   font-size: 1.05rem;
@@ -858,7 +1026,12 @@ a.project-card:hover .arrow-icon {
   transition: all 0.25s var(--ease);
   text-decoration: none;
 }
-.social-btn svg { width: 20px; height: 20px; }
+
+.social-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
 .social-btn:hover {
   border-color: var(--border-hover);
   color: var(--accent-2);
@@ -874,7 +1047,8 @@ a.project-card:hover .arrow-icon {
   text-align: left;
 }
 
-input, textarea {
+input,
+textarea {
   width: 100%;
   padding: 14px 18px;
   background: var(--card-bg);
@@ -887,15 +1061,24 @@ input, textarea {
   backdrop-filter: blur(10px);
   outline: none;
 }
-input::placeholder, textarea::placeholder { color: var(--text-subtle); }
-input:focus, textarea:focus {
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--text-subtle);
+}
+
+input:focus,
+textarea:focus {
   border-color: var(--border-hover);
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
   background: rgba(37, 99, 235, 0.03);
 }
 
 /* reCAPTCHA centering */
-.g-recaptcha { display: flex; justify-content: center; }
+.g-recaptcha {
+  display: flex;
+  justify-content: center;
+}
 
 /* =====================================================
    FOOTER
@@ -915,7 +1098,8 @@ footer {
 #back-to-top {
   position: fixed;
   bottom: 30px;
-  right: 30px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, var(--grad-1), var(--grad-2));
@@ -926,19 +1110,20 @@ footer {
   align-items: center;
   text-decoration: none;
   box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
-  z-index: 999;
+  z-index: 998;
   opacity: 0;
   visibility: hidden;
-  transform: translateY(20px);
   transition: all 0.3s var(--ease);
 }
+
 #back-to-top.show {
   opacity: 1;
   visibility: visible;
-  transform: translateY(0);
+  transform: translateX(-50%) translateY(0);
 }
+
 #back-to-top:hover {
-  transform: translateY(-4px);
+  transform: translateX(-50%) translateY(-4px);
   box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
 }
 
@@ -952,8 +1137,15 @@ footer {
   width: 100%;
   box-sizing: border-box;
 }
-.page-hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); margin-bottom: 14px; }
-.page-hero .subtitle { max-width: 500px; }
+
+.page-hero h1 {
+  font-size: clamp(1.8rem, 5vw, 3rem);
+  margin-bottom: 14px;
+}
+
+.page-hero .subtitle {
+  max-width: 500px;
+}
 
 /* =====================================================
    DIVIDER
@@ -968,54 +1160,116 @@ footer {
    RESPONSIVE — TABLET (≤ 900px)
    ===================================================== */
 @media (max-width: 900px) {
-  .hero { gap: 40px; }
-  .hero-img-container { width: 220px; height: 220px; }
-  .about-content { grid-template-columns: 1fr; gap: 40px; }
-  .stats-row { grid-template-columns: repeat(3, 1fr); }
+  .hero {
+    gap: 40px;
+  }
+
+  .hero-img-container {
+    width: 220px;
+    height: 220px;
+  }
+
+  .about-content {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+
+  .stats-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 /* =====================================================
    RESPONSIVE — MOBILE (≤ 768px)
    ===================================================== */
 @media (max-width: 768px) {
+
   /* Hamburger visible */
-  .hamburger { display: flex; }
+  .hamburger {
+    display: flex;
+  }
 
   /* Nav desktop links hidden by default on mobile */
   .nav-links {
-    /* Nav is full viewport width (no container offset), so left: 0 = screen edge */
     position: fixed;
     top: 0;
-    left: -100vw;      /* hide completely off-screen */
-    width: 100vw;
+    right: -280px; /* slide from right */
+    left: auto;
+    width: 280px;
     height: 100vh;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 40px 20px;
-    gap: 8px;
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    padding: 80px 28px 40px;
+    gap: 4px;
     background: var(--glass-bg);
-    backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
-    border-right: 1px solid var(--border);
-    transition: left 0.35s var(--ease);
-    z-index: 999;
-    box-shadow: 4px 0 40px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(28px);
+    -webkit-backdrop-filter: blur(28px);
+    border-left: 1px solid var(--border);
+    transition: right 0.35s var(--ease);
+    z-index: 1001;
+    box-shadow: -4px 0 40px rgba(0, 0, 0, 0.3);
+  }
+
+  /* Slide in from right */
+  .nav-links.active {
+    right: 0;
   }
-  /* Slide in from left */
-  .nav-links.active { left: 0; }
 
   .nav-links a {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
     font-weight: 600;
     display: block;
-    padding: 14px 30px;
+    padding: 12px 16px;
     width: 100%;
     border-radius: 12px;
   }
 
-  /* Close button (mode-btn) repositioned */
+  /* Nav close button */
+  .nav-close-btn {
+    display: flex;
+    position: absolute;
+    top: 22px;
+    right: 20px;
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    color: var(--text-main);
+    width: 36px;
+    height: 36px;
+    border-radius: 9px;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    cursor: pointer;
+    transition: background 0.2s, border-color 0.2s, transform 0.2s;
+    z-index: 1002;
+  }
+
+  .nav-close-btn:hover {
+    background: rgba(37, 99, 235, 0.1);
+    border-color: var(--border-hover);
+    transform: rotate(90deg);
+  }
+
+  /* Nav overlay backdrop */
+  .nav-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 1000;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.35s var(--ease);
+  }
+
+  .nav-overlay.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* Theme toggle repositioned inside mobile nav */
   .mode-btn {
     margin-top: 20px;
     margin-left: 0;
@@ -1027,18 +1281,44 @@ footer {
     text-align: center;
     gap: 30px;
   }
-  .hero-btns { justify-content: center; flex-wrap: wrap; }
-  .subtitle { margin: 0 auto 24px; }
-  .hero-badge { margin: 0 auto 16px; }
-  .hero-img-container { width: 180px; height: 180px; }
+
+  .hero-btns {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .subtitle {
+    margin: 0 auto 24px;
+  }
+
+  .hero-badge {
+    margin: 0 auto 16px;
+  }
+
+  .hero-img-container {
+    width: 180px;
+    height: 180px;
+  }
 
   /* Stats */
-  .stats-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
-  .stat-number { font-size: 1.6rem; }
-  .stat-label { font-size: 0.7rem; }
+  .stats-row {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+
+  .stat-number {
+    font-size: 1.6rem;
+  }
+
+  .stat-label {
+    font-size: 0.7rem;
+  }
 
   /* Certs */
-  .cert-card { flex-direction: column; text-align: center; }
+  .cert-card {
+    flex-direction: column;
+    text-align: center;
+  }
 
   /* Project grid single column on very narrow */
   .project-grid,
@@ -1046,24 +1326,55 @@ footer {
     grid-template-columns: 1fr;
   }
 
-  /* Back to top smaller */
-  #back-to-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }
+  /* Back to top smaller — centered */
+  #back-to-top {
+    bottom: 16px;
+    left: 50%;
+    right: auto;
+    width: 42px;
+    height: 42px;
+  }
 
   /* Section divider */
-  .section-divider { margin: 0 4%; }
+  .section-divider {
+    margin: 0 4%;
+  }
 }
 
 /* =====================================================
    RESPONSIVE — SMALL MOBILE (≤ 480px)
    ===================================================== */
 @media (max-width: 480px) {
-  h1 { letter-spacing: -1px; }
-  .stats-row { grid-template-columns: repeat(3, 1fr); }
-  .cert-grid { grid-template-columns: 1fr; }
-  .btn { padding: 11px 18px; font-size: 0.9rem; }
-  .hero-img-container { width: 150px; height: 150px; }
-  .social-links { gap: 10px; }
-  .social-btn { width: 44px; height: 44px; }
+  h1 {
+    letter-spacing: -1px;
+  }
+
+  .stats-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .cert-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .btn {
+    padding: 11px 18px;
+    font-size: 0.9rem;
+  }
+
+  .hero-img-container {
+    width: 150px;
+    height: 150px;
+  }
+
+  .social-links {
+    gap: 10px;
+  }
+
+  .social-btn {
+    width: 44px;
+    height: 44px;
+  }
 }
 
 /* =====================================================
@@ -1092,10 +1403,12 @@ footer {
   justify-content: center;
   transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
 }
+
 #chatbot-toggle-btn:hover {
   transform: scale(1.08) translateY(-2px);
   box-shadow: 0 8px 25px rgba(37, 99, 235, 0.45);
 }
+
 #chatbot-toggle-btn svg {
   width: 24px;
   height: 24px;
@@ -1133,11 +1446,13 @@ footer {
   opacity: 0;
   pointer-events: none;
 }
+
 #chatbot-window.active {
   transform: translateY(0);
   opacity: 1;
   pointer-events: auto;
 }
+
 #chatbot-window.hidden {
   display: none !important;
 }
@@ -1150,16 +1465,19 @@ footer {
   justify-content: space-between;
   align-items: center;
 }
+
 .header-avatar-info {
   display: flex;
   align-items: center;
   gap: 10px;
 }
+
 .avatar-container {
   position: relative;
   width: 36px;
   height: 36px;
 }
+
 .chat-avatar {
   width: 100%;
   height: 100%;
@@ -1167,6 +1485,7 @@ footer {
   object-fit: cover;
   border: 1.5px solid var(--accent);
 }
+
 .status-indicator {
   position: absolute;
   bottom: 0;
@@ -1176,9 +1495,11 @@ footer {
   border-radius: 50%;
   border: 1.5px solid var(--bg);
 }
+
 .status-indicator.online {
   background: #22c55e;
 }
+
 .header-text-info h4 {
   font-family: 'Outfit', sans-serif;
   font-size: 0.95rem;
@@ -1186,10 +1507,12 @@ footer {
   color: var(--text-main);
   line-height: 1.2;
 }
+
 .status-text {
   font-size: 0.72rem;
   color: var(--text-muted);
 }
+
 #chatbot-close-btn {
   background: transparent;
   border: none;
@@ -1202,6 +1525,7 @@ footer {
   transition: color 0.2s;
   border-radius: 6px;
 }
+
 #chatbot-close-btn:hover {
   color: var(--text-main);
   background: var(--card-bg);
@@ -1218,8 +1542,14 @@ footer {
 }
 
 /* Custom Scrollbar for Chat */
-#chatbot-messages::-webkit-scrollbar { width: 4px; }
-#chatbot-messages::-webkit-scrollbar-track { background: transparent; }
+#chatbot-messages::-webkit-scrollbar {
+  width: 4px;
+}
+
+#chatbot-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 #chatbot-messages::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 2px;
@@ -1229,12 +1559,15 @@ footer {
   display: flex;
   width: 100%;
 }
+
 .chat-message.user-msg {
   justify-content: flex-end;
 }
+
 .chat-message.bot-msg {
   justify-content: flex-start;
 }
+
 .msg-bubble {
   max-width: 80%;
   padding: 10px 14px;
@@ -1243,18 +1576,21 @@ footer {
   line-height: 1.5;
   word-break: break-word;
 }
+
 .user-msg .msg-bubble {
   background: var(--accent);
   color: #fff;
   border-bottom-right-radius: 2px;
   box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
 }
+
 .bot-msg .msg-bubble {
   background: var(--card-bg);
   color: var(--text-main);
   border: 1px solid var(--border);
   border-bottom-left-radius: 2px;
 }
+
 .bot-msg.error-msg .msg-bubble {
   border-color: rgba(239, 68, 68, 0.3);
   background: rgba(239, 68, 68, 0.05);
@@ -1270,6 +1606,7 @@ footer {
   gap: 8px;
   align-items: center;
 }
+
 #chatbot-input-field {
   flex-grow: 1;
   background: var(--card-bg);
@@ -1281,9 +1618,11 @@ footer {
   outline: none;
   transition: border-color 0.2s;
 }
+
 #chatbot-input-field:focus {
   border-color: var(--border-hover);
 }
+
 #chatbot-send-btn {
   background: var(--accent);
   color: #fff;
@@ -1298,10 +1637,12 @@ footer {
   transition: background 0.2s, transform 0.2s;
   flex-shrink: 0;
 }
+
 #chatbot-send-btn:hover {
   background: var(--accent-2);
   transform: scale(1.05);
 }
+
 #chatbot-send-btn svg {
   width: 16px;
   height: 16px;
@@ -1314,6 +1655,7 @@ footer {
   gap: 4px;
   padding: 12px 16px !important;
 }
+
 .dot-bounce {
   width: 6px;
   height: 6px;
@@ -1322,12 +1664,26 @@ footer {
   display: inline-block;
   animation: bounce 1.4s infinite ease-in-out both;
 }
-.dot-bounce:nth-child(1) { animation-delay: -0.32s; }
-.dot-bounce:nth-child(2) { animation-delay: -0.16s; }
+
+.dot-bounce:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.dot-bounce:nth-child(2) {
+  animation-delay: -0.16s;
+}
 
 @keyframes bounce {
-  0%, 80%, 100% { transform: scale(0); }
-  40% { transform: scale(1.0); }
+
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1.0);
+  }
 }
 
 /* Markdown spacing inside bubbles */
@@ -1335,6 +1691,7 @@ footer {
   padding-left: 20px;
   margin: 6px 0;
 }
+
 .msg-bubble li {
   margin-bottom: 4px;
 }
@@ -1345,11 +1702,11 @@ footer {
     bottom: 16px;
     right: 16px;
   }
+
   #chatbot-window {
     width: calc(100vw - 32px);
     right: 16px;
     bottom: 80px;
     height: 60vh;
   }
-}
-
+}
\ No newline at end of file
diff --git a/assets/js/chat.js b/assets/js/chat.js
index a245ce8..9333721 100644
--- a/assets/js/chat.js
+++ b/assets/js/chat.js
@@ -38,7 +38,7 @@ document.addEventListener("DOMContentLoaded", () => {
         chatHistory.push({ role: "user", text: message });
         inputField.value = "";
 
-        // Cap history to last 10 messages to save context limits
+        // Cap history to last 10 messages
         if (chatHistory.length > 10) {
             chatHistory = chatHistory.slice(-10);
         }
@@ -47,6 +47,9 @@ document.addEventListener("DOMContentLoaded", () => {
         const typingIndicator = showTypingIndicator();
         isWaiting = true;
 
+        // Try backend proxy first, fallback to client-side if it fails
+        let replySuccess = false;
+
         try {
             const response = await fetch("api/chat.php", {
                 method: "POST",
@@ -55,28 +58,85 @@ document.addEventListener("DOMContentLoaded", () => {
                 },
                 body: JSON.stringify({
                     message: message,
-                    history: chatHistory.slice(0, -1) // pass history excluding the current user message (which is passed in "message" parameter)
+                    history: chatHistory.slice(0, -1)
                 })
             });
 
             const data = await response.json();
-            removeTypingIndicator(typingIndicator);
 
             if (response.ok && data.reply) {
+                removeTypingIndicator(typingIndicator);
                 const botReply = data.reply;
                 addMessage(botReply, "bot-msg");
                 chatHistory.push({ role: "model", text: botReply });
-            } else {
-                const errMsg = data.error || "Sorry, I encountered an error. Please try again.";
-                addMessage(errMsg, "bot-msg error-msg");
+                replySuccess = true;
             }
         } catch (error) {
-            removeTypingIndicator(typingIndicator);
-            addMessage("Unable to connect to assistant. Please check your internet connection.", "bot-msg error-msg");
-            console.error("Chatbot Error:", error);
-        } finally {
-            isWaiting = false;
+            console.warn("Backend API call failed, attempting client-side fallback. Details:", error);
         }
+
+        // CLIENT-SIDE FALLBACK (e.g. for InfinityFree or local cert errors)
+        if (!replySuccess) {
+            const config = window.chatbotConfig;
+            if (config && config.apiKey && config.systemPrompt) {
+                try {
+                    // Structure payload for Gemini client-side and inject systemInstructions in first user message
+                    let firstMsgPrepended = false;
+                    const contents = chatHistory.map(msg => {
+                        let text = msg.text;
+                        const role = msg.role === 'user' ? 'user' : 'model';
+                        if (!firstMsgPrepended && role === 'user') {
+                            text = `System Context & Instructions:\n${config.systemPrompt}\n\nUser Message: ${text}`;
+                            firstMsgPrepended = true;
+                        }
+                        return {
+                            role: role,
+                            parts: [{ text: text }]
+                        };
+                    });
+
+                    const requestPayload = {
+                        contents: contents,
+                        generationConfig: {
+                            temperature: 0.7,
+                            maxOutputTokens: 800
+                        }
+                    };
+
+                    const url = `https://generativelanguage.googleapis.com/v1/models/gemini-3.5-flash:generateContent?key=${encodeURIComponent(config.apiKey)}`;
+                    
+                    const response = await fetch(url, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify(requestPayload)
+                    });
+
+                    const data = await response.json();
+                    removeTypingIndicator(typingIndicator);
+
+                    if (response.ok && data.candidates && data.candidates[0].content.parts[0].text) {
+                        const botReply = data.candidates[0].content.parts[0].text;
+                        addMessage(botReply, "bot-msg");
+                        chatHistory.push({ role: "model", text: botReply });
+                        replySuccess = true;
+                    } else {
+                        const errMsg = data.error?.message || "Sorry, I encountered an error. Please try again.";
+                        addMessage(errMsg, "bot-msg error-msg");
+                    }
+                } catch (fallbackError) {
+                    removeTypingIndicator(typingIndicator);
+                    addMessage("Unable to connect to assistant. Please check your internet connection.", "bot-msg error-msg");
+                    console.error("Direct API Fallback Error:", fallbackError);
+                }
+            } else {
+                removeTypingIndicator(typingIndicator);
+                addMessage("API request blocked by host firewall and fallback config is missing.", "bot-msg error-msg");
+            }
+        }
+
+        isWaiting = false;
     });
 
     // Helper: Add message bubble to logs
@@ -87,7 +147,6 @@ document.addEventListener("DOMContentLoaded", () => {
         const bubbleDiv = document.createElement("div");
         bubbleDiv.className = "msg-bubble";
         
-        // Format simple Markdown conversions (bold, bullet points, line breaks)
         bubbleDiv.innerHTML = formatMessageText(text);
         
         messageDiv.appendChild(bubbleDiv);
@@ -125,16 +184,13 @@ document.addEventListener("DOMContentLoaded", () => {
 
     // Helper: Simple Markdown Formatter
     function formatMessageText(text) {
-        // Safe escaping (minimal to allow HTML format helper if needed, but safe)
         let escaped = text
             .replace(/&/g, "&amp;")
             .replace(/</g, "&lt;")
             .replace(/>/g, "&gt;");
 
-        // Bold (**bold**)
         escaped = escaped.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
 
-        // Bullet points starting with "- " or "* "
         const lines = escaped.split("\n");
         let inList = false;
         let formatted = "";
@@ -160,7 +216,6 @@ document.addEventListener("DOMContentLoaded", () => {
             formatted += "</ul>";
         }
 
-        // Clean up double linebreaks
         return formatted.replace(/(<br>\s*){3,}/g, "<br><br>");
     }
 });
diff --git a/views/chatbot.php b/views/chatbot.php
index ee78b93..33bbb7f 100644
--- a/views/chatbot.php
+++ b/views/chatbot.php
@@ -1,3 +1,96 @@
+<?php
+// Since this is included in index.php, $mysqli is already defined and loaded.
+// Let's retrieve context safely. If for some reason $mysqli is not available, we have fallback strings.
+$settings = null;
+$projects = [];
+$certs = [];
+$articles = [];
+
+if (isset($mysqli) && !$mysqli->connect_error) {
+    // 1. Settings / About
+    $settingsQuery = $mysqli->query("SELECT * FROM settings WHERE id = 1");
+    if ($settingsQuery) {
+        $settings = $settingsQuery->fetch_assoc();
+    }
+
+    // 2. Projects
+    $projectsQuery = $mysqli->query("SELECT title, des, techstack, url FROM projects");
+    if ($projectsQuery) {
+        while ($row = $projectsQuery->fetch_assoc()) {
+            $projects[] = $row;
+        }
+    }
+
+    // 3. Certifications
+    $certsQuery = $mysqli->query("SELECT title, issuer, date_issued FROM certifications");
+    if ($certsQuery) {
+        while ($row = $certsQuery->fetch_assoc()) {
+            $certs[] = $row;
+        }
+    }
+
+    // 4. Articles
+    $articlesQuery = $mysqli->query("SELECT title, excerpt, date_published, tag, url FROM articles");
+    if ($articlesQuery) {
+        while ($row = $articlesQuery->fetch_assoc()) {
+            $articles[] = $row;
+        }
+    }
+}
+
+// Build system instructions
+$systemPrompt = "You are a friendly, professional, and intelligent AI assistant built into the personal portfolio website of Cris Charles Garcia.\n";
+$systemPrompt .= "Your role is to represent Cris, assist recruiters, potential clients, and visitors, and answer questions about his background, experience, skills, and projects.\n\n";
+
+$systemPrompt .= "Cris's Profile & Biography:\n";
+if ($settings) {
+    $systemPrompt .= "- Bio Paragraph 1: " . $settings['about_text_1'] . "\n";
+    $systemPrompt .= "- Bio Paragraph 2: " . $settings['about_text_2'] . "\n";
+    $systemPrompt .= "- Years coding: " . $settings['years_coding'] . "\n";
+    $systemPrompt .= "- Projects completed: " . $settings['projects_count'] . "\n";
+    $systemPrompt .= "- Certifications: " . $settings['certifications_count'] . "\n";
+    $systemPrompt .= "- Github: " . $settings['github_url'] . "\n";
+    $systemPrompt .= "- LinkedIn: " . $settings['linkedin_url'] . "\n";
+    $systemPrompt .= "- Instagram: " . $settings['instagram_url'] . "\n";
+    $systemPrompt .= "- Facebook: " . $settings['facebook_url'] . "\n";
+    $systemPrompt .= "- TikTok: " . $settings['tiktok_url'] . "\n";
+} else {
+    $systemPrompt .= "- Cris is a senior IT student majoring in Software Development based in Laguna, Philippines.\n";
+}
+
+$systemPrompt .= "\nCris's Projects:\n";
+foreach ($projects as $p) {
+    $systemPrompt .= "- **" . $p['title'] . "**: " . $p['des'] . " (Tech: " . $p['techstack'] . "). Link: " . $p['url'] . "\n";
+}
+
+$systemPrompt .= "\nCris's Certifications:\n";
+foreach ($certs as $c) {
+    $systemPrompt .= "- " . $c['title'] . " by " . $c['issuer'] . " (Issued: " . $c['date_issued'] . ")\n";
+}
+
+$systemPrompt .= "\nCris's Latest Articles/Blog Posts:\n";
+foreach ($articles as $a) {
+    $systemPrompt .= "- \"" . $a['title'] . "\": " . $a['excerpt'] . " [Tag: " . $a['tag'] . ", Date: " . $a['date_published'] . ", Link: " . $a['url'] . "]\n";
+}
+
+$systemPrompt .= "\nGuidelines for your responses:\n";
+$systemPrompt .= "1. Respond in first-person (e.g., \"I am a senior IT student...\" or \"In my project UniMarket...\") or as a dedicated assistant of Cris. Represent Cris accurately, warmly, and professionally.\n";
+$systemPrompt .= "2. Keep responses brief, engaging, and directly related to the question. Recruiters appreciate concise answers.\n";
+$systemPrompt .= "3. If asked about contact options or hiring, point them to his contact form at the bottom of the page or his professional links (Github, LinkedIn).\n";
+$systemPrompt .= "4. Do not make up facts or external projects not listed in the context. If you don't know the answer, politely invite the user to contact Cris directly.\n";
+$systemPrompt .= "5. Format your output using simple markdown (like bolding or bullet points) to make it readable.\n";
+
+$apiKey = getenv('GEMINI_API_KEY') ?: ($_ENV['GEMINI_API_KEY'] ?? '');
+?>
+
+<!-- Pass DB configuration context directly to javascript to allow direct API requests on restricted hosting environments (like InfinityFree) -->
+<script>
+window.chatbotConfig = {
+    apiKey: <?php echo json_encode($apiKey); ?>,
+    systemPrompt: <?php echo json_encode($systemPrompt); ?>
+};
+</script>
+
 <!-- Chatbot Widget HTML -->
 <div id="portfolio-chatbot-widget">
     <!-- Floating Chat Toggle Bubble -->
diff --git a/views/nav.php b/views/nav.php
index c198d1a..b3baea2 100644
--- a/views/nav.php
+++ b/views/nav.php
@@ -11,6 +11,7 @@
     </div>
 
     <div class="nav-links" id="nav-links" role="navigation">
+        <button class="nav-close-btn" id="nav-close-btn" aria-label="Close menu">×</button>
         <a href="index.php#about"        class="nav-item">About</a>
         <a href="index.php#projects"     class="nav-item">Work</a>
         <a href="index.php#certificates" class="nav-item">Certs</a>
@@ -23,6 +24,9 @@
     </div>
 </nav>
 
+<!-- Nav overlay backdrop -->
+<div class="nav-overlay" id="nav-overlay"></div>
+
 <!-- Shared Navigation Script -->
 <script>
 document.addEventListener("DOMContentLoaded", () => {
@@ -36,39 +40,50 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     // 2. Mobile Hamburger Menu
-    const hamburger = document.getElementById("hamburger");
-    const navLinks  = document.getElementById("nav-links");
-    const navItems  = document.querySelectorAll(".nav-item");
+    const hamburger  = document.getElementById("hamburger");
+    const navLinks   = document.getElementById("nav-links");
+    const navCloseBtn = document.getElementById("nav-close-btn");
+    const navOverlay = document.getElementById("nav-overlay");
+    const navItems   = document.querySelectorAll(".nav-item");
 
     if (hamburger && navLinks) {
+        function openMenu() {
+            hamburger.classList.add("active");
+            navLinks.classList.add("active");
+            if (navOverlay) navOverlay.classList.add("active");
+            hamburger.setAttribute("aria-expanded", "true");
+            document.body.style.overflow = "hidden";
+        }
+
         function closeMenu() {
             hamburger.classList.remove("active");
             navLinks.classList.remove("active");
+            if (navOverlay) navOverlay.classList.remove("active");
             hamburger.setAttribute("aria-expanded", "false");
+            document.body.style.overflow = "";
         }
 
         hamburger.addEventListener("click", (e) => {
             e.stopPropagation();
-            const isOpen = hamburger.classList.toggle("active");
-            navLinks.classList.toggle("active");
-            hamburger.setAttribute("aria-expanded", isOpen);
+            if (hamburger.classList.contains("active")) {
+                closeMenu();
+            } else {
+                openMenu();
+            }
         });
 
+        // Close via X button
+        if (navCloseBtn) navCloseBtn.addEventListener("click", closeMenu);
+
+        // Close via overlay click
+        if (navOverlay) navOverlay.addEventListener("click", closeMenu);
+
         // Close on nav link click
         navItems.forEach(item => item.addEventListener("click", closeMenu));
 
-        // Close when clicking outside the menu
-        document.addEventListener("click", (e) => {
-            if (navLinks.classList.contains("active") && !navLinks.contains(e.target) && !hamburger.contains(e.target)) {
-                closeMenu();
-            }
-        });
-
         // Close on scroll
-        window.addEventListener('scroll', () => {
-            if (navLinks.classList.contains('active')) {
-                closeMenu();
-            }
+        window.addEventListener("scroll", () => {
+            if (navLinks.classList.contains("active")) closeMenu();
         });
     }
 });