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

feat: lots of stuff

Browse source 
- added countdown timer
- typing text effect
- image
- yeah
This commit is contained in:
phthallo 2025-01-24 17:37:30 -05:00
parent b9c71c0ac8
commit 7da98f564d
3 changed files with 142 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,7 +25,7 @@ export default function CustomButton({
}}>
{text}
<Box sx = {{position: "absolute", right: -12, top: -3 }}>{children}</Box>
<Box sx = {{position: "absolute", right: -20, top: -3 }}>{children}</Box>
</Button>
</Box>

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

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

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

@ -3,12 +3,14 @@ import {
Button,
Container,
Grid,
Link,
Heading,
Image,
Text
} from 'theme-ui'
import Meta from '@hackclub/meta'
import Countdown from 'react-countdown';
import Head from 'next/head'
import Nav from '../components/nav'
import Footer from '../components/footer'
@ -17,6 +19,9 @@ import CustomButton from '../components/congressional-app-challenge/customButton
import Polaroid from '../components/congressional-app-challenge/polaroid'
import UserProfile from '../components/congressional-app-challenge/userProfile'
import ForceTheme from '../components/force-theme'
import Carousel from '../components/index/carousel'
import { TypeAnimation } from 'react-type-animation'
import Photo from '../components/photo'
const styled = `
@import url("https://fonts.googleapis.com/css2?family=Gaegu&display=swap");
@ -79,10 +84,6 @@ const palette = {
"white": "#fff"
}
//const Timer = () => {
// const [timer, setTimer] = useState("00:00:00")
//}
function Page({
carouselCards
}) {
@ -107,7 +108,32 @@ function Page({
alignItems: "space-between",
mx: ["4", null, "5"],
}}>
<Screen title="Hack Club - Congressional App Challenge" backgroundImage="https://cloud-qqz8uj8y5-hack-club-bot.vercel.app/027544281748_b641f43479_o-1.jpg" sxProps={{height: ["40vh", null, null, "100%"]}}/>
<Screen
title="Hack Club - Congressional App Challenge"
backgroundImage="https://cloud-qqz8uj8y5-hack-club-bot.vercel.app/027544281748_b641f43479_o-1.jpg"
sxProps={{height: ["40vh", null, null, "100%"], position: 'relative'}}>
<Image
src = "https://cloud-n807bcpij-hack-club-bot.vercel.app/10318016-8380173-super-matte-5000-uncoated-vinyl-stickers_11.png"
sx = {{
position: "absolute",
height: "180px",
display: ["none", null, "block", null],
transform: "rotate(343deg)",
bottom: -40,
left: -49
}}/>
<Image
src = "https://cloud-jpt4mntmx-hack-club-bot.vercel.app/0heidi_1.png"
sx = {{
height: "160px",
display: ["none", null, "block", null],
position: "absolute",
transform: "rotate(18deg)",
right: -50
}}/>
</Screen>
<Box sx = {{display: "flex", flexDirection: "column", width: ["100%", null, null, "45%"], textAlign: ["center", null, null, "right"], alignItems: ['center', null, null, 'flex-end'], marginLeft: [null, null, null, 5], marginTop: [5, null, null, 0], justifyContent: "flex-end"}}>
<Box sx = {{display: "flex", flexDirection: "row", alignContent: "space-between"}}>
<Image src = "https://assets.hackclub.com/icon-rounded.svg" sx = {{height: 54, px: 1}}/>
@ -121,42 +147,117 @@ function Page({
<Image src = "/congressional-app-challenge/notify.svg" sx = {{zIndex: "1"}}/>
</CustomButton>
<CustomButton text="JOIN HACK CLUB" color={palette['white']} textColor={palette["black"]} link="#" sxProps = {{width: ["100%", null, null, "50%"]}}/>
</Box>
</Box>
</Box>
</Box>
<Box id="info" className = "gridlines" sx={{backgroundColor: palette['yellow']}}>
<Box id="intro" className = "gridlines" sx={{backgroundColor: palette['yellow'], border: "1px solid black"}}>
<Box sx = {{
display: "flex",
flexDirection: "column",
marginX: [3, 4, 4, 5],
padding: 4,
backgroundColor: "#fff",
border: "1px solid black"}}>
borderLeft:"1px solid black",
borderRight:"1px solid black" }}>
<Heading as="h1" variant="title" sx={{paddingY: 3, textAlign: "left", textShadow: "2px 2px #413cf2, 4px 4px #facb2d, 6px 6px #e15ba6"}}>What will you create this year?</Heading>
<Box sx = {{}}>
<Box sx = {{display: "flex", flexDirection: ["column", null, null, "row"], marginBottom: 3, columnGap: 5, rowGap: 5}}>
<Text variant="subtitle" sx={{width: ["100%"]}}>
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/>
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.
<br/> <br/>
Need a little more persuasion?
<br/>
<TypeAnimation
sequence={[
`In the past, we've run the world's longest hackathon across the United States — by train.`,
(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.`},
2000,
`We've shipped hundreds of thousands of dollars worth of laptops, 3D printers and other epic prizes to teenagers.`,
(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.`},
2000,
"We ran a 7-day hikeathon along the Pacific Crest Trail in 2024.",
(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.`
},
2000,
'We hosted a high schooler-directed all-girls hackathon at SpaceX in Los Angeles.',
(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.`
},
2000,
'We run a worldwide clubs program, with awesome perks for club leaders.',
(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.`
},
2000
]}
wrapper="a"
speed={50}
style={{ variant: "text", color: palette["blue"]}}
repeat={Infinity}
/>
</Text>
<Box sx={{width: ["100%", null, "45%", "45%"], marginX: "auto", paddingY: 3}}>
<Photo showAlt height="150px" width="150px" alt = "Assemble, held at Figma's HQ in San Francisco" src="https://cloud-d1marlfq9-hack-club-bot.vercel.app/0image.png"/>
</Box>
</Box>
</Box>
</Box>
</Box>
<Box id="content" sx={{backgroundColor: palette["cream"], paddingY: [1, 2, 2, 3]}}>
<Box sx = {{height: "100%"}}>
<Carousel cards={carouselCards}/>
</Box></Box>
<Box id="info" className = "gridlines" sx={{backgroundColor: palette['pink'], border: "1px solid black"}}>
<Box sx = {{
marginX: [3, 4, 4, 5],
padding: 4,
height: "100%",
backgroundColor: "#fff",
borderLeft:"1px solid black",
borderRight:"1px solid black" }}>
<Heading as="h1" sx={{paddingY: 3}}>Get <span class = "blurple">free stuff</span></Heading>
<Box sx = {{display: "flex", flexDirection: ["column", null, null, "row"]}}>
<Text sx = {{width: ["100%", null, null, "50%"], marginRight: [0, 0, 0, 3]}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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/>
<b>Go on — build that project you've always wanted to.</b>
</Text>
<Box sx = {{width: ["100%", null, null, "50%"], marginTop: [3, 3, 3, 0]}}>
</Box>
</Box>
<Heading as="h1" sx={{paddingY: 3, textAlign: "right"}}>Join a <span class = "yellow">community</span> of teen hackers</Heading>
<Box sx = {{display: "flex", flexDirection: ["column", null, null, "row"], position: 'relative'}}>
<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'}}>
<Polaroid
image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg"
caption="sdfjds"
sxProps={{transform: 'rotate(12deg)', zIndex: 1, position: 'absolute', top: -3, left: [4, 160, 300, 20]}}/>
image="https://cloud-cw5ndizx6-hack-club-bot.vercel.app/0image.png"
caption="Hack Clubbers at SpaceX"
sxProps={{transform: 'rotate(12deg)', zIndex: 1, position: 'absolute', top: [-4, -2, -3, -4], left: [4, 160, 300, 40]}}/>
<Polaroid
image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg"
caption="sdfjds"
sxProps={{transform: 'rotate(350deg)', zIndex: 0, position: 'absolute', top: -3, left: [4,30, 220, 6]}}/>
sxProps={{transform: 'rotate(350deg)', zIndex: 0, position: 'absolute', top: [-4, -2, -3, -4], left: [4,30, 220, 140]}}/>
</Box>
<Text sx = {{width: ["100%", null, null, "50%"], marginLeft: [0, 0, 0, 3], textAlign: "right", paddingTop: [3, 4, 4, 0]}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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.
This year, we'll be running <Link as="a" href = "https://scrapyard.hackclub.com">Scrapyard</Link>, with a flagship hackathon hosted in Los Angeles - built and organized {/* it pains me to spell it like this */} by a team of teenagers at Hack Club.
<br/><br/>
<b>No matter who you are, where you're from, or how experienced (or not!) you are at programming - you're welcome here.</b>
</Text>
</Box>
</Box>
@ -196,23 +297,40 @@ function Page({
<Box sx = {{
display: "flex",
flexDirection: ["column", "row", "row", "row"],
justifyContent: "space-around",
alignItems: "center"
alignItems: "center",
justifyContent: "space-around"
}}>
<UserProfile name = "sdf" age="17" state="vt" description="sdfsdfsd" image="https://static.vecteezy.com/system/resources/thumbnails/004/511/281/small/default-avatar-photo-placeholder-profile-picture-vector.jpg"/>
</Box>
<Image src = "https://cloud-n807bcpij-hack-club-bot.vercel.app/0terrifiedheidi.png"
sx = {{
height: "250px",
display: ["none", null, "block", null],
position: "absolute",
right: -4,
bottom: -60
}}/>
</Screen>
</Box>
</Box>
</Box>
<Box id="info" className = "gridlines" sx={{backgroundColor: palette['blurple']}}>
<Box id="info" className = "gridlines" sx={{backgroundColor: palette['blurple'], border: "1px solid black"}}>
<Box sx = {{
marginX: [3, 4, 4, 5],
padding: 4,
backgroundColor: "#fff",
border: "1px solid black"}}>
<Text as="h2" className="gaegu" sx={{textAlign: "center"}}>submissions for the 2025 Congressional App Challenge close</Text>
borderLeft: "1px solid black",
borderRight: "1px solid black"}}>
<Text as="h2" className="gaegu" sx={{textAlign: "center"}}>submissions for the 2025 Congressional App Challenge open</Text>
<Text
as="h1"
className="gaegu"
variant="ultratitle"
sx = {{
textAlign: "center",
marginY: 4}}> <Countdown date={Date.parse("2025-05-01")} /></Text>
<Heading variant="title" sx={{textShadow: "2px 2px #413cf2, 4px 4px #facb2d, 6px 6px #e15ba6", textAlign: 'center'}}>What are you waiting for?</Heading>
<Box sx = {{marginTop: 4, display: 'flex', flexDirection: ['column', null, null, 'row'], rowGap: 2, columnGap: 2, alignContent: 'space-around', width: "100%"}}>
<CustomButton text="FREE STICKERS" color={palette['pink']} textColor={palette["white"]} link="#" sxProps = {{width: ["100%", null, null, "50%"]}}/>
@ -227,7 +345,7 @@ function Page({
}
export async function getStaticProps() {
const carouselCards = require('../lib/congressional-carousel.json')
const carouselCards = require('../lib/carousel.json')
return {
props: {
carouselCards