From fbbf1edfc948d98f3bf8487b645df22a97274d48 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Mon, 25 Sep 2023 15:56:58 +0200
Subject: [PATCH 1/2] feat: responsive layout for the tech stack container

---
 .../tech-stack/components/TechStackContainer.tsx   | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
index 84acd905..61e3bab0 100644
--- a/src/app/tech-stack/components/TechStackContainer.tsx
+++ b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -1,22 +1,12 @@
 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-primary-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) => (
+      <ul className="grid grid-cols-2 min-[1920px]:grid-cols-3 gap-10 place-items-center">
+        {Object.keys(techStack).map((cardType) => (
           <li
             key={cardType}
-            className={`mx-auto xl:mx-0 ${getJustifyClass(index)}`}
           >
             <TechStackCard
               title={cardType}

From b5c7a22d1274eddb5779b7a7e280f4cde4a1086c Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Mon, 25 Sep 2023 16:01:37 +0200
Subject: [PATCH 2/2] feat: correct prettier errors

---
 src/app/tech-stack/components/TechStackContainer.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
index 61e3bab0..86c80d09 100644
--- a/src/app/tech-stack/components/TechStackContainer.tsx
+++ b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -5,9 +5,7 @@ export default function TechStackContainer() {
     <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}
-          >
+          <li key={cardType}>
             <TechStackCard
               title={cardType}
               data={techStack[cardType as keyof typeof techStack]}