From 948fa044f5ac57eca1df07d16dfd55350d9f9737 Mon Sep 17 00:00:00 2001
From: yashksaini-coder <yashksaini89@gmail.com>
Date: Sat, 15 Nov 2025 13:44:29 +0530
Subject: [PATCH 1/4] Improve CSS media queries

---
 src/components/ourProjects.mobile.css | 99 +++++++++++++++++++++++----
 1 file changed, 86 insertions(+), 13 deletions(-)

diff --git a/src/components/ourProjects.mobile.css b/src/components/ourProjects.mobile.css
index f4d5a30d..60171e69 100644
--- a/src/components/ourProjects.mobile.css
+++ b/src/components/ourProjects.mobile.css
@@ -1,19 +1,23 @@
-/* THIS CSS IS ONLY FOR " OUR PROJECT "  as the width available for embeded page is extremly small */
+/* THIS CSS IS ONLY FOR " OUR PROJECT "  as the width available for embeded page is extremely small */
 
 /* Responsive overrides for embedded preview on small screens */
 
-/* For widths below 768px: give the card extra height and reduce chrome */
+/* Base mobile styles - for all mobile devices */
 @media (max-width: 767px) {
   .ourprojects-embed-container {
-    min-height: 82vh !important;
+    min-height: 400px !important;
+    padding: 0.5rem !important;
   }
+  
   .ourprojects-embed-card {
-    height: 82vh !important;
-    border-radius: 1.25rem !important; /* smaller radius to fit */
+    min-height: 380px !important;
+    border-radius: 0.5rem !important;
   }
+  
   .ourprojects-iframe {
-    height: 220% !important; /* more scrollable viewport */
+    height: 220% !important;
   }
+  
   /* Improve readability on dark previews */
   .ourprojects-overlay {
     background: linear-gradient(
@@ -23,40 +27,85 @@
       transparent
     ) !important;
   }
+  
+  /* Show indicator but make it smaller on mobile */
   .ourprojects-live-indicator {
-    display: none !important; /* avoid overlapping text, see red arrow in screenshot */
+    font-size: 0.5625rem !important;
+    padding: 0.25rem 0.5rem !important;
+    right: 0.5rem !important;
+    bottom: 0.5rem !important;
+  }
+}
+
+/* Small mobile devices (480px and below) */
+@media (max-width: 480px) {
+  .ourprojects-embed-container {
+    min-height: 350px !important;
+    padding: 0.5rem !important;
+  }
+  
+  .ourprojects-embed-card {
+    min-height: 330px !important;
+    border-radius: 0.5rem !important;
+  }
+  
+  .ourprojects-iframe {
+    height: 230% !important;
   }
 }
 
 /* For ultra small widths below 360px (covers 320px phones) */
 @media (max-width: 360px) {
   .ourprojects-embed-container {
-    min-height: 88vh !important;
+    min-height: 320px !important;
+    padding: 0.375rem !important;
   }
+  
   .ourprojects-embed-card {
-    height: 88vh !important;
+    min-height: 300px !important;
+    border-radius: 0.5rem !important;
   }
+  
   .ourprojects-iframe {
     height: 250% !important;
   }
+  
   .ourprojects-live-indicator {
-    display: none !important;
+    font-size: 0.5rem !important;
+    padding: 0.25rem 0.375rem !important;
   }
 }
 
 /* Safety for <320px specifically if needed */
 @media (max-width: 320px) {
   .ourprojects-embed-container {
-    min-height: 92vh !important;
+    min-height: 300px !important;
+    padding: 0.375rem !important;
   }
+  
   .ourprojects-embed-card {
-    height: 92vh !important;
+    min-height: 280px !important;
+    border-radius: 0.5rem !important;
   }
+  
   .ourprojects-iframe {
     height: 280% !important;
   }
+  
   .ourprojects-live-indicator {
-    display: none !important;
+    font-size: 0.5rem !important;
+    padding: 0.25rem !important;
+  }
+}
+
+/* Tablet adjustments (768px - 1024px) */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .ourprojects-embed-container {
+    min-height: 500px !important;
+  }
+  
+  .ourprojects-embed-card {
+    min-height: 480px !important;
   }
 }
 
@@ -65,3 +114,27 @@
 .ourprojects-embed-card .text-shadow-soft {
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
 }
