style: categorization on tech stack page (#1265)

* feat(common): add categorization on tech stack page * feat(common): revamp ui for tech stack page * feat(common): remove python from tech stack infos --------- Co-authored-by: Priyankar Pal <[email protected]> Co-authored-by: Tapas Adhikary <[email protected]>
reactplay · Oct 16, 2023 · ebb7824 · ebb7824
1 parent dbe521b
commit ebb7824
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 114 deletions.
diff --git a/src/App.css b/src/App.css
@@ -536,63 +536,6 @@ small {
  height: var(--navbar-icon-size-sm);
 }
 
-/* Tech Stack */
-.list-brand-tech-stack {
- --techstack-cardsize: 250px;
-
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- margin: 1rem auto 2rem auto;
- max-width: 1280px;
- box-sizing: border-box;
- grid-gap: 0.4rem;
- justify-content: center;
-}
-
-.brand-tech-stack {
- display: flex;
- flex-direction: column;
- grid-gap: 0.4rem;
- background-color: var(--color-neutral-10);
- justify-content: center;
- align-items: center;
- width: var(--techstack-cardsize);
- height: var(--techstack-cardsize);
- padding: 1rem 2rem;
- border-radius: 0.2rem;
- /* border: solid 1px var(--color-neutral-30); */
- box-sizing: border-box;
- transition: all 0.16s ease-in-out;
-}
-
-.brand-tech-stack .icon {
- fill: var(--color-neutral-50);
-}
-
-.brand-tech-stack .image {
- filter: invert(60%) sepia(12%) saturate(186%) hue-rotate(151deg) brightness(86%) contrast(84%);
-}
-
-.brand-tech-stack:hover,
-.brand-tech-stack:focus {
- border: solid 2px rgba(var(--color-brand-primary-rgb), 60%);
- transform: scale(1.1);
- box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb), 0.12);
- -webkit-box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb), 0.12);
- -moz-box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb), 0.12);
-}
-
-.brand-tech-stack:hover .icon,
-.brand-tech-stack:focus .icon {
- fill: var(--color-brand-primary);
-}
-
-.brand-tech-stack:hover .image,
-.brand-tech-stack:focus .image {
- filter: invert(75%) sepia(58%) saturate(2245%) hue-rotate(131deg) brightness(102%) contrast(103%);
-}
-
 .create-button-badge {
  background-color: var(--color-neutral-60);
  border-radius: 0px 6px 6px 0px;

diff --git a/src/common/techstack/TechStackInfo.js b/src/common/techstack/TechStackInfo.js
@@ -10,7 +10,6 @@ import {
  SiDocker,
  SiHasura,
  SiPostgresql,
- SiPython,
  SiNodedotjs
 } from 'react-icons/si';
 import NHost from 'images/nhost.svg';
@@ -21,90 +20,98 @@ export const TechStackInfo = [
  comp: SiReact,
  text: 'ReactJS',
  type: 'icon',
- link: 'https://reactjs.org'
+ link: 'https://reactjs.org',
+ categoryID: 'frontend'
  },
  {
  comp: SiRedux,
  text: 'Redux',
  type: 'icon',
- link: 'https://redux.js.org'
+ link: 'https://redux.js.org',
+ categoryID: 'frontend'
  },
  {
  comp: NHost,
  text: 'NHost',
  type: 'image',
- link: 'https://nhost.io'
+ link: 'https://nhost.io',
+ categoryID: 'backend'
  },
  {
  comp: SiGit,
  text: 'Git',
  type: 'icon',
- link: 'https://git-scm.com'
+ link: 'https://git-scm.com',
+ categoryID: 'devOpsAndDeployment'
  },
  {
  comp: SiTailwindcss,
  text: 'Tailwind',
  type: 'icon',
- link: 'https://tailwindcss.com'
+ link: 'https://tailwindcss.com',
+ categoryID: 'frontend'
  },
  {
  comp: SiHasura,
  text: 'Hasura',
  type: 'icon',
- link: 'https://hasura.io'
+ link: 'https://hasura.io',
+ categoryID: 'backend'
  },
  {
  comp: SiPostgresql,
  text: 'PostgreSQL',
  type: 'icon',
- link: 'https://www.postgresql.org'
+ link: 'https://www.postgresql.org',
+ categoryID: 'backend'
  },
  {
  comp: SiJavascript,
  text: 'Javascript',
  type: 'icon',
- link: 'https://www.ecma-international.org/'
+ link: 'https://www.ecma-international.org/',
+ categoryID: 'programmingLanguage'
  },
  {
  comp: SiFirebase,
  text: 'Firebase',
  type: 'icon',
- link: 'https://firebase.google.com'
+ link: 'https://firebase.google.com',
+ categoryID: 'backend'
  },
  {
  comp: SiTypescript,
  text: 'Typescript',
  type: 'icon',
- link: 'https://www.typescriptlang.org'
+ link: 'https://www.typescriptlang.org',
+ categoryID: 'programmingLanguage'
  },
  {
  comp: SiGraphql,
  text: 'Graphql',
  type: 'icon',
- link: 'https://graphql.org'
+ link: 'https://graphql.org',
+ categoryID: 'backend'
  },
  {
  comp: SiDocker,
  text: 'Docker',
  type: 'icon',
- link: 'https://www.docker.com'
+ link: 'https://www.docker.com',
+ categoryID: 'devOpsAndDeployment'
  },
  {
  comp: SiNodedotjs,
  text: 'NodeJS',
  type: 'icon',
- link: 'https://nodejs.org/en'
- },
- {
- comp: SiPython,
- text: 'Python',
- type: 'icon',
- link: 'https://www.python.org'
+ link: 'https://nodejs.org/en',
+ categoryID: 'backend'
  },
  {
  comp: Umami,
  text: 'Umami',
  type: 'image',
- link: 'https://umami.is/'
+ link: 'https://umami.is/',
+ categoryID: 'analyticsAndMonitoring'
  }
 ];
