fixes

Author: Su Yeon Lee

components/memberIcon.jsx

@@ -30,13 +30,21 @@ const TeamMemberIcon = ({ name, title, image, memberSlug, linkedIn }) => {
       </div>
       <style jsx>{`
         .team-icon {
-          width: 80%;
+          width: 120px;
+          height: 120px;
+          object-fit: cover;
+          border: 3px solid #f8f9fa;
         }
         .linkedin-icon {
           margin-bottom: 3px;
         }
         .team-icon:hover {
           box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+          transform: scale(1.05);
+          transition: all 0.3s ease;
+        }
+        .member-icon {
+          margin-bottom: 20px;
         }
       `}</style>
     </Col>

components/projects/Team.jsx

@@ -1,10 +1,10 @@
 import MemberIcon from '../memberIcon';
 import { Container, Row } from 'reactstrap';
 
-function Team({ members }) {
+function Team({ title, members }) {
   return (
     <section className="pt-5 mt-5">
-      <h2>Team Members</h2>
+      <h2>{title}</h2>
       <Container>
         <Row>
           {members.map((member) => (

components/projects/featureSlider.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Row, Col } from 'reactstrap';
 import { Spring } from 'react-spring/renderprops.cjs';
-import ContentBlock from '../ContentBlock';
+import TextBlock from '../TextBlock';
 
 function FeatureSlider({ features }) {
   const [currFeatureHeader, setCurrFeatureHeader] = React.useState(features[0].header);
@@ -23,7 +23,7 @@ function FeatureSlider({ features }) {
                           <img
                             className="img-fluid shadow"
                             src={image.url}
-                            alt={image.description}
+                            alt={image.description.json}
                           />
                         </div>
                       )}
@@ -44,7 +44,7 @@ function FeatureSlider({ features }) {
                     onClick={() => setCurrFeatureHeader(header)}>
                     <div className="pl-3">
                       <h3 className="feature-title">{header}</h3>
-                      {body && <ContentBlock content={body.json} />}
+                      {body && <TextBlock content={body} />}
                     </div>
                   </button>
                 </Row>

pages/projects/[projectSlug].jsx

@@ -23,6 +23,7 @@ function ProjectPage({
   testimonialsCollection,
   technologiesUsed,
   teamMembersCollection,
+  pmtlCollection,
 }) {
   return (
     <>
@@ -85,8 +86,8 @@ function ProjectPage({
           />
         );
       })}
-      {teamMembersCollection.items.length > 0 && <Team members={teamMembersCollection.items} />}
-
+      {pmtlCollection.items.length > 0 && <Team title="Project Leads" members={pmtlCollection.items} />}
+      {teamMembersCollection.items.length > 0 && <Team title="Team Members" members={teamMembersCollection.items} />}
       <Row className="d-flex justify-content-center mb-5">
         <ActionButton white link="/projects">
           See more of our projects
@@ -119,22 +120,22 @@ export default ProjectPage;
 
 export async function getStaticPaths() {
   try {
-    const {
-      pennWebsiteLayout: { projectsCollection },
+  const {
+    pennWebsiteLayout: { projectsCollection },
     } = await fetchNotionContent('projects');
 
-    const paths = projectsCollection.items
+  const paths = projectsCollection.items
       .filter((x) => !!x && !!x.urlSlug)
-      .map(({ urlSlug }) => ({
-        params: {
-          projectSlug: urlSlug,
-        },
-      }));
+    .map(({ urlSlug }) => ({
+      params: {
+        projectSlug: urlSlug,
+      },
+    }));
 
-    return {
-      paths,
-      fallback: false,
-    };
+  return {
+    paths,
+    fallback: false,
+  };
   } catch (error) {
     console.error('Error in getStaticPaths:', error);
     return {
@@ -150,15 +151,15 @@ export async function getStaticProps({ params: { projectSlug } }) {
 
     if (!formattedProject) {
       throw new Error(`No project found with slug: ${projectSlug}`);
-    }
+  }
 
-    return {
+  return {
       props: formattedProject,
     };
   } catch (error) {
     console.error('Error fetching project detail:', error);
     return {
       notFound: true,
-    };
+  };
   }
 }

pages/projects/index.jsx

@@ -7,6 +7,7 @@ import fetchNotionContent from '../../utils/fetchContent';
 import ActionButton from '../../components/actionButton';
 
 function Projects({ projects }) {
+  console.log(projects);
   return (
     <div>
       <Head title="Our Work" />

pages/team/[memberSlug].jsx

@@ -102,16 +102,16 @@ export async function getStaticPaths() {
 
     const paths = allMembers.memberCollection.items
       .filter(member => !!member.urlSlug)
-      .map(({ urlSlug }) => ({
-        params: {
-          memberSlug: urlSlug,
-        },
-      }));
+    .map(({ urlSlug }) => ({
+      params: {
+        memberSlug: urlSlug,
+      },
+    }));
 
-    return {
-      paths,
-      fallback: false,
-    };
+  return {
+    paths,
+    fallback: false,
+  };
   } catch (error) {
     console.error('Error in getStaticPaths:', error);
     return {
@@ -124,11 +124,11 @@ export async function getStaticPaths() {
 export async function getStaticProps({ params: { memberSlug } }) {
   try {
     const memberData = await fetchMemberDetail(memberSlug);
-    
+
     if (!memberData) {
       console.error(`No member found with slug: ${memberSlug}`);
-      return { notFound: true };
-    }
+    return { notFound: true };
+  }
 
     return {
       props: memberData,

utils/fetchContent.js

@@ -76,9 +76,7 @@ function parseFeatureCollection(featureImagesText, featureDescriptionsText) {
       url: url,
       description: descriptions[index] || `Feature ${index + 1} screenshot`
     },
-    body: {
-      json: descriptions[index] || `Description for feature ${index + 1}`
-    }
+    body: descriptions[index] || `Description for feature ${index + 1}` // ← Return plain text, not wrapped in json
   }));
 }
 
@@ -123,6 +121,12 @@ export async function fetchProjectDetail(urlSlug) {
       testimonialsCollection: {
         items: [] 
       },
+      pmtlCollection: {
+        items: properties.pmtl?.people?.map(person => ({
+          name: person.name || 'Team Member',
+          image: { url: person.avatar_url || '' },
+        })) || []
+      },
       teamMembersCollection: {
         items: properties.team?.people?.map(person => ({
           name: person.name || 'Team Member',
@@ -226,7 +230,12 @@ export async function fetchNotionContent(type, options = {}) {
         throw new Error(`Unknown content type: ${type}`);
     }
   } catch (error) {
-    console.error(`There was a problem retrieving content for type ${type}:`, error);
+    console.error(`DETAILED ERROR fetching ${type}:`, {
+      message: error.message,
+      code: error.code,
+      status: error.status,
+      stack: error.stack
+    });
     throw error;
   }
 }

utils/projectYear.js

@@ -1,5 +1,24 @@
 export default function groupByYearSort(a, b) {
-  const yearA = parseInt(a[0].split(' ')[1]);
-  const yearB = parseInt(b[0].split(' ')[1]);
-  return yearB - yearA;
+  // Extract semester and year from strings like "Spring 2023" or "Fall 2023"
+  const [semesterA, yearA] = a[0].split(' ');
+  const [semesterB, yearB] = b[0].split(' ');
+  
+  const yearNumA = parseInt(yearA);
+  const yearNumB = parseInt(yearB);
+  
+  // First sort by year (newest first)
+  if (yearNumA !== yearNumB) {
+    return yearNumB - yearNumA;
+  }
+  
+  // If same year, sort by semester (Fall comes after Spring chronologically)
+  const semesterOrder = {
+    'Spring': 1,
+    'Fall': 2,
+  };
+  
+  const orderA = semesterOrder[semesterA] || 0;
+  const orderB = semesterOrder[semesterB] || 0;
+
+  return orderB - orderA;
 }