made intro page responsive

RohitKS7 · Jul 3, 2024 · 5ffddb2 · 5ffddb2
1 parent e3bc27a
commit 5ffddb2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -175,8 +175,8 @@ code {
 
 /* Embla Carousel */
 .embla {
-  margin-inline: 5rem;
-  width: 55rem;
+  /* margin-inline: 5rem;
+  width: 55rem; */
   overflow: hidden;
 }
 
@@ -188,5 +188,5 @@ code {
 }
 
 .embla__slide {
-  flex: 0 0 27%;
+  flex: 0 0 30%;
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -8,9 +8,9 @@ const IntroPage = () => {
   return (
     <main className="flex-center min-h-screen w-full bg-[#ffdada] ">
       {/* Floating Container */}
-      <div className="intro-shadow relative  flex max-h-[75dvh] w-full max-w-[70dvw] flex-col items-center justify-between gap-8 overflow-hidden  bg-[#f8f8ff]">
+      <div className="intro-shadow relative  flex h-[85dvh] max-h-[85dvh] w-full max-w-[70dvw] flex-col items-center justify-between gap-6 overflow-hidden rounded-md bg-[#f8f8ff] md:h-auto md:max-h-[75dvh]  md:gap-10">
         {/* Creator & Project Name */}
-        <div className="flex-center mt-4 flex-col gap-6">
+        <div className="flex-center mt-4 flex-col gap-6 max-md:mx-4">
           <Link href="/home" className="mt-4 flex items-center gap-3">
             <Image
               src="/assets/images/site-logo.svg"
@@ -19,23 +19,23 @@ const IntroPage = () => {
               alt="DevOverflow"
             />
 
-            <p className="cursor-pointer font-spaceGrotesk text-4xl font-bold text-gray-500">
+            <p className="cursor-pointer font-spaceGrotesk text-4xl font-bold text-gray-500 max-md:w-min">
               Dev <span className="text-primary-500">Overflow</span>
             </p>
           </Link>
-          <p className="body-regular max-w-[75%] text-gray-700">
+          <p className="body-regular lg:paragraph-regular max-w-[75%] text-gray-700">
             DevOverflow is a complex Next.js 14 app that exhibits Q&A platform
             for developers to ask questions, share knowledge, and learn from
             each other.
           </p>
-          <p className="h3-semibold text-gray-500 ">
-            Created By -
-            <span className=" h1-bold mx-2 text-primary-500">
+          <p className="base-semibold rounded-md bg-primary-500 px-3 py-2 text-gray-500 max-md:text-center">
+            Creator -
+            <span className="h2-bold ml-2 text-[#f9f7ff]">
               Rohit Kumar Suman
             </span>
           </p>
           {/* ⁡⁣⁢⁣Link to HomePage⁡ */}
-          <div className="body-regular text-gray-700">
+          <div className="body-regular lg:paragraph-regular text-gray-700">
             Explore the
             <Link
               href="/home"
@@ -46,12 +46,12 @@ const IntroPage = () => {
           </div>
         </div>
         {/* ⁡⁣⁢⁣More Projects Link⁡ */}
-        <div className="flex-center flex-col gap-6">
+        <div className="flex-center w-full flex-col  gap-6">
           <div className="h3-semibold text-gray-500">More Projects By Me :</div>
           <ProjectLinks />
         </div>
         {/* ⁡⁣⁢⁣Social Links⁡ */}
-        <div className="absolute right-0 top-[35%]">
+        <div className="max-md:flex max-md:gap-6 md:absolute md:right-0 md:top-[35%]">
           {socialLinks.map((item) => (
             <Link
               key={item.imgURL}

diff --git a/components/shared/ProjectLinks.tsx b/components/shared/ProjectLinks.tsx
@@ -9,21 +9,21 @@ import { EmblaOptionsType } from "embla-carousel";
 const OPTIONS: EmblaOptionsType = {
   align: "start",
   loop: true,
-  breakpoints: {
-    "(max-width: 640px)": { axis: "y" }, // --> 420px screens and axis will change from "X" (right to left scroll) to "Y" (down to up scroll)
-  },
+  // breakpoints: {
+  //   "(max-width: 640px)": { axis: "y" }, // --> 420px screens and axis will change from "X" (right to left scroll) to "Y" (down to up scroll)
+  // },
 };
 
 const ProjectLinks = () => {
   const [emblaRef] = useEmblaCarousel(OPTIONS);
 
   return (
     <div className="embla" ref={emblaRef}>
-      <div className="embla__container items-center justify-center gap-5 max-sm:flex-col">
+      <div className="embla__container items-center justify-center gap-5 ">
         {projectLinks.map((item) => (
           <div
             key={item.label + item.projectlink}
-            className=" embla__slide  flex cursor-pointer items-center justify-center bg-[#ffdada] max-sm:w-max max-sm:p-3 sm:px-3 sm:pt-3"
+            className=" embla__slide  flex cursor-pointer items-center justify-center rounded-md bg-[#ffdada]  max-sm:p-3 sm:px-3 sm:pt-3"
           >
             <div className="flex-center max-w-40 flex-col gap-3">
               <Link
@@ -33,7 +33,7 @@ const ProjectLinks = () => {
                 <div>
                   {item.label}
                   <p className="mt-[2px]">{item.type}</p>
-                  <div className="paragraph-semibold project-hover-shadow absolute inset-x-0 top-[-40px] flex items-end justify-center bg-[#ffdada] p-[5px] text-gray-700 opacity-0 duration-300 group-hover:opacity-100">
+                  <div className="paragraph-semibold project-hover-shadow absolute inset-x-0 top-[-40px] flex items-end justify-center bg-[#ffdada] p-[5px] text-gray-700 opacity-0 duration-300 group-hover:opacity-100 max-md:hidden">
                     Code
                   </div>
                 </div>
@@ -46,7 +46,7 @@ const ProjectLinks = () => {
                   height={150}
                   className="object-contain"
                 />
-                <div className="paragraph-semibold absolute inset-x-0 bottom-0 flex items-end justify-center bg-[#ffdada] text-gray-700 opacity-0 duration-300 group-hover:opacity-100">
+                <div className="paragraph-semibold absolute inset-x-0 bottom-0 flex items-end justify-center bg-[#ffdada] text-gray-700 opacity-0 duration-300 group-hover:opacity-100 md:hidden">
                   Website
                 </div>
               </Link>