Update profile and background image

mhshujon · Dec 30, 2024 · 5420939 · 5420939
1 parent 7adc8b6
commit 5420939
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/public/assets/hero-bg.webp b/public/assets/hero-bg.webp
diff --git a/public/assets/hero-profile-img.webp b/public/assets/hero-profile-img.webp
diff --git a/public/assets/mern-hero-bg.webp b/public/assets/mern-hero-bg.webp
diff --git a/public/assets/profile-img/mhshujon.webp b/public/assets/profile-img/mhshujon.webp
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -10,7 +10,17 @@ export default function Hero() {
 
     return (
         <div className="relative min-h-screen flex items-center justify-center py-20">
-            {/* Background remains the same */}
+            {/* Background img */}
+            <div className="absolute inset-0 z-0">
+                <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-white opacity-90"/>
+                <img
+                    src="/assets/mern-hero-bg.webp"
+                    alt="MERN Stack Background"
+                    className="w-full h-full object-cover opacity-10"
+                    loading={`eager`}
+                />
+            </div>
+
             <div className="container mx-auto px-4 z-10">
                 <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
                     <div className="order-2 lg:order-1 space-y-8 text-center lg:text-left">
@@ -24,15 +34,16 @@ export default function Hero() {
                             </p>
                         </div>
 
-                        <div className="flex flex-col sm:flex-row gap-4 animate-fade-in justify-center lg:justify-start w-full">
+                        <div
+                            className="flex flex-col sm:flex-row gap-4 animate-fade-in justify-center lg:justify-start w-full">
                             <Button
                                 onClick={() => scrollTo('contact')}
                                 Icon={ArrowRight}
                                 className="w-full sm:w-auto text-sm sm:text-base whitespace-nowrap"
                             >
                                 Get in Touch
                             </Button>
-                            <ResumeButton />
+                            <ResumeButton/>
                         </div>
 
                         <div className="flex gap-6 pt-4 pb-8 justify-center lg:justify-start">
@@ -45,11 +56,13 @@ export default function Hero() {
                     {/* Profile image section */}
                     <div className="order-1 lg:order-2 flex justify-center">
                         <div className="relative mt-10 lg:mt-0">
-                            <div className="absolute inset-0 bg-blue-600 rounded-full blur-3xl opacity-20 animate-pulse"/>
-                            <div className="relative w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-blue-100 to-white animate-float">
+                            <div
+                                className="absolute inset-0 bg-blue-600 rounded-full blur-3xl opacity-20 animate-pulse"/>
+                            <div
+                                className="relative w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-blue-100 to-white animate-float">
                                 <img
-                                    src="/assets/hero-profile-img.webp"
-                                    alt="Profile"
+                                    src="/assets/profile-img/mhshujon.webp"
+                                    alt="mhshujon.webp"
                                     className="w-full h-full object-cover rounded-full shadow-lg"
                                 />
                             </div>