Fix projects layout

john-papani · Apr 3, 2024 · b02ac8c · b02ac8c
1 parent 56defce
commit b02ac8c
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/src/Components/Projects/ProjectCarousel/Card.js b/src/Components/Projects/ProjectCarousel/Card.js
@@ -2,7 +2,7 @@ const Card = ({ card }) => {
   return (
     <div
       key={card.id}
-      className="relative h-[35vh] w-[80vw] lg:h-[350px] ml-[10%] lg:ml-0 lg:w-[350px] overflow-hidden bg-neutral-200  hover:border-red-700 hover:border-4 cursor-pointer"
+      className="relative h-[30vh] w-[42vw] lg:h-[250px] lg:ml-0 lg:w-[250px] overflow-hidden bg-neutral-200  hover:border-red-700 hover:border-4 cursor-pointer"
       onClick={() => window.open(card.githubLink, "_blank")}
     >
       <div
@@ -14,7 +14,7 @@ const Card = ({ card }) => {
         className="absolute inset-0 z-0 transition-transform duration-300 group-hover:scale-110"
       ></div>
       <div className="absolute inset-0 z-10 grid place-content-center">
-        <p className="bg-gradient-to-br from-white/10 to-white/0 p-8 text-sm lg:text-2xl font-black text-black backdrop-blur-lg">
+        <p className="bg-gradient-to-br from-white/10 to-white/0 p-8 text-sm lg:text-base font-black text-black backdrop-blur-lg">
           {card.title}
         </p>
       </div>

diff --git a/src/Components/Projects/ProjectCarousel/HorizontalScroll.js b/src/Components/Projects/ProjectCarousel/HorizontalScroll.js
@@ -4,7 +4,7 @@ import Card from "./Card";
 const HorizontalScroll = () => {
   return (
     <>
-      <div className="flex flex-wrap justify-center gap-5">
+      <div className="flex flex-wrap justify-center gap-5 w-[80%] text-center">
         {all_projects_list.map((card) => {
           return <Card card={card} key={card.id} />;
         })}

diff --git a/src/Components/Projects/ProjectCarousel/ProjectsCarousel.js b/src/Components/Projects/ProjectCarousel/ProjectsCarousel.js
@@ -4,7 +4,7 @@ import HorizontalScroll from "./HorizontalScroll";
 const ProjectsCarousel = () => {
   return (
     <>
-      <div className="hidden lg:flex md:pt-5" >
+      <div className="hidden lg:flex md:py-5 justify-evenly" >
         <HorizontalScroll />
       </div>
       <div className="flex lg:hidden pb-[10%] w-full">

diff --git a/src/Components/Projects/ProjectCarousel/VerticalScroll.js b/src/Components/Projects/ProjectCarousel/VerticalScroll.js
@@ -4,7 +4,7 @@ import Card from "./Card";
 const VerticalScroll = () => {
   return (
     <>
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-row flex-wrap gap-2 justify-center">
         {all_projects_list.map((card) => {
           return <Card card={card} key={card.id} />;
         })}