From 09886141e4c293a3b833c8dd7b6febdc6c9bad77 Mon Sep 17 00:00:00 2001
From: Weile <weilez@umich.edu>
Date: Sun, 15 Sep 2024 17:11:20 -0400
Subject: [PATCH 1/3] redesign-community-image

---
 components/communityImages.jsx | 15 ++++++++-------
 config/communityImages.json    |  8 ++++----
 styles/globals.css             | 30 ++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/components/communityImages.jsx b/components/communityImages.jsx
index 7cb0f2c..00165fc 100644
--- a/components/communityImages.jsx
+++ b/components/communityImages.jsx
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { useState } from "react";
 
 export default function CommunityImages({ images, basePath }) {
@@ -15,18 +14,21 @@ export default function CommunityImages({ images, basePath }) {
   };
 
   return (
-    <div className="items-center mx-auto max-w-6xl">
-      <div className="relative">
+    <div className="items-center mx-auto">
+      <div className="relative community-image-container">
         <button
           onClick={prevImage}
-          className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-500 text-white p-2 rounded"
+          className="absolute left-12 top-1/2 transform -translate-y-1/2 bg-gray-500 text-white p-2 rounded"
         >
           ❮
         </button>
+        <h1 className="community-image-headline gradient-text">
+          {images[currentIndex].name}
+        </h1>
         <div
           style={{
             margin: "auto",
-            width: "85%",
+            width: "70%",
             aspectRatio: 16 / 9,
           }}
         >
@@ -46,12 +48,11 @@ export default function CommunityImages({ images, basePath }) {
         </div>
         <button
           onClick={nextImage}
-          className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-500 text-white p-2 rounded"
+          className="absolute right-12 top-1/2 transform -translate-y-1/2 bg-gray-500 text-white p-2 rounded"
         >
           ❯
         </button>
       </div>
-      <p className="text-base mt-2">{images[currentIndex].name}</p>
     </div>
   );
 }
diff --git a/config/communityImages.json b/config/communityImages.json
index d652446..d361aae 100644
--- a/config/communityImages.json
+++ b/config/communityImages.json
@@ -1,18 +1,18 @@
 [
   {
-    "name": "",
+    "name": "Winter 2024 Project Expo",
     "image": "WN24_EXPO.JPG"
   },
   {
-    "name": "",
+    "name": "Winter 2024 Data Science Night",
     "image": "WN24_DSN.JPG"
   },
   {
-    "name": "",
+    "name": "Fall 2024 Mass Meeting 1",
     "image": "mass_meeting1.JPG"
   },
   {
-    "name": "",
+    "name": "Fall 2024 Mass Meeting 2",
     "image": "mass_meeting2.JPG"
   }
 ]
diff --git a/styles/globals.css b/styles/globals.css
index cd5abf2..4c2b3c7 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -206,6 +206,36 @@
   font-weight: bold;
 }
 
+.community-image-headline {
+  font-size: 2rem;
+  text-align: center;
+}
+
+.community-image-container {
+  background-color: rgb(21, 21, 21);
+  margin-bottom: 7%;
+  padding-top: 3%;
+  padding-bottom: 10%;
+  width: 100%;
+}
+.community-image-container::before,
+.community-image-container::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(to right, #4f3168, #feb47b); /* Gradient colors */
+}
+
+.community-image-container::before {
+  top: 0; /* Position at the top */
+}
+
+.community-image-container::after {
+  bottom: 0; /* Position at the bottom */
+}
+
 /* Hover effect */
 .scroll-up-button:hover {
   background-color: #896ae4;

From 3a6b5aa48951a5f71dbd0500d69aa5f68ee2b4d8 Mon Sep 17 00:00:00 2001
From: Weile <weilez@umich.edu>
Date: Sun, 15 Sep 2024 17:16:28 -0400
Subject: [PATCH 2/3] update color scheme

---
 styles/globals.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/styles/globals.css b/styles/globals.css
index 4c2b3c7..b80c65b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -22,8 +22,8 @@
 .gradient-text {
   background: linear-gradient(
     90deg,
-    #896ae4,
-    #feb47b
+    #c0abfe,
+    #90f7df
   ); /* Adjust the gradient colors as needed */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -225,7 +225,7 @@
   left: 0;
   width: 100%;
   height: 3px;
-  background: linear-gradient(to right, #4f3168, #feb47b); /* Gradient colors */
+  background: linear-gradient(to right, #896ae4, #34c5a2); /* Gradient colors */
 }
 
 .community-image-container::before {

From 458f22a29d8a53fd1c0455c0bcb5720bc0c4084b Mon Sep 17 00:00:00 2001
From: Weile <weilez@umich.edu>
Date: Sun, 15 Sep 2024 17:49:14 -0400
Subject: [PATCH 3/3] remove-wave

---
 pages/index.jsx    | 5 ++---
 styles/globals.css | 8 ++++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/pages/index.jsx b/pages/index.jsx
index b114721..755b6f9 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -141,6 +141,7 @@ export default function Home({
     </Layout>
   );
 }
+
 function ProjectCard({ json, basePath }) {
   return (
     <Link
@@ -228,8 +229,7 @@ function Carousel({ projects, basePath }) {
   }
   return (
     <div className="bg-grey">
-      <Wave180 className="rotate-180"></Wave180>
-      <div className="container mx-auto py-4 relative overflow-hidden">
+      <div className="container mx-auto mt-16 mb-16 py-4 p-4 relative overflow-hidden">
         <h2 className="text-3xl text-center font-bold">Recent Projects</h2>
         <div
           className="flex gap-4 flex-row p-4 justify-center transition"
@@ -264,7 +264,6 @@ function Carousel({ projects, basePath }) {
           <Icon className="" name="arrow-right" />
         </button>
       </div>
-      <Wave></Wave>
     </div>
   );
 }
diff --git a/styles/globals.css b/styles/globals.css
index b80c65b..ad15874 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -48,6 +48,9 @@
   }
 }
 
+.project-card-home {
+  background: linear-gradient(90deg, #c0abfe, #90f7df);
+}
 .markdown h1 {
   @apply text-4xl;
   @apply mb-4;
@@ -250,6 +253,11 @@ html {
   scroll-behavior: smooth;
 }
 
+footer {
+  border-top: 0.5px solid;
+  border-top-color: #cabbf6;
+  background-color: rgb(21, 21, 21);
+}
 /* Scroll to top when button is clicked */
 .scroll-up-button:target {
   scroll-behavior: auto;