first commit

components/ProjectCard.tsx

@@ -0,0 +1,51 @@
+import Image from 'next/image';
+
+import { Project } from '@/types';
+
+import styles from '@/styles/ProjectCard.module.css';
+
+interface ProjectCardProps {
+  project: Project;
+}
+
+const ProjectCard = ({ project }: ProjectCardProps) => {
+  return (
+    <a
+      href={project.link}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={styles.card}
+    >
+      <div className={styles.content}>
+        <div className={styles.logoWrapper}>
+          <Image
+            src={project.logo}
+            alt={`${project.title} logo`}
+            width={24}
+            height={24}
+            className={styles.logo}
+          />
+        </div>
+        <p className={styles.type}>{project.type}</p>
+        <h3 className={styles.title}>{project.title}</h3>
+        <p className={styles.description}>{project.description}</p>
+       
+        
+      </div>
+      <div className={styles.footer}>
+        <p className={styles.date}>{project.date}</p>
+        <p className={styles.status} data-status={project.status.toLowerCase()}>
+  {project.status}
+</p>
+      {/*   <p className={styles.skills}>{project.skills}</p> */}
+       
+      </div>
+      </a>
+  );
+};
+
+// Add hover effect to the card
+// Add a gradient overlay on hover
+    
+
+export default ProjectCard;