feat(portfolio): click-to-open project detail modal

Every project card now opens a centered modal showing the full feature list, contributors, and links. Uses createPortal to document.body so transforms on PageSection do not break fixed positioning. Shell styling matches ExperienceModal (backdrop blur, gradient bg, 720px max width, cinematic easing, cyan ambient glow). Interior accent colors vary by category (Featured/Community/Collab/Others). Subtle 'Click for details' hint on cards with detail content. Keyboard: Enter/Space opens, Esc closes, focus trap and body-scroll lock reused via useFocusTrap. Source and Live Demo links remain on the card and stop propagation so they do not trigger the modal.

Author: Sagargupta16

src/pages/portfolio/Portfolio.tsx

@@ -14,9 +14,12 @@ import { FILTERS, parseDate } from "./portfolioConstants";
 import type { ProjectWithCategory } from "./portfolioConstants";
 import ProjectTimeline from "./ProjectTimeline";
 import OpenSourceBanner from "./OpenSourceBanner";
+import ProjectModal from "./ProjectModal";
 
 const Portfolio = () => {
    const [activeFilter, setActiveFilter] = useState<string>("Featured");
+   const [selectedProject, setSelectedProject] =
+      useState<ProjectWithCategory | null>(null);
 
    const handleFilterChange = useCallback((filter: string) => {
       if (document.startViewTransition) {
@@ -94,6 +97,11 @@ const Portfolio = () => {
       otherProjects,
    ]);
 
+   const handleOpenProject = useCallback(
+      (project: ProjectWithCategory) => setSelectedProject(project),
+      [],
+   );
+
    return (
       <PageSection id="projects" title="Projects" subtitle="Things I've built">
          <div
@@ -176,11 +184,20 @@ const Portfolio = () => {
             </motion.div>
 
             {/* Vertical timeline */}
-            <ProjectTimeline projects={filteredProjects} isMobile={isMobile} />
+            <ProjectTimeline
+               projects={filteredProjects}
+               isMobile={isMobile}
+               onOpenProject={handleOpenProject}
+            />
 
             {/* Open Source Contributions Banner */}
             <OpenSourceBanner />
          </div>
+
+         <ProjectModal
+            project={selectedProject}
+            onClose={() => setSelectedProject(null)}
+         />
       </PageSection>
    );
 };

src/pages/portfolio/ProjectCard.tsx

@@ -12,22 +12,38 @@ import ProjectCardHeader from "./ProjectCardHeader";
 interface ProjectCardProps {
    data: ProjectWithCategory;
    index?: number;
+   onOpen?: () => void;
 }
 
-const ProjectCard = ({ data, index = 0 }: ProjectCardProps) => {
+const ProjectCard = ({ data, index = 0, onOpen }: ProjectCardProps) => {
    const hasGithub = data.github && data.github !== "" && data.github !== "#";
    const hasLive = data.live && data.live !== "" && data.live !== "#";
    const colors = CATEGORY_COLORS[data.category] || CATEGORY_COLORS.Others;
    const isFeatured = data.category === "Featured";
    const isCollab = data.category === "Collab";
 
+   const hasDetail =
+      (data.features?.length ?? 0) > 0 ||
+      (data.contributors?.length ?? 0) > 0 ||
+      Boolean(data.description);
+   const clickable = hasDetail && Boolean(onOpen);
+
+   const handleKey = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!clickable) return;
+      if (e.key === "Enter" || e.key === " ") {
+         e.preventDefault();
+         onOpen?.();
+      }
+   };
+
    return (
       <motion.div
          className="glass-card"
          style={{
             overflow: "hidden",
             display: "flex",
             flexDirection: "column",
+            cursor: clickable ? "pointer" : "default",
          }}
          layout
          variants={scaleRotateIn}
@@ -51,6 +67,13 @@ const ProjectCard = ({ data, index = 0 }: ProjectCardProps) => {
             y: -6,
             transition: { duration: 0.4, ease: [0.4, 0, 0.2, 1] },
          }}
+         onClick={clickable ? onOpen : undefined}
+         onKeyDown={clickable ? handleKey : undefined}
+         role={clickable ? "button" : undefined}
+         tabIndex={clickable ? 0 : undefined}
+         aria-label={
+            clickable ? `View details for ${data.title}` : undefined
+         }
       >
          {/* Accent top bar */}
          <div
@@ -116,6 +139,23 @@ const ProjectCard = ({ data, index = 0 }: ProjectCardProps) => {
                ))}
             </div>
 
+            {/* Click-for-details hint (subtle, shown only when there's real detail to see) */}
+            {clickable && (
+               <p
+                  style={{
+                     fontFamily: MONO_FONT,
+                     fontSize: 10,
+                     color: colors.accent,
+                     opacity: 0.7,
+                     marginBottom: 12,
+                     letterSpacing: "0.02em",
+                  }}
+                  aria-hidden="true"
+               >
+                  Click for details
+               </p>
+            )}
+
             {/* Links */}
             {(hasGithub || hasLive) && (
                <div

src/pages/portfolio/ProjectLink.tsx

@@ -19,6 +19,7 @@ const ProjectLink = ({
       href={href}
       target="_blank"
       rel="noopener noreferrer"
+      onClick={(e) => e.stopPropagation()}
       style={{
          display: "inline-flex",
          alignItems: "center",