background

assets/css/custom.css

@@ -40,7 +40,8 @@ main {
 }
 
 .navbar {
-  backdrop-filter: blur(6px);
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
 }
 
 .navbar-brand {
@@ -116,3 +117,171 @@ footer a {
     padding-top: 40px;
   }
 }
+
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  position: relative;
+  overflow-x: hidden;
+}
+
+.navbar,
+main,
+footer {
+  position: relative;
+  z-index: 1;
+}
+
+.site-background {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.bg-grid,
+.bg-orb,
+.bg-cursor-glow {
+  position: absolute;
+}
+
+.bg-grid {
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(17, 24, 39, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(17, 24, 39, 0.03) 1px, transparent 1px);
+  background-size: 72px 72px;
+  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.68), transparent 78%);
+  opacity: 0.22;
+}
+
+.bg-orb {
+  border-radius: 50%;
+  filter: blur(4px);
+  opacity: 0.7;
+  will-change: transform;
+  animation: pulseOrb 12s ease-in-out infinite;
+}
+
+.bg-orb-one {
+  top: 7%;
+  left: -8%;
+  width: 340px;
+  height: 340px;
+  background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.34), rgba(37, 99, 235, 0.06) 60%, transparent 72%);
+}
+
+.bg-orb-two {
+  top: 18%;
+  right: -10%;
+  width: 420px;
+  height: 420px;
+  background: radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.24), rgba(37, 99, 235, 0.06) 58%, transparent 74%);
+  animation-duration: 18s;
+}
+
+.bg-orb-three {
+  bottom: -8%;
+  left: 48%;
+  width: 360px;
+  height: 360px;
+  background: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.2), rgba(37, 99, 235, 0.06) 62%, transparent 76%);
+  animation-duration: 20s;
+}
+
+.bg-cursor-glow {
+  top: 0;
+  left: 0;
+  width: 240px;
+  height: 240px;
+  margin: -120px 0 0 -120px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.03) 48%, transparent 72%);
+  opacity: 0.5;
+  will-change: transform;
+}
+
+.hero-section,
+.section-muted,
+.about-panel,
+.hero-card,
+.contact-box,
+.card {
+  position: relative;
+}
+
+.hero-section::after,
+.section-muted::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
+}
+
+.hero-card,
+.about-panel,
+.contact-box,
+.card,
+.navbar {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+.hero-card,
+.about-panel,
+.contact-box,
+.card {
+  background: rgba(255, 255, 255, 0.97);
+}
+
+.card,
+.hero-card,
+.about-panel,
+.contact-box {
+  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
+}
+
+.btn-primary,
+.btn-outline-dark {
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.btn-primary:hover,
+.btn-outline-dark:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
+}
+
+@keyframes pulseOrb {
+  0%, 100% {
+    opacity: 0.52;
+    filter: blur(4px);
+  }
+  50% {
+    opacity: 0.78;
+    filter: blur(2px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  .bg-orb,
+  .bg-cursor-glow,
+  .btn-primary,
+  .btn-outline-dark {
+    animation: none;
+    transition: none;
+  }
+
+  .bg-cursor-glow {
+    display: none;
+  }
+}

assets/js/main.js

@@ -16,4 +16,43 @@ document.addEventListener('DOMContentLoaded', () => {
     const toast = new bootstrap.Toast(toastEl, { delay: 4000 });
     toast.show();
   }
+
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const orbs = Array.from(document.querySelectorAll('.bg-orb'));
+  const cursorGlow = document.querySelector('.bg-cursor-glow');
+
+  if (!prefersReducedMotion && (orbs.length || cursorGlow)) {
+    const pointer = { x: window.innerWidth / 2, y: window.innerHeight / 3 };
+    const smooth = { x: pointer.x, y: pointer.y };
+
+    const render = () => {
+      smooth.x += (pointer.x - smooth.x) * 0.08;
+      smooth.y += (pointer.y - smooth.y) * 0.08;
+
+      orbs.forEach((orb, index) => {
+        const depth = Number(orb.dataset.depth || 20);
+        const direction = index % 2 === 0 ? 1 : -1;
+        const dx = ((smooth.x / window.innerWidth) - 0.5) * depth * direction;
+        const dy = ((smooth.y / window.innerHeight) - 0.5) * depth;
+        orb.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
+      });
+
+      if (cursorGlow) {
+        cursorGlow.style.transform = `translate3d(${smooth.x}px, ${smooth.y}px, 0)`;
+      }
+
+      window.requestAnimationFrame(render);
+    };
+
+    window.addEventListener('pointermove', (event) => {
+      pointer.x = event.clientX;
+      pointer.y = event.clientY;
+    }, { passive: true });
+
+    window.addEventListener('scroll', () => {
+      pointer.y = window.innerHeight / 3 + (window.scrollY * 0.08);
+    }, { passive: true });
+
+    render();
+  }
 });

index.php

@@ -131,6 +131,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
   </style>
 </head>
 <body>
+  <div class="site-background" aria-hidden="true">
+    <span class="bg-grid"></span>
+    <span class="bg-orb bg-orb-one" data-depth="18"></span>
+    <span class="bg-orb bg-orb-two" data-depth="28"></span>
+    <span class="bg-orb bg-orb-three" data-depth="38"></span>
+    <span class="bg-cursor-glow"></span>
+  </div>
+
   <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom fixed-top">
     <div class="container">
       <a class="navbar-brand fw-semibold" href="#top">Alex Carter</a>