chore(deps): bump axios from 1.8.4 to 1.12.0

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@trainto/sante": "^0.2.2",
-    "axios": "^1.8.4",
+    "axios": "^1.12.0",
     "date-fns": "^4.1.0",
     "gray-matter": "^4.0.3",
     "micromark": "^4.0.1",

src/app/about/page.tsx

@@ -1,8 +1,48 @@
 import Image from 'next/image';
 
+import Card from '@/components/common/portfolio-card';
 import Contributions from '@/components/contributions';
 import './terminal.css';
 
+const Portfolios = [
+  {
+    title: 'Insight Lens',
+    desc: 'Text to Hadoop query using LLM for in-house data engineers',
+    img: '/querka.png',
+    tags: ['Node', 'Express', 'Typescript', 'React', 'Tailwind', 'MySQL', 'Redis', 'Turborepo'],
+  },
+  {
+    title: 'RB Dialog',
+    desc: 'Total AI chatbot solution',
+    img: '/rb.png',
+    tags: ['Typescript', 'Next.js', 'React', 'AWS'],
+  },
+  {
+    title: 'IOT sensor solution',
+    desc: 'IoT based remote facility monitoring solution',
+    img: '/capstec.png',
+    tags: ['Next.js', 'React', 'Typescript'],
+  },
+  {
+    title: 'T World',
+    desc: "SKT's official mobile/web app",
+    img: '/tworld.jpg',
+    tags: ['Node', 'Express', 'Typescript', 'JQuery', 'Handlebar', 'Redis'],
+  },
+  {
+    title: 'FLO (a.k.a. MusicMate)',
+    desc: 'Music streaming app',
+    img: '/flo.jpg',
+    tags: ['Java', 'Kotlin', 'Android', 'Retrofit', 'ExoPlayer', 'MVVM'],
+  },
+  {
+    title: 'DataSoda',
+    desc: 'LTE data sharing app',
+    img: '/datasoda.jpg',
+    tags: ['Java', 'Android', 'Retrofit', 'MVP'],
+  },
+];
+
 export default function About() {
   return (
     <div className="w-11/12 mx-auto">
@@ -39,6 +79,15 @@ export default function About() {
         </div>
       </div>
 
+      <div className="mt-10">
+        <h3 className="font-bold text-3xl">Portfolio</h3>
+        <div className="flex flex-wrap justify-center gap-4 pt-4">
+          {Portfolios.map((p) => (
+            <Card key={p.title} title={p.title} desc={p.desc} img={p.img} tags={p.tags} />
+          ))}
+        </div>
+      </div>
+
       <div className="mt-10">
         <h3 className="font-bold text-3xl">Work Experience</h3>
         <div className="flex flex-col sm:flex-row space-x-5 space-y-2 mt-5">

src/components/common/portfolio-card.tsx

@@ -0,0 +1,51 @@
+import Image from 'next/image';
+
+const Card = ({
+  title,
+  desc,
+  img,
+  tags,
+}: {
+  title: string;
+  desc: string;
+  img: string;
+  tags: string[];
+}) => {
+  return (
+    <div
+      className={
+        'portfolio_card w-[230px] h-[300px] bg-black rounded-lg shadow-lg hover:shadow-2xl' +
+        ' transform hover:scale-105 hover:-translate-x-1 hover:-translate-y-1 transition-transform duration-200'
+      }
+    >
+      <div className="relative w-full h-[100px]">
+        <Image
+          src={img}
+          layout="fill"
+          objectFit="cover"
+          alt="Project image"
+          className="rounded-t-lg"
+        />
+      </div>
+
+      <div className="p-2">
+        <h4 className="text-brand1 text-lg font-bold">{title}</h4>
+      </div>
+
+      <div className="px-2 text-sm text-gray-400 min-h-[50px]">{desc}</div>
+
+      <div className="flex flex-wrap justify-center space-x-2 p-1">
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            className="border border-brand2/50 rounded-xl px-2 py-1 mt-1 text-xs text-brand2"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Card;