feat(project): added color theme project, added in dev project flag);

src/components/Projects.tsx

@@ -7,7 +7,10 @@ import skymoneyvideo from "../assets/video/Skymoney-video.mp4";
 import skymoneyvideoMobile from "../assets/video/Skymoney-mobile-video.mp4";
 import millervideo from "../assets/video/500nmain-video.mp4";
 import millervideoMobile from "../assets/video/500nmain-mobile-video.mp4";
-
+import themeTesterCover from "../assets/img/theme_tester_img.png";
+import themeTesterCoverMobile from "../assets/img/theme_tester_mobile_img.png";
+import themeTesterVideo from "../assets/video/themeTesterVideo.mp4";
+import themeTesterVideoMobile from "../assets/video/themeTesterVideoMobile.mp4";
 type Project = {
   id: string;
   title: string;
@@ -19,6 +22,7 @@ type Project = {
   techStack: string[];
   liveUrl?: string;
   beta?: boolean;
+  inDev?: boolean;
   note?: string;
   comingSoon?: boolean;
 };
@@ -36,6 +40,7 @@ const projects: Project[] = [
     techStack: ["React", "TypeScript", "Node.js", "PostgreSQL"],
     liveUrl: "https://skymoneybudget.com",
     beta: true,
+    inDev: true,
     note: "Contact Jody for beta access.",
   },
   {
@@ -50,6 +55,22 @@ const projects: Project[] = [
     techStack: ["HTML", "CSS", "JQuery"],
     liveUrl: "https://500nmain806.com",
   },
+  {
+    id: "color-theme-tester",
+    title: "Color Theme UI Tester",
+    description:
+      "A UI Color Theme Tester that visualizes color schemes, fonts, and images on a mock UI.",
+    coverImage: themeTesterCover,
+    coverImageMobile: themeTesterCoverMobile,
+    video: themeTesterVideo,
+    videoMobile: themeTesterVideoMobile,
+    techStack: ["React", "Tailwind", "Typescript"],
+    liveUrl: "https://github.com/Ricearoni1245/Color-Theme-UI-Tester", 
+    beta: false,
+    inDev: true,
+    note: "Stay tuned for progress!"
+  }
+
 ];
 
 function VideoModal({
@@ -163,8 +184,15 @@ function ProjectCard({
           <div className="absolute top-3 right-3 px-3 py-1 rounded-full bg-primary text-white text-xs font-bold uppercase tracking-wider">
             Beta
           </div>
+
         )}
-      </div>
+        {project.inDev && (
+          <div className="absolute top-3 left-3 px-3 py-1 rounded-full bg-tertiary text-white text-xs font-bold uppercase tracking-wider">
+            In Progress
+          </div>
+        )
+        }
+     </div>
 
       {/* Cover Image - Mobile */}
       <div className="relative aspect-[9/16] overflow-hidden md:hidden mx-4 my-4 rounded-xl">
@@ -197,6 +225,11 @@ function ProjectCard({
             Beta
           </div>
         )}
+        {project.inDev && (
+          <div className="absolute top-3 left-3 px-3 py-1 rounded-full bg-tertiary text-white text-xs font-bold uppercase tracking-wider">
+            In Progress
+          </div>
+        )}
       </div>
 
       {/* Content */}