From 884a5c8944c16199d19cf351b98f863813d4b2f5 Mon Sep 17 00:00:00 2001 From: Timothy Russo Date: Sat, 26 Aug 2023 15:33:02 +0200 Subject: [PATCH 01/21] 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 ( +
+
+

+ Frontend +

+ +
+
+
    + {frontend.map(element => +
  • {element}
    • + )} +
+
+
+ ); +} 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 Date: Sat, 26 Aug 2023 15:40:48 +0200 Subject: [PATCH 02/21] 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() {
    - {frontend.map(element => -
  • {element}
    • - )} + {frontend.map((element) => ( +
  • + {element} +
    • + ))}
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
; +} 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 Date: Sat, 26 Aug 2023 16:31:05 +0200 Subject: [PATCH 03/21] 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() {

Frontend

- 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 Date: Sun, 27 Aug 2023 13:30:42 +0200 Subject: [PATCH 04/21] 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 ( -
+
-

+

Frontend

-
-
    +
      {frontend.map((element) => ( -
    • - {element} +
    • + {element.value} +
      + {element.users.map((user) => ( + + ))} +
      • ))}
    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
    ; + return ( +
    +
    +
    + ); } From 6ea3ddfd3c8cd098e0ccb2bd0db4ca4a0db406ef Mon Sep 17 00:00:00 2001 From: Timothy Russo Date: Sun, 27 Aug 2023 14:05:47 +0200 Subject: [PATCH 05/21] 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 Date: Sun, 27 Aug 2023 14:28:01 +0200 Subject: [PATCH 06/21] 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 (
    -

    - Frontend -

    +

    + {title} +

    -
    +
      {frontend.map((element) => (
    • Date: Sun, 27 Aug 2023 15:24:21 +0200 Subject: [PATCH 07/21] 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 ( +
      +
        + {cards.map((element) => ( +
      • + +
        • + ))} +
      +
      + ); +} 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 Date: Mon, 28 Aug 2023 09:10:58 +0200 Subject: [PATCH 08/21] 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 (
      @@ -22,7 +23,7 @@ export default function TechStackCard({ title }: TechStackCardProps) {
        - {frontend.map((element) => ( + {data.map((element) => (
        • - {cards.map((element) => ( -
        • - + {Object.keys(techStack).map((cardType) => ( +
        • +
          • ))}
        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 = { + '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 Date: Mon, 28 Aug 2023 09:15:49 +0200 Subject: [PATCH 09/21] 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 Date: Mon, 28 Aug 2023 10:42:56 +0200 Subject: [PATCH 10/21] 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 (
          - {Object.keys(techStack).map((cardType) => ( + {Object.keys(techStack).map((cardType) => (
        • - +
          • ))}
        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 = { - '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 = { { 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 = { { 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 Date: Mon, 28 Aug 2023 15:46:43 +0200 Subject: [PATCH 11/21] 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) {
        @@ -41,3 +43,4 @@ export default function TechStackCard({ title, data }: TechStackCardProps) {
      ); } + From 46f497c2dd7bbd3eab7040a0719eb2d9747378b2 Mon Sep 17 00:00:00 2001 From: Timothy Russo Date: Mon, 28 Aug 2023 16:12:06 +0200 Subject: [PATCH 12/21] 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) {
      ); } - 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 ( -
      -
        +
        +
          {Object.keys(techStack).map((cardType) => (
        • Date: Mon, 28 Aug 2023 16:21:43 +0200 Subject: [PATCH 13/21] 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 ( -
          +

          {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 (
          -
            +
              {Object.keys(techStack).map((cardType) => ( -
            • +
            • Date: Mon, 28 Aug 2023 16:49:06 +0200 Subject: [PATCH 14/21] 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) {
          -
            +
              {data.map((element) => (
            • -
                - {Object.keys(techStack).map((cardType) => ( -
              • +
                  + {Object.keys(techStack).map((cardType, index) => ( +
                • Date: Mon, 28 Aug 2023 18:13:14 +0200 Subject: [PATCH 15/21] 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 ( -
                  +

                  {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 ( -
                  +
                    {Object.keys(techStack).map((cardType, index) => (
                  • Date: Tue, 29 Aug 2023 08:51:11 +0200 Subject: [PATCH 16/21] 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 ; +} From 0d5fd7254da4540849a0768f41fce82ee6cb54d4 Mon Sep 17 00:00:00 2001 From: Timothy Russo Date: Tue, 29 Aug 2023 09:07:25 +0200 Subject: [PATCH 17/21] 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 ( -
                    +
                      {Object.keys(techStack).map((cardType, index) => (
                    • = { { 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 ( -
                      +
                      ); 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 Date: Fri, 1 Sep 2023 08:30:00 +0200 Subject: [PATCH 18/21] 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 Date: Fri, 1 Sep 2023 08:37:10 +0200 Subject: [PATCH 19/21] 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) {

                      {title}

                      - +
                        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 ( + + ); +} 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 Date: Fri, 1 Sep 2023 18:15:06 +0200 Subject: [PATCH 20/21] 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 ; -} 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 ; +} From e8281e779418ba15a709fa3602de394b211c0bda Mon Sep 17 00:00:00 2001 From: Timothy Russo Date: Tue, 5 Sep 2023 09:06:23 +0200 Subject: [PATCH 21/21] 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 ( -
                        +
                        -

                        +

                        {title}

                        -
                          +
                            {data.map((element) => (
                          • +
                              {Object.keys(techStack).map((cardType, index) => (
                            • +
                              ); 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 (