Merge pull request #31 from chingu-x/feature/responsive-tech-stack

feat: responsive layout for the tech stack container
chingu-x · Sep 27, 2023 · e637056 · e637056
2 parents 7230214 + 39bcb3f
commit e637056
Showing 1 changed file with 4 additions and 16 deletions.
diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -1,23 +1,11 @@
 import { TechStackCard, techStack } from ".";
 
 export default function TechStackContainer() {
-  function getJustifyClass(index: number) {
-    if (index % 3 === 0) {
-      return "justify-self-start";
-    } else if (index % 3 === 1) {
-      return "justify-self-center";
-    } else {
-      return "justify-self-end";
-    }
-  }
   return (
-    <div className="card bg-secondary-content p-10 w-full">
-      <ul className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-y-20 justify-items-stretch">
-        {Object.keys(techStack).map((cardType, index) => (
-          <li
-            key={cardType}
-            className={`mx-auto xl:mx-0 ${getJustifyClass(index)}`}
-          >
+    <div className="card bg-primary-content p-10 w-full">
+      <ul className="grid grid-cols-2 min-[1920px]:grid-cols-3 gap-10 place-items-center">
+        {Object.keys(techStack).map((cardType) => (
+          <li key={cardType}>
             <TechStackCard
               title={cardType}
               data={techStack[cardType as keyof typeof techStack]}