refactor(about): restructure techStacks configuration and update Tech…

…Stack component usage (#536) (#539)
1chooo · Nov 30, 2024 · 3c243c2 · 3c243c2
1 parent b6b8aa3
commit 3c243c2
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 92 deletions.
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -6,76 +6,18 @@ import AboutHeader from '@/components/about/about-header';
 import SeeMoreButton from "@/components/about/see-more-btn";
 import LatestArticles from "@/components/about/latest-articles";
 import MarkdownRenderer from "@/components/markdown/markdown-renderer";
+import TechStack from "@/components/about/tech-stack";
 import { getBlogPosts } from "@/lib/db/blog";
 import { FaRegPenToSquare } from "react-icons/fa6";
 import config from '@/config';
-import TechStack from "@/components/about/tech-stack";
 
-import React from "react";
-import {
-  TbBrandCpp,
-  TbBrandTypescript,
-  TbBrandGolang,
-  TbMarkdown,
-  TbBrandNextjs,
-  TbBrandDjango,
-  TbBrandApple,
-  TbBrandTailwind,
-  TbBrandDocker,
-  TbBrandMysql,
-} from "react-icons/tb";
-import { FaReact, FaAws } from "react-icons/fa";
-import { AiOutlinePython } from "react-icons/ai";
-import { RiJavaLine, RiJavascriptLine } from "react-icons/ri";
-import {
-  SiLatex,
-  SiFastapi,
-  SiKubernetes,
-  SiMicrosoftazure,
-  SiAwslambda,
-} from "react-icons/si";
-import { BiLogoFlask } from "react-icons/bi";
-import { VscTerminalLinux } from "react-icons/vsc";
-import { DiRedis } from "react-icons/di";
-
-const techStacks = {
-  programmingLanguages: [
-    { name: "Python", icon: <AiOutlinePython /> },
-      { name: "TypeScript", icon: <TbBrandTypescript /> },
-      { name: "Go", icon: <TbBrandGolang /> },
-      { name: "C++", icon: <TbBrandCpp /> },
-      { name: "Java", icon: <RiJavaLine /> },
-      { name: "Markdown", icon: <TbMarkdown /> },
-      { name: "LaTeX", icon: <SiLatex /> },
-      { name: "JavaScript", icon: <RiJavascriptLine /> },
-      { name: "Linux", icon: <VscTerminalLinux /> },
-      { name: "Apple", icon: <TbBrandApple /> },
-      { name: "MySQL", icon: <TbBrandMysql /> },
-      { name: "Redis", icon: <DiRedis /> },
-      { name: "Tailwind", icon: <TbBrandTailwind /> },
-  ],
-  tools: [
-    { name: "React", icon: <FaReact /> },
-      { name: "Next.js", icon: <TbBrandNextjs /> },
-      { name: "AWS", icon: <FaAws /> },
-      { name: "FastAPI", icon: <SiFastapi /> },
-      { name: "Django", icon: <TbBrandDjango /> },
-      { name: "Flask", icon: <BiLogoFlask /> },
-      { name: "Docker", icon: <TbBrandDocker /> },
-      { name: "Kubernetes", icon: <SiKubernetes /> },
-      { name: "Azure", icon: <SiMicrosoftazure /> },
-      { name: "Lambda", icon: <SiAwslambda /> },
-  ],
-};
 
 
-const { about,
-  title
-} = config;
+const { about, title } = config;
 const {
   subHeader, pronouns, firstName,
   lastName, preferredName, introduction,
-  lifestyles
+  lifestyles, techStacks
 } = about;
 
 export const metadata: Metadata = {
@@ -116,7 +58,7 @@ const About = async () => {
       <AboutHeader text="$ ls -al GitHub Stats" />
       <GitHubStats />
       <AboutHeader text="$ ls -al Tech Stack" />
-      <TechStack techStacks={techStacks}/>
+      <TechStack techStacks={techStacks} />
       <AboutHeader text="$ ls -al Life Style" />
       <LifeStyles lifestyles={lifestyles} />
     </article>

diff --git a/apps/web/src/components/about/tech-stack.tsx b/apps/web/src/components/about/tech-stack.tsx
@@ -1,10 +1,12 @@
 import React from "react";
+import type { Icon } from '@primer/octicons-react';
+import type { IconType } from 'react-icons';
 
 import "@/styles/about/tech-stack.css";
 
 type TechStack = {
   name: string;
-  icon: JSX.Element;
+  icon: Icon | IconType;
 };
 
 type TechStackProps = {
@@ -22,7 +24,7 @@ const TechStack: React.FC<TechStackProps> = ({ techStacks }) => {
           <div className="tech-stack-container">
             {stacks.map((stack) => (
               <div key={stack.name} className="tech-icon text-white-2">
-                {stack.icon}
+                <stack.icon />
               </div>
             ))}
           </div>

diff --git a/apps/web/src/config/index.ts b/apps/web/src/config/index.ts
@@ -8,8 +8,27 @@ import { IoSchoolOutline } from "react-icons/io5";
 import { PiTrophy, PiBooks } from "react-icons/pi";
 import { GoalIcon } from '@primer/octicons-react'
 import { LuGithub, LuPencil } from "react-icons/lu";
-import { TbPhotoSquareRounded } from "react-icons/tb";
-import { TbBrandCpp } from "react-icons/tb";
+import {
+  TbBrandCpp, TbBrandTypescript,
+  TbBrandGolang, TbMarkdown,
+  TbBrandNextjs, TbBrandDjango,
+  TbBrandApple, TbBrandTailwind,
+  TbBrandDocker, TbBrandMysql,
+  TbPhotoSquareRounded
+} from "react-icons/tb";
+import { FaReact, FaAws } from "react-icons/fa";
+import { AiOutlinePython } from "react-icons/ai";
+import { RiJavaLine, RiJavascriptLine } from "react-icons/ri";
+import {
+  SiLatex,
+  SiFastapi,
+  SiKubernetes,
+  SiMicrosoftazure,
+  SiAwslambda,
+} from "react-icons/si";
+import { BiLogoFlask } from "react-icons/bi";
+import { VscTerminalLinux } from "react-icons/vsc";
+import { DiRedis } from "react-icons/di";
 
 
 const config: Config = {
@@ -86,26 +105,35 @@ In my spare time, I do workouts 💪🏻, street photography 📸, and tech cont
         text: "Sky brings freedom; streets, a reminder of others' contributions."
       }
     ],
-    "programmingLanguage": [
-      { id: 'python', src: 'https://skillicons.dev/icons?i=python', alt: 'python' },
-      { id: 'ts', src: 'https://skillicons.dev/icons?i=ts', alt: 'ts' },
-      { id: 'go', src: 'https://skillicons.dev/icons?i=go', alt: 'go' },
-      { id: 'cpp', src: 'https://skillicons.dev/icons?i=cpp', alt: 'cpp' },
-      { id: 'java', src: 'https://skillicons.dev/icons?i=java', alt: 'java' },
-      { id: 'md', src: 'https://skillicons.dev/icons?i=md', alt: 'md' },
-      { id: 'bash', src: 'https://skillicons.dev/icons?i=bash', alt: 'bash' },
-      { id: 'latex', src: 'https://skillicons.dev/icons?i=latex', alt: 'latex' },
-    ],
-    "devOps": [
-      { id: 'linux', src: 'https://skillicons.dev/icons?i=linux', alt: 'linux' },
-      { id: 'aws', src: 'https://skillicons.dev/icons?i=aws', alt: 'aws' },
-      { id: 'fastapi', src: 'https://skillicons.dev/icons?i=fastapi', alt: 'fastapi' },
-      { id: 'react', src: 'https://skillicons.dev/icons?i=react', alt: 'react' },
-      { id: 'nextjs', src: 'https://skillicons.dev/icons?i=nextjs', alt: 'nextjs' },
-      { id: 'flask', src: 'https://skillicons.dev/icons?i=flask', alt: 'flask' },
-      { id: 'docker', src: 'https://skillicons.dev/icons?i=docker', alt: 'docker' },
-      { id: 'githubactions', src: 'https://skillicons.dev/icons?i=githubactions', alt: 'githubactions' },
-    ]
+    "techStacks": {
+      "programmingLanguages": [
+        { name: "Python", icon: AiOutlinePython },
+        { name: "TypeScript", icon: TbBrandTypescript },
+        { name: "Go", icon: TbBrandGolang },
+        { name: "C++", icon: TbBrandCpp },
+        { name: "Java", icon: RiJavaLine },
+        { name: "Markdown", icon: TbMarkdown },
+        { name: "LaTeX", icon: SiLatex },
+        { name: "JavaScript", icon: RiJavascriptLine },
+        { name: "Linux", icon: VscTerminalLinux },
+        { name: "Apple", icon: TbBrandApple },
+        { name: "MySQL", icon: TbBrandMysql },
+        { name: "Redis", icon: DiRedis },
+        { name: "Tailwind", icon: TbBrandTailwind },
+      ],
+      "tools": [
+        { name: "React", icon: FaReact },
+        { name: "Next.js", icon: TbBrandNextjs },
+        { name: "AWS", icon: FaAws },
+        { name: "FastAPI", icon: SiFastapi },
+        { name: "Django", icon: TbBrandDjango },
+        { name: "Flask", icon: BiLogoFlask },
+        { name: "Docker", icon: TbBrandDocker },
+        { name: "Kubernetes", icon: SiKubernetes },
+        { name: "Azure", icon: SiMicrosoftazure },
+        { name: "Lambda", icon: SiAwslambda },
+      ],
+    },
   },
   resume: {
     "educations": {

diff --git a/apps/web/src/types/about.d.ts b/apps/web/src/types/about.d.ts
@@ -1,6 +1,7 @@
 // https://github.com/afiiif/pokemon-world/blob/main/src/types/pokemon.ts
 
 import type { Icon } from '@primer/octicons-react';
+import type { IconType } from 'react-icons';
 
 export type LifeStyle = {
   icon: Icon;
@@ -9,10 +10,16 @@ export type LifeStyle = {
 }
 
 export type TechStack = {
-  id: string;
-  src: string;
-  alt: string;
-}
+  name: string;
+  icon: Icon | IconType;
+};
+
+type TechStackProps = {
+  techStacks: {
+    programmingLanguages: TechStack[];
+    tools: TechStack[];
+  };
+};
 
 export type SocialMedia = {
   githubUsername: string;
@@ -48,6 +55,10 @@ export type About = {
   socialMedia: SocialMedia;
   introduction: string;
   lifestyles: LifeStyle[];
-  programmingLanguage: TechStack[];
-  devOps: TechStack[];
+  techStacks: {
+    programmingLanguages: TechStack[];
+    tools: TechStack[];
+  };
 }
+
+