---
import BaseLayout from "../layouts/BaseLayout.astro";
import ProjectCard from "../components/ProjectCard.astro";

const projectsData = [
  {
    name: "PlotAI",
    description:
      "Web app to assist farmers with irrigation optimization recommendations and AI powered plant disease detection. Won the Congressional App Challenge for Georgia's 7th District.",
    git: "https://github.com/theamazing0/PlotAI",
    web: "https://plotai.org/",
    skills: ["HTML", "CSS", "Javascript", "Tensorflow.js"],
  },
];
---

<BaseLayout title="Projects | Samvid Konchada">
  <div>
    <h1 class="header">Projects</h1>
    <div class="card-container">
      {
        projectsData.map((project) => (
          <ProjectCard
            name={project.name}
            description={project.description}
            git={project.git}
            web={project.web}
            skills={project.skills}
          />
        ))
      }
    </div>
  </div>
</BaseLayout>

<style>
  .header {
    margin-bottom: 1.5rem;
  }
  .card-container {
    display: flex;
    flex-wrap: wrap;
  }
</style>
