Add scrolling photo bar (#9) (#10)

* Add scrolling photo bar (#9) * add static photobar component with development placeholders * add scrolling animation (currently hardcoded duration and rotation) * increase gap between photos; add classes for slight left/right rotations * remove margins for h3 * remove absolute positioning * add header for photo bar; make photos hyperlinks; import and loop over people for photos * add inline styling to dynamically adjust animation length based on number of people * rename timePerPerson to secondsPerPerson * remove margins for text elements; standardize photo width/height; change animation timing function to linear; position photo bar above footer * add photo bar * adjust padding values * add people data file for photo bar --------- Co-authored-by: Darin <[email protected]> * slow down animation --------- Co-authored-by: dweber2022 <[email protected]> Co-authored-by: Darin <[email protected]>
NUWildHacks · Dec 4, 2024 · f4cce22 · f4cce22
1 parent 082f879
commit f4cce22
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import { Header } from "./components/Header/Header.tsx";
+import { PhotoBar } from "./components/PhotoBar/PhotoBar.tsx";
 import { Footer } from "./components/Footer/Footer.tsx";
 import { Navigation } from "./components/Navigation/Navigation.tsx";
 import { SampleSection } from "./components/Sections/SampleSection.tsx";
@@ -13,6 +14,7 @@ export const App = () => {
       {/* sections can go here */}
       <SampleSection />
 
+      <PhotoBar />
       <Footer />
     </MainWrapper>
   );

diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -1,10 +1,6 @@
 @use "../../shared/colors";
 
 #footer {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
   display: flex;
   flex-direction: row;
   justify-content: space-between;

diff --git a/src/components/PhotoBar/People.ts b/src/components/PhotoBar/People.ts
@@ -0,0 +1,47 @@
+export interface IPerson {
+  name: string;
+  position: string;
+  img: string; // images should have square dimensions
+  link?: string;
+}
+
+const People: ReadonlyArray<IPerson> = [
+  {
+    name: "Branden Ghena",
+    position: "Professor",
+    img: "https://www.mccormick.northwestern.edu/images/research-and-faculty/directory/ghena-branden.jpg",
+    link: "https://brandenghena.com/",
+  },
+  {
+    name: "FirstName LastName",
+    position: "Placeholder",
+    img: "https://www.thispersondoesnotexist.com",
+  },
+  {
+    name: "FirstName LastName",
+    position: "Placeholder",
+    img: "https://www.thispersondoesnotexist.com",
+  },
+  {
+    name: "FirstName LastName",
+    position: "Placeholder",
+    img: "https://www.thispersondoesnotexist.com",
+  },
+  {
+    name: "FirstName LastName",
+    position: "Placeholder",
+    img: "https://www.thispersondoesnotexist.com",
+  },
+  {
+    name: "FirstName LastName",
+    position: "Placeholder",
+    img: "https://www.thispersondoesnotexist.com",
+  },
+  {
+    name: "FirstName LastName",
+    position: "Placeholder",
+    img: "https://www.thispersondoesnotexist.com",
+  },
+];
+
+export default People;
diff --git a/src/components/PhotoBar/PhotoBar.scss b/src/components/PhotoBar/PhotoBar.scss
@@ -0,0 +1,76 @@
+@use "../../shared/colors";
+
+#photobar {
+  margin-top: auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  h2 {
+    margin: 0rem;
+    text-align: center;
+  }
+
+  .photobar__animation {
+    animation-name: scroll-left;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    display: flex;
+    flex-direction: row;
+    gap: 4rem;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 4rem 0rem;
+    width: max-content;
+
+    a {
+      color: colors.$global-very-dark-green;
+    }
+
+    .photobar__flexbox {
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      align-items: center;
+      background-color: colors.$global-light;
+      padding: 1rem;
+      width: 12rem;
+
+      .photobar__image {
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      h3 {
+        font-size: 1rem;
+        text-align: center;
+        margin: 0rem;
+      }
+
+      p {
+        text-align: center;
+        margin: 0rem;
+      }
+    }
+
+    .photobar__rotate_right {
+      transform: rotate(5deg);
+    }
+
+    .photobar__rotate_left {
+      transform: rotate(-5deg);
+    }
+  }
+}
+
+@keyframes scroll-left {
+  from {
+    transform: translateX(100vw);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
diff --git a/src/components/PhotoBar/PhotoBar.tsx b/src/components/PhotoBar/PhotoBar.tsx
@@ -0,0 +1,40 @@
+import "./PhotoBar.scss";
+import { IPerson } from "./People";
+import People from "./People";
+
+interface IPhotoBar {}
+
+export const PhotoBar: React.FC<IPhotoBar> = () => {
+  const secondsPerPerson = 5;
+  return (
+    <div id="photobar">
+      <h2>Meet our Team</h2>
+      <div
+        className="photobar__animation"
+        style={{
+          animationDuration: `${(People.length * secondsPerPerson).toString()}s`,
+        }}
+      >
+        {People.map((person: IPerson, i) => (
+          <a
+            href={person.link ? person.link : "javascript:void(0);"}
+            rel="noreferrer"
+          >
+            <div
+              key={i}
+              className={`photobar__flexbox ${i % 2 === 0 ? "photobar__rotate_right" : "photobar__rotate_left"}`}
+            >
+              <div className="photobar__image">
+                <img className="photo" src={person.img} />
+              </div>
+              <h3>{person.name}</h3>
+              <p>{person.position}</p>
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PhotoBar;