Skip to content

Commit 7e42446

Browse files
jessebubblejessebubble
committed
some mobile updates, new marquee component added
1 parent 02e8d0f commit 7e42446

File tree

10 files changed

+217
-147
lines changed

10 files changed

+217
-147
lines changed

‎app/components/CTA/Connections.tsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export function Connections() {
108108
animate="visible"
109109
aria-label="Grid of DEVSA community images"
110110
>
111-
<motion.div className="hidden md:grid grid-cols-3 gap-4 aspect-[4/3] w-full">
111+
<motion.div className="grid grid-cols-3 gap-4 aspect-[4/3] w-full">
112112
{images.map((src, index) => (
113113
<motion.figure
114114
key={src}
@@ -127,24 +127,6 @@ export function Connections() {
127127
</motion.figure>
128128
))}
129129
</motion.div>
130-
<div className="md:hidden grid grid-cols-2 gap-4">
131-
{images.map((src, index) => (
132-
<motion.figure
133-
key={src}
134-
className="aspect-square"
135-
variants={itemVariants}
136-
whileTap={{ scale: 0.95 }}
137-
onClick={() => handleImageClick(index)}
138-
>
139-
<img
140-
src={src || "/placeholder.svg"}
141-
alt={getImageDescription(index)}
142-
className="w-full h-full object-cover rounded-lg"
143-
/>
144-
<figcaption className="sr-only">{getImageDescription(index)}</figcaption>
145-
</motion.figure>
146-
))}
147-
</div>
148130
</motion.div>
149131
</div>
150132

‎app/components/CTA/Coworking.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export function Coworking() {
106106

107107
<motion.div className="w-full mt-8" variants={containerVariants} initial="hidden" animate="visible">
108108
<div
109-
className="w-full overflow-x-auto snap-x snap-mandatory flex gap-4 py-4 scrollbar-hide"
109+
className="hidden w-full overflow-x-auto snap-x snap-mandatory md:flex gap-4 py-4 scrollbar-hide"
110110
aria-label="Coworking space image gallery"
111111
>
112112
{images.map((src, index) => (
@@ -135,6 +135,16 @@ export function Coworking() {
135135
</motion.figure>
136136
))}
137137
</div>
138+
<div
139+
className="md:hidden w-full"
140+
aria-label="Coworking space logo"
141+
>
142+
<img
143+
src="https://devsa-assets.s3.us-east-2.amazonaws.com/community-coworking.svg"
144+
alt="DEVSA Logo"
145+
className="w-full h-full"
146+
/>
147+
</div>
138148
</motion.div>
139149
</div>
140150

‎app/components/CTA/partners.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ import { GradientText } from "./GradientText"
33
import { useReducedMotion, motion } from "motion/react"
44

55
const partners = [
6+
{
7+
name: "Project Quest",
8+
logo: "https://devsa-assets.s3.us-east-2.amazonaws.com/project-quest-logo.svg",
9+
link: "https://questsa.org/",
10+
},
611
{
712
name: "Tech Bloc",
813
logo: "https://devsa-assets.s3.us-east-2.amazonaws.com/tech-bloc.svg",
@@ -13,20 +18,15 @@ const partners = [
1318
logo: "https://devsa-assets.s3.us-east-2.amazonaws.com/geekdom_logo_full.svg",
1419
link: "https://geekdom.com",
1520
},
16-
{
17-
name: "434 Media",
18-
logo: "https://devsa-assets.s3.us-east-2.amazonaws.com/434media.svg",
19-
link: "https://434media.com",
20-
},
2121
{
2222
name: "UTSA UC",
2323
logo: "https://devsa-assets.s3.us-east-2.amazonaws.com/uc-utsa.svg",
2424
link: "https://uc.utsa.edu/programs/mdst.html",
2525
},
2626
{
27-
name: "Project Quest",
28-
logo: "https://devsa-assets.s3.us-east-2.amazonaws.com/project-quest-logo.svg",
29-
link: "https://questsa.org/",
27+
name: "434 Media",
28+
logo: "https://devsa-assets.s3.us-east-2.amazonaws.com/434media.svg",
29+
link: "https://434media.com",
3030
},
3131
{
3232
name: "Capital Factory",

‎app/components/ui/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@ function Sitemap() {
5555
<div>
5656
<SitemapHeading>DEVSA</SitemapHeading>
5757
<SitemapLinks>
58-
<SitemapLink to="https://devsanantonio.printify.me/products">Store</SitemapLink>
59-
<SitemapLink to="/mission">The Mission</SitemapLink>
6058
<SitemapLink to="/replay2024">Replay 2024</SitemapLink>
59+
<SitemapLink to="/mission">The Mission</SitemapLink>
60+
<SitemapLink to="https://devsanantonio.printify.me/products">Store</SitemapLink>
6161
</SitemapLinks>
6262
</div>
6363
<div>

‎app/components/ui/devsa-hero.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { motion } from "motion/react"
2+
import { Marquee } from "./marquee"
3+
4+
const partners = [
5+
{ name: "UTSA UC", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/uc-utsa.svg" },
6+
{ name: "Project Quest", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/project-quest-logo.svg" },
7+
{ name: "Geekdom", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/geekdom_logo_full.svg" },
8+
{ name: "Digital Canvas", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/digital-canvas-ymas.svg" },
9+
{ name: "434 MEDIA", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/434media.svg" },
10+
{ name: "GDG SA", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/gdg-sa.svg" },
11+
{ name: "Tech Bloc", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/TB+Full+Logo.png" },
12+
{ name: "Alamo Python", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/alamo-py.svg" },
13+
{ name: "A11Y", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/a11y+(1).svg" },
14+
{ name: "React", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/devsa-star.svg" },
15+
{ name: "GGS", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/ggs.svg" },
16+
]
17+
18+
const PartnerImage = ({ img, name }: { img: string; name: string }) => (
19+
<motion.div whileHover={{ scale: 1.05 }} className="relative w-40 h-40 overflow-hidden m-4">
20+
<img src={img || "/placeholder.svg"} alt={name} className="w-full h-full object-contain" />
21+
</motion.div>
22+
)
23+
24+
export function DEVSAHero() {
25+
return (
26+
<div className="relative w-full h-[600px] overflow-hidden bg-neutral-950 mt-16 mb-32">
27+
<motion.div
28+
className="absolute inset-0 flex items-center justify-center z-10"
29+
initial={{ opacity: 0, scale: 0.5 }}
30+
animate={{ opacity: 1, scale: 1 }}
31+
transition={{ duration: 0.5 }}
32+
>
33+
<img
34+
src="https://devsa-assets.s3.us-east-2.amazonaws.com/devsa-community.svg"
35+
alt="DEVSA Logo"
36+
className="w-64 h-64 md:w-96 md:h-96"
37+
/>
38+
</motion.div>
39+
<div className="absolute inset-0 flex flex-col justify-center">
40+
<Marquee pauseOnHover className="[--duration:40s] blur-sm">
41+
{partners.map((partner) => (
42+
<PartnerImage key={partner.name} {...partner} />
43+
))}
44+
</Marquee>
45+
<Marquee reverse pauseOnHover className="[--duration:40s] blur-sm">
46+
{partners.map((partner) => (
47+
<PartnerImage key={partner.name} {...partner} />
48+
))}
49+
</Marquee>
50+
</div>
51+
<div className="absolute inset-0 bg-gradient-to-r from-gray-900 via-transparent to-gray-900" />
52+
<div className="absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-gray-900 to-transparent" />
53+
<div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-gray-900 to-transparent" />
54+
</div>
55+
)
56+
}
57+

‎app/components/ui/marquee.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import type { ComponentPropsWithoutRef } from "react"
2+
import clsx from "clsx"
3+
4+
interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
5+
className?: string
6+
reverse?: boolean
7+
pauseOnHover?: boolean
8+
children: React.ReactNode
9+
vertical?: boolean
10+
repeat?: number
11+
}
12+
13+
export function Marquee({
14+
className,
15+
reverse = false,
16+
pauseOnHover = false,
17+
children,
18+
vertical = false,
19+
repeat = 2,
20+
...props
21+
}: MarqueeProps) {
22+
return (
23+
<div
24+
{...props}
25+
className={clsx(
26+
"group flex overflow-hidden [--duration:40s]",
27+
{
28+
"flex-row": !vertical,
29+
"flex-col": vertical,
30+
},
31+
className,
32+
)}
33+
>
34+
{Array(repeat)
35+
.fill(0)
36+
.map((_, i) => (
37+
<div
38+
key={i}
39+
className={clsx("flex shrink-0 justify-around", {
40+
"animate-marquee flex-row": !vertical,
41+
"animate-marquee-vertical flex-col": vertical,
42+
"group-hover:[animation-play-state:paused]": pauseOnHover,
43+
"[animation-direction:reverse]": reverse,
44+
})}
45+
>
46+
{children}
47+
</div>
48+
))}
49+
</div>
50+
)
51+
}
52+

‎app/routes/board/board.tsx‎

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useRef } from "react"
22
import { motion, useInView, useReducedMotion } from "motion/react"
33
import { Container } from "../../components/ui/Container"
4-
import { Border } from "../../components/ui/Border"
54

65
const containerVariants = {
76
hidden: { opacity: 0 },
@@ -24,57 +23,6 @@ const itemVariants = {
2423
},
2524
}
2625

27-
export function VisionGrid() {
28-
const prefersReducedMotion = useReducedMotion()
29-
const ref = useRef(null)
30-
const isInView = useInView(ref, { once: true, amount: 0.2 })
31-
32-
const gridItems = [
33-
{
34-
title: "Why Non-Profit?",
35-
description:
36-
"Our focus is long-term, building a thriving tech community that continues beyond any single individual, ensuring stability and lasting impact",
37-
},
38-
{
39-
title: "Community Access",
40-
description:
41-
"Our non-profit status often allows us to secure affordable event venues, making our programs accessible and inclusive for a wider range of participants",
42-
},
43-
{
44-
title: "Donor Advantages",
45-
description:
46-
"Contributions to DEVSA are tax-deductible for donors, encouraging greater support from individuals and organizations within the community",
47-
},
48-
{
49-
title: "Funding Flexibility",
50-
description:
51-
"As a non-profit, we can seek grants, sponsorships, and donations specifically dedicated to furthering our mission and programs",
52-
},
53-
{
54-
title: "Dual Focus Approach",
55-
description:
56-
"This approach combines the expertise of our Board in two key areas: Developer Experience and Strategic Expertise",
57-
},
58-
]
59-
60-
return (
61-
<section className="py-16 sm:py-24" aria-labelledby="vision-title">
62-
<Container>
63-
<motion.div ref={ref} initial="hidden" animate={isInView ? "visible" : "hidden"} variants={containerVariants}>
64-
<motion.img
65-
src="https://devsa-assets.s3.us-east-2.amazonaws.com/devsa-community.svg"
66-
alt="DEVSA Street Art logo"
67-
className="h-full w-full object-contain max-w-3xl mx-auto"
68-
width={400}
69-
height={400}
70-
variants={itemVariants}
71-
/>
72-
</motion.div>
73-
</Container>
74-
</section>
75-
)
76-
}
77-
7826
export function Board() {
7927
const prefersReducedMotion = useReducedMotion()
8028
const ref = useRef(null)
@@ -92,7 +40,6 @@ export function Board() {
9240
>
9341
{team.map((group) => (
9442
<div key={group.title}>
95-
<Border as={motion.div} variants={itemVariants} />
9643
<div className="grid gap-8 pt-8 sm:pt-12 lg:grid-cols-4">
9744
<motion.h2
9845
id="board-title"

‎app/routes/board/route.tsx‎

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,42 @@
11
import { MetaFunction } from '@remix-run/node';
2-
import { Board, VisionGrid } from './board';
2+
import { Board } from './board';
3+
import { DEVSAHero } from '~/components/ui/devsa-hero';
34

45
export const meta: MetaFunction = () => {
5-
return [
6-
{
7-
title: 'DEVSA | Focused on Learning, Networking, and Community',
8-
},
9-
{
10-
property: 'og:url',
11-
content: 'https://devsanantonio.com/mission',
12-
},
13-
{
14-
property: 'og:type',
15-
content: 'website',
16-
},
17-
{
18-
property: 'og:title',
19-
content: 'Your Support Matters | Make a Tax-Deductible Donation',
20-
},
21-
{
22-
name: 'description',
23-
content:
24-
"We're building a stronger ecosystem for the techies in San Antonio",
25-
},
26-
{
27-
property: 'og:image',
28-
content:
29-
'https://devsa-assets.s3.us-east-2.amazonaws.com/flyers-8-ogmeta.png',
30-
},
31-
];
6+
return [
7+
{
8+
title: 'DEVSA | Focused on Learning, Networking, and Community',
9+
},
10+
{
11+
property: 'og:url',
12+
content: 'https://devsanantonio.com/mission',
13+
},
14+
{
15+
property: 'og:type',
16+
content: 'website',
17+
},
18+
{
19+
property: 'og:title',
20+
content: 'Your Support Matters | Make a Tax-Deductible Donation',
21+
},
22+
{
23+
name: 'description',
24+
content:
25+
"We're building a stronger ecosystem for the techies in San Antonio",
26+
},
27+
{
28+
property: 'og:image',
29+
content:
30+
'https://devsa-assets.s3.us-east-2.amazonaws.com/flyers-8-ogmeta.png',
31+
},
32+
];
3233
};
3334

3435
export default function Index() {
35-
return (
36-
<>
37-
<VisionGrid />
38-
<Board />
39-
</>
40-
);
36+
return (
37+
<>
38+
<Board />
39+
<DEVSAHero />
40+
</>
41+
);
4142
}

‎app/routes/replay2024/route.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ const images = [
7070
src: "https://devsa-assets.s3.us-east-2.amazonaws.com/216C99E4-62E0-404A-BA48-80F49C2C8936+2.jpg",
7171
alt: "Runway AI meetup at Texas Public Radio",
7272
},
73+
{
74+
src: "https://devsa-assets.s3.us-east-2.amazonaws.com/IMG_4665.jpg",
75+
alt: "DEVSA Game Design event with UTSA UC",
76+
},
7377
{
7478
src: "https://devsa-assets.s3.us-east-2.amazonaws.com/IMG_1484.jpg",
7579
alt: "Hanging out with the community at AITX event",

0 commit comments

Comments
 (0)