Make it Responsive :)

ZirgomHaidar · Jun 10, 2024 · a743b31 · a743b31
1 parent 72dca76
commit a743b31
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 24 deletions.
diff --git a/src/components/Intro/Intro.css b/src/components/Intro/Intro.css
@@ -1,13 +1,13 @@
 .intro-container {
-  @apply flex flex-row-reverse flex-grow-0 justify-evenly items-center gap-20 m-16 mt-40 mb-64;
+  @apply flex flex-col md:flex-col lg:flex-row-reverse justify-evenly items-center gap-20 mx-10 mb-40 mt-24 md:mx-20 md:my-48 lg:mx-32 lg:mt-32 lg:mb-72;
 }
 
 .desc {
-  @apply text-4xl;
+  @apply text-xl md:text-2xl lg:text-3xl;
 }
 
 .desc h2 {
-  @apply text-3xl;
+  @apply text-xl md:text-2xl lg:text-3xl;
 }
 
 .my-Info img {

diff --git a/src/components/Intro/Intro.jsx b/src/components/Intro/Intro.jsx
@@ -17,16 +17,21 @@ const Intro = () => {
   return (
     <div className="intro-container">
       <div className="my-Info">
-        <BackgroundGradient className="w-96 h-96 rounded-full">
+        <BackgroundGradient className="md:w-96 md:h-96 rounded-full">
           <img src={pfp} alt="pfp" className="object-contain" />
         </BackgroundGradient>
       </div>
       <div className="desc">
-        I`M {"   "}
-        <FlipWords className="text-7xl" words={words} />
+        I`M <br />
+        <FlipWords
+          className="text-[2.5rem] leading-10 md:text-5xl lg:text-7xl text-nowrap"
+          words={words}
+        />
         <br />
         <br />
-        <h1 className="text-4xl pb-6 text-amber-200">Frontend Developer</h1>
+        <h1 className="text-[2rem] leading-10 md:text-3xl lg:text-4xl pt-3 md:pt-8 pb-6 text-amber-200">
+          Frontend Developer
+        </h1>
         <h2>
           I fondly anticipate working in a challenging yet rewarding
           <br /> organisation to attain its vision for personal growth.

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -1,5 +1,5 @@
 .navbar-container {
-  @apply flex justify-between items-center;
+  @apply flex justify-between items-center m-10 md:m-10 lg:m-10;
 }
 
 .mylogo img {

diff --git a/src/components/Projects/Projects.css b/src/components/Projects/Projects.css
@@ -1,7 +1,7 @@
 .projects-container {
-  @apply mt-48 mb-24 flex flex-col gap-32 items-center justify-center;
+  @apply mt-48 mb-24 flex flex-col gap-20 md:gap-32 items-center justify-center;
 }
 
 li {
-  @apply text-2xl ml-8;
+  @apply text-2xl md:text-2xl ml-8;
 }
diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects/Projects.jsx
@@ -6,7 +6,7 @@ const Projects = () => {
   return (
     <div className="projects-container">
       <h1 className="text-6xl">Projects</h1>
-      <div className="pro1 flex flex-row gap-32 ml-40 mr-40">
+      <div className="pro1 flex flex-col md:flex-row gap-20 md:gap-32 mx-10 md:mx-40">
         <div className="p1-left">
           <h1 className="text-4xl mb-10 mt-10 text-amber-200 ">
             Droidx-UI Website
@@ -23,15 +23,17 @@ const Projects = () => {
             <li>HTML & CSS</li>
             <li>JavaScript</li>
           </ul>
-          <button className="shadow-[inset_0_0_0_2px_#616467] text-white px-12 py-4 rounded-full tracking-widest uppercase font-bold bg-transparent hover:bg-[#616467] hover:text-white dark:text-neutral-200 transition duration-200 mt-10">
-            <a
-              href="https://github.com/ZirgomHaidar/DxWeb"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              View Project Source
-            </a>
-          </button>
+          <div className="flex justify-center md:justify-start">
+            <button className="shadow-[inset_0_0_0_2px_#616467] text-white px-12 py-4 rounded-full tracking-widest uppercase font-bold bg-transparent hover:bg-[#616467] hover:text-white dark:text-neutral-200 transition duration-200 mt-10">
+              <a
+                href="https://github.com/ZirgomHaidar/DxWeb"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                View Project Source
+              </a>
+            </button>
+          </div>
         </div>
         <div className="p1-right">
           <div className="p1-left">

diff --git a/src/components/ui/flip-words.tsx b/src/components/ui/flip-words.tsx
@@ -56,11 +56,10 @@ export const FlipWords = ({
           y: -40,
           x: 40,
           filter: "blur(8px)",
-          scale: 2,
           position: "absolute",
         }}
         className={cn(
-          "z-10 inline-block relative text-left #12110c text-amber-200 px-2",
+          "z-10 inline-block absolute text-left #12110c text-amber-200",
           className
         )}
         key={currentWord}

diff --git a/src/components/ui/infinite-moving-cards.tsx b/src/components/ui/infinite-moving-cards.tsx
@@ -72,7 +72,7 @@ export const InfiniteMovingCards = ({
     <div
       ref={containerRef}
       className={cn(
-        "scroller relative z-20  max-w-[1500px] overflow-hidden  [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
+        "scroller relative z-20 max-w-[400px] md:max-w-[1000px] lg:max-w-[1500px] overflow-hidden  [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
         className
       )}
     >

diff --git a/src/index.css b/src/index.css
@@ -10,7 +10,7 @@
 body {
   color: white;
   background-color: #12110c;
-  margin: 60px;
+  @apply md:m-10 lg:mt-16;
 }
 
 *::-webkit-scrollbar {