added lang chips

src/App.css

@@ -214,6 +214,53 @@
     padding: 1.5rem;
     margin-top: 2rem;
   }
+
+
+
+  /* Chip styling */
+  .chips-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 2px 0;
+  }
+
+  .chip {
+    display: inline-block;
+    padding: 1px 12px;
+    border-radius: 16px;
+    font-size: 0.6rem;
+    font-weight: 1000;
+  }
+
+  .chip-large {
+    display: inline-block;
+    padding: 1px 16px;
+    border-radius: 16px;
+    font-size: 1rem;
+    font-weight: 750;
+  }
+  .lang-chip {
+    background-color: #e0f2ff;
+    color: #0366d6;
+    border: 1px solid #79b8ff;
+  }
+
+  .software-chip {
+    background-color: #f3e8ff;
+    color: #5a32a3;
+    border: 1px solid #d1bef2;
+  }
+
+  .project-card {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .view-details {
+    margin-top: auto;
+    text-align: right;
+  }
   
   /* Responsive styles */
   @media (max-width: 768px) {

src/components/Header.js

@@ -10,7 +10,7 @@ const Header = ({ onBackClick, showBackButton }) => {
 					</button>
 				)}
 				<h1>Comet Technologies</h1>
-				<p className="tagline">You need I'll build it</p>
+				<p className="tagline">You need it, I'll build it</p>
 			</div>
 		</header>
 	);

src/components/ProjectCard.js

@@ -1,17 +1,29 @@
 import React from 'react';
+import RenderChips from './RenderChips';
+
 
 const ProjectCard = ({ project, onClick }) => {
-	const summary = project.description.trim().split('\n\n')[0].trim();
-	const summaryLength = 120;
-	return (
-		<div className="project-card" onClick={() => onClick(project.id)}>
-			<h3>{project.title}</h3>
-				<p className="project-summary">
-					{summary.length > summaryLength ? `${summary.substring(0, summaryLength)}...` : summary}
-				</p>
-			<div className="view-details">View Details</div>
-		</div>
-	);
+    const summary = project.description.trim().split('\n\n')[0].trim();
+    const summaryLength = 120;
+
+
+    return (
+        <div className="project-card" onClick={() => onClick(project.id)}>
+            <h3>{project.title}</h3>
+            
+            {project.langs && <RenderChips langs={project.langs} type='lang'/>}
+            
+            {project.software && <RenderChips langs={project.software} type='software'/>}
+			<div style={{marginBottom: "12px"}}>
+
+			</div>
+            <p className="project-summary">
+                {summary.length > summaryLength ? `${summary.substring(0, summaryLength)}...` : summary}
+            </p>
+            
+            <div className="view-details">View Details</div>
+        </div>
+    );
 };
 
 export default ProjectCard;

src/components/ProjectDetails.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ImageCarousel from './ImageCarousel';
+import RenderChips from './RenderChips';
 
 const ProjectDetails = ({ project }) => {
 	if (!project) {
@@ -12,6 +13,13 @@ const ProjectDetails = ({ project }) => {
 		<div className="project-details">
 			<h2>{project.title}</h2>
 			
+            {project.langs && <RenderChips langs={project.langs} type='lang' large/>}
+            
+            {project.software && <RenderChips langs={project.software} type='software' large/>}
+
+			<div style={{marginBottom: "12px"}}>
+
+			</div>
 			<div className="project-carousel">
 				<ImageCarousel projectId={project.id} />
 			</div>

src/components/RenderChips.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+
+const RenderChips = ({langs: items, type, large}) => {
+	if (!items || items.length === 0) return null;
+	
+	let chipClass = type === 'lang' ? 'lang-chip' : 'software-chip';
+    let chipStr = 'chip';
+    if(large)
+        chipStr+= '-large'
+	return (
+		<div className="chips-container">
+			{items.map((item, index) => (
+				<span 
+					key={`${type}-${index}`} 
+					className={`${chipStr} ${chipClass}`}
+				>
+					{item}
+				</span>
+			))}
+		</div>
+	);
+};
+
+
+export default RenderChips;

src/data/projects.js

@@ -3,6 +3,8 @@ const projects = [
       id: "loanterra",
       title: "DevOps for Loanterra (2023-2025)",
       imagesFolder: "/assets/loanterra",
+      langs: [],
+      software: ["SQL", "AWS"],
       description: `
         - Setup Loanterra Cloud environment with Okta for authentication and resource provisioning.\n\n
         - Ensured SOC2 Compliance through implementation of security controls and documentation.\n\n
@@ -17,6 +19,8 @@ const projects = [
       id: "fecal-vision-model",
       title: "Fecal Vision Model for North of 55 Veterinary Services (2022)",
       imagesFolder: "/assets/fecal-vision-model",
+      langs: ["C++", "Python", "Js"],
+      software: ["TensorFlow", "Express", "React", "QuPath"],
       description: `
         - Over 1 year I developed a vision model using TensorFlow that was ~90% accurate (sufficient for medical diagnoses) in fecal egg counts using standard McMaster method fecal slides. This reduced slide analysis time from 20 minutes down to 5 minutes per sample.\n\n
         
@@ -31,6 +35,8 @@ const projects = [
       id: "orchard-market",
       title: "Order Picking Software for Orchard Market (2021)",
       imagesFolder: "/assets/orchard-market",
+      langs: ["Js", "C#", "Bash", "VBA script"],
+      software: ["Tesseract", "Croptracker", "Produce Pro"],
       description: `
         I built several pieces of software for Orchard Market, a collaboration of 5 farms sharing warehousing and storefront space.\n\n
         
@@ -45,6 +51,8 @@ const projects = [
       id: "mycology-lab",
       title: "Mycology Lab Technical Lead (2019-2022)",
       imagesFolder: "/assets/mycology-lab",
+      langs: ["C++", "Bash", "Js"],
+      software: ["Postgres", "Express", "React", "FluidNC", "OpenCV"],
       description: `
         Fungal Stimuli Tester:\n\n
         Built a 3-axis gantry system that moves a central platform along an x,y plane with a winch that raises/lowers the end piece.\n\n