Summer24

components/communityImages.jsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+
+export default function CommunityImages({ images, basePath }) {
+  return (
+    <div className="flex flex-col sm:flex-row items-center mx-auto max-w-6xl">
+      {images.map((image, index) => (
+        <div key={index} className="w-full sm:w-1/2 mx-4 mb-6 flex flex-col justify-center items-center">
+          <p className="text-base mt-2">{image.name}</p>
+          <Image
+            width={500}
+            height={500}
+            src={
+              basePath
+                ? `${basePath}/images/community/${image.image}`
+                : `/images/community/${image.image}`
+            }
+            alt={image.name}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

components/currentProjectCard.jsx

@@ -0,0 +1,110 @@
+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',
+    flex: 1,
+  },
+  projectInfo: {
+    marginBottom: '16px',
+    flex: 1,
+  },
+  projectImage: {
+    borderRadius: '10%',
+    objectFit: 'cover',
+    width: '100%',
+    height: 'auto',
+  },
+  projectTitle: {
+    marginTop: '16px',
+    fontSize: '24px',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: 'white',
+  },
+  leadsInfo: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    flex: 1,
+  },
+  leadText: {
+    fontSize: '20px',
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  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',
+    color: 'white',
+  },
+};

components/icon.jsx

@@ -12,7 +12,9 @@ import {
   IoBrowsersOutline,
   IoLogoSlack,
   IoCopyOutline,
-  IoCalendarOutline
+  IoCalendarOutline,
+  IoDocumentTextOutline,
+  IoDocumentOutline
 } from "react-icons/io5";
 import { createElement } from "react";
 
@@ -31,13 +33,17 @@ const iconMap = {
   slack: IoLogoSlack,
   copy: IoCopyOutline,
   calendar: IoCalendarOutline,
-
+  "file-text": IoDocumentTextOutline,
+  "file-pdf": IoDocumentOutline
 };
 
-export default function Icon(props) {
-  if (!(props.name in iconMap)) {
-    console.error("Could not find name " + props.name);
+export default function Icon({ name, ...props }) {
+  const IconComponent = iconMap[name];
+
+  if (!IconComponent) {
+    console.error(`Could not find icon with name "${name}"`);
     return null;
   }
-  return createElement(iconMap[props.name], props);
+
+  return createElement(IconComponent, props);
 }

components/projectCard.jsx

@@ -0,0 +1,37 @@
+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.github && (
+            <li>
+              <Link href={project.github} className="hover:text-gray" aria-label="Github Repo">
+                <Icon name="github" className="text-3xl" />
+              </Link>
+            </li>
+          )}
+          {project.googleSlides && (
+            <li>
+              <Link href={project.googleSlides} className="hover:text-gray" aria-label="Google Slides">
+                <Icon name="file-pdf" className="text-3xl" />
+              </Link>
+            </li>
+          )}
+        </ul>
+      </div>
+    </div>
+  );
+}

config/communityImages.json

@@ -0,0 +1,11 @@
+[
+    {
+      "name": "WN24 Project Expo",
+      "image": "WN24_EXPO.JPG"
+    },
+    {
+      "name": "WN24 Data Science Night",
+      "image": "WN24_DSN.JPG"
+    }
+  ]
+

config/currentProjects.json

@@ -0,0 +1,92 @@
+[
+    {
+        "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": "temp.jpeg" },
+            { "name": "Jordan Jones", "image": "jordanrj.jpeg" }
+        ]
+    },
+    {
+        "label": "Facial Recognition",
+        "image": "facial_recognition.jpg",
+        "leads": [
+            { "name": "Andrew Black", "image": "andbl.jpeg" },
+            { "name": "Judith Wu", "image": "temp.jpeg" }
+        ]
+    },
+    {
+        "label": "RL Neuroevolution",
+        "image": "reinforcement_learning.jpg",
+        "leads": [
+            { "name": "Luke Yang", "image": "lukeyang.jpeg" },
+            { "name": "Nathan Kawamoto", "image": "temp.jpeg" }
+        ]
+    },
+    {
+        "label": "Mining & Analyzing Tweets",
+        "image": "twitter_sentiment_analysis.jpg",
+        "leads": [
+            { "name": "Nidhil Nayudu", "image": "temp.jpeg" },
+            { "name": "Tiernan Jesrani", "image": "tiernanj.jpg" }
+        ]
+    },
+    {
+        "label": "ViT From Scratch",
+        "image": "vit_from_scratch.jpg",
+        "leads": [
+            { "name": "Anthony Chen", "image": "anthoc.jpeg" },
+            { "name": "Matthew Drutis", "image": "madrutis.jpg" }
+        ]
+    },
+    {
+        "label": "Mini Copilot",
+        "image": "mini_copilot.jpg",
+        "leads": [
+            { "name": "Amirali Danai", "image": "amiralid.png" },
+            { "name": "Nishant Dash", "image": "temp.jpeg" }
+        ]
+    },
+    {
+        "label": "Poker Bot",
+        "image": "poker_bot.jpg",
+        "leads": [
+            { "name": "Jason Yen", "image": "temp.jpeg" },
+            { "name": "Onat Ozer", "image": "temp.jpeg" },
+            { "name": "Aditya Sinha", "image": "temp.jpeg" }
+        ]
+    }
+  ]
+