Mobile landing page

apps/web/app/components/ImageFader.module.css

@@ -0,0 +1,9 @@
+.carousel-container {
+  overflow: hidden;
+  &.carousel-container--flipped {
+    & > .carousel {
+      margin-left: auto;
+      flex-direction: row-reverse;
+    }
+  }
+}

apps/web/app/components/ImageFader.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useMemo, useState } from "react";
+import css from "./ImageFader.module.css";
+import clsx from "clsx";
+
+function shuffleArray(ar: string[]) {
+  const shuffledAr = [...ar];
+  const N = shuffledAr.length;
+  for (let i = 0; i < N; i++) {
+    const randI = Math.floor(Math.random() * (N - i)) + i; // rand([i,N-1])
+    [shuffledAr[i], shuffledAr[randI]] = [shuffledAr[randI], shuffledAr[i]];
+  }
+  return shuffledAr;
+}
+export default function ImageFader({
+  imageLinks,
+  displayDuration,
+  heightPx,
+  PeriodicTileInsert,
+}: {
+  imageLinks: string[];
+  displayDuration: number;
+  heightPx: number;
+  PeriodicTileInsert?: () => React.ReactNode;
+}) {
+  const FADE_DURATION_MS = 800;
+  const shuffledImageLinks = useMemo(
+    () => shuffleArray(imageLinks),
+    [imageLinks],
+  );
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [fadeState, setFadeState] = useState<"fade-in" | "fade-out">("fade-in");
+  const [showPeriodicTile, setShowPeriodicTile] = useState(false);
+
+  // useEffect(() => {
+  //   let fadeTimeout: number;
+  //   let displayTimeout: number;
+  //   if (fadeState === "fade-in") {
+  //     fadeTimeout = setTimeout(() => {
+  //       setFadeState("fade-out");
+  //     }, displayDuration);
+  //   } else {
+  //     fadeTimeout = setTimeout(() => {
+  //       // Show periodic tile if needed
+  //       if (
+  //         PeriodicTileInsert &&
+  //         (currentIndex + 1) %
+  //           Math.max(2, Math.ceil(window.innerWidth / 300) - 1) ===
+  //           0
+  //       ) {
+  //         setShowPeriodicTile(true);
+  //         displayTimeout = setTimeout(() => {
+  //           setShowPeriodicTile(false);
+  //           setCurrentIndex((i) => (i + 1) % shuffledImageLinks.length);
+  //           setFadeState("fade-in");
+  //         }, displayDuration);
+  //       } else {
+  //         setCurrentIndex((i) => (i + 1) % shuffledImageLinks.length);
+  //         setFadeState("fade-in");
+  //       }
+  //     }, FADE_DURATION_MS);
+  //   }
+  //   return () => {
+  //     clearTimeout(fadeTimeout);
+  //     clearTimeout(displayTimeout);
+  //   };
+  // }, [
+  //   fadeState,
+  //   currentIndex,
+  //   PeriodicTileInsert,
+  //   shuffledImageLinks.length,
+  //   displayDuration,
+  // ]);
+
+  return (
+    <div
+      className={clsx(css["carousel-container"])}
+      style={{ height: heightPx, position: "relative", overflow: "hidden" }}
+    >
+      <img
+        src={shuffledImageLinks[currentIndex]}
+        alt=""
+        className={css["carousel__image"]}
+        style={{
+          opacity: fadeState === "fade-in" ? 1 : 0,
+          transition: `opacity ${FADE_DURATION_MS}ms`,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+        }}
+      />
+      {showPeriodicTile && PeriodicTileInsert && (
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: 2,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "rgba(0,0,0,0.2)",
+          }}
+        >
+          <PeriodicTileInsert />
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/app/hooks/useIsMobile.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export function useIsMobile() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  const [width, setWidth] = useState<number>(window.innerWidth);
+
+  function handleWindowSizeChange() {
+    setWidth(window.innerWidth);
+  }
+  useEffect(() => {
+    window.addEventListener("resize", handleWindowSizeChange);
+    return () => {
+      window.removeEventListener("resize", handleWindowSizeChange);
+    };
+  }, []);
+
+  return width <= 768;
+}

apps/web/app/index.css

@@ -108,6 +108,16 @@ li {
     position: relative;
   }
 }
+.centered-section-mobile {
+  --padding: 20px;
+  --max-container-width: 1200px;
+  padding-inline: var(--padding);
+  margin-inline: auto;
+  max-width: var(--max-container-width);
+  &.centered-section--relative {
+    position: relative;
+  }
+}
 a {
   text-decoration: none;
 }

apps/web/app/routes/home.tsx

