improve hero margin and responsiveness

sabotack · Apr 30, 2024 · 93ee44b · 93ee44b
1 parent 71d1034
commit 93ee44b
Showing 1 changed file with 8 additions and 10 deletions.
diff --git a/src/containers/Hero.tsx b/src/containers/Hero.tsx
@@ -8,28 +8,26 @@ const Hero = () => {
             id="about"
             className="w-full h-svh pt-header bg-gradient-home-r"
         >
-            <div className="h-full w-full bg-background dark:bg-dot-white/[0.4] bg-dot-black relative flex items-center justify-center">
+            <div className="h-full w-full bg-background dark:bg-dot-white bg-dot-black relative flex items-center justify-center">
                 <div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]" />
-                <div className="supports-[backdrop-filter]:bg-background/70 h-full w-full flex flex-col items-center justify-center z-10">
+                <div className="pt-16 supports-[backdrop-filter]:bg-background/70 h-full w-full flex flex-col items-center justify-center z-10">
                     <div className="px-8 flex items-center justify-center gap-x-20 flex-col xl:flex-row">
                         <div className="max-w-2xl">
-                            <h1 className="text-4xl md:text-6xl font-bold py-6 flex items-center justify-center xl:justify-normal">
+                            <h1 className="text-2xl md:text-6xl font-bold py-6 flex items-center justify-center xl:justify-normal">
                                 Software Engineer
                                 <img
                                     src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Fire.png"
                                     alt="Fire"
-                                    width="60"
-                                    height="60"
-                                    className="ml-4"
+                                    className="ml-4 w-10 h-10 md:w-16 md:h-16 hid"
                                 />
                             </h1>
-                            <p className="pb-8 md:text-lg text-center xl:text-left">
+                            <p className="max-w-xl pb-8 md:text-lg text-sm text-center xl:text-left">
                                 Hi, I'm Ali Sajad Khorami. A passionate Software
-                                Engineering student at Aalborg University.
+                                Engineering student at AAU.
                                 <br />
                                 Currently based in Aalborg, Denmark 📍
                             </p>
-                            <div className="my-4 flex gap-x-4">
+                            <div className="md:my-4 xl:justify-normal flex justify-center gap-x-4">
                                 <a
                                     target="_blank"
                                     href="https://www.linkedin.com/in/alikhorami/"
@@ -45,7 +43,7 @@ const Hero = () => {
                             </div>
                         </div>
                         <div
-                            className="my-8 w-72 h-72 sm:w-96 sm:h-96 bg-no-repeat bg-cover rounded-full shadow-2xl align-middle"
+                            className="my-8 w-60 h-60 sm:w-96 sm:h-96 bg-no-repeat bg-cover rounded-full shadow-2xl align-middle"
                             style={{ backgroundImage: `url("${profile}")` }}
                         />
                     </div>