From d5f9df080c9ca2f9ed9e73029795b2105694db2e Mon Sep 17 00:00:00 2001
From: Wei Han <chuaweihan0101@gmail.com>
Date: Tue, 29 Oct 2024 19:46:40 -0700
Subject: [PATCH 1/4] Fix responsive layout on main page

- responsive mobile view for 'projects', 'learning', 'events' and 'contribute' cards
---
 pages/index.tsx    | 13 +++++++------
 styles/globals.css |  8 ++++++++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index cc4250f..5aa890c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -45,8 +45,9 @@ export default function Home({
           maintained by <ELink link="https://uclaacm.com">ACM at UCLA</ELink>,
           the largest computer science community at UCLA
         </p>
+
         <div className="row">
-          <div className="col-6">
+          <div className="col-6 col-mb-12">
             <div className="card">
               <div className="card-body">
                 <Link href="/projects">
@@ -56,7 +57,7 @@ export default function Home({
               </div>
             </div>
           </div>
-          <div className="col-6">
+          <div className="col-6 col-mb-12">
             <div className="card">
               <div className="card-body">
                 <ELink link="https://dev-pathways.netlify.app/">
@@ -68,8 +69,8 @@ export default function Home({
           </div>
         </div>
 
-        <div className="row mt-2">
-          <div className="col-6">
+        <div className="row">
+          <div className="col-6 col-mb-12">
             <div className="card">
               <div className="card-body">
                 <ELink link="https://uclaacm.com/events">
@@ -79,7 +80,7 @@ export default function Home({
               </div>
             </div>
           </div>
-          <div className="col-6">
+          <div className="col-6 col-mb-12">
             <div className="card">
               <div className="card-body">
                 <Link href="/contribute">
@@ -90,7 +91,7 @@ export default function Home({
             </div>
           </div>
         </div>
-        <hr className="mt-2" />
+        <hr />
 
         <h2>featured project</h2>
         <ProjectCard
diff --git a/styles/globals.css b/styles/globals.css
index f2b30de..ebfd6b2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -24,6 +24,14 @@ body {
   margin-top: 2rem;
 }
 
+.row {
+  margin-bottom: 1rem;
+}
+
+.col-mb-12 {
+  margin-bottom: 0.5rem;
+}
+
 .row.same-height-grid {
   row-gap: 2rem;
   overflow-wrap: break-word;

From 755378026bce96e955618d13badebfbacd49043c Mon Sep 17 00:00:00 2001
From: Wei Han <chuaweihan0101@gmail.com>
Date: Fri, 1 Nov 2024 00:27:45 -0700
Subject: [PATCH 2/4] Responsive ProjectCard

- add a useEffect hook to `components/ProjectCard.tsx` to use a vertical layout for small screens
- fixes issue on main page where random project is not responsive
---
 components/ProjectCard.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
index e37cb6e..0bd8d64 100644
--- a/components/ProjectCard.tsx
+++ b/components/ProjectCard.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/legacy/image';
-import React from 'react';
+import React, {useState, useEffect } from 'react';
 import ELink from './ELink';
 import { Project, GitHubColors } from '../util/';
 
@@ -123,7 +123,17 @@ function ProjectCard({
   githubColors,
   searchQuery = '',
 }: ProjectCardProps): JSX.Element {
-  if (vertical) {
+
+  // For mobile devices, set project card to be always in `vertical` format
+  const [isVertical, setIsVertical] = useState(vertical);
+  useEffect(() => {
+    const handleResize = () => setIsVertical(vertical || window.innerWidth < 540);
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [vertical]);
+
+  if (isVertical) {
     return (
       <div className="card">
         <ProjectCardImage project={project} preload={preload} />

From f780f04161925df2c69851d5bb399443de377b97 Mon Sep 17 00:00:00 2001
From: Wei Han <chuaweihan0101@gmail.com>
Date: Thu, 7 Nov 2024 15:49:17 -0800
Subject: [PATCH 3/4] Restrict project image size

- Limit project image size on smaller windows by wrapping each image in a max-height container
---
 components/ProjectCard.tsx | 59 ++++++++++++++++++++++----------------
 styles/globals.css         |  7 +++++
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
index 0bd8d64..4acb2c0 100644
--- a/components/ProjectCard.tsx
+++ b/components/ProjectCard.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/legacy/image';
-import React, {useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import ELink from './ELink';
 import { Project, GitHubColors } from '../util/';
 
@@ -18,28 +18,34 @@ interface ProjectCardImageProps {
 
 function ProjectCardImage({ project, preload }: ProjectCardImageProps) {
   const { image, alt, link } = project;
-  return link ? (
-    <ELink link={link}>
-      <Image
-        src={image ?? '/logo.png'}
-        alt={alt}
-        width="1000"
-        height="1000"
-        layout="responsive"
-        priority={preload}
-      />
-    </ELink>
-  ) : (
-    <>
-      <Image
-        src={image}
-        alt={alt}
-        width="1000"
-        height="1000"
-        layout="responsive"
-        priority={preload}
-      />
-    </>
+  return (
+    <div className="card-image-container">
+      {link ? (
+        <ELink link={link}>
+          <Image
+            src={image ?? '/logo.png'}
+            alt={alt}
+            width="1000"
+            height="1000"
+            layout="fill"
+            objectFit="contain"
+            priority={preload}
+          />
+        </ELink>
+      ) : (
+        <>
+          <Image
+            src={image}
+            alt={alt}
+            width="1000"
+            height="1000"
+            layout="fill"
+            objectFit="contain"
+            priority={preload}
+          />
+        </>
+      )}
+    </div>
   );
 }
 
@@ -123,7 +129,6 @@ function ProjectCard({
   githubColors,
   searchQuery = '',
 }: ProjectCardProps): JSX.Element {
-
   // For mobile devices, set project card to be always in `vertical` format
   const [isVertical, setIsVertical] = useState(vertical);
   useEffect(() => {
@@ -136,7 +141,9 @@ function ProjectCard({
   if (isVertical) {
     return (
       <div className="card">
+        {/* <div className="card-image-container"> */}
         <ProjectCardImage project={project} preload={preload} />
+        {/* </div> */}
         <ProjectCardBody
           searchQuery={searchQuery}
           project={project}
@@ -148,8 +155,10 @@ function ProjectCard({
   return (
     <div className="card">
       <div className="row">
-        <div className="col-6">
+        <div className="col-6 centered-content">
+          {/* <div className="card-image-container"> */}
           <ProjectCardImage project={project} preload={preload} />
+          {/* </div> */}
         </div>
         <div className="col-6">
           <ProjectCardBody
diff --git a/styles/globals.css b/styles/globals.css
index ebfd6b2..ef7afcd 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -42,6 +42,13 @@ body {
   height: 100%;
 }
 
+.card-image-container {
+  width: 100%;
+  height: 20rem;
+  max-height: 40vh;
+  position: relative;
+}
+
 .assignee-image {
   border-radius: 50%;
   overflow: hidden;

From d27791615f6d680e631464becb82f750de2aab5d Mon Sep 17 00:00:00 2001
From: Wei Han <chuaweihan0101@gmail.com>
Date: Thu, 14 Nov 2024 13:32:05 -0800
Subject: [PATCH 4/4] Remove code comments

---
 components/ProjectCard.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
index 4acb2c0..0830c42 100644
--- a/components/ProjectCard.tsx
+++ b/components/ProjectCard.tsx
@@ -141,9 +141,7 @@ function ProjectCard({
   if (isVertical) {
     return (
       <div className="card">
-        {/* <div className="card-image-container"> */}
         <ProjectCardImage project={project} preload={preload} />
-        {/* </div> */}
         <ProjectCardBody
           searchQuery={searchQuery}
           project={project}
@@ -156,9 +154,7 @@ function ProjectCard({
     <div className="card">
       <div className="row">
         <div className="col-6 centered-content">
-          {/* <div className="card-image-container"> */}
           <ProjectCardImage project={project} preload={preload} />
-          {/* </div> */}
         </div>
         <div className="col-6">
           <ProjectCardBody