srizan/archived-hc-site
1
0
Fork 0
mirror of https://github.com/SrIzan10/hc-site.git synced 2026-05-01 10:45:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1463 from phthallo/congressional-app-challenge

Browse Source 
redesign congressional app challenge page
This commit is contained in:
Annabel Q
2025-01-28 21:03:36 +00:00
committed by GitHub
parent 228ff6e40f 03aef54877
commit b9fdb276c9
10 changed files with 859 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/congressional-app-challenge/carousel-cards.js
View File

@@ -1,21 +0,0 @@
import { Box, Text, Image, Link } from 'theme-ui'
export default function Carousel({
title,
user,
description,
link,
img
}){
return (
<Box id={user} sx={{width:['65%', '80%'], m:'3', display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center'}}>
<Image src={img} sx={{ borderRadius: '10px 10px 0 0', width: '100%', height: ['12em', '15em']}}></Image>
<Box sx={{alignItems:'left', textAlign:'left', display:'flex', flexDirection:'column', background:'white', color:'black', p:'2', borderRadius: '0 0 10px 10px', marginBottom: '2', padding: '3', height: '8em'}}>
<Link href = {link} target="_blank" rel="noopener">
<Text as="h3" sx={{}}>{title}</Text>
</Link>
<Text as="i" sx={{}}>{description}</Text>
</Box>
</Box>
)
}

114
components/congressional-app-challenge/carousel.js
View File

@@ -1,114 +0,0 @@
import React, { useRef, useEffect } from 'react';
import CarouselCards from './carousel-cards';
const Carousel = ({ cards }) => {
const scrollContainerRef = useRef(null);
const cardsPerView = 1; // Number of cards that can be seen at once
const cardWidth = 400; // Width of each card in pixels
const scrollAmount = cardWidth; // Total scroll width for each move
const totalCards = cards.length;
// Made another set of cards to do infinite scrolling
const infiniteCards = [...cards, ...cards, ...cards]; // Repeat the cards 3x for non-choppy scrolling
// Fixes scroll position to the middle set the mount for non-choppy scrolling
useEffect(() => {
if (scrollContainerRef.current) {
const initialScroll = totalCards * cardWidth; // Scroll to the start of the second set of items
scrollContainerRef.current.scrollLeft = initialScroll;
}
}, [totalCards, cardWidth]);
const moveCarousel = (direction) => {
if (scrollContainerRef.current) {
const scrollValue = direction * scrollAmount;
scrollContainerRef.current.scrollBy({
left: scrollValue,
behavior: 'smooth', // Smooth scrolling effect
});
}
};
const handleScroll = () => {
if (scrollContainerRef.current) {
const { scrollLeft, scrollWidth } = scrollContainerRef.current;
const maxScrollLeft = scrollWidth - scrollContainerRef.current.clientWidth;
// Reset to the middle set of cards if we've scrolled to either end
if (scrollLeft === 0) {
scrollContainerRef.current.scrollLeft = totalCards * cardWidth; // Reset to the end of the second set
} else if (scrollLeft >= maxScrollLeft) {
scrollContainerRef.current.scrollLeft = totalCards * cardWidth - scrollAmount; // Reset to the start of the second set
}
}
};
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
position: 'relative',
overflow: 'hidden', // Hide overflow content
}}
>
<button
onClick={() => moveCarousel(-1)}
style={{
position: 'absolute',
left: '10px',
background: 'transparent',
border: 'none',
fontSize: '24px',
cursor: 'pointer',
color: 'white',
zIndex: 1,
}}
>
&#10094;
</button>
<div
ref={scrollContainerRef}
onScroll={handleScroll}
style={{
display: 'flex',
width: '70%',
overflowX: 'hidden', // Hide overflow content
}}
>
{infiniteCards.map((item, index) => (
<div
key={index}
style={{
width: `${cardWidth}px`, // Set width for each card
flex: '0 0 auto', // Prevent cards from shrinking
marginRight: '2px', // Spacing between cards
}}
>
<CarouselCards {...item} />
</div>
))}
</div>
<button
onClick={() => moveCarousel(1)}
style={{
position: 'absolute',
right: '10px',
background: 'transparent',
border: 'none',
fontSize: '24px',
cursor: 'pointer',
color: 'white',
zIndex: 1,
}}
>
&#10095;
</button>
</div>
);
};
export default Carousel;

38
components/congressional-app-challenge/customButton.js Normal file
View File

