From 2cfe187d6bb4032c395782b6daa731845347b003 Mon Sep 17 00:00:00 2001 From: 2ManyProjects Date: Wed, 26 Mar 2025 23:55:11 -0500 Subject: [PATCH] added lang chips --- src/App.css | 47 ++++++++++++++++++++++++++++++++ src/components/Header.js | 2 +- src/components/ProjectCard.js | 34 +++++++++++++++-------- src/components/ProjectDetails.js | 8 ++++++ src/components/RenderChips.js | 26 ++++++++++++++++++ src/data/projects.js | 8 ++++++ 6 files changed, 113 insertions(+), 12 deletions(-) create mode 100644 src/components/RenderChips.js 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 }) => { )}

Comet Technologies

-

You need I'll build it

+

You need it, I'll build it

); diff --git a/src/components/ProjectCard.js b/src/components/ProjectCard.js index f022946..43d6b70 100644 --- a/src/components/ProjectCard.js +++ b/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 ( -
onClick(project.id)}> -

{project.title}

-

- {summary.length > summaryLength ? `${summary.substring(0, summaryLength)}...` : summary} -

-
View Details
-
- ); + const summary = project.description.trim().split('\n\n')[0].trim(); + const summaryLength = 120; + + + return ( +
onClick(project.id)}> +

{project.title}

+ + {project.langs && } + + {project.software && } +
+ +
+

+ {summary.length > summaryLength ? `${summary.substring(0, summaryLength)}...` : summary} +

+ +
View Details
+
+ ); }; export default ProjectCard; \ No newline at end of file diff --git a/src/components/ProjectDetails.js b/src/components/ProjectDetails.js index 5575295..002e7e3 100644 --- a/src/components/ProjectDetails.js +++ b/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 }) => {

{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