+ {symbols.map((item) => (
) : (
<>
+
+
+
+
-
+
+
+
+
+
+
+ {lightParticles.map((particle) => (
+
+ ))}
+
+
{sparkles.map((sparkle) => (
))}
+
+ {particles.slice(0, 8).map((particle) => (
+
+ ))}
+
)}
diff --git a/src/components/ui/InteractiveEffects.jsx b/src/components/ui/InteractiveEffects.jsx
new file mode 100644
index 0000000..67ef064
--- /dev/null
+++ b/src/components/ui/InteractiveEffects.jsx
@@ -0,0 +1,90 @@
+import React, { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const SELECTOR = [
+ ".section-panel",
+ ".problem-card",
+ ".glass-card",
+ ".hero-image-card",
+ ".hero-stat-card",
+ ".contact-method",
+ ".project-link",
+ ".page-button",
+ ".copy-button",
+].join(", ");
+
+export default function InteractiveEffects() {
+ const location = useLocation();
+
+ useEffect(() => {
+ if (typeof window === "undefined") return undefined;
+
+ const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ const coarsePointer = window.matchMedia("(pointer: coarse)").matches;
+ if (reducedMotion || coarsePointer) return undefined;
+
+ const interactiveNodes = Array.from(document.querySelectorAll(SELECTOR));
+ const cleanups = [];
+
+ const updateSpotlight = (event) => {
+ document.documentElement.style.setProperty("--bg-spotlight-x", `${event.clientX}px`);
+ document.documentElement.style.setProperty("--bg-spotlight-y", `${event.clientY}px`);
+ };
+
+ window.addEventListener("pointermove", updateSpotlight, { passive: true });
+
+ interactiveNodes.forEach((node) => {
+ let frame = 0;
+
+ const update = (event) => {
+ const rect = node.getBoundingClientRect();
+ const x = event.clientX - rect.left;
+ const y = event.clientY - rect.top;
+ const px = x / rect.width;
+ const py = y / rect.height;
+ const rotateY = (px - 0.5) * 4;
+ const rotateX = (0.5 - py) * 3.5;
+ const shiftX = (px - 0.5) * 4;
+ const shiftY = (py - 0.5) * 4;
+
+ cancelAnimationFrame(frame);
+ frame = window.requestAnimationFrame(() => {
+ node.style.setProperty("--cursor-x", `${x}px`);
+ node.style.setProperty("--cursor-y", `${y}px`);
+ node.style.setProperty("--tilt-x", `${rotateX.toFixed(2)}deg`);
+ node.style.setProperty("--tilt-y", `${rotateY.toFixed(2)}deg`);
+ node.style.setProperty("--mag-x", `${shiftX.toFixed(2)}px`);
+ node.style.setProperty("--mag-y", `${shiftY.toFixed(2)}px`);
+ node.classList.add("cursor-active");
+ });
+ };
+
+ const leave = () => {
+ cancelAnimationFrame(frame);
+ node.style.setProperty("--tilt-x", "0deg");
+ node.style.setProperty("--tilt-y", "0deg");
+ node.style.setProperty("--mag-x", "0px");
+ node.style.setProperty("--mag-y", "0px");
+ node.classList.remove("cursor-active");
+ };
+
+ node.addEventListener("pointermove", update);
+ node.addEventListener("pointerenter", update);
+ node.addEventListener("pointerleave", leave);
+
+ cleanups.push(() => {
+ cancelAnimationFrame(frame);
+ node.removeEventListener("pointermove", update);
+ node.removeEventListener("pointerenter", update);
+ node.removeEventListener("pointerleave", leave);
+ });
+ });
+
+ return () => {
+ window.removeEventListener("pointermove", updateSpotlight);
+ cleanups.forEach((cleanup) => cleanup());
+ };
+ }, [location.pathname]);
+
+ return null;
+}
diff --git a/src/components/ui/SectionPanel.jsx b/src/components/ui/SectionPanel.jsx
index 2f10605..fc87214 100644
--- a/src/components/ui/SectionPanel.jsx
+++ b/src/components/ui/SectionPanel.jsx
@@ -3,9 +3,14 @@ import React from "react";
export default function SectionPanel({ eyebrow, title, description, children, className = "" }) {
return (
- {eyebrow ? {eyebrow} : null}
- {title ? {title}
: null}
- {description ? {description}
: null}
+
+ {(eyebrow || title || description) ? (
+
+ {eyebrow ?
{eyebrow} : null}
+ {title ?
{title}
: null}
+ {description ?
{description}
: null}
+
);
diff --git a/src/data/profile.js b/src/data/profile.js
index ed2d9f5..c8a1fc1 100644
--- a/src/data/profile.js
+++ b/src/data/profile.js
@@ -1,21 +1,21 @@
export const profile = {
name: "Sunil Kumar K V",
brand: "SunilCraft",
- role: "Full Stack Web Developer | React Specialist | Problem Solver",
+ role: "React Developer | Frontend-Focused Full Stack Builder",
location: "Bengaluru, India",
- email: "sunilkumarkv44@gmail.com",
+ email: "sunilkumarkv9535@gmail.com",
resumeUrl: "/Sunil-Kumar-KV-Resume.pdf",
github: "https://github.com/SunilKumarKV",
linkedin: "https://www.linkedin.com/in/sunilkumarkv44/",
portfolio: "https://sunilcraft.vercel.app/",
- status: "Available for freelance, internships, and frontend/full-stack roles",
+ status: "Available for remote internships, part-time roles, and freelance work",
};
export const services = [
- { title: "Frontend Development", description: "Responsive React, Vite, Tailwind, animations, dashboards, and landing pages." },
- { title: "Portfolio Websites", description: "Personal brand websites with SEO, projects, contact forms, and fast deployment." },
- { title: "Bug Fixing & UI Polish", description: "Fix React errors, routing issues, mobile layout bugs, and production build problems." },
- { title: "Full-stack Features", description: "Node/Express APIs, auth flows, database integration, and production-ready structure." },
+ { title: "Frontend Development", description: "Responsive React interfaces, polished UI systems, dashboards, landing pages, and mobile-friendly layouts." },
+ { title: "Portfolio Websites", description: "Personal and professional portfolio sites with stronger storytelling, clean routing, and production-ready deployment." },
+ { title: "UI Cleanup & Bug Fixing", description: "Routing issues, layout bugs, component cleanup, responsive fixes, and build-safe polish for React apps." },
+ { title: "Full-Stack Features", description: "Node.js APIs, GitHub-backed workflows, coding systems, and practical product features that connect frontend to data." },
];
export const experiences = [
diff --git a/src/styles/AnimatedBackground.css b/src/styles/AnimatedBackground.css
index 2ac9f9d..834c229 100644
--- a/src/styles/AnimatedBackground.css
+++ b/src/styles/AnimatedBackground.css
@@ -4,169 +4,532 @@
overflow: hidden;
pointer-events: none;
z-index: 0;
+ background:
+ radial-gradient(circle at 18% 16%, rgba(134, 187, 255, 0.14), transparent 34%),
+ radial-gradient(circle at 84% 12%, rgba(121, 91, 255, 0.1), transparent 28%),
+ linear-gradient(180deg, rgba(7, 11, 23, 0.1), transparent 38%);
}
+.bg-light-spotlight {
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(
+ 420px circle at var(--bg-spotlight-x, 50%) var(--bg-spotlight-y, 20%),
+ rgba(214, 238, 255, 0.34),
+ rgba(186, 224, 255, 0.18) 28%,
+ transparent 68%
+ );
+ opacity: 1;
+ transition: opacity 0.28s ease;
+ will-change: transform, opacity;
+}
+
+.bg-galaxy,
+.bg-dark-haze,
+.bg-sunlight,
.bg-light-blob,
-.bg-dark-glow {
+.bg-reflection,
+.bg-light-mesh {
position: absolute;
border-radius: 999px;
- filter: blur(52px);
- opacity: 0.2;
+ filter: blur(76px);
+ will-change: transform, opacity;
}
-.bg-light-blob {
- background: radial-gradient(circle, rgba(0, 123, 255, 0.16), rgba(0, 123, 255, 0));
+.bg-galaxy {
+ background: radial-gradient(circle, rgba(82, 163, 255, 0.26), rgba(82, 163, 255, 0));
+ opacity: 0.34;
}
-.bg-light-blob-a {
- width: 32rem;
- height: 32rem;
- top: 4%;
- left: -6%;
+.bg-galaxy-a {
+ width: 44rem;
+ height: 44rem;
+ top: -14%;
+ right: -10%;
}
-.bg-light-blob-b {
- width: 28rem;
- height: 28rem;
- top: 36%;
- right: -8%;
+.bg-galaxy-b {
+ width: 36rem;
+ height: 36rem;
+ bottom: -4%;
+ left: -10%;
}
-.bg-light-blob-c {
- width: 22rem;
- height: 22rem;
- bottom: 8%;
- left: 34%;
+.bg-galaxy-c {
+ width: 30rem;
+ height: 30rem;
+ top: 34%;
+ left: 28%;
}
-.bg-dark-glow {
- background: radial-gradient(circle, rgba(76, 182, 255, 0.18), rgba(76, 182, 255, 0));
+.bg-dark-haze {
+ background: radial-gradient(circle, rgba(137, 98, 255, 0.14), rgba(137, 98, 255, 0));
+ opacity: 0.24;
}
-.bg-dark-glow-a {
- width: 28rem;
- height: 28rem;
- top: 6%;
- left: -4%;
+.bg-dark-haze-a {
+ width: 26rem;
+ height: 26rem;
+ top: 8%;
+ left: 10%;
}
-.bg-dark-glow-b {
- width: 24rem;
- height: 24rem;
- bottom: 8%;
- right: -6%;
+.bg-dark-haze-b {
+ width: 22rem;
+ height: 22rem;
+ bottom: 16%;
+ right: 14%;
}
-.bg-particles {
+.bg-stars,
+.bg-twinkles,
+.bg-falling-particles,
+.bg-code-field,
+.bg-light-particles,
+.bg-light-sparkles,
+.bg-shooting-stars {
position: absolute;
inset: 0;
}
-.bg-particle {
+.bg-star,
+.bg-twinkle,
+.bg-falling-particle,
+.bg-light-particle,
+.bg-light-sparkle,
+.bg-shooting-star {
position: absolute;
- width: 0.34rem;
- height: 0.34rem;
border-radius: 999px;
- background: rgba(255, 255, 255, 0.14);
- box-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
}
-.bg-particles.light .bg-particle {
- background: rgba(0, 123, 255, 0.11);
- box-shadow: 0 0 12px rgba(0, 123, 255, 0.08);
+.bg-star {
+ background: rgba(235, 245, 255, 0.78);
+ box-shadow: 0 0 14px rgba(166, 215, 255, 0.34);
+ opacity: 0.6;
}
-.bg-code-rain {
- position: absolute;
- inset: 0;
+.bg-twinkle {
+ background: rgba(255, 255, 255, 0.98);
+ box-shadow: 0 0 18px rgba(184, 228, 255, 0.4);
+ opacity: 0.42;
+}
+
+.bg-falling-particle {
+ top: -14%;
+ width: 2px;
+ height: 6rem;
+ background: linear-gradient(180deg, rgba(166, 220, 255, 0.34), rgba(166, 220, 255, 0));
+ opacity: 0.34;
+}
+
+.bg-shooting-star {
+ top: 14%;
+ left: -14%;
+ width: 10rem;
+ height: 1.5px;
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(214, 237, 255, 0.95), rgba(255, 255, 255, 0));
+ box-shadow: 0 0 16px rgba(189, 227, 255, 0.22);
+ opacity: 0;
+ transform: rotate(-18deg);
}
.bg-code-symbol {
position: absolute;
- color: rgba(162, 220, 255, 0.12);
- font-size: 0.8rem;
+ color: rgba(176, 224, 255, 0.22);
+ font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.08em;
+ text-shadow: 0 0 22px rgba(90, 180, 255, 0.12);
white-space: nowrap;
- text-shadow: 0 0 18px rgba(76, 182, 255, 0.05);
+}
+
+.bg-sunlight {
+ width: 56rem;
+ height: 56rem;
+ top: -28%;
+ right: -12%;
+ background:
+ radial-gradient(circle at 30% 30%, rgba(255, 246, 226, 0.82), rgba(255, 246, 226, 0.46) 26%, rgba(255, 246, 226, 0.1) 48%, rgba(255, 246, 226, 0) 68%),
+ radial-gradient(circle, rgba(177, 217, 255, 0.28), rgba(177, 217, 255, 0));
+ opacity: 0.98;
+}
+
+.bg-light-mesh {
+ background:
+ radial-gradient(circle at 30% 35%, rgba(169, 219, 255, 0.34), rgba(169, 219, 255, 0.08) 38%, rgba(169, 219, 255, 0) 60%),
+ radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06) 34%, rgba(255, 255, 255, 0) 56%);
+ opacity: 0.58;
+}
+
+.bg-light-mesh-a {
+ width: 50rem;
+ height: 50rem;
+ top: -10%;
+ left: -12%;
+}
+
+.bg-light-mesh-b {
+ width: 40rem;
+ height: 40rem;
+ top: 14%;
+ right: -10%;
+}
+
+.bg-light-blob {
+ background: radial-gradient(circle, rgba(94, 171, 255, 0.34), rgba(94, 171, 255, 0.08) 40%, rgba(94, 171, 255, 0) 72%);
+ opacity: 0.62;
+}
+
+.bg-light-blob-a {
+ width: 42rem;
+ height: 42rem;
+ top: 2%;
+ left: -8%;
+}
+
+.bg-light-blob-b {
+ width: 34rem;
+ height: 34rem;
+ top: 34%;
+ right: -6%;
+}
+
+.bg-light-blob-c {
+ width: 28rem;
+ height: 28rem;
+ bottom: 4%;
+ left: 26%;
+}
+
+.bg-light-blob-d {
+ width: 26rem;
+ height: 26rem;
+ top: 12%;
+ right: 18%;
+ opacity: 0.42;
+}
+
+.bg-light-blob-e {
+ width: 22rem;
+ height: 22rem;
+ bottom: 12%;
+ right: 22%;
+ opacity: 0.38;
+}
+
+.bg-reflection {
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
+ opacity: 0.42;
+}
+
+.bg-reflection-a {
+ width: 20rem;
+ height: 20rem;
+ top: 8%;
+ right: 12%;
+}
+
+.bg-reflection-b {
+ width: 18rem;
+ height: 18rem;
+ bottom: 16%;
+ left: 10%;
+}
+
+.bg-reflection-c {
+ width: 14rem;
+ height: 14rem;
+ top: 48%;
+ left: 44%;
+}
+
+.bg-light-particle {
+ background: rgba(251, 191, 36, 0.34);
+ box-shadow: 0 0 24px rgba(245, 158, 11, 0.26);
+ opacity: 0.72;
+}
+
+.bg-light-sparkle {
+ top: -10%;
+ background: rgba(255, 250, 240, 0.96);
+ box-shadow: 0 0 18px rgba(251, 191, 36, 0.3);
+ opacity: 0.88;
}
@media (prefers-reduced-motion: no-preference) {
- .bg-light-blob {
- animation: blobFloat 18s ease-in-out infinite;
+ .bg-galaxy {
+ animation: galaxyDrift 24s ease-in-out infinite alternate;
}
- .bg-dark-glow {
- animation: glowFloat 20s ease-in-out infinite;
+ .bg-dark-haze {
+ animation: hazeDrift 18s ease-in-out infinite alternate;
}
- .bg-particle {
- animation: sparkleFloat 10s ease-in-out infinite;
+ .bg-star {
+ animation: starPulse ease-in-out infinite;
+ }
+
+ .bg-twinkle {
+ animation: twinkleFlash ease-in-out infinite;
+ }
+
+ .bg-falling-particle {
+ animation: fallingParticle linear infinite;
+ }
+
+ .bg-shooting-star {
+ animation: shootingStar 11s linear infinite;
}
.bg-code-symbol {
- animation: codeDrift ease-in-out infinite alternate;
+ animation: codeFloat ease-in-out infinite alternate;
+ }
+
+ .bg-light-mesh,
+ .bg-light-blob {
+ animation: lightBlobFloat 14s ease-in-out infinite alternate;
+ }
+
+ .bg-sunlight {
+ animation: sunlightDrift 16s ease-in-out infinite alternate;
+ }
+
+ .bg-reflection {
+ animation: reflectionDrift 12s ease-in-out infinite alternate;
+ }
+
+ .bg-light-particle {
+ animation: lightParticleFloat 9s ease-in-out infinite;
+ }
+
+ .bg-light-sparkle {
+ animation: lightSparkleFall 12s linear infinite;
}
}
@media (prefers-reduced-motion: reduce) {
+ .bg-light-spotlight,
+ .bg-galaxy,
+ .bg-dark-haze,
+ .bg-star,
+ .bg-twinkle,
+ .bg-falling-particle,
+ .bg-shooting-star,
+ .bg-code-symbol,
+ .bg-sunlight,
+ .bg-light-mesh,
.bg-light-blob,
- .bg-dark-glow,
- .bg-particle,
- .bg-code-symbol {
+ .bg-reflection,
+ .bg-light-particle,
+ .bg-light-sparkle {
animation: none !important;
}
}
-@keyframes blobFloat {
- 0%,
- 100% {
+@keyframes galaxyDrift {
+ 0% {
transform: translate3d(0, 0, 0) scale(1);
+ opacity: 0.25;
}
- 50% {
- transform: translate3d(0, 22px, 0) scale(1.06);
+ 100% {
+ transform: translate3d(0, 34px, 0) scale(1.08);
+ opacity: 0.38;
}
}
-@keyframes glowFloat {
- 0%,
- 100% {
+@keyframes hazeDrift {
+ 0% {
transform: translate3d(0, 0, 0);
- opacity: 0.18;
+ }
+ 100% {
+ transform: translate3d(0, -20px, 0);
+ }
+}
+
+@keyframes starPulse {
+ 0%, 100% {
+ opacity: 0.26;
+ transform: scale(0.85);
}
50% {
- transform: translate3d(0, 18px, 0);
- opacity: 0.22;
+ opacity: 0.82;
+ transform: scale(1.18);
}
}
-@keyframes sparkleFloat {
- 0%,
- 100% {
- transform: translate3d(0, 0, 0) scale(0.9);
+@keyframes twinkleFlash {
+ 0%, 100% {
opacity: 0.18;
+ transform: scale(0.8);
}
- 50% {
- transform: translate3d(0, -14px, 0) scale(1.12);
- opacity: 0.32;
+ 45% {
+ opacity: 0.94;
+ transform: scale(1.35);
}
}
-@keyframes codeDrift {
+@keyframes fallingParticle {
+ 0% {
+ transform: translate3d(0, -12vh, 0);
+ opacity: 0;
+ }
+ 10% {
+ opacity: 0.28;
+ }
+ 90% {
+ opacity: 0.22;
+ }
+ 100% {
+ transform: translate3d(0, 118vh, 0);
+ opacity: 0;
+ }
+}
+
+@keyframes shootingStar {
+ 0%, 76% {
+ opacity: 0;
+ transform: translate3d(0, 0, 0) rotate(-18deg);
+ }
+ 78% {
+ opacity: 0.9;
+ }
+ 100% {
+ opacity: 0;
+ transform: translate3d(122vw, 20vh, 0) rotate(-18deg);
+ }
+}
+
+@keyframes codeFloat {
0% {
transform: translate3d(0, 0, 0);
opacity: 0.08;
}
35% {
- transform: translate3d(8px, 16px, 0);
- opacity: 0.14;
+ transform: translate3d(10px, 16px, 0);
+ opacity: 0.18;
}
- 70% {
- transform: translate3d(-10px, 28px, 0);
+ 100% {
+ transform: translate3d(-8px, 38px, 0);
opacity: 0.1;
}
+}
+
+@keyframes lightBlobFloat {
+ 0% {
+ transform: translate3d(0, 0, 0) scale(1);
+ }
+ 100% {
+ transform: translate3d(24px, 28px, 0) scale(1.1);
+ }
+}
+
+@keyframes sunlightDrift {
+ 0% {
+ transform: translate3d(0, 0, 0) scale(1);
+ opacity: 0.9;
+ }
+ 100% {
+ transform: translate3d(-4%, 4%, 0) scale(1.12);
+ opacity: 1;
+ }
+}
+
+@keyframes reflectionDrift {
+ 0% {
+ transform: translate3d(0, 0, 0);
+ opacity: 0.3;
+ }
+ 100% {
+ transform: translate3d(22px, 18px, 0);
+ opacity: 0.48;
+ }
+}
+
+@keyframes lightParticleFloat {
+ 0%, 100% {
+ transform: translate3d(0, 0, 0) scale(0.9);
+ opacity: 0.34;
+ }
+ 50% {
+ transform: translate3d(0, -22px, 0) scale(1.2);
+ opacity: 0.74;
+ }
+}
+
+@keyframes lightSparkleFall {
+ 0% {
+ transform: translate3d(0, -10vh, 0) scale(0.85);
+ opacity: 0;
+ }
+ 18% {
+ opacity: 0.9;
+ }
100% {
- transform: translate3d(4px, 40px, 0);
- opacity: 0.07;
+ transform: translate3d(0, 112vh, 0) scale(1.15);
+ opacity: 0;
+ }
+}
+
+@media (max-width: 640px) {
+ .bg-light-spotlight {
+ background: radial-gradient(
+ 300px circle at var(--bg-spotlight-x, 50%) var(--bg-spotlight-y, 20%),
+ rgba(176, 220, 255, 0.24),
+ transparent 68%
+ );
+ }
+
+ .bg-galaxy-a,
+ .bg-galaxy-b,
+ .bg-sunlight,
+ .bg-light-mesh-a,
+ .bg-light-blob-a,
+ .bg-light-blob-b {
+ width: 28rem;
+ height: 28rem;
+ }
+
+ .bg-code-symbol {
+ font-size: 0.72rem;
+ }
+}
+
+@media (min-width: 1800px) {
+ .bg-sunlight {
+ width: 64rem;
+ height: 64rem;
+ }
+
+ .bg-light-mesh-a {
+ width: 58rem;
+ height: 58rem;
+ }
+
+ .bg-light-mesh-b {
+ width: 46rem;
+ height: 46rem;
+ }
+
+ .bg-light-blob-a,
+ .bg-light-blob-b {
+ width: 46rem;
+ height: 46rem;
+ }
+}
+
+@media (min-width: 2200px) {
+ .bg-sunlight {
+ width: 72rem;
+ height: 72rem;
+ }
+
+ .bg-light-mesh-a {
+ width: 64rem;
+ height: 64rem;
+ }
+
+ .bg-light-mesh-b {
+ width: 52rem;
+ height: 52rem;
}
}
diff --git a/src/styles/ContactSection.css b/src/styles/ContactSection.css
index 5430117..063b450 100644
--- a/src/styles/ContactSection.css
+++ b/src/styles/ContactSection.css
@@ -45,12 +45,16 @@
background: color-mix(in srgb, var(--card-bg) 92%, white 8%);
box-shadow: var(--shadow-light);
color: inherit;
+ position: relative;
+ overflow: hidden;
+ isolation: isolate;
+ transform: translateY(var(--lift, 0px)) perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.contact-method:hover {
text-decoration: none;
border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
- transform: translateY(-2px);
+ --lift: -2px;
}
.contact-method.static {
diff --git a/src/styles/Footer.css b/src/styles/Footer.css
index 4910bac..940ec8e 100644
--- a/src/styles/Footer.css
+++ b/src/styles/Footer.css
@@ -1,70 +1,278 @@
.footer {
- background: var(--footer-bg);
- padding: 28px 24px;
- transition: background 0.3s ease;
+ position: relative;
+ padding: 52px 18px 28px;
+ background:
+ linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 8%, transparent), color-mix(in srgb, var(--card-bg) 46%, transparent)),
+ radial-gradient(circle at top center, color-mix(in srgb, var(--accent-color) 20%, white 12%), transparent 58%);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
}
-.footer-bottom {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
- max-width: 1200px;
+.footer::before {
+ content: "";
+ position: absolute;
+ inset: 0 0 auto;
+ height: 2px;
+ background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent-color) 46%, white 8%) 18%, color-mix(in srgb, var(--accent-color) 72%, white 12%) 50%, color-mix(in srgb, var(--accent-color) 46%, white 8%) 82%, transparent 100%);
+ opacity: 0.95;
+}
+
+.footer::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 26%),
+ radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-color) 12%, white 10%), transparent 56%);
+ opacity: 0.8;
+ pointer-events: none;
+}
+
+.footer-shell {
+ width: min(1280px, calc(100% - 24px));
margin: 0 auto;
- gap: 18px;
- flex-wrap: wrap;
+ padding-top: 28px;
+ position: relative;
+ z-index: 1;
}
-.footer-brand,
-.footer-text {
- color: #fff;
- font-size: 1rem;
- font-weight: 500;
+.footer-grid {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 28px;
+ align-items: start;
+}
+
+.footer-column {
+ min-width: 0;
+ display: grid;
+ gap: 14px;
+}
+
+.footer-kicker {
+ color: var(--accent-color);
+ font-size: 0.8rem;
+ font-weight: 800;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.footer-brand-column h2,
+.footer-column h3 {
+ color: var(--text-color);
margin: 0;
}
+.footer-brand-column h2 {
+ font-size: clamp(1.5rem, 2.8vw, 2.05rem);
+ line-height: 1.08;
+ letter-spacing: -0.04em;
+}
+
+.footer-brand-column p,
+.footer-link-list,
.footer-text {
- opacity: 0.85;
- font-weight: 400;
+ color: var(--text-secondary);
+}
+
+.footer-brand-column p {
+ max-width: 34ch;
+ line-height: 1.75;
+}
+
+.footer-column h3 {
+ font-size: 1rem;
+ line-height: 1.2;
}
-.social-icon {
+.footer-role-list {
display: flex;
- justify-content: center;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+.footer-role-list span,
+.footer-social-chip {
+ display: inline-flex;
align-items: center;
- gap: 12px;
- margin: 0;
- padding: 0;
+ gap: 8px;
+ min-height: 38px;
+ padding: 8px 14px;
+ border-radius: 999px;
+ background: color-mix(in srgb, var(--card-bg) 86%, transparent);
+ border: 1px solid color-mix(in srgb, var(--accent-color) 16%, var(--input-border));
+ color: var(--text-color);
+ box-shadow: var(--shadow-light);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+}
+
+.footer-social-row {
+ display: flex;
flex-wrap: wrap;
+ gap: 10px;
}
-.social-icon__item {
+.footer-link-list {
list-style: none;
+ display: grid;
+ gap: 10px;
+ margin: 0;
+ padding: 0;
}
-.social-icon__link {
- width: 42px;
- height: 42px;
- border-radius: 999px;
- color: #fff;
- background: rgba(255, 255, 255, 0.14);
+.footer-link-list li {
+ min-width: 0;
+ overflow-wrap: anywhere;
+}
+
+.footer-connect-list a {
display: inline-flex;
align-items: center;
- justify-content: center;
- font-size: 1.25rem;
- transition: transform 0.25s ease, background 0.25s ease;
+ gap: 10px;
+ color: var(--text-secondary);
+ transition: color 0.2s ease, transform 0.2s ease;
+ min-width: 0;
+ overflow-wrap: anywhere;
+}
+
+.footer-nav-link {
+ color: var(--text-secondary);
+ font-weight: 600;
+}
+
+.footer-nav-link:hover,
+.footer-nav-link:focus-visible,
+.footer-social-chip:hover,
+.footer-social-chip:focus-visible {
+ color: var(--text-color);
+ transform: translateY(-1px);
+ outline: none;
}
-.social-icon__link:hover,
-.social-icon__link:focus-visible {
- transform: translateY(-4px);
- background: rgba(255, 255, 255, 0.25);
+.footer-connect-list a:hover,
+.footer-connect-list a:focus-visible {
+ color: var(--text-color);
+ transform: translateX(2px);
outline: none;
}
+.footer-link-icon {
+ width: 18px;
+ height: 18px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--accent-color);
+}
+
+.footer-bottom {
+ margin-top: 32px;
+ padding-top: 22px;
+ border-top: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--input-border));
+ display: flex;
+ justify-content: center;
+ gap: 16px;
+ align-items: center;
+ flex-wrap: wrap;
+ text-align: center;
+}
+
+.footer-text {
+ margin: 0;
+ font-size: 0.94rem;
+ overflow-wrap: anywhere;
+}
+
+@media (max-width: 1024px) {
+ .footer-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 28px 22px;
+ }
+}
+
@media (max-width: 768px) {
+ .footer-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 24px 18px;
+ }
+}
+
+@media (max-width: 430px) {
+ .footer {
+ padding-inline: 12px;
+ padding-top: 40px;
+ padding-bottom: 24px;
+ }
+
+ .footer-shell {
+ width: min(1280px, 100%);
+ }
+
+ .footer-grid {
+ grid-template-columns: 1fr;
+ gap: 18px;
+ }
+
+ .footer-column {
+ gap: 10px;
+ text-align: left;
+ }
+
+ .footer-role-list,
+ .footer-social-row {
+ gap: 8px;
+ }
+
.footer-bottom {
- flex-direction: column;
- text-align: center;
+ margin-top: 22px;
+ justify-content: center;
+ }
+
+ .footer-connect-list a {
+ align-items: flex-start;
+ }
+}
+
+@media (min-width: 1800px) {
+ .footer-shell {
+ width: min(1440px, calc(100% - 80px));
+ }
+
+ .footer-grid {
+ gap: 34px;
+ }
+}
+
+@media (min-width: 2200px) {
+ .footer-shell {
+ width: min(1600px, calc(100% - 120px));
+ }
+}
+
+@media (max-width: 375px) {
+ .footer {
+ padding-inline: 10px;
+ }
+
+ .footer-brand-column h2 {
+ font-size: clamp(1.32rem, 8vw, 1.6rem);
+ }
+
+ .footer-text,
+ .footer-brand-column p,
+ .footer-link-list {
+ font-size: 0.92rem;
+ }
+}
+
+@media (max-width: 320px) {
+ .footer {
+ padding-inline: 8px;
+ }
+
+ .footer-link-icon {
+ width: 16px;
+ height: 16px;
}
}
diff --git a/src/styles/HeroSection.css b/src/styles/HeroSection.css
index 499bec9..27fd802 100644
--- a/src/styles/HeroSection.css
+++ b/src/styles/HeroSection.css
@@ -12,8 +12,8 @@ section {
"image";
justify-items: center;
align-items: start;
- min-height: calc(84vh - 90px);
- padding: 34px 20px 10px;
+ min-height: calc(78vh - 90px);
+ padding: 24px 20px 8px;
background: transparent;
text-align: center;
gap: 1.25rem;
@@ -32,7 +32,7 @@ section {
align-content: start;
justify-items: center;
gap: 0;
- padding: 28px 0 0;
+ padding: 20px 0 0;
}
.hero-subtitle {
@@ -45,11 +45,11 @@ section {
}
.hero-title {
- font-size: clamp(2.45rem, 4.6vw, 4.6rem);
+ font-size: clamp(2.25rem, 4vw, 3.95rem);
font-weight: 800;
color: var(--text-color);
margin-bottom: 16px;
- max-width: 14ch;
+ max-width: 15ch;
letter-spacing: -0.05em;
line-height: 1.04;
text-wrap: balance;
@@ -58,9 +58,9 @@ section {
.hero-description {
font-size: clamp(1rem, 1.15vw, 1.1rem);
color: var(--text-secondary);
- line-height: 1.7;
+ line-height: 1.72;
margin: 0 auto 22px;
- max-width: 720px;
+ max-width: 760px;
text-wrap: pretty;
}
@@ -77,61 +77,19 @@ section {
box-shadow: 0 12px 26px rgba(9, 16, 30, 0.12);
transition: background-color 0.25s ease, transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
cursor: pointer;
+ transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
}
.hero-button:hover {
background: linear-gradient(135deg, var(--button-hover-bg), color-mix(in srgb, var(--button-hover-bg) 84%, white 16%));
- transform: translateY(-2px);
box-shadow: 0 16px 30px rgba(9, 16, 30, 0.16);
}
-/* Scroll down indicator */
-.scroll-indicator {
- position: static;
- margin-top: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.scroll-indicator span {
- display: inline-block;
- width: 24px;
- height: 40px;
- border: 2px solid var(--accent-color);
- border-radius: 30px;
- position: relative;
-}
-
-.scroll-indicator span::before {
- content: "";
- position: absolute;
- top: 8px;
- left: 50%;
- width: 6px;
- height: 6px;
- background-color: var(--accent-color);
- border-radius: 50%;
- transform: translateX(-50%);
- animation: scroll-down 1.5s infinite;
-}
-
-@keyframes scroll-down {
- 0% {
- top: 8px;
- opacity: 1;
- }
- 100% {
- top: 24px;
- opacity: 0;
- }
-}
-
.hero-image {
grid-area: image;
position: relative;
width: 100%;
- max-width: 340px;
+ max-width: 336px;
z-index: 10;
display: flex;
justify-content: center;
@@ -140,56 +98,148 @@ section {
.hero-image-card {
width: 100%;
- border-radius: 26px;
- padding: 12px;
- background: color-mix(in srgb, var(--card-bg) 92%, transparent);
- border: 1px solid color-mix(in srgb, var(--accent-color) 10%, var(--input-border));
- box-shadow: 0 18px 42px rgba(12, 18, 32, 0.09);
+ border-radius: 34px;
+ padding: 12px 12px 16px;
+ background: linear-gradient(
+ 180deg,
+ color-mix(in srgb, var(--card-bg) 78%, transparent),
+ color-mix(in srgb, var(--card-bg) 58%, var(--accent-color) 10%)
+ );
+ border: 1px solid color-mix(in srgb, var(--accent-color) 10%, transparent);
+ box-shadow: 0 28px 70px rgba(12, 18, 32, 0.12);
position: relative;
z-index: 10;
- backdrop-filter: blur(14px);
- -webkit-backdrop-filter: blur(14px);
+ backdrop-filter: blur(22px);
+ -webkit-backdrop-filter: blur(22px);
+ overflow: hidden;
+ transform: translateY(var(--lift, 0px)) perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
+}
+
+.hero-image-card::after {
+ content: "";
+ position: absolute;
+ inset: auto 0 0;
+ height: 160px;
+ border-radius: 0;
+ background: linear-gradient(180deg, rgba(7, 11, 23, 0), rgba(7, 11, 23, 0.32));
+ pointer-events: none;
+ z-index: 1;
}
.hero-image img {
max-width: 100%;
width: 100%;
- border-radius: 18px;
+ border-radius: 28px;
box-shadow: 0 14px 28px rgba(9, 16, 30, 0.08);
object-fit: cover;
+ aspect-ratio: 4 / 5;
+ object-position: center 12%;
position: relative;
- z-index: 10;
- border: 1px solid color-mix(in srgb, var(--accent-color) 6%, transparent);
+ z-index: 0;
+ border: none;
+}
+
+.hero-image-orbit {
+ position: absolute;
+ border-radius: 999px;
+ pointer-events: none;
+ opacity: 0.5;
+}
+
+.hero-image-orbit-a {
+ inset: 22px auto auto 18px;
+ width: 88px;
+ height: 88px;
+ background: radial-gradient(circle, color-mix(in srgb, var(--accent-color) 24%, white 10%), transparent 70%);
+}
+
+.hero-image-orbit-b {
+ inset: auto 12px 112px auto;
+ width: 108px;
+ height: 108px;
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 72%);
}
.hero-image-caption {
- margin: 12px 4px 2px;
+ margin: 0;
+ color: color-mix(in srgb, var(--text-secondary) 92%, white 8%);
+ font-size: 0.9rem;
+ line-height: 1.5;
+ text-align: left;
+}
+
+.hero-image-copy {
+ display: grid;
+ gap: 10px;
+ padding: 18px 8px 2px;
+ position: relative;
+ z-index: 2;
+}
+
+.hero-image-name {
+ color: var(--text-color);
+ font-size: 0.78rem;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ font-weight: 700;
+ opacity: 0.8;
+}
+
+.hero-image-copy strong {
+ color: var(--text-color);
+ font-size: 1.08rem;
+ line-height: 1.35;
+}
+
+.hero-image-meta {
+ display: grid;
+ gap: 10px;
+}
+
+.hero-image-meta-item {
+ display: grid;
+ gap: 3px;
+ padding: 10px 12px;
+ border-radius: 18px;
+ background: color-mix(in srgb, var(--card-bg) 52%, transparent);
+ border: 1px solid color-mix(in srgb, var(--accent-color) 10%, transparent);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+}
+
+.hero-image-meta-label {
color: var(--text-secondary);
+ font-size: 0.72rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ font-weight: 700;
+}
+
+.hero-image-meta-value {
+ color: var(--text-color);
font-size: 0.92rem;
- line-height: 1.5;
- text-align: center;
+ line-height: 1.45;
+ font-weight: 600;
}
-/* Animated blob behind image */
.hero-image::before {
content: "";
position: absolute;
- top: -2%;
- left: 3%;
- width: 94%;
- height: 94%;
- background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent-color) 32%, #00bfff), transparent 68%);
+ top: 2%;
+ left: 6%;
+ width: 90%;
+ height: 90%;
+ background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent-color) 22%, #00bfff), transparent 68%);
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
z-index: 1;
animation: morph 22s infinite linear;
- filter: blur(48px);
- opacity: 0.14;
+ filter: blur(46px);
+ opacity: 0.05;
transition: all 0.3s ease;
}
@keyframes morph {
- 0%,
- 100% {
+ 0%, 100% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
50% {
@@ -203,17 +253,56 @@ section + section {
@media (prefers-reduced-motion: no-preference) {
.hero-image-card {
- animation: heroFloat 18s ease-in-out infinite;
+ animation: heroFloat 16s ease-in-out infinite;
+ }
+}
+
+@media (min-width: 1800px) {
+ section {
+ max-width: 1540px;
+ }
+
+ .hero {
+ min-height: calc(82vh - 90px);
+ padding-inline: 52px;
+ gap: 2.4rem 4.8rem;
+ }
+
+ .hero-content {
+ width: min(1320px, 100%);
+ }
+
+ .hero-image {
+ max-width: 372px;
+ }
+}
+
+@media (min-width: 2200px) {
+ section {
+ max-width: 1680px;
+ }
+
+ .hero {
+ padding-inline: 72px;
+ gap: 2.8rem 5.4rem;
+ }
+
+ .hero-content {
+ width: min(1440px, 100%);
+ }
+
+ .hero-image {
+ max-width: 396px;
}
}
@media (min-width: 768px) {
.hero {
- grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.62fr);
+ grid-template-columns: minmax(0, 1.2fr) minmax(290px, 0.62fr);
grid-template-areas: "content image";
text-align: left;
- padding: 38px 40px 6px;
- gap: 1.8rem 3rem;
+ padding: 24px 40px 8px;
+ gap: 1.8rem 3.4rem;
justify-items: stretch;
align-items: center;
}
@@ -243,14 +332,22 @@ section + section {
margin-bottom: 20px;
}
+.hero-actions-inline {
+ margin-top: 22px;
+ margin-bottom: 0;
+}
+
.hero-button.secondary {
- background: color-mix(in srgb, var(--card-bg) 88%, transparent);
+ background: color-mix(in srgb, var(--card-bg) 76%, transparent);
color: var(--text-color);
- border: 1px solid color-mix(in srgb, var(--accent-color) 14%, var(--input-border));
+ border: 1px solid color-mix(in srgb, var(--accent-color) 12%, var(--input-border));
box-shadow: none;
}
-.availability-badge { margin-bottom: 18px; }
+.availability-badge {
+ margin-bottom: 18px;
+}
+
.hero-trust {
display: flex;
justify-content: center;
@@ -258,27 +355,65 @@ section + section {
flex-wrap: wrap;
margin-bottom: 22px;
}
+
+.role-fit-grid .glass-card,
+.proof-grid .glass-card {
+ height: 100%;
+}
+
+.hero-scroll-wrap {
+ display: flex;
+ justify-content: center;
+ margin-top: 8px;
+}
+
+.hero-scroll-indicator {
+ width: 44px;
+ height: 44px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--accent-color);
+ background: color-mix(in srgb, var(--card-bg) 72%, transparent);
+ border: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--input-border));
+ border-radius: 999px;
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ box-shadow: var(--shadow-light);
+ cursor: pointer;
+ position: relative;
+}
+
+.hero-scroll-arrow {
+ font-size: 1.05rem;
+ line-height: 1;
+}
+
.hero-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 2px;
align-items: stretch;
- width: min(720px, 100%);
+ width: min(700px, 100%);
}
.hero-stat-card {
padding: 16px 16px 14px;
border-radius: 18px;
- background: color-mix(in srgb, var(--card-bg) 72%, transparent);
- border: 1px solid color-mix(in srgb, var(--accent-color) 12%, var(--input-border));
- box-shadow: 0 10px 26px rgba(10, 18, 32, 0.06);
+ background: color-mix(in srgb, var(--card-bg) 58%, transparent);
+ border: 1px solid color-mix(in srgb, var(--accent-color) 10%, var(--input-border));
+ box-shadow: 0 10px 26px rgba(10, 18, 32, 0.05);
display: grid;
align-content: space-between;
gap: 6px;
min-width: 0;
min-height: 92px;
text-align: left;
+ position: relative;
+ overflow: hidden;
+ isolation: isolate;
+ transform: translateY(var(--lift, 0px)) perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.hero-stat-card strong {
@@ -305,7 +440,7 @@ section + section {
}
.hero-image {
- max-width: 300px;
+ max-width: 294px;
justify-self: center;
margin-top: 6px;
}
@@ -320,11 +455,17 @@ section + section {
.hero-stats {
width: min(680px, 100%);
}
+
+ .hero-scroll-wrap {
+ justify-content: center;
+ width: min(1160px, calc(100% - 80px));
+ margin: 2px auto 0;
+ }
}
@media (max-width: 640px) {
.hero {
- padding: 22px 14px 0;
+ padding: 20px 14px 0;
}
.hero-content {
@@ -333,7 +474,7 @@ section + section {
.hero-title {
font-size: clamp(2.15rem, 10vw, 3rem);
- max-width: 12ch;
+ max-width: 13ch;
}
.hero-description {
@@ -353,6 +494,13 @@ section + section {
width: 100%;
}
+ .hero-image-copy,
+ .hero-image-caption,
+ .hero-image-meta {
+ text-align: center;
+ justify-content: center;
+ }
+
.hero-stat-card:last-child {
grid-column: 1 / -1;
}
@@ -376,11 +524,59 @@ section + section {
}
@keyframes heroFloat {
- 0%,
- 100% {
+ 0%, 100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -8px, 0);
}
}
+
+@media (prefers-reduced-motion: no-preference) {
+ .hero-scroll-indicator {
+ animation: heroScrollPulse 1.8s ease-in-out infinite;
+ }
+
+ .hero-scroll-arrow {
+ animation: heroScrollBounce 1.55s ease-in-out infinite;
+ }
+
+ .hero-image-orbit-a {
+ animation: orbitPulse 9s ease-in-out infinite;
+ }
+
+ .hero-image-orbit-b {
+ animation: orbitPulse 11s ease-in-out infinite reverse;
+ }
+}
+
+@keyframes heroScrollBounce {
+ 0%, 100% {
+ transform: translateY(0);
+ opacity: 0.76;
+ }
+ 50% {
+ transform: translateY(5px);
+ opacity: 1;
+ }
+}
+
+@keyframes heroScrollPulse {
+ 0%, 100% {
+ box-shadow: 0 0 0 0 rgba(76, 182, 255, 0.18);
+ }
+ 50% {
+ box-shadow: 0 0 0 10px rgba(76, 182, 255, 0);
+ }
+}
+
+@keyframes orbitPulse {
+ 0%, 100% {
+ transform: scale(1);
+ opacity: 0.4;
+ }
+ 50% {
+ transform: scale(1.12);
+ opacity: 0.68;
+ }
+}
diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css
index 278b198..14b7c84 100644
--- a/src/styles/Navbar.css
+++ b/src/styles/Navbar.css
@@ -43,25 +43,44 @@ header {
user-select: none;
}
-.logo-icon {
- background: linear-gradient(135deg, var(--accent-color), #00bfff);
- color: #fff;
- font-size: 20px;
- font-weight: bold;
- width: 42px;
- height: 42px;
- border-radius: 14px;
+.logo-mark {
display: flex;
align-items: center;
justify-content: center;
- box-shadow: 0 12px 24px rgba(0, 123, 255, 0.18);
- transition: transform 0.3s ease, box-shadow 0.3s ease;
- cursor: default;
+ width: 42px;
+ height: 42px;
+ color: var(--accent-color);
+ filter: drop-shadow(0 10px 22px rgba(76, 182, 255, 0.18));
}
-.logo-icon:hover {
- transform: translateY(-1px);
- box-shadow: 0 16px 28px rgba(0, 123, 255, 0.22);
+.logo-mark svg {
+ width: 100%;
+ height: 100%;
+ overflow: visible;
+}
+
+.logo-mark-frame {
+ fill: color-mix(in srgb, var(--card-bg) 82%, transparent);
+ stroke: color-mix(in srgb, var(--accent-color) 24%, transparent);
+ stroke-width: 1.4;
+}
+
+.logo-mark-stroke {
+ fill: none;
+ stroke: url(#skGradient);
+ stroke-width: 4.4;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+}
+
+.logo-mark-stroke.accent {
+ stroke-width: 4.8;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .logo-mark {
+ animation: logoPulse 8s ease-in-out infinite;
+ }
}
.logo-text {
@@ -248,10 +267,20 @@ html {
font-size: 1rem;
}
- .logo-icon {
+ .logo-mark {
width: 38px;
height: 38px;
- font-size: 18px;
- border-radius: 12px;
+ }
+}
+
+@keyframes logoPulse {
+ 0%,
+ 100% {
+ transform: translate3d(0, 0, 0);
+ filter: drop-shadow(0 10px 22px rgba(76, 182, 255, 0.16));
+ }
+ 50% {
+ transform: translate3d(0, -1px, 0);
+ filter: drop-shadow(0 14px 28px rgba(76, 182, 255, 0.22));
}
}
diff --git a/src/styles/ProjectsSection.css b/src/styles/ProjectsSection.css
index f87a3ab..1b65521 100644
--- a/src/styles/ProjectsSection.css
+++ b/src/styles/ProjectsSection.css
@@ -150,6 +150,10 @@
max-width: 100%;
text-align: center;
white-space: normal;
+ position: relative;
+ overflow: hidden;
+ isolation: isolate;
+ transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
}
.project-link.primary,
+