diff --git a/src/common/techstack/TechStacks.css b/src/common/techstack/TechStacks.css
@@ -0,0 +1,103 @@
+.conatiner {
+ display: 'flex';
+ flex-direction: 'column';
+ width: 'inherit';
+}
+
+.heading {
+ text-align: center;
+ font-size: 3rem;
+ padding: 3rem 1rem;
+}
+
+.row {
+ display: flex;
+ gap: 2rem;
+ justify-content: space-between;
+ padding: 0 2rem;
+ width: 100%;
+}
+
+.list-brand-tech-stack {
+ --techstack-cardsize: 150px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin: 1rem auto 4rem auto;
+ max-width: 1280px;
+ box-sizing: border-box;
+ grid-gap: 2rem;
+ justify-content: left;
+ flex: 2;
+}
+
+.brand-tech-stack {
+ display: flex;
+ flex-direction: column;
+ grid-gap: 0.4rem;
+ background-color: var(--color-neutral-10);
+ justify-content: center;
+ align-items: center;
+ width: var(--techstack-cardsize);
+ height: var(--techstack-cardsize);
+ padding: 0.5rem 0.5rem;
+ border-radius: 1rem;
+ border: solid 0.2rem var(--color-neutral-30);
+ box-sizing: border-box;
+ transition: all 0.16s ease-in-out;
+}
+
+.tech-brand-name {
+ flex: 1;
+ text-align: left;
+}
+
+.brand-tech-stack .icon {
+ fill: var(--color-neutral-50);
+ padding: 0.5rem;
+}
+
+.brand-tech-stack .image {
+ filter: invert(60%) sepia(12%) saturate(186%) hue-rotate(151deg) brightness(86%) contrast(84%);
+ object-fit: contain;
+ max-height: 6rem;
+ max-width: 6rem;
+ padding: 0.5rem;
+}
+
+.brand-tech-stack:hover,
+.brand-tech-stack:focus {
+ border: solid 0.2rem rgba(var(--color-brand-primary-dark), 60%);
+ transform: scale(1.1);
+ box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb), 0.12);
+ -webkit-box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb), 0.12);
+ -moz-box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb), 0.12);
+}
+
+.brand-tech-stack:hover .icon,
+.brand-tech-stack:focus .icon {
+ fill: var(--color-neutral-90);
+}
+
+.brand-tech-stack:hover .image,
+.brand-tech-stack:focus .image {
+ filter: invert(7%) sepia(35%) saturate(2866%) hue-rotate(212deg) brightness(95%) contrast(115%);
+}
+
+@media screen and (max-width: 640px) {
+ .heading {
+ font-size: 2rem;
+ padding: 2rem;
+ }
+
+ .list-brand-tech-stack {
+ --techstack-cardsize: 120px;
+ flex: 1;
+ }
+
+ .brand-tech-stack .image {
+ object-fit: contain;
+ max-height: 4rem;
+ max-width: 4rem;
+ }
+}