Experiment with words.........

This commit is contained in:
Ella 2022-07-26 15:55:44 -04:00
parent 9884da1c5b
commit 6e3178a0cc
3 changed files with 100 additions and 45 deletions

View file

@ -1,20 +1,42 @@
import Ticker from 'react-ticker'
import { Avatar, Box, Card, Message, Text } from 'theme-ui'
import Image from 'next/image'
import { Avatar, Box, Card, Link, Message, Text, Image } from 'theme-ui'
// import Image from 'next/image'
export default function MovingCards() {
const messageData = [
{
message: 'What sorts of prizes do you give out at a hackathon?',
username: 'ella'
message:
"my team is trying to decide where to get the best/cheapest shirts. i've heard good things abt scalablepress, custom ink, gildan, bella x canvas, printful, etc but i'm wondering where did yall get ur swag from? also, approx how much would be the cost for 400 ppl?",
username: 'elizabethq'
},
{
message: 'how to organize a hackathon???????.',
username: 'ella'
message:
'Speaking of how much time is needed, how reasonable is it to plan a virtual hackathon in 2 months?',
username: 'googol'
},
{
message: 'how to get money for your hackathon??!??!?!??!!11!!!!!',
username: 'scrappy'
},
{
message:
'hey yall :wave: :smile: i\'m wondering abt the logistics and overall shipping costs for tshirts and swag to 300+ students in my area (some ppl across the country, and others in canada). what would be the best way to tackle this? (any "special" methods, package types, or any advice at all)',
username: 'elizabethq'
},
{
message:
'can anyone suggest any sources for good stock hackathon photos?',
username: 'charalampos'
},
{
message:
"Hey I'm looking forward to hosting a hackathon but one question I have is about sponsors, if we get sponsored a physical item would we have to ship it out to the winner? or would the comapny do it aswell",
username: 'scrappy'
},
{
message:
"I was looking at HackPenn's website and saw that they got breakfast down to a 1.60 for each participant, is there anyone on the team that can help me with how they did that",
username: 'Jaden'
}
]
return (
@ -38,29 +60,57 @@ function MessageCard({ message, username }) {
sx={{
fontSize: 3,
mx: 2,
my: 4
my: 4,
minWidth: '350px',
height: 'fit-content',
display: 'flex',
alignItems: 'top'
}}
>
<Box as="span" sx={{ display: 'flex' }}>
{/* <Image
src={`https://scrapbook.hackclub.com/${username}.png`}
width={32}
height={32}
alt={`${username} profile picture`}
/> */}
<Avatar
<Box
sx={{
width: '50px',
height: '50px',
borderRadius: '5px',
overflow: 'hidden',
mr: 2
}}
>
<Image
src={`https://scrapbook.hackclub.com/${username}.png`}
alt={`${username} profile picture`}
sx={{
mr: 2,
width: 32,
height: 32
}}
/>
<Text>@{username}</Text>
</Box>
{message}
<Box
as="span"
sx={{
display: 'flex',
flexDirection: 'column',
width: '300px'
}}
>
<Link
href={`https://scrapbook.hackclub.com/${username}`}
sx={{ textDecoration: 'none' }}
>
<Text
as="span"
sx={{
fontWeight: 'bold',
textDecoration: 'none',
color: 'black',
fontSize: 2,
pt: 0,
mt: -2
}}
>
{username}
</Text>
</Link>
<Text as="p" sx={{ fontSize: 2 }}>
{message}
</Text>
</Box>
</Card>
)
}

View file

@ -22,8 +22,8 @@ export default function Rundown() {
whiteSpace: ['wrap', 'nowrap']
}}
>
amazing{' '}
</Text>
amazing
</Text>{' '}
hackathon.
</Heading>
</Box>
@ -54,7 +54,12 @@ export default function Rundown() {
svg: { color: '#fb558e' }
}}
>
<Stage icon="sam" color="white" name="Slack community?" desc="yeah" />
<Stage
icon="slack"
color="white"
name="Slack community"
desc={`Connect with a community of hackathon organizers and get support from peers.`}
/>
</Card>
<Card
sx={{
@ -67,8 +72,8 @@ export default function Rundown() {
<Stage
icon="bank-account"
color="white"
name="$0k in grants"
desc="Waived fees & grants for IRL hacakthons"
name="$10k in grants"
desc="We've partnered with ___ to provide $500 grants for IRL high school hackathons this semester."
/>
</Card>
<Card
@ -83,7 +88,7 @@ export default function Rundown() {
icon="event-check"
color="white"
name="Attendees"
desc="Somethingabout spreading the word about your IRL hackathon."
desc="You'll have the opportunity to be listed on the front page of hackathons.hackclub.com, something about email list, and maybe the site haivng good seo?."
/>
</Card>
</Grid>

View file

@ -64,7 +64,7 @@ export default function Bank() {
running hackathons? */}
<Container as="section" sx={{ mt: 5 }}>
<Text as="p" variant="eyebrow">
From the Slack...
From the Slack community...
</Text>
<Heading as="h2" variant="title">
A hackathon organizer's{' '}
@ -83,22 +83,22 @@ export default function Bank() {
</Text>
.
</Heading>
<MovingCards />
<Grid
columns={[null, null, 2]}
gap={[3, 4]}
variant="layout.container"
sx={{
mt: [1, 2, 3],
textAlign: 'left',
div: { p: [3, 4] },
h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
p: { fontSize: 2, my: 0 }
}}
>
<Content />
</Grid>
</Container>
<MovingCards />
<Grid
columns={[null, null, 2]}
gap={[3, 4]}
variant="layout.container"
sx={{
mt: [1, 2, 3],
textAlign: 'left',
div: { p: [3, 4] },
h2: { variant: 'text.headline', color: 'blue', mt: 0, mb: 2 },
p: { fontSize: 2, my: 0 }
}}
>
<Content />
</Grid>
<Cta />
</Box>