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

overflow, banished!

Browse source
This commit is contained in:
Belle 2022-12-12 11:39:08 -05:00
commit 9a62bd84f0
7 changed files with 133 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
components/winter/landing.js
View file

@ -9,6 +9,35 @@ import Rsvp from './rsvp'
import ScrollHint from '../scroll-hint'
import useSWR from 'swr'
import fetcher from '../../lib/fetcher'
import { keyframes } from '@emotion/react'
const flashing = keyframes({
from: { opacity: 0 },
'50%': { opacity: 1 },
to: { opacity: 0 }
})
function Dot() {
return (
<Text
sx={{
bg: 'green',
color: 'white',
borderRadius: 'circle',
display: 'inline-block',
lineHeight: 0,
width: '.4em',
height: '.4em',
marginRight: '.4em',
marginBottom: '.12em',
animationName: `${flashing}`,
animationDuration: '3s',
animationTimingFunction: 'ease-in-out',
animationIterationCount: 'infinite'
}}
/>
)
}
export default function Landing({ rsvpCount }) {
// useEffect(() => {
@ -59,8 +88,8 @@ export default function Landing({ rsvpCount }) {
backgroundPosition: 'bottom center',
backgroundSize: ['200%', '150%', '100%'],
backgroundRepeat: 'no-repeat',
width: '100vw',
height: '85vh',
minHeight: [null, '750px'],
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@ -69,7 +98,7 @@ export default function Landing({ rsvpCount }) {
}}
>
<Snowfall />
<Box>
<Container>
<Box
sx={{
backdropFilter: 'blur(1.5px)',
@ -84,7 +113,8 @@ export default function Landing({ rsvpCount }) {
// fontSize: ['18px', '20px', '24px']
}}
>
<Text sx={{background: 'white', color: 'blue', px: 2, py: 1, borderRadius: 'default'}}>{rsvpCount}</Text> more RSVPs till the start of a hacker's
<Dot />
{rsvpCount} more RSVPs till the start of a hacker's
</Heading>
</Fade>
<Fade left cascade>
@ -118,7 +148,7 @@ export default function Landing({ rsvpCount }) {
<Rsvp />
</Box>
{/* <ScrollHint sx={{mt: 3}} /> */}
</Box>
</Container>
</Box>
</Box>
)

6
components/winter/projects.js
View file

@ -247,8 +247,10 @@ export default function Projects() {
alt="click me"
sx={{
position: 'absolute',
top: -3,
right: '-40px',
top: [null, -3, -3],
bottom: [-3, null, null],
right: [0, '-40px', '-40px'],
transform: 'rotate(-12deg)'
}}
/>
</Text>

74
components/winter/rsvp.js
View file

@ -9,7 +9,9 @@ import {
Alert,
Card,
Heading,
Grid
Grid,
Flex,
Checkbox
} from 'theme-ui'
import { Zoom } from 'react-reveal'
@ -52,7 +54,7 @@ const Rsvp = () => {
body: JSON.stringify({
Name: e.target.name.value,
Email: e.target.email.value,
Age: e.target.age.value
Age: e.target.age.checked
})
})
@ -78,47 +80,51 @@ const Rsvp = () => {
<Text sx={{ color: 'muted' }}>
RSVP to get notified when applications open.
</Text>
<Grid
<Box
as="form"
ref={formRef}
onSubmit={handleSubmit}
gap={[2, 3]}
sx={{
mt: [null, 3],
gridTemplateColumns: [null, '1fr 1fr auto'],
textAlign: 'left',
alignItems: 'end',
input: { bg: 'sunken' }
}}
>
<div>
<Label htmlFor="location">Name</Label>
<Input
autofillBackgroundColor="highlight"
type="text"
name="name"
id="name"
placeholder="Fiona Hackworth"
required
/>
</div>
<div>
<Label htmlFor="email">Email</Label>
<Input
autofillBackgroundColor="highlight"
type="email"
name="email"
id="email"
placeholder="fiona@hackclub.com"
required
/>
</div>
<div>
<Label htmlFor="age">Under 18?</Label>
<Input type="checkbox" name="age" id="age" checked/>
</div>
<Zoom delay={200}>
<Button type="submit" sx={{ mt: [2, 0] }}>
<Grid sx={{ gridTemplateColumns: '1fr 1fr' }}>
<div>
<Label htmlFor="location">Name</Label>
<Input
autofillBackgroundColor="highlight"
type="text"
name="name"
id="name"
placeholder="Fiona Hackworth"
required
/>
</div>
<div>
<Label htmlFor="email">Email</Label>
<Input
autofillBackgroundColor="highlight"
type="email"
name="email"
id="email"
placeholder="fiona@hackclub.com"
required
/>
</div>
</Grid>
<Flex sx={{ flexDirection: 'column' }}>
<Label variant="labelHoriz" sx={{ m: 0, fontSize: 1, pt: 1 }}>
<Checkbox name="age" defaultChecked={false} />I am 18 years of age
or younger.
</Label>
<br />
<Button type="submit" sx={{ mt: -3 }}>
{submitting ? (
<>
<Loading />
@ -128,8 +134,8 @@ const Rsvp = () => {
'RSVP'
)}
</Button>
</Zoom>
</Grid>
</Flex>
</Box>
{submitted && (
<Alert variant="primary" sx={{ bg: 'green', mt: [2, 3] }}>

3
components/winter/timeline.js
View file

@ -6,7 +6,6 @@ function TimelineStep({ children }) {
return (
<Flex
sx={{
marginX: 4,
paddingY: 4,
flexDirection: 'row',
alignItems: 'center',
@ -95,7 +94,7 @@ function Step({ icon, name, duration, href }) {
{duration}
</Badge>
<Text
sx={{ color: 'white', fontSize: 24, maxWidth: [300, null, 550] }}
sx={{ color: 'white', fontSize: [2, 3], maxWidth: [300, null, 550] }}
>
{name}
</Text>

79
pages/team.js
View file

@ -84,13 +84,6 @@ export default function Team() {
img="/team/holly.jpeg"
pronouns="she/her"
/>
<Bio
name="Cedric Hutchings"
teamRole="Clubs Constructionist"
text="Already more at home on the internet than anywhere in meat space, you can imagine a young Ced's horror when his parents moved him into a holler so deep in the Appalachian Mountains that his beloved internet was only accessible through sluggish satellite. Stubbornly refusing to be separated from his online games, he threw together his own for his brothers, a captive audience. Now he's at Hack Club making materials that share his enthusiasm for making fun somethings from nothing but technology."
img="/team/ced.png"
pronouns="he/him"
/>
<Bio
name="Kognise"
teamRole="Special Projects and Hiring"
@ -140,42 +133,6 @@ export default function Team() {
pronouns="he/him"
/>
</Grid>
<br />
<Text variant="title" color="orange" sx={{ lineHeight: '1.75em' }}>
Asia-Pacific HQ
</Text>
<Grid columns={[1, null, 2]} gap={4}>
<Bio
img="/team/athul.jpg"
name="Athul Blesson"
teamRole="APAC Director"
text="Athul started dozens of the largest Hack Clubs in India. After graduating from high school, he joined as the Regional Manager of Asia-Pacific & Africa, where he actively manages 117 clubs."
pronouns="he/him"
/>
<Bio
name="Harsh Bajpai"
teamRole="Clubs Lead"
text="Harsh is a gentle force in both his local and the Slack community. He is a vegetarian musician who enjoys traveling around India. When he is not reading ancient mythology, he is programming with purpose and passion."
img="/team/harsh.png"
pronouns="he/him"
/>
<Bio
name="Annlee Fores"
teamRole="Operations"
text="As the COO of Hack Club APAC, he oversees operations and handles event organisation & logistics at Hack Club APAC.
When not seen busy juggling between different tasks he takes up, he enjoys tinkering & building fun projects."
img="/team/annlee.jpg"
pronouns="he/him"
/>
<Bio
name="Anna Grace Benny"
teamRole="Clubs Lead"
text="Anna is a visual communication graduate and a social media enthusiast. She loves films and everything related. Managing and meeting new Hack Clubbers is her jam. She helps with onboarding new Hack Clubbers in the APAC region and manages the social media pages."
img="/team/anna.png"
pronouns="she/her"
/>
</Grid>
<br />
<Text variant="title" color="orange" sx={{ lineHeight: '1.75em' }}>
Student Team
@ -274,6 +231,42 @@ and participating in academic competitions with his friends.`}
Acknowledgements
</Text>
<Grid columns={[1, null, 2]} gap={4}>
<Bio
name="Cedric Hutchings"
teamRole="Clubs Constructionist"
text="Already more at home on the internet than anywhere in meat space, you can imagine a young Ced's horror when his parents moved him into a holler so deep in the Appalachian Mountains that his beloved internet was only accessible through sluggish satellite. Stubbornly refusing to be separated from his online games, he threw together his own for his brothers, a captive audience. At Hack Club, Ced made materials that shared his enthusiasm for making fun somethings from nothing but technology."
img="/team/ced.png"
pronouns="he/him"
/>
<Bio
img="/team/athul.jpg"
name="Athul Blesson"
teamRole="APAC Director"
text="Athul started dozens of the largest Hack Clubs in India. After graduating from high school, he joined Hack Club as the Regional Manager of the Asia-Pacific & Africa team where he actively managed hundreds of clubs. Then, as the APAC Director, Athul lead the APAC HQ team dedicated to supporting all of the clubs in the APAC region."
pronouns="he/him"
/>
<Bio
name="Harsh Bajpai"
teamRole="Clubs Lead"
text="Harsh is a vegetarian musician who enjoys traveling around India. As the APAC Clubs Lead, Harsh welcomed new clubs to the community and built amazing tools for them. When he is not reading ancient mythology, he is programming with purpose and passion."
img="/team/harsh.png"
pronouns="he/him"
/>
<Bio
name="Annlee Fores"
teamRole="Operations"
text="As the COO of Hack Club APAC, Annlee oversaw operations and handled event organisation & logistics at Hack Club APAC.
When not busy juggling different tasks he takes up, he enjoys tinkering & building fun projects."
img="/team/annlee.jpg"
pronouns="he/him"
/>
<Bio
name="Anna Grace Benny"
teamRole="Clubs Lead"
text="Anna is a visual communication graduate and a social media enthusiast. She loves films and everything related. Managing and meeting new Hack Clubbers as the APAC Clubs Lead, she helped with onboarding new clubs and managed the APAC social media pages."
img="/team/anna.png"
pronouns="she/her"
/>
<Bio
name="Ishan Goel"
teamRole="2022 Summer Communications Intern"

21
pages/winter.js
View file

@ -34,6 +34,10 @@ export function Winter() {
fetcher,
{ refreshInterval: 1000 }
)
const rsvpCount = rsvps
? rsvps.filter(rsvp => rsvp.fields.Status === 'rsvp').length
: 100 // arbitrary fallback number
return (
<>
<Box as="main" sx={{ bg: 'blue' }}>
@ -41,12 +45,13 @@ export function Winter() {
as={Head}
title="Winter Hardware Wonderland"
description="Join the Hack Club community for a winter of hardware hacking, and get a $250 grant to build your project."
image="/winter/og-image.png" // TODO: add og image
image="/winter/og-image.png"
/>
<Nav light />
<Snowfall />
<ForceTheme theme="light" />
<Landing rsvpCount={500 - rsvps?.length} />
{/* filter out rsvps that are "invalid" */}
<Landing rsvpCount={500 - rsvpCount} />
<Breakdown />
<Projects />
<InfoGrid />
@ -105,7 +110,17 @@ export function Winter() {
{/* Timeline */}
<Recap />
<Container sx={{ margin: 'auto', fontStyle: 'italic', color: 'snow', mb: 3, textAlign: 'left'}}>Illustrations by Ripley</Container>
<Container
sx={{
margin: 'auto',
fontStyle: 'italic',
color: 'snow',
mb: 3,
textAlign: 'left'
}}
>
Illustrations by Ripley
</Container>
{/* <Signup /> */}
<Footer />
</Box>

BIN
public/winter/og-image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB