goodbot

src/app/dataModels/project.ts

@@ -20,4 +20,5 @@ export interface Project {
     projectLead: string;
     lookingFor: string[];
   };
+  className?: string;
 }

src/components/project-card/project-card.scss

@@ -11,6 +11,21 @@ body {
     display: flex;
     flex-direction: column;
     align-self: stretch;
+
+    @include tablet {
+      width: 100%;
+      min-width: 100%;
+    }
+
+    &--home-page {
+      @include tablet {
+        width: 655px;
+      }
+
+      @include mobile {
+        width: 100%;
+      }
+    }
   }
 
   .project-card-content {

src/components/project-card/project-card.tsx

@@ -22,9 +22,10 @@ export default function Project({
   tools,
   projectKey,
   projectImage,
+  className,
 }: ProjectInterface) {
   return (
-    <Card className="project-card project-overview__card">
+    <Card className={`project-card project-overview__card ${className}`}>
       <CardMedia
         component="a"
         className="project-card-media"

src/components/project-overview/project-overview.scss

@@ -21,13 +21,14 @@
   }
 
   &__card-container {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
     justify-content: center;
     align-items: flex-start;
     gap: 2rem;
 
-    @media only screen and (max-width: 640px) {
-      flex-direction: column;
+    @include tablet {
+      grid-template-columns: 1fr;
     }
   }
 

src/components/project-overview/project-overview.tsx

@@ -26,6 +26,7 @@ export default async function ProjectOverview() {
                   status={project.status}
                   projectImage={project.projectImage}
                   projectKey={projectKey}
+                  className="project-card--home-page"
                 />
               </Fragment>
             );

src/json/projects.json

@@ -70,5 +70,50 @@
       "projectLead": "Sam Huo",
       "lookingFor": []
     }
+  },
+  "good-bot": {
+    "title": "GoodBot - Canadian Responsible Tech Hub",
+    "description": "The GoodBot non-profit is developing the Canadian Responsible Tech Hub, with assistance from Code for BC. This initiative aims to map Canada’s responsible technology ecosystem, providing a centralized resource for organizations, policymakers, and individuals. The hub will document organizations, policies, scholars, and key resources to support ethical technology practices in Canada.",
+    "links": [
+      {
+        "title": "GitHub",
+        "url": "https://github.com/GoodBotNonProfit/canadian-tech-library"
+      }
+    ],
+    "languages": ["React", "Python", "JavaScript", "SQL"],
+    "tools": ["PostgreSQL", "Supabase", "Google Suite", "GitHub", "Tableau"],
+    "technologies": [
+      "Machine Learning",
+      "Data Visualization",
+      "Policy Summarization"
+    ],
+    "programAreas": ["Ethical Tech", "Policy and Law"],
+    "location": "Remote",
+    "status": "Active",
+    "contributors": [
+      "Fauwial Khan",
+      "Ahmad Akhtar",
+      "Glauber Martins",
+      "Jaskaran Dhanoa"
+    ],
+    "projectImage": "/assets/good-bot.webp",
+    "projectOverview": {
+      "problemStatement": "As technology evolves rapidly, there is an urgent need for a responsible tech ecosystem in Canada that can address the ethical implications and societal impacts of new technologies. The Good-Bot non-profit seeks to create a Canadian Responsible Tech Hub to map out the nation's capacity to respond to emerging issues in technology. The lack of transparency, regulatory challenges, and insufficient tools have made it difficult to fully understand the risks and gaps in the tech landscape.",
+      "projectObjectives": [
+        "Map Canada's responsible tech organizations, policies, and key experts",
+        "Develop machine-generated summaries of tech-related policies and litigation",
+        "Create dynamic dashboards visualizing the gaps in responsible tech initiatives",
+        "Facilitate ongoing updates and collaboration through community engagement"
+      ],
+      "projectLead": "Sam Huo",
+      "lookingFor": [
+        "Technology Lead",
+        "Frontend Developers",
+        "Senior Developers",
+        "Data Engineers",
+        "Policy Experts",
+        "Machine Learning Engineers"
+      ]
+    }
   }
 }