pushing project changes

MichiganDataScienceTeam · Jul 18, 2024 · 76b400d · 76b400d
1 parent d4c43f5
commit 76b400d
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 58 deletions.
diff --git a/components/currentProjectCard.jsx b/components/currentProjectCard.jsx
@@ -0,0 +1,105 @@
+import Image from "next/image";
+
+export default function CurrentProjectCard({ project, basePath }) {
+  const projectImagePath = `${basePath ? basePath : ''}/images/projects/${project.image}`;
+  const leadText = project.leads.length > 1 ? "Leads" : "Lead";
+
+  return (
+    <div style={styles.card}>
+      <div style={{ ...styles.column, ...styles.projectInfo }}>
+        <Image
+          style={styles.projectImage}
+          width="300"
+          height="300"
+          src={projectImagePath}
+          alt={project.label}
+        />
+        <h3 style={styles.projectTitle}>{project.label}</h3>
+      </div>
+      <div style={{ ...styles.column, ...styles.leadsInfo }}>
+        <h4 style={styles.leadText}>{leadText}:</h4>
+        <div style={styles.leadsContainer}>
+          {project.leads.map((lead, idx) => (
+            <div key={idx} style={styles.lead}>
+              <Image
+                style={styles.leadImage}
+                width="75"
+                height="75"
+                src={`${basePath ? basePath : ''}/images/team/${lead.image}`}
+                alt={lead.name}
+              />
+              <p style={styles.leadName}>{lead.name}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  card: {
+    display: 'flex',
+    flexDirection: 'row',
+    backgroundColor: '#333',
+    padding: '16px',
+    borderRadius: '8px',
+    width: '100%',
+    maxWidth: '600px',
+    marginBottom: '32px',
+  },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+  },
+  projectInfo: {
+    marginBottom: '16px',
+  },
+  projectImage: {
+    borderRadius: '10%',
+    objectFit: 'cover',
+    width: 'auto',
+    height: '100%',
+  },
+  projectTitle: {
+    marginTop: '16px',
+    fontSize: '24px',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  leadsInfo: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  leadText: {
+    fontSize: '20px',
+    fontWeight: 'bold',
+  },
+  leadsContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginTop: '8px',
+    gap: '16px',
+  },
+  lead: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  leadImage: {
+    borderRadius: '50%',
+    objectFit: 'cover',
+    width: '75px',
+    height: '75px',
+  },
+  leadName: {
+    marginTop: '8px',
+    textAlign: 'center',
+    fontSize: '14px',
+    fontWeight: '500',
+  },
+};
diff --git a/components/projectCard.jsx b/components/projectCard.jsx
@@ -0,0 +1,51 @@
+import Link from "next/link";
+import Image from "next/image";
+import Icon from "@/components/icon";
+
+export default function ProjectCard({ project, basePath }) {
+  const imagePath = `${basePath}/images/projects/${project.label.toLowerCase().split(" ").join("_")}.jpg`;
+  return (
+    <div className="text-left sm:text-center rounded bg-grey py-2 sm:py-4 px-2 sm:px-8 w-full sm:w-60 flex sm:block gap-8">
+      <Image
+        className="sm:mx-auto sm:mb-4 sm:w-44 sm:h-44 w-24 h-24 my-auto rounded-full object-cover"
+        width="176"
+        height="176"
+        src={imagePath}
+        alt={project.label}
+      />
+      <div className="">
+        <h3 className="mb-1 text-2xl font-bold tracking-tight">{project.label}</h3>
+        <ul className="flex sm:justify-center mt-2 sm:mt-4 space-x-4">
+          {project.type === "link" && (
+            <li>
+              <Link href={project.href} className="hover:text-gray" aria-label="Github Repo">
+                <Icon name="github" className="text-3xl" />
+              </Link>
+            </li>
+          )}
+          {project.type === "md" && (
+            <li>
+              <Link href={project.href} className="hover:text-gray" aria-label="Markdown">
+                <Icon name="file-text" className="text-3xl" />
+              </Link>
+            </li>
+          )}
+          {project.type === "pdf" && (
+            <li>
+              <Link href={project.href} className="hover:text-gray" aria-label="PDF">
+                <Icon name="file-pdf" className="text-3xl" />
+              </Link>
+            </li>
+          )}
+          {project.type === "googleSlides" && (
+            <li>
+              <Link href={project.href} className="hover:text-gray" aria-label="Google Slides">
+                <Icon name="googleSlides" className="text-3xl" />
+              </Link>
+            </li>
+          )}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/config/currentProjects.json b/config/currentProjects.json
@@ -0,0 +1,43 @@
+[
+    {
+        "label": "Economic Forecasting",
+        "image": "economic_forecasting.jpg",
+        "leads": [
+            { "name": "Jordan Ives", "image": "temp.jpeg" },
+            { "name": "Amelia Weyhing", "image": "aweyhing.JPG" }
+        ]
+    },
+    {
+        "label": "Research Grant Analysis",
+        "image": "research_grant_analysis.jpg",
+        "leads": [
+            { "name": "Erin Alcott", "image": "ealcott.jpg" },
+            { "name": "Linda Ru", "image": "clindaru.png" }
+        ]
+    },
+    {
+        "label": "Car Brand Classification",
+        "image": "car_brand_classification.jpg",
+        "leads": [
+            { "name": "Aditi Kashi", "image": "adikashi.jpg" },
+            { "name": "Anish Kudupudi", "image": "temp.jpeg" }
+        ]
+    },
+    {
+        "label": "SoccerNet",
+        "image": "soccerNet.jpg",
+        "leads": [
+            { "name": "Antonio Capdevielle", "image": "temp.jpeg" },
+            { "name": "Shiva Chandran", "image": "shivac.jpg" }
+        ]
+    },
+    {
+        "label": "LLM Augmentation",
+        "image": "llm_augmentation.jpg",
+        "leads": [
+            { "name": "Aditya Murali", "image": "amiralid.png" },
+            { "name": "Jordan Jones", "image": "jordanrj.jpeg" }
+        ]
+    }
+  ]
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/projects/index.jsx b/pages/projects/index.jsx
@@ -1,14 +1,13 @@
+import fs from "fs";
+import path from "path";
 import HeadContent from "@/components/headContent";
 import Hero from "@/components/hero";
 import Layout from "@/components/layout";
-import fs from "fs";
-import path from "path";
-import Link from "next/link";
-import Image from "next/image";
+import ProjectCard from "@/components/ProjectCard";
+import CurrentProjectCard from "@/components/CurrentProjectCard";
 import { useRouter } from "next/router";
-import Icon from "@/components/icon";
 
-export default function Projects({ groupedLinks }) {
+export default function Projects({ groupedLinks, currentProjects }) {
   const router = useRouter();
   const basePath = router.basePath;
 
@@ -18,7 +17,19 @@ export default function Projects({ groupedLinks }) {
         title={"Michigan Data Science Team - Projects"} 
         description={"Michigan Data Science Team - MDST is the largest data science club at the University of Michigan. Here are some of our past projects."} 
       />
-      <Hero title="Our Past Projects" />
+      <Hero title="Our Projects" />
+
+      <section className="current-projects py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6">
+        <div className="mx-auto mb-8 max-w-screen-sm lg:mb-16">
+          <h2 className="text-3xl mb-4">Current Projects</h2>
+        </div>
+        <div className="flex flex-wrap justify-center gap-8">
+          {currentProjects.map((project, index) => (
+            <CurrentProjectCard key={index} project={project} basePath={basePath} />
+          ))}
+        </div>
+      </section>
+
       {Object.entries(groupedLinks).map(([subdirectory, links]) => (
         <ProjectSection key={subdirectory} subdirectory={subdirectory} links={links} basePath={basePath} />
       ))}
@@ -41,54 +52,6 @@ function ProjectSection({ subdirectory, links, basePath }) {
   );
 }
 
-function ProjectCard({ project, basePath }) {
-  const imagePath = `${basePath}/images/projects/${project.label.toLowerCase().split(" ").join("_")}.jpg`;
-  return (
-    <div className="text-left sm:text-center rounded bg-grey py-2 sm:py-4 px-2 sm:px-8 w-full sm:w-60 flex sm:block gap-8">
-      <Image
-        className="sm:mx-auto sm:mb-4 sm:w-44 sm:h-44 w-24 h-24 my-auto rounded-full object-cover"
-        width="176"
-        height="176"
-        src={imagePath}
-        alt={project.label}
-      />
-      <div className="">
-        <h3 className="mb-1 text-2xl font-bold tracking-tight">{project.label}</h3>
-        <ul className="flex sm:justify-center mt-2 sm:mt-4 space-x-4">
-          {project.type === "link" && (
-            <li>
-              <Link href={project.href} className="hover:text-gray" aria-label="Github Repo">
-                <Icon name="github" className="text-3xl" />
-              </Link>
-            </li>
-          )}
-          {project.type === "md" && (
-            <li>
-              <Link href={project.href} className="hover:text-gray" aria-label="Markdown">
-                <Icon name="file-text" className="text-3xl" />
-              </Link>
-            </li>
-          )}
-          {project.type === "pdf" && (
-            <li>
-              <Link href={project.href} className="hover:text-gray" aria-label="PDF">
-                <Icon name="file-pdf" className="text-3xl" />
-              </Link>
-            </li>
-          )}
-          {project.type === "googleSlides" && (
-            <li>
-              <Link href={project.href} className="hover:text-gray" aria-label="Google Slides">
-                <Icon name="googleSlides" className="text-3xl" />
-              </Link>
-            </li>
-          )}
-        </ul>
-      </div>
-    </div>
-  );
-}
-
 export async function getStaticProps() {
   const projectsDirectory = path.join(process.cwd(), "public", "projects");
   const subdirectories = fs.readdirSync(projectsDirectory, { withFileTypes: true }).filter(dirent => dirent.isDirectory());
@@ -146,9 +109,13 @@ export async function getStaticProps() {
     return acc;
   }, {});
 
+  const currentProjectsPath = path.join(process.cwd(), "config", "currentProjects.json");
+  const currentProjects = JSON.parse(fs.readFileSync(currentProjectsPath, "utf-8"));
+
   return {
     props: {
       groupedLinks,
+      currentProjects,
     },
   };
 }
diff --git a/public/images/projects/car_brand_classification.jpg b/public/images/projects/car_brand_classification.jpg
diff --git a/public/images/projects/economic_forecasting.jpg b/public/images/projects/economic_forecasting.jpg
diff --git a/public/images/projects/llm_augmentation.jpg b/public/images/projects/llm_augmentation.jpg
diff --git a/public/images/projects/research_grant_analysis.jpg b/public/images/projects/research_grant_analysis.jpg
diff --git a/public/images/projects/soccerNet.jpg b/public/images/projects/soccerNet.jpg