@@ -0,0 +1,38 @@
import { Button, Box, Text } from 'theme-ui'
export default function CustomButton({
text,
link,
color,
textColor, // 🤓
sxProps,
children
}) {
return (
<Box sx={sxProps}>
<Button
as="a"
className="gaegu"
href={link}
sx={{
marginTop: 2,
padding: 1,
height: 60,
width: '100%',
color: textColor,
fontSize: '150',
borderRadius: 0,
textAlign: 'center',
itemsAlign: 'center',
alignContent: 'center',
backgroundColor: color,
border: '1px solid',
borderColor: '#000'
}}
>
{text}
<Box sx={{ position: 'absolute', right: -26, top: -3 }}>{children}</Box>
</Button>
</Box>
)
}

35
components/congressional-app-challenge/polaroid.js Normal file
View File

@@ -0,0 +1,35 @@
import { Box, Text, Image } from 'theme-ui'
export default function Polaroid({ image, alt, caption, sxProps, children }) {
return (
<Box sx={sxProps}>
<Box
sx={{
margin: 2,
backgroundColor: '#fff',
border: '2px',
width: '100%',
boxShadow: '1px 1px 1px 1px #9E9E9E'
}}
>
<Image
src={image}
alt={alt}
sx={{
paddingX: [2, null, 3, null],
paddingTop: [2, null, 3, null],
objectFit: 'cover'
}}
/>
<Box
variant="caption"
className="gaegu"
sx={{ width: '100%', textAlign: 'center', padding: [1, null, 2, 2] }}
>
{caption}
</Box>
</Box>
{children}
</Box>
)
}

95
components/congressional-app-challenge/screen.js Normal file
View File

@@ -0,0 +1,95 @@
import { Box, Text, Image, Link } from 'theme-ui'
const Screen = ({
backgroundImage,
title,
sxProps,
children,
expand,
expand2
}) => {
let color = backgroundImage ? '' : '#fff'
let expan = expand2
? ['100%', null, null, '68vh']
: expand
? ['100%', null, null, '58vh']
: '58vh' // jank
let props = Object.assign(
{},
{
display: 'flex',
flexDirection: 'column',
width: ['100%', null, null, '55%']
},
sxProps
)
return (
<Box sx={props}>
<Box
sx={{
width: '100%',
borderColor: 'black',
border: '2px solid',
borderRadius: '6px 6px 0 0',
height: '7vh',
backgroundColor: 'white',
alignItems: 'center',
display: 'flex',
flexDirection: 'row'
}}
>
<Box sx={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: 2,
marginBottom: 2,
marginLeft: 2
}}
>
<Box className="circle" sx={{ backgroundColor: 'red' }} />
<Box className="circle" sx={{ backgroundColor: 'yellow' }} />
<Box className="circle" sx={{ backgroundColor: 'green' }} />
</Box>
<Box
sx={{
borderRadius: '10px',
border: '1px solid',
marginX: 'auto',
marginY: 'auto',
paddingX: 2,
height: '80%',
visibility: ['hidden', 'visible']
}}
>
<Text variant="caption" sx={{ width: '80%', fontSize: '12px' }}>
{title}
</Text>
</Box>
</Box>
</Box>
<Box
sx={{
width: ['100%'],
borderColor: 'black',
backgroundColor: color,
borderBottom: '2px solid',
borderLeft: '2px solid',
borderRight: '2px solid',
borderRadius: '0 0 6px 6px',
padding: 3,
height: expan,
backgroundImage: `url(${backgroundImage})`,
backgroundSize: 'cover'
}}
>
{children}
</Box>
</Box>
)
}
export default Screen

40
components/congressional-app-challenge/userProfile.js Normal file
View File

@@ -0,0 +1,40 @@
import { Box, Image, Text } from 'theme-ui'
export default function UserProfile({
image,
name,
age,
alt,
state,
page,
description
}) {
return (
<Box
sx={{ display: 'flex', flexDirection: 'column', padding: 2, width: 200 }}
>
<Image
src={image}
alt={alt}
sx={{ objectFit: 'cover', borderRadius: 6, width: 170, height: 170 }}
/>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
width: '100%',
textAlign: 'left',
paddingBottom: 1,
marginBottom: 1
}}
>
<Text variant="subtitle" as="a" href={page} className="gaegu">
{name} ({age}, {state})
</Text>
<Text variant="text" className="gaegu">
{description}
</Text>
</Box>
</Box>
)
}

51
lib/congressional-carousel.json
View File

