mirror of
https://github.com/System-End/site.git
synced 2026-04-19 15:18:18 +00:00
change header + add spotlight effect (#1051)
* header * small changes * add bg
This commit is contained in:
Belle
GitHub
parent
e54148f048
commit
c960fe8eac
3 changed files with 117 additions and 72 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
183
pages/index.js
183
pages/index.js
|
|
@ -1,7 +1,17 @@
|
|||
import {Badge, Box, Button, Card, Flex, Grid, Heading, Link, Text} from 'theme-ui'
|
||||
import React, {useEffect, useRef, useState} from 'react'
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Flex,
|
||||
Grid,
|
||||
Heading,
|
||||
Link,
|
||||
Text
|
||||
} from 'theme-ui'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import {useRouter} from 'next/router'
|
||||
import { useRouter } from 'next/router'
|
||||
import Meta from '@hackclub/meta'
|
||||
import Nav from '../components/nav'
|
||||
import BGImg from '../components/background-image'
|
||||
|
|
@ -120,6 +130,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
|
||||
|
|
@ -148,15 +176,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={{
|
||||
|
|
@ -228,7 +256,6 @@ function Page({
|
|||
>
|
||||
<Text
|
||||
onClick={() => {
|
||||
setHover(false)
|
||||
!reveal ? setReveal(true) : setReveal(false)
|
||||
}}
|
||||
sx={{
|
||||
|
|
@ -586,21 +613,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]}
|
||||
>
|
||||
|
|
@ -1068,78 +1112,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={{
|
||||
|
|
@ -1225,7 +1270,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));
|
||||
hackathonsData.sort((a, b) => new Date(a.start) - new Date(b.start))
|
||||
|
||||
let events = await fetch(
|
||||
'https://events.hackclub.com/api/events/upcoming/'
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue