Hero Updated

Author: krishnaandhe

components/Contact.jsx

@@ -125,7 +125,7 @@ export default function Contact() {
               data-hover
               className="flex items-center gap-2 px-5 py-3 rounded-full bg-accent text-bg font-semibold hover:opacity-90 transition"
             >
-              <FiDownload size={16} /> Download Resume
+              <FiDownload size={16} className="animate-bob" /> Download Resume
             </a>
           )}
         </div>

components/Hero.jsx

@@ -6,7 +6,6 @@ import {
 } from "react-icons/fa6";
 import { profile, stats } from "@/data/portfolio";
 
-/* icon map for the stats strip */
 function statIcon(key) {
   const map = {
     rocket: FaRocket,
@@ -111,7 +110,7 @@ export default function Hero() {
               {profile.resumeUrl && (
                 <a href={profile.resumeUrl} target="_blank" rel="noopener noreferrer" download="Krishna_Andhe_CV.pdf" data-hover
                   className="px-6 py-3 rounded-full border border-accent text-accent font-semibold flex items-center gap-2 hover:bg-accent hover:text-bg transition">
-                  <FiDownload size={18} /> Résumé
+                  <FiDownload size={18} className="animate-bob" /> Résumé
                 </a>
               )}
             </motion.div>
@@ -133,45 +132,45 @@ export default function Hero() {
           </motion.div>
         </div>
 
-        {/* ---------- STATS STRIP (full width, bordered, dividers) ---------- */}
+        {/* ---------- STATS STRIP ----------
+            MOBILE  : 2-column grid (wraps, no horizontal scroll)
+            TABLET  : 3-column grid
+            DESKTOP : single row with vertical dividers                */}
         <motion.div
           initial={{ opacity: 0, y: 24 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.6 }}
-          className="mt-14 glass rounded-2xl px-2 sm:px-4 py-5 sm:py-6"
+          className="mt-14 glass rounded-2xl px-3 sm:px-4 py-5 sm:py-6"
         >
-          <div className="overflow-x-auto no-scrollbar">
-            <ul className="flex items-center min-w-max sm:min-w-0">
-              {stats.map((s, i) => {
-                const Icon = statIcon(s.icon);
-                return (
-                  <li
-                    key={s.label}
-                    className={`flex-1 flex items-center gap-3 sm:gap-4 px-4 sm:px-6 ${
-                      i < stats.length - 1 ? "border-r border-line/70" : ""
-                    }`}
+          <ul className="grid grid-cols-2 sm:grid-cols-3 lg:flex lg:items-center gap-y-5 gap-x-2">
+            {stats.map((s, i) => {
+              const Icon = statIcon(s.icon);
+              return (
+                <li
+                  key={s.label}
+                  className={`flex items-center gap-3 px-2 sm:px-3 lg:px-6 lg:flex-1
+                    ${i < stats.length - 1 ? "lg:border-r lg:border-line/70" : ""}`}
+                >
+                  <motion.span
+                    initial={{ scale: 0.6, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    transition={{ delay: 0.7 + i * 0.08, type: "spring", stiffness: 220, damping: 14 }}
+                    className="shrink-0 text-accent"
                   >
-                    <motion.span
-                      initial={{ scale: 0.6, opacity: 0 }}
-                      animate={{ scale: 1, opacity: 1 }}
-                      transition={{ delay: 0.7 + i * 0.08, type: "spring", stiffness: 220, damping: 14 }}
-                      className="shrink-0 text-accent"
-                    >
-                      <Icon size={26} />
-                    </motion.span>
-                    <span className="min-w-0">
-                      <span className="block text-2xl sm:text-3xl font-extrabold leading-none">
-                        {s.value}
-                      </span>
-                      <span className="block text-[11px] sm:text-xs text-muted mt-1 whitespace-nowrap">
-                        {s.label}
-                      </span>
+                    <Icon size={24} />
+                  </motion.span>
+                  <span className="min-w-0">
+                    <span className="block text-2xl sm:text-3xl font-extrabold leading-none">
+                      {s.value}
                     </span>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
+                    <span className="block text-[11px] sm:text-xs text-muted mt-1 leading-snug">
+                      {s.label}
+                    </span>
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
         </motion.div>
       </div>
     </section>

data/portfolio.js

@@ -23,7 +23,7 @@ export const stats=[
  {value:"14+",  label:"Years Experience",         icon:"rocket"},
  {value:"500+", label:"Projects Delivered 🇮🇳",    icon:"cloud"},
  {value:"270+", label:"Hosted Trainings",         icon:"users"},
- {value:"250+", label:"International Projects",   icon:"shield"},
+ {value:"250+", label:"International Projects 🌍",   icon:"shield"},
  {value:"20+",  label:"Digital Transformations",  icon:"chart"},
 ];
 
@@ -62,8 +62,6 @@ export const about = {
     "Cut support tickets by ~50%",
     "5+ years leading & training Office 365 products",
     "750+ projects across India, UAE & Africa",
-    "MBA – Information Technology",
-    "Multilingual: EN · HI · MR · TE",
   ],
 };
 

tailwind.config.js

@@ -50,6 +50,15 @@ module.exports = {
         blob: "blob 16s ease-in-out infinite",
         spinSlow: "spinSlow 18s linear infinite",
       },
+      keyframes: {
+        bob: {
+          "0%, 100%": { transform: "translateY(0)" },
+          "50%": { transform: "translateY(3px)" },
+        },
+      },
+      animation: {
+        bob: "bob 2s ease-in-out infinite",
+      },
     },
   },
   plugins: [],