System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 20:55:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: synced photos w/ typed text

Browse source
This commit is contained in:
phthallo 2025-01-27 16:11:10 -05:00
parent 184065cf43
commit dc099c003c
4 changed files with 68 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/congressional-app-challenge/polaroid.js
View file

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

5
components/congressional-app-challenge/screen.js
View file

@ -22,13 +22,14 @@ const Screen = ({ backgroundImage, title, sxProps, children, expand }) => {
<Box className="circle" sx = {{backgroundColor: "yellow"}}/> <Box className="circle" sx = {{backgroundColor: "yellow"}}/>
<Box className="circle" sx = {{backgroundColor: "green"}}/> <Box className="circle" sx = {{backgroundColor: "green"}}/>
</Box> </Box>
<Box className = "hidden" sx = {{ <Box sx = {{
borderRadius: "10px", borderRadius: "10px",
border: "1px solid", border: "1px solid",
marginX: "auto", marginX: "auto",
marginY: "auto", marginY: "auto",
paddingX: 2, paddingX: 2,
height: "80%" height: "80%",
visibility: ["hidden", "visible"]
}}> }}>
<Text variant="caption" sx = {{width: "80%", fontSize: "12px"}}>{title}</Text></Box> <Text variant="caption" sx = {{width: "80%", fontSize: "12px"}}>{title}</Text></Box>
</Box> </Box>

3
components/congressional-app-challenge/userProfile.js
View file

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

100
pages/congressional-app-challenge.js
View file

@ -11,6 +11,7 @@ import {
import Meta from '@hackclub/meta' import Meta from '@hackclub/meta'
import Countdown from 'react-countdown'; import Countdown from 'react-countdown';
import { useState } from 'react';
import Head from 'next/head' import Head from 'next/head'
import Nav from '../components/nav' import Nav from '../components/nav'
import Footer from '../components/footer' import Footer from '../components/footer'
@ -40,32 +41,21 @@ const styled = `
background-image: url('/congressional-app-challenge/pattern.svg'); background-image: url('/congressional-app-challenge/pattern.svg');
} }
.blurple { .underline {
color: rgb(65, 60, 242);
text-decoration: underline; text-decoration: underline;
text-decoration-style: wavy; text-decoration-style: wavy;
&.blurple {
color: rgb(65, 60, 242);
} }
&.yellow {
.yellow {
color: rgb(250, 203, 45); color: rgb(250, 203, 45);
text-decoration: underline; }
text-decoration-style: wavy; &.pink {
} color: rgb(225, 91, 166);
.pink {
color: rgb(225, 91, 166);
text-decoration: underline;
text-decoration-style: wavy;
}
@media only screen and (max-width: 500px) {
.hidden {
display: none;
} }
} }
` `
const color = '#000'
const palette = { const palette = {
"cream": "#fffbf1", "cream": "#fffbf1",
"pink": "#e15ba6", "pink": "#e15ba6",
@ -75,9 +65,19 @@ const palette = {
"white": "#fff" "white": "#fff"
} }
const photos = {
"0": {"name": "outernet", "alt": "Outernet (2023)", "img": "https://cloud-25h1tatrt-hack-club-bot.vercel.app/0260102957-168f5ff5-ca65-44d9-8814-a7baad487f31.png"},
"1": {"name": "zephyr", "alt": "The Hacker Zephyr (2021)", "img": "https://cloud-lgzpj1j7i-hack-club-bot.vercel.app/0zephyr.jpeg"},
"2": {"name": "arcade", "alt": "Arcade [AMA with Framework CEO Nirav Patel] (2024)", "img": "https://cloud-lvxsxkpn4-hack-club-bot.vercel.app/1frameworkama.png"},
"3": {"name": "trail", "alt": "The Trail (2024)", "img": "https://cloud-lvxsxkpn4-hack-club-bot.vercel.app/2image.png"},
"4": {"name": "ascend", "alt": "Ascend (2024)", "img": "https://cloud-ggl6f1hfj-hack-club-bot.vercel.app/0image.png"},
"5": {"name": "leaders", "alt": "The Leaders Summit (2024)", "img": "https://cloud-lvxsxkpn4-hack-club-bot.vercel.app/3group.png"}
}
function Page({ function Page({
carouselCards carouselCards
}) { }) {
const [contentTyping, setContentTyping] = useState(0)
return ( return (
<> <>
<Meta <Meta
@ -86,7 +86,7 @@ function Page({
description="Hack Club + The 2025 Congressional App Challenge" description="Hack Club + The 2025 Congressional App Challenge"
/> />
<ForceTheme theme="light" /> <ForceTheme theme="light" />
<Nav color={color} light /> <Nav color="#000" light />
<Box id = "hero" sx={{ <Box id = "hero" sx={{
backgroundColor: palette['cream'], backgroundColor: palette['cream'],
minHeight: "100vh", minHeight: "100vh",
@ -165,34 +165,56 @@ function Page({
This year, the <Link as="a" href="https://congressionalappchallenge.us">Congressional App Challenge</Link> is partnering with Hack Club to empower teenage hackers nationwide. This year, the <Link as="a" href="https://congressionalappchallenge.us">Congressional App Challenge</Link> is partnering with Hack Club to empower teenage hackers nationwide.
<br/> <br/> <br/> <br/>
Every day, Hack Clubbers worldwide <b>gather to code together</b> online and in-person at hackathons, clubs and more. Every day, Hack Clubbers worldwide <b>gather to code together</b> online and in-person at hackathons, clubs and more.
<br/> <br/>
Connect with <b>thousands of other high school programmers</b> in the community and build your winning submission for the 2025 Challenge. Connect with <b>thousands of other high school programmers</b> in the community and build your winning submission for the 2025 Challenge.
<br/> <br/> <br/> <br/>
<Text sx = {{textDecoration: "underline",textDecorationStyle: "wavy", textUnderlineOffset: "3px"}}>Need a little more persuasion?</Text> <Text sx = {{textDecoration: "underline",textDecorationStyle: "wavy", textUnderlineOffset: "3px"}}>Need a little more persuasion?</Text>
<br/> <br/>
<TypeAnimation <TypeAnimation
omitDeletionAnimation={true}
sequence={[ sequence={[
()=>{
setContentTyping(0)
},
`We've hosted an outdoors hackathon in the scenic Northeast kingdom of Vermont.`,
(element)=>{
element.innerHTML = `We've hosted an <a style = "color: #413cf2" href = "https://youtu.be/O1s5HqSqKi0">outdoors hackathon</a> in the scenic Northeast kingdom of Vermont.`},
2000,
()=>{
setContentTyping(1)
},
`In the past, we've ran the world's longest hackathon across the United States — by train.`, `In the past, we've ran the world's longest hackathon across the United States — by train.`,
(element)=>{ (element)=>{
element.innerHTML = `In the past, we've ran the <a style = "color: #413cf2" href = "https://www.youtube.com/watch?v=2BID8_pGuqA">world's longest hackathon</a> across the United States — by train.`}, element.innerHTML = `In the past, we've ran the <a style = "color: #e15ba6" href = "https://www.youtube.com/watch?v=2BID8_pGuqA">world's longest hackathon</a> across the United States — by train.`},
2000, 2000,
`We've shipped hundreds of thousands of dollars worth of laptops, 3D printers and other epic prizes to teenagers.`, ()=>{
setContentTyping(2)
},
`We've given away hundreds of thousands of dollars worth of laptops, 3D printers and other epic prizes to teenagers.`,
(element)=>{ (element)=>{
element.innerHTML = `We've shipped <a style = "color: #e15ba6" href = "https://hackclub.com/arcade">hundreds of thousands of dollars</a> worth of laptops, 3D printers and other epic prizes to teenagers.`}, element.innerHTML = `We've given away <a style = "color: #facb2d" href = "https://hackclub.com/arcade">hundreds of thousands of dollars</a> worth of laptops, 3D printers and other epic prizes to teenagers.`},
2000, 2000,
()=>{
setContentTyping(3)
},
"We ran a 7-day hikeathon along the Pacific Crest Trail in 2024.", "We ran a 7-day hikeathon along the Pacific Crest Trail in 2024.",
(element)=>{ (element)=>{
element.innerHTML = `We ran a <a style = "color: #facb2d" href = 'https://www.youtube.com/watch?v=ufMUJ9D1fi8'>7-day hikeathon</a> along the Pacific Crest Trail in 2024.` element.innerHTML = `We ran a <a style = "color: #413cf2" href = 'https://www.youtube.com/watch?v=ufMUJ9D1fi8'>7-day hikeathon</a> along the Pacific Crest Trail in 2024.`
}, },
2000, 2000,
()=>{
setContentTyping(4)
},
'We hosted a high schooler-directed all-girls hackathon at SpaceX in Los Angeles.', 'We hosted a high schooler-directed all-girls hackathon at SpaceX in Los Angeles.',
(element)=> { (element)=> {
element.innerHTML = `We hosted a high schooler-directed <a style = "color: #413cf2" href = "https://ascend.hackclub.com/">all-girls hackathon</a> at SpaceX in Los Angeles.` element.innerHTML = `We hosted a high schooler-directed <a style = "color: #e15ba6" href = "https://ascend.hackclub.com/">all-girls hackathon</a> at SpaceX in Los Angeles.`
}, },
2000, 2000,
()=>{
setContentTyping(5)
},
'We run a worldwide clubs program, with awesome perks for club leaders.', 'We run a worldwide clubs program, with awesome perks for club leaders.',
(element)=>{ (element)=>{
element.innerHTML = `We run a <a style = "color: #e15ba6" href = 'https://hackclub.com/clubs/'>worldwide clubs program</a>, with awesome perks for club leaders.` element.innerHTML = `We run a <a style = "color: #facb2d" href = 'https://hackclub.com/clubs/'>worldwide clubs program</a>, with awesome perks for club leaders.`
}, },
2000 2000
]} ]}
@ -202,8 +224,8 @@ function Page({
repeat={Infinity} repeat={Infinity}
/> />
</Text> </Text>
<Box sx={{width: ["100%", null, "45%", "45%"], marginX: "auto", paddingY: 3}}> <Box sx={{width: ["100%", null, "45%", "45%"], marginX: "auto", paddingY: [0, null, null, 3]}}>
<Photo showAlt height="150px" width="150px" alt = "Assemble, held at Figma's HQ in San Francisco (2022)" src="https://cloud-d1marlfq9-hack-club-bot.vercel.app/0image.png"/> <Photo showAlt height="150px" width="150px" alt = {photos[contentTyping]["alt"]} src={photos[contentTyping]["img"]}/>
</Box> </Box>
</Box> </Box>
</Box> </Box>
@ -225,13 +247,13 @@ function Page({
borderLeft:"1px solid black", borderLeft:"1px solid black",
borderRight:"1px solid black" }}> borderRight:"1px solid black" }}>
<Heading as="h1" sx={{paddingY: 3}}>Get <span class = "blurple">free stuff</span></Heading> <Heading as="h1" sx={{paddingY: 3}}>Get <span class = "underline blurple">free stuff</span></Heading>
<Box sx = {{display: "flex", flexDirection: ["column", null, null, "row"], marginBottom: 3, columnGap: 5, rowGap: 3, justifyContent: "flex-end"}}> <Box sx = {{display: "flex", flexDirection: ["column", null, null, "row"], marginBottom: 3, columnGap: 5, rowGap: 3, justifyContent: "flex-end"}}>
<Text sx = {{width: ["100%", null, null, "50%"], marginRight: [0, 0, 0, 3]}}> <Text sx = {{width: ["100%", null, null, "50%"], marginRight: [0, 0, 0, 3]}}>
Dozens of teen-led hardware and software initiatives ('You Ship, We Ship') are run each year, from Tamagotchi clones and portable game consoles to 3D websites. The best part? It's all <b>free</b>, and completely <Link as="a" href="https://github.com/hackclub">open source.</Link> Dozens of teen-led hardware and software initiatives ('You Ship, We Ship') are run each year, from Tamagotchi clones and portable game consoles to 3D websites. The best part? It's all <b>free</b>, and completely <Link as="a" href="https://github.com/hackclub">open source.</Link>
<br/> <br/> <br/> <br/>
Ever wanted to <Link as="a" href= "https://hackclub.com/onboard">learn how to design your own PCB</Link>? How about building a website in exchange for a <Link as="a" href = "https://boba.hackclub.com">boba</Link> or <Link as="a" href ="https://fraps.hackclub.com">frappuccino</Link>? Ever wanted to <Link as="a" href= "https://hackclub.com/onboard">learn how to design your own PCB</Link>? How about building a website in exchange for a <Link as="a" href = "https://boba.hackclub.com">boba</Link> or <Link as="a" href ="https://fraps.hackclub.com">frappuccino</Link>?
<br/>Or, have you been thinking about <b>publishing your Congressional App Challenge submission on the App Store</b>, but are worried about the publishing fee? We've <Link as="a" href="https://cider.hackclub.com">got you covered.</Link> <br/>Or, have you been thinking about <b>publishing your Congressional App Challenge submission on the App Store</b>, but are worried about paying the publishing fee? We've <Link as="a" href="https://cider.hackclub.com">got you covered.</Link>
<br/><br/> <br/><br/>
<b>Go on — build that project you've always wanted to.</b> <b>Go on — build that project you've always wanted to.</b>
</Text> </Text>
@ -244,17 +266,17 @@ function Page({
</Box> </Box>
</Box> </Box>
<Heading as="h1" sx={{paddingY: 3, textAlign: "right"}}>Join a <span class = "yellow">community</span> of teen hackers</Heading> <Heading as="h1" sx={{paddingY: 3, textAlign: "right"}}>Join a <span class = "underline yellow">community</span> of teen hackers</Heading>
<Box sx = {{display: "flex", flexDirection: ["column", null, null, "row"]}}> <Box sx = {{display: "flex", flexDirection: ["column", null, null, "row"]}}>
<Box sx = {{width: ["100%", null, null, "50%"], marginTop: [3, 3, 3, 0], paddingBottom: 6, marginBottom: 6, position: 'relative'}}> <Box sx = {{width: ["100%", null, null, "50%"], marginTop: [3, 3, 3, 0], paddingBottom: 6, marginBottom: 6, position: 'relative'}}>
<Polaroid <Polaroid
image="https://cloud-ggl6f1hfj-hack-club-bot.vercel.app/0image.png" image="https://cloud-d1marlfq9-hack-club-bot.vercel.app/0image.png"
caption="Hackers at SpaceX (2024)" caption="Assemble (2022)"
sxProps={{transform: 'rotate(12deg)', zIndex: 1, position: 'absolute', top: [-4, -3, -3, -5], left: [-2, 160, 340, 20], width: [140, 160, 185, 230]}}/> sxProps={{transform: 'rotate(12deg)', zIndex: 1, position: 'absolute', top: [-4, -3, -3, -5], left: [-2, 160, 340, 10], width: [140, 160, 185, 220]}}/>
<Polaroid <Polaroid
image="https://cloud-25h1tatrt-hack-club-bot.vercel.app/0260102957-168f5ff5-ca65-44d9-8814-a7baad487f31.png" image="https://cloud-5nm2f26ov-hack-club-bot.vercel.app/0img_8771.jpg"
caption="The Outernet Cafe (2023)" caption="Hackers with Linus Tech Tips (2024)"
sxProps={{transform: 'rotate(350deg)', zIndex: 0, position: 'absolute', top: [2, -2, -3, -4], left: [90, 30, 140, 130], width: [170, 220, 250, 300]}}/> sxProps={{transform: 'rotate(350deg)', zIndex: 0, position: 'absolute', top: [2, -2, -3, -4], left: [90, 30, 140, 180], width: [170, 220, 250, 230]}}/>
</Box> </Box>
<Text sx = {{width: ["100%", null, null, "50%"], marginLeft: [0, 0, 0, 3], textAlign: "right", paddingTop: [3, 4, 4, 0]}}> <Text sx = {{width: ["100%", null, null, "50%"], marginLeft: [0, 0, 0, 3], textAlign: "right", paddingTop: [3, 4, 4, 0]}}>
Hack Clubbers come from all over the world. In 2024, we hosted <Link as="a" href="https://counterspell.hackclub.com">Counterspell</Link>, a game jam that ran simultaneously in 40+ locations worldwide. Hack Clubbers come from all over the world. In 2024, we hosted <Link as="a" href="https://counterspell.hackclub.com">Counterspell</Link>, a game jam that ran simultaneously in 40+ locations worldwide.
@ -268,7 +290,7 @@ function Page({
</Box> </Box>
<Box id="winners" sx={{backgroundColor: palette["cream"], padding: [3, 4, 4, 5]}}> <Box id="winners" sx={{backgroundColor: palette["cream"], padding: [3, 4, 4, 5]}}>
<Box sx = {{padding: 4, height: ["100%", null, null, "90vh"]}}> <Box sx = {{padding: 4, height: ["100%", null, null, "90vh"]}}>
<Heading as="h1" sx={{pb: 4}}>Meet <span class = "pink">past winners</span></Heading> <Heading as="h1" sx={{pb: 4}}>Meet <span class = "underline pink">past winners</span></Heading>
<Box sx = {{position: "relative"}}> <Box sx = {{position: "relative"}}>
<Screen <Screen
expand expand
@ -290,11 +312,13 @@ function Page({
age="16" age="16"
state="TX" state="TX"
description="Alex likes writing code, designing PCBs, and maintaining servers." description="Alex likes writing code, designing PCBs, and maintaining servers."
page="https://www.congressionalappchallenge.us/22-TX22/"
image="https://cloud-b6mzh2987-hack-club-bot.vercel.app/11705187020782.jpg"/> image="https://cloud-b6mzh2987-hack-club-bot.vercel.app/11705187020782.jpg"/>
<UserProfile <UserProfile
name = "Andrea" name = "Andrea"
age="16" state="CA" age="16" state="CA"
description="Andrea is a high school developer and passionate researcher." description="Andrea is a high school developer and passionate researcher."
page="https://www.congressionalappchallenge.us/23-CA38/"
image="https://cloud-6aiidi150-hack-club-bot.vercel.app/0image_6966_from_slack.jpg"/> image="https://cloud-6aiidi150-hack-club-bot.vercel.app/0image_6966_from_slack.jpg"/>
</Box> </Box>
</Screen> </Screen>