diff --git a/css/style.css b/css/style.css
index 5d3fe92..b54d326 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,10 +1,10 @@
 :root {
-  --bg: #07111f;
-  --bg-soft: #0c172b;
-  --surface: rgba(10, 20, 36, 0.72);
-  --surface-strong: rgba(12, 24, 44, 0.92);
-  --surface-light: rgba(255, 255, 255, 0.06);
-  --border: rgba(145, 201, 255, 0.18);
+  --bg: #000000;
+  --bg-soft: #000000;
+  --surface: rgba(0, 0, 0, 0.88);
+  --surface-strong: rgba(0, 0, 0, 0.96);
+  --surface-light: rgba(255, 255, 255, 0.04);
+  --border: rgba(255, 255, 255, 0.1);
   --text: #f4f8ff;
   --muted: #a9b8d0;
   --accent: #63e6ff;
@@ -15,14 +15,18 @@
   --radius-lg: 32px;
   --radius-md: 20px;
   --radius-sm: 14px;
-  --nav-bg: rgba(4, 10, 22, 0.2);
-  --nav-scrolled-bg: rgba(6, 14, 28, 0.88);
+  --nav-bg: rgba(0, 0, 0, 0.3);
+  --nav-scrolled-bg: rgba(0, 0, 0, 0.94);
   --nav-text: rgba(244, 248, 255, 0.9);
   --nav-hover-bg: rgba(255, 255, 255, 0.08);
   --overlay-bg:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
-    rgba(6, 12, 24, 0.68);
-  --grid-line: rgba(255, 255, 255, 0.025);
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.05),
+      rgba(255, 255, 255, 0.01)
+    ),
+    rgba(0, 0, 0, 0.92);
+  --grid-line: rgba(255, 255, 255, 0.02);
   --section-outline: rgba(255, 255, 255, 0.03);
   --toggle-track: rgba(255, 255, 255, 0.12);
   --toggle-thumb: linear-gradient(135deg, var(--accent), var(--accent-strong));
@@ -33,21 +37,25 @@
   --footer-link: #d8e6fb;
   --footer-heading: #f4f8ff;
   --footer-bg:
-    linear-gradient(135deg, rgba(99, 230, 255, 0.12), rgba(139, 92, 246, 0.12)),
-    rgba(6, 12, 24, 0.85);
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.03),
+      rgba(255, 255, 255, 0.01)
+    ),
+    rgba(0, 0, 0, 0.95);
   --footer-border: rgba(255, 255, 255, 0.08);
-  --footer-divider: rgba(255, 255, 255, 0.65);
+  --footer-divider: rgba(255, 255, 255, 0.4);
   --button-primary-text: #04111d;
   --button-secondary-hover-text: #ffffff;
 }
 
 body.light-theme {
-  --bg: #edf4ff;
-  --bg-soft: #dce8fb;
-  --surface: rgba(255, 255, 255, 0.78);
-  --surface-strong: rgba(244, 248, 255, 0.96);
-  --surface-light: rgba(12, 26, 52, 0.04);
-  --border: rgba(57, 102, 182, 0.16);
+  --bg: #ffffff;
+  --bg-soft: #ffffff;
+  --surface: rgba(255, 255, 255, 0.94);
+  --surface-strong: rgba(255, 255, 255, 0.98);
+  --surface-light: rgba(0, 0, 0, 0.03);
+  --border: rgba(0, 0, 0, 0.08);
   --text: #10203d;
   --muted: #536684;
   --accent: #1f7cff;
@@ -55,15 +63,19 @@ body.light-theme {
   --accent-warm: #ff8a57;
   --success: #00b67a;
   --shadow: 0 24px 70px rgba(56, 82, 128, 0.14);
-  --nav-bg: rgba(237, 244, 255, 0.7);
-  --nav-scrolled-bg: rgba(249, 251, 255, 0.94);
+  --nav-bg: rgba(255, 255, 255, 0.72);
+  --nav-scrolled-bg: rgba(255, 255, 255, 0.96);
   --nav-text: rgba(16, 32, 61, 0.9);
-  --nav-hover-bg: rgba(31, 124, 255, 0.08);
+  --nav-hover-bg: rgba(0, 0, 0, 0.05);
   --overlay-bg:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(229, 238, 255, 0.78)),
-    rgba(255, 255, 255, 0.72);
-  --grid-line: rgba(16, 32, 61, 0.035);
-  --section-outline: rgba(18, 36, 72, 0.05);
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.98),
+      rgba(255, 255, 255, 0.94)
+    ),
+    rgba(255, 255, 255, 0.94);
+  --grid-line: rgba(0, 0, 0, 0.025);
+  --section-outline: rgba(0, 0, 0, 0.05);
   --toggle-track: rgba(16, 32, 61, 0.12);
   --toggle-thumb: linear-gradient(135deg, #f7b733, #fc4a1a);
   --toggle-text: #10203d;
@@ -73,10 +85,10 @@ body.light-theme {
   --footer-link: #536684;
   --footer-heading: #10203d;
   --footer-bg:
-    linear-gradient(135deg, rgba(31, 124, 255, 0.08), rgba(124, 77, 255, 0.08)),
-    rgba(255, 255, 255, 0.88);
-  --footer-border: rgba(57, 102, 182, 0.14);
-  --footer-divider: rgba(83, 102, 132, 0.38);
+    linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01)),
+    rgba(255, 255, 255, 0.98);
+  --footer-border: rgba(0, 0, 0, 0.08);
+  --footer-divider: rgba(0, 0, 0, 0.18);
   --button-primary-text: #ffffff;
   --button-secondary-hover-text: #10203d;
 }
