Add Furrow project to portfolio

Author: SathyaGnanakumar

public/images/furrow-arch.jpg

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-const ProjectModal = ({ project, onClose }) => {
+const ProjectModal = ({ projectId, project, onClose }) => {
   useEffect(() => {
     const handleEsc = (event) => {
       if (event.key === 'Escape') {
@@ -19,18 +19,20 @@ const ProjectModal = ({ project, onClose }) => {
 
   if (!project) return null;
 
+  const isFurrow = projectId === 'furrow';
+
   return (
     <div className="modal" role="dialog" aria-modal="true">
       <div className="modal-overlay" onClick={onClose} />
-      <div className="modal-content glass">
+      <div className={`modal-content glass${isFurrow ? ' modal-content-wide' : ''}`}>
         <div className="modal-header">
           <h2>{project.title}</h2>
           <button className="close-button" onClick={onClose} aria-label="Close">
             ×
           </button>
         </div>
         <div className="modal-body">
-          <div className="modal-image">
+          <div className={`modal-image${isFurrow ? ' modal-image-wide' : ''}`}>
             <img src={project.image} alt={project.title} />
           </div>
           {project.description ? (

public/images/furrow.png

@@ -52,6 +52,7 @@ const Projects = ({ data }) => {
       </div>
       {activeProject ? (
         <ProjectModal
+          projectId={activeProjectId}
           project={activeProject}
           onClose={() => setActiveProjectId(null)}
         />

src/components/ProjectModal.jsx

@@ -40,6 +40,14 @@ export const portfolioData = {
   projects: {
     title: 'Projects',
     cards: [
+      {
+        id: 'furrow',
+        title: 'Furrow',
+        summary: 'Built a voice-first farm assistant over iMessage and SMS for logging operations, checking compliance, and sending proactive daily briefings.',
+        image: '/images/furrow.png',
+        imageAlt: 'Furrow',
+        tags: ['FastAPI', 'React', 'PostgreSQL', 'OpenAI', 'Sendblue', 'Bitcamp 2026']
+      },
       {
         id: 'remember-me',
         title: 'Remember Me',
@@ -106,6 +114,34 @@ export const portfolioData = {
       }
     ],
     modalData: {
+      furrow: {
+        title: 'Furrow',
+        image: '/images/furrow-arch.jpg',
+        description: '',
+        tags: [
+          'Python',
+          'FastAPI',
+          'React',
+          'PostgreSQL',
+          'SQLAlchemy',
+          'OpenAI',
+          'Groq Whisper',
+          'Gemini',
+          'Exa',
+          'Sendblue',
+          'Docker',
+          'Bitcamp 2026'
+        ],
+        highlights: [
+          'Built a voice-first farm operations assistant delivered over iMessage and SMS that converts messy voice notes, photos, and text messages into structured farm logs and conversational action items.',
+          'Implemented a three-tier routing system that uses fast-path chat handling for simple requests, specialist pipelines for tasks like vision and calendar actions, and a full agentic runtime for complex multi-step workflows.',
+          'Added chemical safety compliance checks for REI and PHI constraints, helping farmers log applications and immediately receive reminder-ready follow-up actions.',
+          'Developed proactive daily briefings that aggregate weather impact, commodity price movement, budget burn, soil sensor signals, and recommended next actions into concise farmer updates.',
+          'Integrated real-time research and external tools across Exa, Sendblue, Gmail, Google Calendar, and multimodal LLM providers to support market research, communication, and farm operations automation.'
+        ],
+        link: 'https://devpost.com/software/furrow',
+        linkText: 'View on Devpost'
+      },
       'route-vlm': {
         title: 'RouteVLM: Cost-Aware Routing for Multimodal LLMs',
         image: '/images/RouteVLM.png',

src/components/Projects.jsx

@@ -309,6 +309,11 @@
   padding: 28px;
 }
 
+.modal-content-wide {
+  width: min(1120px, 96vw);
+  max-height: 94vh;
+}
+
 .modal-header {
   display: flex;
   align-items: center;
@@ -327,9 +332,28 @@
   cursor: pointer;
 }
 
+.modal-image {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 18px;
+}
+
+.modal-image-wide {
+  margin-bottom: 22px;
+}
+
 .modal-image img {
+  width: auto;
+  max-width: 100%;
+  max-height: 360px;
+  object-fit: contain;
   border-radius: var(--radius-md);
-  margin-bottom: 18px;
+}
+
+.modal-image-wide img {
+  width: 100%;
+  max-width: 1040px;
+  max-height: 560px;
 }
 
 .modal-description {