[ UPDATE ] Modify projects

- Add preview options for deploy apps

Author: JjayFabor

src/components/ProjectCard.jsx

@@ -1,5 +1,7 @@
 import { Card } from "@/components/ui/card";
 import techColors from "../constants/techColors";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
 
 const ProjectCard = ({ project }) => {
   const getTechColor = (tech) => techColors[tech] || "bg-white/20 text-white";
@@ -43,7 +45,20 @@ const ProjectCard = ({ project }) => {
             ))}
           </div>
 
-          {/* GitHub Link */}
+          {project.preview && (
+            <a
+                href={project.preview}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center mb-2"
+              >
+                <Button variant="default" size="sm">
+                  <ExternalLink className="mr-2 h-4 w-4" />
+                  Preview
+                </Button>
+              </a>
+          )}
+
           <a
             href={project.link}
             target="_blank"

src/components/Projects.jsx

@@ -35,15 +35,26 @@ const Projects = () => {
       link: "https://github.com/JjayFabor/swift-bidder"
     },
     {
-        id: 4,
-        title: "BridgeAI",
-        description: "An educational platform for personalized learning.",
-        image: "projects/bridgeAI.png",
-        techStack: ["Python", "GeminiAPI", "Flutter", "Dart", "Flask"],
-        status: "ongoing",
-        category: "Mobile Application",
-        link: "https://github.com/JjayFabor/bridgeAI"
-      },
+      id: 4,
+      title: "DevTrack API",
+      description: "A personal productivity API for developers to manage tasks, log learning sessions, track progress on side projects.",
+      image: "projects/default.png",
+      techStack: ["Laravel", "PHP", "Laravel Scribe", "Postman", "RESTful API"],
+      status: "ongoing",
+      category: "Backend API",
+      preview: "https://devtrack-api-production.up.railway.app/docs",
+      link: "https://github.com/JjayFabor/devtrack-api"
+    },
+    {
+      id: 5,
+      title: "BridgeAI",
+      description: "An educational platform for personalized learning.",
+      image: "projects/bridgeAI.png",
+      techStack: ["Python", "GeminiAPI", "Flutter", "Dart", "Flask"],
+      status: "ongoing",
+      category: "Mobile Application",
+      link: "https://github.com/JjayFabor/bridgeAI"
+    },
   ];
 
   const [selectedCategory, setSelectedCategory] = useState("All");

src/constants/techColors.jsx

@@ -15,6 +15,8 @@ const techColors = {
     Laravel: "bg-red-500/30 text-red-100",
     Python: "bg-blue-600/30 text-blue-100",
     Flask: "bg-gray-400/30 text-gray-100",
+    Postman: "bg-orange-600/20 text-orange-400",
+    "RESTful API": "bg-purple-600/20 text-purple-400",
     Node: "bg-green-500/30 text-green-100",
     Express: "bg-gray-500/30 text-gray-100",
     Dart: "bg-blue-700/30 text-blue-100",