@@ -98,21 +110,13 @@ body {
   overflow-x: hidden;
   font-family: "Manrope", sans-serif;
   color: var(--text);
-  background:
-    radial-gradient(circle at top left, rgba(99, 230, 255, 0.15), transparent 30%),
-    radial-gradient(circle at top right, rgba(139, 92, 246, 0.16), transparent 26%),
-    radial-gradient(circle at bottom center, rgba(255, 143, 92, 0.12), transparent 24%),
-    linear-gradient(180deg, var(--bg) 0%, #07111f 42%, #0b1730 100%);
+  background: var(--bg);
   font-weight: 500;
   line-height: 1.65;
 }
 
 body.light-theme {
-  background:
-    radial-gradient(circle at top left, rgba(31, 124, 255, 0.12), transparent 30%),
-    radial-gradient(circle at top right, rgba(124, 77, 255, 0.12), transparent 26%),
-    radial-gradient(circle at bottom center, rgba(255, 138, 87, 0.1), transparent 24%),
-    linear-gradient(180deg, #f7faff 0%, #edf4ff 48%, #e4eefc 100%);
+  background: var(--bg);
 }
 
 body::before {
@@ -229,18 +233,16 @@ strong {
   box-shadow: 0 0 14px rgba(114, 241, 184, 0.8);
 }
 
-.content-panel,
+/* .content-panel,
 #win,
 #mts,
-.card,
 .intro-shell {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow);
   backdrop-filter: blur(18px);
-}
-
+} */
 /* NAVBAR */
 
 #topnav {
@@ -260,7 +262,11 @@ strong {
   height: 52px;
   border-radius: 16px;
   background:
-    radial-gradient(circle at top left, rgba(99, 230, 255, 0.38), transparent 55%),
+    radial-gradient(
+      circle at top left,
+      rgba(99, 230, 255, 0.38),
+      transparent 55%
+    ),
     linear-gradient(135deg, rgba(139, 92, 246, 0.55), rgba(6, 15, 30, 0.7));
   border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
@@ -346,7 +352,10 @@ body.light-theme .nav-item.active {
   color: var(--toggle-text);
   font-weight: 700;
   cursor: pointer;
-  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
+  transition:
+    background 0.25s ease,
+    border-color 0.25s ease,
+    transform 0.25s ease;
 }
 
 .theme-toggle:hover {
@@ -398,6 +407,7 @@ body.light-theme .theme-toggle-thumb {
   display: flex;
   align-items: center;
   position: relative;
+  overflow: hidden;
 }
 
 #cover::before,
@@ -434,12 +444,24 @@ body.light-theme .theme-toggle-thumb {
   padding: 56px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 40px;
-  background:
-    var(--overlay-bg);
+  background: var(--overlay-bg);
   box-shadow: var(--shadow);
   backdrop-filter: blur(18px);
 }
 
+.hero-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
+  align-items: center;
+  gap: 42px;
+}
+
+.hero-copy {
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+
 .hero-badge {
   display: inline-flex;
   align-items: center;
@@ -490,10 +512,21 @@ h3 {
 }
 
 .hero-text {
-  max-width: 760px;
-  margin-top: 22px;
+  max-width: 420px;
+  margin-top: 26px;
   color: var(--muted);
-  font-size: 1.15rem;
+  font-size: 1.08rem;
+  line-height: 1.7;
+}
+
+.hero-subtext {
+  max-width: 380px;
+  margin-top: 10px;
+  color: var(--accent);
+  font-family: "Space Grotesk", sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
 }
 
 .hero-actions {
@@ -518,7 +551,11 @@ h3 {
   font-weight: 800;
   letter-spacing: 0.02em;
   text-decoration: none !important;
-  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
+  transition:
+    transform 0.25s ease,
+    box-shadow 0.25s ease,
+    background 0.25s ease,
+    border-color 0.25s ease;
 }
 
 .hero-btn:hover,
@@ -576,6 +613,49 @@ h3 {
   font-size: 0.95rem;
 }
 
+.hero-media {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.hero-video-shell {
+  position: relative;
+  min-height: 540px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-video {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  min-height: 508px;
+  object-fit: cover;
+  background: transparent;
+}
+
+.hero-video-dark {
+  display: none;
+}
+
+body.light-theme .hero-video-light {
+  display: block;
+}
+
+body.light-theme .hero-video-dark {
+  display: none;
+}
+
+body:not(.light-theme) .hero-video-light {
+  display: none;
+}
+
+body:not(.light-theme) .hero-video-dark {
+  display: block;
+}
+
 /* ABOUT */
 
 .intro-shell {
@@ -615,7 +695,11 @@ h3 {
   margin: 0 auto;
   padding: 16px;
   border-radius: 38px;
-  background: linear-gradient(145deg, rgba(99, 230, 255, 0.18), rgba(139, 92, 246, 0.18));
+  background: linear-gradient(
+    145deg,
+    rgba(99, 230, 255, 0.18),
+    rgba(139, 92, 246, 0.18)
+  );
 }
 
 .profile-frame::before {
@@ -624,8 +708,17 @@ h3 {
   inset: -1px;
   border-radius: 38px;
   padding: 1px;
-  background: linear-gradient(135deg, rgba(99, 230, 255, 0.8), rgba(139, 92, 246, 0.6));
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  background: linear-gradient(
+    135deg,
+    rgba(99, 230, 255, 0.8),
+    rgba(139, 92, 246, 0.6)
+  );
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
 }
@@ -634,7 +727,7 @@ h3 {
   width: 280px;
   height: 280px;
   border: 6px solid rgba(255, 255, 255, 0.08);
-  background: url("../img/profile_pic.jpg") center/cover;
+  background: url("../img/profile_pic.png") center/cover;
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
 }
 
@@ -704,7 +797,10 @@ h3 {
   color: var(--text);
   font-weight: 700;
   text-decoration: none !important;
-  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
+  transition:
+    transform 0.25s ease,
+    background 0.25s ease,
+    border-color 0.25s ease;
 }
 
 .connect-link:hover {
@@ -751,7 +847,11 @@ h3 {
   right: -40px;
   top: -50px;
   border-radius: 50%;
-  background: radial-gradient(circle, rgba(99, 230, 255, 0.25), transparent 65%);
+  background: radial-gradient(
+    circle,
+    rgba(99, 230, 255, 0.25),
+    transparent 65%
+  );
   pointer-events: none;
 }
 
@@ -771,12 +871,19 @@ h3 {
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.07);
-  transition: transform 0.22s ease, background 0.22s ease;
+  display: block;
+  transition:
+    transform 0.22s ease,
+    background 0.22s ease,
+    border-color 0.22s ease,
+    box-shadow 0.22s ease;
 }
 
 .tech-logo:hover {
   transform: translateY(-4px);
   background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(99, 230, 255, 0.2);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
 }
 
 .tech-logo-sm {
@@ -798,12 +905,24 @@ h3 {
   margin: 0;
   justify-self: stretch;
   object-fit: contain;
+  object-position: center;
 }
 
 .tech-grid .tech-logo-sm {
   height: 72px;
 }
 
+.tech-grid .tech-logo-wordmark {
+  padding: 16px 20px;
+  background: rgba(255, 255, 255, 0.94);
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+body.light-theme .tech-grid .tech-logo-wordmark {
+  background: rgba(16, 32, 61, 0.04);
+  border-color: rgba(16, 32, 61, 0.08);
+}
+
 #resume-btn {
   margin-top: 8px;
 }
@@ -815,9 +934,17 @@ h3 {
 }
 
 .card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
   overflow: hidden;
   height: 100%;
-  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+  transition:
+    transform 0.25s ease,
+    box-shadow 0.25s ease,
+    border-color 0.25s ease;
 }
 
 .card:hover {
@@ -844,11 +971,16 @@ h3 {
   gap: 14px;
   height: 100%;
   padding: 24px 22px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%),
+    var(--surface);
+  color: var(--text);
 }
 
 .card-title {
   font-size: 1.45rem;
   line-height: 1.2;
+  color: var(--text);
 }
 
 .used-skills {
@@ -869,6 +1001,32 @@ h3 {
 
 .card-btn {
   flex: 1;
+  background: var(--surface-light);
+  border-color: var(--border);
+  color: var(--text);
+}
+
+.card-body .lead {
+  color: var(--muted);
+}
+
+.card-body .lead.used-skills {
+  color: var(--accent);
+}
+
+.card-btn .btn-img {
+  flex-shrink: 0;
+}
+
+body.light-theme .card-body {
+  background:
+    linear-gradient(180deg, rgba(31, 124, 255, 0.05), transparent 24%),
+    var(--surface);
+}
+
+body.light-theme .card-btn {
+  background: rgba(16, 32, 61, 0.03);
+  border-color: rgba(16, 32, 61, 0.08);
 }
 
 /* FOOTER */
@@ -890,7 +1048,12 @@ h3 {
   margin: 18px auto;
   border: none;
   height: 1px;
-  background: linear-gradient(90deg, transparent, var(--footer-divider), transparent);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--footer-divider),
+    transparent
+  );
 }
 
 #footer .lead,
@@ -903,7 +1066,7 @@ h3 {
 @media (max-width: 991px) {
   #topnav {
     padding: 14px 16px;
-    background: rgba(6, 14, 28, 0.86);
+    background: var(--nav-scrolled-bg);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(18px);
   }
@@ -937,6 +1100,22 @@ h3 {
     padding: 40px 28px;
   }
 
+  .hero-layout {
+    grid-template-columns: 1fr;
+    gap: 28px;
+  }
+
+  .hero-video-shell {
+    max-width: 460px;
+    min-height: 0;
+    margin: 0 auto;
+  }
+
+  .hero-video {
+    min-height: 0;
+    aspect-ratio: 1 / 1;
+  }
+
   .hero-stats,
   .detail-grid {
     grid-template-columns: 1fr;
@@ -973,6 +1152,10 @@ h3 {
     border-radius: 28px;
   }
 
+  .hero-layout {
+    gap: 22px;
+  }
+
   .hero-badge,
   .eyebrow {
     font-size: 0.76rem;
@@ -995,6 +1178,14 @@ h3 {
     font-size: 0.98rem;
   }
 
+  .hero-text {
+    max-width: 100%;
+  }
+
+  .hero-subtext {
+    font-size: 0.92rem;
+  }
+
   .hero-actions,
   .hero-stats {
     margin-top: 22px;
@@ -1010,6 +1201,14 @@ h3 {
     border-radius: 18px;
   }
 
+  .hero-video-shell {
+    width: 100%;
+  }
+
+  .hero-video {
+    min-height: 0;
+  }
+
   .hero-btn,
   #resume-btn,
   .card-btn {
@@ -1106,6 +1305,10 @@ h3 {
     padding: 22px 14px;
   }
 
+  .hero-layout {
+    gap: 18px;
+  }
+
   .display-1 {
     font-size: 1.95rem;
     line-height: 1.08;
@@ -1119,10 +1322,18 @@ h3 {
     font-size: 0.9rem;
   }
 
+  .hero-subtext {
+    font-size: 0.85rem;
+  }
+
   .hero-stat {
     padding: 14px;
   }
 
+  .hero-video-shell {
+    width: 100%;
+  }
+
   .section-heading {
     font-size: 0.78rem;
     padding: 9px 12px;
diff --git a/img/css3-logo.svg b/img/css3-logo.svg
new file mode 100644
index 0000000..7213aaa
--- /dev/null
+++ b/img/css3-logo.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 361" role="img" aria-labelledby="css3Title css3Desc">
+  <title id="css3Title">CSS3</title>
+  <desc id="css3Desc">CSS3 shield logo</desc>
+  <path fill="#264DE4" d="M127.8 360.1 24.3 331.4 0 58.7h255.6l-24.3 272.7-103.5 28.7Z"/>
+  <path fill="#2965F1" d="M212.4 314 233.2 81H127.8v255.2l84.6-22.2Z"/>
+  <path fill="#EBEBEB" d="m52.6 114.5 2.8 31.4h72.4v-31.4H52.6Zm5.6 62.9 2.8 31.4h66.8v-31.4H58.2Zm69.6 126.1v-32.7l-.1.1-35.6-9.6-2.3-25.8H57.7l4.5 50.3 65.5 17.7Z"/>
+  <path fill="#FFF" d="M202.7 114.5H127.7v31.4h71.4l-6.8 76-64.6 17.4v32.7l65.6-18.2.5-5.4 13.8-154Z"/>
+</svg>
diff --git a/img/hero-globe-dark.webm b/img/hero-globe-dark.webm
new file mode 100644
index 0000000..fda132d
Binary files /dev/null and b/img/hero-globe-dark.webm differ
diff --git a/img/hero-globe.webm b/img/hero-globe.webm
new file mode 100644
index 0000000..3beb4c2
Binary files /dev/null and b/img/hero-globe.webm differ
diff --git a/img/jquery-logo.svg b/img/jquery-logo.svg
new file mode 100644
index 0000000..26cec11
--- /dev/null
+++ b/img/jquery-logo.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120" role="img" aria-labelledby="jqTitle jqDesc">
+  <title id="jqTitle">jQuery</title>
+  <desc id="jqDesc">Bright jQuery wordmark with arc accent</desc>
+  <path fill="#2D7DBF" d="M53 71c-18.5-9-28.6-22.6-30.4-40.8 8.9 13.5 21.6 23.6 38.1 30.2-5 3.2-7.5 6.7-7.7 10.6Z"/>
+  <path fill="#78C6F0" d="M66.5 82.4C38.8 73.1 22 56.7 16 33.2c14.2 18.2 33.9 31.2 59.1 39-5.7 4.1-8.6 7.5-8.6 10.2Z"/>
+  <path fill="#BEEBFF" d="M82.6 95.2C47 87.4 22 68.8 7.7 39.6c18.5 23.4 44.7 39.6 78.5 48.7-2.2 2.6-3.4 4.9-3.6 6.9Z"/>
+  <path fill="#F4F8FF" d="M110.8 80.7V34h17.1v46.1c0 11.7-6.4 17.6-19.2 17.6-3.6 0-6.7-.4-9.2-1.2V82.4c2 .7 4 .9 5.8.9 3.7 0 5.5-.9 5.5-2.6Zm45.6 16.1c-8.4 0-14.9-2.1-19.6-6.4-4.7-4.3-7-10.2-7-17.8V48h17.1v23.6c0 3.5.8 6.3 2.3 8.4 1.5 2.1 3.9 3.1 7.1 3.1 3.2 0 5.6-1 7.1-3.1 1.6-2.1 2.3-4.9 2.3-8.4V48h17.1v24.6c0 7.6-2.3 13.5-7 17.8-4.7 4.3-11.2 6.4-19.4 6.4Zm34.3-.8V48h15.7v6.6c3.8-5.1 9.1-7.7 15.9-7.7 6 0 10.8 1.9 14.4 5.7 3.6 3.8 5.5 9 5.5 15.8V96h-17.1V72c0-3.2-.8-5.6-2.3-7.3-1.5-1.7-3.6-2.6-6.1-2.6-2.6 0-4.8.9-6.5 2.6-1.7 1.8-2.5 4.2-2.5 7.3v24h-17Zm59.7 0V48h17.1v48h-17.1Zm8.6-52.6c-3 0-5.5-.9-7.4-2.8-1.9-1.9-2.8-4.1-2.8-6.8 0-2.7.9-4.9 2.8-6.8 1.9-1.9 4.3-2.8 7.4-2.8 3 0 5.5.9 7.3 2.8 1.9 1.9 2.8 4.1 2.8 6.8 0 2.7-.9 4.9-2.8 6.8-1.8 1.9-4.3 2.8-7.3 2.8Zm38.8 53.8c-5.4 0-10.5-.8-15.4-2.5V81.6c4.9 2.3 9.6 3.4 14.1 3.4 4.6 0 7-.9 7-2.8 0-.9-.6-1.7-1.7-2.4-1.1-.7-3.4-1.5-6.8-2.5-4.9-1.4-8.6-2.8-11.3-4.2-2.7-1.4-4.8-3.2-6.3-5.6-1.5-2.4-2.2-5.4-2.2-9.1 0-5.2 2-9.3 6.1-12.3 4.1-3.1 9.5-4.6 16.4-4.6 5.2 0 10.1.8 14.7 2.5v12.6c-4.6-2-8.8-2.9-12.8-2.9-4.1 0-6.1.9-6.1 2.8 0 .8.5 1.5 1.6 2.1 1 .6 3.2 1.3 6.6 2.2 3.8 1 7 2.2 9.7 3.5 2.6 1.3 4.9 3.2 6.8 5.7 1.9 2.5 2.9 5.7 2.9 9.7 0 5.3-2.1 9.5-6.3 12.5-4.2 3-10.1 4.5-17.6 4.5Z"/>
+</svg>
diff --git a/img/mongodb-logo.svg b/img/mongodb-logo.svg
new file mode 100644
index 0000000..8a369f3
--- /dev/null
+++ b/img/mongodb-logo.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 120" role="img" aria-labelledby="mongoTitle mongoDesc">
+  <title id="mongoTitle">MongoDB</title>
+  <desc id="mongoDesc">MongoDB wordmark with green leaf icon</desc>
+  <path fill="#00ED64" d="M67.7 16.1c8.8 18.7 12.3 37.4 10.4 56.1-1.9 18.7-8.1 34.1-18.6 46.2-10.1-11.6-16.1-26.5-18.1-44.8-1.9-18.3 1.6-38.2 10.6-59.6 2.9 7.5 8.1 11.1 15.7 2.1Z"/>
+  <path fill="#13AA52" d="M59.2 104.5c4.7-10 7-24.7 7-44.1 0-17.9-1.5-31.8-4.4-41.7 7.7 10.7 11.6 25.8 11.6 45.2 0 18.9-4.7 35.8-14.2 50.6Z"/>
+  <path fill="#F4F8FF" d="M107.2 95V30.2h18.2l20.1 30.7 20.1-30.7h18.1V95h-17V55.9l-21.2 30.9h-.4l-21.1-30.7V95h-16.8Zm123 1.2c-9.8 0-17.8-3.1-24.2-9.2-6.4-6.1-9.6-14-9.6-23.7 0-9.7 3.2-17.6 9.7-23.8 6.5-6.2 14.6-9.2 24.3-9.2 9.8 0 17.9 3.1 24.3 9.2 6.4 6.1 9.6 14.1 9.6 23.8 0 9.7-3.2 17.6-9.7 23.7-6.5 6.1-14.6 9.2-24.4 9.2Zm.2-14.7c4.7 0 8.6-1.7 11.6-5 3-3.3 4.5-7.8 4.5-13.2 0-5.5-1.6-9.9-4.7-13.4-3.1-3.5-7-5.2-11.7-5.2-4.7 0-8.5 1.7-11.6 5-3 3.3-4.5 7.8-4.5 13.3 0 5.5 1.6 9.9 4.7 13.3 3.1 3.4 7 5.1 11.7 5.1ZM275.2 95V30.2h32.8c8.1 0 14.4 2 18.7 6.1 3.5 3.4 5.3 7.5 5.3 12.5 0 8.1-3.8 13.7-11.4 16.9 10 3.2 15 9.2 15 18.2 0 5.6-2.1 10.1-6.3 13.3-4.8 3.8-11.6 5.7-20.2 5.7h-33.9Zm16.8-38.9h12.2c6.7 0 10-2.2 10-6.6 0-4.2-3.2-6.3-9.6-6.3H292v12.9Zm0 25.9h17c6.7 0 10-2.2 10-6.7 0-4.4-3.4-6.6-10.2-6.6H292V82Z"/>
+</svg>
diff --git a/img/profile_pic.jpg b/img/profile_pic.jpg
deleted file mode 100644
index 2f8497e..0000000
Binary files a/img/profile_pic.jpg and /dev/null differ
diff --git a/img/profile_pic.png b/img/profile_pic.png
new file mode 100644
index 0000000..82a9b26
Binary files /dev/null and b/img/profile_pic.png differ
diff --git a/index.html b/index.html
index f7bd59c..ddc459b 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Santosh Kumar | Front-End Developer</title>
+    <title>Santosh Kumar</title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
         integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
     <link rel="stylesheet" href="css/style.css">
@@ -31,7 +31,7 @@
             <div class="navbar-nav ml-auto">
                 <a data-aos='fade-down' class="nav-item nav-link active" href="#cover">Home</a>
                 <a data-aos='fade-down' class="nav-item nav-link" href="#about">About</a>
-                <a data-aos='fade-down' class="nav-item nav-link" href="#tech">Tech</a>
+                <a data-aos='fade-down' class="nav-item nav-link" href="#tech">Technologies</a>
                 <a data-aos='fade-down' class="nav-item nav-link" href="#projects">Projects</a>
             </div>
             <button id="theme-toggle" class="theme-toggle" type="button" aria-label="Switch theme" aria-pressed="false">
@@ -44,28 +44,42 @@
     </nav>
     <div id="cover">
         <div class="overlay">
-            <div class="hero-badge" data-aos='fade-down'>AI Inspired Portfolio Experience</div>
-            <h1 data-aos='fade-left' class="display-1 hero-title">Designing fast, modern web experiences with creative
-                energy.</h1>
-            <p data-aos='fade-left' class="hero-text">I'm Santosh Kumar, a frontend-focused developer building polished
-                interfaces, responsive products, and ambitious ideas with clean code.</p>
-            <div class="hero-actions" data-aos='fade-up'>
-                <a href="#projects" class="hero-btn hero-btn-primary">Explore Projects</a>
-                <a href="./img/Santosh_SDE_Resume.pdf" target="_blank" class="hero-btn hero-btn-secondary">Open
-                    Resume</a>
-            </div>
-            <div class="hero-stats" data-aos='fade-up'>
-                <div class="hero-stat">
-                    <span class="hero-stat-number">Frontend</span>
-                    <span class="hero-stat-label">Responsive UI craft</span>
-                </div>
-                <div class="hero-stat">
-                    <span class="hero-stat-number">MERN</span>
-                    <span class="hero-stat-label">Full-stack foundation</span>
+            <div class="hero-layout">
+                <div class="hero-copy">
+                    <div class="hero-badge" data-aos='fade-down'> Welcome to Santosh Portfolio</div>
+                    <h1 data-aos='fade-left' class="display-1 hero-title">We create stunning visual apealing web
+                        interfaces</h1>
+                    <p data-aos='fade-left' class="hero-text">Aspiring Software Engineer</p>
+                    <p data-aos='fade-left' class="hero-subtext">Hire me to see my full potential.</p>
+                    <div class="hero-actions" data-aos='fade-up'>
+                        <a href="#projects" class="hero-btn hero-btn-primary">Explore Projects</a>
+                        <a href="./img/Santosh_SDE_Resume.pdf" target="_blank" class="hero-btn hero-btn-secondary">Open
+                            Resume</a>
+                    </div>
+                    <div class="hero-stats" data-aos='fade-up'>
+                        <div class="hero-stat">
+                            <span class="hero-stat-number">Frontend</span>
+                            <span class="hero-stat-label">Responsive UI with better user experience</span>
+                        </div>
+                        <div class="hero-stat">
+                            <span class="hero-stat-number">Backend</span>
+                            <span class="hero-stat-label">The backbone of Webpages.</span>
+                        </div>
+                        <div class="hero-stat">
+                            <span class="hero-stat-number">Database</span>
+                            <span class="hero-stat-label">A system that manage the data of webpages.</span>
+                        </div>
+                    </div>
                 </div>
-                <div class="hero-stat">
-                    <span class="hero-stat-number">Creative</span>
-                    <span class="hero-stat-label">Design + code mindset</span>
+                <div class="hero-media">
+                    <div class="hero-video-shell">
+                        <video class="hero-video hero-video-light" autoplay muted loop playsinline>
+                            <source src="./img/hero-globe.webm" type="video/webm">
+                        </video>
+                        <video class="hero-video hero-video-dark" autoplay muted loop playsinline>
+                            <source src="./img/hero-globe-dark.webm" type="video/webm">
+                        </video>
+                    </div>
                 </div>
             </div>
         </div>
@@ -75,12 +89,12 @@ <h1 data-aos='fade-right' class="section-heading">About Me</h1>
         <div class="container py-5">
             <div class="intro-shell">
                 <div class="intro-header text-center">
-                    <div data-aos='fade-up' class="eyebrow">Human creativity meets modern interface engineering</div>
+                    <div data-aos='fade-up' class="eyebrow">Hi, I am </div>
                     <h1 data-aos='fade-up' class="display-3">Santosh Kumar</h1>
                     <h1 data-aos='fade-up' class="display-4">
                         I'm a
                         <span class="display-4" id="traits"
-                            traits='["Frontend Developer", "Competitive Programmer", "Musician"]'></span>
+                            traits='["Web Developer", "Content Creator", "Singer"]'></span>
                     </h1>
                 </div>
                 <div id="intro" class="pt-5">
@@ -110,7 +124,8 @@ <h1 data-aos='fade-up' class="display-4">
                                 </div>
                                 <div class="detail-item">
                                     <span class="detail-label">Education</span>
-                                    <span class="detail-value">Computer Science & Engineering Undergraduate</span>
+                                    <span class="detail-value">B.Tech - Computer Science & Engineering
+                                        graduate</span>
                                 </div>
                                 <div class="detail-item">
                                     <span class="detail-label">Institution</span>
@@ -202,8 +217,7 @@ <h1 class="text-center mt-5 mt-lg-0">My Tech Stack</h1>
                         <img class="tech-logo" src="https://cdn.svgporn.com/logos/c-plusplus.svg" alt="C++">
                         <img class="tech-logo" src="https://cdn.svgporn.com/logos/python.svg" alt="Python">
                         <img class="tech-logo" src="https://cdn.svgporn.com/logos/html-5.svg" alt="HTML-5">
-                        <img class="tech-logo" src="https://www.vectorlogo.zone/logos/w3_css/w3_css-official.svg"
-                            alt="CSS-3">
+                        <img class="tech-logo" src="./img/css3-logo.svg" alt="CSS3">
                         <img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/bootstrap.svg"
                             alt="Bootstrap">
                         <img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/javascript.svg"
@@ -212,10 +226,14 @@ <h1 class="text-center mt-5 mt-lg-0">My Tech Stack</h1>
                         <img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/nodejs.svg" alt="nodeJS">
                         <!-- <img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/firebase.svg"
                             alt=firebase> -->
-                        <img class="tech-logo" src="https://cdn.svgporn.com/logos/jquery.svg" alt="jquery">
+                        <img class="tech-logo tech-logo-wordmark"
+                            src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/jquery/jquery-original-wordmark.svg"
+                            alt="jQuery">
 
                         <!-- <img class="tech-logo tech-logo-sm" src="https://cdn.svgporn.com/logos/redux.svg" alt="redux"> -->
-                        <img class="tech-logo" src="https://cdn.svgporn.com/logos/mongodb.svg" alt="mongodb">
+                        <img class="tech-logo tech-logo-wordmark"
+                            src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original-wordmark.svg"
+                            alt="MongoDB">
                     </div>
                 </div>
             </div>