@@ -4,16 +4,22 @@ import JoinUs from "../sections/home/JoinUs";
 import Projects from "../sections/home/Projects";
 import TartanHacks from "../sections/home/TartanHacks";
 import { getAllImageLinksInAssetDirectory } from "../utils/files";
+import { useIsMobile } from "../hooks/useIsMobile";
 
 export default function Home() {
+  // mobile if screen width less than 768
+  const isMobile = useIsMobile();
+
   return (
     <>
       <Hero />
-      <ImageCarousel
-        heightPx={300}
-        speedPxPerSecond={-50}
-        imageLinks={getAllImageLinksInAssetDirectory("carousel-images")}
-      />
+      {!isMobile && (
+        <ImageCarousel
+          heightPx={300}
+          speedPxPerSecond={-50}
+          imageLinks={getAllImageLinksInAssetDirectory("carousel-images")}
+        />
+      )}
       <Projects />
       <TartanHacks />
       <JoinUs />

apps/web/app/sections/home/Header.module.css

@@ -1,57 +1,121 @@
 .main-header-container {
-  position: sticky;
-  top: 0;
+  position: fixed;
+  inset: 0 0 auto;
+
   backdrop-filter: blur(40px);
   background: rgba(255, 255, 255, 0.809);
   z-index: 999;
+  transition: 0.3s background;
+}
+.hamburger-menu {
+  display: none;
+}
+.faux-div {
+  height: 80px;
 }
 .main-header-layout {
   max-width: 1400px;
   margin-inline: auto;
-  padding: 20px 40px;
-  display: flex;
-}
-
-.logo {
+  padding: 0 25px;
+  height: 80px;
   display: flex;
-  gap: 10px;
   align-items: center;
-  font-size: var(--text-xl);
-  font-weight: 500;
-  margin-right: auto;
-}
+  & .logo {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    font-size: var(--text-xl);
+    font-weight: 500;
+    margin-right: auto;
+    & .logo__img {
+      height: 1.5em;
+    }
+    & .logo__text {
+      flex-grow: 0;
+      color: var(--black-900);
+    }
+  }
 
-.logo__img {
-  height: 1.5em;
-}
-.logo__text {
-  flex-grow: 0;
-  color: var(--black-900);
-}
-.main-nav {
-  display: flex;
-  gap: 2px;
-}
-.nav-button {
-  display: flex;
-  gap: 4px;
-  padding: 10px 13px;
+  & .main-nav--desktop {
+    display: flex;
+    gap: 2px;
+    & > .nav-button {
+      display: flex;
+      gap: 4px;
+      padding: 10px 13px;
 
-  font-size: var(--text-base);
-  align-items: center;
-  color: var(--black-900);
-  border: 1px solid transparent;
-  border-radius: var(--border-radius-base);
+      font-size: var(--text-base);
+      align-items: center;
+      color: var(--black-900);
+      border: 1px solid transparent;
+      border-radius: var(--border-radius-base);
+
+      &:hover {
+        background-color: var(--black-50);
+      }
+      & > .nav-button__icon {
+        height: 1.1em;
+      }
+    }
 
-  &:hover {
-    background-color: var(--black-50);
+    & > .nav-button--active {
+      background-color: var(--blue-50);
+      border-color: var(--black-200);
+    }
+  }
+  & .main-nav--mobile {
+    display: none;
   }
 }
+@media (max-width: 640px) {
+  .main-header-container--mobile-menu-open {
+    border-bottom: 1px solid var(--black-300);
+    background: var(--black-50);
+  }
+  .faux-div {
+    height: 70px;
+  }
+  .main-header-layout {
+    height: 70px;
 
-.nav-button--active {
-  background-color: var(--blue-50);
-  border-color: var(--black-200);
-}
-.nav-button__icon {
-  height: 1.1em;
+    & .main-nav--desktop {
+      display: none;
+    }
+    & .main-nav--mobile {
+      display: block;
+    }
+  }
+  .hamburger-menu {
+    display: block;
+    margin-bottom: 20px;
+    & > .nav-button-mobile {
+      display: flex;
+      gap: 4px;
+      padding: 10px 25px;
+      border-bottom: 1px solid var(--black-100);
+
+      &:last-child {
+        border: none;
+      }
+
+      font-size: var(--text-base);
+      align-items: center;
+      color: var(--black-900);
+
+      &:hover {
+        background-color: var(--black-50);
+      }
+      &.nav-button-mobile--active {
+        background: linear-gradient(
+          to right,
+          hsl(213, 97%, 86%) 0%,
+          hsl(213, 97%, 96%) 100%
+        );
+        font-weight: bold;
+      }
+      & > img {
+        height: 1.1em;
+      }
+    }
+  }
 }