From 7da98f564d3af962cd83fccff913d56cddb94b09 Mon Sep 17 00:00:00 2001 From: phthallo Date: Fri, 24 Jan 2025 17:37:30 -0500 Subject: [PATCH] feat: lots of stuff - added countdown timer - typing text effect - image - yeah --- .../customButton.js | 2 +- .../congressional-app-challenge/polaroid.js | 4 +- pages/congressional-app-challenge.js | 160 +++++++++++++++--- 3 files changed, 142 insertions(+), 24 deletions(-) diff --git a/components/congressional-app-challenge/customButton.js b/components/congressional-app-challenge/customButton.js index 4bd68d46..8858cd66 100644 --- a/components/congressional-app-challenge/customButton.js +++ b/components/congressional-app-challenge/customButton.js @@ -25,7 +25,7 @@ export default function CustomButton({ }}> {text} - {children} + {children} diff --git a/components/congressional-app-challenge/polaroid.js b/components/congressional-app-challenge/polaroid.js index e1e81d95..aabee5dd 100644 --- a/components/congressional-app-challenge/polaroid.js +++ b/components/congressional-app-challenge/polaroid.js @@ -7,9 +7,9 @@ export default function Polaroid({ }){ return ( - + - {caption} + {caption} ) diff --git a/pages/congressional-app-challenge.js b/pages/congressional-app-challenge.js index 818f7996..a3936aa6 100644 --- a/pages/congressional-app-challenge.js +++ b/pages/congressional-app-challenge.js @@ -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"], }}> - + + + + + @@ -121,42 +147,117 @@ function Page({ - - + + borderLeft:"1px solid black", + borderRight:"1px solid black" }}> + + What will you create this year? + + + + This year, the Congressional App Challenge is partnering with Hack Club to empower teenage hackers nationwide. +

+ Every day, Hack Clubbers worldwide gather to code together online and in-person at hackathons, clubs and more. +

+ Connect with thousands of other high school programmers in the community and build your winning submission for the 2025 Challenge. +

+ Need a little more persuasion? +
+ { + element.innerHTML = `In the past, we've ran the world's longest hackathon 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 hundreds of thousands of dollars 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 7-day hikeathon 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 all-girls hackathon at SpaceX in Los Angeles.` + }, + 2000, + 'We run a worldwide clubs program, with awesome perks for club leaders.', + (element)=>{ + element.innerHTML = `We run a worldwide clubs program, with awesome perks for club leaders.` + }, + 2000 + ]} + wrapper="a" + speed={50} + style={{ variant: "text", color: palette["blue"]}} + repeat={Infinity} + /> + + + + + + + + + + + + + + + + + Get free stuff - 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 free, and completely open source. +

+ Go on — build that project you've always wanted to. Join a community of teen hackers - + + 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]}}/> + sxProps={{transform: 'rotate(350deg)', zIndex: 0, position: 'absolute', top: [-4, -2, -3, -4], left: [4,30, 220, 140]}}/> - 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 Counterspell, a game jam that ran simultaneously in 40+ locations worldwide. + + This year, we'll be running Scrapyard, 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. +

+ No matter who you are, where you're from, or how experienced (or not!) you are at programming - you're welcome here. @@ -196,23 +297,40 @@ function Page({ + - + - submissions for the 2025 Congressional App Challenge close + borderLeft: "1px solid black", + borderRight: "1px solid black"}}> + submissions for the 2025 Congressional App Challenge open + + What are you waiting for? @@ -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