diff --git a/assets/css/custom.css b/assets/css/custom.css
index e49103b..288bb25 100644
--- a/assets/css/custom.css
+++ b/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;
+ }
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index 788bca6..01ed082 100644
--- a/assets/js/main.js
+++ b/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();
+ }
});
diff --git a/index.php b/index.php
index ea116bc..2ba3f7c 100644
--- a/index.php
+++ b/index.php
@@ -131,6 +131,14 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+
+
+
+
+
+
+
+