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

Merge branch 'main' into In-N-Out_sticker

Browse source
This commit is contained in:
Ben 2024-02-16 17:52:16 +01:00 • committed by GitHub
commit f52fbbb15e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
75 changed files with 7269 additions and 2596 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -7,4 +7,5 @@ public/sitemap.xml
.vercel
.vscode
yarn-error.log
bun.lockb
bun.lockb
.idea

2
components/bio.js
View file

@ -25,7 +25,7 @@ export default function Bio({ popup = true, spanTwo = false, ...props }) {
overflowY: 'hidden',
overscrollBehavior: 'contain',
gridColumn: !spanTwo ? null : [null, null, `1 / span 2`],
position: 'relative',
position: 'relative'
}}
as={href && !text ? 'a' : 'div'}
href={href}

11
components/footer.js
View file

@ -19,8 +19,6 @@ const Base = styled(Box)`
}
`
const Logo = props => (
<svg
xmlns="http://www.w3.org/2000/svg"
@ -51,7 +49,12 @@ const Service = ({ href, icon, name = '', ...props }) => (
</Link>
)
const Footer = ({ dark = false, children, ...props }) => (
const Footer = ({
dark = false,
email = 'team@hackclub.com',
children,
...props
}) => (
<Base
color={dark ? 'muted' : 'slate'}
py={[4, 5]}
@ -173,7 +176,7 @@ const Footer = ({ dark = false, children, ...props }) => (
icon="instagram"
name="Instagram"
/>
<Service href="mailto:team@hackclub.com" icon="email-fill" />
<Service href={`mailto:${email}`} icon="email-fill" />
</Grid>
<Text my={2}>
<Link href="tel:1-855-625-HACK">1-855-625-HACK</Link>

15
components/hackathons/features/money.js
View file

@ -29,22 +29,11 @@ const Content = () => (
<ListItem
knew
icon="payment"
leadText={
<>
$500 grants (in partnership with <i>FIRST®</i>).
</>
}
leadText={<>$500 grants.</>}
body={
<>
Running on HCB? Get a $500 grant once you have a venue, provided
by Hack Club with the help of{' '}
<Link
href="https://www.firstinspires.org/"
sx={{ fontStyle: 'italic', color: 'white' }}
>
FIRST
</Link>
.
by Hack Club.
<NextLink href="/hackathons/grant">
<Link sx={{ ml: 2, cursor: 'pointer' }}>Learn more &rarr;</Link>
</NextLink>

8
components/hackathons/recap.js
View file

@ -61,7 +61,7 @@ export default function Recap() {
icon="slack"
color="white"
name="Slack community"
desc="Join the Slack and get support in anything hackathon organizing from sponsorships to logistics to ordering food."
desc="Chat in Slack for support with organizing your hackathon, from finding a venue to marketing your event."
/>
</Card>
<Card
@ -81,8 +81,8 @@ export default function Recap() {
name="$500 grants"
desc={
<>
Get a $500 grant for your hackathon (thanks to <i>FIRST</i>!),
and access to a suite of financial tools when you join HCB.
Join HCB to receive a $500 grant for your hackathon and a suite
of financial tools.
</>
}
/>
@ -102,7 +102,7 @@ export default function Recap() {
icon="event-check"
color="white"
name="Marketing"
desc="List your event on the front page of Google and emailed to high school hackers in your area."
desc="Get your event listed on Google's front page, emailed to nearby teens, and seen by our hackathon calendar's 3K+ monthly users."
/>
</Card>
</Grid>

42
components/hcb/apply-button.js
View file

@ -1,30 +1,32 @@
import { Button, Text, Image, Flex } from 'theme-ui'
import Icon from '../icon'
import Link from 'next/link'
export default function ApplyButton() {
return (
<Button
variant="ctaLg"
as="a"
href="/hcb/apply"
sx={{
width: '100%',
height: '4.2rem'
// borderRadius: '1.5rem',
}}
>
<Flex
<Link href="/hcb/apply" passHref legacyBehavior>
<Button
variant="ctaLg"
as="a"
sx={{
alignItems: 'center',
gap: 3,
mr: '-32px' // Man...
width: '100%',
height: '4.2rem'
// borderRadius: '1.5rem',
}}
>
<Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
Apply now
</Text>
<Icon glyph="view-forward" size={46} color="white" />
</Flex>
</Button>
<Flex
sx={{
alignItems: 'center',
gap: 3,
mr: '-32px' // Man...
}}
>
<Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
Apply now
</Text>
<Icon glyph="view-forward" size={46} color="white" />
</Flex>
</Button>
</Link>
)
}

52
components/hcb/apply/address-input.js
View file

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react'
import { useEffect, useRef, useState, useCallback } from 'react'
import { Box, Flex, Input, Text } from 'theme-ui'
import FlexCol from '../../flex-col'
import AutofillColourFix from './autofill-colour-fix'
@ -31,13 +31,13 @@ const approvedCountries = [
export default function AutoComplete({ name, isPersonalAddressInput }) {
const input = useRef()
const base = useRef()
const [predictions, setPredictions] = useState(null)
const [countryCode, setCountryCode] = useState(null)
const optionClicked = async prediction => {
input.current.value = prediction.name
await onInput(prediction.name)
// Needs to match the shape of the event object because onInput takes an event object.
await onInput({ target: { value: prediction.name } })
setPredictions(null)
}
const clickOutside = e => {
@ -46,26 +46,28 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
}
}
const onInput = async value => {
setPredictions(value ? (await search(value)).results : null)
const onInput = useCallback(
async e => {
if (!e.target.value) return
const value = e.target.value
if (isPersonalAddressInput) return
geocode(value)
.then(res => {
const country = res?.results[0]?.country
const countryCode = res?.results[0]?.countryCode
setPredictions(value ? (await search(value)).results : null)
setCountryCode(countryCode)
if (isPersonalAddressInput) return
geocode(value)
.then(res => {
const country = res?.results[0]?.country
const countryCode = res?.results[0]?.countryCode
sessionStorage.setItem('bank-signup-eventCountry', country)
sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
})
.catch(err => console.error(err))
}
setCountryCode(countryCode)
const onInputWrapper = async e => {
if (e.target.value) await onInput(e.target.value)
}
sessionStorage.setItem('bank-signup-eventCountry', country)
sessionStorage.setItem('bank-signup-eventCountryCode', countryCode)
})
.catch(err => console.error(err))
},
[isPersonalAddressInput]
)
//TODO: Close suggestions view when focus is lost via tabbing.
//TODO: Navigate suggestions with arrow keys.
@ -75,15 +77,15 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
if (!inputEl) return
document.addEventListener('click', clickOutside)
inputEl.addEventListener('input', onInputWrapper)
inputEl.addEventListener('focus', onInputWrapper)
inputEl.addEventListener('input', onInput)
inputEl.addEventListener('focus', onInput)
return () => {
document.removeEventListener('click', clickOutside)
inputEl.removeEventListener('input', onInputWrapper)
inputEl.removeEventListener('focus', onInputWrapper)
inputEl.removeEventListener('input', onInput)
inputEl.removeEventListener('focus', onInput)
}
}, [])
}, [onInput])
return (
<Box sx={{ position: 'relative', width: '100%' }}>
@ -116,7 +118,7 @@ export default function AutoComplete({ name, isPersonalAddressInput }) {
Currently, we only have first-class support for organizations in
select countries.
<br />
If you're somewhere else, you can still use bank!
If you're somewhere else, you can still use HCB!
<br />
Please contact us at hcb@hackclub.com
</Text>

8
components/hcb/apply/checkbox.js
View file

@ -1,20 +1,22 @@
import { useEffect, useState } from 'react'
import Icon from '../../icon'
import { useRouter } from 'next/router'
export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
const [checked, setChecked] = useState(defaultChecked)
const toggle = () => setChecked(!checked)
const router = useRouter()
/* Fill in the field with the value from sessionStorage.
For other input elements, the value is set in the Field component,
but these checkboxes hold their state in useState rather than in the DOM. */
useEffect(() => {
const value = sessionStorage.getItem('bank-signup-' + name)
const value = router.query[name] || sessionStorage.getItem('bank-signup-' + name)
if (value) {
const input = document.getElementById(name)
input && setChecked(value === 'true')
input && setChecked(!!value)
}
}, [name])
}, [router.query, name])
return (
<>

4
components/hcb/apply/field.js
View file

@ -18,12 +18,12 @@ export default function Field({
/* Fill in the field input element with the value from sessionStorage.
Note: the custom checkbox component does this in its own useEffect hook. */
useEffect(() => {
const value = sessionStorage.getItem('bank-signup-' + name)
const value = router.query[name] || sessionStorage.getItem('bank-signup-' + name)
if (value) {
const input = document.getElementById(name)
if (input) input.value = value
}
}, [name])
}, [router.query, name])
return (
<FlexCol gap={2} width={'100%'}>

5
components/hcb/apply/hcb-info.js
View file

@ -63,7 +63,10 @@ export default function HCBInfo() {
Rather than setting up a standard bank account, you'll get a
restricted fund within Hack Club accounts.
</li>
<li>You can't deposit or withdraw money.</li>
<li>
You can't deposit or withdraw cash. But you can receive any
kind of electronic payment!
</li>
</ul>
</Text>
</FlexCol>

6
components/hcb/apply/personal-form.js
View file

@ -163,14 +163,14 @@ export default function PersonalInfoForm({
</Field>
<Field
name="accommodations"
label="Accessability needs"
description="Please specify any accommodations or accessability needs you have so we can support you during onboarding and while using HCB"
label="Accessibility needs"
description="Please specify any accommodations, accessibility needs, or other important information so we can support you during onboarding and while using HCB"
requiredFields={requiredFields}
>
<Input
name="accommodations"
id="accommodations"
placeholder="I need a screen reader"
placeholder="I use a screen reader/I need increased text size during onboarding"
sx={{ ...AutofillColourFix }}
/>
</Field>

16
components/hcb/everything.js
View file

@ -52,12 +52,12 @@ export default function Everything({ fee, partner = false }) {
item.includes('signup')
? 'bolt'
: item.includes('card')
? 'card'
: item.includes('Transparency')
? 'explore'
: item.includes('Physical')
? 'email'
: 'enter'
? 'card'
: item.includes('Transparency')
? 'explore'
: item.includes('Physical')
? 'email'
: 'enter'
}
>
{item}
@ -73,8 +73,8 @@ export default function Everything({ fee, partner = false }) {
item.startsWith('Instant')
? 'bolt'
: item.includes('form')
? 'link'
: 'enter'
? 'link'
: 'enter'
}
>
{item}

8
components/hcb/stats.js
View file

@ -5,10 +5,10 @@ const easeInOutExpo = x =>
x === 0
? 0
: x === 1
? 1
: x < 0.5
? Math.pow(2, 20 * x - 10) / 2
: (2 - Math.pow(2, -20 * x + 10)) / 2
? 1
: x < 0.5
? Math.pow(2, 20 * x - 10) / 2
: (2 - Math.pow(2, -20 * x + 10)) / 2
function startMoneyAnimation(
setBalance,

2
components/index/cards/hackathons.js
View file

@ -1,8 +1,6 @@
import CardModel from './card-model'
import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
import { useState, useEffect } from 'react'
import Buttons from './button'
import ScrollingHackathons from '../../hackathons/scrolling-hackathons'
import Dot from '../../dot'
import { formatDate } from '../../../lib/dates'

61
components/index/cards/haunted.js Normal file
View file

@ -0,0 +1,61 @@
import CardModel from './card-model'
import { Box, Flex, Grid, Image, Text, Link } from 'theme-ui'
import Buttons from './button'
/** @jsxImportSource theme-ui */
export default function Haunted() {
return (
<CardModel
github_link="https://github.com/hackclub/www-hauntedhouse"
color="white"
sx={{
backgroundSize: 'cover',
backgroundColor: '#95C9E5',
border: '2px solid #EB6424'
}}
position={[null, 'bottom', 'bottom']}
highlight="#cc5600"
image="/haunted/bg.webp"
filter="brightness(0.7)"
>
<Grid columns={[1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
<Image
src="/haunted/haunted-text.svg"
sx={{
width: ['200px', '250px', '300px'],
mt: ['-10px', '-20px', '-20px'],
position: 'relative',
zIndex: 2,
fontSize: ['36px', 4, 5],
color: 'white'
}}
alt="Haunted"
/>
<Box></Box>
<Text as="p" variant="subtitle" sx={{ color: 'white' }}>
Haunted House is a Chicago-based event full of sites and frights! Join
us from October 28-29 for a weekend of coding pushing the bounds of
creativity, where fright meets byte!
</Text>
<Flex
sx={{
flexDirection: 'column',
mt: [3, 3, 4],
alignItems: 'end',
justifyContent: 'flex-end'
}}
></Flex>
<Buttons
id="14"
link="https://haunted.hackclub.com"
icon="welcome"
primary="#EB6424"
>
Sign Up
</Buttons>
</Grid>
</CardModel>
)
}

15
components/index/cards/haxidraw.js
View file

@ -1,12 +1,10 @@
import CardModel from './card-model'
import { Box, Flex, Grid, Image, Link, Text } from 'theme-ui'
import { Box, Flex, Grid, Text } from 'theme-ui'
import Buttons from './button'
import styled from '@emotion/styled'
import RelativeTime from 'react-relative-time'
/** @jsxImportSource theme-ui */
export default function Haxidraw() {
export default function Haxidraw({ stars }) {
return (
<CardModel
github_link="https://github.com/hackclub/blot/"
@ -17,8 +15,9 @@ export default function Haxidraw() {
backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.4) 70%), url('https://cloud-1tnl6uqvw-hack-club-bot.vercel.app/0image.png')`
}}
position={[null, 'bottom', 'bottom']}
highlight="#271932"
highlight="#2b27f8d9"
filter="brightness(0.8)"
stars={stars}
>
<Text variant="title" as="h3" sx={{ fontSize: ['36px', 4, 5] }}>
Blot
@ -30,8 +29,8 @@ export default function Haxidraw() {
variant="subtitle"
sx={{ zIndex: 2, position: 'relative' }}
>
Blot is a W.I.P. open source drawing machine and online editor,
designed to be a fun and beginner friendly introduction to digital
Blot is an open source drawing machine and online editor, designed
to be a fun and beginner friendly introduction to digital
fabrication and generative art.
</Text>
</Box>
@ -49,7 +48,7 @@ export default function Haxidraw() {
<Buttons
id="52"
icon="code"
link="https://blot.hackclub.dev"
link="https://blot.hackclub.dev/editor"
primary="rgba(255, 255, 255, 0.9)"
sx={{ color: 'black' }}
>

257
components/index/cards/mailing-list.js
View file

@ -1,19 +1,12 @@
import Icon from '@hackclub/icons'
import { useRef, useState } from 'react'
import {
Box,
Label,
Input,
Button,
Text,
Alert,
Card,
Flex,
Grid
} from 'theme-ui'
import CardModel from './card-model'
import { useEffect, useRef, useState } from 'react'
import { Box, Button, Card, Flex, Grid, Input, Link, Text } from 'theme-ui'
import { format, parse } from 'date-fns'
import BGImg from '../../background-image'
import FooterImgFile from '../../../public/home/footer.png'
import background from '../../../public/home/footer.png'
import MailCard from '../../mail-card'
const markdownToHtml = require('@hackclub/markdown')
const Loading = () => (
<Box
@ -21,14 +14,13 @@ const Loading = () => (
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
width: '100%',
border: '2px solid #f3f3f3',
borderTop: '2px solid #ec3750',
borderRadius: '50%',
width: '10px',
height: '10px',
width: '16px',
height: '16px',
animation: 'spin 2s linear infinite',
mr: '5px',
'@keyframes spin': {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' }
@ -40,6 +32,7 @@ const Loading = () => (
const MailingList = () => {
const [submitting, setSubmitting] = useState(false)
const [submitted, setSubmitted] = useState(false)
const [data, setData] = useState({ finalHtml: [], names: [] })
const formRef = useRef(null)
const handleSubmit = async e => {
@ -65,11 +58,47 @@ const MailingList = () => {
setSubmitting(false)
}
// This lovely concoction of JavaScript basically fetches the last two newsletters from the GitHub repo,
// converts them to HTML, gets rid of those HTML tags, the sets all of that as the state of the component.
// Then, It makes a second fetch request to get the filename, so that can be used to determine the link.
// After that, it removes the file extension, so we can use that as the date.
// Finally, it sets the state of data to the final HTML and the names of the files, so we can map that later on!
useEffect(() => {
Promise.all([
fetch(
'https://api.github.com/repos/hackclub/leaders-newsletter/contents/updates'
)
.then(response => response.json())
.then(data => data.sort((a, b) => b.name.localeCompare(a.name))) // Makes sure we only get the latest two newsletters
.then(data => data.slice(0, 2))
.then(data => Promise.all(data.map(item => fetch(item.download_url)))) // Makes a separate fetch request for the content of each newsletter
.then(responses =>
Promise.all(responses.map(response => response.text()))
)
.then(markdown =>
Promise.all(markdown.map(markdown => markdownToHtml(markdown)))
)
.then(html =>
html.map(html =>
html.replace(/<[^>]*>/g, '').replace(/The Hackening/g, '')
)
), // Chucks out all html tags + 'The Hackening'
fetch(
'https://api.github.com/repos/hackclub/leaders-newsletter/contents/updates'
)
.then(response => response.json())
.then(data => data.sort((a, b) => b.name.localeCompare(a.name)))
.then(data => data.map(item => item.name.split('.')[0])) // Grabs the name and gets rid of the file extension
]).then(([finalHtml, names]) => setData({ finalHtml, names }))
}, [])
return (
<Box sx={{ position: 'relative', py: 6, background: 'darker' }}>
<Card
sx={{
maxWidth: 'narrowPlus',
maxWidth: '1050px',
mx: 'auto',
// mt: [3, 4],
background: 'rgb(255,255,255, 0.45)',
@ -79,83 +108,137 @@ const MailingList = () => {
}}
>
<Flex
sx={{
justifyContent: 'space-between',
alignItems: ['left', 'left', 'center'],
flexDirection: ['column', 'column', 'column'],
gap: '10px',
textAlign: 'center'
}}
sx={{ flexDirection: ['column', 'column', 'row'], gridGap: [0, 5] }}
>
<Box>
<Text
variant="title"
sx={{ fontSize: [4, '36px', '42px', 6], zIndex: 2 }}
>
Stay in Touch
</Text>
<Text sx={{ color: 'darkless', mt: 2, fontSize: 3 }} as="p">
We’ll send you an email no more than once a month, when we work on
something cool for you.
</Text>
</Box>
<Grid
as="form"
ref={formRef}
onSubmit={handleSubmit}
gap={[2, 3]}
<Flex
sx={{
textAlign: 'center',
alignItems: 'end',
input: { bg: 'sunken' },
placeItems: 'center',
justifyContent: 'center',
alignItems: ['left', 'left', 'center'],
flexDirection: 'column',
gap: '10px',
width: ['100%', '100%', '75%']
}}
>
<Box>
<Text
variant="title"
sx={{
fontSize: [4, '36px', '42px', 6],
zIndex: 2,
textAlign: 'left'
}}
>
Join the newsletter
</Text>
<Text
sx={{
color: 'darkless',
mt: 2,
fontSize: 3,
textAlign: 'left'
}}
as="p"
>
We&apos;ll send you an email no more than once a month, when we
work on something cool for you. Check out our{' '}
<Link
href="https://workshops.hackclub.com/leader-newsletters/"
target="_blank"
rel="noopener norefferer"
>
previous issues
</Link>
.
</Text>
</Box>
<Grid
as="form"
ref={formRef}
onSubmit={handleSubmit}
gap={[2, 3]}
sx={{
textAlign: 'center',
alignItems: 'end',
input: { bg: 'sunken' },
width: '100%'
}}
>
<Box sx={{ width: '100%' }}>
<Input
autofillBackgroundColor="highlight"
type="text"
name="name"
id="name"
placeholder="Your Name"
required
sx={{
width: '100%',
textAlign: 'center',
fontSize: 2
}}
/>
</Box>
<div>
<Input
autofillBackgroundColor="highlight"
type="email"
name="email"
id="email"
placeholder="Your Email"
required
sx={{
width: '100%',
textAlign: 'center',
fontSize: 2
}}
/>
</div>
<Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
{submitting ? (
<>
<Loading /> Subscribe
</>
) : submitted ? (
<>
<Icon glyph="send" /> You're on the list!
</>
) : (
'Subscribe'
)}
</Button>
</Grid>
</Flex>
<Box
sx={{
display: 'grid',
gridGap: 4,
mt: [4, 0],
width: '100%'
}}
>
<Box sx={{ width: '100%' }}>
<Input
autofillBackgroundColor="highlight"
type="text"
name="name"
id="name"
placeholder="Your Name"
required
sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
/>
</Box>
<div>
<Input
autofillBackgroundColor="highlight"
type="email"
name="email"
id="email"
placeholder="Your Email"
required
sx={{ width: '100%', textAlign: 'center', fontSize: 2 }}
/>
</div>
<Button type="submit" sx={{ mt: [2, 0], fontSize: 2 }}>
{submitting ? (
<>
<Loading />
&nbsp;Subscribe
</>
) : (
'Subscribe'
)}
</Button>
</Grid>
{data.finalHtml
.map((html, index) => (
<MailCard
issue={index + 1}
body={html}
date={format(
parse('', '', new Date(data.names[index])),
'MMMM d, yyyy'
)}
link={data.names[index]}
key={index}
/>
))
.reverse()}
</Box>
</Flex>
{submitted && (
<Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>
<Icon glyph="send" />
<Text sx={{ ml: 2 }}>You're on the list!</Text>
</Alert>
)}
</Card>
<BGImg
width={2544}
height={2048}
gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
src={FooterImgFile}
src={background}
placeholder="blur"
alt="Globe with hundreds of Hack Clubs"
/>

94
components/index/cards/onboard.js Normal file
View file

@ -0,0 +1,94 @@
import { useEffect, useState } from 'react'
import { Box, Flex, Grid, Text } from 'theme-ui'
import CardModel from './card-model'
import Buttons from './button'
/** @jsxImportSource theme-ui */
export default function Onboard({ stars }) {
const [projects, setProjects] = useState(0)
useEffect(() => {
fetch(
'https://api.github.com/search/issues?q=repo:hackclub/onboard+is:pr+is:merged+label:Submission'
)
.then(response => response.json())
.then(data => setProjects(data.total_count))
}, [])
return (
<CardModel
sx={{
backgroundColor: 'rgba(0,0,0)',
backgroundImage: `linear-gradient(120deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.4) 50%), url('https://cloud-fyrwj5rn5-hack-club-bot.vercel.app/0pcb.svg')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
}}
github_link="https://github.com/hackclub/onboard/"
color="white"
highlight="#87ffa1"
stars={stars}
>
<Text
variant="title"
as="h3"
sx={{
fontSize: ['36px', 4, 5],
maxWidth: 'copyPlus',
textShadow: '0 0 30px rgba(42, 252, 88, 0.6)',
color: '#87ffa1',
mt: ['38px', 0, 0],
position: 'relative'
}}
>
OnBoard
</Text>
<Grid columns={[1, 2]}>
<Box>
<Text
as="p"
variant="subheadline"
sx={{
px: 2,
py: 1,
width: 'fit-content',
borderRadius: 'extra',
border: 'rgba(255,255,255,0.2) dashed 1px',
zIndex: 2,
color: 'white',
position: ['absolute', 'relative', 'relative'],
top: ['24px', 0, '5px']
}}
>
{projects} projects built
</Text>
<Text as="p" variant="subtitle">
Circuit boards are magical. You design one, we'll print it.
Completely for free! Get a $100 grant to fuel the creation of your
dream project with OnBoard.
</Text>
</Box>
<Flex
sx={{ flexDirection: 'column', mt: [3, 3, 4], placeSelf: 'start' }}
>
<Buttons
id="59"
icon="emoji"
link="https://github.com/hackclub/OnBoard/blob/main/README.md"
primary="#87ffa1"
color="black"
>
Get a grant
</Buttons>
<Buttons icon="docs" link="https://jams.hackclub.com/tag/pcb" id="60">
Learn how to design a PCB
</Buttons>
<Buttons icon="friend" link="/slack?event=onboard" id="61">
See what other hackers have built
</Buttons>
</Flex>
</Grid>
</CardModel>
)
}

97
components/index/cards/pizza.js Normal file
View file

@ -0,0 +1,97 @@
import CardModel from './card-model'
import { Box, Button, Flex, Grid, Image, Text } from 'theme-ui'
import Buttons from './button'
/** @jsxImportSource theme-ui */
export default function Pizza() {
return (
<CardModel
color="white"
sx={{
backgroundSize: 'cover',
backgroundColor: '#95C9E5',
border: '1px solid #EC3750' // Corrected the color value here
}}
position={[null, 'bottom', 'bottom']}
highlight="#271932"
image="https://cloud-4f5ohtb3u-hack-club-bot.vercel.app/0subtlegrain.png"
>
<Grid
columns={[1, 2]}
sx={{ position: 'relative', alignItems: 'center', zIndex: 2 }}
>
<Box>
<Text
as="h3"
variant="title"
sx={{
fontSize: ['36px', 4, 5],
zIndex: 2,
color: '#000',
mb: '8px'
}}
>
Start A Hack Club <br /> Get{' '}
<Text
sx={{
background: [
'linear-gradient(180deg, #FF8C37 25%, #EC3750 100%)'
],
WebkitBackgroundClip: 'text',
WebkitTextStroke: 'currentColor',
WebkitTextFillColor: 'transparent'
}}
>
{' '}
$100 In Pizza
</Text>
</Text>
<Text as="p" variant="subtitle" sx={{ color: '#000', mb: 3 }}>
GitHub is providing $100 pizza grants to every teen who starts a
Hack Club at their school.
</Text>
<Buttons id="14" link="/pizza" icon="welcome" primary="primary">
Get Your Pizza Grant
</Buttons>
</Box>
<Box>
<Flex
sx={{
flexDirection: 'column',
alignItems: 'end',
justifyContent: 'flex-end',
position: 'relative'
}}
>
<Image
alt="Group of teenage hackers enjoying GitHub Hack Club Pizza Grant"
sx={{
borderRadius: '16px',
border: '1px solid #EC3750',
aspectRatio: '16/9',
objectFit: 'cover'
}}
src="https://cloud-8tc8qa1ew-hack-club-bot.vercel.app/0img_8975.jpg"
/>
<Text
sx={{
color: '#000',
backgroundColor: '#fff',
left: '16px',
bottom: '16px',
padding: '6px 8px',
borderRadius: '16px',
position: 'absolute'
}}
>
Newton South HS Hack Club in Boston
</Text>
</Flex>
</Box>
</Grid>
</CardModel>
)
}

4
components/index/cards/sprig-console.js
View file

@ -53,16 +53,16 @@ export default function SprigConsole({ stars, consoleCount }) {
sx={{
px: 2,
py: 1,
mt: 2,
width: 'fit-content',
borderRadius: 'extra',
color: 'white',
border: 'rgba(255,255,255,0.2) dashed 1px',
zIndex: 2,
position: ['absolute', 'relative', 'relative'],
top: ['24px', 0, '5px']
}}
>
{420 - consoleCount} consoles left
Join the other {consoleCount} teenagers with Sprigs!
</Text>
<Grid
columns={[1, 1, '1.2fr 1fr', '1.2fr 1fr']}

109
components/index/cards/wonderland.js Normal file
View file

@ -0,0 +1,109 @@
import CardModel from './card-model'
import { Box, Flex, Grid, Image, Text } from 'theme-ui'
import Buttons from './button'
/** @jsxImportSource theme-ui */
export default function Wonderland() {
return (
<CardModel
color="white"
sx={{
backgroundSize: 'cover',
backgroundColor: '#95C9E5',
border: '2px solid #fbbae4'
}}
position={[null, 'bottom', 'bottom']}
image="/wonderland/banner.webp"
highlight={'#fbbae4'}
filter="brightness(0.6)"
>
<Grid columns={[1, 1, 2]} sx={{ position: 'relative', zIndex: 2 }}>
<Flex
sx={{
flexDirection: 'column',
justifyContent: 'space-between'
}}
>
<Box>
<Image
src="/wonderland/wonderland.svg"
sx={{
width: ['300px', '350px', '400px'],
mt: ['-10px', '-10px', '-10px'],
position: 'relative',
zIndex: 2,
fontSize: ['36px', 4, 5],
color: 'white',
filter: 'drop-shadow(0 0 10px #fbbae4 )'
}}
alt="Wonderland"
/>
<Text
as="p"
variant="subheadline"
sx={{
ml: '10px',
mt: '-10px',
mb: '10px',
zIndex: 2,
color: 'white',
fontSize: ['24px !important'],
textShadow: '0 0 20px #fbbae4'
}}
// sx={{
// fontSize: ['30px', '30px', '30px'],
// fontWeight: 'bold'
// }}
>
Boston, MA
<br />
February 23-25th
</Text>
</Box>
<Buttons
icon="flag-fill"
href="https://wonderland.hackclub.com/"
target="_blank"
rel="noopener"
primary="#fbbae4"
id="43"
sx={{ color: '#000' }}
>
Join Us
</Buttons>
</Flex>
<Box
sx={{
textShadow: '0 0 20px #fbbae4'
}}
>
<Text
as="p"
variant="subtitle"
sx={{
fontSize: ['22px', '20px', '18px']
}}
>
Only when we limit ourselves... do we become truly free.
</Text>
<Text
as="p"
variant="subtitle"
sx={{
fontSize: ['22px', '20px', '18px']
}}
>
How would you and your friends use a 🥕 carrot or a 🧸 stuffed
animal in a hackathon project? In Wonderland, you'll explore 🧰
chests of random objects and software that you'll incorporate into
hackathon projects.
</Text>
</Box>
</Grid>
</CardModel>
)
}

8
components/index/github.js
View file

@ -8,8 +8,9 @@ export default function GitHub({
key,
text,
time,
url,
message,
opacity,
url,
...props
}) {
return (
@ -17,7 +18,7 @@ export default function GitHub({
variant="pill"
bg="snow"
as="a"
href={url}
href={url || 'https://github.com/hackclub'}
target="_blank"
rel="noopener"
sx={{
@ -33,7 +34,8 @@ export default function GitHub({
gap: 2,
height: '2rem',
width: ['fit-content', null, null, '100%'],
maxWidth: '30rem'
maxWidth: '30rem',
opacity: opacity
}}
{...props}
>

57
components/mail-card.js Normal file
View file

@ -0,0 +1,57 @@
import { Box, Card, Link, Text } from 'theme-ui'
export default function MailCard({ body, date, link }) {
body = body.length > 130 ? body.substring(0, 130) + '...' : body
return (
<Card
variant="interactive"
sx={{
cursor: 'pointer',
padding: '0 !important'
}}
>
<Link
href={`https://workshops.hackclub.com/leader-newsletters/${link}`}
sx={{ textDecoration: 'none' }}
target="_blank"
rel="noopener norefferer"
>
<Box
sx={{
height: '90%',
color: 'black',
textDecoration: 'none !important'
}}
>
<Box
sx={{
width: '100%',
height: '10px',
backgroundRepeat: 'repeat-x',
backgroundSize: '100%',
backgroundImage: `url('/letter-pattern.svg')`
}}
/>
<Box
sx={{
placeItems: 'center',
display: 'grid',
height: '100%',
paddingY: [3, 4, 0]
}}
>
<Box sx={{ px: [3, 4] }}>
<Text>
{date}
<Text sx={{ color: '#8492a6' }}>— From Hack Club, to You</Text>
</Text>
<Text as="h2" sx={{ fontWeight: 'normal' }}>
{body}
</Text>
</Box>
</Box>
</Box>
</Link>
</Card>
)
}

16
components/nav.js
View file

@ -44,7 +44,7 @@ const fixed = props =>
const Root = styled(Box)`
position: fixed;
top: 0;
width: 100%;
width: 100vw;
z-index: 1000;
${fixed};
@media print {
@ -98,7 +98,7 @@ const layout = props =>
height: 64px;
font-weight: bold;
font-size: ${theme.fontSizes[2]}px;
width: 100%;
width: 100vw;
max-width: 18rem;
&:not(:last-child) {
border-bottom: 1px solid rgba(48, 48, 48, 0.125);
@ -146,10 +146,10 @@ const Navigation = props => (
<Link>Hackathons</Link>
</NextLink>
<NextLink href="/slack" passHref>
<Link>Slack</Link>
<Link>Community</Link>
</NextLink>
<Link href="https://scrapbook.hackclub.com/">Scrapbook</Link>
<Link href="https://jams.hackclub.com/">Jams</Link>
<Link href="https://jams.hackclub.com/">Workshops</Link>
<NextLink href="/onboard" passHref>
<Link>OnBoard</Link>
</NextLink>
@ -205,13 +205,13 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
const baseColor = dark
? color || 'white'
: color === 'white' && scrolled
? 'black'
: color
? 'black'
: color
const toggleColor = dark
? color || 'snow'
: toggled || (color === 'white' && scrolled)
? 'slate'
: color
? 'slate'
: color
return (
<Root

12
components/press.mdx
View file

@ -13,16 +13,16 @@ West Hollywood, CA 90069
<Grid columns={[2, 3]} gap={3} sx={{ p: { m: 0, lineHeight: 0 }, img: { borderRadius: 'default' } }}>
![Students coding together](https://lh3.googleusercontent.com/mg1meK6t0YyF_a477Jmi191Qh2mpdKN0sOR3KO5VUjU41gXfZ3lT6274ivItTgXlIQad1c7gXipTqZaNDAUeRNUvyQoYPkQDuuD9ZtD_2OzK_W88Ka0SUwbldH1U_Ep5CROMPUyER4yY2yV3AcToS-IcrSPpdn38f5XfxDbP31iqD4R58BDfnAvLV1lkQCIunjzPcc_PLwpczBw44vYPjr6Z5A6_1pyqI9b-D30b_hqwD7vGF78nXf2PZNpbovyzSnHwRReOb9niSkzNz7dnGA3KTKJcoxS5tlpRVXba9pHvJCMcQp9st9KIBi8X9bl9xIfolKXBknOTaaddsdu-ERgIMq3_WO74Thh-J3M9qgExBPcT6YFkhroGdULBGfFn1hMPxMMC_EC3eIfaRLrO8KvitpSt8ViIUVqqQFaanGHDqzihoNMTtBh7-JldDao5-L8-9ZKfIyqhz9OyPG6ywTbQipQnto3zUFt-cK3RfCaaDBvTIMnKiKVbG6u1FmL8LLNdvWtptNECUXBeekAIMPg0Z8Px6JnWwUn8wJeRnKCJCe63cYZheSteMfyICG3aQRs7vMjnaCoXhTK425JKkmCL8SHwKbqsVY2954hxKzm8knc4SkotzQ042I6sH6kXciNhMwI5soUDO7XPf6N37vWuVn2WFM_Sh1T-JHMwn803_Jd1iujvvUiM0qPoQhQ8lnyI=w640-h400-k-ft)
![Group photo at Assemble, our Summer 2022 hackathon](https://cloud-n8nzmcqp1-hack-club-bot.vercel.app/0assemble-group-min.png)
![Wide-angle photo of hackathon](https://lh3.googleusercontent.com/d1ySE69DZY3t6B5WOMrMdpDz9-1aVVLMEMwNFOt46AfARQg4ViT9ShYG5a7ZJ5kefAM--WThs2z2hjVbssEhnbpsi-QbF_E4bDtBHI12tz7OSgR0LEyvJP2oTxXnrXez6Hx87k4JexmlpEo9uFzRGlq2bbdOovChlxVKq2J-t9_vOBvLE2P-DSvVAgMNV37quk4OGiuxj3ItQ9Ed0KRvnHswuXZnkf5qiS6ed7AvFqvInJRe1QFPR8pcXTn3DzYjNRLH6okIABaIJJ9wXx_JekcnUmJRpCXENe3Fs81xfz4gL6WSfUML4SPCp3PYLTDjLpKWth9KzsFypDgCk-CH1FPOEUuN_DlnDTN74AopwdRtNca6LgoGxuE3VnLrCDgVrnqCJCiu1cXhyQfLZtb-QBLJjnQ9IXOZExUir8f0W4mqirwu8yeJJP-LqQ_53o8GLfVK8LS1E2R0BwFPYViI4LHI52cgWBj05Trusv0q79IpvBOUQeSl3dQPjLZuxllJvScygVVDjpcP-_eVObAQUOfQY9Vq6bG7ujvXrz53m9SgfMqtbzVuZ4MQXxlAs75D94mIl6BLNoMPMuPVvhPRGxYr7UeDmcrk8yjnh9gP8ZP-4GgfCQl3KqBG5v3lD6nNTpXpWdF8E75BRvvHOEHKYUpkK1RYLyiwXy8QH9PHtn3IUYHx1Q1EYJHJ9oxgz9_e5S1u=w640-h400-k-ft)
![Student leading a workshop at Assemble](https://cloud-n8nzmcqp1-hack-club-bot.vercel.app/1assemble2-min.jpg)
![Team of students building a robot](https://lh3.googleusercontent.com/KToyIRihElX97vwiHrUEDm2ZDurUy973L6RiXGRGrQD0cQgf3nCzbyC5h3_zfM3w1JadgxGjQiL7vVVkg_aHkU-0F8TGauxDSRblziJIHOzQY2pWpQoe4RIm-HqXG41xyamtGA4X6hLarACd2L8nu2m_AaWorKYUQfabk57kF6WXGDXO8nVdJcIh59zF1lPvLWuegnBHA__CJbyT-6Kl-r7ZL_rtXGFXgzDL6wBYvQPgBc4CGlFYy8p80nZosHkbr9z14BWOonjpD4_1XDf7y9NYbXWZgchObt8PIqY4eQxcfYQLVQqmMCUT81j8IpnVJTexNHkBH83W-rKShUkU_3U5SvEkb2-fFR-mtUB0ySUO70eMB4r9QkT54bVulB-HzwD7TTjiHZzB57LUO1l1k_sk1QONj7fTV4BT2mlpFwZpmQwNHtSxo5WA6C5WJgPrsbCwB7cW9j-pj9NrbeFwW4d9dGnwhXTjPYJfXlpLbrq-KmakHkHd_i0tXIpmHK5WX3voGxF_7IG02sne1-dU6vQ0sDeh4JKC6J7JwkdQP_x4iR2Yn6vPhsi50pShTENsxMSTkbC1gTuCwWpnuyjA_qGVeLlnq_8MKyLFGDU6HdH6YkR645LDnstsIUEJYl1Te6ijiUmT_B7saD25efXzzKwu4XCW5akA2o87mHxO9vilEZsChE-Y_9hueyHyHAeB81QE=w640-h400-k-ft)
![Students wih hands raised at Flagship](https://cloud-n8nzmcqp1-hack-club-bot.vercel.app/2flagship4-min.jpg)
![Students at Flagship](https://lh3.googleusercontent.com/rUbEAs_fHylS_-vvBsRzAXspACZ_HLgCl5lpoTXdnm9NXTjk97Tazb8CJcSqe0cERzjGbhaUEw4zop2F1vQVZY1l_BWBYrl4F5pJVRWs18Rm_h94uYmkgN-afi_B24RD5cPd3eWAjS0tpi83aL3PKSO0NXN_01EGxk6TXe8OdmYqYTTY14ORAE8Dkmt55T1j6S-j6ugZq8Ez0ky5QNSaaoHEyXO4DOlRLr1S5_V_7IUiGZfkT4-VyML3P_TSxKCQrWGsrY8jLCj_MZTnRvg8sxLvz9wDiSBb_XzYpWQVet-bMWyXeoS8aVriMyjBlWsMZTuCb8jqohDVrSMnv0pF0dwn_OmFI7SbsvXP5OOqqUa1yLhEdAfEiRy6wegg1t-xrhqtcUVA97CKdj3SiPD_fHkCWl8i1lAJfOe71zV1QZuW0ez8FiUy43U5hsL_hsBgP2L-NGZYBuXOq1MUtqpaWsJdlIp6TjxzTD_8X2uUK4MxJG8Sa_Sqg3logr4b3rnpfckyQghHraGSYh31UD1ojkil9931raDJiEw0bH3F_xjVVY9drzOItHOrf_Fr7lBc4zQWjW2h7zzYj41w5TEh_1wQUpQbks12eHNYNa5COV9Iju3pa_xH_AKfQmUbu-bFxtggrcOrHp9l5Woy8ChEqaDP0N3xiWc1_pSJAOrEPjzGzSZxyslHiF2IwxAVeA-0LGbm=w640-h400-k-ft)
![Group photo at Outernet, our Summer 2023 hackathon](https://cloud-n8nzmcqp1-hack-club-bot.vercel.app/3outernet-group-min.jpg)
![Students having a conversation at Flagship](https://lh3.googleusercontent.com/6hI78Ex8V_Akb9mF5rtV8eZih_XX5B7frfRIqTyXqQ_cAylFG8VPc530WAV4_4axx__mtlcl7k95q29ahaZ8xXj1fiOjtUq7ge3fJr_9LpLpXucELZJ0jI-5Tl4b3o775WIfkgrM5wu92kKs2Bx5y29WpTAlIpCtOwTmgW5FnHayjkgAfccA0mKUZpW4hX2uZ776pRu9m16SMxqVijTbLZGnN0v5no2s2e-REUiRX9zmoQND6wzJixgvQ-uPyNgyQMMMryML8GyMC4BzK9bZpdd7mFbHbMWRURilZa00kUK1C7od0PpOCok7iysGmMdNm48IOHPM6MWPA5jo_12xdyeDQLLrNk9wQHofl42jELru9mAgn90JnTdhNCCiZC_QiMSCA_IbIQNo0TW0iCd1mNgJ3JH-z02jTtjSFI1waekplKlWMN4FYKARHueXEhpt2hQZoZn4hLszgo19JxLB_BG7zsQflz7W2tECghgwqW2EHpAPsY-hbGQor_6NCrSoX9Q4fw6ivMHLwfdhukIXV-AN-SWRImvLNNXkU5Ho5HKt2GvPYl9EOx7SmA0W-2X4tikvGaNXa6JOuM9lzffJlKzMi4dN86tvoQ4gTO-N_FHyUvmTtYOhG2yvyhYg1qUsEDt4J1yCr1GYcKx2Cn6nqYUDNSoAef6fiYfcYkOxCelevlEL17i3sbTaoUN10DkJL-Sr=w640-h400-k-ft)
![Students coding at Outernet](https://cloud-n8nzmcqp1-hack-club-bot.vercel.app/4outernet1-min.jpg)
![Students wih hands raised at Flagship](https://lh3.googleusercontent.com/9ZKSYYkSYDmDxOWp_pBUw7W_FXRFwujAW6actP7eHHTJS0JsU-EGjYc2FO-zwpSXDKzkOC4GAzVJW7ljJpoZHesppiUyKMZnJYTeQrq_dEHCSrZ-61VsWoMTJ1uv6hdUWlKflmHcclseo5qWylLzu_NYjr3wpKmXPdDkWtOJeBmBBaY64dtNbF6qkr1lY3bwkGJ3nxQOAFlwDBPaUWMbovAL7S67-lvX_p_LSwkEIGwFdJf38zdGqihDcVtUmVUkN-Z0dOAvIZ5quQ7bRTWbaiAdkBeLRSUnU8eKoDb2Ep_v-WcCFayc8cxPsCj8rnpTRgglKVBl0oQgBHqt_MEC2SRKw3FejX-lo7O-NaN_diSEO__hlYHnGum9Ee_M0UXMikIR9gBp6WfDdtVAqRHgVxCiGffL3z1gtjwx2Lchv99LqgnSRA1mOylEWUl1uZNbuDnu3K38JMN_hM-7kH1d-vQak8T8ngk4_bJGoUNzeyeUUvuGyToeyvkKS-VYuX9VQRu8YDgzbe5YR2D_k2ID9mz2RReDKUpy01GlKZgpLiU7tBBl59mlGDbemlkMpNiJ3VkhDmqjFrgZ3gh8rQLcv3I-GHmch7J8firucCjtIL8eqXSDd5IUIy7zajsadS5MqJHqT0PJQmy3mxTBzzZoDhZ92aj4B0hGy8J1klXm7SQmnkC7aulQjLm3mxca9CA1VBA7=w640-h400-k-ft)
![Students demonstrating a flame thrower at Outernet](https://cloud-ciha944cc-hack-club-bot.vercel.app/0outernet.png)
</Grid>

2
components/secret.js
View file

@ -15,7 +15,7 @@ export default function Secret({ reveal, ...props }) {
right: 5,
bottom: 0,
transform: `${reveal ? 'translateY(0)' : 'translateY(100%)'}`,
transition: '1s',
transition: '2s',
zIndex: 3
}}
{...props}

56
components/slack/join-form.js
View file

@ -1,13 +1,13 @@
import {
Box,
Card,
Label,
Input,
Textarea,
Select,
Grid,
Text,
Input,
Label,
Link,
Box
Select,
Text,
Textarea
} from 'theme-ui'
import { useRouter } from 'next/router'
import useForm from '../../lib/use-form'
@ -17,7 +17,7 @@ import { getCookie, hasCookie } from 'cookies-next'
const JoinForm = ({ sx = {} }) => {
const router = useRouter()
const { status, formProps, useField } = useForm('/api/join/', null, {
clearOnSubmit: 5000,
clearOnSubmit: 60000,
method: 'POST',
initData: hasCookie('continent')
? {
@ -139,17 +139,37 @@ const JoinForm = ({ sx = {} }) => {
)}
{!isAdult && (
<Submit
status={status}
mt={'0px!important'}
labels={{
default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
error: 'Something went wrong',
success: useWaitlist
? "We'll be in touch soon!"
: 'Email coming soon!'
}}
/>
<Box>
<Submit
status={status}
mt={'0px!important'}
labels={{
default: useWaitlist ? 'Join Waitlist' : 'Get Invite',
error: 'Something went wrong',
success: useWaitlist
? "We'll be in touch soon!"
: 'Check your email for invite!'
}}
disabled={status === 'loading' || status === 'success'}
/>
{status === 'success' && (
<Text
variant="caption"
color="secondary"
as="div"
sx={{
maxWidth: '600px',
textAlign: 'center',
mt: 3
}}
>
Search for "Slack" in your mailbox! Not there?{' '}
<Link href="mailto:slack@hackclub.com" sx={{ ml: 1 }}>
Send us an email
</Link>
</Text>
)}
</Box>
)}
</form>
</Card>

60
lib/carousel.json
View file

@ -17,33 +17,24 @@
"img": "https://cloud-eg2ex8nol-hack-club-bot.vercel.app/0favicon-on-light-removebg-preview.png",
"link": "https://cpu.land"
},
{
"background": "linear-gradient(to bottom right, #91C2F4, #FFB6E6, #F3E4C6)",
"titleColor": "#000",
"descriptionColor": "#000",
"title": "Wonderland",
"description": "How would you and your friends use a 🥕 carrot or a 🧸 stuffed animal in a hackathon project?",
"img": "/wonderland/logo.svg",
"link": "https://wonderland.hackclub.com"
},
{
"background": "#000",
"titleColor": "yellow",
"titleColor": "green",
"descriptionColor": "white",
"title": "Sprig",
"description": "Join hundreds of teenagers making tile-based JavaScript games",
"img": "https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png",
"link": "https://sprig.hackclub.com"
},
{
"background": "blue",
"titleColor": "white",
"textColor": "white",
"title": "Clubs network",
"description": "Join one of 400+ coding clubs around the world",
"img": "https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f5fa-fe0f@2x.png",
"link": "/clubs"
},
{
"background": "dark",
"titleColor": "red",
"textColor": "white",
"title": "HCB",
"description": "No. 1 fiscal sponsor for teenagers (we crossed $10 million in transactions)",
"img": "https://emoji.slack-edge.com/T0266FRGM/bank-hackclub-dark/8c6f85f387365072.png",
"link": "/hcb"
},
{
"background": "snow",
"titleColor": "dark",
@ -62,38 +53,11 @@
"img": "https://emoji.slack-edge.com/T0266FRGM/sinerider/68a0bc1208e885dd.png",
"link": "https://sinerider.com"
},
{
"background": "#2f070c",
"titleColor": "#ec3750",
"textColor": "white",
"title": "The Orpheus Show",
"description": "The podcast about Hack Club and its community",
"img": "https://emoji.slack-edge.com/T0266FRGM/tos-icon/a4b81adea576bceb.png",
"link": "https://podcast.hackclub.com"
},
{
"background": "black",
"titleColor": "yellow",
"textColor": "white",
"title": "High school hackathons",
"description": "🔍 A curated list of high school hackathons with hundreds of events",
"img": "https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f469-200d-1f4bb@2x.png",
"link": "/hackathons"
},
{
"background": "snow",
"titleColor": "dark",
"descriptionColor": "black",
"title": "Workshops",
"description": "100+ coding workshops to build a project in under an hour",
"img": "https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-large/1f4bb@2x.png",
"link": "https://workshops.hackclub.com"
},
{
"background": "dark",
"titleColor": "green",
"descriptionColor": "white",
"title": "Circuit boards",
"title": "OnBoard",
"description": "Join 1k teens designing PCBs, learning hardware, and building electronics",
"img": "https://cloud-jrox24mrn.vercel.app/orpheus_leap_micro_final.png",
"link": "/onboard"
@ -102,7 +66,7 @@
"background": "dark",
"titleColor": "blue",
"textColor": "white",
"title": "Blot (coming soon!)",
"title": "Blot",
"description": "An open source drawing machine and online editor for generative art",
"img": "https://emoji.slack-edge.com/T0266FRGM/tw_pencil2/c6afadc2280e571d.png",
"link": "https://blot.hackclub.dev"

14
lib/use-form.js
View file

@ -52,9 +52,17 @@ const useForm = (
if (r.ok) {
setStatus('success')
if (callback) callback(r)
setTimeout(() => setStatus('default'), 3500)
if (options.clearOnSubmit)
setTimeout(() => setData({}), options.clearOnSubmit)
if (options.clearOnSubmit) {
setTimeout(() => {
setData({})
setStatus('default')
}, options.clearOnSubmit)
} else {
setTimeout(() => {
setData({})
setStatus('default')
}, 3500)
}
} else {
setStatus('error')
console.error(response)

6
middleware.js
View file

@ -12,4 +12,10 @@ export function middleware(request) {
response.cookies.set('continent', continent || '')
return response
}
if (request.nextUrl.pathname === '/donate/') {
return NextResponse.redirect('https://hackclub.com/philanthropy/')
}
return NextResponse.next()
}

35
package.json
View file

@ -12,39 +12,42 @@
"format": "prettier --write ."
},
"dependencies": {
"@apollo/client": "^3.8.4",
"@apollo/client": "^3.8.8",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@github/time-elements": "^4.0.0",
"@hackclub/icons": "^0.0.14",
"@hackclub/markdown": "^0.0.43",
"@hackclub/meta": "1.1.32",
"@hackclub/theme": "^0.3.3",
"@mdx-js/loader": "^1.6.22",
"@next/mdx": "^13.5.2",
"@octokit/auth-app": "^6.0.0",
"@octokit/core": "^5.0.0",
"@octokit/rest": "^20.0.1",
"@next/mdx": "^14.0.3",
"@octokit/auth-app": "^6.0.1",
"@octokit/core": "^5.0.1",
"@octokit/rest": "^20.0.2",
"add": "^2.0.6",
"airtable-plus": "^1.0.4",
"animated-value": "^0.2.4",
"animejs": "^3.2.1",
"axios": "^1.5.0",
"animejs": "^3.2.2",
"axios": "^1.6.2",
"cookies-next": "^4.0.0",
"country-list-js": "^3.1.7",
"country-list-js": "^3.1.8",
"cursor-effects": "^1.0.12",
"date-fns": "^2.30.0",
"devtools-detect": "^4.0.1",
"form-data": "^4.0.0",
"fuzzysort": "^2.0.4",
"geopattern": "^1.2.3",
"globby": "^11.0.4",
"graphql": "^16.7.1",
"graphql": "^16.8.1",
"js-confetti": "^0.11.0",
"lodash": "^4.17.21",
"million": "^2.6.0",
"million": "^2.6.4",
"next": "^12.3.1",
"next-transpile-modules": "^10.0.1",
"react": "^17.0.2",
"react-before-after-slider-component": "^1.1.8",
"react-datepicker": "^4.24.0",
"react-dom": "^17.0.2",
"react-konami-code": "^2.3.0",
"react-marquee-slider": "^1.1.5",
@ -57,20 +60,20 @@
"react-ticker": "^1.3.2",
"react-tooltip": "^4.5.1",
"react-tsparticles": "^2.12.2",
"react-use-websocket": "^4.4.0",
"react-use-websocket": "^4.5.0",
"react-wrap-balancer": "^1.1.0",
"recharts": "2.1.12",
"styled-components": "^6.0.8",
"swr": "^2.2.2",
"styled-components": "^6.1.1",
"swr": "^2.2.4",
"theme-ui": "^0.14",
"tinytime": "^0.2.6",
"turndown": "^7.1.2",
"vanilla-tilt": "^1.8.1",
"yarn": "^1.22.19"
"yarn": "^1.22.21"
},
"devDependencies": {
"eslint": "8.50.0",
"eslint-config-next": "13.4.19",
"eslint": "8.55.0",
"eslint-config-next": "14.0.3",
"prettier": "^3.0.3"
}
}

4
pages/404.js
View file

@ -160,12 +160,12 @@ const Blinking = styled(Heading)`
&:after {
left: 2px;
text-shadow: -2px 0 ${theme.colors.red};
animation: ${animation1} 2s infinite linear alternate-reverse;
animation: ${animation1} 2s infinite steps(2, jump-end) alternate-reverse;
}
&:before {
left: -2px;
text-shadow: -2px 0 ${theme.colors.cyan};
animation: ${animation2} 4s infinite linear alternate-reverse;
animation: ${animation2} 4s infinite steps(2, jump-end) alternate-reverse;
}
`

4
pages/api/hcb/apply.js
View file

@ -13,7 +13,9 @@ export default async function handler(req, res) {
await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
body: JSON.stringify({
email: data.userEmail,
name: data.eventName
name: data.eventName,
transparent: data.transparent
// country: data.eventCountryCode,
}),
method: 'POST',
headers: {

10
pages/api/stars.js
View file

@ -10,13 +10,18 @@ export async function fetchStars() {
sinerider: '?',
sprigHardware: '?',
hackclub: '?',
hackathons: '?'
hackathons: '?',
blot: '?',
onboard: '?'
}
}
const { organization } = await graphql(
`
{
organization(login: "hackclub") {
blot: repository(name: "blot") {
stargazerCount
}
sinerider: repository(name: "sinerider") {
stargazerCount
}
@ -32,6 +37,9 @@ export async function fetchStars() {
sprigHardware: repository(name: "sprig-hardware") {
stargazerCount
}
onboard: repository(name: "onboard") {
stargazerCount
}
}
}
`,

70
pages/api/steve.js Normal file
View file

@ -0,0 +1,70 @@
const steveApiHandler = async (req, res) => {
const calendarId =
'c_e7c63a427761b0f300ede97f432ba4af24033daad26be86da0551b40b7968f00@group.calendar.google.com'
//This API key is for google calendar and has only read access to Steve
const apiKey = 'AIzaSyD_8dEnTDle3WmaoOTvEW6L1GW540FU_wg'
let allBusyDays = new Set()
try {
const currentDateTime = new Date()
const adjustedDateTime = new Date(
currentDateTime.getTime() +
(currentDateTime.getTimezoneOffset() + 240) * 60 * 1000
) // Adjust to GMT-04
const startTime = adjustedDateTime.toISOString()
const endTime = new Date(
adjustedDateTime.getTime() + 30 * 24 * 60 * 60 * 1000
).toISOString()
const response = await fetch(
`https://www.googleapis.com/calendar/v3/freeBusy?key=${apiKey}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
timeMin: startTime,
timeMax: endTime,
items: [{ id: calendarId }]
})
}
)
const data = await response.json()
if (data.error) {
return res.status(400).json({ error: data.error.message })
}
// Assuming there are time ranges where the calendar is busy:
const busyTimes = data.calendars[calendarId].busy
// For each busy time range, extract all days that are busy:
for (let busy of busyTimes) {
let startDate = new Date(busy.start)
let endDate = new Date(busy.end)
// Adjust dates to GMT-04
startDate = new Date(
startDate.getTime() + (startDate.getTimezoneOffset() + 240) * 60 * 1000
)
endDate = new Date(
endDate.getTime() + (endDate.getTimezoneOffset() + 240) * 60 * 1000
)
while (startDate < endDate) {
allBusyDays.add(startDate.toISOString().split('T')[0])
startDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000) // Adding 24 hours for the next date
}
}
return res.status(200).json([...allBusyDays])
} catch (error) {
return res.status(500).json({ error: 'Failed to fetch busy times.' })
}
}
export default steveApiHandler

1
pages/brand.js
View file

@ -150,6 +150,7 @@ const Page = ({ css }) => (
'flag-orpheus-top-bw',
'flag-orpheus-left-bw',
'flag-standalone-bw',
'flag-standalone-wtransparent',
'icon-rounded',
'icon-square',
'icon-progress-rounded',

38
pages/clubs.js
View file

@ -96,7 +96,7 @@ const Page = () => (
<>
<Meta
as={Head}
title="Clubs – Hack Club"
title="Clubs"
description="Hack Club is a global nonprofit network of high school makers & student-led coding clubs where young people build the agency, the network, & the technical talent to think big & do big things in the world."
image="https://cloud-epiki4yvg.vercel.app/2020-09-09_drbp62kayjuyyy0ek89mf9fwcp5t4kuz.jpeg"
/>
@ -125,13 +125,6 @@ const Page = () => (
alt="Hack Clubbers assemble at Figma HQ for the first IRL hackathon in SF since 2020: Assemble. 📸 Photo by Kunal Botla, Hack Clubber in MA!"
priority
/>
{/* <Announcement
copy="Epoch: celebrate the New Year with Hack Club."
caption="Join 150+ hackers in Delhi for a magical high-school hackathon!"
href="https://epoch.hackclub.com"
iconLeft="explore"
color="primary"
/> */}
<SlideDown duration={768}>
<Heading
@ -346,16 +339,11 @@ const Page = () => (
<NextLink href="/hackathons" passHref>
<a>hackathons</a>
</NextLink>{' '}
like <a href="https://windyhacks.com">Windy&nbsp;City&nbsp;Hacks</a>{' '}
&{' '}
<a href="https://www.sfchronicle.com/bayarea/article/Hack-the-Fog-makes-history-as-San-12729895.php">
Hack the Fog
</a>
, run summer programs like{' '}
<a href="https://web.archive.org/web/20200808171549/http://thecspn.com/?p=43434">
Hack Camp
</a>
, and compete in events like the{' '}
like <a href="https://lioncityhacks.com">Lion City Hacks</a> &{' '}
<a href="https://www.youtube.com/watch?v=Hs-hMMeHXaY">HackOC</a>,
take part in year long programs like{' '}
<NextLink href="/onboard">OnBoard</NextLink>, and compete in events
like the{' '}
<a href="http://www.congressionalappchallenge.us">
Congressional App Challenge
</a>
@ -466,7 +454,7 @@ const Page = () => (
<>
We build tools, such as{' '}
<a href="https://sprig.hackclub.com">Sprig</a>, that your
members can use to make projects with in meetings! Built more of
members can use to make projects with in meetings! Build more of
them with us in our <Link href="/slack">Slack community</Link>.
</>
}
@ -479,8 +467,8 @@ const Page = () => (
<>
Come prepared to every meeting with over 100{' '}
<a href="https://workshops.hackclub.com">workshops</a> (3 years’
worth!) that guide your club members through making fun,
creative projects.
worth!) and 19 <a href="https://jams.hackclub.com">Jams</a> that
guide your club members through making fun, creative projects.
</>
}
></Feature>
@ -712,14 +700,6 @@ const Page = () => (
}
}}
>
<BGImg
width={2544}
height={2048}
gradient="linear-gradient(rgba(0,0,0,0.125), rgba(0,0,0,0.25))"
src={FooterImgFile}
placeholder="blur"
alt="Globe with hundreds of Hack Clubs"
/>
<style>
{`a{
color: #338eda

2
pages/content/transparency/may-2020.mdx
View file

@ -45,7 +45,7 @@ The below summary was calculated from HQ's export from [HCB](https://hackclub.co
- $5,000 - Think Together
Thank you to all the new donors to Hack Club this month. You make Hack Club possible. We rely on donations to keep Hack Club free for students. [Donate here.](https://hackclub.com/donate/)
Thank you to all the new donors to Hack Club this month. You make Hack Club possible. We rely on donations to keep Hack Club free for students. [Donate here.](https://hackclub.com/philanthropy/)
Please note that [Elon Musk also donated $500K this month](https://twitter.com/hackclub/status/1263153557945159680), but the gift didn't hit our account until June 3rd, so it will be included in the June finance update.

547
pages/donate.js
View file

@ -1,547 +0,0 @@
import React, { useEffect } from 'react'
import styled from '@emotion/styled'
import {
Box,
Button,
Container,
Flex,
Heading,
Card,
Grid,
Link as A,
Text,
Avatar
} from 'theme-ui'
import Photo from '../components/photo'
import Image from 'next/image'
import Head from 'next/head'
import Meta from '@hackclub/meta'
import ForceTheme from '../components/force-theme'
import Nav from '../components/nav'
import Footer from '../components/footer'
import SprigForm from '../components/donate/sprigForm'
import SprigMeta from '../components/donate/sprigMeta'
import Sponsors from '../components/donate/sponsors'
import donors from '../components/donate/donors.json'
import Marquee from 'react-marquee-slider'
import ExecuteBig from '../public/donate/codedaydc_hack.jpg'
import HackCamp from '../public/donate/sf.jpg'
import HackerGames from '../public/donate/0img_20210830_161125.jpg'
import LaptopDonations from '../public/donate/0screenshot_2021-10-03_at_4.20.30_pm.png'
import Kerala from '../public/donate/0img-20210918-wa0091.jpg'
import HackPenn from '../public/donate/0color_pop.jpg'
import ElonAMA from '../public/donate/elon.jpg'
import SpaceX from '../public/donate/0spacex_and_hack_club.jpg'
import Flagship from '../public/donate/flagship.png'
import MAHacks from '../public/donate/0screenshot_2021-10-03_at_4.07.51_pm.png'
import HackCamp2020 from '../public/donate/0img_6447.jpg'
import InnovationCircuit from '../public/donate/0screenshot_2021-10-03_at_3.45.54_pm.png'
import WindyCity from '../public/donate/6screenshot_2021-10-03_at_3.29.29_pm.png'
import ZephyrFun from '../public/donate/0screenshot_2021-10-03_at_3.59.34_pm.png'
import GoldenTrain from '../public/home/golden-train.png'
const Header = styled(Box)`
background: url('/pattern.svg');
`
const Sheet = styled(Card)`
position: relative;
overflow: hidden;
border-radius: 8px;
width: 100%;
color: white;
`
Sheet.defaultProps = {
sx: {
bg: 'rgba(255, 255, 255, 0.875)',
p: [3, 4],
color: 'black',
width: 1,
mb: 4
}
}
const Row = styled(Box)`
text-align: left;
@media screen and (min-width: 48em) {
display: grid;
grid-gap: 18px;
grid-template-columns: ${({ reverse }) =>
reverse ? '3fr 2fr' : '2fr 3fr'};
}
`
const Quote = styled(Sheet)`
position: relative;
&:before {
content: '“';
line-height: 1;
font-size: 48px;
padding-left: 6px;
position: absolute;
left: 0;
top: 0;
color: #fff;
opacity: 0.5;
padding: 18px;
}
`
Sheet.defaultProps = {
sx: {
maxWidth: '52rem',
fontSize: 3,
p: [4, 5],
color: 'white'
}
}
const FirstQuote = styled(Quote)`
background-image: radial-gradient(
at left top,
rgb(45, 228, 207),
rgb(41, 206, 104),
rgb(53, 181, 36)
);
`
const SecondQuote = styled(Quote)`
background-image: radial-gradient(
at left bottom,
rgb(45, 158, 228),
rgb(45, 66, 228),
rgb(115, 45, 228)
);
`
const subhline = { fontSize: [3, 4], style: { lineHeight: '1.375' } }
const contentContainer = {
maxWidth: 72,
width: 1,
p: 3,
color: 'black',
style: { position: 'relative' }
}
const content = { maxWidth: 48, mx: 0, color: 'black' }
const title = 'Donate'
const desc =
'Contribute today to empower the next generation and help start a coding club at every high school.'
const DonorGrid = styled(Box)`
display: grid;
grid-gap: 6px;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
align-items: center;
p,
a {
width: 100%;
}
@media screen and (min-width: 48em) {
grid-gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
`
const DonorCardBase = styled(Sheet)`
display: flex;
justify-content: center;
align-items: center;
@media screen and (max-width: 32em) {
border-radius: 0;
box-shadow: none;
}
`
const DonorCard = ({ name, link = false }) => (
<DonorCardBase bg="white" p="18px!important" mb={0}>
<Text color="black" sx={{ textAlign: 'center', fontSize: '16px' }}>
{name}
</Text>
</DonorCardBase>
)
const PhotoRow = ({ photos }) => (
<Box sx={{ height: '200px', overflow: 'hidden' }}>
<Box sx={{ display: ['block', 'block', 'block', 'block', 'none'] }}>
<Marquee velocity={12}>
{photos.map((photo, index) => (
<Image
placeholder="blur"
src={photo}
objectFit="cover"
className="next-image"
height="200px"
width="300px"
alt="Hack Club students"
key={'image-' + index}
/>
))}
</Marquee>
</Box>
<Box sx={{ display: ['none', 'none', 'none', 'none', 'block'] }}>
<Marquee velocity={12}>
{photos.map((photo, index) => (
<Image
placeholder="blur"
src={photo}
objectFit="cover"
className="next-image"
height="200px"
width="600px"
key={'image-' + index}
alt="Hack Club students"
/>
))}
</Marquee>
</Box>
</Box>
)
const DonorListing = ({ name, url }) => {
if (url) {
return (
<A target="_blank" href={url} color="black" underline>
<DonorCard name={name} link />
</A>
)
} else {
return <DonorCard name={name} />
}
}
export default function Donate({ sprig }) {
useEffect(() => {
if (sprig) {
window.document.getElementById('sprig-donation').scrollIntoView()
}
}, [sprig])
return (
<Box>
<Meta
as={Head}
title={title}
description={desc}
image="https://cloud-cz9a6kt0a-hack-club-bot.vercel.app/0social-photo_2.jpg"
/>
<Nav color="muted" />
<ForceTheme theme="light" />
<Header sx={{ position: 'relative' }}>
<Box
sx={{
background: 'rgba(0,0,0, 0.8)',
zIndex: 1,
position: 'relative',
color: 'white!important',
height: '600px'
}}
pt={[5, 5, '110px']}
>
<Box
sx={{
maxWidth: '64rem',
mx: 'auto',
zIndex: 1,
position: 'relative'
}}
align="center"
py={2}
px={[1, 3]}
>
<Container sx={{ maxWidth: '48rem' }}>
<Heading
sx={{
fontSize: ['42px', '54px', '72px'],
my: 2,
color: 'white'
}}
>
We rely on people like you to bring coding to the world.
</Heading>
<Box
sx={{
fontSize: ['22px', '23px', '28px'],
maxWidth: '40rem',
color: 'white'
}}
>
Contribute today to empower the next generation. Help start a
Hack Club at every high school.
</Box>
<Button
variant="ctaLg"
my={3}
sx={{ width: ['100%', 'auto'] }}
as="a"
href="https://hcb.hackclub.com/donations/start/hq"
>
Donate
<Text sx={{ display: ['none', 'inline-block'], ml: 2 }}>
to Hack Club
</Text>
</Button>
<Text
sx={{ mt: 1, display: 'block', opacity: 0.8 }}
fontSize={2}
color="white"
>
Your contribution is tax-deductible.
<br />
Hack Club is a 501(c)(3) nonprofit with the EIN 81-2908499.
</Text>
</Container>
</Box>
</Box>
<Box
sx={{
position: 'absolute',
top: 0,
zIndex: 0,
width: '100%',
display: 'block'
}}
>
<PhotoRow
photos={[
ExecuteBig,
HackCamp,
HackerGames,
LaptopDonations,
Kerala
]}
/>
<PhotoRow
photos={[HackPenn, ElonAMA, SpaceX, GoldenTrain, Flagship]}
/>
<PhotoRow
photos={[
HackCamp2020,
InnovationCircuit,
WindyCity,
MAHacks,
ZephyrFun
]}
/>
</Box>
</Header>
<Container mb={5} id="sprig-donation"></Container>
{sprig && <SprigMeta />}
<Container variant="copy">
<Box pt={[0, 3]} mb={[2, 4]}>
<Heading
sx={{
textAlign: 'center',
fontSize: 4,
textTransform: 'uppercase',
fontWeight: [400, 800],
mb: [0, 0]
}}
>
Now introducing...
</Heading>
<Heading
mt={2}
sx={{
textAlign: 'center',
textTransform: 'uppercase',
fontSize: [5, 7],
lineHeight: [0.8, 1],
mb: 0,
marginBlockEnd: 0,
marginBlockStart: 0,
my: [2, 0]
}}
>
Sprig Consoles
</Heading>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-around'
}}
>
<Heading
variant="subtitle"
pb={[3, 2, 2]}
sx={{
textAlign: 'center',
color: 'blue',
textTransform: 'uppercase',
mt: [2, 0],
fontWeight: 800
}}
>
Inspiring teenagers to both make and code.
</Heading>
<Text sx={{ textAlign: 'center', fontSize: 2 }}>
A donation to the Sprig fund will send a teenager a Hack Club
Sprig Console Kit: containing a custom PCB, buttons, a screen, a
microprocessor, and more (all open source, of course), so that
they can build and then play their own games.
</Text>
</Box>
</Box>
<Grid
columns={[null, '2fr 3fr']}
gap={[2, 3, 4]}
pt={[0, 0]}
mb={[2, 4]}
>
<Box
as="video"
style={{
width: '100%',
borderRadius: '1em',
height: '100%',
objectFit: 'cover'
}}
autoPlay
muted
loop
>
<source
src="https://cloud-5r3ak1pm6-hack-club-bot.vercel.app/0image_from_ios__online-video-cutter.com__1_.mp4"
type="video/mp4"
/>
</Box>
<Photo
src="https://cloud-kcloydjv0-hack-club-bot.vercel.app/0image_from_ios__1_.jpg"
alt="Sprig PCB"
width={3000}
height={2550}
showAlt
sx={{ height: '100%' }}
/>
</Grid>
<Sheet
sx={{
color: 'white',
bg: 'primary',
display: 'flex',
flexDirection: 'row',
flexWrap: ['wrap', 'nowrap'],
justifyContent: 'space-between',
alignItems: 'center',
padding: 4
}}
>
<SprigForm />
</Sheet>
</Container>
<Container variant="copy" mt={5}>
<FirstQuote>
<Heading my={3} sx={{ fontWeight: 'normal', fontSize: '27px' }}>
When I took CS classes in high school, I always found myself
disengaged and feeling like they were just another class. After
getting involved in Hack Club, a career in computer science changed
from a possibility to reality.
</Heading>
<Heading
fontSize={[4, 5]}
sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
as="h1"
>
Because of Hack Club, I started organizing hackathons with hundreds
of participants, interning for companies including Intuit, and most
importantly, fell in love with building things with code.
</Heading>
<Flex align="center" mt={[3, 4]}>
<Avatar
src="/hackers/selynna.jpg"
sx={{ height: '48px', width: '48px' }}
mr={3}
st
/>
<Box align="left" fontSize={3}>
<Heading>Selynna Sun</Heading>
<Text fontSize={2} color="green.1">
Sophomore & CS Major @ Cal Poly SLO
</Text>
</Box>
</Flex>
</FirstQuote>
<Container maxWidth={'48rem'} sx={{ maxWidth: '48rem' }} py={[3, 4]}>
<Heading as="h1" sx={{ fontSize: ['36px', '48px'] }}>
Contribute beyond just dollars.
</Heading>
<Box mt={2} mb={2} sx={{ fontSize: '27px' }}>
We accept donations of time, technical or hard science fiction
books, stocks/other securities, and cryptocurrency.
</Box>
<Box mb={3} sx={{ fontSize: '27px' }}>
Please get in touch at{' '}
<A sx={{ color: 'blue' }} href="mailto:hcb@hackclub.com">
hcb@hackclub.com
</A>{' '}
if you’re interested in making a contribution with cryptocurrency or
have questions.
</Box>
</Container>
<SecondQuote>
<Heading
fontSize={[4, 5]}
sx={{ fontWeight: 'bold', fontSize: ['27px', '36px'] }}
as="h1"
>
Hack Club has inspired me to grow and become the person I am today.
Being part of the community allows me to meet countless like-minded
individuals who challenge me to become a better person, and a better
hacker.
</Heading>
<Flex align="center" mt={[3, 4]}>
<Avatar
src="/hackers/rashid.jpg"
sx={{ height: '48px', width: '48px' }}
mr={3}
st
/>
<Box align="left" fontSize={3}>
<Heading>Rashid Al-Abri</Heading>
<Text fontSize={2} color="green.1">
Club Leader from Oman in Victoria, BC, Canada
</Text>
</Box>
</Flex>
</SecondQuote>{' '}
</Container>
<Flex justify="center" bg="snow" color="black">
<Container width={1} py={[4, 5]} sx={{ textAlign: ['left', 'center'] }}>
<Heading
px={3}
mt={[3, 4]}
mb={[3, 4]}
mx="auto"
as="h1"
sx={{ fontSize: [5, 6] }}
>
A few of our amazing donors.
</Heading>
<DonorGrid mt={4} mb={4}>
{Object.keys(donors).map(name => (
<DonorListing key={name} name={name} url={donors[name]} />
))}
</DonorGrid>
<Heading px={3} sx={{ fontWeight: 'normal', mt: 2 }}>
and many more…
</Heading>
</Container>
</Flex>
<Container {...contentContainer}>
<Row my={5} {...content}>
<Heading {...subhline} mb={4} sx={{ fontSize: [4, 5] }}>
These fabulous companies donate their products to us.
</Heading>
<Sponsors />
</Row>
</Container>
<Footer />
</Box>
)
}
export async function getServerSideProps(context) {
return {
props: {
sprig: Object.keys(context.query).includes('gl')
}
}
}

17
pages/events.js
View file

@ -23,6 +23,17 @@ import { compact } from 'lodash'
import theme from '@hackclub/theme'
const events = [
{
name: 'Haunted House',
description: `Where Fright Meets Byte: A Haunted House Hackathon Experience in Downtown Chicago.`,
logo: 'https://emoji.slack-edge.com/T0266FRGM/hauntedhouse/427353c4bd656767.png',
location: 'Chicago, Illinois',
season: 'Fall',
year: '2023',
// repo: 'outernet',
image: 'https://cloud-6vo1bh2dg-hack-club-bot.vercel.app/0image.png',
link: 'https://haunted.hackclub.com'
},
{
name: 'Outernet',
description: `An out-of-doors, make-it-yours programming and camping adventure in Vermont's Northeast Kingdom.`,
@ -30,10 +41,8 @@ const events = [
location: 'Cabot, Vermont',
season: 'Summer',
year: '2023',
repo: 'outernet',
image:
'https://github.com/hackclub/outernet/assets/39828164/368eac86-3c39-4842-be2c-1436a6db6f07',
link: 'https://github.com/hackclub/outernet'
video: 'https://www.youtube.com/embed/O1s5HqSqKi0',
repo: 'outernet'
},
{
name: 'Epoch',

16
pages/hackathons/grant.js
View file

@ -64,7 +64,7 @@ const HackathonGrant = () => {
<Meta
as={Head}
title="Hackathon Grant"
description="Hack Club is partnering with FIRST to provide $500 grants to in-person high school hackathons happening until June 30th, 2023."
description="Hack Club is providing $500 grants to in-person high school hackathons happening until December 31st, 2024."
image="https://cloud-7yw9f6xnv-hack-club-bot.vercel.app/0grant.png"
/>
<style>{styles}</style>
@ -145,7 +145,7 @@ const HackathonGrant = () => {
</Link>{' '}
fees) to <a sx={{ whiteSpace: 'nowrap' }}>in-person</a>{' '}
<a sx={{ whiteSpace: 'nowrap' }}>high school</a> hackathons until
December 31st, 2023.
December 31st, 2024.
</Box>
<Button variant="ctaLg" as="a" href="#apply" sx={{ mt: 2 }}>
{open ? 'Apply Now' : 'Coming Soon'}
@ -192,14 +192,14 @@ const HackathonGrant = () => {
<Grid columns={[1, 1, 2, 2]} gap={4}>
<Requirement
title="Running this year"
title="Running through next year"
checkmark="clock-fill"
background="https://icons.hackclub.com/api/icons/0x212025/glyph:clock.svg"
size="36"
>
We want to bring back high schooler-led events around the world,
so we're only offering this grant for high school hackathons that
take place this year (until December 31st).
take place throughout 2024 (until December 31st).
<br />
<br />
<Text
@ -209,7 +209,7 @@ const HackathonGrant = () => {
}}
>
This is not an annual program and has only been renewed until
the end of this year.
the end of 2024.
</Text>
</Requirement>
<Requirement
@ -373,12 +373,8 @@ const HackathonGrant = () => {
logos found on the respective brand guides for{' '}
<Link href="/brand" target="_blank">
Hack Club
</Link>{' '}
and{' '}
<Link href="https://www.firstinspires.org/brand" target="_blank">
<i>FIRST®</i>
</Link>
.
{'.'}.
</Text>
{open ? (

20
pages/hackathons/index.js
View file

@ -27,11 +27,11 @@ export default function Hackathons({ data }) {
/>
<Box as="main">
<Landing />
<Overview />
<ScrollingHackathons eventData={data} title={true} />
<KeepExploring />
<Money />
<Slack />
@ -46,22 +46,24 @@ export default function Hackathons({ data }) {
)
}
export async function getStaticProps() {
let data;
let data
try {
const res = await fetch('https://hackathons.hackclub.com/api/events/upcoming');
const res = await fetch(
'https://hackathons.hackclub.com/api/events/upcoming'
)
if (res.ok) {
data = await res.json();
data = await res.json()
} else {
data = [];
data = []
}
} catch (error) {
data = [];
data = []
}
return {
props: {
data,
data
},
revalidate: 10
};
}
}

6
pages/hcb/apply/index.js
View file

@ -67,7 +67,7 @@ export default function Apply() {
// Set the query url parameter to 1 if it's not present
if (!step || step < 1) {
router.push(
router.replace(
{
pathname: router.pathname,
query: { ...router.query, step: 1 }
@ -110,9 +110,7 @@ export default function Apply() {
<Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
<FormContainer ref={formContainer}>
{step === 1 && <HCBInfo />}
{step === 2 && (
<OrganizationInfoForm requiredFields={requiredFields} />
)}
{step === 2 && <OrganizationInfoForm requiredFields={requiredFields} />}
{step === 3 && <PersonalInfoForm requiredFields={requiredFields} />}
</FormContainer>
</Box>

14
pages/hcb/climate/index.js
View file

@ -563,7 +563,10 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
borderRadius: '10px',
position: 'relative',
display: 'flex',
flexDirection: 'column'
boxSizing: 'border-box',
flexDirection: 'column',
maxHeight: '90vh',
overflow: 'scroll'
}}
onClick={e => {
e.stopPropagation()
@ -610,7 +613,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
justifyContent: 'start'
}}
>
{modalOrganization.branding.logo &&
{modalOrganization.branding.logo && (
<img
alt={`${modalOrganization.name}'s logo`}
src={modalOrganization.branding.logo}
@ -622,7 +625,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
boxShadow: '0px 0px 45px 0px rgba(0, 0, 0, 0.72)'
}}
/>
}
)}
<Text
variant="title"
sx={{
@ -1029,7 +1032,6 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
>
EXPLORE IMPACT
</Button>
</Box>
</Box>
@ -1065,7 +1067,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
/>
</Box>
</Container>
<Container pt={4}>
<Container py={4}>
<Flex>
<Box sx={{ flexGrow: 1, pr: [0, 3], mb: 3 }}>
<Input
@ -1122,7 +1124,7 @@ export default function ClimatePage({ rawOrganizations, pageRegion }) {
</Box>
</Box>
)}
<Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ mt: 3 }}>
<Grid columns={[1, 2, 3]} gap={[3, 4]} sx={{ my: 3 }}>
{organizations
.map(org => new Organization(org))
.filter(organization => {

2
pages/hcb/index.js
View file

@ -53,7 +53,7 @@ export default function Bank({ stats }) {
<Start stats={stats} />
</Box>
</Box>
<Footer dark key="footer" />
<Footer dark key="footer" email="hcb@hackclub.com" />
</>
)
}

191
pages/index.js
View file

@ -1,11 +1,11 @@
import {
Badge,
Box,
Button,
Card,
Flex,
Grid,
Heading,
Flex,
Badge,
Link,
Text
} from 'theme-ui'
@ -19,7 +19,7 @@ import ForceTheme from '../components/force-theme'
import Footer from '../components/footer'
import Stage from '../components/stage'
import Carousel from '../components/index/carousel'
import Outernet from '../components/index/cards/outernet'
import Pizza from '../components/index/cards/pizza'
import Sprig from '../components/index/cards/sprig'
import Sinerider from '../components/index/cards/sinerider'
import SprigConsole from '../components/index/cards/sprig-console'
@ -39,6 +39,8 @@ import GitHub from '../components/index/github'
import Photo from '../components/photo'
import Comma from '../components/comma'
import Haxidraw from '../components/index/cards/haxidraw'
import Onboard from '../components/index/cards/onboard'
import Wonderland from '../components/index/cards/wonderland'
/** @jsxImportSource theme-ui */
@ -129,6 +131,24 @@ function Page({
}
}, [count, images.length])
// Spotlight effect
const spotlightRef = useRef()
useEffect(() => {
const handler = event => {
var rect = document.getElementById('spotlight').getBoundingClientRect()
var x = event.clientX - rect.left //x position within the element.
var y = event.clientY - rect.top //y position within the element.
spotlightRef.current.style.background = `radial-gradient(
circle at ${x}px ${y}px,
rgba(132, 146, 166, 0) 10px,
rgba(249, 250, 252, 0.9) 80px
)`
}
window.addEventListener('mousemove', handler)
return () => window.removeEventListener('mousemove', handler)
}, [])
return (
<>
<Meta
@ -157,15 +177,15 @@ function Page({
reveal={reveal}
onMouseEnter={() => {
setHover(true)
console.log(hover)
}}
onMouseOut={() => {
setHover(false)
setReveal(false)
}}
/>
<Konami action={easterEgg}>
{"Hey, I'm an Easter Egg! Look at me!"}
</Konami>
<Box
as="header"
sx={{
@ -237,7 +257,6 @@ function Page({
>
<Text
onClick={() => {
setHover(false)
!reveal ? setReveal(true) : setReveal(false)
}}
sx={{
@ -392,15 +411,15 @@ function Page({
count === images.length - 2
? images[0].src
: images.length - 1
? images[1].src
: images[count + 2].src
? images[1].src
: images[count + 2].src
}
alt={
count === images.length - 2
? images[0].alt
: images.length - 1
? images[1].alt
: images[count + 2].alt
? images[1].alt
: images[count + 2].alt
}
width={3000}
height={2550}
@ -595,21 +614,38 @@ function Page({
</Box>
<Carousel cards={carouselCards} />
<Box
id="spotlight"
as="section"
sx={{
background: 'snow',
backgroundImage: `url('https://icons.hackclub.com/api/icons/0xF4F7FB/glyph:rep.svg')`,
backgroundImage: `
linear-gradient(rgba(249, 250, 252, 0.7), rgba(249, 250, 252, 0.7)),
url('https://icons.hackclub.com/api/icons/0x8492a6/glyph:rep.svg')
`,
backgroundSize: '40px 40px',
backgroundRepeat: 'repeat',
backgroundPosition: '10% 10%'
position: 'relative'
}}
>
<Box
ref={spotlightRef}
sx={{
position: 'absolute',
zIndex: 2,
top: 0,
left: 0,
right: 0,
bottom: 0,
bg: 'snow',
pointerEvents: 'none'
}}
/>
<Box
sx={{
position: 'relative',
width: '90vw',
maxWidth: 'layout',
margin: 'auto'
margin: 'auto',
zIndex: 5
}}
py={[4, 4, 5]}
>
@ -640,7 +676,8 @@ function Page({
and make things together!
</Text>
</Box>
<Outernet />
<Wonderland />
<Pizza />
<Slack slackKey={slackKey} data={slackData} events={events} />
</Box>
</Box>
@ -743,6 +780,7 @@ function Page({
url={data.url}
message={data.message}
key={key}
opacity={1 / (key / 2 + 1)}
/>
)
})}
@ -756,12 +794,13 @@ function Page({
gameImage={gameImage}
gameImage1={gameImage1}
/>
<Haxidraw />
<Onboard stars={stars.onboard.stargazerCount} delay={100} />
<Haxidraw stars={stars.blot.stargazerCount} delay={100} />
<Sinerider delay={200} stars={stars.sinerider.stargazerCount} />
<Box as="section" id="sprig">
<SprigConsole
delay={300}
stars={stars.sprigHardware.stargazerCount}
stars={stars.sprig.stargazerCount}
consoleCount={consoleCount}
/>
</Box>
@ -1076,78 +1115,79 @@ function Page({
</Grid>
</Box>
</Box>
</Box>
{new URL(asPath, 'http://example.com').searchParams.get('gen') ===
'z' && (
<>
<Box
sx={{
position: 'fixed',
top: 0,
width: '100%',
zIndex: 1000
}}
>
{new URL(asPath, 'http://example.com').searchParams.get('gen') ===
'z' && (
<>
<Box
sx={{
position: 'relative',
margin: 'auto',
width: 'fit-content',
position: 'fixed',
top: 0,
width: '100%',
zIndex: 1000
}}
>
<Box
sx={{
position: 'relative',
margin: 'auto',
width: 'fit-content',
lineHeight: 0
}}
>
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/sJNK4VKeoBM?si=zvhDKhb9C5G2b4TJ&controls=1&autoplay=1&mute=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</Box>
</Box>
<Box
sx={{
position: 'fixed',
bottom: 0,
right: 0,
zIndex: 1000,
lineHeight: 0
}}
>
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/sJNK4VKeoBM?si=zvhDKhb9C5G2b4TJ&controls=1&autoplay=1&mute=1"
src="https://www.youtube-nocookie.com/embed/ChBg4aowzX8?si=X2J_T95yiaKXB2q4&controls=1&autoplay=1&mute=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</Box>
</Box>
<Box
sx={{
position: 'fixed',
bottom: 0,
right: 0,
zIndex: 1000,
lineHeight: 0
}}
>
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/ChBg4aowzX8?si=X2J_T95yiaKXB2q4&controls=1&autoplay=1&mute=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</Box>
<Box
sx={{
position: 'fixed',
bottom: 0,
left: 0,
zIndex: 1000,
lineHeight: 0
}}
>
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/JDQr1vICu54?si=U6-9AFtk7EdTabfp&autoplay=1&mute=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</Box>
</>
)}
<MailingList />
<Box
sx={{
position: 'fixed',
bottom: 0,
left: 0,
zIndex: 1000,
lineHeight: 0
}}
>
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/JDQr1vICu54?si=U6-9AFtk7EdTabfp&autoplay=1&mute=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</Box>
</>
)}
<MailingList />
</Box>
<Footer
dark
sx={{
@ -1233,6 +1273,7 @@ export async function getStaticProps() {
} catch (error) {
hackathonsData = [] // or some default value if an error occurs
}
hackathonsData.sort((a, b) => new Date(a.start) - new Date(b.start))
let events = await fetch(
'https://events.hackclub.com/api/events/upcoming/'

3
pages/night.js
View file

@ -99,7 +99,8 @@ const Page = () => (
hang out on a chill call.
</Text>
<Text as="p" variant="subtitle">
Hack nights are hosted regularly by Hack Clubbers. Come join or start an impromptu Hack session on{' '}
Hack nights are hosted regularly by Hack Clubbers. Come join or start
an impromptu Hack session on{' '}
<NextLink href="/slack" passHref>
<Link sx={{ color, opacity: 0.75 }}>#hack-night</Link>
</NextLink>

120
pages/onboard.js → pages/onboard/first.js
View file

@ -1,14 +1,14 @@
import { Box, Button, Grid, Heading, Image, Text, Flex, Link } from 'theme-ui'
import { Box, Button, Flex, Grid, Heading, Image, Link, Text } from 'theme-ui'
import Balancer from 'react-wrap-balancer'
import Head from 'next/head'
import Meta from '@hackclub/meta'
import Nav from '../components/nav'
import Footer from '../components/footer'
import FadeIn from '../components/fade-in'
import Sparkles from '../components/sparkles'
import Tilt from '../components/tilt'
import usePrefersReducedMotion from '../lib/use-prefers-reduced-motion'
import { useRef, useEffect, useState } from 'react'
import Nav from '../../components/nav'
import Footer from '../../components/footer'
import FadeIn from '../../components/fade-in'
import Sparkles from '../../components/sparkles'
import Tilt from '../../components/tilt'
import usePrefersReducedMotion from '../../lib/use-prefers-reduced-motion'
import { useEffect, useRef, useState } from 'react'
/**
* @type {import('theme-ui').ThemeUIStyleObject}
@ -161,9 +161,9 @@ const stickerButtonFontStylesheet = `https://fonts.googleapis.com/css2?family=${
)}&display=swap&text=${encodeURIComponent(stickerButtonText)}`
const wandImgTraced =
'https://cloud-8lszi55ph-hack-club-bot.vercel.app/10frame_2.png'
'https://cloud-mmhtcl463-hack-club-bot.vercel.app/1trace.png'
const wandImgRendered =
'https://cloud-8lszi55ph-hack-club-bot.vercel.app/00frame_1.png'
'https://cloud-mmhtcl463-hack-club-bot.vercel.app/0transparent_pcb.png'
const ShipPage = () => {
const prefersReducedMotion = usePrefersReducedMotion()
@ -443,7 +443,9 @@ const ShipPage = () => {
color: '#87ffa1'
}}
>
<Balancer ratio={0.3}>OnBoard</Balancer>
<Balancer ratio={0.3}>
OnBoard with <i>FIRST&reg;</i>
</Balancer>
</Heading>
<Heading
@ -456,38 +458,42 @@ const ShipPage = () => {
<Text sx={{ fontWeight: 400 }}>magical</Text>
</Sparkles>
. You design one, we'll print it!
<br />
<br />
Plus! FIRST team members get a limited edition PCB badge
designed with Dean Kamen.
</Balancer>
</Heading>
<Flex sx={{ mt: 16, gap: 10 }}>
<Flex sx={{ mt: 16, gap: 10, flexDirection: ['column', 'row'] }}>
<Button
variant="ctaLg"
as="a"
href="https://hack.af/pcb-jam"
href="https://hackclub.com/onboard/first_and_hack_club.pdf"
target="_blank"
sx={{
background: t => t.util.gx('#60cc38', '#113b11')
}}
>
Learn PCB Design Now!
Download the PDF
</Button>
<Button
variant="outlineLg"
as="a"
href="https://github.com/hackclub/OnBoard/blob/main/README.md"
href="https://jams.hackclub.com/tag/pcb"
target="_blank"
sx={{
borderColor: '#113b11',
color: '#60cc38'
}}
>
Get a Grant
Learn PCB Design!
</Button>
</Flex>
</Flex>
<Box sx={{ flex: 1, maxWidth: 230 }}>
<Box sx={{ flex: 1, maxWidth: 330, ml: [0, null, -100] }}>
<FadeIn duration={800} delay={100}>
<Image
src={wandImg}
@ -548,7 +554,7 @@ const ShipPage = () => {
sx={{
px: 4,
pt: 6,
pb: 4,
pb: 150,
bg: dimBg,
color: '#ffffff',
justifyContent: 'center'
@ -592,6 +598,57 @@ const ShipPage = () => {
</Flex>
<Flex
as="section"
sx={{
position: 'relative',
top: -100,
px: 4,
mb: -100,
bg: 'transparent',
color: '#ffffff',
justifyContent: 'center'
}}
>
<Text
as="a"
href="https://github.com/hackclub/OnBoard/pull/248/files"
target="_blank"
sx={{
display: 'flex',
bg: '#ffffff',
width: '100%',
border: `4px solid ${dimBg}`,
borderRadius: 'default',
fontSize: 22,
color: 'inherit',
textDecoration: 'inherit',
flexDirection: ['column', null, 'row', null],
alignItems: 'center',
justifyContent: 'space-between',
maxWidth: 'copyPlus'
}}
>
<Text
as="p"
sx={{ color: '#000000', flex: '1', maxWidth: 400, p: 4 }}
>
FRC team #4272 "Maverick Robotics" made this{' '}
<strong>swerve-drive encoder</strong> for their robot drive train
that's cheaper than stock sensors and saves ports on their CAN.
</Text>
<Image
src="https://cloud-of94ar9fg-hack-club-bot.vercel.app/0purple.png"
alt="A purple arrow-shaped circuit board with the words 'maverick robotics' on it."
sx={{
pr: [0, null, 4, null],
width: '100%',
maxWidth: 300
}}
/>
</Text>
</Flex>
{/* <Flex
as="section"
sx={{
overflowX: 'hidden',
@ -737,16 +794,15 @@ const ShipPage = () => {
</a>
<a
href="https://github.com/hackclub/OnBoard/tree/main/projects/Karmanyaah_Longhorn_LEDs"
href="https://jams.hackclub.com/batch/sparkletilt-pcb"
target="_blank"
>
<Flex as="article">
<Text as="p" sx={{ pr: 140 }}>
Karmanyaah's <strong>digital level</strong> in the shape of a
longhorn.
Karmanyaah's <strong>digital level</strong>, SparkleTilt.
</Text>
<Text as="p" sx={{ pr: 140, color: 'gray' }}>
See the designs&nbsp;<span className="arrow">&rarr;</span>
Learn how to make your own&nbsp;<span className="arrow">&rarr;</span>
</Text>
<Image
src="https://cloud-myjum5y6g-hack-club-bot.vercel.app/0longhorn2.png"
@ -766,13 +822,13 @@ const ShipPage = () => {
<Button
variant="lg"
as="a"
href="https://hack.af/pcb-jam"
href="https://jams.hackclub.com/tag/pcb"
target="_blank"
>
Learn PCB Design Now!
</Button>
</Flex>
</Flex>
</Flex> */}
<Flex
as="section"
@ -799,7 +855,7 @@ const ShipPage = () => {
as="h2"
sx={{ fontSize: 5, fontWeight: 500, textAlign: 'center' }}
>
How to Qualify
How to Get a Grant
</Heading>
<Flex>
@ -1041,10 +1097,10 @@ const ShipPage = () => {
<Button
variant="outline"
as="a"
href="https://github.com/hackclub/OnBoard#requirements"
href="https://hackclub.com/onboard/first_and_hack_club.pdf"
target="_blank"
>
Get a Grant
Download the PDF
</Button>
</Flex>
@ -1056,10 +1112,14 @@ const ShipPage = () => {
>
<Text as="h3">Learn to PCB</Text>
<Text as="p">
Read our Hacker Card tutorial to learn how to make a simple
circuit board from start to end.
Read our tutorials to learn how to make a simple circuit boards
from start to end.
</Text>
<Button as="a" href="https://hack.af/pcb-jam" target="_blank">
<Button
as="a"
href="https://jams.hackclub.com/tag/pcb"
target="_blank"
>
Start the Tutorial
</Button>
</Flex>

1216
pages/onboard/index.js Normal file
View file

File diff suppressed because it is too large Load diff

413
pages/philanthropy/index.js
View file

@ -82,11 +82,12 @@ const PhotoRow = ({ photos }) => (
)
const data = [
{ name: '3452 Members', Teenagers: 3452, year: '2018' },
{ name: '6932 Members', Teenagers: 6932, year: '2019' },
{ name: '13530 Members', Teenagers: 13530, year: '2020' },
{ name: '18347 Members', Teenagers: 18347, year: '2021' },
{ name: '21790 Members', Teenagers: 21790, year: '2022' }
{ name: '3452 Teenagers', Teenagers: 3452, year: '2018' },
{ name: '6932 Teenagers', Teenagers: 6932, year: '2019' },
{ name: '13530 Teenagers', Teenagers: 13530, year: '2020' },
{ name: '18347 Teenagers', Teenagers: 18347, year: '2021' },
{ name: '21790 Teenagers', Teenagers: 21790, year: '2022' },
{ name: '28720 Teenagers', Teenagers: 28720, year: '2023' }
]
const Sheet = styled(Card)`
@ -179,7 +180,7 @@ const Highlight = ({ children }) => {
}
const Line = () => {
return (
<Fade bottom>
<Fade>
<Box
sx={{
borderBottom: '1px solid #e0e6ed',
@ -283,7 +284,7 @@ const delimiterIconStyles = {
}
const Map = () => {
return (
<Fade bottom>
<Fade>
<Box
sx={{
position: 'relative',
@ -345,7 +346,7 @@ const Philanthropy = ({ posts = [] }) => {
>
Investing in the future
</Text>
<Fade bottom delay={90}>
<Fade delay={90}>
<Button
variant="ctaLg"
my={3}
@ -373,7 +374,7 @@ const Philanthropy = ({ posts = [] }) => {
<Header sx={{ position: 'relative' }}>
<Box
sx={{
background: 'rgba(0,0,0, 0.8)',
background: 'rgba(0,0,0, 0.7)',
zIndex: 1,
position: 'relative',
color: 'white!important',
@ -476,7 +477,7 @@ const Philanthropy = ({ posts = [] }) => {
}
}}
>
<Fade bottom delay={60}>
<Fade delay={60}>
<Box
sx={{
mt: 4,
@ -491,7 +492,7 @@ const Philanthropy = ({ posts = [] }) => {
</Box>
</Fade>
<Line />
<Fade bottom>
<Fade>
<Text as="h1" mb={2} mt={4}>
In the next ten years, Hack Club will discover, foster and inspire
thousands more teenagers to use technical skills to solve
@ -499,7 +500,7 @@ const Philanthropy = ({ posts = [] }) => {
</Text>
</Fade>
<br />
<Fade bottom>
<Fade>
<Text as="p">
Led by young engineers, with early backing from the 21st century’s
most iconic creators, Hack Club already reaches tens of thousands
@ -511,7 +512,7 @@ const Philanthropy = ({ posts = [] }) => {
</Text>
</Fade>
<br />
<Fade bottom>
<Fade>
<Text as="p">
Hack Club is always free for teenagers and with your support, Hack
Club can grow to hundreds of thousands of teen hackers, bringing
@ -520,7 +521,7 @@ const Philanthropy = ({ posts = [] }) => {
from, how they identify, or what their parents do.
</Text>
</Fade>
<Fade bottom>
<Fade>
<br />
<Text as="p">
Over time, Hack Clubbers will reshape societies as entrepreneurs,
@ -534,35 +535,35 @@ const Philanthropy = ({ posts = [] }) => {
</Text>
</Fade>
<Grid gap={2} columns={[1, 2, 3, 5]} mt={4}>
<Fade bottom delay={30}>
<Fade delay={30}>
<HackClubber
photo="arianna.png"
quote="Always inspiring interesting new projects"
info="Arianna, 16, Kentucky"
/>
</Fade>
<Fade bottom delay={60}>
<Fade delay={60}>
<HackClubber
photo="jason.png"
quote="I’ve met some of the best people"
info="Jason, 16, Texas"
/>
</Fade>
<Fade bottom delay={90}>
<Fade delay={90}>
<HackClubber
photo="sam.png"
quote="In Hack Club I’ve found a home"
info="Sam, 17, Singapore"
/>
</Fade>
<Fade bottom delay={120}>
<Fade delay={120}>
<HackClubber
photo="abby.png"
quote="Helped build me a strong coding foundation"
info="Abby, 15, Los Angeles"
/>
</Fade>
<Fade bottom delay={150}>
<Fade delay={150}>
<HackClubber
photo="adriano.png"
quote="Totally different from the coding classes at school"
@ -570,12 +571,12 @@ const Philanthropy = ({ posts = [] }) => {
/>
</Fade>
</Grid>
<Fade bottom>
<Fade>
<Text as="h2" mt={5}>
To discuss a gift:
</Text>
</Fade>
<Fade bottom>
<Fade>
<Grid gap={[4, 2, 2]} columns={[1, '1r 1fr', '1fr 1fr']} mt={2}>
<Box>
<Text as="h3">Reach out to</Text>
@ -623,34 +624,68 @@ const Philanthropy = ({ posts = [] }) => {
</Grid>
</Fade>
<Line />
<Fade bottom delay={100}>
<Fade delay={100}>
<Flex sx={{ justifyContent: 'space-between' }} mt={[3, 4]}>
<Box>
<Text as="h2">View Hack Club's 2020 IRS Form 990</Text>
<Text as="p">2021 Form will soon be ready and shared.</Text>
<Text as="h2">View Hack Club's IRS Form 990s</Text>
<Text as="p">2023 Form will be shared when ready.</Text>
</Box>
<Box>
<Button
as="a"
variant="outline"
href="https://cloud-q56a8ttty-hack-club-bot.vercel.app/0hack_foundation_2022_form_990.pdf"
target="_blank"
mb={4}
sx={{
fontSize: '1em !important',
width: 'fit-content',
float: 'right',
mt: 2
}}
>
2022
</Button>
<Button
as="a"
variant="outline"
href="https://cloud-f23epej2p-hack-club-bot.vercel.app/0hack_foundation_2021_990_-_public__1_.pdf"
target="_blank"
mb={4}
sx={{
fontSize: '1em !important',
width: 'fit-content',
float: 'right',
mt: 2,
mr: 2
}}
>
2021
</Button>
<Button
as="a"
variant="outline"
href="https://cloud-d2t8vvprl-hack-club-bot.vercel.app/0form990package.pdf"
target="_blank"
mb={4}
sx={{
fontSize: '1em !important',
width: 'fit-content',
float: 'right',
mt: 2,
mr: 2
}}
>
2020
</Button>
</Box>
<Button
as="a"
variant="outline"
href="https://cloud-d2t8vvprl-hack-club-bot.vercel.app/0form990package.pdf"
target="_blank"
mb={4}
sx={{
fontSize: '1em !important',
width: 'fit-content',
float: 'right',
mt: 2
}}
>
Form 990
</Button>
</Flex>
<span>
Starting in 2021, Hack Club has engaged with an external auditing
firm and has audited financials through the current fiscal year.
</span>
</Fade>
{/* <Fade bottom delay={300}>
{/* <Fade delay={300}>
<Text
as="a"
mt={2}
@ -677,13 +712,18 @@ const Philanthropy = ({ posts = [] }) => {
}}
>
<Container sx={{ textAlign: 'center' }}>
<Fade bottom>
<Fade>
<Text as="h1" sx={{ fontSize: ['28px', '28px', '36px'] }}>
Hack Club is already making a difference!
</Text>
</Fade>
<Grid my="4" gap={2} columns={[1, 1, 1, 2]}>
<Fade bottom delay={30}>
<Grid
my="4"
gap={2}
columns={[1, 1, 1, 2]}
sx={{ alignItems: 'center' }}
>
<Fade delay={30}>
<Graph />
</Fade>
<Box
@ -692,38 +732,38 @@ const Philanthropy = ({ posts = [] }) => {
margin: 'auto'
}}
>
<Fade bottom delay={90}>
<Fade delay={90}>
<Stat
num="11 million"
words="messages sent"
background="https://icons.hackclub.com/api/icons/0xFAFAFA/glyph:slack.svg"
/>
</Fade>
<Fade bottom delay={120}>
<Fade delay={120}>
<Stat
num="400"
words="Hack Clubs around the world"
num="450+"
words="coding clubs"
background="https://icons.hackclub.com/api/icons/0xFAFAFA/glyph:event-code.svg"
/>
</Fade>
<Fade bottom delay={150}>
<Fade delay={180}>
<Stat
num="500"
words="nonprofits supported"
background="https://icons.hackclub.com/api/icons/0xFAFAFA/glyph:member-add.svg"
/>
</Fade>
<Fade bottom delay={180}>
<Stat
num="100+"
words="global events"
num="180+"
words="global events supported"
background="https://icons.hackclub.com/api/icons/0xFAFAFA/glyph:profile.svg"
/>
</Fade>
<Fade bottom delay={180}>
<Fade delay={150}>
<Stat
num="4"
words="life changing summers"
num="1800+"
words="nonprofits & clubs sponsored"
background="https://icons.hackclub.com/api/icons/0xFAFAFA/glyph:member-add.svg"
/>
</Fade>
<Fade delay={180}>
<Stat
num="$14 million"
words="transacted on HCB"
background="https://icons.hackclub.com/api/icons/0xFAFAFA/glyph:photo.svg"
/>
</Fade>
@ -762,7 +802,7 @@ const Philanthropy = ({ posts = [] }) => {
}
}}
>
<Fade bottom>
<Fade>
<Text as="h1" my={4}>
As the largest network of technical teenagers, we are featured in
the news:
@ -819,12 +859,14 @@ const Philanthropy = ({ posts = [] }) => {
</Grid>
</Fade>
<Line />
<Fade bottom>
<Text as="h1">Board of Directors</Text>
<Fade>
<Text as="h1" sx={{ marginBottom: '20px' }}>
Board of Directors
</Text>
</Fade>
<Grid gap={4} columns={[1, '1fr 2fr', '1fr 2fr']} mt={2}>
<Box>
<Fade bottom>
<Fade>
<Box>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Box
@ -855,7 +897,7 @@ const Philanthropy = ({ posts = [] }) => {
</Box>
</Box>
</Fade>
<Fade bottom delay={200}>
<Fade delay={200}>
<br />
<Box>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
@ -883,7 +925,7 @@ const Philanthropy = ({ posts = [] }) => {
</Box>
</Box>
</Fade>
<Fade bottom delay={400}>
<Fade delay={400}>
<br />
<Box>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
@ -911,7 +953,7 @@ const Philanthropy = ({ posts = [] }) => {
</Box>
</Box>
</Fade>
<Fade bottom delay={600}>
<Fade delay={600}>
<br />
<Box>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
@ -939,15 +981,15 @@ const Philanthropy = ({ posts = [] }) => {
</Box>
</Box>
</Fade>
<Fade bottom delay={800}>
<Fade delay={800}>
<br />
<Text sx={{ color: 'muted', fontSize: '90%' }}>
Board advisor: John Abele (Founder, Boston Scientific)
</Text>
</Fade>
</Box>
<Fade bottom delay={900}>
<Box sx={{ color: 'muted' }}>
<Fade delay={900}>
<Box sx={{ color: 'slate' }}>
<Text as="p">
<Quote>“</Quote>Hack Club is the organization I wish I had
when I was a teenager.
@ -978,166 +1020,214 @@ const Philanthropy = ({ posts = [] }) => {
</Grid>
<Line />
<Box>
<Fade bottom>
<Text as="h1">Join our community of generous donors</Text>
<Fade>
<Text as="h1" sx={{ marginBottom: '20px' }}>
Join our community of generous donors
</Text>
</Fade>
<Grid gap={2} columns={[2, 4, 4]} mt={2}>
<Box>
<Fade bottom delay={50}>
<Text as="h3">$2 Million</Text>
</Fade>
<Fade bottom delay={80}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Tom Preston-Werner
<Fade delay={50}>
<Text as="h3" sx={{ marginBottom: '8px' }}>
Above $5M{' '}
</Text>
</Fade>
<Fade bottom delay={110}>
<Fade delay={70}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Musk Foundation
Musk Foundation (4x)
</Text>
</Fade>
</Box>
<Box>
<Fade bottom delay={140}>
<Text as="h3">$500k - $1M</Text>
</Fade>
<Fade bottom delay={170}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Joe Liemandt
<br></br>
<Fade delay={90}>
<Text as="h3" sx={{ marginBottom: '8px' }}>
{' '}
$1M - $5M{' '}
</Text>
</Fade>
<Fade bottom delay={200}>
<Fade delay={110}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Tom Preston-Werner (7x)
</Text>
</Fade>
<Fade delay={120}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Tobi Lutke
</Text>
</Fade>
<Fade delay={145}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Michael Dell
</Text>
</Fade>
<Fade delay={150}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
The Libermans
</Text>
</Fade>
<Fade bottom delay={230}>
</Box>
<Box>
<Fade delay={170}>
<Text as="h3" sx={{ marginBottom: '8px' }}>
$500k - $1M
</Text>
</Fade>
<Fade delay={190}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Lizzy Danhakl/Andrew Reed
Lizzy Danhakl/Andrew Reed (3x)
</Text>
</Fade>
<Fade delay={210}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Craig Newmark (4x)
</Text>
</Fade>
<Fade delay={230}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Endless Network (2x)
</Text>
</Fade>
<Fade delay={250}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Joe Liemandt
</Text>
</Fade>
</Box>
<Box>
<Fade bottom delay={260}>
<Text as="h3">$200k - $500k</Text>
</Fade>
<Fade bottom delay={290}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Vitalik Buterin
<Fade delay={260}>
<Text as="h3" sx={{ marginBottom: '8px' }}>
$200k - $500k
</Text>
</Fade>
<Fade bottom delay={300}>
<Fade delay={290}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Gwynne Shotwell
</Text>
</Fade>
<Fade delay={300}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Jack Dorsey
</Text>
</Fade>
<Fade bottom delay={320}>
<Fade delay={330}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Craig Newmark
Vitalik Buterin
</Text>
</Fade>
<Fade bottom delay={350}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Ron Conway
</Text>
</Fade>
<Fade bottom delay={380}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Endless Network
</Text>
</Fade>
<Fade bottom delay={410}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Argosy Foundation
</Text>
</Fade>
<Fade bottom delay={440}>
<Fade delay={345}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Ron Baron
</Text>
</Fade>
</Box>
<Box>
<Fade bottom delay={470}>
<Text as="h3">$100k- $200k</Text>
</Fade>
<Fade bottom delay={5000}>
<Fade delay={360}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Quinn Slack
Ron Conway (4x)
</Text>
</Fade>
<Fade bottom delay={530}>
<Fade delay={410}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Adam Ross
Argosy Foundation (3x)
</Text>
</Fade>
</Box>
<Box>
<Fade delay={470}>
<Text as="h3" sx={{ marginBottom: '8px' }}>
$100k- $200k
</Text>
</Fade>
<Fade delay={500}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Quinn Slack (3x)
</Text>
</Fade>
<Fade delay={530}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Adam Ross (3x)
</Text>
</Fade>
<Fade delay={560}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
Peter Levine
</Text>
</Fade>
<Fade delay={590}>
<Text as="p" sx={{ lineHeight: '1.8em' }}>
FUTO
</Text>
</Fade>
</Box>
</Grid>
<Fade delay={800}>
<br />
<Text sx={{ color: 'muted', fontSize: '90%' }}>
* The numbers in bracket indicates repeated gifts
</Text>
</Fade>
</Box>
<Fade bottom>
<Fade>
<Text as="h2" mt={4} mb={2}>
A few others who support Hack Club
</Text>
</Fade>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} mb={5}>
<Fade bottom delay={30}>
<Fade delay={30}>
<Pill
logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/0figma.png"
name="Dylan Field, Founder, Figma"
/>
</Fade>
<Fade bottom delay={60}>
<Fade delay={60}>
<Pill
logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/1vercel.png"
name="Guillermo Rauch, Founder, Vercel"
/>
</Fade>
<Fade bottom delay={90}>
<Fade delay={90}>
<Pill
logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/7laravel.png"
name="Taylor Otwell, Creator of Laravel"
/>
</Fade>
<Fade bottom delay={120}>
<Fade delay={120}>
<Pill
logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/5sequoia.png"
name="Andrew Reed, Partner, Sequoia"
/>
</Fade>
<Fade bottom delay={150}>
<Fade delay={150}>
<Pill
logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/6replit.png"
name="Amjad Masad, Co-founder, Replit"
/>
</Fade>
<Fade bottom delay={180}>
<Fade delay={180}>
<Pill
logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/2workflow.png"
name="Conrad Kramer, Co-founder, Workflow"
/>
</Fade>
<Fade bottom delay={210}>
<Fade delay={210}>
<Pill
logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/3github.png"
name="Tim Clem, Senior Engineer, GitHub"
/>
</Fade>
<Fade bottom delay={240}>
<Fade delay={240}>
<Pill
logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/4sentry.png"
name="David Cramer, Co-founder, Sentry"
/>
</Fade>
<Fade bottom delay={270}>
<Fade delay={270}>
<Pill
logo="https://cloud-kwnsazl2x-hack-club-bot.vercel.app/8vgs.png"
name="Mahmoud Abdelkader, CEO, Very Good Security"
/>
</Fade>
<Fade bottom delay={270}>
<Fade delay={270}>
<Pill name="Blake Lieberman, Partner, Rief Ventures" />
</Fade>
<Fade bottom delay={300}>
<Fade delay={300}>
<Text
as="a"
href="/philanthropy/supporters"
@ -1152,6 +1242,7 @@ const Philanthropy = ({ posts = [] }) => {
display: 'flex',
alignItems: 'center',
transition: '0.5s ease',
border: '1px solid #1f2d3d',
':hover': {
backgroundColor: '#e0e6ed'
}
@ -1161,14 +1252,14 @@ const Philanthropy = ({ posts = [] }) => {
</Text>
</Fade>
</Box>
<Fade bottom>
<Fade>
<Text as="h2" my={3}>
Only through their support are we able to empower students like
Obrey and Maggie
</Text>
</Fade>
<Grid gap={3} columns={[1, 1, 1, 2]} mt={2} mb={4}>
<Fade bottom delay={100}>
<Fade delay={100}>
<Q>
<Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
Obrey Muchena started a Hack Club in his senior year of high
@ -1200,7 +1291,7 @@ const Philanthropy = ({ posts = [] }) => {
</Flex>
</Q>
</Fade>
<Fade bottom delay={200}>
<Fade delay={200}>
<Q>
<Heading mb={3} sx={{ fontWeight: 'normal', fontSize: '18px' }}>
In 2021, Maggie joined the Hack Club community; she has since
@ -1235,7 +1326,7 @@ const Philanthropy = ({ posts = [] }) => {
</Fade>
</Grid>
<Line />
<Fade bottom>
<Fade>
<Text as="h1" sx={{ textAlign: 'center' }} mb={[4, 5]}>
Hack Club invites the 21st century’s leading thinkers, builders
and disrupters to join our small, core network of donors with a
@ -1243,7 +1334,7 @@ const Philanthropy = ({ posts = [] }) => {
</Text>
</Fade>
<Grid columns={['1fr', '1fr', '1fr', '0.8fr 1.2fr']}>
<Fade bottom>
<Fade>
<Box>
<Text as="p">
We envision thousands of diverse Hack Club leaders in towns
@ -1262,66 +1353,66 @@ const Philanthropy = ({ posts = [] }) => {
</Fade>
<Map />
</Grid>
<Fade bottom>
<Fade>
<Text as="p" mt={4}>
Your gift will:
</Text>
</Fade>
<ul>
<Fade bottom>
<Fade>
<li>
Increase support to serve thousands more teenagers, with a
strong focus on serving those who face additional barriers to
contributing their talents to the world
</li>
</Fade>
<Fade bottom delay={30}>
<Fade delay={30}>
<li>
Create hundreds more Hack Clubs in high schools and communities
across the country and world
</li>
</Fade>
<Fade bottom delay={60}>
<Fade delay={60}>
<li>
Inspire a problem-solving mindset and a hacker identity, where
teenagers are empowered to build what they want to see in the
world
</li>
</Fade>
<Fade bottom delay={90}>
<Fade delay={90}>
<li>
Make Hack Club the best place to be a teenager on the internet,
incentivizing a shift among teenagers from consumers to creators
of technology
</li>
</Fade>
<Fade bottom delay={120}>
<Fade delay={120}>
<li>
Launch special projects, in which Hack Clubbers collaborate with
SpaceX, Vercel, Cloudflare, Replit, Dogecoin and others
</li>
</Fade>
<Fade bottom delay={150}>
<Fade delay={150}>
<li>
Popularize transparent accounting, open source building, and
high-integrity leadership
</li>
</Fade>
<Fade bottom delay={180}>
<Fade delay={180}>
<li>Grow the team, mostly engineers</li>
</Fade>
<Fade bottom delay={210}>
<Fade delay={210}>
<li>
Host dozens of in-person events, including our summer adventure
</li>
</Fade>
<Fade bottom delay={240}>
<Fade delay={240}>
<li>
Extend mini-grants of hardware and internet access to hundreds
of teenagers
</li>
</Fade>
<Fade bottom delay={270}>
<Fade delay={270}>
<li>
Bring computer science and engineering skills to thousands more
teenagers
@ -1329,18 +1420,18 @@ const Philanthropy = ({ posts = [] }) => {
</Fade>
</ul>
<Box my={4}>
<Fade bottom delay={350}>
<Fade delay={350}>
<Text as="h2" sx={{ mb: 0, pb: 0, mt: 2 }}>
Thank you for your consideration!
</Text>
</Fade>
<Fade bottom delay={380}>
<Fade delay={380}>
<Text as="h2" sx={{ mt: 0 }}>
Sincerely,
</Text>
</Fade>
<Flex mb={4}>
<Fade bottom delay={410}>
<Fade delay={410}>
<Box sx={{ marginRight: 3 }}>
<Image
src="/philanthropy/christina-s.png"
@ -1351,7 +1442,7 @@ const Philanthropy = ({ posts = [] }) => {
<Text as="p">Christina Asquith, Co-founder and COO</Text>
</Box>
</Fade>
<Fade bottom delay={440}>
<Fade delay={440}>
<Box>
<Image
src="/philanthropy/zach-s.png"
@ -1364,7 +1455,7 @@ const Philanthropy = ({ posts = [] }) => {
</Fade>
</Flex>
</Box>
<Fade bottom delay={200}>
<Fade delay={200}>
<Grid
gap={4}
columns={[1, '2fr 1fr', '2fr 1fr']}
@ -1398,10 +1489,10 @@ const Philanthropy = ({ posts = [] }) => {
</Box>
</Grid>
</Fade>
<Fade bottom>
<Fade>
<Button
as="a"
href="/philanthropy/hackclub.pdf"
href="/philanthropy/hackclub_philanthropy.pdf"
download="HackClub"
mb={4}
sx={{ fontSize: '1em !important' }}
@ -1409,7 +1500,7 @@ const Philanthropy = ({ posts = [] }) => {
Download as PDF
</Button>
</Fade>
<Fade bottom>
<Fade>
<Text
as="p"
sx={{ fontSize: '90% !important', color: 'muted', pb: 2 }}

1246
pages/pizza.js
View file

File diff suppressed because it is too large Load diff

2
pages/press.js
View file

@ -61,7 +61,7 @@ const Page = () => (
</Box>
<Button
as="a"
href="https://drive.google.com/open?id=1FgPJv68QzLVvCdFFTls0Exu0JO2npIhC"
href="https://drive.google.com/drive/folders/1t57tU00j6OZbDCpWsyRYsaQGShQqK9Zh?usp=sharing"
variant="outline"
mt={4}
mb={4}

36
pages/santa.js
View file

@ -19,6 +19,11 @@ import FadeIn from '../components/fade-in'
import { keyframes } from '@emotion/react'
import { useState } from 'react'
const year = 2023
const announcementMessage =
'https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169'
const signupsOpen = true
const Hero = styled(Box)`
background-image: linear-gradient(
to right bottom,
@ -84,7 +89,7 @@ const Page = () => (
caps
>
<FadeIn delay={300} duration={600}>
It's 2022,
It's 2023,
</FadeIn>
<FadeIn delay={1200} duration={600}>
the holidays have come,
@ -104,7 +109,7 @@ const Page = () => (
animation: `${floating} cubic-bezier(.55,.03,.43,.98) 8s infinite alternate`
}}
/>
<FadeIn delay={3000}>
<FadeIn delay={3300}>
<Heading
as="h1"
sx={{ fontSize: [5, 6], color: 'white', margin: 'auto' }}
@ -125,10 +130,13 @@ const Page = () => (
just in time for the holidays!
</Lead>
{/* Signup form */}
<Signup />
{/* <Button disabled sx={{ bg: 'primary', mb: 4 }}>
Signups closed. Check back next year!
</Button> */}
{signupsOpen ? (
<Signup />
) : (
<Button disabled sx={{ bg: 'primary', mb: 4 }}>
Signups closed. Check back next year!
</Button>
)}
</FadeIn>
</Container>
</Hero>
@ -186,23 +194,23 @@ function Field({ placeholder, label, name, type, value, onChange }) {
function Signup() {
const [values, setValues] = useState({})
return (
<Base method="get" action="https://airtable.com/shrL7dmiWE6vdlyYf">
<Base
method="get"
action="https://forms.hackclub.com/2023-secret-santa-form"
>
<Heading sx={{ color: 'black', textAlign: 'left', mb: 2 }}>
Register!
</Heading>
<Text sx={{ textAlign: 'left', color: 'muted' }}>
Be sure to check out the{' '}
<Link
href="https://hackclub.slack.com/archives/C01D7AHKMPF/p1671483616032169"
sx={{ color: 'blue' }}
>
<Link href={announcementMessage} sx={{ color: 'blue' }}>
rules
</Link>{' '}
before you sign up!
</Text>
<Field
label="Your Name"
name="prefill_Name"
name="name"
placeholder="Fiona Hackworth"
value={values.name}
onChange={e => setValues({ ...values, name: e.target.value })}
@ -210,7 +218,7 @@ function Signup() {
<Field
label="Likes"
name="prefill_What do you like?"
name="likes"
placeholder="Hardware, plushies, microwaved apples?"
type="text"
value={values.likes}
@ -218,7 +226,7 @@ function Signup() {
/>
<Field
label="Dislikes"
name="prefill_What do you absolutely NOT like?"
name="dislikes"
placeholder="Socks, cheese, coal..."
type="text"
value={values.dislikes}

555
pages/steve.js Normal file
View file

@ -0,0 +1,555 @@
import {
Box,
Textarea,
Link,
Grid,
Image,
Container,
Button,
Heading,
Text,
Input,
Checkbox
} from 'theme-ui'
import Head from 'next/head'
import Meta from '@hackclub/meta'
import ForceTheme from '../components/force-theme'
import Footer from '../components/footer'
import Nav from '../components/nav'
import Tilt from '../components/tilt'
import Ticker from 'react-ticker'
import { useState, useEffect } from 'react'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
const StevePage = () => {
const [startDate, setStartDate] = useState(null)
const [endDate, setEndDate] = useState(null)
const [disabledDates, setDisabledDates] = useState([])
useEffect(() => {
// Fetch the disabled dates from the API endpoint when the component mounts
const fetchDisabledDates = async () => {
try {
const response = await fetch('/api/steve')
if (!response.ok) {
throw new Error('Network response was not ok')
}
const dateStrings = await response.json()
const dateObjects = dateStrings.map(dateStr => {
const date = new Date(
Date.UTC(
dateStr.substring(0, 4),
dateStr.substring(5, 7) - 1,
dateStr.substring(8, 10)
)
)
date.setDate(date.getDate() + 1) // Add one day to the date
return date
})
setDisabledDates(dateObjects)
} catch (error) {
console.error('Failed fetching disabled dates:', error)
}
}
fetchDisabledDates()
}, [])
const isDateDisabled = date => {
return disabledDates.some(
disabledDate => disabledDate.getTime() === date.getTime()
)
}
const isSelectingDisabledRange = (start, end) => {
let currDate = new Date(start)
currDate.setHours(0, 0, 0, 0) // Normalize the time component
let normalizedEnd = new Date(end)
normalizedEnd.setHours(0, 0, 0, 0)
while (currDate <= normalizedEnd) {
if (isDateDisabled(currDate)) {
return true
}
currDate.setDate(currDate.getDate() + 1)
}
return false
}
const handleStartDateChange = date => {
if (!endDate || !isSelectingDisabledRange(date, endDate)) {
setStartDate(date)
} else {
setStartDate(date)
setEndDate(null) // Reset end date if the new range is invalid
}
}
const handleEndDateChange = date => {
if (!isSelectingDisabledRange(startDate, date)) {
setEndDate(date)
} // Do nothing if the range is invalid
}
const images = [
'https://cloud-p08od8km8-hack-club-bot.vercel.app/0image.png',
'https://cloud-eqvtnimxq-hack-club-bot.vercel.app/0image.png',
'https://cloud-r8j7lcawc-hack-club-bot.vercel.app/0image.png',
'https://cloud-8f162hv3i-hack-club-bot.vercel.app/0image.png',
'https://cloud-b7gqg2qpq-hack-club-bot.vercel.app/0image.png',
'https://cloud-ik2jpfk0t-hack-club-bot.vercel.app/0mountains.png'
]
const [selectedImage, setSelectedImages] = useState(0)
return (
<>
<Meta
as={Head}
title="A Home For You At Hack Club HQ"
description="We now have a free place for you to stay near Hack Club HQ! It's called Steve!"
image="https://cloud-pnaovvpuv-hack-club-bot.vercel.app/0image.png"
/>
<ForceTheme theme="light" />
<Box
sx={{
background:
'linear-gradient(0deg, rgba(15, 33, 79, 0.00) 0%, rgba(15, 33, 79, 0.00) 100%), linear-gradient(180deg, #0F214F 0%, #8B412E 100%)',
imageRendering: 'pixelated'
}}
>
<Nav sx={{ backgroundColor: '#0F214F' }} />
<Heading
sx={{
marginTop: 0,
paddingTop: 96,
color: '#fff',
fontSize: 96,
textAlign: 'center',
lineHeight: 1
}}
>
Imagine a{' '}
<Text sx={{ color: '#F8E32E', fontFamily: 'billy' }}>home</Text> for
<br /> you to hack with friends
</Heading>
<Image
alt="Pixel art of Steve"
sx={{ width: '100%', marginTop: 48, imageRendering: 'pixelated' }}
src="https://cloud-85qd0afpz-hack-club-bot.vercel.app/0topheroart.png"
/>
</Box>
<Box sx={{ backgroundColor: '#8B412E' }}>
<Container sx={{ paddingBottom: 32 }}>
<Heading
sx={{
color: '#FFF',
fontFamily: 'Billy',
fontSize: 72,
fontStyle: 'normal',
fontWeight: 700,
paddingTop: 32,
paddingBottom: 32,
lineHeight: '100%', // 76px
textShadow:
'6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000'
}}
>
Welcome To <Text style={{ color: '#F8E32E' }}>Steve</Text>
</Heading>
<Grid
columns={[1, '1fr 1fr 1fr']} // Three columns in a row for smaller screens and larger screens
gap={'32px'} // Adjust the gap between items as needed
>
<Box
sx={{
backgroundColor: 'black',
color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
imageRendering: 'pixelated',
gap: '32px',
justifyContent: 'center',
background:
'url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)',
backgroundSize: 'cover',
padding: 3 // Adjust padding as needed
}}
>
<Image
alt="Free"
style={{
width: '104px',
height: '104px',
imageRendering: 'pixelated'
}}
src="https://cloud-2ccduwqc9-hack-club-bot.vercel.app/0nomoney.png"
/>
<Text
sx={{
color: '#fff',
fontFamily: 'billy',
fontSize: 24,
fontWeight: 600,
textAlign: 'center',
lineHeight: 1.25
}}
>
Stay At Steve
<br /> For Free
</Text>
</Box>
<Box
sx={{
backgroundColor: 'black',
color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex',
imageRendering: 'pixelated',
alignItems: 'center',
flexDirection: 'column',
gap: '32px',
justifyContent: 'center',
background:
'url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)',
backgroundSize: 'cover',
padding: 3 // Adjust padding as needed
}}
>
<Image
alt="5min walk"
style={{
width: '104px',
height: '104px',
imageRendering: 'pixelated'
}}
src="https://cloud-2c20hobub-hack-club-bot.vercel.app/05min_walk.png"
/>
<Text
sx={{
color: '#fff',
fontFamily: 'billy',
fontSize: 24,
fontWeight: 600,
textAlign: 'center',
lineHeight: 1.25
}}
>
Walk to HQ
<br /> in 5min
</Text>
</Box>
<Box
sx={{
backgroundColor: 'black',
color: 'white',
aspectRatio: 1, // Ensure a square aspect ratio
display: 'flex',
imageRendering: 'pixelated',
alignItems: 'center',
flexDirection: 'column',
gap: '32px',
justifyContent: 'center',
background:
'url(https://cloud-h22j3ald8-hack-club-bot.vercel.app/0pixelbox.png)',
backgroundSize: 'cover',
padding: 3 // Adjust padding as needed
}}
>
<Image
alt="friends building together"
style={{
width: '104px',
height: '104px',
imageRendering: 'pixelated'
}}
src="https://cloud-hc1t198xx-hack-club-bot.vercel.app/0wefriends.png"
/>
<Text
sx={{
color: '#fff',
fontFamily: 'billy',
fontSize: 24,
fontWeight: 600,
textAlign: 'center',
lineHeight: 1.25
}}
>
Collaborate on
<br /> HQ Projects IRL
</Text>
</Box>
</Grid>
<Box
style={{
marginTop: 48,
display: 'flex',
padding: 24,
backgroundColor: '#91979C'
}}
columns={'3fr 1fr'}
>
<Box style={{ padding: '16px', backgroundColor: '#000' }}>
<Image
alt="Image of Steve"
width={'100%'}
style={{
height: '100%',
aspectRatio: '16/9',
objectFit: 'cover'
}}
src={images[selectedImage]}
/>
</Box>
<Box
style={{
flexDirection: 'column',
alignItems: 'center',
width: '142px',
padding: '24px 24px 24px 0px',
backgroundColor: '#000',
justifyContent: 'space-between',
display: 'flex'
}}
>
{images.map((image, idx) => (
<Image
key={idx}
alt=""
style={{
display: idx === selectedImage ? 'flex' : 'flex',
cursor: 'pointer',
aspectRatio: '1',
objectFit: 'cover',
opacity: idx !== selectedImage ? 0.5 : 1
}}
onClick={() => setSelectedImages(idx)}
width={'96px'}
height={'96px'}
src={image}
/>
))}
</Box>
</Box>
{/* <Image src="https://cloud-qutaee770-hack-club-bot.vercel.app/0untitled__1_.gif" />
<Image src="https://cloud-qvzblkbvs-hack-club-bot.vercel.app/0ezgif-4-91825479d0.gif" />
<Image src="https://cloud-mltm380a0-hack-club-bot.vercel.app/13__1_.gif" />
<Image src="https://cloud-ecnni31d6-hack-club-bot.vercel.app/0ezgif-4-39f9efb85b.gif" />
<Image src="https://cloud-mltm380a0-hack-club-bot.vercel.app/35__1_.gif" /> */}
</Container>
<Image
alt=""
sx={{ marginBottom: 0, width: '100vw' }}
src="https://cloud-5sry4ilri-hack-club-bot.vercel.app/0dirtrow.png"
/>
<Box style={{ backgroundColor: '#000', marginTop: -8 }}>
<Container sx={{ marginTop: 0 }}>
<Heading
sx={{
color: '#F8E32E',
fontFamily: 'Billy',
fontSize: 72,
fontStyle: 'normal',
fontWeight: 700,
paddingTop: 32,
paddingBottom: 32,
lineHeight: '100%', // 76px
textShadow:
'6px 6px 0px #000, 6px -6px 0px #000, -6px 6px 0px #000, -6px -6px 0px #000'
}}
>
Book Your Stay
</Heading>
<Box
sx={{
display: 'flex',
paddingBottom: 96,
gap: '16px',
justifyContent: 'space-between'
}}
>
<Box sx={{ width: '100%' }}>
<Box>
<Text
sx={{ fontFamily: 'billy', fontSize: 24, color: '#fff' }}
>
Name
</Text>
<Input
placeholder={'Marsha Mellow'}
sx={{
backgroundColor: '#fff',
color: '#000',
fontSize: 28,
padding: 16,
lineHeight: 1,
borderRadius: 0,
marginTop: '4px',
border: '4px solid #495057'
}}
/>
</Box>
<Box sx={{ marginTop: '16px' }}>
<Text
sx={{ fontFamily: 'billy', fontSize: 24, color: '#fff' }}
>
What Do You Plan To Work On?
</Text>
<Textarea
placeholder="I wanna try building a dock for Sprig"
sx={{
backgroundColor: '#fff',
color: '#000',
fontSize: 28,
marginTop: '4px',
padding: 16,
lineHeight: 1,
borderRadius: 0,
border: '4px solid #495057'
}}
multiline={true} // Set the multiline property to true
/>
</Box>
<Box sx={{ display: 'flex' }}>
<Box
sx={{ display: 'flex', flex: 1, flexDirection: 'column' }}
>
<Text
sx={{ fontFamily: 'billy', color: '#fff', fontSize: 18 }}
>
Start Date
</Text>
<DatePicker
selected={startDate}
style={{
width: '100%', // Set the width to 100%
boxSizing: 'border-box' // Include padding and border in the total width
}}
onChange={handleStartDateChange}
selectsStart
startDate={startDate}
endDate={endDate}
excludeDates={disabledDates}
sx={{
width: '100%', // Set the width to 100%
boxSizing: 'border-box' // Include padding and border in the total width
}}
/>
</Box>
<Box
sx={{ display: 'flex', flex: 1, flexDirection: 'column' }}
>
<Text
sx={{ fontFamily: 'billy', color: '#fff', fontSize: 18 }}
>
End Date
</Text>
<DatePicker
selected={endDate}
onChange={handleEndDateChange}
selectsEnd
startDate={startDate}
endDate={endDate}
minDate={startDate}
excludeDates={disabledDates}
/>
</Box>
</Box>
</Box>
<Box sx={{ width: '100%' }}>
<Box>
<Text
sx={{ fontFamily: 'billy', color: '#fff', fontSize: 18 }}
>
Email
</Text>
<Input
placeholder={'Marsha Mellow'}
sx={{
backgroundColor: '#fff',
color: '#000'
}}
/>
</Box>
<Box>
<Text
sx={{ fontFamily: 'billy', color: '#fff', fontSize: 18 }}
>
Check All That Apply <br />
</Text>
<Box sx={{ display: 'flex', gap: '16px' }}>
<Box>
<Box sx={{ display: 'flex' }}>
<Checkbox />
<Text sx={{ color: '#fff', marginRight: '0px' }}>
Club Leader
</Text>
</Box>
<Box sx={{ display: 'flex' }}>
<Checkbox />
<Text sx={{ color: '#fff', marginRight: '0px' }}>
Hackathon Organizer
</Text>
</Box>
</Box>
<Box>
<Box sx={{ display: 'flex' }}>
<Checkbox />
<Text sx={{ color: '#fff', marginRight: '0px' }}>
Member Of The Slack
</Text>
</Box>
<Box sx={{ display: 'flex' }}>
<Checkbox />
<Text sx={{ color: '#fff', marginRight: '0px' }}>
Project Contributor
</Text>
</Box>
</Box>
</Box>
</Box>
<Box>
<Button type="submit">Submit</Button>
</Box>
<Box></Box>
</Box>
</Box>
{/*
<Box>
<Text>
<strong>Frequently Asked Questions</strong>
</Text>
<Text>What's Tracy House, Bank, and HQ?</Text>
<Text>What's the environment like at HQ?</Text>
<Text>What's are the sleeping arrangements?</Text>
<Text>How cold is it in the winter?</Text>
<Text>Where will I get food?</Text>
<Text>Who can stay at Steve?</Text>
<Text>How many people can stay at Steve?</Text>
<Text>How long can I stay at Steve?</Text>
</Box> */}
{/* <Box>
Have additional questions? Send us an email at{' '}
<Link href="mailto:steve@hackclub.com">steve@hackclub.com</Link>
</Box> */}
</Container>
</Box>
</Box>
</>
)
}
export default StevePage

340
pages/team.js
View file

@ -1,4 +1,4 @@
import { Box, Container, Text, Grid, Flex } from 'theme-ui'
import { Box, Container, Flex, Grid, Text } from 'theme-ui'
import Meta from '@hackclub/meta'
import Head from 'next/head'
import Nav from '../components/nav'
@ -25,7 +25,7 @@ export default function Team() {
backgroundImage:
'radial-gradient(ellipse farthest-corner at top left,rgb(36 181 165 / 70%),rgb(30 151 137 / 70%)), url(https://cloud-6b7atvvf8-hack-club-bot.vercel.app/0hack_club_team_-_july_2023.jpg)',
backgroundSize: 'cover',
backgroundPosition: '75%'
backgroundPosition: '25% 15%'
}}
>
<Container>
@ -93,6 +93,7 @@ export default function Team() {
name="Christina Asquith"
teamRole="Co-founder and COO"
text="With more than a decade of experience in starting and leading organizations, Christina has built global teams and raised millions of dollars. She has 20 years experience as a journalist, including reporting for The New York Times from Iraq. She has an MA in education, and taught as a public school teacher in 2000, which inspired her book “The Emergency Teacher.”"
pronouns="she/her"
/>
</Grid>
<Grid columns={[1, null, 3]} gap={2}>
@ -156,13 +157,6 @@ export default function Team() {
img="/team/leo.png"
pronouns="he/him"
/>
<Bio
name="Holly Delisle"
teamRole="Clubs Operations Lead"
text="Holly comes to Hack Club with 10 years of operations management in the banking industry, bringing people together and simplifying processes. She's lived in Maine and Vermont in intervals all her life and loves the outdoors in every season. Now, Holly meets and works with amazing, inspiring technical teenagers every day from around the world. She's got two sons, two dogs and two cats, the latter of which are all named after characters in some of her favorite books."
img="/team/holly.jpeg"
pronouns="she/her"
/>
<Bio
name="Lexi Mattick"
teamRole="Clubs Engineering"
@ -170,6 +164,20 @@ export default function Team() {
img="https://media.kognise.dev/other-avatars/bean-man.jpg"
pronouns="she/her"
/>
<Bio
name="Shawn Malluwa-Wadu"
img="https://cloud-8u876lgxi-hack-club-bot.vercel.app/0shawn.png"
teamRole="Local Cowboy"
text="Shawn Malluwa (@Shawn M.) is a Hack clubber from Maryland who joined in 2022 around the launch of Sprig and is now heavily involved in refining hardware designs for various HQ projects! He’s also the face and voice of a bunch of our social media videos, and works to share the process of making with the world. In his free time, Shawn loves to create Art across various mediums, particularly comics and animation."
pronouns="he/him"
/>
<Bio
name="Faisal Sayed"
teamRole="Engineering"
img="https://ca.slack-edge.com/T0266FRGM-U014ND5P1N2-78db6630a13d-512"
text="Faisal Sayed (@fayd) has been associated with Hack Club for 3 years and loves building open-source projects that bring joy. During the first workshop-bounty-program back in 2020, Faisal was heavily involved in creating & reviewing numerous programming workshops. At HQ, He works with Graham on HQ Engineering and infrastructure. Outside of Hack Club, Faisal likes working on his side-projects like Firefiles and tmdr."
pronouns="he/him"
/>
<Bio
name="Deven Jadhav"
teamRole="Events"
@ -198,58 +206,64 @@ export default function Team() {
text="Chris started programming games in middle school, a hobby that developed into a deep passion for educational software. In 2013 he accepted a Thiel Fellowship and moved to San Francisco, where he watched Hack Club grow from an early stage. He worked on Hack Club’s learning resources & clubs program for two years."
pronouns="he/him"
/>
<Bio
name="Dieter Schoening"
teamRole="Media Creation"
text="Dieter grew up in South Carolina where he started the adventure of content creation. Now he is helping with our social media and projects to get more teens interested in Hack Club. Fun facts: He likes virtual reality development, boba, hiking, entrepreneurship"
img="/team/deet.jpg"
pronouns="He/Him"
/>
<Bio
name="Woody Keppel"
teamRole="Event Alchemist"
text={`Woody is a film actor, musician, comedian, band leader, event producer, and convener of fun. He founded Vermont’s Festival of Fools, The Feast of Fools, The Hawaiian Vaudeville Festival, and the artist retreat & concert venue known as Mt. Foolery. For Woody, “putting on events has always been one of my great pleasures. I’ve also had the privilege of sharing my time with the elderly as well as mentoring middle & high schools students in Vermont. Being part of the Hack Club community has opened my eyes & heart to so much that is possible. It’s a great adventure we’re all on, and we’re here to light the way for each other. Shine on!”`}
img="/team/woody.jpg"
pronouns="he/him"
spanTwo
/>
</Grid>
</Box>
<Box
sx={{
bg: 'rgb(255 142 55 / 40%)',
p: 3,
borderRadius: '20px',
mt: 3
}}
>
<Text
variant="headline"
mt={2}
mb={3}
as="h3"
sx={{ textAlign: 'center', fontSize: 4 }}
>
Communications & Philanthropy
</Text>
<Grid
columns={[1, null, 2]}
gap={2}
sx={{ height: 'fit-content' }}
>
<Bio
name="Belle See"
teamRole="Engineer for Comms"
text="Belle enjoys building for her community, whether that be through developing websites or planning programs and events. She is excited to make Hack Club a better place for students around the world and looks forward to learning from the team at Hack Club!"
img="https://github.com/bellesea.png"
pronouns="she/her"
/>
<Bio
name="Abby Fischler"
teamRole="Junior Administrative Engineer"
text={`Abby is a high school junior from Los Angeles that loves technology! Since joining the Hack Club community in May 2020, she’s enjoyed learning with friends in the Slack and on board the Hacker Zephyr. She joined Hack Club to support Christina’s work in encouraging more girls to get involved. Abby has hosted events for the community and loves sharing her coding journey on the #ship channel.`}
img="https://github.com/abbyfischler.png"
pronouns="she/her"
/>
<Bio
name="Mark Allen"
teamRole="AMA Producer"
img="https://ca.slack-edge.com/T0266FRGM-U03Q20XM953-91ae3b0d0243-512"
img="/team/josias.jpg"
name="Josias Aurel"
teamRole="Engineering"
text="Josias Aurel (@Josias Aurel) has been associated with Hack Club for about 3 years, working on a variety of projects including Sinerider. He has organized events such as the TiC Summit and TiC Hackathon in his local town of Yaoundé, Cameroon. He is a curiosity-driven coder who likes to take on interesting challenges and who is interested in machine learning and systems programming. He'll be working very closely with Graham over the next year on a variety of projects. Outside of tech he likes going on hikes with friends and eating vegetables."
pronouns="he/him"
spanTwo
/>
<Bio
img="https://cloud-p623dki6o-hack-club-bot.vercel.app/0img_2668.jpg"
name="Nila Palmo Ram"
teamRole="Engineering Assistant"
text="Nila absolutely loves coding and is all about making tech awesome while experimenting on how to keep it ethical and humanistic. Over at Hack Club, she's on a mission to empower more girl Hack Clubbers by guiding them in organizing Hackathons, collaborating on special projects, and fostering connections amongst them. Alongside Christina, she's also busy drumming up funds for Hack Club, always on the lookout for new donors. When she's not in front of the screen, you'll find her out by the water, diving into all sorts of aquatic adventures."
pronouns="she/her"
/>
<Bio
img="https://cloud-diex6x51t-hack-club-bot.vercel.app/01671553183325__1_.jpeg"
name="Arpan Pandey"
teamRole="Clubs Operations & Engineering"
text="Arpan Pandey (@A) is a Hack Clubber from India who joined Hack Club about 1.5 years ago. He is a passionate programmer and loves to build things, especially for clubs. He has created and maintained Jams API, Clubs Directory and many other projects for clubs. He also onboards and supports clubs through their Hack Club Journey. He is also the person to send out mails to Hack Clubbers in India. He loves Harry Potter and is a proud Gryffindor. You'll also find him playing around with electronics and hardware, and he is also a licensed HAM (KC1TPD). He is very much interested in having deep conversations with people and loves to make new friends. Here is his favorite quote: “It does not do to dwell on dreams and forget to live.”"
pronouns="he/him"
/>
<Bio
img="https://cloud-cwim853sk-hack-club-bot.vercel.app/0screenshot_2023-12-12_at_4.15.57_pm.png"
name="Thomas Stubblefield"
teamsRole="Software Engineer & Clubs Lead"
text="Thomas is a Hack Clubber from South Carolina who led a Hack Club at his high school and is now building software to make the experience of being a part of and leading a club better. He currently leads the clubs program. He loves to build side projects, make tea, and hike. Thomas lives his life by three sayings: time will tell, in life we are always learning, and bum bum bummm (a friendly melody he hums daily)."
pronouns="he/him"
/>
<Bio
img="https://cloud-rb1s4ys4w-hack-club-bot.vercel.app/0pfp.jpg"
name="Sahiti Dasari"
teamRole="Clubs Operations & Engineering"
text="Sahiti's Hack Club journey kicked off when she stumbled upon resources to start her own high school coding club, which later led to her running a county-wide hackathon. These days, she's an active member of the Clubs Operations & Engineering team and has previously interned with Hack Club for philanthropy and communications. She strives to create technology tools and resources for clubs, such as the Hack Club Jams initiative and Club Leader onboarding. Beyond programming, Sahiti loves all things finance, business, and literature. Her mission is to make an impact by spreading opportunities.
... .... . .----. ... / .- .-.. ... --- / ..-. .-.. ..- . -. - / .. -. / -- --- .-. ... . / -.-. --- -.. . -.-.--"
pronouns="she/her"
/>
<Bio
img="https://assets.devlucas.page/images/profile.jpg"
name="Lucas Honda"
teamRole="Engineering"
text="Lucas is a 14 year old Hack Clubber from Sao Paulo, Brazil. Since joining the Hack Club, he has been fascinated by Sprig and is currently leading Sprig App Review Team, and working to make it the best it possibly can be. He loves all aspects of aviation, and scours the internet/skies looking for and investigating flying machines. He spends a good portion of his time with his dog, a happy and playful dog."
pronouns="he/him"
href="https://page.devlucas.page"
video="https://www.youtube.com/embed/vuLtlzMMW6o?si=v-Dbn2fSGvTyXlbY"
/>
</Grid>
</Box>
@ -285,135 +299,159 @@ export default function Team() {
/>
<Bio
name="Melanie Smith"
teamRole="Operations Lead"
text="Melanie grew up in northern New England where she obtained a degree in Marine Biology. She then spent several years running a pet store with 20+ employees and recently decided to change career paths. This led her to Hack Club where she is excited about helping students pursue their dreams."
teamRole="Director of Operations"
text="Melanie grew up in northern New England where she obtained a degree in Marine Biology. She then spent several years running a pet store with 20+ employees. In Feb 2021, she joined the HCB team as the Operations Lead. Now as Director of Operations, she is responsible for leading the team in vision and growth."
img="/team/mel.png"
pronouns="she/her"
/>
<Bio
name="Caleb Denio"
teamRole="Engineering"
text="Caleb is a New Hampshire-born coder with a passion for music and homemade food. He enjoys building wacky, creative projects, configuring linters, and hanging out in the Hack Club community. At HCB, he writes code that makes money go 'cha-ching!'"
text="Caleb enjoys the simple things in life: making music, drinking lattes, and programming. At HCB, he engineers features."
img="/team/caleb.jpg"
pronouns="he/him"
/>
<Bio
name="Liv Cook"
teamRole="Operations Coordinator"
text="Liv recently graduated from the University of Vermont, where she studied health policy and gained experience as a writing fellow and business assistant. Originally from New York City, she is always eager to be one in a fast-paced community of diverse thinking and grand ideas. Supporting projects and makers with incredible goals is her favorite part about being at Hack Club."
teamRole="Jr Project Manager"
text="Supporting hackathon organizers and makers worldwide is Liv’s favorite part about being at Hack Club. Being a part of the HCB team for over two years now, Liv also strives to make sure everyone has the best experience possible on the platform and that team projects are on track. She graduated from the University of Vermont with a degree in Healthcare Systems and Policy and enjoys traveling, writing, and jokes. #LivLaughLove Her current favorite song is:"
img="/team/liv.png"
pronouns="she/her"
video="https://www.youtube-nocookie.com/embed/MtN1YnoL46Q?si=FJcJN7kMptzBaGn4"
/>
<Bio
name="Gary Tou"
teamRole="Engineering"
teamRole="Engineering Manager"
text="Gary is a software engineer from Seattle and loves photography! After using HCB to launch a nonprofit organization, Gary joined Hack Club to make the product that enabled him to do great things even greater for others."
img="https://assets.garytou.com/profile/GaryTou.jpg"
pronouns="he/him"
href="https://garytou.com"
/>
<Bio
name="Daisy Reyes"
teamRole="Operations Associate"
text="Daisy has a passion for growing and maintaining positive relationships with all of the members of Hack Club and that’s her favorite part about being on the HCB team. Daisy especially loves onboarding and helping FIRST teams navigate HCB so that they can excel in their own goals. She grew up in Vermont on a dairy farm and graduated from The University of Vermont with her bachelors in Animal Science. She loves animals of all types, crocheting, board games, and traveling."
img="https://ca.slack-edge.com/T0266FRGM-U046V3EK56W-b9777e33eece-512"
pronouns="she/her"
/>
<Bio
name="Bence Beres"
teamRole="Bookkeeper"
text="Bence is responsible for keeping accurate financial books for HQ and every org on HCB (40,000+ transactions in the last year!)."
img="/team/bence.png"
pronouns="he/him"
/>
<Bio
name="Arianna Martinelli"
teamRole="Operations"
text={`Arianna is a Hack Clubber from Kentucky excited about how technology and humans can work together to solve problems. She joined Hack Club in 2020 to start a club at her all-girls high school and to learn from a community of fellow coders, and she joined HCB in 2021 to fiscally sponsor her non-profit Tandem. She loves swimming, trees, videography, film photography, reading Joan Didion, Formula 1, making memes, and crafting cards with puns.`}
img="https://cloud-oubklmp6c-hack-club-bot.vercel.app/0arianna_profile_photo.png"
pronouns="she/her"
/>
<Bio
name="Ben Dixon"
teamRole="Engineering"
text={`Coming all the way from drizzly England, Ben reconnected with his adoration for teaching people about programming through the computer graphics demoscene during lockdown; firmly believing “HLSL is basically pseudocode”. At Hack Club, Ben designs and implements snazzy new features at HCB, along with raiding their granola bars.`}
text="Coming all the way from drizzly England, Ben reconnected with his adoration for teaching people about programming through the computer graphics demoscene during lockdown; firmly believing “HLSL is basically pseudocode”. At Hack Club, Ben designs and implements snazzy new features at HCB, along with raiding their granola bars."
img="https://ca.slack-edge.com/T0266FRGM-U03DFNYGPCN-d76abb1ba329-512"
pronouns="he/him"
video="https://www.youtube-nocookie.com/embed/POv-3yIPSWc?si=25WKed0HkazCZZOz"
/>
</Grid>
</Box>
<Box
sx={{
bg: 'rgb(166 51 214 / 40%)',
p: 3,
borderRadius: '20px',
mt: 3
}}
>
<Text
variant="headline"
mt={2}
mb={3}
as="h3"
sx={{ textAlign: 'center', fontSize: 4 }}
>
Community Team
</Text>
<Grid columns={[1, null, 2]} gap={2}>
<Bio
name="Claire Wang"
teamRole="Moderation & Events"
text="Claire works on the Community Team and was a previous summer intern. She hopes to make the community both more welcoming and more technical, as well as inspire beginners to love STEM and making. She first joined Hack Club in 8th grade because of an online competition, and has been running a Hack Club ever since then. In addition to CS, she loves neuroscience, sci-fi, debate, and creating Spotify playlists."
img="/team/claire.png"
name="Hunter Goodenough"
teamRole="Operations Associate"
text="Hunter is a jack of all trades with a particular passion for creating and supporting communities. He is an ardent hobbyist and is always trying out new things. He is a newer hire at HCB (Having previously worked in both the Restaurant and Medical Technology industries) and is excited to join the community and is looking forward to participating in various Hack Club projects and events."
img="https://ca.slack-edge.com/T0266FRGM-U05RDPEKGA3-647435768a53-512"
pronouns="he/him"
/>
<Bio
name="Bence Beres"
teamRole="Bookkeeper"
text="Bence is a true bureaucrat who doesn’t leave any documents unturned. Having made a sharp U-turn after college to switch from his burgeoning career in the world of political science towards the thrilling and life altering adventures of the world of Accounting, Bence understands that knowing Excel is a greatly underappreciated life skill."
img="/team/bence.png"
pronouns="he/him"
/>
<Bio
name="Kris Hoadley"
teamRole="Bookkeeper"
text="Kris is a native Vermonter and accounting nerd with the need to make all of life balance. Numbers? Give her numbers anytime."
img="/team/kris.png"
pronouns="she/her"
/>
<Bio
name="Toby Brown"
teamRole="Moderation & Events"
img="https://ca.slack-edge.com/T0266FRGM-U02C9DQ7ZL2-a57a3718241a-512"
name="Paul Spitler"
teamRole="Partnerships Lead"
text="Before joining Hack Club Paul (a native Shelburnite) was working in the e-commerce space in NYC but has moved back to his homeland a few years ago. His role at Hack Club will be building out new partnerships and although he has no idea how to code, he’s hoping to learn over his career. Paul enjoys playing hockey, being outdoors with his wife and dog and any kind of boards sports."
img="/team/paul.png"
pronouns="he/him"
/>
<Bio
name="Mutammim"
teamRole="Moderation & Events"
img="https://ca.slack-edge.com/T0266FRGM-U021VLF7880-2bf2660768cc-512"
pronouns="he/him"
/>
<Bio
name="Faisal Sayed"
teamRole="Moderation & Events"
img="https://github.com/faisalsayed10.png"
pronouns="he/him"
/>
<Bio
name="Maggie Liu"
teamRole="Moderation & Events"
img="https://ca.slack-edge.com/T0266FRGM-U026XSMKEDC-a5beea76faa2-512"
name="Arianna Martinelli"
teamRole="Operations"
text="Arianna (a current freshman at Carnegie-Mellon University and a former Hack Club leader from Kentucky) loves onboarding all our cool organizations and making HCB more accessible. When she’s not learning about how humans and computers can work together, she’s making memes and decorating the world with Hack Club stickers."
img="https://cloud-oubklmp6c-hack-club-bot.vercel.app/0arianna_profile_photo.png"
pronouns="she/her"
/>
<Bio
name="Sahiti Dasari"
teamRole="Moderation & Events"
img="https://cloud-rb1s4ys4w-hack-club-bot.vercel.app/0pfp.jpg"
pronouns="she/her"
/>
<Bio
name="Gaurav Pandey"
teamRole="Moderation & Events"
img="https://ca.slack-edge.com/T0266FRGM-U043Q05KFAA-95e93fd7beff-512"
pronouns="he/him"
/>
<Bio
name="Arav Narula"
teamRole="Moderation & Events"
img="https://ca.slack-edge.com/T0266FRGM-U01MPHKFZ7S-7b67dc7c40fb-512"
name="Shubham Panth"
teamRole="Operations"
text="Shubham, a self-taught coder from the tranquil terrains of Sweden, has been weaving through C# and Unity3D since 2017. After utilizing HCB to catapult his own developer dreams, he pivoted to help others, ensuring that every young dreamer’s journey through HCB is as seamless and spirited as his own coding adventures."
img="https://ca.slack-edge.com/T0266FRGM-U014E8132DB-8b1a8e7a1a41-512"
pronouns="he/him"
/>
</Grid>
</Box>
</Box>
</Grid>
<Box
sx={{
bg: 'rgb(166 51 214 / 40%)',
p: 3,
borderRadius: '20px',
mt: 3
}}
>
<Text
variant="headline"
mt={2}
mb={3}
as="h3"
sx={{ textAlign: 'center', fontSize: 4 }}
>
Community Team
</Text>
<Grid columns={[1, 2, null, 4]} gap={2}>
<Bio
name="Toby Brown"
teamRole="Storytelling"
text={`From a young age, Toby had a fascination with anything electronic. As a toddler, he would show far more interest in the 20-year-old air conditioning unit in the corner of the room than in anyone trying to talk to him. This fascination eventually led him to coding; and at the age of 6, Toby built his first website. While most sane people would probably describe this website as "atrocious", 6-year-old Toby was completely hooked. Nowadays, Toby does Storytelling at Hack Club, and is a self-proclaimed pizza eating expert.`}
href="https://tobyb.dev"
img="https://ca.slack-edge.com/T0266FRGM-U02C9DQ7ZL2-a57a3718241a-512"
pronouns="he/him"
/>
<Bio
name="Mutammim"
teamRole="Moderation & Events"
img="https://ca.slack-edge.com/T0266FRGM-U021VLF7880-2bf2660768cc-512"
pronouns="he/him"
/>
<Bio
name="Faisal Sayed"
teamRole="Moderation & Events"
img="https://github.com/faisalsayed10.png"
pronouns="he/him"
/>
<Bio
name="Sahiti Dasari"
teamRole="Moderation & Events"
img="https://cloud-hmya58lt9-hack-club-bot.vercel.app/0img_3143.jpg"
pronouns="she/her"
/>
<Bio
name="Gaurav Pandey"
teamRole="Moderation & Events"
img="https://ca.slack-edge.com/T0266FRGM-U043Q05KFAA-95e93fd7beff-512"
pronouns="he/him"
/>
<Bio
name="Arav Narula"
teamRole="Moderation & Events"
img="https://ca.slack-edge.com/T0266FRGM-U01MPHKFZ7S-7b67dc7c40fb-512"
pronouns="he/him"
/>
<Bio
name="Arpan Pandey"
teamRole="Moderation & Events"
img="https://ca.slack-edge.com/T0266FRGM-U0409FSKU82-e912a98d0ead-512"
pronouns="he/him"
/>
</Grid>
</Box>
<br />
<Box sx={{ textAlign: 'center', mt: 2, mb: [3, 4] }}>
<Text
@ -443,6 +481,13 @@ export default function Team() {
</Text>
</Box>
<Grid columns={[1, null, 2, 4]} gap={2}>
<Bio
name="Holly Delisle"
teamRole="Clubs Operations Lead"
text="Holly comes to Hack Club with 10 years of operations management in the banking industry, bringing people together and simplifying processes. She's lived in Maine and Vermont in intervals all her life and loves the outdoors in every season. Now, Holly meets and works with amazing, inspiring technical teenagers every day from around the world. She's got two sons, two dogs and two cats, the latter of which are all named after characters in some of her favorite books."
img="/team/holly.jpeg"
pronouns="she/her"
/>
<Bio
name="Kunal Botla"
teamRole="Operations"
@ -472,6 +517,12 @@ export default function Team() {
pronouns="he/him"
href="https://github.com/sampoder"
/>
<Bio
name="Maggie Liu"
teamRole="Moderation & Events"
img="https://ca.slack-edge.com/T0266FRGM-U026XSMKEDC-a5beea76faa2-512"
pronouns="she/her"
/>
<Bio
img="/team/athul.jpg"
name="Athul Blesson"
@ -508,6 +559,13 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
img="https://github.com/quackduck.png"
pronouns="he/him"
/>
<Bio
name="Abby Fischler"
teamRole="Junior Administrative Engineer"
text={`Abby is a high school junior from Los Angeles that loves technology! Since joining the Hack Club community in May 2020, she’s enjoyed learning with friends in the Slack and on board the Hacker Zephyr. She joined Hack Club to support Christina’s work in encouraging more girls to get involved. Abby has hosted events for the community and loves sharing her coding journey on the #ship channel.`}
img="https://github.com/abbyfischler.png"
pronouns="she/her"
/>
<Bio
name="Jessica Card"
teamRole="Education Engineer"
@ -515,6 +573,20 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
img="/team/jessica.jpg"
pronouns="she/her"
/>
<Bio
name="Belle See"
teamRole="Engineer for Comms"
text="Belle enjoys building for her community, whether that be through developing websites or planning programs and events. She is excited to make Hack Club a better place for students around the world and looks forward to learning from the team at Hack Club!"
img="https://github.com/bellesea.png"
pronouns="she/her"
/>
<Bio
name="Claire Wang"
teamRole="Community"
text="Claire works on the Community Team and was a previous summer intern. She hopes to make the community both more welcoming and more technical, as well as inspire beginners to love STEM and making. She first joined Hack Club in 8th grade because of an online competition, and has been running a Hack Club ever since then. In addition to CS, she loves neuroscience, sci-fi, debate, and creating Spotify playlists."
img="/team/claire.png"
pronouns="she/her"
/>
<Bio
name="Rishi Kothari"
teamRole="Summer Intern"
@ -557,6 +629,12 @@ When not busy juggling different tasks he takes up, he enjoys tinkering & buildi
text="Philippine bred and settled with family in the U.S., Tina shifted her career from marketing and film production to teaching kids in the Clark County School District. At Hack Club, she helped thousands of high school students hack their way to a fabulous future."
pronouns="she/her"
/>
<Bio
name="Mark Allen"
teamRole="AMA Producer"
img="https://ca.slack-edge.com/T0266FRGM-U03Q20XM953-91ae3b0d0243-512"
pronouns="he/him"
/>
<Bio
img="/team/dina.jpg"
name="Dina Elhanan"

BIN
public/haunted/TheFrightHouse.otf Normal file
View file

Binary file not shown.

BIN
public/haunted/bg.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 147 KiB

BIN
public/haunted/haunted-bg.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

3
public/haunted/haunted-text-biege.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

22
public/haunted/haunted-text-shadow.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

3
public/haunted/haunted-text.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/hcb/laptop-dark.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 774 KiB

After

Width:  |  Height:  |  Size: 708 KiB

20
public/hcb/meet-teams-using-hcb.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/home/outernet-110.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 MiB

After

Width:  |  Height:  |  Size: 3.3 MiB

36
public/letter-pattern.svg Normal file
View file

@ -0,0 +1,36 @@
<svg width="352" height="8" viewBox="0 0 352 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3429 8L14.509 0H20.6857L16.5196 8H10.3429Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8L4.16616 0H10.3429L6.1767 8H0Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.0286 8L35.1947 0H41.3714L37.2053 8H31.0286Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.3714 8L45.5376 0H51.7143L47.5481 8H41.3714Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.7143 8L55.8805 0H62.0572L57.891 8H51.7143Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.6857 8L24.8519 0H31.0286L26.8624 8H20.6857Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M62.0571 8L66.2233 0H72.4L68.2338 8H62.0571Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.4 8L76.5662 0H82.7429L78.5767 8H72.4Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M82.7429 8L86.909 0H93.0857L88.9196 8H82.7429Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M93.0857 8L97.2519 0H103.429L99.2624 8H93.0857Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M103.429 8L107.595 0H113.771L109.605 8H103.429Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M113.771 8L117.938 0H124.114L119.948 8H113.771Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M124.114 8L128.28 0H134.457L130.291 8H124.114Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M134.457 8L138.623 0H144.8L140.634 8H134.457Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M144.8 8L148.966 0H155.143L150.977 8H144.8Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.143 8L159.309 0H165.486L161.32 8H155.143Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M165.486 8L169.652 0H175.829L171.662 8H165.486Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M175.829 8L179.995 0H186.171L182.005 8H175.829Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M186.171 8L190.338 0H196.514L192.348 8H186.171Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M196.514 8L200.68 0H206.857L202.691 8H196.514Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M206.857 8L211.023 0H217.2L213.034 8H206.857Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M217.2 8L221.366 0H227.543L223.377 8H217.2Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M227.543 8L231.709 0H237.886L233.72 8H227.543Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M237.886 8L242.052 0H248.229L244.062 8H237.886Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M248.229 8L252.395 0H258.571L254.405 8H248.229Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M258.571 8L262.738 0H268.914L264.748 8H258.571Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M268.914 8L273.08 0H279.257L275.091 8H268.914Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M279.257 8L283.423 0H289.6L285.434 8H279.257Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M289.6 8L293.766 0H299.943L295.777 8H289.6Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M299.943 8L304.109 0H310.286L306.12 8H299.943Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M310.286 8L314.452 0H320.629L316.462 8H310.286Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M320.629 8L324.795 0H330.971L326.805 8H320.629Z" fill="#338EDA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M330.971 8L335.138 0H341.314L337.148 8H330.971Z" fill="#EC3750"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M341.314 8L345.48 0H351.657L347.491 8H341.314Z" fill="#338EDA"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
public/onboard/first_and_hack_club.pdf Normal file
View file

Binary file not shown.

BIN
public/team/deet.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 773 KiB

BIN
public/team/josias.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
public/team/kris.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
public/team/liv.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 538 KiB

After

Width:  |  Height:  |  Size: 413 KiB

BIN
public/team/paul.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
public/wonderland/banner.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 58 KiB

11
public/wonderland/logo.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="396" height="396" viewBox="0 0 396 396" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="198" cy="198" r="196" fill="url(#paint0_radial_23_74)" stroke="black" stroke-width="4"/>
<path d="M194.041 183.669L191.858 184.304C178.273 188.259 170.372 198.21 168.844 210.635L166.859 210.391L168.844 210.635C168.505 213.397 169.057 216.747 170.092 220.484C170.847 223.212 171.812 225.993 172.781 228.785C173.138 229.814 173.496 230.845 173.844 231.875C175.103 235.606 176.244 239.357 176.508 242.609C176.773 245.871 176.187 249.162 173.366 251.276C163.775 258.464 155.771 264.623 149.651 272.371C143.582 280.052 139.311 289.374 137.427 302.935L135.446 302.66L137.427 302.935C137.339 303.568 137.012 304.238 136.341 304.676C135.763 305.054 135.16 305.104 134.796 305.101C134.097 305.097 133.326 304.874 132.768 304.704C132.464 304.611 132.164 304.515 131.866 304.419C130.843 304.091 129.845 303.771 128.821 303.634C127.542 303.464 126.768 303.667 126.259 304.158C125.688 304.709 124.948 306.093 124.927 309.482C124.885 316.479 125.758 322.48 128.569 327.892C129.248 329.199 129.815 330.324 130.325 331.337C130.857 332.394 131.328 333.328 131.801 334.221C132.692 335.901 133.43 337.109 134.252 338.081C135.81 339.923 137.879 341.167 142.737 342.69L142.139 344.599L142.737 342.69C154.711 346.444 165.747 345.997 178.357 345.486C180.109 345.416 181.891 345.343 183.71 345.281C199.8 344.73 215.312 342.777 230.595 338.198C233.49 337.331 236.561 334.411 239.053 330.474C241.514 326.587 243.128 322.148 243.396 318.812C244.322 307.287 240.665 297.002 236.839 286.241C235.923 283.664 234.997 281.06 234.122 278.405C232.565 273.68 230.965 268.944 229.362 264.2C226.922 256.979 224.475 249.74 222.164 242.488C221.655 240.892 221.62 239.406 222.116 238.078C222.608 236.762 223.53 235.849 224.476 235.217C225.933 234.244 227.849 233.722 229.009 233.405C229.241 233.342 229.443 233.287 229.605 233.238C233.059 232.197 235.595 230.703 237.465 228.714C239.336 226.725 240.66 224.114 241.487 220.648L241.487 220.647C241.919 218.837 242.025 217.367 241.823 216.027C241.622 214.701 241.1 213.379 240.103 211.894C238 208.764 236.062 205.532 234.154 202.352L233.955 202.02C231.973 198.717 230.017 195.471 227.892 192.354C227.152 191.269 226.114 190.317 224.845 189.242C224.672 189.095 224.494 188.946 224.313 188.793C223.225 187.881 221.998 186.851 220.962 185.679C220.304 184.936 219.593 183.911 219.093 182.861C218.842 182.335 218.615 181.743 218.493 181.134C218.374 180.546 218.318 179.776 218.594 179.003L218.595 179.001C223.115 166.373 227.823 153.809 232.525 141.261C233.704 138.117 234.882 134.974 236.056 131.831L236.627 130.304L238.237 130.555C238.475 130.592 238.721 130.631 238.965 130.669C239.173 130.702 239.379 130.734 239.578 130.765L241.482 131.062L241.256 132.976C241.152 133.858 241.033 134.689 240.919 135.491C240.675 137.197 240.451 138.77 240.425 140.417C240.419 140.8 240.407 141.168 240.396 141.525C240.37 142.308 240.347 143.039 240.391 143.766C240.458 144.886 240.671 145.273 240.738 145.343C249.902 154.946 259.351 164.296 268.881 173.583C270.487 175.148 272.651 176.394 274.942 177.479C277.851 178.857 279.424 178.921 280.381 178.52C281.337 178.12 282.395 176.954 283.453 173.916L283.453 173.916C287.269 162.955 289.633 152.068 286.654 141.064C283.972 131.162 278.19 122.776 270.785 115.416C261.033 105.724 249.944 97.8805 237.512 92.0283L237.512 92.0283C232.767 89.7941 229.678 89.5492 227.542 90.5043C225.405 91.4605 223.511 93.9377 221.986 98.9998L221.986 98.9999C215.206 121.491 210.59 144.286 209.892 167.787C209.892 167.787 209.892 167.787 209.892 167.787L207.893 167.728C207.8 170.872 206.755 173.988 205.711 177.104C205.23 178.539 204.748 179.975 204.36 181.413L194.041 183.669ZM194.041 183.669L193.133 181.585C192.8 180.822 192.487 180.06 192.179 179.309C191.515 177.692 190.873 176.127 190.101 174.718L190.101 174.717C186.446 168.051 182.773 161.409 179.103 154.771C173.949 145.45 168.798 136.136 163.707 126.772L163.707 126.771C154.508 109.857 145.39 92.9012 136.445 75.859L136.445 75.859C134.418 71.9974 132.823 67.7959 131.655 63.5507C129.828 56.9072 133.172 50.6776 139.667 48.0862C140.68 47.6821 142.899 47.2412 145.94 46.8376C148.899 46.4449 152.417 46.113 155.867 45.8614C159.316 45.61 162.674 45.4405 165.309 45.3702C166.628 45.3349 167.751 45.325 168.605 45.3408C169.033 45.3487 169.379 45.3628 169.639 45.3815C169.858 45.3972 169.964 45.4128 169.994 45.417C170.003 45.4185 170.005 45.4186 169.999 45.4172C175.103 46.6673 178.733 49.3701 181.56 53.8432L181.56 53.8433C190.289 67.6567 192.89 83.3407 194.966 99.5317L194.041 183.669ZM170.474 43.4752L170.474 43.4751L170.474 43.4752Z" fill="white" stroke="black" stroke-width="4"/>
<defs>
<radialGradient id="paint0_radial_23_74" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(218 403.5) rotate(-97.899) scale(385.659)">
<stop offset="0.121507" stop-color="#F3E4C6"/>
<stop offset="0.664013" stop-color="#FFB6E6"/>
<stop offset="1" stop-color="#91C2F4"/>
</radialGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

27
public/wonderland/wonderland.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 84 KiB

3785
yarn.lock
View file

File diff suppressed because it is too large Load diff