Optimize

package.json

@@ -23,7 +23,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
-    "react-markdown": "^9.0.1"
+    "react-markdown": "^9.0.1",
+    "react-viewport-list": "^7.1.2"
   },
   "devDependencies": {
     "@types/lodash": "^4",

src/app/GlobalStyles.tsx

@@ -76,6 +76,7 @@ export default function GlobalStyles() {
         h1 {
           margin: 0;
           ${FontVariant.title_lg}
+          text-align: center;
         }
         ,
         *:focus-visible {

src/app/homepage/MediaSection.tsx

@@ -71,7 +71,7 @@ export const MediaSection = () => {
             justifyContent: 'center',
           }}
         >
-          <LinkButton href="https://www.youtube.com/@kixlabkaist5732" image="/images/youtube.svg" text="KIXLAB KAIST" />
+          <LinkButton href="https://www.youtube.com/@kixlabkaist5732" image="/images/youtube.svg" text="KIXLAB_KAIST" />
           <LinkButton href="https://x.com/kixlab_kaist" image="/images/twitter-x.svg" text="@kixlab_kaist" />
         </div>
       </Section>

src/app/homepage/NewsSection.tsx

@@ -1,42 +1,52 @@
 'use client'
-import { POSTS } from '@/data/posts'
-import React from 'react'
+import { POSTS, Post } from '@/data/posts'
+import React, { useState } from 'react'
 import { Section, SectionHeader, FullWidthContainer } from './Styles'
 import styled from '@emotion/styled'
 import { LinkButton } from '@/components/LinkButton'
 import { NewsCard } from '@/components/NewsCard'
+import { NewsModal } from '@/components/NewsModal'
+
+const minCardWidth = 200
+const gap = 24
+const sideMargins = 96
+const numCards = 4
 
 const NewsItemsArea = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 24px;
+  display: grid;
+  gap: ${gap}px;
   padding: 0;
-  flex-wrap: wrap;
-
-  > * {
-    flex: 1;
-    min-width: 200px;
+  grid-template-columns: repeat(auto-fit, minmax(${minCardWidth}px, 1fr));
+  @media (max-width: ${minCardWidth * 4 + gap * 3 + sideMargins * 2}px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  @media (max-width: ${minCardWidth * 2 + gap + sideMargins * 2}px) {
+    grid-template-columns: repeat(1, 1fr);
   }
 `
 
 export const NewsSection = () => {
-  const redirectToNewsPage = () => {
-    window.location.href = `/news`
-  }
+  const [modalContent, setModalContent] = useState<Post | null>(null)
 
   return (
     <FullWidthContainer>
       <Section id="news-section">
         <SectionHeader title="Latest News" subtitle="Check the latest news from KIXLAB" />
         <NewsItemsArea id="news area">
-          {POSTS.sort((a, b) => b.date.getTime() - a.date.getTime())
-            .slice(0, 4)
-            .map((post, index) => (
-              <NewsCard key={index} post={post} setModalContent={redirectToNewsPage} labelsOnLeft={true} />
-            ))}
+          {POSTS.slice(0, numCards).map((post, index) => (
+            <NewsCard key={index} post={post} setModalContent={setModalContent} labelsOnLeft={true} />
+          ))}
         </NewsItemsArea>
         <LinkButton href="/news" text="See More" style={{ alignSelf: 'center' }} />
       </Section>
+      {modalContent && (
+        <NewsModal
+          post={modalContent}
+          onClose={() => {
+            setModalContent(null)
+          }}
+        />
+      )}
     </FullWidthContainer>
   )
 }

src/app/news/page.tsx

@@ -15,8 +15,13 @@ const NewsSection = styled.div`
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  padding: 50px 0;
+  padding: 50px 0px;
   width: 100%;
+
+  @media (max-width: ${ScreenSize.sm}) {
+    padding: 0px 0px;
+  } 
+}
 `
 
 const NewsLine = styled.div`
@@ -39,7 +44,7 @@ const NewsLine = styled.div`
     transform: translate(-50%, -50%);
   }
 
-  @media (max-width: ${ScreenSize.xl}) {
+  @media (max-width: ${ScreenSize.md}) {
     display: none;
   }
 `
@@ -49,22 +54,22 @@ const NewsContainer = styled.div`
   display: grid;
   grid-template-colums: 1fr 1fr;
 
-  @media (max-width: ${ScreenSize.xl}) {
+  @media (max-width: ${ScreenSize.md}) {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 24px;
     padding: 0;
   }
 
-  @media (max-width: ${ScreenSize.md}) {
+  @media (max-width: ${ScreenSize.sm}) {
     grid-template-columns: 1fr;
   }
 
   & > div {
     width: 47%; // needs to be <50% to show gap between cards and vertical line
     margin-bottom: -${padding / 2}px;
 
-    @media (max-width: ${ScreenSize.xl}) {
+    @media (max-width: ${ScreenSize.md}) {
       width: 100%;
       margin-bottom: 0px;
     }
@@ -74,7 +79,7 @@ const NewsContainer = styled.div`
     margin-right: auto;
     text-align: right;
 
-    @media (max-width: ${ScreenSize.xl}) {
+    @media (max-width: ${ScreenSize.md}) {
       margin-left: 0px;
       margin-right: 0px;
       align-items: flex-start;
@@ -85,7 +90,7 @@ const NewsContainer = styled.div`
     margin-left: auto;
     text-align: left;
 
-    @media (max-width: ${ScreenSize.xl}) {
+    @media (max-width: ${ScreenSize.md}) {
       margin-left: 0px;
       margin-right: 0px;
       align-items: flex-start;
@@ -99,27 +104,23 @@ export default function Page() {
 
   return (
     <main>
-      <h1 style={{ textAlign: 'center' }}>News</h1>
+      <h1>News</h1>
       <NewsSection id="new section">
         <NewsLine />
         <NewsContainer id="news container">
-          {POSTS.sort((a, b) => b.date.getTime() - a.date.getTime()).map((post, index) => (
+          {POSTS.map((post, index) => (
             <NewsCard key={index} post={post} setModalContent={setModalContent} labelsOnLeft={index % 2 === 1} />
           ))}
         </NewsContainer>
       </NewsSection>
-      <div
-        style={{
-          display: modalContent ? 'block' : 'none',
-        }}
-      >
+      {modalContent && (
         <NewsModal
           post={modalContent}
           onClose={() => {
             setModalContent(null)
           }}
         />
-      </div>
+      )}
     </main>
   )
 }

src/app/people/page.tsx

@@ -15,7 +15,10 @@ import { ScreenSize, linearlyScaleSize } from '@/app/theme'
 const SectionContent = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 25px;
+  gap: 24px;
+  @media (max-width: ${ScreenSize.sm}) {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  }
 `
 
 const Container = styled.div`
@@ -45,12 +48,14 @@ const Container = styled.div`
   & > main {
     // make the main content (publications list) take up 85% and the Sidebar component 15%
     width: 85%;
+
+    @media (max-width: ${ScreenSize.sm}) {
+      width: 100%;
+    }
   }
 `
 const SideContainer = styled.div`
   padding-top: 96px;
-  padding-left: 30px;
-  padding-right: 30px;
   width: 15%;
   display: flex;
   flex-direction: column;
@@ -63,7 +68,7 @@ const AlumniSectionContent = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 1px;
-  @media (min-width: 1200px) {
+  @media (min-width: ${ScreenSize.xl}) {
     grid-template-columns: repeat(5, 1fr);
   }
 `

src/app/publications/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
-import React from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { useSearchParams, useRouter } from 'next/navigation'
 import styled from '@emotion/styled'
 import { PUBLICATIONS_BY_YEAR, PREPRINTS, PublicationTypes, ResearchTopics, Publication } from '@/data/publications'
@@ -13,6 +12,7 @@ import { Sidebar } from '@/components/SideBar'
 import { Divider } from '@/components/Divider'
 import _ from 'lodash'
 import { ScreenSize, linearlyScaleSize } from '@/app/theme'
+import { ViewportList } from 'react-viewport-list'
 
 const Container = styled.div`
   display: flex;
@@ -41,6 +41,10 @@ const Container = styled.div`
   & > main {
     // make the main content (publications list) take up 85% and the Sidebar component 15%
     width: 85%;
+
+    @media (max-width: ${ScreenSize.sm}) {
+      width: 100%;
+    }
   }
 `
 
@@ -145,9 +149,9 @@ export default function Page() {
                   >
                     <SectionTitle>{sectionName}</SectionTitle>
                     <SectionContent>
-                      {publicationList[sectionName].map(pub => (
-                        <PublicationCard key={pub.title} pub={pub} />
-                      ))}
+                      <ViewportList items={publicationList[sectionName]}>
+                        {(pub, index) => <PublicationCard key={pub.title} pub={pub} />}
+                      </ViewportList>
                     </SectionContent>
                   </Section>
                   <Divider />

src/components/MemberCard.tsx

@@ -12,7 +12,6 @@ const Card = styled.div`
   flex-direction: column;
   gap: 16px;
   align-items: center;
-  width: 200px;
 `
 
 const Info = styled.div`