design: premium hero and portfolio polish

Author: SunilKumarKV

src/components/HeroSection.jsx

@@ -73,6 +73,51 @@ export default function HeroSection() {
     };
   }, [problems, projects]);
 
+  const prefersReducedMotion =
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  const [metricDisplay, setMetricDisplay] = useState({
+    repositories: prefersReducedMotion ? summary.repositories : 0,
+    problems: prefersReducedMotion ? summary.problems : 0,
+    verified: prefersReducedMotion ? summary.verified : 0,
+  });
+
+  useEffect(() => {
+    if (prefersReducedMotion) {
+      setMetricDisplay({
+        repositories: summary.repositories,
+        problems: summary.problems,
+        verified: summary.verified,
+      });
+      return undefined;
+    }
+
+    let frameId = 0;
+    const duration = 950;
+    const start = performance.now();
+
+    const step = (now) => {
+      const progress = Math.min(1, (now - start) / duration);
+      const eased = 1 - Math.pow(1 - progress, 3);
+
+      setMetricDisplay({
+        repositories: Math.round(summary.repositories * eased),
+        problems: Math.round(summary.problems * eased),
+        verified: Math.round(summary.verified * eased),
+      });
+
+      if (progress < 1) {
+        frameId = window.requestAnimationFrame(step);
+      }
+    };
+
+    frameId = window.requestAnimationFrame(step);
+
+    return () => window.cancelAnimationFrame(frameId);
+  }, [prefersReducedMotion, summary.problems, summary.repositories, summary.verified]);
+
   return (
     <main className="home-shell">
       <section className="hero" id="home">
@@ -86,24 +131,41 @@ export default function HeroSection() {
           <h4 className="hero-subtitle">{profile.name}</h4>
           <h1 className="hero-title">I build web apps that turn learning, coding, and workflows into usable products.</h1>
           <p className="hero-description">
-            I&apos;m a full-stack focused developer building SunilCraft, coding-journal, and
-            product-style tools with React, Node.js, GitHub workflows, and real project systems.
+            MCA student at Bangalore University building developer tools, portfolio systems, coding workflows, and product-focused web applications with React and Node.js.
           </p>
-          <div className="hero-actions">
-            <Link to="/projects" className="hero-button">Explore Work</Link>
-            <Link to="/dashboard" className="hero-button secondary">Open Dashboard</Link>
-            <a href={profile.github} className="hero-button secondary" target="_blank" rel="noreferrer">GitHub</a>
+
+          <div className="hero-trust">
+            <Badge tone="accent">GitHub synced</Badge>
+            <Badge tone="success">Verified solutions</Badge>
+            <Badge>Live coding journal</Badge>
           </div>
 
           <div className="hero-stats" aria-label="Portfolio stats">
-            <span><strong>{summary.repositories || "--"}</strong> Live Repos</span>
-            <span><strong>{summary.problems || "--"}</strong> Problems</span>
-            <span><strong>{summary.verified || "--"}</strong> Verified</span>
+            <article className="hero-stat-card">
+              <strong>{metricDisplay.repositories || 0}</strong>
+              <span>Repositories</span>
+            </article>
+            <article className="hero-stat-card">
+              <strong>{metricDisplay.problems || 0}</strong>
+              <span>Problems Solved</span>
+            </article>
+            <article className="hero-stat-card">
+              <strong>{metricDisplay.verified || 0}</strong>
+              <span>Verified Solutions</span>
+            </article>
           </div>
         </motion.div>
 
         <div className="hero-image">
-          <img src={HeroPic} alt="Sunil Kumar K V profile" loading="eager" />
+          <div className="hero-image-card">
+            <img src={HeroPic} alt="Sunil Kumar K V profile" loading="eager" />
+          </div>
+        </div>
+
+        <div className="hero-actions hero-actions-stage" aria-label="Primary actions">
+          <Link to="/projects" className="hero-button">Explore Work</Link>
+          <Link to="/dashboard" className="hero-button secondary">Open Dashboard</Link>
+          <a href={profile.github} className="hero-button secondary" target="_blank" rel="noreferrer">GitHub</a>
         </div>
       </section>
 

src/components/ui/AnimatedBackground.jsx

@@ -2,31 +2,31 @@ import React, { useContext, useMemo } from "react";
 import { ThemeContext } from "../../context/theme";
 import "../../styles/AnimatedBackground.css";
 
-const codeSymbols = ["{ }", "< />", "=>", "fn()", "[]", "&&", "const", "git"];
+const codeSymbols = ["{}", "<>", "()", "[]", "λ"];
 
 export default function AnimatedBackground() {
   const { theme } = useContext(ThemeContext);
 
   const items = useMemo(
     () =>
-      Array.from({ length: 12 }, (_, index) => ({
+      Array.from({ length: 10 }, (_, index) => ({
         id: index,
         symbol: codeSymbols[index % codeSymbols.length],
-        left: `${6 + index * 7.5}%`,
-        delay: `${(index % 6) * 1.2}s`,
-        duration: `${10 + (index % 5) * 2}s`,
+        left: `${8 + index * 8.4}%`,
+        delay: `${(index % 5) * 1.35}s`,
+        duration: `${13 + (index % 4) * 2.6}s`,
       })),
     []
   );
 
   const sparkles = useMemo(
     () =>
-      Array.from({ length: 14 }, (_, index) => ({
+      Array.from({ length: 12 }, (_, index) => ({
         id: index,
-        left: `${4 + index * 6.7}%`,
+        left: `${5 + index * 7.4}%`,
         top: `${8 + (index % 5) * 18}%`,
-        delay: `${(index % 7) * 0.8}s`,
-        duration: `${8 + (index % 4) * 1.4}s`,
+        delay: `${(index % 6) * 0.9}s`,
+        duration: `${9 + (index % 4) * 1.8}s`,
       })),
     []
   );

src/styles/AnimatedBackground.css

@@ -10,12 +10,12 @@
 .bg-dark-glow {
   position: absolute;
   border-radius: 999px;
-  filter: blur(40px);
-  opacity: 0.32;
+  filter: blur(46px);
+  opacity: 0.24;
 }
 
 .bg-light-blob {
-  background: radial-gradient(circle, rgba(0, 123, 255, 0.18), rgba(0, 123, 255, 0));
+  background: radial-gradient(circle, rgba(0, 123, 255, 0.13), rgba(0, 123, 255, 0));
 }
 
 .bg-light-blob-a {
@@ -40,7 +40,7 @@
 }
 
 .bg-dark-glow {
-  background: radial-gradient(circle, rgba(0, 191, 255, 0.18), rgba(0, 191, 255, 0));
+  background: radial-gradient(circle, rgba(0, 191, 255, 0.12), rgba(0, 191, 255, 0));
 }
 
 .bg-dark-glow-a {
@@ -64,16 +64,16 @@
 
 .bg-particle {
   position: absolute;
-  width: 0.45rem;
-  height: 0.45rem;
+  width: 0.38rem;
+  height: 0.38rem;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.14);
-  box-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.06);
 }
 
 .bg-particles.light .bg-particle {
-  background: rgba(0, 123, 255, 0.12);
-  box-shadow: 0 0 12px rgba(0, 123, 255, 0.08);
+  background: rgba(0, 123, 255, 0.08);
+  box-shadow: 0 0 10px rgba(0, 123, 255, 0.06);
 }
 
 .bg-code-rain {
@@ -84,9 +84,9 @@
 .bg-code-symbol {
   position: absolute;
   top: -10%;
-  color: rgba(162, 220, 255, 0.08);
-  font-size: 0.9rem;
-  font-weight: 700;
+  color: rgba(162, 220, 255, 0.06);
+  font-size: 0.78rem;
+  font-weight: 600;
   letter-spacing: 0.08em;
   white-space: nowrap;
 }
@@ -132,23 +132,23 @@
   0%,
   100% {
     transform: translate3d(0, 0, 0);
-    opacity: 0.32;
+    opacity: 0.24;
   }
   50% {
     transform: translate3d(0, 18px, 0);
-    opacity: 0.34;
+    opacity: 0.26;
   }
 }
 
 @keyframes sparkleFloat {
   0%,
   100% {
     transform: translate3d(0, 0, 0) scale(0.9);
-    opacity: 0.25;
+    opacity: 0.18;
   }
   50% {
     transform: translate3d(0, -14px, 0) scale(1.12);
-    opacity: 0.38;
+    opacity: 0.28;
   }
 }
 
@@ -158,10 +158,10 @@
     opacity: 0;
   }
   12% {
-    opacity: 0.12;
+    opacity: 0.08;
   }
   88% {
-    opacity: 0.08;
+    opacity: 0.05;
   }
   100% {
     transform: translate3d(0, 110vh, 0);