feat(about): implement TechStack component with frame (#80) (#535)

closed: #80

apps/web/src/app/page.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import GitHubStats from '@/components/about/github-stats';
-import TechStack from '@/components/about/tech-stack';
 import LifeStyles from '@/components/about/life-styles';
 import PageHeader from '@/components/page-header';
 import AboutHeader from '@/components/about/about-header';
@@ -10,6 +9,80 @@ import MarkdownRenderer from "@/components/markdown/markdown-renderer";
 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";
+
+type TechStack = {
+  name: string;
+  icon: JSX.Element;
+};
+
+type TechStackCategory = {
+  category: string;
+  stacks: TechStack[];
+};
+
+const techStacks: TechStackCategory[] = [
+  {
+    category: "Programming Languages",
+    stacks: [
+      { 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 /> },
+    ],
+  },
+  {
+    category: "Frameworks and Tools",
+    stacks: [
+      { 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
@@ -58,8 +131,7 @@ const About = async () => {
       <AboutHeader text="$ ls -al GitHub Stats" />
       <GitHubStats />
       <AboutHeader text="$ ls -al Tech Stack" />
-      <TechStack techStack={programmingLanguage} />
-      <TechStack techStack={devOps} />
+      <TechStack techStacks={techStacks}/>
       <AboutHeader text="$ ls -al Life Style" />
       <LifeStyles lifestyles={lifestyles} />
     </article>

apps/web/src/components/about/tech-item.tsx

@@ -0,0 +1,26 @@
+import type { IconType } from "react-icons";
+import type { Icon } from "@primer/octicons-react";
+
+interface TechItemProps {
+  techSteck: TechStack;
+}
+
+type TechStack = {
+  name: string;
+  icon: Icon | IconType;
+};
+
+const TechItem: React.FC<TechItemProps> = ({ techSteck }) => {
+
+  return (
+    <li className="service-item">
+      <div className="tech-stack-container">
+        <div className="tech-icon text-orange-yellow-crayola">
+          <techSteck.icon />
+        </div>
+      </div>
+    </li>
+  );
+};
+
+export default TechItem;

apps/web/src/components/about/tech-stack.css

@@ -0,0 +1,56 @@
+.service-item {
+  position: relative;
+  background: var(--border-gradient-onyx);
+  padding: 20px;
+  border-radius: 14px;
+  box-shadow: var(--shadow-2);
+  z-index: 1;
+  overflow: hidden;
+}
+
+.service-item::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  background: var(--bg-gradient-jet);
+  border-radius: inherit;
+  z-index: -1;
+}
+
+.tech-stack-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  overflow-y: auto;
+  max-height: 150px;
+  /* Adjust as needed */
+  padding: 10px;
+}
+
+.tech-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  /* Adjust icon size */
+  color: white;
+  /* Icon color */
+}
+
+.icon-label {
+  margin-top: 5px;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+@media (min-width: 580px) {
+  .service-item {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 18px;
+    padding: 30px;
+  }
+}

apps/web/src/components/about/tech-stack.tsx

@@ -1,27 +1,38 @@
-import Image from 'next/image';
+import React from "react";
 
-import type { TechStack as TechStackType } from '@/types/about';
+import "./tech-stack.css";
 
-interface TechStackProps {
-  techStack: TechStackType[];
-}
+type TechStack = {
+  name: string;
+  icon: JSX.Element;
+};
 
-const TechStack: React.FC<TechStackProps> = ({ techStack }) => {
+type TechStackCategory = {
+  category: string;
+  stacks: TechStack[];
+};
+
+
+type TechStackV1Props = {
+  techStacks: TechStackCategory[];
+};
+
+const TechStackV1: React.FC<TechStackV1Props> = ( {techStacks} ) => {
   return (
-    <ul className="techstack-list has-scrollbar">
-      {techStack.map((item: TechStackType) => (
-        <li key={item.id} className="techstack-item">
-          <Image
-            id={item.id}
-            src={item.src}
-            alt={item.alt}
-            width={65}
-            height={65}
-          />
+    <ul className="service-list mt-[30px] grid grid-cols-2 gap-[20px] lg:gap-y-[20px] lg:gap-x-[25px]">
+      {techStacks.map(({ category, stacks }) => (
+        <li key={category} className="service-item">
+          <div className="tech-stack-container">
+            {stacks.map((stack) => (
+              <div key={stack.name} className="tech-icon text-orange-yellow-crayola">
+                {stack.icon}
+              </div>
+            ))}
+          </div>
         </li>
       ))}
     </ul>
   );
-}
+};
 
-export default TechStack;
+export default TechStackV1;