Updates base layout
This commit is contained in:
Alicia Sykes
@@ -1,119 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const dotSpacing = 32;
|
||||
|
||||
const Meteor = styled(motion.div)`
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #9fef00;
|
||||
box-shadow: 0 0 15px 3px #9fef00;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100px;
|
||||
background: linear-gradient(to bottom, #9fef00, transparent);
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSvg = styled.svg`
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
fill: rgba(100, 100, 100, 0.5);
|
||||
`;
|
||||
|
||||
const StyledRect = styled.rect`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke-width: 0;
|
||||
`;
|
||||
|
||||
const generateMeteor = (id: number, gridSizeX: number, gridSizeY: number) => {
|
||||
const column = Math.floor(Math.random() * gridSizeX);
|
||||
const startRow = Math.floor(Math.random() * (gridSizeY - 12));
|
||||
const travelDistance = 5 + Math.floor(Math.random() * 10); // Between 5 and 15 spaces
|
||||
const duration = 1.5 + Math.random(); // 1.5 to 2.5 seconds duration
|
||||
|
||||
return {
|
||||
id,
|
||||
column,
|
||||
startRow,
|
||||
endRow: startRow + travelDistance,
|
||||
duration,
|
||||
key: Math.random() + Math.random(),
|
||||
};
|
||||
};
|
||||
|
||||
const DotPattern = ({ className }: { className?: string }) => {
|
||||
const countOfMeteors = 6;
|
||||
const [gridSizeX, setGridSizeX] = useState(Math.floor(window.innerWidth / dotSpacing));
|
||||
const [gridSizeY, setGridSizeY] = useState(Math.floor(window.innerHeight / dotSpacing));
|
||||
const [meteors, setMeteors] = useState(() => Array.from({ length: countOfMeteors }, (_, index) => generateMeteor(index, gridSizeX, gridSizeY)));
|
||||
|
||||
const handleAnimationComplete = (id: number) => {
|
||||
setMeteors(current =>
|
||||
current.map(meteor => {
|
||||
if (meteor.id === id) {
|
||||
return generateMeteor(id, gridSizeX, gridSizeY);
|
||||
}
|
||||
return meteor;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setGridSizeX(Math.floor(window.innerWidth / dotSpacing));
|
||||
setGridSizeY(Math.floor(window.innerHeight / dotSpacing));
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledSvg className={className}>
|
||||
<defs>
|
||||
<pattern id="dot-pattern" width={dotSpacing} height={dotSpacing} patternUnits="userSpaceOnUse">
|
||||
<circle cx={1} cy={1} r={2} />
|
||||
</pattern>
|
||||
</defs>
|
||||
<StyledRect fill="url(#dot-pattern)" />
|
||||
</StyledSvg>
|
||||
|
||||
{meteors.map(({ id, column, startRow, endRow, duration, key }) => (
|
||||
<Meteor
|
||||
key={key}
|
||||
initial={{
|
||||
x: column * dotSpacing,
|
||||
y: startRow * dotSpacing,
|
||||
opacity: 1
|
||||
}}
|
||||
animate={{
|
||||
y: endRow * dotSpacing,
|
||||
opacity: 0
|
||||
}}
|
||||
transition={{
|
||||
duration,
|
||||
// ease: "easeInOut"
|
||||
ease: [0.7, 0.75, 0.75, 1]
|
||||
}}
|
||||
onAnimationComplete={() => handleAnimationComplete(id)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DotPattern;
|
||||
@@ -1,84 +0,0 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
<nav class="navbar">
|
||||
<div class="nav-left">
|
||||
<a href="/" class="logo-link" aria-label="Home">
|
||||
<img width="64" src="/web-check.png" alt="Site Logo" />
|
||||
<span class="site-title">Web Check</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a href="/check" class="nav-link">Try Live</a>
|
||||
<a href="/check/about" class="nav-link">About</a>
|
||||
<a href="/account" class="nav-link">Join</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
flex-wrap: wrap;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color);
|
||||
width: 80vw;
|
||||
margin: 0 auto;
|
||||
border-radius: 2rem;
|
||||
border: 1px solid var(--primary-transparent);
|
||||
|
||||
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
|
||||
img {
|
||||
width: 2rem;
|
||||
max-width: 64px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-weight: bold;
|
||||
color: var(--primary);
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
margin-left: 1rem;
|
||||
padding: 0.5rem;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-light);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: var(--primary-dark);
|
||||
box-shadow: 0 0 0 3px var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user