Added sorting

Author: FahadLive

data.json

@@ -36,7 +36,7 @@
       "projectName": "theDistant",
       "description": "Blog made with hugo",
       "tags": ["Hugo", "Blog"],
-      "githubLink": "https://github.com/anima-regem/theDistant.git",
+      "githubLink": "https://github.com/anima-regem/theDistant",
       "projectLink": "https://blog.animaregem.me/",
       "image": "https://i.postimg.cc/CL604mCv/Screenshot-from-2025-02-16-09-50-34.png"
     },
@@ -46,7 +46,7 @@
       "projectName": "Gaster",
       "description": "Who needs to go to Google Maps and search \"CNG Pumps Near Me\", when you can have an app for just that...",
       "tags": ["Flutter", "Dart", "Google Maps API", "CNG Pumps", "Gas Stations", "Mobile App", "Android", "iOS"],
-      "githubLink": "https://github.com/anima-regem/gaster.git",
+      "githubLink": "https://github.com/anima-regem/gaster",
       "projectLink": "https://github.com/anima-regem/gaster/releases/",
       "image": "https://media0.giphy.com/media/3ornjWylTTz6e0SHIs/200w.webp"
     },
@@ -56,7 +56,7 @@
       "projectName": "bootThief",
       "description": "Welcome to the most over-engineered way to get book recommendations since your local librarian got replaced by a coffee machine!",
       "tags": ["Svelte", "SvelteKit", "TailwindCSS", "Groq", "Book", "Recommendations", "Web App"],
-      "githubLink": "https://github.com/anima-regem/bookThief.git",
+      "githubLink": "https://github.com/anima-regem/bookThief",
       "projectLink": "https://book-thief-chi.vercel.app/",
       "image": "https://raw.githubusercontent.com/anima-regem/bookThief/main/static/favicon.png"
     },

src/App.tsx

@@ -1,6 +1,6 @@
 import Footer from "./components/footer";
 import Intro from "./components/intro";
-import ProjectsPage from "./components/projects";
+import ProjectsPage from "./components/projectsPage";
 
 const ProjectShowcase = () => {
   return (

src/components/projectCard.tsx

@@ -0,0 +1,89 @@
+// src/components/ProjectCard.tsx
+
+import React from 'react';
+import { ExternalLink, Star } from "lucide-react";
+import { SiGithub } from "@icons-pack/react-simple-icons";
+
+export interface Project {
+  id: number;
+  studentName: string;
+  projectName: string;
+  description: string;
+  tags: string[];
+  projectLink: string;
+  githubLink?: string;
+  image: string;
+  stars?: number;
+}
+
+interface ProjectCardProps {
+  project: Project;
+}
+
+const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
+  return (
+    <a
+      href={project.projectLink}
+      className="bg-white border border-black rounded-md overflow-hidden hover:rotate-3 transition-transform"
+    >
+      <img
+        src={project.image}
+        alt={project.projectName}
+        className="w-full h-48 object-cover"
+      />
+      <div className="p-6 border-t border-black">
+        <span className="flex justify-between">
+          <h3 className="text-xl font-semibold text-gray-900 mb-2">
+            {project.projectName}
+          </h3>
+          {(project.stars || 0) > 0 && (
+            <span className="flex items-center h-fit w-fit gap-1 bg-yellow-50 border border-yellow-200 px-1 rounded-sm">
+              <Star size={14} className="text-yellow-500 fill-yellow-500" />
+              {project.stars}
+            </span>
+          )}
+        </span>
+        <p className="text-sm text-gray-600 mb-2">
+          by {project.studentName}
+        </p>
+        <p className="text-gray-700 mb-4">{project.description}</p>
+
+        <div className="flex flex-wrap gap-2 mb-4">
+          {project.tags.map((tag) => (
+            <span
+              key={tag}
+              className="px-3 py-1 border border-black bg-yellow-50 text-black rounded-full text-sm"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+
+        <div className="flex flex-wrap gap-4">
+          {project.githubLink && (
+            <a
+              href={project.githubLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 p-1 rounded-md text-gray-700 hover:text-white hover:bg-black"
+            >
+              <SiGithub size={20} />
+              <span>Source Code</span>
+            </a>
+          )}
+          <a
+            href={project.projectLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 p-1 rounded-md text-gray-700 hover:text-white hover:bg-black"
+          >
+            <ExternalLink size={20} />
+            <span>Project Link</span>
+          </a>
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export default ProjectCard;