@@ -1,51 +0,0 @@
[
{
"title": "Starfly (Andrea, 16)",
"user": "Andrea",
"description": "Starfly bridges the gap between gender and racial profiles in astronomy and STEM.",
"link": "https://www.congressionalappchallenge.us/23-CA38/",
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/3starfly.png"
},
{
"title": "Lexiscan (Clay, 16)",
"user": "Clay",
"description": "Lexiscan is an app that helps people with dyslexia to read by reading text out loud.",
"link": "https://www.congressionalappchallenge.us/23-VT00/",
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/2lexiscan.png"
},
{
"title": "DriveSmart (Sahiti, 17)",
"user": "Sahiti",
"description": "Drivesmart helps teen drivers be safe on the roads through ML and moderation.",
"link": "https://www.congressionalappchallenge.us/23-GA06/",
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/1drivesmart.png"
},
{
"title": "TrailUS (Alex, 15)",
"user": "Alex",
"description": "TrailUS encourages healthier lifestyles and makes it easy for people to enjoy local trails.",
"link": "https://www.congressionalappchallenge.us/22-TX22/",
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/5trailus.png"
},
{
"title": "Dreamer (Samay, 17)",
"user": "Samay",
"description": "Dreamer makes learning more interesting for students with learning disorders.",
"link": "https://www.congressionalappchallenge.us/23-SC05/",
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/0dreamer.png"
},
{
"title": "Moment-ly (Zoya, 17)",
"user": "Zoya",
"description": "Moment-ly motivates a female demographic with tools, while promoting wellness.",
"link": "#",
"img": "https://cloud-dcu6dxu0h-hack-club-bot.vercel.app/4momently.png"
},
{
"title": "Progress in Congress (Anish)",
"user": "Anish",
"description": "Helps people stay informed about politics in their area",
"link": "https://www.congressionalappchallenge.us/22-NY18/",
"img": "https://cloud-454mt4dys-hack-club-bot.vercel.app/0image.png"
}
]

1198
pages/congressional-app-challenge.js
View File

File diff suppressed because it is too large Load Diff

4
public/congressional-app-challenge/notify.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.99763 27.7058L9.84963 27.1822L8.99764 27.7058L12.1331 32.8083L7.28366 36.3225C6.18177 37.121 6.18177 38.7629 7.28366 39.5614L12.1331 43.0757L8.99764 48.1782C8.28519 49.3376 8.91354 50.8545 10.2371 51.1706L16.0623 52.5615L15.1181 58.4755C14.9036 59.8193 16.0646 60.9803 17.4084 60.7658L23.3224 59.8216L24.7133 65.6468C25.0294 66.9703 26.5463 67.5987 27.7057 66.8862L32.8082 63.7508L36.3225 68.6002C37.121 69.7021 38.7629 69.7021 39.5614 68.6002L43.0756 63.7508L48.1781 66.8862C49.3375 67.5987 50.8545 66.9703 51.1705 65.6468L52.5615 59.8216L58.4755 60.7658C59.8192 60.9803 60.9803 59.8193 60.7657 58.4755L59.8216 52.5615L65.6467 51.1706C66.9703 50.8545 67.5987 49.3376 66.8862 48.1782L63.7508 43.0757L68.6002 39.5614C69.7021 38.7629 69.7021 37.121 68.6002 36.3225L63.7508 32.8083L66.8862 27.7058C67.5987 26.5464 66.9703 25.0294 65.6467 24.7133L59.8216 23.3224L60.7657 17.4084C60.9803 16.0646 59.8192 14.9036 58.4755 15.1181L52.5615 16.0623L51.1705 10.2372C50.8545 8.91357 49.3375 8.28522 48.1781 8.99767L43.0756 12.1331L39.5614 7.28369C38.7629 6.1818 37.121 6.1818 36.3225 7.28369L32.8082 12.1331L27.7057 8.99767C26.5463 8.28522 25.0294 8.91357 24.7133 10.2372L23.3224 16.0623L17.4084 15.1181C16.0646 14.9036 14.9036 16.0646 15.1181 17.4084L16.0623 23.3224L10.2371 24.7133C8.91354 25.0294 8.28519 26.5464 8.99763 27.7058Z" fill="#0907EA" stroke="black" stroke-width="2"/>
<path d="M36.0872 47.4421L34.6857 24.8632L34.6631 16.5552H40.6931L40.7157 24.8632L39.4372 47.4421H36.0872ZM37.8618 59.435C35.4498 59.435 33.4349 57.626 33.4278 55.013C33.4203 52.2661 35.4257 50.5911 37.8377 50.5911C40.2497 50.5911 42.2643 52.2661 42.2718 55.013C42.2789 57.626 40.2738 59.435 37.8618 59.435Z" fill="#EFCA45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
public/congressional-app-challenge/pattern.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="evenodd"><g fill="#000000" fill-opacity="0.4"><path opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z"/><path d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB