2 by rows and hover/classes fix

src/routes/+page.svelte

@@ -84,6 +84,72 @@
       ],
       image: "/favicon.png",
     },
+    {
+      name: "VideoSpeed Extension (Fork)",
+      link: "https://github.com/SoPat712/videospeed",
+      description:
+        "A fork and continuation of igrigorik/videospeed that brings accelerated video playback controls to Firefox. Allows users to speed up, slow down, rewind, and configure custom shortcuts for any HTML5 video.",
+      techStack: ["JavaScript", "HTML5 Video API", "Browser Extensions"],
+      highlights: [
+        "Ported the original Chrome add-on to Firefox",
+        "Keyboard shortcuts for playback speed, rewind, and advance",
+        "Configurable preferred speed toggles",
+        "Extension settings allow full customization of controls",
+        "GPLv3 licensed and actively maintained",
+      ],
+      image: "/VideoSpeed.png",
+    },
+    {
+      name: "Maisie Heardle",
+      link: "https://github.com/SoPat712/maisie-heardle",
+      description:
+        "A daily Heardle-style music guessing game built with SvelteKit, Tailwind CSS, and the SoundCloud Widget API. Focused on Maisie Peters songs but fully customizable for any artist.",
+      techStack: [
+        "SvelteKit",
+        "Tailwind CSS",
+        "SoundCloud Widget API",
+        "Moment.js",
+        "Svelte Hero Icons",
+      ],
+      highlights: [
+        "Daily rotating track using deterministic date-based selection",
+        "Progressive snippet unlocking with skips and wrong guesses",
+        "Dark mode with auto-detection and manual toggle",
+        "Deployed on Netlify with zero data collection",
+        "Built to be easily modifiable for any artist",
+      ],
+      image: "/MaisieHeardle.png",
+    },
+    {
+      name: "Fair Housing Map",
+      link: "https://github.com/SoPat712/fair-housing-map",
+      description:
+        "An interactive web map visualizing Raritan Township's 2025 FAIR Housing Plan overlay districts. Created to improve community understanding of affordable housing developments.",
+      techStack: ["HTML5", "CSS3", "JavaScript (ES6+)", "Leaflet.js"],
+      highlights: [
+        "Interactive Leaflet.js map of proposed housing zones",
+        "6 overlay districts with color-coded visualization",
+        "Detailed parcel popups with block, lot, and owner info",
+        "Dynamic legend with zoom-to-overlay functionality",
+        "Fully responsive single-file project for easy integration",
+      ],
+      image: "/FairHousingMap.png",
+    },
+    {
+      name: "BeReal Export Manager",
+      link: "https://github.com/SoPat712/BeReal-Export-Manager",
+      description:
+        "A Python utility that processes BeReal data exports, adding metadata and properly tagging exported photos, videos, and realmojis with timestamps and location info.",
+      techStack: ["Python", "ExifTool", "JSON"],
+      highlights: [
+        "Parses BeReal export data including photos, BTS videos, and realmojis",
+        "Adds metadata such as original capture date and location",
+        "Supports custom output paths and timespan/year filters",
+        "Fixes inconsistent BeReal timestamps using default timezone settings",
+        "Flexible command-line options with ExifTool integration",
+      ],
+      image: "/BeRealExportManager.png",
+    },
   ];
 
   // Education Info
@@ -93,11 +159,16 @@
     graduation: "Expected May 2026",
     gpa: "3.7/4.0",
     courses: [
-      { code: "01:198:419", name: "Computer Security", status: "In Progress" },
+      {
+        code: "01:198:428",
+        name: "Intro to Computer Graphics",
+        status: "In Progress",
+      },
+      { code: "01:198:419", name: "Computer Security", status: "Complete" },
       {
         code: "01:198:344",
         name: "Design & Analysis of Algorithms",
-        status: "In Progress",
+        status: "Completed",
       },
       { code: "01:198:214", name: "Systems Programming", status: "Completed" },
       { code: "01:198:352", name: "Internet Technology", status: "Completed" },
@@ -510,20 +581,20 @@
     <!-- Projects Section -->
     <section id="projects" class="py-16 border-b border-gray-800 scroll-mt-16">
       <h2 class="text-3xl font-bold mb-8 text-green-400">❯ Projects</h2>
-      <div class="space-y-16">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
         {#each projects as project}
           <div
-            class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700 hover:border-green-500 transition duration-300"
+            class="project-card bg-gray-900 rounded-lg overflow-hidden border border-gray-700 transition-all duration-300"
           >
-            <div class="flex flex-col md:flex-row md:h-[410px]">
+            <div class="h-full flex flex-col">
-              <div class="md:w-2/5 h-64 md:h-full">
+              <div class="h-48">
                 <img
                   src={project.image}
                   alt={project.name}
                   class="w-full h-full object-cover"
                 />
               </div>
-              <div class="md:w-3/5 p-6 flex flex-col justify-center">
+              <div class="p-6 flex flex-col flex-grow">
                 <h3 class="text-2xl font-semibold mb-2">
                   <a
                     href={project.link}
@@ -533,7 +604,9 @@
                     {project.name}
                   </a>
                 </h3>
-                <p class="text-gray-400 mb-4">{project.description}</p>
+                <p class="text-gray-400 mb-4 flex-grow">
+                  {project.description}
+                </p>
                 <div class="mb-4">
                   <h4 class="text-green-400 mb-2">Tech Stack:</h4>
                   <div class="flex flex-wrap gap-2">
@@ -873,4 +946,12 @@
       opacity: 0;
     }
   }
+
+  .project-card:hover {
+    transform: translateY(-10px) scale(1.03);
+    box-shadow:
+      0 0 15px rgba(52, 211, 153, 0.3),
+      0 0 30px rgba(52, 211, 153, 0.2);
+    border-color: rgba(52, 211, 153, 0.5);
+  }
 </style>