refactor: clean up imports and remove unused hooks in expandable card…

… and projects section

frontend/src/components/root/expand-card.tsx

@@ -1,14 +1,12 @@
 'use client';
 import Image from 'next/image';
-import React, { useEffect, useId, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useOutsideClick } from '@/hooks/use-outside-click';
 import { X } from 'lucide-react';
 
 export function ExpandableCard({ projects }) {
   const [active, setActive] = useState(null);
   const [iframeUrl, setIframeUrl] = useState('');
-  const id = useId();
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -28,8 +26,6 @@ export function ExpandableCard({ projects }) {
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [active]);
 
-  useOutsideClick(ref, () => setActive(null));
-
   const getWebUrl = async (project) => {
     if (!project) return;
     console.log('project:', project);
@@ -59,6 +55,7 @@ export function ExpandableCard({ projects }) {
       <AnimatePresence mode="wait">
         {active && (
           <motion.div
+            onClick={() => setActive(null)}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}

frontend/src/components/root/projects-section.tsx

@@ -1,9 +1,5 @@
-import { gql, useQuery } from '@apollo/client';
-import Image from 'next/image';
-import { useState } from 'react';
-import { X } from 'lucide-react';
+import { useQuery } from '@apollo/client';
 import { FETCH_PUBLIC_PROJECTS } from '@/graphql/request';
-import path from 'path';
 import { ExpandableCard } from './expand-card';
 
 export function ProjectsSection() {