From 884a5c8944c16199d19cf351b98f863813d4b2f5 Mon Sep 17 00:00:00 2001
From: Timothy Russo <timothy.russo.ext@adevinta.com>
Date: Sat, 26 Aug 2023 15:33:02 +0200
Subject: [PATCH 01/22] feat: folder structure for the Tech stack card
 component

---
 src/app/feature/components/TechStackCard.tsx  | 23 +++++++++++++++++++
 .../components/fixtures/TechStackCard.ts      |  1 +
 src/app/feature/components/index.ts           |  1 +
 3 files changed, 25 insertions(+)
 create mode 100644 src/app/feature/components/TechStackCard.tsx
 create mode 100644 src/app/feature/components/fixtures/TechStackCard.ts
 create mode 100644 src/app/feature/components/index.ts

diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/feature/components/TechStackCard.tsx
new file mode 100644
index 00000000..576cd276
--- /dev/null
+++ b/src/app/feature/components/TechStackCard.tsx
@@ -0,0 +1,23 @@
+import { frontend } from "./fixtures/TechStackCard";
+
+export default function TechStackCard() {
+  return (
+    <div className="card w-96 text-primary-content bg-neutral-50 rounded-lg">
+      <div className="flex flex-row justify-between">
+        <h2 className="text-xl font-semibold text-neutral-900 mt-5 ml-5">
+          Frontend
+        </h2>
+        <button type="button" className="btn mt-5 mr-5">
+          Edit
+        </button>
+      </div>
+      <div className="h-40 overflow-y-auto ml-5 mr-5 mt-6 mb-5">
+        <ul className="text-neutral-900">
+          {frontend.map(element => 
+            <li className="text-base mb-5" key={element}>{element}</li>
+            )}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/feature/components/fixtures/TechStackCard.ts b/src/app/feature/components/fixtures/TechStackCard.ts
new file mode 100644
index 00000000..b243a25e
--- /dev/null
+++ b/src/app/feature/components/fixtures/TechStackCard.ts
@@ -0,0 +1 @@
+export const frontend = ['JavaScript', 'React', 'Vue', 'Angular', 'TypeScript']
\ No newline at end of file
diff --git a/src/app/feature/components/index.ts b/src/app/feature/components/index.ts
new file mode 100644
index 00000000..1ca0557a
--- /dev/null
+++ b/src/app/feature/components/index.ts
@@ -0,0 +1 @@
+export { default as TechStackCard } from "./TechStackCard";

From 647605ed8ef5db4411f33e4fe469744ee3a38645 Mon Sep 17 00:00:00 2001
From: Timothy Russo <timothy.russo.ext@adevinta.com>
Date: Sat, 26 Aug 2023 15:40:48 +0200
Subject: [PATCH 02/22] feat: Avatar component folder structure

---
 src/app/feature/components/TechStackCard.tsx         | 8 +++++---
 src/app/feature/components/fixtures/TechStackCard.ts | 2 +-
 src/components/Avatar.tsx                            | 3 +++
 src/components/index.ts                              | 1 +
 4 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Avatar.tsx

diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/feature/components/TechStackCard.tsx
index 576cd276..a8cda7c2 100644
--- a/src/app/feature/components/TechStackCard.tsx
+++ b/src/app/feature/components/TechStackCard.tsx
@@ -13,9 +13,11 @@ export default function TechStackCard() {
       </div>
       <div className="h-40 overflow-y-auto ml-5 mr-5 mt-6 mb-5">
         <ul className="text-neutral-900">
-          {frontend.map(element => 
-            <li className="text-base mb-5" key={element}>{element}</li>
-            )}
+          {frontend.map((element) => (
+            <li className="text-base mb-5" key={element}>
+              {element}
+            </li>
+          ))}
         </ul>
       </div>
     </div>
diff --git a/src/app/feature/components/fixtures/TechStackCard.ts b/src/app/feature/components/fixtures/TechStackCard.ts
index b243a25e..5e5d9f42 100644
--- a/src/app/feature/components/fixtures/TechStackCard.ts
+++ b/src/app/feature/components/fixtures/TechStackCard.ts
@@ -1 +1 @@
-export const frontend = ['JavaScript', 'React', 'Vue', 'Angular', 'TypeScript']
\ No newline at end of file
+export const frontend = ["JavaScript", "React", "Vue", "Angular", "TypeScript"];
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
new file mode 100644
index 00000000..f8eb46bc
--- /dev/null
+++ b/src/components/Avatar.tsx
@@ -0,0 +1,3 @@
+export default function Avatar() {
+  return <div></div>;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 396a2b73..39a15b83 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1 +1,2 @@
 export { default as StoreProvider } from "./StoreProvider";
+export { default as Avatar } from "./Avatar";

From 23476fdb3b930597e661acfd98fbcc8eb7b51851 Mon Sep 17 00:00:00 2001
From: Timothy Russo <timothy.russo.ext@adevinta.com>
Date: Sat, 26 Aug 2023 16:31:05 +0200
Subject: [PATCH 03/22] feat: style the scrollbar

---
 src/app/feature/components/TechStackCard.tsx  |  2 +-
 .../components/fixtures/TechStackCard.ts      |  2 +-
 src/app/globals.css                           | 19 +++++++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/feature/components/TechStackCard.tsx
index a8cda7c2..15831496 100644
--- a/src/app/feature/components/TechStackCard.tsx
+++ b/src/app/feature/components/TechStackCard.tsx
@@ -7,7 +7,7 @@ export default function TechStackCard() {
         <h2 className="text-xl font-semibold text-neutral-900 mt-5 ml-5">
           Frontend
         </h2>
-        <button type="button" className="btn mt-5 mr-5">
+        <button type="button" className="btn mt-5 mr-5 capitalize">
           Edit
         </button>
       </div>
diff --git a/src/app/feature/components/fixtures/TechStackCard.ts b/src/app/feature/components/fixtures/TechStackCard.ts
index 5e5d9f42..47289a59 100644
--- a/src/app/feature/components/fixtures/TechStackCard.ts
+++ b/src/app/feature/components/fixtures/TechStackCard.ts
@@ -1 +1 @@
-export const frontend = ["JavaScript", "React", "Vue", "Angular", "TypeScript"];
+export const frontend: string[] = ["JavaScript", "React", "Vue", "Angular", "TypeScript"];
diff --git a/src/app/globals.css b/src/app/globals.css
index b5c61c95..8640c900 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,22 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+::-webkit-scrollbar {
+    width: 4px;
+}
+
+::-webkit-scrollbar-track {
+    background: #C0C0C0;
+    border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #919191;
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #919191;
+}
\ No newline at end of file

From 5987154c673422978fa1c1bfc6502b984dd50162 Mon Sep 17 00:00:00 2001
From: Timothy Russo <timothy.russo.ext@adevinta.com>
Date: Sun, 27 Aug 2023 13:30:42 +0200
Subject: [PATCH 04/22] feat: add Avatar component

---
 src/app/feature/components/TechStackCard.tsx  | 24 ++++++++++++++-----
 .../components/fixtures/TechStackCard.ts      |  8 ++++++-
 src/components/Avatar.tsx                     |  6 ++++-
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/feature/components/TechStackCard.tsx
index 15831496..4c601295 100644
--- a/src/app/feature/components/TechStackCard.tsx
+++ b/src/app/feature/components/TechStackCard.tsx
@@ -1,21 +1,33 @@
 import { frontend } from "./fixtures/TechStackCard";
+import { Avatar } from "@/components";
 
 export default function TechStackCard() {
   return (
-    <div className="card w-96 text-primary-content bg-neutral-50 rounded-lg">
+    <div className="card w-96 text-primary-content bg-neutral-100 rounded-lg">
       <div className="flex flex-row justify-between">
-        <h2 className="text-xl font-semibold text-neutral-900 mt-5 ml-5">
+        <h2 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center">
           Frontend
         </h2>
-        <button type="button" className="btn mt-5 mr-5 capitalize">
+        <button
+          type="button"
+          className="btn mt-5 mr-5 capitalize w-16 h-8 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent"
+        >
           Edit
         </button>
       </div>
       <div className="h-40 overflow-y-auto ml-5 mr-5 mt-6 mb-5">
-        <ul className="text-neutral-900">
+        <ul className="text-neutral-900 last:mb-0">
           {frontend.map((element) => (
-            <li className="text-base mb-5" key={element}>
-              {element}
+            <li
+              className="text-base mb-5 last:mb-0 relative grid grid-cols-[1fr,auto] items-center"
+              key={element.id}
+            >
+              {element.value}
+              <div className="avatar-group -space-x-2 absolute left-28">
+                {element.users.map((user) => (
+                  <Avatar key={`${element.id}-${user}`} />
+                ))}
+              </div>
             </li>
           ))}
         </ul>
diff --git a/src/app/feature/components/fixtures/TechStackCard.ts b/src/app/feature/components/fixtures/TechStackCard.ts
index 47289a59..b9274ad7 100644
--- a/src/app/feature/components/fixtures/TechStackCard.ts
+++ b/src/app/feature/components/fixtures/TechStackCard.ts
@@ -1 +1,7 @@
-export const frontend: string[] = ["JavaScript", "React", "Vue", "Angular", "TypeScript"];
+export const frontend = [
+  { id: 1, value: "JavaScript", users: ["Tim", "John"] },
+  { id: 2, value: "React", users: ["John"] },
+  { id: 3, value: "Vue", users: ["Myke", "Josh", "Jack"] },
+  { id: 4, value: "Angular", users: ["John"] },
+  { id: 5, value: "TypeScript", users: ["Jack", "John"] },
+];
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index f8eb46bc..e7ef1fa7 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,3 +1,7 @@
 export default function Avatar() {
-  return <div></div>;
+  return (
+    <div className="avatar bg-neutral-300 rounded-full border-2 border-neutral-100">
+      <div className="w-6"></div>
+    </div>
+  );
 }

From 6ea3ddfd3c8cd098e0ccb2bd0db4ca4a0db406ef Mon Sep 17 00:00:00 2001
From: Timothy Russo <timothy.russo.ext@adevinta.com>
Date: Sun, 27 Aug 2023 14:05:47 +0200
Subject: [PATCH 05/22] feat: update scrollbar color

---
 src/app/globals.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 8640c900..cc294bc0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -8,15 +8,15 @@
 }
 
 ::-webkit-scrollbar-track {
-    background: #C0C0C0;
+    background: #919191;
     border-radius: 2px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #919191;
+    background: #C0C0C0;
     border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #919191;
+    background: #C0C0C0;
 }
\ No newline at end of file

From 0f842971df7a29e7d6f2212c5676076338d11c34 Mon Sep 17 00:00:00 2001
From: Timothy Russo <timothy.russo.ext@adevinta.com>
Date: Sun, 27 Aug 2023 14:28:01 +0200
Subject: [PATCH 06/22] feat: improve accessibility

---
 src/app/feature/components/TechStackCard.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/feature/components/TechStackCard.tsx
index 4c601295..0aff0df0 100644
--- a/src/app/feature/components/TechStackCard.tsx
+++ b/src/app/feature/components/TechStackCard.tsx
@@ -1,21 +1,26 @@
 import { frontend } from "./fixtures/TechStackCard";
 import { Avatar } from "@/components";
 
-export default function TechStackCard() {
+interface TechStackCardProps {
+  title: string
+}
+
+export default function TechStackCard({ title }: TechStackCardProps) {
   return (
     <div className="card w-96 text-primary-content bg-neutral-100 rounded-lg">
       <div className="flex flex-row justify-between">
-        <h2 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center">
-          Frontend
-        </h2>
+        <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center">
+          {title}
+        </h3>
         <button
           type="button"
           className="btn mt-5 mr-5 capitalize w-16 h-8 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent"
+          aria-label={`Edit ${title}`}
         >
           Edit
         </button>
       </div>
-      <div className="h-40 overflow-y-auto ml-5 mr-5 mt-6 mb-5">
+      <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5">
         <ul className="text-neutral-900 last:mb-0">
           {frontend.map((element) => (
             <li

From fd9ff9192912eb616a0605bc2e510059b1f45cef Mon Sep 17 00:00:00 2001
From: Timothy Russo <timothy.russo.ext@adevinta.com>
Date: Sun, 27 Aug 2023 15:24:21 +0200
Subject: [PATCH 07/22] feat: add Tech Stack Container

---
 .../components/TechStackCard.tsx                 |  4 ++--
 .../TechStack/components/TechStackContainer.tsx  | 16 ++++++++++++++++
 .../components/fixtures/TechStack.ts}            |  9 +++++++++
 src/app/TechStack/components/index.ts            |  2 ++
 src/app/feature/components/index.ts              |  1 -
 tailwind.config.js                               |  4 +++-
 6 files changed, 32 insertions(+), 4 deletions(-)
 rename src/app/{feature => TechStack}/components/TechStackCard.tsx (95%)
 create mode 100644 src/app/TechStack/components/TechStackContainer.tsx
 rename src/app/{feature/components/fixtures/TechStackCard.ts => TechStack/components/fixtures/TechStack.ts} (70%)
 create mode 100644 src/app/TechStack/components/index.ts
 delete mode 100644 src/app/feature/components/index.ts

diff --git a/src/app/feature/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx
similarity index 95%
rename from src/app/feature/components/TechStackCard.tsx
rename to src/app/TechStack/components/TechStackCard.tsx
index 0aff0df0..bc5b6b7c 100644
--- a/src/app/feature/components/TechStackCard.tsx
+++ b/src/app/TechStack/components/TechStackCard.tsx
@@ -1,8 +1,8 @@
-import { frontend } from "./fixtures/TechStackCard";
+import { frontend } from "./fixtures/TechStack";
 import { Avatar } from "@/components";
 
 interface TechStackCardProps {
-  title: string
+  title: string;
 }
 
 export default function TechStackCard({ title }: TechStackCardProps) {
diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx
new file mode 100644
index 00000000..4ad6479e
--- /dev/null
+++ b/src/app/TechStack/components/TechStackContainer.tsx
@@ -0,0 +1,16 @@
+import { cards } from "./fixtures/TechStack";
+import { TechStackCard } from ".";
+
+export default function TechStackContainer() {
+  return (
+    <div className="card w-tech-card-container bg-primary p-10">
+      <ul className="grid grid-cols-3 gap-y-20">
+        {cards.map((element) => (
+          <li className="mx-auto" key={element}>
+            <TechStackCard title={element} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/app/feature/components/fixtures/TechStackCard.ts b/src/app/TechStack/components/fixtures/TechStack.ts
similarity index 70%
rename from src/app/feature/components/fixtures/TechStackCard.ts
rename to src/app/TechStack/components/fixtures/TechStack.ts
index b9274ad7..52f8e797 100644
--- a/src/app/feature/components/fixtures/TechStackCard.ts
+++ b/src/app/TechStack/components/fixtures/TechStack.ts
@@ -1,3 +1,12 @@
+export const cards = [
+  "Frontend",
+  "CSS Library",
+  "Backend",
+  "Project Management",
+  "Server-Side",
+  "Hoisting",
+];
+
 export const frontend = [
   { id: 1, value: "JavaScript", users: ["Tim", "John"] },
   { id: 2, value: "React", users: ["John"] },
diff --git a/src/app/TechStack/components/index.ts b/src/app/TechStack/components/index.ts
new file mode 100644
index 00000000..b49b4cb9
--- /dev/null
+++ b/src/app/TechStack/components/index.ts
@@ -0,0 +1,2 @@
+export { default as TechStackCard } from "./TechStackCard";
+export { default as TechStackContainer } from "./TechStackContainer";
diff --git a/src/app/feature/components/index.ts b/src/app/feature/components/index.ts
deleted file mode 100644
index 1ca0557a..00000000
--- a/src/app/feature/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TechStackCard } from "./TechStackCard";
diff --git a/tailwind.config.js b/tailwind.config.js
index 51f40985..43c042e2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,9 @@ module.exports = {
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-    extend: {},
+    extend: {width: {
+      'tech-card-container': '85.5625rem',
+    },},
   },
   plugins: [require("daisyui")],
 };

From 95ca3ce516b3c1085b04dae1681338da5e4898ea Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Mon, 28 Aug 2023 09:10:58 +0200
Subject: [PATCH 08/22] feat: updata data for the cards

---
 .../TechStack/components/TechStackCard.tsx    |  7 +-
 .../components/TechStackContainer.tsx         |  8 +--
 .../components/fixtures/TechStack.ts          | 72 +++++++++++++++----
 tailwind.config.js                            |  8 ++-
 4 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx
index bc5b6b7c..ca3cc741 100644
--- a/src/app/TechStack/components/TechStackCard.tsx
+++ b/src/app/TechStack/components/TechStackCard.tsx
@@ -1,11 +1,12 @@
-import { frontend } from "./fixtures/TechStack";
+import { TechItem } from "./fixtures/TechStack";
 import { Avatar } from "@/components";
 
 interface TechStackCardProps {
   title: string;
+  data: TechItem[];
 }
 
-export default function TechStackCard({ title }: TechStackCardProps) {
+export default function TechStackCard({ title, data }: TechStackCardProps) {
   return (
     <div className="card w-96 text-primary-content bg-neutral-100 rounded-lg">
       <div className="flex flex-row justify-between">
@@ -22,7 +23,7 @@ export default function TechStackCard({ title }: TechStackCardProps) {
       </div>
       <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5">
         <ul className="text-neutral-900 last:mb-0">
-          {frontend.map((element) => (
+          {data.map((element) => (
             <li
               className="text-base mb-5 last:mb-0 relative grid grid-cols-[1fr,auto] items-center"
               key={element.id}
diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx
index 4ad6479e..523173c0 100644
--- a/src/app/TechStack/components/TechStackContainer.tsx
+++ b/src/app/TechStack/components/TechStackContainer.tsx
@@ -1,13 +1,13 @@
-import { cards } from "./fixtures/TechStack";
+import { techStack } from "./fixtures/TechStack";
 import { TechStackCard } from ".";
 
 export default function TechStackContainer() {
   return (
     <div className="card w-tech-card-container bg-primary p-10">
       <ul className="grid grid-cols-3 gap-y-20">
-        {cards.map((element) => (
-          <li className="mx-auto" key={element}>
-            <TechStackCard title={element} />
+      {Object.keys(techStack).map((cardType) => (
+          <li className="mx-auto" key={cardType}>
+            <TechStackCard title={cardType} data={techStack[cardType as keyof typeof techStack]} />
           </li>
         ))}
       </ul>
diff --git a/src/app/TechStack/components/fixtures/TechStack.ts b/src/app/TechStack/components/fixtures/TechStack.ts
index 52f8e797..e3b2a597 100644
--- a/src/app/TechStack/components/fixtures/TechStack.ts
+++ b/src/app/TechStack/components/fixtures/TechStack.ts
@@ -1,16 +1,58 @@
-export const cards = [
-  "Frontend",
-  "CSS Library",
-  "Backend",
-  "Project Management",
-  "Server-Side",
-  "Hoisting",
-];
+type CardType = 
+  | "Frontend"
+  | "CSS Library"
+  | "Backend"
+  | "Project Management"
+  | "Server-Side"
+  | "Hosting";
 
-export const frontend = [
-  { id: 1, value: "JavaScript", users: ["Tim", "John"] },
-  { id: 2, value: "React", users: ["John"] },
-  { id: 3, value: "Vue", users: ["Myke", "Josh", "Jack"] },
-  { id: 4, value: "Angular", users: ["John"] },
-  { id: 5, value: "TypeScript", users: ["Jack", "John"] },
-];
+export interface TechItem {
+    id: number;
+    value: string;
+    users: string[];
+}
+
+export const techStack: Record<CardType, TechItem[]> = {
+  'Frontend': [
+    { id: 1, value: "JavaScript", users: ["Tim", "John"] },
+    { id: 2, value: "React", users: ["John"] },
+    { id: 3, value: "Vue", users: ["Myke", "Josh", "Jack"] },
+    { id: 4, value: "Angular", users: ["John"] },
+    { id: 5, value: "TypeScript", users: ["Jack", "John"] },
+  ],
+  "CSS Library": [
+    { id: 1, value: "Tailwind", users: ["Tim", "John"] },
+    { id: 2, value: "Bootstrap", users: ["John"] },
+    { id: 3, value: "Daisy UI", users: ["Myke", "Josh", "Jack"] },
+    { id: 4, value: "Vanilla CSS", users: ["John"] },
+    { id: 5, value: "Materialize", users: ["Jack", "John"] },
+  ],
+  'Backend': [
+    { id: 1, value: "Node", users: ["Tim", "John"] },
+    { id: 2, value: "NET", users: ["John"] },
+    { id: 3, value: "Ruby", users: ["Myke", "Josh", "Jack"] },
+    { id: 4, value: "Java", users: ["John"] },
+    { id: 5, value: "Python", users: ["Jack", "John"] },
+  ],
+  "Project Management": [
+    { id: 1, value: "Jira", users: ["Tim", "John"] },
+    { id: 2, value: "GitLab", users: ["John"] },
+    { id: 3, value: "Trello", users: ["Myke", "Josh", "Jack"] },
+    { id: 4, value: "Notion", users: ["John"] },
+    { id: 5, value: "Obsidian", users: ["Jack", "John"] },
+  ],
+  "Server-Side": [
+    { id: 1, value: "AWS", users: ["Tim", "John"] },
+    { id: 2, value: "Azure", users: ["John"] },
+    { id: 3, value: "Firebase", users: ["Myke", "Josh", "Jack"] },
+    { id: 4, value: "Linode", users: ["John"] },
+    { id: 5, value: "Google Cloud", users: ["Jack", "John"] },
+  ],
+  'Hosting': [
+    { id: 1, value: "Heroku", users: ["Tim", "John"] },
+    { id: 2, value: "Netlify", users: ["John"] },
+    { id: 3, value: "Github", users: ["Myke", "Josh", "Jack"] },
+    { id: 4, value: "Render", users: ["John"] },
+    { id: 5, value: "Bluocean", users: ["Jack", "John"] },
+  ],
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 43c042e2..ce8408ae 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,9 +5,11 @@ module.exports = {
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-    extend: {width: {
-      'tech-card-container': '85.5625rem',
-    },},
+    extend: {
+      width: {
+        "tech-card-container": "85.5625rem",
+      },
+    },
   },
   plugins: [require("daisyui")],
 };

From 90741fbe4b085aaf2f49c03fa03406a97a7605b4 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Mon, 28 Aug 2023 09:15:49 +0200
Subject: [PATCH 09/22] feat: add custom width

---
 tailwind.config.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 335285e0..844ea325 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,13 @@ module.exports = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  theme: {},
+  theme: {
+    extend: {
+      width: {
+        "tech-card-container": "85.5625rem",
+      },
+    },
+  },
   daisyui: {
     themes: [
       {

From 46067ce99288654fdda882b75979fa80618feb13 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Mon, 28 Aug 2023 10:42:56 +0200
Subject: [PATCH 10/22] fix: prettier errors

---
 .../TechStack/components/TechStackContainer.tsx    |  7 +++++--
 src/app/TechStack/components/fixtures/TechStack.ts | 14 +++++++-------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx
index 523173c0..7a6851ab 100644
--- a/src/app/TechStack/components/TechStackContainer.tsx
+++ b/src/app/TechStack/components/TechStackContainer.tsx
@@ -5,9 +5,12 @@ export default function TechStackContainer() {
   return (
     <div className="card w-tech-card-container bg-primary p-10">
       <ul className="grid grid-cols-3 gap-y-20">
-      {Object.keys(techStack).map((cardType) => (
+        {Object.keys(techStack).map((cardType) => (
           <li className="mx-auto" key={cardType}>
-            <TechStackCard title={cardType} data={techStack[cardType as keyof typeof techStack]} />
+            <TechStackCard
+              title={cardType}
+              data={techStack[cardType as keyof typeof techStack]}
+            />
           </li>
         ))}
       </ul>
diff --git a/src/app/TechStack/components/fixtures/TechStack.ts b/src/app/TechStack/components/fixtures/TechStack.ts
index e3b2a597..e48841f9 100644
--- a/src/app/TechStack/components/fixtures/TechStack.ts
+++ b/src/app/TechStack/components/fixtures/TechStack.ts
@@ -1,4 +1,4 @@
-type CardType = 
+type CardType =
   | "Frontend"
   | "CSS Library"
   | "Backend"
@@ -7,13 +7,13 @@ type CardType =
   | "Hosting";
 
 export interface TechItem {
-    id: number;
-    value: string;
-    users: string[];
+  id: number;
+  value: string;
+  users: string[];
 }
 
 export const techStack: Record<CardType, TechItem[]> = {
-  'Frontend': [
+  Frontend: [
     { id: 1, value: "JavaScript", users: ["Tim", "John"] },
     { id: 2, value: "React", users: ["John"] },
     { id: 3, value: "Vue", users: ["Myke", "Josh", "Jack"] },
@@ -27,7 +27,7 @@ export const techStack: Record<CardType, TechItem[]> = {
     { id: 4, value: "Vanilla CSS", users: ["John"] },
     { id: 5, value: "Materialize", users: ["Jack", "John"] },
   ],
-  'Backend': [
+  Backend: [
     { id: 1, value: "Node", users: ["Tim", "John"] },
     { id: 2, value: "NET", users: ["John"] },
     { id: 3, value: "Ruby", users: ["Myke", "Josh", "Jack"] },
@@ -48,7 +48,7 @@ export const techStack: Record<CardType, TechItem[]> = {
     { id: 4, value: "Linode", users: ["John"] },
     { id: 5, value: "Google Cloud", users: ["Jack", "John"] },
   ],
-  'Hosting': [
+  Hosting: [
     { id: 1, value: "Heroku", users: ["Tim", "John"] },
     { id: 2, value: "Netlify", users: ["John"] },
     { id: 3, value: "Github", users: ["Myke", "Josh", "Jack"] },

From 550f178aa65af296d5956ac48b8478bfc87d8979 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Mon, 28 Aug 2023 15:46:43 +0200
Subject: [PATCH 11/22] feat: add pencil icon

---
 src/app/TechStack/components/TechStackCard.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx
index ca3cc741..9e72c20b 100644
--- a/src/app/TechStack/components/TechStackCard.tsx
+++ b/src/app/TechStack/components/TechStackCard.tsx
@@ -1,3 +1,4 @@
+import { PencilSquareIcon } from "@heroicons/react/24/solid";
 import { TechItem } from "./fixtures/TechStack";
 import { Avatar } from "@/components";
 
@@ -15,9 +16,10 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
         </h3>
         <button
           type="button"
-          className="btn mt-5 mr-5 capitalize w-16 h-8 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent"
+          className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent"
           aria-label={`Edit ${title}`}
         >
+          <PencilSquareIcon className="h-4 w-4 text-black" />
           Edit
         </button>
       </div>
@@ -41,3 +43,4 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
     </div>
   );
 }
+

From 46f497c2dd7bbd3eab7040a0719eb2d9747378b2 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Mon, 28 Aug 2023 16:12:06 +0200
Subject: [PATCH 12/22] feat: responsive design for tech conainer

---
 src/app/TechStack/components/TechStackCard.tsx      | 1 -
 src/app/TechStack/components/TechStackContainer.tsx | 4 ++--
 tailwind.config.js                                  | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx
index 9e72c20b..124ae191 100644
--- a/src/app/TechStack/components/TechStackCard.tsx
+++ b/src/app/TechStack/components/TechStackCard.tsx
@@ -43,4 +43,3 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
     </div>
   );
 }
-
diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx
index 7a6851ab..dbebad6b 100644
--- a/src/app/TechStack/components/TechStackContainer.tsx
+++ b/src/app/TechStack/components/TechStackContainer.tsx
@@ -3,8 +3,8 @@ import { TechStackCard } from ".";
 
 export default function TechStackContainer() {
   return (
-    <div className="card w-tech-card-container bg-primary p-10">
-      <ul className="grid grid-cols-3 gap-y-20">
+    <div className="card max-w-tech-card-container bg-primary p-10">
+      <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 gap-x-16">
         {Object.keys(techStack).map((cardType) => (
           <li className="mx-auto" key={cardType}>
             <TechStackCard
diff --git a/tailwind.config.js b/tailwind.config.js
index 844ea325..996fa638 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,7 @@ module.exports = {
   ],
   theme: {
     extend: {
-      width: {
+      maxWidth: {
         "tech-card-container": "85.5625rem",
       },
     },

From 6c7149e30f9d3968aced5fe82eb28da7c3ffae26 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Mon, 28 Aug 2023 16:21:43 +0200
Subject: [PATCH 13/22] feat: responsive layout for tech card

---
 src/app/TechStack/components/TechStackCard.tsx      | 2 +-
 src/app/TechStack/components/TechStackContainer.tsx | 4 ++--
 src/app/layout.tsx                                  | 1 -
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx
index 124ae191..e6bc3d71 100644
--- a/src/app/TechStack/components/TechStackCard.tsx
+++ b/src/app/TechStack/components/TechStackCard.tsx
@@ -9,7 +9,7 @@ interface TechStackCardProps {
 
 export default function TechStackCard({ title, data }: TechStackCardProps) {
   return (
-    <div className="card w-96 text-primary-content bg-neutral-100 rounded-lg">
+    <div className="card w-72 sm:w-96 text-primary-content bg-neutral-100 rounded-lg">
       <div className="flex flex-row justify-between">
         <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center">
           {title}
diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx
index dbebad6b..2df16bbf 100644
--- a/src/app/TechStack/components/TechStackContainer.tsx
+++ b/src/app/TechStack/components/TechStackContainer.tsx
@@ -4,9 +4,9 @@ import { TechStackCard } from ".";
 export default function TechStackContainer() {
   return (
     <div className="card max-w-tech-card-container bg-primary p-10">
-      <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 gap-x-16">
+      <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20">
         {Object.keys(techStack).map((cardType) => (
-          <li className="mx-auto" key={cardType}>
+          <li className="mx-auto xl:mx-none" key={cardType}>
             <TechStackCard
               title={cardType}
               data={techStack[cardType as keyof typeof techStack]}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c0cca4d2..19afe4df 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,7 +9,6 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-
 // If loading a variable font, you don't need to specify the font weight
 const inter = Inter({
   weight: ["400", "500", "600", "700"],

From cc3b23bc681bdff744c6b752c78462b64c21baaa Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Mon, 28 Aug 2023 16:49:06 +0200
Subject: [PATCH 14/22] feat: update gap for tech container

---
 src/app/TechStack/components/TechStackCard.tsx    |  2 +-
 .../TechStack/components/TechStackContainer.tsx   | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx
index e6bc3d71..3695e6a3 100644
--- a/src/app/TechStack/components/TechStackCard.tsx
+++ b/src/app/TechStack/components/TechStackCard.tsx
@@ -24,7 +24,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
         </button>
       </div>
       <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5">
-        <ul className="text-neutral-900 last:mb-0">
+        <ul className="text-neutral-900">
           {data.map((element) => (
             <li
               className="text-base mb-5 last:mb-0 relative grid grid-cols-[1fr,auto] items-center"
diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx
index 2df16bbf..639b1e39 100644
--- a/src/app/TechStack/components/TechStackContainer.tsx
+++ b/src/app/TechStack/components/TechStackContainer.tsx
@@ -4,9 +4,18 @@ import { TechStackCard } from ".";
 export default function TechStackContainer() {
   return (
     <div className="card max-w-tech-card-container bg-primary p-10">
-      <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20">
-        {Object.keys(techStack).map((cardType) => (
-          <li className="mx-auto xl:mx-none" key={cardType}>
+      <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch">
+        {Object.keys(techStack).map((cardType, index) => (
+          <li
+            key={cardType}
+            className={`mx-auto xl:mx-0 ${
+              index % 3 === 0
+                ? "justify-self-start"
+                : index % 3 === 1
+                ? "justify-self-center"
+                : "justify-self-end"
+            }`}
+          >
             <TechStackCard
               title={cardType}
               data={techStack[cardType as keyof typeof techStack]}

From c034ff76dc77bc6385f337949c0d2fda18989dd0 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Mon, 28 Aug 2023 18:13:14 +0200
Subject: [PATCH 15/22] feat: update colors

---
 src/app/TechStack/components/TechStackCard.tsx      |  2 +-
 src/app/TechStack/components/TechStackContainer.tsx |  6 +++---
 tailwind.config.js                                  | 12 ++++++++++++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx
index 3695e6a3..ab02d5a5 100644
--- a/src/app/TechStack/components/TechStackCard.tsx
+++ b/src/app/TechStack/components/TechStackCard.tsx
@@ -9,7 +9,7 @@ interface TechStackCardProps {
 
 export default function TechStackCard({ title, data }: TechStackCardProps) {
   return (
-    <div className="card w-72 sm:w-96 text-primary-content bg-neutral-100 rounded-lg">
+    <div className="card w-72 sm:w-96 text-primary-content bg-neutral-50 rounded-lg">
       <div className="flex flex-row justify-between">
         <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center">
           {title}
diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx
index 639b1e39..c1cd87a0 100644
--- a/src/app/TechStack/components/TechStackContainer.tsx
+++ b/src/app/TechStack/components/TechStackContainer.tsx
@@ -3,7 +3,7 @@ import { TechStackCard } from ".";
 
 export default function TechStackContainer() {
   return (
-    <div className="card max-w-tech-card-container bg-primary p-10">
+    <div className="card max-w-tech-card-container bg-primary-100 p-10">
       <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch">
         {Object.keys(techStack).map((cardType, index) => (
           <li
@@ -12,8 +12,8 @@ export default function TechStackContainer() {
               index % 3 === 0
                 ? "justify-self-start"
                 : index % 3 === 1
-                ? "justify-self-center"
-                : "justify-self-end"
+                  ? "justify-self-center"
+                  : "justify-self-end"
             }`}
           >
             <TechStackCard
diff --git a/tailwind.config.js b/tailwind.config.js
index 996fa638..bc006790 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,18 @@ module.exports = {
       maxWidth: {
         "tech-card-container": "85.5625rem",
       },
+      colors: {
+        "primary-50": "#ecf4f0",
+        "primary-100": "#c4ded2",
+        "primary-200": "#a7cdbc",
+        "primary-300": "#7fb79d",
+        "primary-400": "#66a98a",
+        "primary-600": "#3a8663",
+        "primary-700": "#2d684d",
+        "primary-800": "#23513c",
+        "primary-900": "#1b3e2e",
+        "neutral-50": "#F1F1F1",
+      },
     },
   },
   daisyui: {

From 8cfeca82918e5a0a935ed919654c460332bdd6d7 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Tue, 29 Aug 2023 08:51:11 +0200
Subject: [PATCH 16/22] feat: index and page files for tech stack

---
 src/app/TechStack/index.ts | 1 +
 src/app/TechStack/page.tsx | 5 +++++
 2 files changed, 6 insertions(+)
 create mode 100644 src/app/TechStack/index.ts
 create mode 100644 src/app/TechStack/page.tsx

diff --git a/src/app/TechStack/index.ts b/src/app/TechStack/index.ts
new file mode 100644
index 00000000..6d635c80
--- /dev/null
+++ b/src/app/TechStack/index.ts
@@ -0,0 +1 @@
+export { default as TechStackContainer } from "./components/TechStackContainer";
diff --git a/src/app/TechStack/page.tsx b/src/app/TechStack/page.tsx
new file mode 100644
index 00000000..73b441bc
--- /dev/null
+++ b/src/app/TechStack/page.tsx
@@ -0,0 +1,5 @@
+import { TechStackContainer } from ".";
+
+export default function TeckStack() {
+  return <TechStackContainer />;
+}

From 0d5fd7254da4540849a0768f41fce82ee6cb54d4 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Tue, 29 Aug 2023 09:07:25 +0200
Subject: [PATCH 17/22] feat: pr review corrections

---
 .../components/TechStackContainer.module.css  |  3 +++
 .../components/TechStackContainer.tsx         |  3 ++-
 .../components/fixtures/TechStack.ts          |  4 ++--
 src/components/Avatar.tsx                     |  2 +-
 tailwind.config.js                            | 20 +------------------
 5 files changed, 9 insertions(+), 23 deletions(-)
 create mode 100644 src/app/TechStack/components/TechStackContainer.module.css

diff --git a/src/app/TechStack/components/TechStackContainer.module.css b/src/app/TechStack/components/TechStackContainer.module.css
new file mode 100644
index 00000000..61221827
--- /dev/null
+++ b/src/app/TechStack/components/TechStackContainer.module.css
@@ -0,0 +1,3 @@
+.tech-container-width {
+    max-width: 85.5625rem;
+}
\ No newline at end of file
diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/TechStack/components/TechStackContainer.tsx
index c1cd87a0..127bd2f8 100644
--- a/src/app/TechStack/components/TechStackContainer.tsx
+++ b/src/app/TechStack/components/TechStackContainer.tsx
@@ -1,9 +1,10 @@
 import { techStack } from "./fixtures/TechStack";
+import styles from "./TechStackContainer.module.css";
 import { TechStackCard } from ".";
 
 export default function TechStackContainer() {
   return (
-    <div className="card max-w-tech-card-container bg-primary-100 p-10">
+    <div className={`card bg-primary p-10 ${styles["tech-container-width"]}`}>
       <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch">
         {Object.keys(techStack).map((cardType, index) => (
           <li
diff --git a/src/app/TechStack/components/fixtures/TechStack.ts b/src/app/TechStack/components/fixtures/TechStack.ts
index e48841f9..fe5443a1 100644
--- a/src/app/TechStack/components/fixtures/TechStack.ts
+++ b/src/app/TechStack/components/fixtures/TechStack.ts
@@ -3,7 +3,7 @@ type CardType =
   | "CSS Library"
   | "Backend"
   | "Project Management"
-  | "Server-Side"
+  | "Cloud Provider"
   | "Hosting";
 
 export interface TechItem {
@@ -41,7 +41,7 @@ export const techStack: Record<CardType, TechItem[]> = {
     { id: 4, value: "Notion", users: ["John"] },
     { id: 5, value: "Obsidian", users: ["Jack", "John"] },
   ],
-  "Server-Side": [
+  "Cloud Provider": [
     { id: 1, value: "AWS", users: ["Tim", "John"] },
     { id: 2, value: "Azure", users: ["John"] },
     { id: 3, value: "Firebase", users: ["Myke", "Josh", "Jack"] },
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index e7ef1fa7..d7078699 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,6 +1,6 @@
 export default function Avatar() {
   return (
-    <div className="avatar bg-neutral-300 rounded-full border-2 border-neutral-100">
+    <div className="avatar bg-neutral-300 rounded-full border-2 border-neutral-50">
       <div className="w-6"></div>
     </div>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index bc006790..335285e0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,25 +4,7 @@ module.exports = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  theme: {
-    extend: {
-      maxWidth: {
-        "tech-card-container": "85.5625rem",
-      },
-      colors: {
-        "primary-50": "#ecf4f0",
-        "primary-100": "#c4ded2",
-        "primary-200": "#a7cdbc",
-        "primary-300": "#7fb79d",
-        "primary-400": "#66a98a",
-        "primary-600": "#3a8663",
-        "primary-700": "#2d684d",
-        "primary-800": "#23513c",
-        "primary-900": "#1b3e2e",
-        "neutral-50": "#F1F1F1",
-      },
-    },
-  },
+  theme: {},
   daisyui: {
     themes: [
       {

From d15e2c689c37eddd0a9b8c30bfd07b02eb9cd4f2 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Fri, 1 Sep 2023 08:30:00 +0200
Subject: [PATCH 18/22] feat: move cardType in a types folder

---
 src/app/TechStack/components/fixtures/TechStack.ts | 8 +-------
 src/app/TechStack/components/types/types.ts        | 8 ++++++++
 2 files changed, 9 insertions(+), 7 deletions(-)
 create mode 100644 src/app/TechStack/components/types/types.ts

diff --git a/src/app/TechStack/components/fixtures/TechStack.ts b/src/app/TechStack/components/fixtures/TechStack.ts
index fe5443a1..56c216f9 100644
--- a/src/app/TechStack/components/fixtures/TechStack.ts
+++ b/src/app/TechStack/components/fixtures/TechStack.ts
@@ -1,10 +1,4 @@
-type CardType =
-  | "Frontend"
-  | "CSS Library"
-  | "Backend"
-  | "Project Management"
-  | "Cloud Provider"
-  | "Hosting";
+import { CardType } from "../types/types";
 
 export interface TechItem {
   id: number;
diff --git a/src/app/TechStack/components/types/types.ts b/src/app/TechStack/components/types/types.ts
new file mode 100644
index 00000000..08cb6137
--- /dev/null
+++ b/src/app/TechStack/components/types/types.ts
@@ -0,0 +1,8 @@
+export type CardType =
+  | "Frontend"
+  | "CSS Library"
+  | "Backend"
+  | "Project Management"
+  | "Cloud Provider"
+  | "Hosting";
+

From f16fc75f4b7a5682d168c10a491e9e81f2574444 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Fri, 1 Sep 2023 08:37:10 +0200
Subject: [PATCH 19/22] feat: add EditButton as a reusable component

---
 src/app/TechStack/components/TechStackCard.tsx | 12 ++----------
 src/app/TechStack/components/types/types.ts    |  1 -
 src/components/EditButton.tsx                  | 18 ++++++++++++++++++
 src/components/index.ts                        |  1 +
 4 files changed, 21 insertions(+), 11 deletions(-)
 create mode 100644 src/components/EditButton.tsx

diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/TechStack/components/TechStackCard.tsx
index ab02d5a5..07029b22 100644
--- a/src/app/TechStack/components/TechStackCard.tsx
+++ b/src/app/TechStack/components/TechStackCard.tsx
@@ -1,6 +1,5 @@
-import { PencilSquareIcon } from "@heroicons/react/24/solid";
 import { TechItem } from "./fixtures/TechStack";
-import { Avatar } from "@/components";
+import { Avatar, EditButton } from "@/components";
 
 interface TechStackCardProps {
   title: string;
@@ -14,14 +13,7 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
         <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center">
           {title}
         </h3>
-        <button
-          type="button"
-          className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent"
-          aria-label={`Edit ${title}`}
-        >
-          <PencilSquareIcon className="h-4 w-4 text-black" />
-          Edit
-        </button>
+        <EditButton title={title} />
       </div>
       <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5">
         <ul className="text-neutral-900">
diff --git a/src/app/TechStack/components/types/types.ts b/src/app/TechStack/components/types/types.ts
index 08cb6137..23b66261 100644
--- a/src/app/TechStack/components/types/types.ts
+++ b/src/app/TechStack/components/types/types.ts
@@ -5,4 +5,3 @@ export type CardType =
   | "Project Management"
   | "Cloud Provider"
   | "Hosting";
-
diff --git a/src/components/EditButton.tsx b/src/components/EditButton.tsx
new file mode 100644
index 00000000..2bcdc862
--- /dev/null
+++ b/src/components/EditButton.tsx
@@ -0,0 +1,18 @@
+import { PencilSquareIcon } from "@heroicons/react/24/solid";
+
+interface EditButtonProps {
+  title: string;
+}
+
+export default function EditButton({ title }: EditButtonProps) {
+  return (
+    <button
+      type="button"
+      className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent"
+      aria-label={`Edit ${title}`}
+    >
+      <PencilSquareIcon className="h-4 w-4 text-black" />
+      Edit
+    </button>
+  );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 39a15b83..2b77dcee 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,3 @@
 export { default as StoreProvider } from "./StoreProvider";
 export { default as Avatar } from "./Avatar";
+export { default as EditButton } from "./EditButton";

From 2771902bc5590fbb3df54d8d635a15c96104fcf9 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Fri, 1 Sep 2023 18:15:06 +0200
Subject: [PATCH 20/22] fix: naming conventions

---
 src/app/TechStack/index.ts                                   | 1 -
 src/app/TechStack/page.tsx                                   | 5 -----
 src/app/index.ts                                             | 2 +-
 .../{TechStack => tech-stack}/components/TechStackCard.tsx   | 0
 .../components/TechStackContainer.module.css                 | 0
 .../components/TechStackContainer.tsx                        | 0
 .../components/fixtures/TechStack.ts                         | 0
 src/app/{TechStack => tech-stack}/components/index.ts        | 0
 src/app/{TechStack => tech-stack}/components/types/types.ts  | 0
 src/app/tech-stack/index.ts                                  | 1 +
 src/app/tech-stack/page.tsx                                  | 5 +++++
 11 files changed, 7 insertions(+), 7 deletions(-)
 delete mode 100644 src/app/TechStack/index.ts
 delete mode 100644 src/app/TechStack/page.tsx
 rename src/app/{TechStack => tech-stack}/components/TechStackCard.tsx (100%)
 rename src/app/{TechStack => tech-stack}/components/TechStackContainer.module.css (100%)
 rename src/app/{TechStack => tech-stack}/components/TechStackContainer.tsx (100%)
 rename src/app/{TechStack => tech-stack}/components/fixtures/TechStack.ts (100%)
 rename src/app/{TechStack => tech-stack}/components/index.ts (100%)
 rename src/app/{TechStack => tech-stack}/components/types/types.ts (100%)
 create mode 100644 src/app/tech-stack/index.ts
 create mode 100644 src/app/tech-stack/page.tsx

diff --git a/src/app/TechStack/index.ts b/src/app/TechStack/index.ts
deleted file mode 100644
index 6d635c80..00000000
--- a/src/app/TechStack/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TechStackContainer } from "./components/TechStackContainer";
diff --git a/src/app/TechStack/page.tsx b/src/app/TechStack/page.tsx
deleted file mode 100644
index 73b441bc..00000000
--- a/src/app/TechStack/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { TechStackContainer } from ".";
-
-export default function TeckStack() {
-  return <TechStackContainer />;
-}
diff --git a/src/app/index.ts b/src/app/index.ts
index b351a848..b90a9a6b 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -1 +1 @@
-export { default as CounterPage } from "./counter/page";
+export { TeckStackPage } from "./tech-stack/";
diff --git a/src/app/TechStack/components/TechStackCard.tsx b/src/app/tech-stack/components/TechStackCard.tsx
similarity index 100%
rename from src/app/TechStack/components/TechStackCard.tsx
rename to src/app/tech-stack/components/TechStackCard.tsx
diff --git a/src/app/TechStack/components/TechStackContainer.module.css b/src/app/tech-stack/components/TechStackContainer.module.css
similarity index 100%
rename from src/app/TechStack/components/TechStackContainer.module.css
rename to src/app/tech-stack/components/TechStackContainer.module.css
diff --git a/src/app/TechStack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
similarity index 100%
rename from src/app/TechStack/components/TechStackContainer.tsx
rename to src/app/tech-stack/components/TechStackContainer.tsx
diff --git a/src/app/TechStack/components/fixtures/TechStack.ts b/src/app/tech-stack/components/fixtures/TechStack.ts
similarity index 100%
rename from src/app/TechStack/components/fixtures/TechStack.ts
rename to src/app/tech-stack/components/fixtures/TechStack.ts
diff --git a/src/app/TechStack/components/index.ts b/src/app/tech-stack/components/index.ts
similarity index 100%
rename from src/app/TechStack/components/index.ts
rename to src/app/tech-stack/components/index.ts
diff --git a/src/app/TechStack/components/types/types.ts b/src/app/tech-stack/components/types/types.ts
similarity index 100%
rename from src/app/TechStack/components/types/types.ts
rename to src/app/tech-stack/components/types/types.ts
diff --git a/src/app/tech-stack/index.ts b/src/app/tech-stack/index.ts
new file mode 100644
index 00000000..0adbbb0d
--- /dev/null
+++ b/src/app/tech-stack/index.ts
@@ -0,0 +1 @@
+export { default as TeckStackPage } from "./page";
diff --git a/src/app/tech-stack/page.tsx b/src/app/tech-stack/page.tsx
new file mode 100644
index 00000000..1eacd571
--- /dev/null
+++ b/src/app/tech-stack/page.tsx
@@ -0,0 +1,5 @@
+import { TechStackContainer } from "./components";
+
+export default function TeckStackPage() {
+  return <TechStackContainer />;
+}

From 78a8e286027dfcd7f99029768193d24584fa40d2 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Fri, 1 Sep 2023 18:53:34 -0400
Subject: [PATCH 21/22] add colors to daisy ui theme config

---
 tailwind.config.js | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 335285e0..1bc22080 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,12 +9,30 @@ module.exports = {
     themes: [
       {
         chingu: {
-          primary: "#40936d",
-          secondary: "#E6624B",
-          warning: "#f6d860",
-          accent: "#37cdbe",
+          primary: "#40936D",
+          "primary-focus": "#3A8663",
+          "primary-content": "#C4DED2",
+          secondary: "#C2DAE9",
+          "secondary-focus": "#B1C6D4",
+          "secondary-content": "#ECF4F8",
+          accent: "#A7F3D0",
+          "accent-focus": "#98DDBD",
+          "accent-content": "#E4FBF0",
           neutral: "#757575",
-          "base-100": "#ffffff",
+          "neutral-focus": "#535353",
+          "neutral-content": "#919191",
+          info: "#8FC4E5",
+          "info-content": "#DCEDF7",
+          success: "#14B8A6",
+          "success-content": "#B6E9E3",
+          warning: "#FFAC0C",
+          "warning-content": "#FFE5B4",
+          error: "#E6624B",
+          "error-content": "#F7CEC7",
+          "base-100": "#D4D4D4",
+          "base-200": "#C0C0C0",
+          "base-300": "#A3A3A3",
+          "base-content": "#F1F1F1",
         },
       },
     ],

From e8281e779418ba15a709fa3602de394b211c0bda Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Tue, 5 Sep 2023 09:06:23 +0200
Subject: [PATCH 22/22] feat: update colors

---
 src/app/tech-stack/components/TechStackCard.tsx      | 6 +++---
 src/app/tech-stack/components/TechStackContainer.tsx | 2 +-
 src/components/Avatar.tsx                            | 2 +-
 src/components/EditButton.tsx                        | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/tech-stack/components/TechStackCard.tsx b/src/app/tech-stack/components/TechStackCard.tsx
index 07029b22..2b1c33a9 100644
--- a/src/app/tech-stack/components/TechStackCard.tsx
+++ b/src/app/tech-stack/components/TechStackCard.tsx
@@ -8,15 +8,15 @@ interface TechStackCardProps {
 
 export default function TechStackCard({ title, data }: TechStackCardProps) {
   return (
-    <div className="card w-72 sm:w-96 text-primary-content bg-neutral-50 rounded-lg">
+    <div className="card w-72 sm:w-96 text-black bg-white rounded-lg">
       <div className="flex flex-row justify-between">
-        <h3 className="text-xl font-semibold text-neutral-900 mt-5 ml-5 self-center">
+        <h3 className="text-xl font-semibold text-black mt-5 ml-5 self-center">
           {title}
         </h3>
         <EditButton title={title} />
       </div>
       <div className="h-40 overflow-y-auto mx-5 mt-6 mb-5">
-        <ul className="text-neutral-900">
+        <ul className="text-black">
           {data.map((element) => (
             <li
               className="text-base mb-5 last:mb-0 relative grid grid-cols-[1fr,auto] items-center"
diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
index 127bd2f8..97e0e6d6 100644
--- a/src/app/tech-stack/components/TechStackContainer.tsx
+++ b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -4,7 +4,7 @@ import { TechStackCard } from ".";
 
 export default function TechStackContainer() {
   return (
-    <div className={`card bg-primary p-10 ${styles["tech-container-width"]}`}>
+    <div className={`card bg-primary-content p-10 ${styles["tech-container-width"]}`}>
       <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch">
         {Object.keys(techStack).map((cardType, index) => (
           <li
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index d7078699..f12304ba 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,6 +1,6 @@
 export default function Avatar() {
   return (
-    <div className="avatar bg-neutral-300 rounded-full border-2 border-neutral-50">
+    <div className="avatar bg-neutral-300 rounded-full border border-base-content">
       <div className="w-6"></div>
     </div>
   );
diff --git a/src/components/EditButton.tsx b/src/components/EditButton.tsx
index 2bcdc862..94885b63 100644
--- a/src/components/EditButton.tsx
+++ b/src/components/EditButton.tsx
@@ -8,7 +8,7 @@ export default function EditButton({ title }: EditButtonProps) {
   return (
     <button
       type="button"
-      className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-neutral-500 bg-white border-transparent"
+      className="btn grid grid-cols-[auto,auto] gap-x-1 mt-5 mr-5 capitalize w-16 h-8 p-0 min-h-full text-sm font-semibold text-black bg-secondary border-transparent"
       aria-label={`Edit ${title}`}
     >
       <PencilSquareIcon className="h-4 w-4 text-black" />