mirror of
https://github.com/SrIzan10/hc-site.git
synced 2026-05-01 10:45:23 +00:00
style: run prettier and fix some formatting stuff
This commit is contained in:
phthallo
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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,
|
||||
}}
|
||||
>
|
||||
❮
|
||||
</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,
|
||||
}}
|
||||
>
|
||||
❯
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Carousel;
|
||||
@@ -1,33 +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: -20, top: -3 }}>{children}</Box>
|
||||
</Button>
|
||||
|
||||
</Box>
|
||||
|
||||
)}
|
||||
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: -20, top: -3 }}>{children}</Box>
|
||||
</Button>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,16 +1,33 @@
|
||||
import { Box, Text, Image } from 'theme-ui';
|
||||
|
||||
export default function Polaroid({
|
||||
image,
|
||||
caption,
|
||||
sxProps
|
||||
}){
|
||||
return (
|
||||
<Box sx = {sxProps}>
|
||||
<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"}}/>
|
||||
<Box variant="caption" className="gaegu" sx={{width: "100%", textAlign: "center", padding: [1, null, 2, 2]}}>{caption}</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
import { Box, Text, Image } from 'theme-ui'
|
||||
|
||||
export default function Polaroid({ image, caption, sxProps }) {
|
||||
return (
|
||||
<Box sx={sxProps}>
|
||||
<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'
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
variant="caption"
|
||||
className="gaegu"
|
||||
sx={{ width: '100%', textAlign: 'center', padding: [1, null, 2, 2] }}
|
||||
>
|
||||
{caption}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,55 +1,84 @@
|
||||
import { Box, Text, Image, Link } from 'theme-ui'
|
||||
|
||||
const Screen = ({ backgroundImage, title, sxProps, children, expand }) => {
|
||||
let color = backgroundImage ? "" : "#fff"
|
||||
let expan = expand ? ["100%", null, null, '58vh'] : "58vh"
|
||||
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;
|
||||
import { Box, Text, Image, Link } from 'theme-ui'
|
||||
|
||||
const Screen = ({ backgroundImage, title, sxProps, children, expand }) => {
|
||||
let color = backgroundImage ? '' : '#fff'
|
||||
let expan = expand ? ['100%', null, null, '58vh'] : '58vh'
|
||||
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
|
||||
|
||||
@@ -1,20 +1,38 @@
|
||||
import { Box, Image, Text } from 'theme-ui'
|
||||
|
||||
export default function UserProfile({
|
||||
image,
|
||||
name,
|
||||
age,
|
||||
state,
|
||||
page,
|
||||
description
|
||||
}){
|
||||
return (
|
||||
<Box sx = {{display: "flex", flexDirection: "column", padding: 2, width: 200}}>
|
||||
<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}}>
|
||||
<Text variant="subtitle" as="a" href={page} className="gaegu">{name} ({age}, {state})</Text>
|
||||
<Text variant = "text" className="gaegu">{description}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
import { Box, Image, Text } from 'theme-ui'
|
||||
|
||||
export default function UserProfile({
|
||||
image,
|
||||
name,
|
||||
age,
|
||||
state,
|
||||
page,
|
||||
description
|
||||
}) {
|
||||
return (
|
||||
<Box
|
||||
sx={{ display: 'flex', flexDirection: 'column', padding: 2, width: 200 }}
|
||||
>
|
||||
<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
|
||||
}}
|
||||
>
|
||||
<Text variant="subtitle" as="a" href={page} className="gaegu">
|
||||
{name} ({age}, {state})
|
||||
</Text>
|
||||
<Text variant="text" className="gaegu">
|
||||
{description}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
@@ -1,8 +1,5 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Grid,
|
||||
Link,
|
||||
Heading,
|
||||
Image,
|
||||
@@ -10,8 +7,8 @@ import {
|
||||
} from 'theme-ui'
|
||||
|
||||
import Meta from '@hackclub/meta'
|
||||
import Countdown from 'react-countdown';
|
||||
import { useState } from 'react';
|
||||
import Countdown from 'react-countdown'
|
||||
import { useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import Nav from '../components/nav'
|
||||
import Footer from '../components/footer'
|
||||
@@ -57,26 +54,48 @@ const styled = `
|
||||
`
|
||||
|
||||
const palette = {
|
||||
"cream": "#fffbf1",
|
||||
"pink": "#e15ba6",
|
||||
"blurple": "#413cf2",
|
||||
"yellow": "#facb2d",
|
||||
"black": "#000",
|
||||
"white": "#fff"
|
||||
cream: '#fffbf1',
|
||||
pink: '#e15ba6',
|
||||
blurple: '#413cf2',
|
||||
yellow: '#facb2d',
|
||||
black: '#000',
|
||||
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"}
|
||||
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({
|
||||
carouselCards
|
||||
}) {
|
||||
function Page({ carouselCards }) {
|
||||
const [contentTyping, setContentTyping] = useState(0)
|
||||
return (
|
||||
<>
|
||||
@@ -87,299 +106,595 @@ function Page({
|
||||
/>
|
||||
<ForceTheme theme="light" />
|
||||
<Nav color="#000" light />
|
||||
<Box id = "hero" sx={{
|
||||
<Box
|
||||
id="hero"
|
||||
sx={{
|
||||
backgroundColor: palette['cream'],
|
||||
minHeight: "100vh",
|
||||
minHeight: '100vh',
|
||||
pb: [6, 6, 6, 0],
|
||||
pt: [6, 6, 6, 6]
|
||||
}}>
|
||||
<Box sx= {{
|
||||
display: "flex", flexDirection: ["column", null, null, "row"],
|
||||
justifyContent: "center",
|
||||
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%"], 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)",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: ['column', null, null, 'row'],
|
||||
justifyContent: 'center',
|
||||
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%'],
|
||||
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)",
|
||||
}}
|
||||
/>
|
||||
<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}}/>
|
||||
<Image src = "https://upload.wikimedia.org/wikipedia/commons/9/9e/Plus_symbol.svg" sx = {{height: 54, px: 1}}/>
|
||||
<Image src = "https://www.congressionalappchallenge.us/wp-content/uploads/2018/08/CAClogo-dome-only-color.png" sx= {{height: 54, display: "inline"}}/>
|
||||
</Box>
|
||||
<Heading className="gaegu" variant="subtitle">Hack Club presents the</Heading>
|
||||
<Heading as="h1" variant="title" sx={{textShadow: "2px 2px #413cf2, 4px 4px #facb2d, 6px 6px #e15ba6"}}>Congressional App Challenge</Heading>
|
||||
<Box sx = {{width: "100%", marginTop: 4, display: 'flex', flexDirection: ['column', null, null, 'row'], rowGap: 3, columnGap: 3}}>
|
||||
<CustomButton
|
||||
text="FREE STICKERS"
|
||||
color={palette['pink']}
|
||||
textColor={palette["white"]}
|
||||
link="https://forms.hackclub.com/congressional-app-challenge"
|
||||
sxProps = {{width: ["100%", null, null, "50%"], position: 'relative'}}>
|
||||
<Image src = "/congressional-app-challenge/notify.svg" sx = {{zIndex: "1"}}/>
|
||||
</CustomButton>
|
||||
<CustomButton text="JOIN HACK CLUB" color={palette['white']} textColor={palette["black"]} link="https://hackclub.com/slack" sxProps = {{width: ["100%", null, null, "50%"]}}/>
|
||||
</Box>
|
||||
}}
|
||||
/>
|
||||
</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 }}
|
||||
/>
|
||||
<Image
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Plus_symbol.svg"
|
||||
sx={{ height: 54, px: 1 }}
|
||||
/>
|
||||
<Image
|
||||
src="https://www.congressionalappchallenge.us/wp-content/uploads/2018/08/CAClogo-dome-only-color.png"
|
||||
sx={{ height: 54, display: 'inline' }}
|
||||
/>
|
||||
</Box>
|
||||
<Heading className="gaegu" variant="subtitle">
|
||||
Hack Club presents the
|
||||
</Heading>
|
||||
<Heading
|
||||
as="h1"
|
||||
variant="title"
|
||||
sx={{
|
||||
textShadow: '2px 2px #413cf2, 4px 4px #facb2d, 6px 6px #e15ba6'
|
||||
}}
|
||||
>
|
||||
Congressional App Challenge
|
||||
</Heading>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
marginTop: 4,
|
||||
display: 'flex',
|
||||
flexDirection: ['column', null, null, 'row'],
|
||||
rowGap: 3,
|
||||
columnGap: 3
|
||||
}}
|
||||
>
|
||||
<CustomButton
|
||||
text="FREE STICKERS"
|
||||
color={palette['pink']}
|
||||
textColor={palette['white']}
|
||||
link="https://forms.hackclub.com/congressional-app-challenge"
|
||||
sxProps={{
|
||||
width: ['100%', null, null, '50%'],
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/congressional-app-challenge/notify.svg"
|
||||
sx={{ zIndex: '1' }}
|
||||
/>
|
||||
</CustomButton>
|
||||
<CustomButton
|
||||
text="JOIN HACK CLUB"
|
||||
color={palette['white']}
|
||||
textColor={palette['black']}
|
||||
link="https://hackclub.com/slack"
|
||||
sxProps={{ width: ['100%', null, null, '50%'] }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<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",
|
||||
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.
|
||||
Connect with <b>thousands of other high school programmers</b> in the community and build your winning submission for the 2025 Challenge.
|
||||
<br/> <br/>
|
||||
<Text sx = {{textDecoration: "underline",textDecorationStyle: "wavy", textUnderlineOffset: "3px"}}>Need a little more persuasion?</Text>
|
||||
<br/>
|
||||
<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',
|
||||
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: 3
|
||||
}}
|
||||
>
|
||||
<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. Connect with{' '}
|
||||
<b>thousands of other high school programmers</b> in the
|
||||
community and build your winning submission for the 2025
|
||||
Challenge.
|
||||
<br /> <br />
|
||||
<Text
|
||||
sx={{
|
||||
textDecoration: 'underline',
|
||||
textDecorationStyle: 'wavy',
|
||||
textUnderlineOffset: '3px'
|
||||
}}
|
||||
>
|
||||
Need a little more persuasion?
|
||||
</Text>
|
||||
<br />
|
||||
<TypeAnimation
|
||||
omitDeletionAnimation={true}
|
||||
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.`,
|
||||
(element)=>{
|
||||
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,
|
||||
()=>{
|
||||
setContentTyping(2)
|
||||
},
|
||||
`We've given away hundreds of thousands of dollars worth of laptops, 3D printers and other epic prizes to teenagers.`,
|
||||
(element)=>{
|
||||
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,
|
||||
()=>{
|
||||
setContentTyping(3)
|
||||
},
|
||||
"We ran a 7-day hikeathon along the Pacific Crest Trail in 2024.",
|
||||
(element)=>{
|
||||
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,
|
||||
()=>{
|
||||
setContentTyping(4)
|
||||
},
|
||||
'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: #e15ba6" href = "https://ascend.hackclub.com/">all-girls hackathon</a> at SpaceX in Los Angeles.`
|
||||
},
|
||||
2000,
|
||||
()=>{
|
||||
setContentTyping(5)
|
||||
},
|
||||
'We run a worldwide clubs program, with awesome perks for club leaders.',
|
||||
(element)=>{
|
||||
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
|
||||
]}
|
||||
wrapper="a"
|
||||
speed={50}
|
||||
style={{ variant: "text", color: palette["blue"]}}
|
||||
repeat={Infinity}
|
||||
/>
|
||||
</Text>
|
||||
<Box sx={{width: ["100%", null, "45%", "45%"], marginX: "auto", paddingY: [0, null, null, 3]}}>
|
||||
<Photo showAlt height="150px" width="150px" alt = {photos[contentTyping]["alt"]} src={photos[contentTyping]["img"]}/>
|
||||
omitDeletionAnimation={true}
|
||||
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.`,
|
||||
element => {
|
||||
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,
|
||||
() => {
|
||||
setContentTyping(2)
|
||||
},
|
||||
`We've given away hundreds of thousands of dollars worth of laptops, 3D printers and other epic prizes to teenagers.`,
|
||||
element => {
|
||||
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,
|
||||
() => {
|
||||
setContentTyping(3)
|
||||
},
|
||||
'We ran a 7-day hikeathon along the Pacific Crest Trail in 2024.',
|
||||
element => {
|
||||
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,
|
||||
() => {
|
||||
setContentTyping(4)
|
||||
},
|
||||
'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: #e15ba6" href = "https://ascend.hackclub.com/">all-girls hackathon</a> at SpaceX in Los Angeles.`
|
||||
},
|
||||
2000,
|
||||
() => {
|
||||
setContentTyping(5)
|
||||
},
|
||||
'We run a worldwide clubs program, with awesome perks for club leaders.',
|
||||
element => {
|
||||
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
|
||||
]}
|
||||
wrapper="a"
|
||||
speed={50}
|
||||
style={{ variant: 'text', color: palette['blue'] }}
|
||||
repeat={Infinity}
|
||||
/>
|
||||
</Text>
|
||||
<Box
|
||||
sx={{
|
||||
width: ['100%', null, '45%', '45%'],
|
||||
marginX: 'auto',
|
||||
paddingY: [0, null, null, 3]
|
||||
}}
|
||||
>
|
||||
<Photo
|
||||
showAlt
|
||||
height="150px"
|
||||
width="150px"
|
||||
alt={photos[contentTyping]['alt']}
|
||||
src={photos[contentTyping]['img']}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</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="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 = "underline blurple">free stuff</span></Heading>
|
||||
<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]}}>
|
||||
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/>
|
||||
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 paying the publishing fee? We've <Link as="a" href="https://cider.hackclub.com">got you covered.</Link>
|
||||
<br/><br/>
|
||||
<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="underline blurple">free stuff</span>
|
||||
</Heading>
|
||||
<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]
|
||||
}}
|
||||
>
|
||||
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 />
|
||||
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 paying the publishing fee? We've{' '}
|
||||
<Link as="a" href="https://cider.hackclub.com">
|
||||
got you covered.
|
||||
</Link>
|
||||
<br />
|
||||
<br />
|
||||
<b>Go on — build that project you've always wanted to.</b>
|
||||
</Text>
|
||||
<Box sx={{width: ["100%", "80%", "60%", "40%"], marginX: "auto"}}>
|
||||
<Polaroid
|
||||
image="https://cloud-k3x2sjgmj-hack-club-bot.vercel.app/0sprig-front.jpeg"
|
||||
caption="Sprig, an open-source game console"
|
||||
sxProps={{width: ["100%", null, "80%"], marginX: "auto"}}
|
||||
<Box sx={{ width: ['100%', '80%', '60%', '40%'], marginX: 'auto' }}>
|
||||
<Polaroid
|
||||
image="https://cloud-k3x2sjgmj-hack-club-bot.vercel.app/0sprig-front.jpeg"
|
||||
caption="Sprig, an open-source game console"
|
||||
sxProps={{ width: ['100%', null, '80%'], marginX: 'auto' }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<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 = {{width: ["100%", null, null, "50%"], marginTop: [3, 3, 3, 0], paddingBottom: 6, marginBottom: 6, position: 'relative'}}>
|
||||
<Polaroid
|
||||
image="https://cloud-d1marlfq9-hack-club-bot.vercel.app/0image.png"
|
||||
<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={{
|
||||
width: ['100%', null, null, '50%'],
|
||||
marginTop: [3, 3, 3, 0],
|
||||
paddingBottom: 6,
|
||||
marginBottom: 6,
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<Polaroid
|
||||
image="https://cloud-d1marlfq9-hack-club-bot.vercel.app/0image.png"
|
||||
caption="Assemble (2022)"
|
||||
sxProps={{transform: 'rotate(12deg)', zIndex: 1, position: 'absolute', top: [-4, -3, -3, -5], left: [-2, 160, 340, 10], width: [140, 160, 185, 220]}}/>
|
||||
<Polaroid
|
||||
image="https://cloud-5nm2f26ov-hack-club-bot.vercel.app/0img_8771.jpg"
|
||||
sxProps={{
|
||||
transform: 'rotate(12deg)',
|
||||
zIndex: 1,
|
||||
position: 'absolute',
|
||||
top: [-4, -3, -3, -5],
|
||||
left: [-2, 160, 340, 10],
|
||||
width: [140, 160, 185, 220]
|
||||
}}
|
||||
/>
|
||||
<Polaroid
|
||||
image="https://cloud-5nm2f26ov-hack-club-bot.vercel.app/0img_8771.jpg"
|
||||
caption="Hackers with Linus Tech Tips (2024)"
|
||||
sxProps={{transform: 'rotate(350deg)', zIndex: 0, position: 'absolute', top: [2, -2, -3, -4], left: [90, 30, 140, 180], width: [170, 220, 250, 230]}}/>
|
||||
sxProps={{
|
||||
transform: 'rotate(350deg)',
|
||||
zIndex: 0,
|
||||
position: 'absolute',
|
||||
top: [2, -2, -3, -4],
|
||||
left: [90, 30, 140, 180],
|
||||
width: [170, 220, 250, 230]
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<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.
|
||||
|
||||
This year, <b>we'll be running <Link as="a" href = "https://scrapyard.hackclub.com">Scrapyard</Link>, with a flagship hackathon hosted in Los Angeles</b> - just one of many events this year 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
|
||||
sx={{
|
||||
width: ['100%', null, null, '50%'],
|
||||
marginLeft: [0, 0, 0, 3],
|
||||
textAlign: 'right',
|
||||
paddingTop: [1, 1, 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.
|
||||
This year,{' '}
|
||||
<b>
|
||||
we'll be running{' '}
|
||||
<Link as="a" href="https://scrapyard.hackclub.com">
|
||||
Scrapyard
|
||||
</Link>
|
||||
, with a flagship hackathon hosted in Los Angeles
|
||||
</b>{' '}
|
||||
- just one of many events this year 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>
|
||||
</Box>
|
||||
<Box id="winners" sx={{backgroundColor: palette["cream"], padding: [3, 4, 4, 5]}}>
|
||||
<Box sx = {{padding: 4, height: ["100%", null, null, "90vh"]}}>
|
||||
<Heading as="h1" sx={{pb: 4}}>Meet <span class = "underline pink">past winners</span></Heading>
|
||||
<Box sx = {{position: "relative"}}>
|
||||
<Screen
|
||||
expand
|
||||
title = "Hack Club - Challenge Winners v2 FINAL THIS ONE"
|
||||
sxProps = {{
|
||||
position: ["relative", null, null, "absolute"],
|
||||
top: [0, 0, 0, 40],
|
||||
marginBottom: [2, 2, 2, 0],
|
||||
zIndex: 1
|
||||
}}>
|
||||
<Box sx = {{
|
||||
display: "flex",
|
||||
flexDirection: ["column", "row", "row", "row"],
|
||||
justifyContent: "space-around",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<UserProfile
|
||||
name = "Alex"
|
||||
age="16"
|
||||
state="TX"
|
||||
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"/>
|
||||
<UserProfile
|
||||
name = "Andrea"
|
||||
age="16" state="CA"
|
||||
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"/>
|
||||
</Box>
|
||||
</Screen>
|
||||
|
||||
<Screen
|
||||
expand
|
||||
title = "Hack Club - Challenge Winners (draft)"
|
||||
sxProps = {{
|
||||
position: ["relative", null, null, "absolute"],
|
||||
right: [0, 0, 0, 10],
|
||||
top: [0, 0, 0, -10],
|
||||
zIndex: 0}}>
|
||||
<Box sx = {{
|
||||
display: "flex",
|
||||
flexDirection: ["column", "row", "row", "row"],
|
||||
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'], border: "1px solid black"}}>
|
||||
<Box sx = {{
|
||||
marginX: [3, 4, 4, 5],
|
||||
padding: 4,
|
||||
backgroundColor: "#fff",
|
||||
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="https://forms.hackclub.com/congressional-app-challenge"
|
||||
sxProps = {{width: ["100%", null, null, "50%"]}}/>
|
||||
<CustomButton text="JOIN HACK CLUB" color={palette['white']} textColor={palette["black"]} link="https://hackclub.com/slack" sxProps = {{width: ["100%", null, null, "50%"]}}/>
|
||||
<Box
|
||||
id="winners"
|
||||
sx={{ backgroundColor: palette['cream'], padding: [3, 4, 4, 5] }}
|
||||
>
|
||||
<Box sx={{ padding: 4, height: ['100%', null, null, '90vh'] }}>
|
||||
<Heading as="h1" sx={{ pb: 4 }}>
|
||||
Meet <span class="underline pink">past winners</span>
|
||||
</Heading>
|
||||
<Box sx={{ position: 'relative' }}>
|
||||
<Screen
|
||||
expand
|
||||
title="Hack Club - Challenge Winners v2 FINAL THIS ONE"
|
||||
sxProps={{
|
||||
position: ['relative', null, null, 'absolute'],
|
||||
top: [0, 0, 0, 40],
|
||||
marginBottom: [2, 2, 2, 0],
|
||||
zIndex: 1
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: ['column', 'row', 'row', 'row'],
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<UserProfile
|
||||
name="Alex"
|
||||
age="16"
|
||||
state="TX"
|
||||
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"
|
||||
/>
|
||||
<UserProfile
|
||||
name="Andrea"
|
||||
age="16"
|
||||
state="CA"
|
||||
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"
|
||||
/>
|
||||
</Box>
|
||||
</Screen>
|
||||
|
||||
<Screen
|
||||
expand
|
||||
title="Hack Club - Challenge Winners (draft)"
|
||||
sxProps={{
|
||||
position: ['relative', null, null, 'absolute'],
|
||||
right: [0, 0, 0, 10],
|
||||
top: [0, 0, 0, -10],
|
||||
zIndex: 0
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: ['column', 'row', 'row', 'row'],
|
||||
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'], border: '1px solid black' }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
marginX: [3, 4, 4, 5],
|
||||
padding: 4,
|
||||
backgroundColor: '#fff',
|
||||
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="https://forms.hackclub.com/congressional-app-challenge"
|
||||
sxProps={{ width: ['100%', null, null, '50%'] }}
|
||||
/>
|
||||
<CustomButton
|
||||
text="JOIN HACK CLUB"
|
||||
color={palette['white']}
|
||||
textColor={palette['black']}
|
||||
link="https://hackclub.com/slack"
|
||||
sxProps={{ width: ['100%', null, null, '50%'] }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<style>{styled}</style>
|
||||
<Footer light />
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user