Merge pull request #130 from acm-ucr/dev

merge to main

src/app/about/page.js

@@ -1,4 +1,5 @@
 import Title from "@/components/Title";
+import Picture from "@/components/Picture";
 import Subtitle from "@/components/Subtitle";
 import logo from "../../../public/assets/fullLogo.webp";
 import img1 from "../../../public/images/AboutPic1.webp";
@@ -7,26 +8,23 @@ import img2 from "../../../public/images/AboutPic2.webp";
 const page = () => {
   return (
     <div className="py-20 w-10/12 md:w-2/3  lg:w-1/2 flex flex-col items-center gap-3">
+      <div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
       <Title subTitle="LEARN WHO WE ARE" title="ABOUT US" />
       <img
-        className="w-full"
+        className="w-full relative"
         src={logo.src}
         alt="Engineers Without Borders Logo"
       />
-      <div className="text-justify">
+      <div className="text-justify py-4">
         Founded in 2007, the University of California, Riverside Chapter of
         Engineers Without Borders is part of the Inland Empire Chapter (EWB-IE,
         along with Cal Poly Pomona and the Inland Empire professional chapter).
         We are dedicated to serving the UCR campus, the City of Riverside, and
         any community across the world that needs our technical expertise.
       </div>
-      <img
-        className="my-2 w-full"
-        src={img1.src}
-        alt="Community of Riverside"
-      />
+      <Picture picture={img1.src} />
       <Subtitle title="OVERVIEW" beginning={true} />
-      <div className="text-justify items-center">
+      <div className="text-justify items-center py-4">
         The student members in the Engineers Without Borders Student Chapter at
         the University of California, Riverside recognize that we are privileged
         to live in the U.S. where higher education and healthier living
@@ -37,7 +35,7 @@ const page = () => {
         not focus on a specific engineering major but encourage all people
         regardless of gender identity, religion, and background.
       </div>
-      <img className="my-2 w-full" src={img2.src} />
+      <Picture picture={img2.src} />
     </div>
   );
 };

src/app/board/page.js

@@ -6,8 +6,9 @@ const page = () => {
   return (
     <div className="relative w-3/4 md:w-full flex flex-col items-center mt-14">
       <div className="absolute aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
+      <div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
       <Title title="MEET THE TEAM" />
-      <div className="relative grid grid-cols-1 md:grid-cols-4 w-full md:w-9/12 gap-8 mt-14">
+      <div className="relative grid grid-cols-1 md:grid-cols-4 w-full md:w-9/12 gap-8 my-14">
         {BOARD.map((item, index) => (
           <Board
             key={index}

src/app/projects/tanzania/page.js

@@ -5,7 +5,7 @@ import header from "../../../../public/images/tanzania/tanzaniaHeader.webp";
 const page = () => {
   return (
     <>
-      <Header img={header.src} title="Project" />
+      <Header img={header.src} title="Tanzania Project" />
       <Tanzania />
     </>
   );

src/app/projects/water-quality-and-filtration/page.js

@@ -1,8 +1,11 @@
 import WaterQuality from "@/components/projects/WaterQuality";
+import Header from "@/components/projects/Header";
+import header from "../../../../public/images/WaterQualityAndFiltration/WaterQualityAndFiltrationHeader.webp";
 
 const page = () => {
   return (
     <>
+      <Header img={header.src} title="Water Quality and Filtration" />
       <WaterQuality />
     </>
   );

src/components/board/Board.jsx

@@ -3,7 +3,7 @@ import { ICONS } from "@/data/icons";
 
 const Board = ({ name, position, grade, major, links, pronouns, picture }) => {
   return (
-    <div className="w-full bg-gray-200 my-4 shadow-[12px_-12px_0px_0px] shadow-ewb-green p-4">
+    <div className="w-full bg-gray-200 shadow-[12px_-12px_0px_0px] shadow-ewb-green p-4">
       <div className="font-semibold text-ewb-blue-200 text-2xl">{name}</div>
       <div className="font-light text-lg">{position}</div>
       <div className="flex gap-2">

src/components/home/WhyJoin.jsx

@@ -7,7 +7,7 @@ const WhyJoin = () => {
   return (
     <div className="w-10/12 md:w-2/3  lg:w-1/2 flex flex-col items-center gap-10">
       <div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
-      <Title subTitle="GET INVOLVED AND MAKE AN IMPACT!" title="WHY JOIN EWB" />
+      <Title subTitle="GET INVOLVED AND MAKE AN IMPACT" title="WHY JOIN EWB" />
       <div className="relative text-center w-full">
         Engineers Without Borders at UCR currently hosts several projects,
         professional development events, and club activities for members to

src/components/projects/ AirQuality.jsx

@@ -22,7 +22,7 @@ const AirQuality = () => {
       <img
         src={img1.src}
         alt="Air Quality System 1"
-        className="col-span-3 md:col-span-1"
+        className="col-span-3 md:col-span-1 mx-auto"
       />
       <div className="col-span-3 md:col-span-2 justify-center flex flex-col">
         <Subtitle title="Motivation" />
@@ -33,7 +33,7 @@ const AirQuality = () => {
           <li className="mb-2">
             Air quality poses a threat to people all over the world, by
             developing this system; we present a solution that would otherwise
-            be unobtainable to developing communities.
+            be unobtainable to developing communities
           </li>
           <li className="mb-2">
             Make an impact on someone&apos;s life by improving quality of life
@@ -47,7 +47,7 @@ const AirQuality = () => {
       <img
         src={img2.src}
         alt="Air Quality System 2"
-        className="col-span-3 md:col-span-1"
+        className="col-span-3 md:col-span-1 mx-auto"
       />
 
       <div className="col-span-3 md:col-span-2 justify-center flex flex-col">
@@ -58,11 +58,11 @@ const AirQuality = () => {
         >
           <li className="mb-2">
             Gas sensor system will be able to detect a series of contaminants in
-            the are including Ozone, Carbon Monoxide, Methane, and CO2.
+            the are including Ozone, Carbon Monoxide, Methane, and CO2
           </li>
           <li className="mb-2">
             Ventilation system will be controlled by gas sensing micro
-            controller to maximize power and filter life.
+            controller to maximize power and filter life
           </li>
           <li className="mb-2">
             Gas Sensing unit will be able to alert user and recommend proper
@@ -73,7 +73,7 @@ const AirQuality = () => {
       <img
         src={img3.src}
         alt="Air Quality System 3"
-        className="col-span-3 md:col-span-1"
+        className="col-span-3 md:col-span-1 mx-auto"
       />
     </div>
   );

src/components/projects/CostaRica.jsx

@@ -4,8 +4,8 @@ import img2 from "../../../public/images/costaRica/CostaRica2.gif";
 
 const CostaRica = () => {
   return (
-    <div className="grid grid-cols-3 gap-10 my-16 justify-around w-10/12 md:w-9/12">
-      <div className="col-span-3 md:col-span-2 pb-4">
+    <div className="grid grid-cols-3 gap-10 my-16 justify-around md:w-9/12">
+      <div className="col-span-3 md:col-span-2 pl-4 pb-4">
         <Subtitle title="General Overview" />
         <div className="ml-2 mt-1">
           In collaboration with Claudia Chaves Villarreal, a Ph.D. Candidate and
@@ -21,10 +21,10 @@ const CostaRica = () => {
       <img
         src={img1.src}
         alt="Costa Rica Image 1"
-        className="col-span-3 md:col-span-1"
+        className="col-span-3 md:col-span-1 mx-auto"
       />
 
-      <div className="col-span-3 md:col-span-2 pb-4">
+      <div className="col-span-3 md:col-span-2 pl-4 pb-4">
         <Subtitle
           title="Motivation"
           description="Rural communities are already disadvantaged socioeconomically"
@@ -47,10 +47,10 @@ const CostaRica = () => {
       <img
         src={img2.src}
         alt="Costa Rica Image 2"
-        className="col-span-3 md:col-span-1"
+        className="col-span-3 md:col-span-1 mx-auto"
       />
 
-      <div className="col-span-3 pb-4">
+      <div className="col-span-3 pl-4 pb-4">
         <Subtitle
           title="Educational Micro Controller Projects"
           description="Education is very hard to obtain affecting isolated rural communities the most"
@@ -72,10 +72,10 @@ const CostaRica = () => {
             </li>
             <li>
               A water treatment system will also be implemented, to learn more
-              check out the
+              check out the{" "}
               <a
                 href="water-quality-and-filtration"
-                className="text-ewb-blue-200 font-bold hover:text-ewb-green"
+                className="text-ewb-blue-200 font-bold underline hover:text-ewb-green"
               >
                 water quality and filtration
               </a>

src/components/projects/Robotics.jsx

@@ -13,12 +13,8 @@ const Robotics = () => {
           robotics, don't hesitate to join!
         </p>
       </div>
-      <div>
-        <img
-          src={img1.src}
-          alt="Robotics 1 gif"
-          className="col-span-3 md:col-span-1"
-        />
+      <div className="col-span-3 md:col-span-1">
+        <img src={img1.src} alt="Robotics 1 gif" />
       </div>
 
       <div className="col-span-3 justify-center flex flex-col">
@@ -53,21 +49,21 @@ const Robotics = () => {
           <li className="mb-2">
             By learning robotics, you are inherently learning how to work with a
             micro controller. A device that allows you to do so many things, as
-            can be seen in the other pages of this website.
+            can be seen in the other pages of this website
           </li>
           <li className="mb-2">
             The use of a micro controller allows for a cheap and effective way
             to communicate with devices. It allows us to construct specialized
-            systems.
+            systems
           </li>
           <li className="mb-2">
             Micro controllers allow for adaptations to be made to the system
             whenever needed. This provides flexibility that other systems do not
-            have.
+            have
           </li>
           <li className="mb-2">
             We can also create interfaces that make it easier for the user to
-            interact with.
+            interact with
           </li>
         </ul>
       </div>

src/components/projects/WaterQuality.jsx

@@ -16,15 +16,17 @@ const WaterQuality = () => {
           implemented is needed.
         </p>
       </div>
-      <iframe
-        width="400"
-        height="230"
-        src="https://www.youtube.com/embed/BCHhwxvQqxg?si=24cjxFngXhooUjca"
-        title="YouTube video player"
-        frameBorder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen
-      />
+      <div className="col-span-3 md:col-span-1">
+        <iframe
+          width="100%"
+          height="230"
+          src="https://www.youtube.com/embed/BCHhwxvQqxg?si=24cjxFngXhooUjca"
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowfullscreen
+        />
+      </div>
       <div className="col-span-3 md:col-span-2 justify-center flex flex-col">
         <Subtitle title="Motivation" description="Water Quality System" />
         <ul
@@ -83,14 +85,14 @@ const WaterQuality = () => {
             check out{" "}
             <a
               href="tanzania"
-              className="text-ewb-blue-200 font-bold hover:text-ewb-green"
+              className="text-ewb-blue-200 underline font-bold hover:text-ewb-green"
             >
               Tanzania
             </a>{" "}
             and{" "}
             <a
               href="costa-rica"
-              className="text-ewb-blue-200 font-bold hover:text-ewb-green"
+              className="text-ewb-blue-200 underline font-bold hover:text-ewb-green"
             >
               Costa Rica
             </a>
@@ -102,12 +104,12 @@ const WaterQuality = () => {
           <li className="mb-2">
             Using a UV system to calculate time needed for water to be exposed
             for maximum power efficiency. By calculating volume of water and
-            level of contamination from feedback from other sensors.
+            level of contamination from feedback from other sensors
           </li>
           <li className="mb-2">
             An automated system is needed to monitor the life of the filter. By
             measuring these parameters, one can confidently know when to replace
-            the filter.
+            the filter
           </li>
         </ul>
       </div>

src/data/mockBoard.js

@@ -7,6 +7,14 @@ export const BOARD = [
     major: "Materials Science and Engineering ",
     pronouns: "He/Him",
   },
+  {
+    name: "Win Thant Tin Han",
+    position: "Vice President",
+    links: {},
+    grade: "3rd Year",
+    major: "Computer Science",
+    pronouns: "He/him/his",
+  },
   {
     name: "Leslie Kin",
     position: "Webmaster & Social Media",
@@ -18,47 +26,22 @@ export const BOARD = [
     pronouns: "She/Her/Hers",
   },
   {
-    name: "Evan Littlecat",
-    position: "President",
-    links: {
-      email: "mailto:[email protected]",
-      linkedin: "mailto:[email protected]",
-    },
-    grade: "Sophmore",
-    major: "Comp Sci",
-    pronouns: "She/Her/Hers",
-  },
-  {
-    name: "Evan Littlecat",
-    position: "President",
-    links: {
-      email: "mailto:[email protected]",
-      linkedin: "mailto:[email protected]",
-    },
-    grade: "Sophmore",
-    major: "Comp Sci",
-    pronouns: "She/Her/Hers",
-  },
-  {
-    name: "Evan Littlecat",
-    position: "President",
-    links: {
-      email: "mailto:[email protected]",
-      linkedin: "mailto:[email protected]",
-    },
-    grade: "Sophmore",
-    major: "Comp Sci",
-    pronouns: "She/Her/Hers",
+    name: "Jacob Mapa",
+    position: "Treasurer",
+    links: {},
+    grade: "3rd Year",
+    major: "Bioengineering",
+    pronouns: "He/Hi/Hiss",
   },
   {
-    name: "Evan Littlecat",
-    position: "President",
+    name: "Dhruv Kanumury ",
+    position: "Secretary and Outreach Chair",
     links: {
       email: "mailto:[email protected]",
       linkedin: "mailto:[email protected]",
     },
-    grade: "Sophmore",
-    major: "Comp Sci",
-    pronouns: "She/Her/Hers",
+    grade: "3rd Year ",
+    major: "Bioengineering",
+    pronouns: "He/Him/His",
   },
 ];