Project page updates

next.config.js

@@ -10,6 +10,11 @@ const nextConfig = {
       // config.infrastructureLogging = { debug: /PackFileCache/ };
       return config;
     },
+
+    env: {
+      SPACE_ID: process.env.SPACE_ID,
+      CDN_API_KEY: process.env.CDN_API_KEY,
+    },
   };
 
-module.exports = nextConfig
+  module.exports = nextConfig

src/app/projects/ProjectCard.tsx

@@ -1,14 +1,29 @@
 import { Lato } from "next/font/google"
+import Image from 'next/image';
+import Link from "next/link";
+
+
+import '../../styles/ProjectsContent.scss';
+
 
 const lato = Lato({ weight: '700', subsets: ['latin'] })
 
-export default function ProjectCard({ title, description, url }) {
+export default function ProjectCard({ title, description, img, alt = "", url = "" }) {
 
     return (
-        <div className="flex flex-col">
-            <img />
-            <h1 className="text-2xl font-bold">{title}</h1>
-            <p className="text-lg">{description}</p>
-        </div>
+        <Link href={url}>
+            <div className="flex flex-col proj-card">
+                <Image
+                className="project-image"
+                src={img}
+                alt={alt}
+                layout="responsive" /* Ensures the image scales based on its container */
+                width={5} 
+                height={3} 
+                />
+                <h1 className="text-2xl font-bold">{title}</h1>
+                <p className="text-lg">{description}</p>
+            </div>
+        </Link>
     )
 }

src/app/projects/ProjectsContent.tsx

@@ -1,20 +1,28 @@
 import ContentSection from "@/components/ContentSection";
 import ProjectCard from "./ProjectCard";
+import projectData from '@/assets/projectData';
+
+import '../../styles/ProjectsContent.scss';
+
 
 export default function ProjectsContent() {
     return (
-        <div className="grow flex flex-col space-y-10 px-20 py-20 text-black min-w-full">
-            <ContentSection title="PROJECTS ARCHIVE">
-                <div className="flex flex-col">
-                    <h1 className="text-lg">
-                        Every quarter, we have student teams collaborate and execute an idea. Below are some projects that were created in the past quarters. Feel free to browse!
-                    </h1>
-                    <h1 className="text-lg font-bold">
-                        Currently, work in progress...
-                    </h1>
-                    {/* <div>
-                        <ProjectCard title="Fall 2023" description="Featured Projects:" url=""/>
-                    </div> */}
+        <div className="grow flex flex-col space-y-10 px-20 py-20 text-black min-w-full pc">
+            <img src="/projects/header.png" alt="Creative Labs Project Archive"></img>
+            <ContentSection title="">
+                <div className="relative flex flex-col w-full">
+                    <div className="proj-container w-full">
+                        {projectData.map((project, index) => (
+                            <ProjectCard
+                            key={index}
+                            title={project.title}
+                            description={project.description}
+                            img={project.img}
+                            alt={project.alt}
+                            url={project.url}
+                            />
+                        ))}
+                    </div>
                 </div>
             </ContentSection>
         </div>

src/app/team/page.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
 import { getDocsByType } from "@/lib/contentfulLib";

src/assets/projectData.js

@@ -0,0 +1,40 @@
+// projectData.js
+const projectData = [
+    { title: "Spring 2024", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/s24" },
+    { title: "Winter 2024", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/w24" },
+    { title: "Fall 2023", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/f23" },
+
+    { title: "Spring 2023", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/s23" },
+    { title: "Winter 2023", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/w23" },
+    { title: "Fall 2022", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/f22" },
+
+    { title: "Spring 2022", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/s22" },
+    { title: "Winter 2022", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/w22" },
+    { title: "Fall 2021", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/f21" },
+
+    { title: "Spring 2021", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/s21" },
+    { title: "Winter 2021", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/w21" },
+    { title: "Fall 2020", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/f20" },
+
+    { title: "Spring 2020", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/s20" },
+    { title: "Winter 2020", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/w20" },
+    { title: "Fall 2019", description: "Featured Projects:", img: "/projects/comingsoon.png", 
+        alt: "coming soon!", url: "projects/f19" },
+  ];
+
+  export default projectData;
+

src/styles/ProjectsContent.scss

@@ -0,0 +1,51 @@
+@import 'variables';
+
+.proj-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
+  column-gap: 2.5%;
+  flex-grow: 1;
+}
+
+
+@media (max-width: $mobile-breakpoint) {
+  .pc{
+    padding: 1rem;
+  }
+
+  .proj-container {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+@media (min-width: $mobile-breakpoint) and (max-width: $tablet-breakpoint) {
+  .pc{
+    padding: 2.5rem;
+  }
+
+  .proj-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+
+/* Project Card CSS*/
+
+.proj-card{
+  border: 2px solid #61616130;
+  border-radius: 0.5em;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+  font-size: 1em;
+  margin: 0.5em;
+  margin-bottom: 2em;
+  overflow: hidden;
+  padding: 5%;
+  position: relative;
+  transition: box-shadow 0.3s ease-in-out;
+}
+
+.project-image {
+  border: 2px solid #EAEAEA;
+  display: inline-block;
+  margin-bottom: 1em;
+}

src/styles/_variables.scss

@@ -20,6 +20,10 @@ $section-padding-mobile: $padding-vert-mobile $padding-horiz-mobile;
 $section-bg: #fff;
 $max-section-width: 1440px;
 
+// Breakpoints
+$tablet-breakpoint: 1160px;
+$mobile-breakpoint: 768px;
+
 // Colors
 $colors: (
   splashBgDay: #85b6ff,