refactor(about): simplify techStacks structure and update TechStack c…

…omponent (#536)
1chooo · Nov 30, 2024 · 125fa5d · 125fa5d
1 parent cf9c870
commit 125fa5d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 36 deletions.
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -38,21 +38,9 @@ import { BiLogoFlask } from "react-icons/bi";
 import { VscTerminalLinux } from "react-icons/vsc";
 import { DiRedis } from "react-icons/di";
 
-type TechStack = {
-  name: string;
-  icon: JSX.Element;
-};
-
-type TechStackCategory = {
-  category: string;
-  stacks: TechStack[];
-};
-
-const techStacks: TechStackCategory[] = [
-  {
-    category: "Programming Languages",
-    stacks: [
-      { name: "Python", icon: <AiOutlinePython /> },
+const techStacks = {
+  programmingLanguages: [
+    { name: "Python", icon: <AiOutlinePython /> },
       { name: "TypeScript", icon: <TbBrandTypescript /> },
       { name: "Go", icon: <TbBrandGolang /> },
       { name: "C++", icon: <TbBrandCpp /> },
@@ -65,12 +53,9 @@ const techStacks: TechStackCategory[] = [
       { name: "MySQL", icon: <TbBrandMysql /> },
       { name: "Redis", icon: <DiRedis /> },
       { name: "Tailwind", icon: <TbBrandTailwind /> },
-    ],
-  },
-  {
-    category: "Frameworks and Tools",
-    stacks: [
-      { name: "React", icon: <FaReact /> },
+  ],
+  tools: [
+    { name: "React", icon: <FaReact /> },
       { name: "Next.js", icon: <TbBrandNextjs /> },
       { name: "AWS", icon: <FaAws /> },
       { name: "FastAPI", icon: <SiFastapi /> },
@@ -80,17 +65,17 @@ const techStacks: TechStackCategory[] = [
       { name: "Kubernetes", icon: <SiKubernetes /> },
       { name: "Azure", icon: <SiMicrosoftazure /> },
       { name: "Lambda", icon: <SiAwslambda /> },
-    ],
-  },
-];
+  ],
+};
+
 
 const { about,
   title
 } = config;
 const {
   subHeader, pronouns, firstName,
   lastName, preferredName, introduction,
-  lifestyles, programmingLanguage, devOps
+  lifestyles
 } = about;
 
 export const metadata: Metadata = {

diff --git a/apps/web/src/components/about/tech-stack.tsx b/apps/web/src/components/about/tech-stack.tsx
@@ -7,20 +7,17 @@ type TechStack = {
   icon: JSX.Element;
 };
 
-type TechStackCategory = {
-  category: string;
-  stacks: TechStack[];
+type TechStackProps = {
+  techStacks: {
+    programmingLanguages: TechStack[];
+    tools: TechStack[];
+  };
 };
 
-
-type TechStackV1Props = {
-  techStacks: TechStackCategory[];
-};
-
-const TechStackV1: React.FC<TechStackV1Props> = ( {techStacks} ) => {
+const TechStack: React.FC<TechStackProps> = ({ techStacks }) => {
   return (
     <ul className="service-list mt-[30px] grid grid-cols-2 gap-[20px] lg:gap-y-[20px] lg:gap-x-[25px]">
-      {techStacks.map(({ category, stacks }) => (
+      {Object.entries(techStacks).map(([category, stacks]) => (
         <li key={category} className="service-item">
           <div className="tech-stack-container">
             {stacks.map((stack) => (
@@ -35,4 +32,4 @@ const TechStackV1: React.FC<TechStackV1Props> = ( {techStacks} ) => {
   );
 };
 
-export default TechStackV1;
+export default TechStack;