cloudinary assets to s3 bucket

app/components/CTA/DiscordCommunity.tsx

@@ -22,7 +22,7 @@ export function DiscordCommunity() {
                >
                   <img
                      className="mx-auto mt-6 max-w-2xl hover:grayscale"
-                     src="https://res.cloudinary.com/jessebubble/image/upload/v1722041637/discord-invite_ayxfzh.svg"
+                     src="https://devsa-assets.s3.us-east-2.amazonaws.com/discord-invite.svg"
                      alt="Discord Community"
                   />
                </Link>

app/components/CTA/Geekdom.tsx

@@ -12,7 +12,7 @@ export function Geekdom() {
                <div className="mx-auto max-w-3xl">
                   <div>
                      <img
-                        src="https://res.cloudinary.com/jessebubble/image/upload/v1736146255/community-coworking_w3gcs7.svg"
+                        src="https://devsa-assets.s3.us-east-2.amazonaws.com/community-coworking.svg"
                         alt="DEVSA Coworking Space Logo"
                         className="h-full w-full"
                      />

app/components/CTA/Hero.tsx

@@ -5,7 +5,7 @@ import { GradientText } from './GradientText';
 
 export function Hero() {
    return (
-      <div className="pb-24 pt-16 sm:pb-32 sm:pt-24">
+      <div className="pb-24 pt-16">
          <Container>
             <FadeIn>
                <div className="mx-auto max-w-5xl">

app/routes/coworking-space/access.jsx

@@ -28,7 +28,7 @@ export function Access() {
                   <div className="mx-auto w-full">
                      <img
                         alt="Computer with DEVSA CustomDiscord Logo"
-                        src="https://res.cloudinary.com/jessebubble/image/upload/v1722041637/discord-invite_ayxfzh.svg"
+                        src="https://devsa-assets.s3.us-east-2.amazonaws.com/discord-invite.svg"
                         className="h-full w-full object-cover"
                      />
                   </div>

app/routes/coworking-space/route.tsx

@@ -7,7 +7,6 @@ import { Access } from './access';
 import { Parking } from './parking';
 import { useState } from 'react';
 import { Modal } from './modal';
-import { Food } from './food';
 
 export const meta: MetaFunction = () => {
    return [
@@ -67,7 +66,7 @@ export default function Index() {
                   <div className="mx-auto max-w-3xl">
                      <div>
                         <img
-                        src="https://res.cloudinary.com/jessebubble/image/upload/v1736146255/community-coworking_w3gcs7.svg"
+                        src="https://devsa-assets.s3.us-east-2.amazonaws.com/community-coworking.svg"
                         alt="DEVSA Coworking Space logo"
                            className="h-full w-full"
                         />
@@ -115,7 +114,6 @@ export default function Index() {
 
          <Access />
          <Parking />
-         <Food />
       </>
    );
 }

app/routes/replay2024/InvertedRevealScroll.tsx

@@ -0,0 +1,97 @@
+import { useState, useEffect } from 'react'
+import { motion, useScroll, useTransform } from 'framer-motion'
+import { Logo } from '~/components/images/Logo'
+
+const articles = [
+  { title: "CSS Scroll Animations", description: "Check out this rad demo", cta: "Follow", image: "https://picsum.photos/1920/1080?random=1" },
+  { title: "Animate on scroll", description: "Works with media queries too", cta: "Check it out", image: "https://picsum.photos/1920/1080?random=2" },
+  { title: "Parallax Effects", description: "Tweak your timings", cta: "Get Styling", image: "https://picsum.photos/1920/1080?random=3" },
+  { title: "Drive Keyframes", description: "CSS alone and...", cta: "No JavaScript", image: "https://picsum.photos/1920/1080?random=4" },
+  { title: "Extra Slides", description: "More content because...", cta: "CSS to the moon", image: "https://picsum.photos/1920/1080?random=5" },
+  { title: "Resize Window", description: "Try resizing the window", cta: "Resize", image: "https://picsum.photos/1920/1080?random=6" },
+  { title: "Browser support", description: "You'll need to be in Chrome", cta: "Do it", image: "https://picsum.photos/1920/1080?random=7" },
+  { title: "Your idea", description: "What would you make?", cta: "Code", image: "https://picsum.photos/1920/1080?random=8" },
+  { title: "Fork", description: "Fork this and make it your own!", cta: "Duplicate", image: "https://picsum.photos/1920/1080?random=9" },
+  { title: "Heart", description: "If you like this, heart it (3x)", cta: "Like", image: "https://picsum.photos/1920/1080?random=10" },
+]
+
+export function InvertedRevealScroll() {
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768)
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
+
+  return (
+    <div className="min-h-screen overflow-x-hidden">
+      <main>
+        {articles.map((article, index) => (
+          <Article key={index} {...article} index={index} isMobile={isMobile} />
+        ))}
+      </main>
+    </div>
+  )
+}
+
+interface ArticleProps {
+  title: string;
+  description: string;
+  cta: string;
+  image: string;
+  index: number;
+  isMobile: boolean;
+}
+
+function Article({ title, description, cta, image, index, isMobile }: ArticleProps) {
+  const { scrollYProgress } = useScroll()
+  const brightness = useTransform(scrollYProgress, [0, 0.5, 1], [2, 1, 0.5])
+  const clipPath = useTransform(
+    scrollYProgress,
+    [0, 1],
+    ['inset(0% 0% 0% 0%)', 'inset(100% 0% 0% 0%)']
+  )
+
+  return (
+    <motion.article
+      className={`w-full ${
+        isMobile ? 'h-screen grid grid-rows-[calc(100vh-35vh)_35vh]' : 'min-h-screen grid place-items-start relative'
+      }`}
+      style={{ zIndex: 10 - index }}
+    >
+      <motion.div
+        className={`${
+          isMobile
+            ? 'sticky top-0 left-0 right-0 h-[35vh]'
+            : 'fixed top-0 right-0 left-[40%] bottom-0 h-screen'
+        }`}
+        style={isMobile ? {} : { filter: brightness, clipPath }}
+      >
+        <img
+          src={image}
+          alt=""
+          className="object-cover"
+          sizes="(max-width: 768px) 100vw, 60vw"
+        />
+      </motion.div>
+      <div
+        className={`${
+          isMobile
+            ? 'bg-white text-center z-20 grid place-items-center content-center gap-2 h-[35vh]'
+            : 'bg-transparent h-screen w-[40%] grid place-items-center p-4 gap-4 content-center'
+        }`}
+      >
+        <h2 className="uppercase text-4xl m-0">{title}</h2>
+        <p>{description}</p>
+        <a
+          href="#"
+          className="uppercase font-semibold text-[#fafafa] bg-black px-8 py-4 no-underline tracking-wide text-xl rounded transition-colors hover:bg-[#666]"
+        >
+          {cta}
+        </a>
+      </div>
+    </motion.article>
+  )
+}

app/routes/replay2024/route.tsx

@@ -0,0 +1,5 @@
+import { InvertedRevealScroll } from "./InvertedRevealScroll";
+
+export default function Index() {
+  return <InvertedRevealScroll />;
+}