Merge pull request #106 from ssss-sfu/brian/reduce-size-of-ssss-elect…

…ives

Reduce size of ssss electives

.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# husky
+.husky/_/*

components/ProfileCard.jsx

@@ -31,18 +31,20 @@ export const ProfileCard = ({ profile }) => {
 
   return (
     <div key={profile.id} className="profile-card">
-      <img
-        className="description-img"
-        src={profile.imgSrc}
-        alt={`${profile.name}'s profile image`}
-      ></img>
-      <div className="description">
-        <div className="description-title">
-          <p className="profile-role">{profile.role}</p>
-          <p className="profile-name">{profile.name}</p>
-          <p className="profile-pronoun">({profile.pronoun})</p>
+      <div className="description-main">
+        <img
+          className="description-img"
+          src={profile.imgSrc}
+          alt={`${profile.name}'s profile image`}
+        ></img>
+        <div className="description">
+          <div className="description-title">
+            <p className="profile-name">{profile.name}</p>
+            <p className="profile-role">{profile.role}</p>
+          </div>
         </div>
-
+      </div>
+      <div className="description-secondary description">
         <p className="description-body">{profile.description}</p>
         <div className="description-socials">
           {Object.keys(profile.socials).map((socialType) => {

pages/about.js

@@ -20,21 +20,24 @@ export default function About() {
         <section className="main-content">
           <h1>About the SSSS</h1>
           <p>
-            Our mission is to represent students in the Software Systems Program
+            Our mission is to represent students in the Software Systems program
             at SFU.
           </p>
           <p>
-            We help students by addressing Issues and Concerns between the
-            students and faculty, building Community in and around our society,
-            and sharing Resources provided by students and external
+            We help students by addressing issues and concerns between the
+            students and faculty, building community in and around our society,
+            and sharing resources provided by students and external
             organizations.
           </p>
           <p>
-            Our voice has inflenced and improved our Education. Our reach
-            extends to over 700 students, and our annual Hackathon has over 500
-            registrations. We have funded conference fees, created Career
-            Opportunities, and shared insights and materials to help students in
-            their courses.
+            Our voice has inflenced and improved our education. Our reach
+            extends to over 700 students and{" "}
+            <a href="https://systemshacks.com/" target="_blank">
+              our annual hackathon
+            </a>{" "}
+            has over 500 registrations. We have funded conference fees, created
+            career opportunities, and shared insights and materials to help
+            students in their courses.
           </p>
         </section>
         <section className="current-exec">

styles/components/profile-card.scss

@@ -2,26 +2,37 @@
 
 .profile-card {
   display: flex;
-  justify-content: start;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
   flex: 1 2;
-  margin: 3em auto;
-  gap: 2em;
+  margin: 1em auto;
+  gap: 0.5em;
   width: 100%;
 
   .description-img {
-    width: 18.5em;
-    height: 27.5em;
+    width: 18em;
+    height: 24em;
     border-radius: 1em;
     object-fit: cover;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out; /* Add a transition for smooth movement */
   }
 
   .description {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
+    width: 18em;
+    margin-left: 0.5em;
     gap: 1.5em;
+    position: relative;
 
     .description-title {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+
       .profile-role {
         color: var(--colour-sosy-green-500);
       }
@@ -58,11 +69,38 @@
       }
     }
   }
+
+  .description-secondary {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .profile-card:hover {
+    & .description-img {
+      opacity: 0.3;
+    }
+
+    & .description-secondary {
+      display: flex;
+      position: absolute;
+      width: 16.5em;
+      gap: 1em;
+      transform: translateY(-2em);
+      transition: transform 0.3s ease-in-out;
+      z-index: 1;
+    }
+  }
 }
 
 @media screen and (max-width: 768px) {
   .profile-card {
-    flex-direction: column;
     align-items: flex-start;
+    gap: 1.5em;
+
+    .description-secondary {
+      display: flex;
+      width: 100%;
+    }
   }
 }

styles/pages/about-page.scss

@@ -8,8 +8,13 @@
   justify-content: flex-start;
 
   .current-exec {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
     margin: 5rem auto;
-    width: min(85vw, 70rem);
+    width: 100%;
+    gap: 1.5em;
   }
 
   .footer {