From 7e133dbd7eef906b0316d1704f5dc8e4ced26eda Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 13 Jul 2025 07:24:22 +0000
Subject: [PATCH 1/2] Initial plan


From d1ffd8468a739192c2af57674b2729a078b22239 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 13 Jul 2025 07:33:05 +0000
Subject: [PATCH 2/2] Improve hero section UX - simplify content and reduce
 cognitive load

Co-authored-by: Mbdulrohim <84357102+Mbdulrohim@users.noreply.github.com>
---
 src/components/icons/TechIcons.tsx      | 45 +++++++++++++++----------
 src/components/sections/HeroSection.tsx | 37 ++++++++++----------
 2 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/src/components/icons/TechIcons.tsx b/src/components/icons/TechIcons.tsx
index 8ea90c5..eeef530 100644
--- a/src/components/icons/TechIcons.tsx
+++ b/src/components/icons/TechIcons.tsx
@@ -5,38 +5,49 @@ import {
   SiSolidity, 
   SiKotlin,
   SiReact,
-  SiNodedotjs,
-  SiFirebase,
-  SiDocker,
-  SiPostgresql
 } from 'react-icons/si'
 
 const icons = [
+  { icon: SiReact, name: 'React' },
   { icon: SiNextdotjs, name: 'Next.js' },
   { icon: SiSolidity, name: 'Solidity' },
   { icon: SiKotlin, name: 'Kotlin' },
-  { icon: SiReact, name: 'React' },
-  { icon: SiNodedotjs, name: 'Node.js' },
-  { icon: SiFirebase, name: 'Firebase' },
-  { icon: SiDocker, name: 'Docker' },
-  { icon: SiPostgresql, name: 'PostgreSQL' },
 ]
 
 export default function TechIcons({ compact = false }: { compact?: boolean }) {
+  if (compact) {
+    return (
+      <div className="flex justify-center items-center gap-4">
+        {icons.map(({ icon: Icon, name }) => (
+          <motion.div
+            key={name}
+            className="flex flex-col items-center"
+            whileHover={{ scale: 1.1 }}
+            transition={{ duration: 0.2 }}
+          >
+            <div className="w-8 h-8 flex items-center justify-center">
+              <Icon className="w-6 h-6 text-accent" />
+            </div>
+            <span className="text-xs text-text/60 mt-1">{name}</span>
+          </motion.div>
+        ))}
+      </div>
+    )
+  }
+  
   return (
-    <div className={`grid ${compact ? 'grid-cols-2' : 'grid-cols-4'} gap-4`}>
+    <div className="flex justify-center items-center gap-8 opacity-60">
       {icons.map(({ icon: Icon, name }) => (
         <motion.div
           key={name}
-          className="flex flex-col items-center text-secondary"
-          whileHover={{ scale: 1.1 }}
+          className="flex flex-col items-center"
+          whileHover={{ scale: 1.1, opacity: 1 }}
+          transition={{ duration: 0.2 }}
         >
-          <div className={`p-2 rounded-lg bg-secondary/10 ${compact ? 'w-10 h-10' : 'w-12 h-12'} flex items-center justify-center`}>
-            <Icon className={`${compact ? 'w-6 h-6' : 'w-8 h-8'} text-accent`} />
+          <div className="w-12 h-12 flex items-center justify-center">
+            <Icon className="w-8 h-8 text-accent" />
           </div>
-          {!compact && (
-            <span className="text-xs text-background/80 mt-1">{name}</span>
-          )}
+          <span className="text-xs text-text/60 mt-2">{name}</span>
         </motion.div>
       ))}
     </div>
diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
index d61f686..92c10a9 100644
--- a/src/components/sections/HeroSection.tsx
+++ b/src/components/sections/HeroSection.tsx
@@ -36,13 +36,12 @@ export default function HeroSection() {
         </h1>
 
         {/* Tagline */}
-        <p className="text-lg sm:text-xl md:text-2xl mb-8 text-text/80">
-          Building <span className="text-highlight">Web3</span> &{" "}
-          <span className="text-accent">Cross-Platform</span> Solutions
+        <p className="text-lg sm:text-xl md:text-2xl mb-8 text-text/80 max-w-2xl mx-auto">
+          Crafting <span className="text-accent">digital experiences</span> that matter
         </p>
 
-        {/* CTA Buttons */}
-        <div className="flex flex-col sm:flex-row justify-center gap-4 mb-12">
+        {/* Primary CTA */}
+        <div className="flex flex-col items-center mb-16">
           <motion.button
             whileHover={{ scale: 1.05 }}
             whileTap={{ scale: 0.95 }}
@@ -51,11 +50,11 @@ export default function HeroSection() {
                 .getElementById("projects")
                 ?.scrollIntoView({ behavior: "smooth" });
             }}
-            className="bg-accent text-white px-6 py-3 sm:px-8 sm:py-4 rounded-lg font-medium flex items-center gap-2 cursor-pointer"
+            className="bg-accent text-white px-8 py-4 rounded-lg font-medium flex items-center gap-2 cursor-pointer text-lg mb-4"
           >
-            View My Work
+            Explore My Work
             <svg
-              className="w-4 h-4"
+              className="w-5 h-5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -68,32 +67,34 @@ export default function HeroSection() {
               />
             </svg>
           </motion.button>
-
+          
           <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
             onClick={() => {
               document
                 .getElementById("contact")
                 ?.scrollIntoView({ behavior: "smooth" });
             }}
-            className="border-2 border-accent text-accent px-6 py-3 sm:px-8 sm:py-4 rounded-lg font-medium"
+            className="text-accent text-sm underline underline-offset-4 hover:no-underline transition-all"
           >
-            Contact Me
+            Get in touch
           </motion.button>
         </div>
 
-        {/* Tech Stack Grid */}
+        {/* Tech Stack - Subtle */}
         <section id="skills">
           <div className="relative">
-            <div className="absolute inset-0 flex items-center justify-center">
+            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
               <div
-                className={`w-64 h-64 sm:w-72 sm:h-72 blur-[100px] rounded-full ${
-                  theme === "dark" ? "bg-accent/20" : "bg-accent/10"
+                className={`w-96 h-96 blur-[120px] rounded-full ${
+                  theme === "dark" ? "bg-accent/10" : "bg-accent/5"
                 }`}
               />
             </div>
-            <TechIcons />
+            <div className="relative z-10">
+              <TechIcons />
+            </div>
           </div>
         </section>
       </motion.div>