diff --git a/src/App.css b/src/App.css
index 7698464..88cef72 100644
--- a/src/App.css
+++ b/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) {
diff --git a/src/components/Header.js b/src/components/Header.js
index 8a4ccce..6bf6b62 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -10,7 +10,7 @@ const Header = ({ onBackClick, showBackButton }) => {
)}
{project.title}
+ {project.langs &&
}
+
+ {project.software &&
}
+
+
+
+
diff --git a/src/components/RenderChips.js b/src/components/RenderChips.js
new file mode 100644
index 0000000..a0f41ad
--- /dev/null
+++ b/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 (
+
+ {items.map((item, index) => (
+
+ {item}
+
+ ))}
+
+ );
+};
+
+
+export default RenderChips;
\ No newline at end of file
diff --git a/src/data/projects.js b/src/data/projects.js
index 50ad984..e91ebb9 100644
--- a/src/data/projects.js
+++ b/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