feat: add new projects and images for Shotly AI and Evol Jewels

Author: Arvind644

public/img/projects/evol-jewels.png

@@ -10,9 +10,9 @@ const formatTechs = (values: string[]) =>
   values.toString().replaceAll(",", " • ");
 ---
 
-<div class="w-full">
+<div class="w-full h-full">
   {isComingSoon ? (
-    <div class="group flex w-full flex-col justify-between gap-3 rounded-md border border-neutral-300 dark:border-neutral-700 p-4">
+    <div class="group flex w-full h-full flex-col gap-3 rounded-md border border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800 p-4">
       <div class="flex items-center justify-between">
         <h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100">{title}</h3>
         <div class="block">
@@ -24,7 +24,7 @@ const formatTechs = (values: string[]) =>
     </div>
   ) : (
     <a
-      class="group flex w-full cursor-pointer flex-col justify-between gap-4 rounded-md border border-neutral-300 dark:border-neutral-700 p-4 transition-all duration-300 hover:-translate-y-2 hover:border-neutral-600 dark:hover:border-neutral-400"
+      class="group flex w-full h-full cursor-pointer flex-col rounded-md border border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800 p-4 transition-all duration-300 hover:-translate-y-2 hover:border-neutral-600 dark:hover:border-neutral-400"
       href={link}
       target="_blank"
       rel="noreferrer"
@@ -44,7 +44,7 @@ const formatTechs = (values: string[]) =>
         </div>
       )}
 
-      <div class="flex flex-col gap-3">
+      <div class="flex flex-col gap-3 flex-grow mt-2">
         <div class="flex items-center justify-between">
           <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">{title}</h3>
           <svg

public/img/projects/shotly-landing-page.png

@@ -10,6 +10,14 @@ export type Project = {
 
 const projects: Project[] = [
     {
+    title: "AI SaaS - Shotly AI (300+ users)",
+    techs: ["Next JS", "Tailwind CSS", "Supabase", "Drizzle", "fal AI"],
+    link: "https://shotlyai.com/",
+    description: "A SaaS platform to turn your selfie into a professional photoshoot, in seconds.",
+    screenshot: "/img/projects/shotly-landing-page.png",
+    hoverText: "AI Headshot Generator",
+  },
+  {
     title: "AI SaaS - Rechat",
     techs: ["Next JS", "Tailwind CSS", "Shadcn UI", "Clerk", "Prisma", "Postgresql", "OpenAI"],
     link: "https://rechat.vc/",
@@ -25,6 +33,14 @@ const projects: Project[] = [
     screenshot: "/img/projects/profilkep-landing-page.png",
     hoverText: "Full-stack platform for generating professional profile pictures",
   },
+  {
+    title: "AI Jewelry Stylist Kiosk (Won $500 USD and 2nd place in Hackathon)",
+    techs: ["Next JS", "Tailwind CSS", "PostgreSQL", "Prisma", "NodeMailer"],
+    link: "https://hackathon-beryl-iota.vercel.app/",
+    description: "An AI-powered jewelry recommendation system that analyzes user photos and generates personalized jewelry suggestions using advanced computer vision and celebrity style matching.",
+    screenshot: "/img/projects/evol-jewels.png",
+    hoverText: " Responsive virtual try-on web app for Evol Jewels that lets users try jewelry using only sliders and clicks.",
+  },
   {
     title: "Ortelius (Open Source)",
     techs: ["docker", "kubernetes", "Golang", "github actions"],

src/components/ProjectCard.astro

@@ -14,11 +14,11 @@ import presentation from "@/data/presentation";
       <header>
         <h1 class="text-3xl text-neutral-800 dark:text-neutral-100">Projects</h1>
         <p class="mt-4 text-neutral-700 dark:text-neutral-300">
-          Here are some of my personal projects that I've worked on. Each project represents a unique challenge and learning experience.
+          Here are some of my personal & clients projects that I've worked on. Each project represents a unique challenge and learning experience.
         </p>
       </header>
 
-      <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <section class="grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch">
         {projects.length === 0 ? (
           <p class="col-span-full">No projects available yet. Stay tuned for exciting updates!</p>
         ) : (