From c960fe8eac19d763c2f8fc27d469079be7588b45 Mon Sep 17 00:00:00 2001
From: Belle <65808924+bellesea@users.noreply.github.com>
Date: Tue, 9 Jan 2024 14:16:53 -0500
Subject: [PATCH] change header + add spotlight effect (#1051)
* header
* small changes
* add bg
---
components/nav.js | 4 +-
components/secret.js | 2 +-
pages/index.js | 183 +++++++++++++++++++++++++++----------------
3 files changed, 117 insertions(+), 72 deletions(-)
diff --git a/components/nav.js b/components/nav.js
index 3bc3fff5..b4b11c2a 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -146,10 +146,10 @@ const Navigation = props => (
Hackathons
- Slack
+ Community
Scrapbook
- Jams
+ Workshops
OnBoard
diff --git a/components/secret.js b/components/secret.js
index bb19dc03..b26353f8 100644
--- a/components/secret.js
+++ b/components/secret.js
@@ -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}
diff --git a/pages/index.js b/pages/index.js
index 5d0a6cdf..58da5c6f 100644
--- a/pages/index.js
+++ b/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 (
<>
{
setHover(true)
+ console.log(hover)
}}
onMouseOut={() => {
- setHover(false)
+ setReveal(false)
}}
/>
{"Hey, I'm an Easter Egg! Look at me!"}
-
{
- setHover(false)
!reveal ? setReveal(true) : setReveal(false)
}}
sx={{
@@ -586,21 +613,38 @@ function Page({
+
@@ -1068,78 +1112,79 @@ function Page({
-
- {new URL(asPath, 'http://example.com').searchParams.get('gen') ===
- 'z' && (
- <>
-
+
+ {new URL(asPath, 'http://example.com').searchParams.get('gen') ===
+ 'z' && (
+ <>
+
+
+
+
+
-
-
-
-
-
-
-
-
- )}
-
+
+
+
+
+ )}
+
+