From 8a4be33420fdbc9b81415e4b4a1223ed11133601 Mon Sep 17 00:00:00 2001
From: JilianaTiu <jilianatiu@gmail.com>
Date: Mon, 7 Nov 2022 08:11:38 -0800
Subject: [PATCH 1/7] update README

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d6cd7f8..436cb86 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ Please create a new branch for development (i.e. `[NAME]-dev`). Pushing directly
 
 To build the site, run `npm run build`.
 
-To view the site on your local network, run `npm build/index.js`. View the site at [localhost:9000](http://localhost:9000).
+To view the site on your local network, run `npm run serve`. View the site at [localhost:9000](http://localhost:9000).
 
 ### Images
 

From b80b7325550bb5fe4db3c763535bbefca927c704 Mon Sep 17 00:00:00 2001
From: JilianaTiu <jilianatiu@gmail.com>
Date: Mon, 7 Nov 2022 08:13:57 -0800
Subject: [PATCH 2/7] create committee box component

---
 src/public/components/CommitteeBox.tsx | 29 ++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/public/components/CommitteeBox.tsx

diff --git a/src/public/components/CommitteeBox.tsx b/src/public/components/CommitteeBox.tsx
new file mode 100644
index 0000000..f99340f
--- /dev/null
+++ b/src/public/components/CommitteeBox.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Component } from "react";
+
+interface CommitteeBoxProps {
+    boxTitle: string;
+    image: string;
+    description: string;
+}
+
+export default class CommitteeBox extends Component<CommitteeBoxProps> {
+    constructor(props: CommitteeBoxProps) {
+        super(props);
+        this.state = {};
+    }
+
+    public render() {
+        return (
+            <div className="committee-card">
+                <div className="committee-title">{this.props.boxTitle}</div>
+                <div className="committee-img">
+                    <img src={this.props.image}></img>
+                </div>
+                <div className="committee-description">
+                    {this.props.description}
+                </div>
+            </div>
+        );
+    }
+}

From 0065969a230af999954aae19e9656f24d8684c34 Mon Sep 17 00:00:00 2001
From: JilianaTiu <jilianatiu@gmail.com>
Date: Mon, 7 Nov 2022 08:21:06 -0800
Subject: [PATCH 3/7] use committee boxes

---
 src/public/committees.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/public/committees.tsx b/src/public/committees.tsx
index 69c841a..e031fb3 100644
--- a/src/public/committees.tsx
+++ b/src/public/committees.tsx
@@ -8,6 +8,7 @@ import InvolveBox from "./components/InvolveBox";
 import SocialCard from "./components/SocialCard";
 import Carousel from "./components/Carousel";
 import Footer from "./components/Footer";
+import CommitteeBox from "./components/CommitteeBox";
 
 class Main extends React.Component {
     constructor() {
@@ -32,31 +33,31 @@ class Main extends React.Component {
                 ></DefaultSection>
                 <DefaultSection className={"our-comms"} title="Our Committees">
                     <div className="cards">
-                        <InvolveBox
+                        <CommitteeBox
                             boxTitle=""
                             image="/assets/img/committees/technical.webp"
                             description="Technical Committee"
-                        ></InvolveBox>
-                        <InvolveBox
+                        ></CommitteeBox>
+                        <CommitteeBox
                             boxTitle=""
                             image="/assets/img/committees/social.webp"
                             description="Social Committee"
-                        ></InvolveBox>
-                        <InvolveBox
+                        ></CommitteeBox>
+                        <CommitteeBox
                             boxTitle=""
                             image="/assets/img/committees/professional.webp"
                             description="Professional Committee"
-                        ></InvolveBox>
-                        <InvolveBox
+                        ></CommitteeBox>
+                        <CommitteeBox
                             boxTitle=""
                             image="/assets/img/committees/pr.webp"
                             description="PR Committee"
-                        ></InvolveBox>
-                        <InvolveBox
+                        ></CommitteeBox>
+                        <CommitteeBox
                             boxTitle=""
                             image="/assets/img/committees/outreach.webp"
                             description="Outreach Committee"
-                        ></InvolveBox>
+                        ></CommitteeBox>
                     </div>
                 </DefaultSection>
 

From a6f48d9d429530d9873a4eef15fe4faefd4612bb Mon Sep 17 00:00:00 2001
From: JilianaTiu <jilianatiu@gmail.com>
Date: Mon, 7 Nov 2022 08:22:00 -0800
Subject: [PATCH 4/7] update involve box component

---
 src/public/components/InvolveBox.tsx | 40 +++++++++-------------------
 1 file changed, 13 insertions(+), 27 deletions(-)

diff --git a/src/public/components/InvolveBox.tsx b/src/public/components/InvolveBox.tsx
index 35f2c9a..e74aeb1 100644
--- a/src/public/components/InvolveBox.tsx
+++ b/src/public/components/InvolveBox.tsx
@@ -14,33 +14,19 @@ export default class InvolveBox extends Component<InvolveBoxProps> {
     }
 
     public render() {
-        if (this.props.boxTitle) {
-            return (
-                <a
-                    href={"/" + this.props.boxTitle.toLowerCase()}
-                    className="involve-card"
-                >
-                    <div className="involve-title">{this.props.boxTitle}</div>
-                    <div className="involve-img">
-                        <img src={this.props.image}></img>
-                    </div>
-                    <div className="involve-description">
-                        {this.props.description}
-                    </div>
-                </a>
-            );
-        } else {
-            return (
-                <div className="involve-card">
-                    <div className="involve-title">{this.props.boxTitle}</div>
-                    <div className="involve-img">
-                        <img src={this.props.image}></img>
-                    </div>
-                    <div className="involve-description">
-                        {this.props.description}
-                    </div>
+        return (
+            <a
+                href={"/" + this.props.boxTitle.toLowerCase()}
+                className="involve-card"
+            >
+                <div className="involve-title">{this.props.boxTitle}</div>
+                <div className="involve-img">
+                    <img src={this.props.image}></img>
                 </div>
-            );
-        }
+                <div className="involve-description">
+                    {this.props.description}
+                </div>
+            </a>
+        );
     }
 }

From 8d1fbe9ead330728608c3c8f0d2a0dc451a5f990 Mon Sep 17 00:00:00 2001
From: JilianaTiu <jilianatiu@gmail.com>
Date: Mon, 7 Nov 2022 08:41:50 -0800
Subject: [PATCH 5/7] add committee descriptions

---
 src/public/committees.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/public/committees.tsx b/src/public/committees.tsx
index e031fb3..fe3e426 100644
--- a/src/public/committees.tsx
+++ b/src/public/committees.tsx
@@ -28,35 +28,35 @@ class Main extends React.Component {
                 <DefaultSection
                     title="Join us!"
                     paragraphs={[
-                        "Interested in gaining experience of event planning and development, meeting new friends, and learning more about IEEE? Join one of our committees as an IEEEntern!",
+                        "Interested in gaining experience in event planning and development, meeting new friends, and learning more about IEEE? Join one of our committees as an IEEEntern!",
                     ]}
                 ></DefaultSection>
                 <DefaultSection className={"our-comms"} title="Our Committees">
                     <div className="cards">
                         <CommitteeBox
-                            boxTitle=""
+                            boxTitle="Technical Committee"
                             image="/assets/img/committees/technical.webp"
-                            description="Technical Committee"
+                            description="The Technical Committee is responsible for maintaining and improving the organization's technical skills program. Through developing, planning, and executing a minimum of six technical events throughout the year, this chair seeks to improve students’ technical skills. Events can include PCB, soldering, hardware, and software. You can build anything with students!"
                         ></CommitteeBox>
                         <CommitteeBox
-                            boxTitle=""
+                            boxTitle="Social Committee"
                             image="/assets/img/committees/social.webp"
-                            description="Social Committee"
+                            description="The Social Committee is in charge of planning and executing social events that create bonding opportunities for officers and our student members. Interested in arranging a hike at Torrey Pines? Sharing some free food and drinks in Warren Mall? Going out for an escape room challenge? There are tons of ideas waiting for you to implement!"
                         ></CommitteeBox>
                         <CommitteeBox
-                            boxTitle=""
+                            boxTitle="Professional Committee"
                             image="/assets/img/committees/professional.webp"
-                            description="Professional Committee"
+                            description="The Professional Committee is responsible for maintaining and improving the organization’s professional development program. Through developing, planning, and executing a minimum of six professional events throughout the year, such as, workshops on developing professional skills, company (sponsor) information sessions, tech talks, tours, and the annual ECE day (partnered with the VC External), this committee seeks to improve students’ professional skills."
                         ></CommitteeBox>
                         <CommitteeBox
-                            boxTitle=""
+                            boxTitle="PR Committee"
                             image="/assets/img/committees/pr.webp"
-                            description="PR Committee"
+                            description="The PR Comittee is responsible for creating and printing flyers, photographs, and other media. They also aid in managing the Branch's social media presence by distributing the news of the Branch's events, projects, and outreach."
                         ></CommitteeBox>
                         <CommitteeBox
-                            boxTitle=""
+                            boxTitle="Outreach Committee"
                             image="/assets/img/committees/outreach.webp"
-                            description="Outreach Committee"
+                            description="The Outreach Committee is responsible for hosting outreach events that will benefit K-12 students within the STEM fields including the annual Boy Scout STEM Merit Badge Fair, Girls STEM Fair, and Sumobot Robotics Competition. Up for the challenge to explain Ohm's Law to a 10-year-old?"
                         ></CommitteeBox>
                     </div>
                 </DefaultSection>

From 464c27442a300b7b30069f52c58510e49ce1c43e Mon Sep 17 00:00:00 2001
From: JilianaTiu <jilianatiu@gmail.com>
Date: Mon, 7 Nov 2022 08:43:16 -0800
Subject: [PATCH 6/7] remove involve box import in committees page

---
 src/public/committees.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/public/committees.tsx b/src/public/committees.tsx
index fe3e426..d1045aa 100644
--- a/src/public/committees.tsx
+++ b/src/public/committees.tsx
@@ -4,7 +4,6 @@ import TopBar from "./components/TopBar";
 import { ACTIVE_PAGES, SOCIALS, EMAIL, OFFICERS } from "./Config";
 import Splash from "./components/Splash";
 import DefaultSection from "./components/DefaultSection";
-import InvolveBox from "./components/InvolveBox";
 import SocialCard from "./components/SocialCard";
 import Carousel from "./components/Carousel";
 import Footer from "./components/Footer";

From 786ff4de76192187ec59e5a3f3d480c52c4ee82c Mon Sep 17 00:00:00 2001
From: JilianaTiu <jilianatiu@gmail.com>
Date: Tue, 8 Nov 2022 00:08:28 -0800
Subject: [PATCH 7/7] update style for committees

---
 src/public/assets/css/styles.css       | 58 +++++++++++++++++++++++---
 src/public/committees.tsx              |  2 +-
 src/public/components/CommitteeBox.tsx |  8 ++--
 3 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/src/public/assets/css/styles.css b/src/public/assets/css/styles.css
index 654393d..4397c4a 100644
--- a/src/public/assets/css/styles.css
+++ b/src/public/assets/css/styles.css
@@ -232,7 +232,7 @@ a:hover {
 
 .cards {
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     flex-wrap: wrap;
 }
 
@@ -273,11 +273,59 @@ a:hover {
     margin-bottom: 0.5em;
 }
 
-/* .involve-card > img {
-    width: 20em;
-    margin-bottom: 1em;
+.committees {
+    border-radius: 50% 50% 0 0 / 4rem;
+    transform: translateY(-4rem);
+}
+
+.committee-card {
+    padding: 1.75em 3em;
+    border: var(--main) solid 0.37em;
+    border-radius: 1.5em;
+    color: var(--secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin: 1em;
+    background-color: var(--main);
+    background-blend-mode: multiply;
+    background-position: center;
+    background-size: cover;
+    width: 30em;
+}
+
+.committee-img {
+    display: inline-block;
+    margin: 20px;
+    overflow: hidden;
     border-radius: 0.2em;
-} */
+    width: 10;
+}
+
+.committee-card img {
+    display: block;
+    transition: transform 0.4s;
+    width: 20em;
+    border-radius: 0.2em;
+}
+
+.committee-card:hover img {
+    transform: scale(1.1);
+    transform-origin: 50% 50%;
+}
+
+.committee-title {
+    font-size: 3em;
+    color: var(--secondary);
+    margin-bottom: 0.5em;
+    text-align: center;
+}
+
+.committee-description {
+    font-size: 1.25em;
+    font-weight: normal;
+}
 
 .links {
     font-size: 1.5em;
diff --git a/src/public/committees.tsx b/src/public/committees.tsx
index d1045aa..aefc49e 100644
--- a/src/public/committees.tsx
+++ b/src/public/committees.tsx
@@ -30,7 +30,7 @@ class Main extends React.Component {
                         "Interested in gaining experience in event planning and development, meeting new friends, and learning more about IEEE? Join one of our committees as an IEEEntern!",
                     ]}
                 ></DefaultSection>
-                <DefaultSection className={"our-comms"} title="Our Committees">
+                <DefaultSection className={"committees"} title="Our Committees">
                     <div className="cards">
                         <CommitteeBox
                             boxTitle="Technical Committee"
diff --git a/src/public/components/CommitteeBox.tsx b/src/public/components/CommitteeBox.tsx
index f99340f..488890b 100644
--- a/src/public/components/CommitteeBox.tsx
+++ b/src/public/components/CommitteeBox.tsx
@@ -15,10 +15,10 @@ export default class CommitteeBox extends Component<CommitteeBoxProps> {
 
     public render() {
         return (
-            <div className="committee-card">
-                <div className="committee-title">{this.props.boxTitle}</div>
-                <div className="committee-img">
-                    <img src={this.props.image}></img>
+            <div className="committee-card"
+            style = {{ backgroundImage: `url(${this.props.image})` }}>
+                <div className="committee-title">
+                    {this.props.boxTitle}
                 </div>
                 <div className="committee-description">
                     {this.props.description}