Batch fix 4 (#193)

Description:
* closes #191: replaced all animations that relied on gsap to use NGUIX and removed GSAP from the
* updated the README to state the changes made
* Removed unused code in the Officer's page
* Made the arrow in the README page clickable, which scrolls the page to the President's address

Author: jbriones1

README.md

@@ -8,7 +8,8 @@ You will need:
 - `node` v22
 - `npm` v10
 - Install the Angular CLI globally
-```
+```sh
+# use Angular v20.2
 npm install -g @angular/cli
 ```
 - SSH keys
@@ -26,23 +27,22 @@ npm ci
 ```
 
 3. Start the frontend server:
-```
-npm run start // will run some pre-build scripts
+```sh
+npm run start # will run some pre-build scripts
 or
-ng serve // only works after building
+ng serve # only works after building
 ```
 
 4. Serve the app over your local network
-```
-// Access the site on a device in your local network by going to `http://<IP of serving device>:8080`
+```sh
+# Access the site on a device in your local network by going to `http://<IP of serving device>:8080`
 ng serve --host=0.0.0.0 // only works after building
 ```
 
 To view other npm commands, look at `package.json` under the "scripts" key.
 ### Local development
-This project uses:
-
+If you'd like to contribute, you can start reading here https://github.com/CSSS/csss-site-frontend/wiki/Contributing
 ### Libraries used
-* **FontAwesome**
-* **Material CDK**
-* **GSAP**
+* **FontAwesome 6.7.1** https://fontawesome.com/v6/icons
+* **Material CDK** https://material.angular.dev/cdk/categories
+* **NGXUI** https://ngxui.com/

package-lock.json

@@ -26,7 +26,8 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.1",
     "@fortawesome/free-regular-svg-icons": "^6.7.1",
     "@fortawesome/free-solid-svg-icons": "^6.7.1",
-    "gsap": "^3.13.0",
+    "@omnedia/ngx-fade": "^3.0.0",
+    "@omnedia/ngx-typewriter": "^3.1.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

package.json

@@ -12,12 +12,14 @@ <h1>Officers</h1>
     <h2>Current Executives</h2>
     <div class="gallery">
       @for (exec of currentAdministration()?.members; track $index) {
-        <code-card [bgImg]="exec.photoName" #execCard>
-          <div class="card-footer">
-            <h3>{{ exec.name }}</h3>
-            <h4>{{ exec.position }}</h4>
-          </div>
-        </code-card>
+        <om-fade direction="up" [animateOnlyOnce]="true">
+          <code-card [bgImg]="exec.photoName" #execCard>
+            <div class="card__footer">
+              <strong class="card__name">{{ exec.name }}</strong>
+              <strong class="card__position">{{ exec.position }}</strong>
+            </div>
+          </code-card>
+        </om-fade>
       }
     </div>
   </section>

public/images/president.jpg

@@ -1,34 +1,8 @@
 @use 'globals' as g;
-@use 'theme' as t;
-
-.timeline {
-  display: flex;
-  column-gap: 0.2rem;
-  width: 100%;
-  margin-bottom: 2rem;
-
-  & > .timeslot {
-    flex: 1 0 auto;
-
-    & > .time-label {
-      text-align: right;
-    }
-
-    & > .line {
-      min-width: 6rem;
-      height: 0.2rem;
-      background-color: aquamarine;
-    }
-  }
-
-  & > .timeslot[aria-selected='true'] > .line {
-    box-shadow: 0 0 10px 3px aquamarine;
-  }
-}
 
 .gallery {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
   gap: 1.8rem;
 }
 
@@ -39,17 +13,23 @@
   grid-template-rows: auto auto;
 }
 
-code-card > img {
-  width: 100%;
-  object-fit: contain;
-}
-
-.card-footer {
+.card__footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: fit-content;
-  padding: 0.3rem;
+  background-color: g.$bg3;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.card__name,
+.card__position {
+  width: fit-content;
+}
 
-  background-color: t.$bg3;
+.card__position {
+  color: g.$code-text;
 }

public/images/president-mabel.png renamed to public/images/president.png

@@ -1,19 +1,12 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  signal,
-  viewChildren
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { ArticleComponent } from '@csss-code/article/article.component';
 import { CardComponent } from '@csss-code/card/card.component';
-import { gsap } from 'gsap';
+import { NgxFadeComponent } from '@omnedia/ngx-fade';
 import { ExecutiveAdministration, executives, getRandomExecImage } from './officers.data';
 
 @Component({
   selector: 'cs-officers',
-  imports: [CardComponent, ArticleComponent],
+  imports: [CardComponent, ArticleComponent, NgxFadeComponent],
   templateUrl: './officers.component.html',
   styleUrl: './officers.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -47,39 +40,12 @@ export class OfficersComponent {
     return newAdmin;
   });
 
-  private execCards = viewChildren<CardComponent>('execCard');
-
   /**
    * Cache the admins so we don't need to fetch them each time.
    * Will probably need some way to remove older cached entries if memory becomes an issue.
    */
   private cachedAdmins = new Map<number, ExecutiveAdministration>();
 
-  constructor() {
-    effect(() => {
-      if (!this.currentAdministration() || !this.execCards().length) {
-        return;
-      }
-
-      this.animateCards();
-    });
-  }
-
-  private animateCards(): void {
-    const cards = this.execCards();
-    if (!cards || !cards.length) {
-      return;
-    }
-
-    const targets = cards.map(el => el.elementRef.nativeElement);
-    gsap.from(targets, {
-      bottom: -50,
-      opacity: 0,
-      duration: 0.3,
-      ease: 'power3.out'
-    });
-  }
-
   /**
    * Changes the files name to one that can be used to set the background image.
    *

src/app/pages/officers/officers.component.html

@@ -1,29 +1,21 @@
-<div class="wrapper">
-  <header>
+<div class="parallax">
+  <hgroup>
     <img class="mural" src="images/mural.png" alt="Mural" />
     <h1>
       Welcome to the
-      <div class="type-in" #typeIn>Computing Science Student Society</div>
+      <om-typewriter
+        styleClass="typed"
+        [words]="['Computing Science Student Society']"
+        [disableLoop]="true"
+      ></om-typewriter>
     </h1>
-    <fa-icon [icon]="arrowIcon" animation="bounce"></fa-icon>
-  </header>
+    <a (click)="scrollTo('intro')"><fa-icon [icon]="arrowIcon" animation="bounce"></fa-icon></a>
+  </hgroup>
 
   <article class="content">
-    <section>
-      <h2>History</h2>
-      <p>
-        Since its founding in the 1970s, the Computing Science Student Society has existed to
-        promote the interests of students within the School of Computing Science at Simon Fraser
-        University. The Society strives to support and build a vibrant community of individuals and
-        create an environment that produces social, academic, and professional success. The CSSS
-        continues this tradition today by running numerous social events throughout the school year,
-        as well as hosting workshops, talks by industry speakers, and development contests for
-        budding programmers.
-      </p>
-    </section>
-    <section class="pres-container">
+    <section id="intro" class="pres-container">
       <div class="pres-image-container">
-        <img src="images/president-mabel.png" alt="President of the CSSS" />
+        <img src="images/president.png" alt="President of the CSSS" />
       </div>
       <div class="pres-content">
         <h2>President's Address</h2>
@@ -45,6 +37,18 @@ <h2>President's Address</h2>
         </p>
       </div>
     </section>
+    <section>
+      <h2>History</h2>
+      <p>
+        Since its founding in the 1970s, the Computing Science Student Society has existed to
+        promote the interests of students within the School of Computing Science at Simon Fraser
+        University. The Society strives to support and build a vibrant community of individuals and
+        create an environment that produces social, academic, and professional success. The CSSS
+        continues this tradition today by running numerous social events throughout the school year,
+        as well as hosting workshops, talks by industry speakers, and development contests for
+        budding programmers.
+      </p>
+    </section>
     <section class="faq">
       <h2>FAQ</h2>
       <h3>How do I become a member?</h3>

src/app/pages/officers/officers.component.scss

@@ -1,13 +1,14 @@
 @use 'globals' as g;
 
-.wrapper {
-  height: 96svh;
+.parallax {
+  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   perspective: 10px;
+  scroll-behavior: smooth;
 }
 
-header {
+hgroup {
   position: relative;
   display: flex;
   justify-content: center;
@@ -37,11 +38,13 @@ header {
     mask-repeat: no-repeat;
   }
 
-  & > fa-icon {
-    font-size: clamp(2rem, 3vw, 15rem);
+  & > a {
     position: absolute;
     bottom: 30svh;
-    filter: drop-shadow(0px 2px 5px black);
+    & > fa-icon {
+      font-size: clamp(2rem, 3vw, 15rem);
+      filter: drop-shadow(0px 2px 5px black);
+    }
   }
 }