+
+/* Improve touch targets on mobile */
+@media (max-width: 767px) {
+  .ourprojects-embed-card {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+/* Smooth scrolling for project list on mobile */
+@media (max-width: 767px) {
+  .no-scrollbar {
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+  }
+  
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}

From 15694db4d692bd3231726d70aa9fc487f16494e8 Mon Sep 17 00:00:00 2001
From: yashksaini-coder <yashksaini89@gmail.com>
Date: Sat, 15 Nov 2025 13:45:18 +0530
Subject: [PATCH 2/4] Refactored the component and fixed depreceated API

---
 src/components/ourProjects.tsx | 382 ++++++++++++++-------------------
 1 file changed, 167 insertions(+), 215 deletions(-)

diff --git a/src/components/ourProjects.tsx b/src/components/ourProjects.tsx
index a52e79fa..cbd1e686 100644
--- a/src/components/ourProjects.tsx
+++ b/src/components/ourProjects.tsx
@@ -1,20 +1,12 @@
-"use client";
-
 import { ChevronRight } from "lucide-react";
 import { useState } from "react";
 import { motion } from "framer-motion";
 import React from "react";
 import { useSafeColorMode } from "../utils/useSafeColorMode";
-// Mobile-specific overrides for very small screens (<768px and <320px)
 import "./ourProjects.mobile.css";
-// Import projects data and types
-import projectsData from "../data/projects.json";
-import type { ProjectsData, ProjectItem } from "../data/types";
+// Now uses TS config, not legacy/deprecated APIs.
+import projectsData from "../database/projects/projects";
 
-/**
- * Legacy interface for backward compatibility
- * @deprecated Use ProjectsData from types.ts instead
- */
 export interface OurProjectsData {
   tag: string;
   title: string;
@@ -25,76 +17,41 @@ export interface OurProjectsData {
   }[];
 }
 
-/**
- * Legacy props interface for backward compatibility
- * @deprecated Component now imports data directly
- */
-export interface OurProjectsProps {
-  OurProjectsData?: OurProjectsData;
-}
-
-/**
- * OurProjects Component
- *
- * Displays a showcase of RecodeHive projects with interactive previews.
- * Now uses data-driven approach with JSON configuration for better maintainability.
- *
- * Features:
- * - Dynamic project loading from JSON
- * - Live website previews for supported projects
- * - Responsive design with mobile optimizations
- * - Dark/light theme support
- * - Interactive hover effects and animations
- *
- * @param props - Optional props for backward compatibility
- */
-const OurProjects: React.FC<OurProjectsProps> = ({
-  OurProjectsData: legacyData,
-}) => {
-  const { colorMode, isDark } = useSafeColorMode();
+const PROJECT_URLS: Record<string, string> = {
+  "Awesome GitHub Profile":
+    "https://recodehive.github.io/awesome-github-profiles/",
+  "Machine Learning Repository": "https://machine-learning-repos.vercel.app/",
+};
 
-  // Use JSON data by default, fallback to legacy props for backward compatibility
-  // Convert legacy data to new format if needed
-  let data: ProjectsData;
+const getWebsiteUrl = (title: string) => {
+  return PROJECT_URLS[title] || "https://github.com/recodehive";
+};
 
-  if (legacyData) {
-    // Convert legacy format to new format
-    data = {
-      tag: legacyData.tag,
-      title: legacyData.title,
-      description: legacyData.description,
-      items: legacyData.items.map((item, index) => ({
-        id: index + 1,
-        title: item.title,
-        description: `Learn more about ${item.title}`,
-        image: item.image,
-        projectUrl: getWebsiteUrl(item.title),
-        githubUrl: getWebsiteUrl(item.title),
-        tags: [],
-      })),
-    };
-  } else {
-    data = projectsData as ProjectsData;
-  }
+const OurProjects: React.FC = () => {
+  const { isDark } = useSafeColorMode();
+  const data: OurProjectsData = projectsData;
 
   return (
-    <div
-      className={`flex min-h-screen flex-col items-center justify-center gap-10 px-4 py-10 transition-colors duration-300 sm:gap-20 sm:py-20 ${
-        isDark ? "bg-[#0c0c0c] text-white" : "bg-white text-black"
-      }`}
+    <section
+      className={`flex w-full flex-col items-center gap-8 py-6 transition-colors duration-300 sm:gap-10 sm:py-8 md:gap-12 md:py-10 lg:gap-16 lg:py-12 ${isDark ? "bg-[#0c0c0c] text-white" : "bg-white text-black"
+        }`}
+      aria-label="Our Projects Section"
     >
-      <HeadingComponent
-        tag={data.tag}
-        title={data.title}
-        description={data.description}
-        isDark={isDark}
-      />
-      <SelectComponent items={data.items} isDark={isDark} />
-    </div>
+      <div className="w-full max-w-7xl px-4 sm:px-6 md:px-8">
+        <HeadingComponent
+          tag={data.tag}
+          title={data.title}
+          description={data.description}
+          isDark={isDark}
+        />
+      </div>
+      <div className="w-full max-w-7xl px-4 sm:px-6 md:px-8">
+        <SelectComponent items={data.items} isDark={isDark} />
+      </div>
+    </section>
   );
 };
 
-// Heading Component
 const HeadingComponent = ({
   tag,
   title,
@@ -105,116 +62,103 @@ const HeadingComponent = ({
   title: string;
   description: string;
   isDark: boolean;
-}) => {
-  return (
-    <div className="grid w-full grid-cols-1 gap-8 md:grid-cols-2 md:gap-10">
-      <motion.div
-        initial={{ opacity: 0, x: -20 }}
-        whileInView={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.5 }}
-        className="flex flex-col items-center gap-6 sm:gap-10 md:items-start md:justify-start"
+}) => (
+  <div className="grid w-full grid-cols-1 gap-6 sm:gap-8 md:grid-cols-2 md:gap-10 lg:gap-12">
+    <motion.div
+      initial={{ opacity: 0, x: -20 }}
+      whileInView={{ opacity: 1, x: 0 }}
+      viewport={{ once: true, margin: "-50px" }}
+      transition={{ duration: 0.5 }}
+      className="flex flex-col items-center gap-3 sm:gap-4 md:items-start md:justify-start md:gap-5"
+    >
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        className="inline-flex cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-purple-500 px-4 py-1.5 text-xs font-medium tracking-wide text-white shadow-lg transition-transform duration-300 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:px-5 sm:py-2 sm:text-sm md:px-6 md:text-base"
+        onClick={() =>
+          (window.location.href = "https://github.com/recodehive")
+        }
+        aria-label="Visit RecodeHive GitHub"
       >
-        <div
-          className="transform cursor-pointer rounded-full bg-gradient-to-r from-blue-500 to-purple-500 px-6 py-2 text-sm font-medium tracking-wide text-white shadow-lg transition-transform duration-300 hover:scale-105 sm:text-base"
-          onClick={() =>
-            (window.location.href = "https://github.com/recodehive")
-          }
-        >
-          {tag}
-        </div>
-        <div
-          className={`bg-gradient-to-r bg-clip-text text-center text-3xl font-bold text-transparent sm:text-4xl md:w-11/12 md:text-left md:text-5xl ${
-            isDark
-              ? "from-white via-gray-300 to-white"
-              : "from-black via-gray-700 to-black"
+        {tag}
+      </motion.button>
+      <h2
+        className={`bg-gradient-to-r bg-clip-text text-center text-2xl font-bold leading-tight text-transparent sm:text-3xl md:w-full md:text-left md:text-4xl lg:text-5xl xl:text-6xl ${isDark
+          ? "from-white via-gray-300 to-white"
+          : "from-black via-gray-700 to-black"
           }`}
-        >
-          {title}
-        </div>
-      </motion.div>
-
-      <motion.div
-        initial={{ opacity: 0, x: 20 }}
-        whileInView={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.5, delay: 0.2 }}
-        className={`${
-          isDark ? "text-gray-300" : "text-gray-700"
-        } flex h-full items-center justify-center text-justify text-base leading-relaxed sm:text-lg md:pr-10`}
       >
-        {description}
-      </motion.div>
-    </div>
-  );
-};
-
-// Project URLs configuration
-const PROJECT_URLS: Record<string, string> = {
-  "Awesome GitHub Profile":
-    "https://recodehive.github.io/awesome-github-profiles/",
-  "Machine Learning Repository": "https://machine-learning-repos.vercel.app/",
-};
+        {title}
+      </h2>
+    </motion.div>
 
-// Helper function to get website URLs
-const getWebsiteUrl = (title: string) => {
-  return PROJECT_URLS[title] || "https://github.com/recodehive";
-};
+    <motion.div
+      initial={{ opacity: 0, x: 20 }}
+      whileInView={{ opacity: 1, x: 0 }}
+      viewport={{ once: true, margin: "-50px" }}
+      transition={{ duration: 0.5, delay: 0.2 }}
+      className={`${isDark ? "text-gray-300" : "text-gray-700"
+        } flex h-full items-center justify-center text-justify text-sm leading-relaxed sm:text-base md:items-start md:justify-start md:pr-4 lg:text-lg lg:pr-8`}
+    >
+      <p>{description}</p>
+    </motion.div>
+  </div>
+);
 
-// Select Component
 const SelectComponent = ({
   items,
   isDark,
 }: {
-  items: ProjectItem[];
+  items: { title: string; image: string }[];
   isDark: boolean;
 }) => {
   const [activeItem, setActiveItem] = useState(0);
-  const [isHovered, setIsHovered] = useState(false);
 
+  // For demo, if more fields are needed in OurProjectsData, adapt.
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-50px" }}
       transition={{ duration: 0.5, delay: 0.4 }}
-      className="grid w-full grid-cols-1 overflow-hidden rounded-[30px] shadow-2xl sm:rounded-[50px] md:grid-cols-12"
+      className="grid w-full grid-cols-1 gap-0 overflow-hidden rounded-xl shadow-2xl sm:rounded-2xl md:grid-cols-12 md:gap-0 lg:rounded-3xl"
     >
       <div
-        className={`no-scrollbar col-span-1 flex max-h-[30vh] flex-row items-start justify-start gap-4 overflow-x-auto p-4 md:col-span-4 md:max-h-[70vh] md:flex-col md:gap-6 md:overflow-y-auto md:p-8 ${
-          isDark ? "bg-black" : "bg-gray-100"
-        }`}
+        className={`no-scrollbar col-span-1 flex flex-row items-start justify-start gap-2.5 overflow-x-auto overscroll-x-contain p-3 sm:gap-3 sm:p-4 md:col-span-4 md:min-h-[500px] md:max-h-[600px] md:flex-col md:gap-3 md:overflow-y-auto md:overflow-x-hidden md:p-5 lg:gap-4 lg:p-6 ${isDark ? "bg-black/95" : "bg-gray-100/95"
+          }`}
       >
         {items.map((item, index) => (
-          <motion.div
+          <motion.button
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
-            key={item.id || index}
+            key={item.title}
             onClick={() => setActiveItem(index)}
-            className={`relative w-40 cursor-pointer rounded-2xl p-2 transition-all duration-300 ease-in-out md:w-4/5 md:rounded-r-full md:p-6 ${
-              activeItem === index
-                ? "bg-gradient-to-r from-blue-600 to-purple-600 text-white"
-                : isDark
-                  ? "bg-gray-800 text-white hover:bg-gray-700"
-                  : "bg-gray-200 text-black hover:bg-gray-300"
-            }`}
+            className={`relative flex min-w-[140px] shrink-0 touch-manipulation select-none rounded-lg p-3 text-left transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:min-w-[160px] sm:p-3.5 md:min-w-0 md:w-full md:rounded-r-full md:p-4 lg:p-5 ${activeItem === index
+              ? "bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg"
+              : isDark
+                ? "bg-gray-800 text-white hover:bg-gray-700"
+                : "bg-gray-200 text-black hover:bg-gray-300"
+              }`}
+            aria-pressed={activeItem === index}
+            aria-label={`Select ${item.title} project`}
           >
-            <div className="text-xs font-semibold md:w-10/12 md:text-lg">
+            <span className="text-xs font-semibold leading-tight sm:text-sm md:w-10/12 md:text-base lg:text-lg">
               {item.title}
-            </div>
-            <div
-              className={`absolute top-1/2 right-2 -translate-y-1/2 rounded-full transition-transform duration-300 md:right-4 ${
-                activeItem === index ? "translate-x-2" : ""
-              }`}
+            </span>
+            <span
+              className={`absolute top-1/2 right-2 -translate-y-1/2 rounded-full transition-transform duration-300 sm:right-3 md:right-4 ${activeItem === index ? "translate-x-1 sm:translate-x-2" : ""
+                }`}
+              aria-hidden="true"
             >
-              <ChevronRight className="hidden h-6 w-6 md:block md:h-8 md:w-8" />
-            </div>
-          </motion.div>
+              <ChevronRight className="hidden h-4 w-4 sm:h-5 sm:w-5 md:block md:h-6 md:w-6 lg:h-7 lg:w-7" />
+            </span>
+          </motion.button>
         ))}
       </div>
 
-      <div
-        className={`ourprojects-embed-container relative col-span-1 min-h-[80vh] overflow-hidden p-4 md:col-span-8 md:min-h-[70vh] md:p-8`}
-      >
+      <div className="ourprojects-embed-container relative col-span-1 min-h-[400px] overflow-hidden p-2 sm:min-h-[450px] sm:p-2.5 md:col-span-8 md:min-h-[500px] md:p-4 lg:min-h-[600px] lg:p-6">
         {/* Animated Mesh Background */}
-        <div className="absolute inset-0 bg-gradient-to-br from-purple-600/30 via-blue-600/30 via-cyan-500/30 to-emerald-500/30">
+        <div className="absolute inset-0 bg-gradient-to-br from-purple-600/30 via-blue-600/30 to-cyan-500/30">
           <div className="absolute inset-0 animate-pulse bg-[radial-gradient(circle_at_50%_50%,rgba(120,119,198,0.3),transparent_50%)]"></div>
           <div
             className="absolute inset-0 animate-spin bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,rgba(147,51,234,0.1)_60deg,transparent_120deg)]"
@@ -251,7 +195,7 @@ const SelectComponent = ({
         <motion.div
           animate={{ y: [-10, 10, -10], rotate: [0, 5, 0] }}
           transition={{ duration: 4, repeat: Infinity }}
-          className="absolute top-8 right-8 hidden h-16 w-16 items-center justify-center rounded-2xl border border-white/20 bg-gradient-to-br from-purple-500 via-blue-500 to-cyan-500 shadow-2xl backdrop-blur-sm md:flex"
+          className="absolute top-4 right-4 hidden h-12 w-12 items-center justify-center rounded-xl border border-white/20 bg-gradient-to-br from-purple-500 via-blue-500 to-cyan-500 shadow-2xl backdrop-blur-sm sm:top-6 sm:right-6 sm:h-14 sm:w-14 sm:rounded-2xl md:flex md:top-8 md:right-8 md:h-16 md:w-16"
         >
           <svg
             className="h-8 w-8 text-white"
@@ -266,17 +210,17 @@ const SelectComponent = ({
         <motion.div
           animate={{ x: [-5, 5, -5], rotate: [0, -10, 0] }}
           transition={{ duration: 3, repeat: Infinity }}
-          className="absolute top-20 left-8 hidden h-12 w-12 items-center justify-center rounded-xl border border-white/20 bg-gradient-to-br from-emerald-400 via-blue-500 to-purple-600 shadow-xl backdrop-blur-sm md:flex"
+          className="absolute top-16 left-4 hidden h-10 w-10 items-center justify-center rounded-lg border border-white/20 bg-gradient-to-br from-emerald-400 via-blue-500 to-purple-600 shadow-xl backdrop-blur-sm sm:top-20 sm:left-6 sm:h-12 sm:w-12 sm:rounded-xl md:flex md:left-8"
         >
-          <span className="text-xl text-white">⚡</span>
+          <span className="text-base text-white sm:text-lg md:text-xl">⚡</span>
         </motion.div>
 
         <motion.div
           animate={{ scale: [1, 1.2, 1], opacity: [0.7, 1, 0.7] }}
           transition={{ duration: 2, repeat: Infinity }}
-          className="absolute right-16 bottom-20 hidden h-10 w-10 items-center justify-center rounded-full border border-white/30 bg-gradient-to-r from-pink-400 via-purple-500 to-indigo-600 shadow-lg backdrop-blur-sm md:flex"
+          className="absolute right-12 bottom-16 hidden h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-gradient-to-r from-pink-400 via-purple-500 to-indigo-600 shadow-lg backdrop-blur-sm sm:right-14 sm:bottom-20 sm:h-10 sm:w-10 md:flex md:right-16 md:bottom-20"
         >
-          <span className="text-sm text-white">🚀</span>
+          <span className="text-xs text-white sm:text-sm">🚀</span>
         </motion.div>
 
         {/* Holographic Main Browser */}
@@ -288,68 +232,69 @@ const SelectComponent = ({
           className="perspective-1000 relative z-10"
         >
           <div
-            className={`md:hover:rotateY-5 group ourprojects-embed-card h-[78vh] transform overflow-hidden rounded-2xl border-2 shadow-2xl backdrop-blur-md transition-all duration-700 hover:scale-105 sm:h-[80vh] sm:rounded-3xl md:h-[65vh] ${
-              isDark
-                ? "border-purple-500/50 bg-gray-900/95 shadow-purple-500/25"
-                : "border-blue-400/50 bg-white/95 shadow-blue-500/25"
-            }`}
+            className={`md:hover:rotateY-5 group ourprojects-embed-card h-full min-h-[380px] transform overflow-hidden rounded-lg border-2 shadow-2xl backdrop-blur-md transition-all duration-700 sm:min-h-[430px] sm:rounded-xl md:min-h-[480px] md:hover:scale-[1.02] lg:min-h-[580px] lg:rounded-2xl ${isDark
+              ? "border-purple-500/50 bg-gray-900/95 shadow-purple-500/25"
+              : "border-blue-400/50 bg-white/95 shadow-blue-500/25"
+              }`}
           >
             {/* Holographic Border Effect */}
             <div className="absolute -inset-0.5 rounded-3xl bg-gradient-to-r from-purple-500 via-blue-500 to-cyan-500 opacity-20 blur transition-opacity duration-500 group-hover:opacity-40"></div>
 
             {/* Premium Browser Header */}
             <div
-              className={`relative flex items-center border-b px-3 py-2 backdrop-blur-xl sm:px-6 sm:py-4 ${
-                isDark
-                  ? "border-gray-600/50 bg-gray-800/90"
-                  : "border-gray-300/50 bg-gray-50/90"
-              }`}
+              className={`relative flex items-center border-b px-2.5 py-2 backdrop-blur-xl sm:px-3 sm:py-2.5 md:px-4 md:py-3 lg:px-5 lg:py-3.5 ${isDark
+                ? "border-gray-600/50 bg-gray-800/90"
+                : "border-gray-300/50 bg-gray-50/90"
+                }`}
             >
-              <div className="mr-6 flex space-x-3">
+              <div className="mr-2 flex space-x-1.5 sm:mr-3 sm:space-x-2 md:mr-4 md:space-x-2.5">
                 <motion.div
                   whileHover={{ scale: 1.2, rotate: 180 }}
-                  className="relative h-4 w-4 cursor-pointer rounded-full bg-gradient-to-br from-red-400 to-red-600 shadow-lg"
+                  className="relative h-2.5 w-2.5 rounded-full bg-gradient-to-br from-red-400 to-red-600 shadow-lg sm:h-3 sm:w-3 md:h-3.5 md:w-3.5"
                 >
                   <div className="absolute inset-0 animate-ping rounded-full bg-red-300 opacity-20"></div>
                 </motion.div>
                 <motion.div
                   whileHover={{ scale: 1.2, rotate: -180 }}
-                  className="relative h-4 w-4 cursor-pointer rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 shadow-lg"
+                  className="relative h-2.5 w-2.5 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 shadow-lg sm:h-3 sm:w-3 md:h-3.5 md:w-3.5"
                 >
                   <div className="absolute inset-0 animate-ping rounded-full bg-yellow-300 opacity-20"></div>
                 </motion.div>
                 <motion.div
                   whileHover={{ scale: 1.2, rotate: 360 }}
-                  className="relative h-4 w-4 cursor-pointer rounded-full bg-gradient-to-br from-green-400 to-emerald-600 shadow-lg"
+                  className="relative h-2.5 w-2.5 rounded-full bg-gradient-to-br from-green-400 to-emerald-600 shadow-lg sm:h-3 sm:w-3 md:h-3.5 md:w-3.5"
                 >
                   <div className="absolute inset-0 animate-ping rounded-full bg-green-300 opacity-20"></div>
                 </motion.div>
               </div>
 
               <div
-                className={`relative flex flex-1 items-center overflow-hidden rounded-2xl px-2 py-2 font-mono text-xs backdrop-blur-sm sm:px-4 sm:py-3 sm:text-sm ${
-                  isDark
-                    ? "border border-gray-500/50 bg-gray-700/70 text-gray-200"
-                    : "border border-gray-300/50 bg-white/80 text-gray-700 shadow-inner"
-                }`}
+                className={`relative flex flex-1 items-center overflow-hidden rounded-lg px-2 py-1.5 font-mono text-[9px] backdrop-blur-sm sm:rounded-xl sm:px-2.5 sm:py-2 sm:text-[10px] md:rounded-xl md:px-3 md:py-2 md:text-xs ${isDark
+                  ? "border border-gray-500/50 bg-gray-700/70 text-gray-200"
+                  : "border border-gray-300/50 bg-white/80 text-gray-700 shadow-inner"
+                  }`}
               >
                 <div className="absolute inset-0 animate-pulse bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
                 <motion.span
                   animate={{ opacity: [0.5, 1, 0.5] }}
                   transition={{ duration: 2, repeat: Infinity }}
-                  className="mr-3 text-lg text-emerald-500"
+                  className="mr-1.5 text-xs text-emerald-500 sm:mr-2 sm:text-sm md:text-base"
                 >
                   🔒
                 </motion.span>
-                <span className="font-semibold text-blue-500">github.com</span>
-                <span className="mx-1 text-gray-400">/</span>
-                <span className="font-bold text-purple-500">recodehive</span>
-                <span className="mx-1 text-gray-400">/</span>
+                <span className="truncate font-semibold text-blue-500">
+                  github.com
+                </span>
+                <span className="mx-0.5 text-gray-400">/</span>
+                <span className="truncate font-bold text-purple-500">
+                  recodehive
+                </span>
+                <span className="mx-0.5 text-gray-400">/</span>
                 <motion.span
                   key={activeItem}
                   initial={{ opacity: 0, x: 20 }}
                   animate={{ opacity: 1, x: 0 }}
-                  className="font-semibold text-cyan-500"
+                  className="truncate font-semibold text-cyan-500"
                 >
                   {items[activeItem].title.toLowerCase().replace(/\s+/g, "-")}
                 </motion.span>
@@ -358,22 +303,21 @@ const SelectComponent = ({
               <motion.div
                 animate={{ scale: [1, 1.05, 1] }}
                 transition={{ duration: 2, repeat: Infinity }}
-                className={`ml-2 flex items-center rounded-xl px-2 py-1 text-[10px] font-bold backdrop-blur-sm sm:ml-4 sm:px-4 sm:py-2 sm:text-xs ${
-                  isDark
-                    ? "bg-gradient-to-r from-emerald-600 to-green-600 text-white shadow-lg"
-                    : "bg-gradient-to-r from-emerald-100 to-green-100 text-emerald-700 shadow-md"
-                }`}
+                className={`ml-1.5 flex items-center rounded-md px-1.5 py-0.5 text-[7px] font-bold backdrop-blur-sm sm:ml-2 sm:rounded-lg sm:px-2 sm:py-1 sm:text-[8px] md:ml-2.5 md:px-2.5 md:py-1 md:text-[10px] lg:ml-3 lg:px-3 lg:py-1.5 lg:text-xs ${isDark
+                  ? "bg-gradient-to-r from-emerald-600 to-green-600 text-white shadow-lg"
+                  : "bg-gradient-to-r from-emerald-100 to-green-100 text-emerald-700 shadow-md"
+                  }`}
               >
                 <motion.div
                   animate={{ scale: [1, 1.3, 1] }}
                   transition={{ duration: 1, repeat: Infinity }}
-                  className="mr-2 h-2 w-2 rounded-full bg-emerald-400"
+                  className="mr-1 h-1 w-1 rounded-full bg-emerald-400 sm:mr-1.5 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2"
                 ></motion.div>
                 LIVE
               </motion.div>
             </div>
 
-            {/* Ultra-Enhanced Screenshot Display */}
+            {/* Screenshot or Live Site */}
             <div className="relative h-full bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-purple-900">
               <motion.div
                 initial={{ opacity: 0, scale: 1.1, rotateX: 10 }}
@@ -382,14 +326,13 @@ const SelectComponent = ({
                 className="group relative h-full overflow-hidden"
               >
                 {items[activeItem].title === "Awesome GitHub Profile" ||
-                items[activeItem].title === "Machine Learning Repository" ? (
-                  /* Auto-scrolling Website Iframe */
+                  items[activeItem].title === "Machine Learning Repository" ? (
                   <motion.div
                     className="relative h-full w-full cursor-pointer overflow-hidden"
                     onClick={() =>
                       window.open(
                         getWebsiteUrl(items[activeItem].title),
-                        "_blank",
+                        "_blank"
                       )
                     }
                   >
@@ -398,7 +341,7 @@ const SelectComponent = ({
                       src={
                         PROJECT_URLS[items[activeItem].title] || "about:blank"
                       }
-                      className="ourprojects-iframe pointer-events-none h-[220%] w-full origin-top border-0 sm:h-[200%]"
+                      className="ourprojects-iframe pointer-events-none h-[220%] w-full origin-top border-0 sm:h-[210%] md:h-[200%]"
                       initial={{ opacity: 0, y: 0 }}
                       animate={{
                         opacity: 1,
@@ -406,20 +349,25 @@ const SelectComponent = ({
                       }}
                       transition={{
                         opacity: { duration: 0.8 },
-                        y: { duration: 8, repeat: Infinity, ease: "easeInOut" },
+                        y: {
+                          duration: 8,
+                          repeat: Infinity,
+                          ease: "easeInOut",
+                        },
                       }}
                       sandbox="allow-scripts allow-popups allow-forms"
+                      title={`Preview of ${items[activeItem].title}`}
+                      loading="lazy"
                     />
                   </motion.div>
                 ) : (
-                  /* Interactive Screenshot for other projects */
                   <motion.div
                     className="relative h-full w-full cursor-pointer"
                     whileHover="hover"
                     onClick={() =>
                       window.open(
                         getWebsiteUrl(items[activeItem].title),
-                        "_blank",
+                        "_blank"
                       )
                     }
                   >
@@ -433,7 +381,6 @@ const SelectComponent = ({
                       transition={{ duration: 2, ease: "easeInOut" }}
                     />
 
-                    {/* Click to Visit Overlay */}
                     <div className="absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-300 hover:bg-black/20">
                       <motion.div
                         initial={{ opacity: 0, scale: 0.8 }}
@@ -448,23 +395,30 @@ const SelectComponent = ({
 
                 {/* Dynamic Indicator */}
                 <motion.div
-                  className={`ourprojects-live-indicator absolute right-4 bottom-4 flex items-center rounded-full px-3 py-2 text-xs font-medium text-white backdrop-blur-sm ${
-                    items[activeItem].title === "Awesome GitHub Profile" ||
+                  className={`ourprojects-live-indicator absolute right-2 bottom-2 flex items-center rounded-full px-2 py-1 text-[9px] font-medium text-white backdrop-blur-sm sm:right-2.5 sm:bottom-2.5 sm:px-2.5 sm:py-1.5 sm:text-[10px] md:right-3 md:bottom-3 md:px-3 md:py-2 md:text-xs ${items[activeItem].title === "Awesome GitHub Profile" ||
                     items[activeItem].title === "Machine Learning Repository"
-                      ? "bg-green-600/90"
-                      : "bg-blue-600/90"
-                  }`}
+                    ? "bg-green-600/90"
+                    : "bg-blue-600/90"
+                    }`}
                   animate={{ opacity: [0.7, 1, 0.7] }}
                   transition={{ duration: 2, repeat: Infinity }}
                 >
                   {items[activeItem].title === "Awesome GitHub Profile" ||
-                  items[activeItem].title === "Machine Learning Repository" ? (
+                    items[activeItem].title === "Machine Learning Repository" ? (
                     <>
-                      <div className="mr-2 h-2 w-2 animate-pulse rounded-full bg-green-300"></div>
-                      Auto-scrolling Live Site
+                      <div className="mr-1 h-1 w-1 animate-pulse rounded-full bg-green-300 sm:mr-1.5 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2"></div>
+                      <span className="hidden md:inline">
+                        Auto-scrolling Live Site
+                      </span>
+                      <span className="md:hidden">Live</span>
                     </>
                   ) : (
-                    "👆 Hover & Click to Explore"
+                    <>
+                      <span className="hidden md:inline">
+                        👆 Hover & Click to Explore
+                      </span>
+                      <span className="md:hidden">👆 Tap</span>
+                    </>
                   )}
                 </motion.div>
 
@@ -515,7 +469,7 @@ const SelectComponent = ({
 
             return (
               <motion.div
-                key={item.id || index}
+                key={item.title}
                 initial={{ opacity: 0, scale: 0, rotateY: -90 }}
                 animate={{
                   opacity: 0.3,
@@ -544,18 +498,16 @@ const SelectComponent = ({
                     repeat: Infinity,
                     ease: "easeInOut",
                   }}
-                  className={`h-36 w-56 overflow-hidden rounded-2xl border shadow-2xl backdrop-blur-md ${
-                    isDark
-                      ? "border-purple-500/30 bg-gray-800/70"
-                      : "border-blue-400/30 bg-white/70"
-                  }`}
+                  className={`h-36 w-56 overflow-hidden rounded-2xl border shadow-2xl backdrop-blur-md ${isDark
+                    ? "border-purple-500/30 bg-gray-800/70"
+                    : "border-blue-400/30 bg-white/70"
+                    }`}
                 >
                   <div
-                    className={`flex h-8 items-center border-b px-3 ${
-                      isDark
-                        ? "border-gray-600/50 bg-gray-700/80"
-                        : "border-gray-300/50 bg-gray-100/80"
-                    }`}
+                    className={`flex h-8 items-center border-b px-3 ${isDark
+                      ? "border-gray-600/50 bg-gray-700/80"
+                      : "border-gray-300/50 bg-gray-100/80"
+                      }`}
                   >
                     <div className="flex space-x-1.5">
                       <div className="h-2.5 w-2.5 rounded-full bg-red-400 opacity-80"></div>

From acafb041e8cf93f9f33c044d78331afd6a7553e6 Mon Sep 17 00:00:00 2001
From: yashksaini-coder <yashksaini89@gmail.com>
Date: Sat, 15 Nov 2025 13:45:53 +0530
Subject: [PATCH 3/4] Review completed

---
 package-lock.json | 50 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cf9df4f0..89fbbbad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -280,6 +280,7 @@
       "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.40.0.tgz",
       "integrity": "sha512-nlr/MMgoLNUHcfWC5Ns2ENrzKx9x51orPc6wJ8Ignv1DsrUmKm0LUih+Tj3J+kxYofzqQIQRU495d4xn3ozMbg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@algolia/client-common": "5.40.0",
         "@algolia/requester-browser-xhr": "5.40.0",
@@ -440,6 +441,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -2274,6 +2276,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -2296,6 +2299,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2405,6 +2409,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -2826,6 +2831,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -3813,6 +3819,7 @@
       "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.9.2.tgz",
       "integrity": "sha512-C5wZsGuKTY8jEYsqdxhhFOe1ZDjH0uIYJ9T/jebHwkyxqnr4wW0jTkB72OMqNjsoQRcb0JN3PcSeTwFlVgzCZg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@docusaurus/core": "3.9.2",
         "@docusaurus/logger": "3.9.2",
@@ -5921,6 +5928,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
       "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -6193,6 +6201,7 @@
       "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.13.tgz",
       "integrity": "sha512-GfiI1JxJ7ecluEmDjPzseRXk/PX31hS7+tjgBopL7XjB2hLUdR+0FTMXy2Q3/hXezypDvU6or7gVFizDESrkXw==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@firebase/component": "0.6.4",
         "@firebase/logger": "0.4.0",
@@ -6250,6 +6259,7 @@
       "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.13.tgz",
       "integrity": "sha512-j6ANZaWjeVy5zg6X7uiqh6lM6o3n3LD1+/SJFNs9V781xyryyZWXe+tmnWNWPkP086QfJoNkWN9pMQRqSG4vMg==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@firebase/app": "0.9.13",
         "@firebase/component": "0.6.4",
@@ -6262,7 +6272,8 @@
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.0.tgz",
       "integrity": "sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q==",
-      "license": "Apache-2.0"
+      "license": "Apache-2.0",
+      "peer": true
     },
     "node_modules/@firebase/auth": {
       "version": "0.23.2",
@@ -6672,6 +6683,7 @@
       "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz",
       "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -7288,6 +7300,7 @@
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz",
       "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/mdx": "^2.0.0"
       },
@@ -7950,6 +7963,7 @@
       "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
       "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
         "@svgr/babel-preset": "8.1.0",
@@ -8466,7 +8480,8 @@
         }
       ],
       "hasInstallScript": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@tsparticles/interaction-external-attract": {
       "version": "3.9.1",
@@ -9419,6 +9434,7 @@
       "integrity": "sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -9596,6 +9612,7 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -10054,6 +10071,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -10139,6 +10157,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -10184,6 +10203,7 @@
       "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.40.0.tgz",
       "integrity": "sha512-a9aIL2E3Z7uYUPMCmjMFFd5MWhn+ccTubEvnMy7rOTZCB62dXBJtz0R5BZ/TPuX3R9ocBsgWuAbGWQ+Ph4Fmlg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@algolia/abtesting": "1.6.0",
         "@algolia/client-abtesting": "5.40.0",
@@ -10942,6 +10962,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -11296,6 +11317,7 @@
       "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz",
       "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@chevrotain/cst-dts-gen": "11.0.3",
         "@chevrotain/gast": "11.0.3",
@@ -12186,6 +12208,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -12516,6 +12539,7 @@
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz",
       "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -12937,6 +12961,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -13530,7 +13555,8 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/embla-carousel-autoplay": {
       "version": "8.6.0",
@@ -13916,6 +13942,7 @@
       "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -14748,6 +14775,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -14875,6 +14903,7 @@
       "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.23.0.tgz",
       "integrity": "sha512-/4lUVY0lUvBDIaeY1q6dUYhS8Sd18Qb9CgWkPZICUo9IXpJNCEagfNZXBBFCkMTTN5L5gx2Hjr27y21a9NzUcA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@firebase/analytics": "0.10.0",
         "@firebase/analytics-compat": "0.2.6",
@@ -21081,6 +21110,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -21854,6 +21884,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -22757,6 +22788,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -23370,6 +23402,7 @@
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -23776,6 +23809,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -23788,6 +23822,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -23853,6 +23888,7 @@
       "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-6.0.0.tgz",
       "integrity": "sha512-YMMxTUQV/QFSnbgrP3tjDzLHRg7vsbMn8e9HAa8o/1iXoiomo48b7sk/kkmWEuWNDPJVlKSJRB6Y2fHqdJk+SQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/react": "*"
       },
@@ -23881,6 +23917,7 @@
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
       "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
@@ -26376,7 +26413,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
@@ -26551,6 +26589,7 @@
       "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -26945,6 +26984,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -27217,6 +27257,7 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.102.1.tgz",
       "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",
@@ -28035,6 +28076,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

From 04614e05f65d77ec52112524c27ee63c38794e34 Mon Sep 17 00:00:00 2001
From: yashksaini-coder <yashksaini89@gmail.com>
Date: Mon, 17 Nov 2025 18:44:23 +0530
Subject: [PATCH 4/4] Enhance ourProjects component by adding new project
 links, implementing iframe support for live previews, and refining the UI
 with improved animations and styles.

---
 src/components/ourProjects.tsx | 423 +++++++++------------------------
 1 file changed, 112 insertions(+), 311 deletions(-)

diff --git a/src/components/ourProjects.tsx b/src/components/ourProjects.tsx
index cbd1e686..b96d9084 100644
--- a/src/components/ourProjects.tsx
+++ b/src/components/ourProjects.tsx
@@ -21,8 +21,17 @@ const PROJECT_URLS: Record<string, string> = {
   "Awesome GitHub Profile":
     "https://recodehive.github.io/awesome-github-profiles/",
   "Machine Learning Repository": "https://machine-learning-repos.vercel.app/",
+  "Stack overflow Analysis": "https://github.com/recodehive/Stackoverflow-Analysis",
+  "Scrape ML Project": "https://github.com/recodehive/Scrape-ML-Project",
+  "Opensource Project": "https://github.com/recodehive/Opensource-practice",
 };
 
+// Projects that support live iframe preview (not GitHub repos due to X-Frame-Options)
+const IFRAME_PROJECTS = [
+  "Awesome GitHub Profile",
+  "Machine Learning Repository",
+];
+
 const getWebsiteUrl = (title: string) => {
   return PROJECT_URLS[title] || "https://github.com/recodehive";
 };
@@ -157,178 +166,103 @@ const SelectComponent = ({
       </div>
 
       <div className="ourprojects-embed-container relative col-span-1 min-h-[400px] overflow-hidden p-2 sm:min-h-[450px] sm:p-2.5 md:col-span-8 md:min-h-[500px] md:p-4 lg:min-h-[600px] lg:p-6">
-        {/* Animated Mesh Background */}
-        <div className="absolute inset-0 bg-gradient-to-br from-purple-600/30 via-blue-600/30 to-cyan-500/30">
-          <div className="absolute inset-0 animate-pulse bg-[radial-gradient(circle_at_50%_50%,rgba(120,119,198,0.3),transparent_50%)]"></div>
-          <div
-            className="absolute inset-0 animate-spin bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,rgba(147,51,234,0.1)_60deg,transparent_120deg)]"
-            style={{ animationDuration: "20s" }}
-          ></div>
-        </div>
-
-        {/* Particle System */}
-        <div className="absolute inset-0 overflow-hidden">
-          {[...Array(12)].map((_, i) => (
-            <motion.div
-              key={i}
-              className="absolute h-1 w-1 rounded-full bg-gradient-to-r from-purple-400 to-cyan-400"
-              animate={{
-                x: [0, 100, 0],
-                y: [0, -50, 0],
-                opacity: [0, 1, 0],
-                scale: [0, 1.5, 0],
-              }}
-              transition={{
-                duration: 3 + i * 0.5,
-                repeat: Infinity,
-                delay: i * 0.3,
-              }}
-              style={{
-                left: `${10 + i * 7}%`,
-                top: `${20 + (i % 3) * 20}%`,
-              }}
-            />
-          ))}
-        </div>
-
-        {/* Advanced Floating Icons */}
-        <motion.div
-          animate={{ y: [-10, 10, -10], rotate: [0, 5, 0] }}
-          transition={{ duration: 4, repeat: Infinity }}
-          className="absolute top-4 right-4 hidden h-12 w-12 items-center justify-center rounded-xl border border-white/20 bg-gradient-to-br from-purple-500 via-blue-500 to-cyan-500 shadow-2xl backdrop-blur-sm sm:top-6 sm:right-6 sm:h-14 sm:w-14 sm:rounded-2xl md:flex md:top-8 md:right-8 md:h-16 md:w-16"
-        >
-          <svg
-            className="h-8 w-8 text-white"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-          </svg>
-          <div className="absolute -inset-1 animate-pulse rounded-2xl bg-gradient-to-r from-purple-500 to-cyan-500 opacity-30 blur"></div>
-        </motion.div>
-
-        <motion.div
-          animate={{ x: [-5, 5, -5], rotate: [0, -10, 0] }}
-          transition={{ duration: 3, repeat: Infinity }}
-          className="absolute top-16 left-4 hidden h-10 w-10 items-center justify-center rounded-lg border border-white/20 bg-gradient-to-br from-emerald-400 via-blue-500 to-purple-600 shadow-xl backdrop-blur-sm sm:top-20 sm:left-6 sm:h-12 sm:w-12 sm:rounded-xl md:flex md:left-8"
-        >
-          <span className="text-base text-white sm:text-lg md:text-xl">⚡</span>
-        </motion.div>
-
-        <motion.div
-          animate={{ scale: [1, 1.2, 1], opacity: [0.7, 1, 0.7] }}
-          transition={{ duration: 2, repeat: Infinity }}
-          className="absolute right-12 bottom-16 hidden h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-gradient-to-r from-pink-400 via-purple-500 to-indigo-600 shadow-lg backdrop-blur-sm sm:right-14 sm:bottom-20 sm:h-10 sm:w-10 md:flex md:right-16 md:bottom-20"
-        >
-          <span className="text-xs text-white sm:text-sm">🚀</span>
-        </motion.div>
-
-        {/* Holographic Main Browser */}
+        {/* Clean Preview Card */}
         <motion.div
           key={activeItem}
-          initial={{ opacity: 0, rotateY: -20, scale: 0.8, z: -100 }}
-          animate={{ opacity: 1, rotateY: 0, scale: 1, z: 0 }}
-          transition={{ duration: 0.8, ease: "easeOut" }}
-          className="perspective-1000 relative z-10"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
+          className="relative h-full w-full"
         >
           <div
-            className={`md:hover:rotateY-5 group ourprojects-embed-card h-full min-h-[380px] transform overflow-hidden rounded-lg border-2 shadow-2xl backdrop-blur-md transition-all duration-700 sm:min-h-[430px] sm:rounded-xl md:min-h-[480px] md:hover:scale-[1.02] lg:min-h-[580px] lg:rounded-2xl ${isDark
-              ? "border-purple-500/50 bg-gray-900/95 shadow-purple-500/25"
-              : "border-blue-400/50 bg-white/95 shadow-blue-500/25"
+            className={`ourprojects-embed-card h-full min-h-[380px] overflow-hidden rounded-lg border shadow-xl transition-all duration-300 sm:min-h-[430px] sm:rounded-xl md:min-h-[480px] md:hover:shadow-2xl lg:min-h-[580px] lg:rounded-2xl ${isDark
+              ? "border-gray-700/50 bg-gray-900 shadow-gray-900/50"
+              : "border-gray-200 bg-white shadow-gray-200/50"
               }`}
           >
-            {/* Holographic Border Effect */}
-            <div className="absolute -inset-0.5 rounded-3xl bg-gradient-to-r from-purple-500 via-blue-500 to-cyan-500 opacity-20 blur transition-opacity duration-500 group-hover:opacity-40"></div>
 
-            {/* Premium Browser Header */}
+            {/* Clean Browser Header */}
             <div
-              className={`relative flex items-center border-b px-2.5 py-2 backdrop-blur-xl sm:px-3 sm:py-2.5 md:px-4 md:py-3 lg:px-5 lg:py-3.5 ${isDark
-                ? "border-gray-600/50 bg-gray-800/90"
-                : "border-gray-300/50 bg-gray-50/90"
+              className={`flex items-center justify-between border-b px-3 py-2.5 sm:px-4 sm:py-3 md:px-5 md:py-3.5 ${isDark
+                ? "border-gray-700 bg-gray-800/50"
+                : "border-gray-200 bg-gray-50"
                 }`}
             >
-              <div className="mr-2 flex space-x-1.5 sm:mr-3 sm:space-x-2 md:mr-4 md:space-x-2.5">
-                <motion.div
-                  whileHover={{ scale: 1.2, rotate: 180 }}
-                  className="relative h-2.5 w-2.5 rounded-full bg-gradient-to-br from-red-400 to-red-600 shadow-lg sm:h-3 sm:w-3 md:h-3.5 md:w-3.5"
-                >
-                  <div className="absolute inset-0 animate-ping rounded-full bg-red-300 opacity-20"></div>
-                </motion.div>
-                <motion.div
-                  whileHover={{ scale: 1.2, rotate: -180 }}
-                  className="relative h-2.5 w-2.5 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 shadow-lg sm:h-3 sm:w-3 md:h-3.5 md:w-3.5"
-                >
-                  <div className="absolute inset-0 animate-ping rounded-full bg-yellow-300 opacity-20"></div>
-                </motion.div>
-                <motion.div
-                  whileHover={{ scale: 1.2, rotate: 360 }}
-                  className="relative h-2.5 w-2.5 rounded-full bg-gradient-to-br from-green-400 to-emerald-600 shadow-lg sm:h-3 sm:w-3 md:h-3.5 md:w-3.5"
+              <div className="flex items-center gap-2 flex-1 min-w-0">
+                <div className="flex gap-1.5 shrink-0">
+                  <div className="h-2.5 w-2.5 rounded-full bg-red-400 sm:h-3 sm:w-3"></div>
+                  <div className="h-2.5 w-2.5 rounded-full bg-yellow-400 sm:h-3 sm:w-3"></div>
+                  <div className="h-2.5 w-2.5 rounded-full bg-green-400 sm:h-3 sm:w-3"></div>
+                </div>
+                <div
+                  className={`flex flex-1 items-center overflow-hidden rounded-md px-2 py-1.5 font-mono text-[9px] sm:px-2.5 sm:py-2 sm:text-[10px] md:px-3 md:py-2 md:text-xs ${isDark
+                    ? "bg-gray-700/50 text-gray-300"
+                    : "bg-white text-gray-700 border border-gray-200"
+                    }`}
                 >
-                  <div className="absolute inset-0 animate-ping rounded-full bg-green-300 opacity-20"></div>
-                </motion.div>
-              </div>
+                  <span className="mr-1.5 text-emerald-500 sm:mr-2">🔒</span>
+                  {(() => {
+                    const url = getWebsiteUrl(items[activeItem].title);
+                    const urlObj = new URL(url);
+                    const pathParts = urlObj.pathname.split("/").filter(Boolean);
 
-              <div
-                className={`relative flex flex-1 items-center overflow-hidden rounded-lg px-2 py-1.5 font-mono text-[9px] backdrop-blur-sm sm:rounded-xl sm:px-2.5 sm:py-2 sm:text-[10px] md:rounded-xl md:px-3 md:py-2 md:text-xs ${isDark
-                  ? "border border-gray-500/50 bg-gray-700/70 text-gray-200"
-                  : "border border-gray-300/50 bg-white/80 text-gray-700 shadow-inner"
-                  }`}
-              >
-                <div className="absolute inset-0 animate-pulse bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
-                <motion.span
-                  animate={{ opacity: [0.5, 1, 0.5] }}
-                  transition={{ duration: 2, repeat: Infinity }}
-                  className="mr-1.5 text-xs text-emerald-500 sm:mr-2 sm:text-sm md:text-base"
-                >
-                  🔒
-                </motion.span>
-                <span className="truncate font-semibold text-blue-500">
-                  github.com
-                </span>
-                <span className="mx-0.5 text-gray-400">/</span>
-                <span className="truncate font-bold text-purple-500">
-                  recodehive
-                </span>
-                <span className="mx-0.5 text-gray-400">/</span>
-                <motion.span
-                  key={activeItem}
-                  initial={{ opacity: 0, x: 20 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  className="truncate font-semibold text-cyan-500"
-                >
-                  {items[activeItem].title.toLowerCase().replace(/\s+/g, "-")}
-                </motion.span>
+                    if (urlObj.hostname.includes("github.com")) {
+                      return (
+                        <>
+                          <span className="truncate font-semibold text-blue-500">
+                            github.com
+                          </span>
+                          <span className="mx-0.5 text-gray-400">/</span>
+                          <span className="truncate font-bold text-purple-500">
+                            {pathParts[0] || "recodehive"}
+                          </span>
+                          {pathParts[1] && (
+                            <>
+                              <span className="mx-0.5 text-gray-400">/</span>
+                              <span className="truncate font-semibold text-cyan-500">
+                                {pathParts[1]}
+                              </span>
+                            </>
+                          )}
+                        </>
+                      );
+                    } else {
+                      return (
+                        <>
+                          <span className="truncate font-semibold text-blue-500">
+                            {urlObj.hostname.replace("www.", "")}
+                          </span>
+                          {pathParts.length > 0 && (
+                            <>
+                              <span className="mx-0.5 text-gray-400">/</span>
+                              <span className="truncate font-semibold text-cyan-500">
+                                {pathParts.join("/")}
+                              </span>
+                            </>
+                          )}
+                        </>
+                      );
+                    }
+                  })()}
+                </div>
               </div>
-
-              <motion.div
-                animate={{ scale: [1, 1.05, 1] }}
-                transition={{ duration: 2, repeat: Infinity }}
-                className={`ml-1.5 flex items-center rounded-md px-1.5 py-0.5 text-[7px] font-bold backdrop-blur-sm sm:ml-2 sm:rounded-lg sm:px-2 sm:py-1 sm:text-[8px] md:ml-2.5 md:px-2.5 md:py-1 md:text-[10px] lg:ml-3 lg:px-3 lg:py-1.5 lg:text-xs ${isDark
-                  ? "bg-gradient-to-r from-emerald-600 to-green-600 text-white shadow-lg"
-                  : "bg-gradient-to-r from-emerald-100 to-green-100 text-emerald-700 shadow-md"
-                  }`}
-              >
-                <motion.div
-                  animate={{ scale: [1, 1.3, 1] }}
-                  transition={{ duration: 1, repeat: Infinity }}
-                  className="mr-1 h-1 w-1 rounded-full bg-emerald-400 sm:mr-1.5 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2"
-                ></motion.div>
-                LIVE
-              </motion.div>
+              {IFRAME_PROJECTS.includes(items[activeItem].title) && (
+                <div className={`ml-2 flex items-center gap-1.5 rounded-md px-2 py-1 text-[8px] font-semibold sm:px-2.5 sm:py-1.5 sm:text-[9px] md:px-3 md:text-[10px] ${isDark
+                  ? "bg-emerald-600/20 text-emerald-400 border border-emerald-600/30"
+                  : "bg-emerald-50 text-emerald-700 border border-emerald-200"
+                  }`}>
+                  <div className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse sm:h-2 sm:w-2"></div>
+                  <span className="hidden sm:inline">LIVE</span>
+                </div>
+              )}
             </div>
 
-            {/* Screenshot or Live Site */}
-            <div className="relative h-full bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-purple-900">
-              <motion.div
-                initial={{ opacity: 0, scale: 1.1, rotateX: 10 }}
-                animate={{ opacity: 1, scale: 1, rotateX: 0 }}
-                transition={{ duration: 1, ease: "easeOut" }}
-                className="group relative h-full overflow-hidden"
-              >
-                {items[activeItem].title === "Awesome GitHub Profile" ||
-                  items[activeItem].title === "Machine Learning Repository" ? (
-                  <motion.div
-                    className="relative h-full w-full cursor-pointer overflow-hidden"
+            {/* Preview Content */}
+            <div className={`relative h-full overflow-hidden ${isDark ? "bg-gray-900" : "bg-white"}`}>
+              <div className="relative h-full w-full">
+                {IFRAME_PROJECTS.includes(items[activeItem].title) ? (
+                  <div
+                    className="relative h-full w-full cursor-pointer overflow-hidden group"
                     onClick={() =>
                       window.open(
                         getWebsiteUrl(items[activeItem].title),
@@ -350,20 +284,22 @@ const SelectComponent = ({
                       transition={{
                         opacity: { duration: 0.8 },
                         y: {
-                          duration: 8,
+                          duration: 10,
                           repeat: Infinity,
                           ease: "easeInOut",
                         },
                       }}
-                      sandbox="allow-scripts allow-popups allow-forms"
+                      sandbox="allow-scripts allow-popups allow-forms allow-same-origin allow-top-navigation-by-user-activation allow-presentation"
+                      allow="fullscreen; autoplay; encrypted-media; picture-in-picture"
                       title={`Preview of ${items[activeItem].title}`}
                       loading="lazy"
+                      referrerPolicy="no-referrer-when-downgrade"
                     />
-                  </motion.div>
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+                  </div>
                 ) : (
-                  <motion.div
-                    className="relative h-full w-full cursor-pointer"
-                    whileHover="hover"
+                  <div
+                    className="relative h-full w-full cursor-pointer group overflow-hidden"
                     onClick={() =>
                       window.open(
                         getWebsiteUrl(items[activeItem].title),
@@ -372,162 +308,27 @@ const SelectComponent = ({
                     }
                   >
                     <motion.img
+                      key={activeItem}
                       src={items[activeItem].image}
                       alt={items[activeItem].title}
-                      className="h-auto min-h-full w-full object-cover object-top"
-                      variants={{
-                        hover: { y: -100, scale: 1.05 },
-                      }}
-                      transition={{ duration: 2, ease: "easeInOut" }}
+                      className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{ opacity: { duration: 0.5 } }}
                     />
-
-                    <div className="absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-300 hover:bg-black/20">
-                      <motion.div
-                        initial={{ opacity: 0, scale: 0.8 }}
-                        whileHover={{ opacity: 1, scale: 1 }}
-                        className="rounded-2xl bg-white/90 px-6 py-3 font-semibold text-gray-900 shadow-xl backdrop-blur-sm"
-                      >
-                        🔗 Click to Visit Repository
-                      </motion.div>
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                      <div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
+                        <div className="rounded-lg bg-white/95 px-4 py-2.5 font-semibold text-gray-900 shadow-lg backdrop-blur-sm text-sm sm:text-base">
+                          🔗 Click to Visit Repository
+                        </div>
+                      </div>
                     </div>
-                  </motion.div>
+                  </div>
                 )}
-
-                {/* Dynamic Indicator */}
-                <motion.div
-                  className={`ourprojects-live-indicator absolute right-2 bottom-2 flex items-center rounded-full px-2 py-1 text-[9px] font-medium text-white backdrop-blur-sm sm:right-2.5 sm:bottom-2.5 sm:px-2.5 sm:py-1.5 sm:text-[10px] md:right-3 md:bottom-3 md:px-3 md:py-2 md:text-xs ${items[activeItem].title === "Awesome GitHub Profile" ||
-                    items[activeItem].title === "Machine Learning Repository"
-                    ? "bg-green-600/90"
-                    : "bg-blue-600/90"
-                    }`}
-                  animate={{ opacity: [0.7, 1, 0.7] }}
-                  transition={{ duration: 2, repeat: Infinity }}
-                >
-                  {items[activeItem].title === "Awesome GitHub Profile" ||
-                    items[activeItem].title === "Machine Learning Repository" ? (
-                    <>
-                      <div className="mr-1 h-1 w-1 animate-pulse rounded-full bg-green-300 sm:mr-1.5 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2"></div>
-                      <span className="hidden md:inline">
-                        Auto-scrolling Live Site
-                      </span>
-                      <span className="md:hidden">Live</span>
-                    </>
-                  ) : (
-                    <>
-                      <span className="hidden md:inline">
-                        👆 Hover & Click to Explore
-                      </span>
-                      <span className="md:hidden">👆 Tap</span>
-                    </>
-                  )}
-                </motion.div>
-
-                {/* Holographic Overlay */}
-                <div className="ourprojects-overlay pointer-events-none absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent">
-                  <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-cyan-500/10"></div>
-                </div>
-              </motion.div>
+              </div>
             </div>
           </div>
         </motion.div>
-
-        {/* 3D Floating Background Mockups */}
-        <div className="pointer-events-none absolute inset-0 hidden md:block">
-          {items.map((item, index) => {
-            if (index === activeItem) return null;
-            const positions = [
-              {
-                top: "8%",
-                left: "2%",
-                rotate: "-15deg",
-                scale: "0.25",
-                z: "-50px",
-              },
-              {
-                top: "65%",
-                left: "5%",
-                rotate: "12deg",
-                scale: "0.22",
-                z: "-30px",
-              },
-              {
-                top: "15%",
-                right: "3%",
-                rotate: "18deg",
-                scale: "0.28",
-                z: "-40px",
-              },
-              {
-                bottom: "12%",
-                right: "6%",
-                rotate: "-10deg",
-                scale: "0.20",
-                z: "-60px",
-              },
-            ];
-            const pos = positions[index % positions.length];
-
-            return (
-              <motion.div
-                key={item.title}
-                initial={{ opacity: 0, scale: 0, rotateY: -90 }}
-                animate={{
-                  opacity: 0.3,
-                  scale: parseFloat(pos.scale),
-                  rotateY: 0,
-                }}
-                transition={{
-                  delay: 1 + index * 0.2,
-                  duration: 0.8,
-                  ease: "easeOut",
-                }}
-                className="absolute transform-gpu"
-                style={{
-                  ...pos,
-                  transform: `rotate(${pos.rotate}) scale(${pos.scale}) translateZ(${pos.z})`,
-                  filter: "blur(0.5px)",
-                }}
-              >
-                <motion.div
-                  animate={{
-                    y: [-5, 5, -5],
-                    rotateY: [0, 5, 0],
-                  }}
-                  transition={{
-                    duration: 4 + index,
-                    repeat: Infinity,
-                    ease: "easeInOut",
-                  }}
-                  className={`h-36 w-56 overflow-hidden rounded-2xl border shadow-2xl backdrop-blur-md ${isDark
-                    ? "border-purple-500/30 bg-gray-800/70"
-                    : "border-blue-400/30 bg-white/70"
-                    }`}
-                >
-                  <div
-                    className={`flex h-8 items-center border-b px-3 ${isDark
-                      ? "border-gray-600/50 bg-gray-700/80"
-                      : "border-gray-300/50 bg-gray-100/80"
-                      }`}
-                  >
-                    <div className="flex space-x-1.5">
-                      <div className="h-2.5 w-2.5 rounded-full bg-red-400 opacity-80"></div>
-                      <div className="h-2.5 w-2.5 rounded-full bg-yellow-400 opacity-80"></div>
-                      <div className="h-2.5 w-2.5 rounded-full bg-green-400 opacity-80"></div>
-                    </div>
-                  </div>
-                  <div className="relative h-full">
-                    <img
-                      src={item.image}
-                      alt={item.title}
-                      className="h-full w-full object-cover opacity-70"
-                    />
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
-                  </div>
-                </motion.div>
-              </motion.div>
-            );
-          })}
-        </div>
       </div>
     </motion.div>
   );