swecc-uw · RandolphTang · Nov 24, 2024 · Nov 24, 2024 · Nov 24, 2024
diff --git a/src/CSS/Navbar.css b/src/CSS/Navbar.css
@@ -17,7 +17,6 @@ a {
   height: var(--nav-size);
   margin-top: 1rem;
   z-index: 1000;
-  top: 0;
 }
 
 .navbar-nav {

diff --git a/src/CSS/About.css → src/CSS/Officers.css b/src/CSS/About.css → src/CSS/Officers.css
@@ -1,23 +1,44 @@
-.about-message-section {
-  position: relative;
-  align-items: center;
-  justify-content: center;
+.about-message-section,
+.sponsor-page-intro {
+  top: 0;
+  left: 0;
+  right: 0;
   width: 100%;
-  height: 400px;
-  margin-top: 105px;
+  height: 20vw;
+  position: relative;
   display: flex;
   flex-direction: column;
-  background: linear-gradient(
-      0deg,
-      rgba(190, 184, 235, 0.8),
-      rgba(190, 184, 235, 0.8)
-    ),
-    linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
-    linear-gradient(0deg, rgba(190, 184, 235, 0.1), rgba(190, 184, 235, 0.1)),
-    url(../Data/img/about2.gif);
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+
+.about-message-section::before,
+.sponsor-page-intro::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   background-size: cover;
-  background-attachment: fixed;
-  background-position: 20%;
+  background-position: center;
+  filter: brightness(80%);
+  z-index: -1;
+}
+
+.about-message-section::before {
+  background-image: url(../Data/img/Officers/officerGroupPic.png);
+}
+
+.about-message-section h1,
+.sponsor-page-intro h1 {
+  margin-bottom: 10px;
+  font-size: 5vw;
+  color: white;
+  text-shadow: 1px 1px 2px var(--text-header-shadow-color);
+  animation: slide-up 0.5s ease-out;
+  z-index: 2;
 }
 
 .about-title {
@@ -60,6 +81,102 @@
   align-items: center;
 }
 
+.Officer-content {
+  display: block;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  margin: auto;
+  box-sizing: border-box;
+  padding-top: 2vw;
+}
+
+.officer-sidebar,
+.sponsor-sidebar {
+  text-align: right;
+  width: 20%;
+  padding-right: 1vw;
+  display: inline-block;
+  vertical-align: top;
+  box-sizing: border-box;
+  animation: fadeIn 0.5s ease-out;
+  margin-top: 5vw;
+}
+
+.officer-sidebar h2,
+.sponsor-sidebar h2 {
+  font-size: 2rem;
+  font-family: "Arial Rounded MT Bold";
+  font-weight: 300;
+  border: none;
+  font-style: italic;
+  letter-spacing: 2px;
+  text-decoration: none;
+  color: var(--sideBarTitle);
+}
+
+.officer-info,
+.sponsorConnectionContent {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: inline-block;
+  flex-direction: column;
+  width: 80%;
+  animation: fadeIn 0.5s ease-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.officer-info h2,
+.sponsorConnectionContent h2 {
+  font-size: 3rem;
+  font-family: adobe-garamond-pro;
+  font-weight: 400;
+  color: var(--text-color);
+  font-style: normal;
+}
+
+.officer-sidebar li,
+.sponsor-sidebar li {
+  align-items: center;
+  transition: all 0.3s ease;
+}
+
+.officer-sidebar button,
+.sponsor-sidebar button {
+  font-family: "Arial Rounded MT Bold";
+  font-weight: 300;
+  font-style: normal;
+  font-size: 2rem;
+  background: transparent;
+  border: none;
+  letter-spacing: 2px;
+  text-decoration: none;
+  color: #a4a4a4;
+  line-height: 2em;
+  transition: all 0.3s ease;
+}
+
+.officer-sidebar button.selected,
+.sponsor-sidebar button.selected {
+  color: var(--text-color);
+}
+
+.officer-sidebar button:hover,
+.sponsor-sidebar button:hover {
+  color: var(--text-color);
+}
+
 @media (max-width: 976px) {
   .about-title,
   .team-members-title {
@@ -101,6 +218,17 @@
     background-position: 20%;
   }
 
+  .about-message-section h1 {
+    font-size: 10vw;
+  }
+
+  .Officer-content {
+    display: flex;
+    flex-direction: column;
+    padding-top: 0;
+    margin: 10% 0 10% 0;
+  }
+
   .about-title {
     font-style: normal;
     font-weight: 700;
@@ -117,6 +245,9 @@
   }
 
   @media only screen and (max-width: 768px) {
+    .officer-info {
+      width: 85%;
+    }
     .about-title,
     .team-members-title {
       font-size: 2rem;
@@ -132,6 +263,10 @@
     .about-message-section {
       height: 250px;
     }
+
+    .officer-sidebar {
+      display: none;
+    }
   }
 
   @media (max-width: 480px) {

diff --git a/src/CSS/profileCard.css b/src/CSS/profileCard.css
@@ -4,57 +4,70 @@
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+  gap: 5vw;
 }
 
 .card {
   box-sizing: border-box;
-  position: relative;
-  width: 300px;
-  min-height: 265px;
-  background-color: var(--card-bg);
-  border-radius: 18px;
-  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);
-  padding: 16px;
-  margin: 56px 24px;
+  width: 15em;
+  height: 100%;
+  background-color: transparent;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
-.card-image {
-  width: 150px;
-  height: 150px;
-  border-radius: 50%;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow:
-    0 15px 35px -15px rgba(0, 0, 0, 0.4),
-    0 5px 20px 0 rgba(0, 0, 0, 0.1);
+.card-image-container {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
 }
 
-.card-image img {
-  width: 100%;
-  transform: scale(1.2);
+.card-image-container::before {
+  padding: 70%;
+  height: auto;
+  content: "";
+  position: relative;
+  background-image: url("../Data/img/frameProfileCard.png");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  filter: drop-shadow(2px 5px rgba(0, 0, 0, 0.3));
+  z-index: 1;
+}
+
+.founder-card::before {
+  filter: invert(1) drop-shadow(2px 5px rgba(0, 0, 0, 0.3));
+}
+
+.card-image-container img {
+  width: 58%;
+  height: 58%;
+  object-fit: cover;
+  position: absolute;
+  margin: 10%;
+  border-radius: 8px;
 }
 
 .card p {
   color: var(--card-text);
   letter-spacing: 0.5px;
-  margin-bottom: 12px;
   text-align: center;
 }
 
 .name {
-  margin-top: 80px;
-  font-size: 1.4em;
+  font-size: 1rem;
   color: var(--card-text);
   font-weight: bold;
   letter-spacing: 0.8px;
-  margin-bottom: 8px;
+  margin: 0;
 }
 
 .socials {
@@ -85,7 +98,6 @@
 
 .card-container button svg {
   padding-top: 4px;
-  width: 20px;
   height: 20px;
 }
 
@@ -105,8 +117,17 @@
   background-color: #aa5738;
 }
 
-@media (max-width: 480px) {
+@media only screen and (max-width: 768px) {
   .card-container {
-    padding: 50px;
+    padding: 0;
+    gap: 15vw;
+  }
+  .card {
+    width: 8rem;
+  }
+
+  .card-container button {
+    width: 30px;
+    height: 30px;
   }
 }
diff --git a/src/Components/About.js b/src/Components/About.js
diff --git a/src/Components/App.js b/src/Components/App.js
@@ -4,11 +4,11 @@ import FooterHotfix from "./FooterMobile.js";
 import { Route, Routes } from "react-router-dom";
 import Home from "./Home.js";
 import Events from "./Events.js";
-import About from "./About.js";
 import JoinNow from "./Join-now.js";
 import Navbar from "./Navbar.js";
 import ExternalRedirect from "./Redirect.js";
 import { links } from "./Utils";
+import Officers from "./Officers";
 
 function App() {
   const link = document.querySelector("link[rel~='icon']");
@@ -19,8 +19,8 @@ function App() {
       <Navbar />
       <Routes>
         <Route index element={<Home />} />
-        <Route path="/About" element={<About />} />
         <Route path="/Events" element={<Events />} />
+        <Route path="/Officers" element={<Officers />} />
         <Route
           path="/discord"
           element={<ExternalRedirect to={links.social.discord} />}