Adds Svelte, Framer and starts work on homepage
This commit is contained in:
Alicia Sykes committed
1 parent
322ef5e0ea
commit
ca3f8a4235
11 files changed
+274
-31
No files matched your search
@@ -0,0 +1,119 @@
|
||||
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;
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
import BaseLayout from '@layouts/Base.astro';
|
||||
import Nav from '@components/Nav.astro';
|
||||
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
<main>
|
||||
<Nav />
|
||||
</main>
|
||||
</BaseLayout>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
height: 100vh;
|
||||
padding: 1rem 0;
|
||||
background: rgb(20,29,43);
|
||||
background: radial-gradient(circle,#141d2b 0%,#0d1521 75%,#141d2b 100%);
|
||||
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
transform:
|
||||
rotate3d(.5,-.866,0,15deg)
|
||||
rotate(1deg);
|
||||
box-shadow:
|
||||
2em 4em 6em -2em rgba(0,0,0,.5),
|
||||
1em 2em 3.5em -2.5em rgba(0,0,0,.5);
|
||||
transition:
|
||||
transform .4s ease,
|
||||
box-shadow .4s ease;
|
||||
border-radius: .5em;
|
||||
|
||||
&:hover {
|
||||
transform:
|
||||
rotate3d(0,0,0,0deg)
|
||||
rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
+2
-12
@@ -1,9 +1,9 @@
|
||||
---
|
||||
import BaseLayout from '@layouts/Base.astro';
|
||||
import Nav from '@components/Nav.astro';
|
||||
import HomeBackground from '@/components/HomeBackground';
|
||||
|
||||
const isBossServer = import.meta.env.BOSS_SERVER === true;
|
||||
console.log('IS BOSS?', isBossServer)
|
||||
|
||||
const searchUrl = new URLSearchParams(new URL(Astro.request.url).search).get('url');
|
||||
|
||||
@@ -18,6 +18,7 @@ if (!isBossServer && searchUrl) {
|
||||
{!isBossServer && (<meta http-equiv="refresh" content="0; url=/check" />)}
|
||||
</Fragment>
|
||||
<main class="fancy-background">
|
||||
<HomeBackground client:only="react" />
|
||||
<Nav />
|
||||
<!-- <div class="left"></div>
|
||||
<div class="right"></div>
|
||||
@@ -58,15 +59,4 @@ if (!isBossServer && searchUrl) {
|
||||
}
|
||||
}
|
||||
|
||||
.fancy-background {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: repeat;
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1000%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask id=%22b%22 x=%220%22 y=%220%22 width=%222000%22 height=%221000%22%3E%3Cpath fill=%22url(%23a)%22 d=%22M0 0h2000v1000H0z%22%2F%3E%3C%2Fmask%3E%3Cpath fill=%22%23141d2b%22 d=%22M0 0h2000v1000H0z%22%2F%3E%3Cg style=%22transform-origin:center center%22 stroke=%22%23243044%22 stroke-width=%222%22 mask=%22url(%23b)%22%3E%3Cpath fill=%22none%22 d=%22M0 0h77v77H0zM77 0h77v77H77zM154 0h77v77h-77zM231 0h77v77h-77zM308 0h77v77h-77zM385 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304412%22 d=%22M462 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M539 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044ef%22 d=%22M616 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M693 0h77v77h-77zM770 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044df%22 d=%22M847 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M924 0h77v77h-77zM1001 0h77v77h-77zM1078 0h77v77h-77zM1155 0h77v77h-77zM1232 0h77v77h-77zM1309 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304484%22 d=%22M1386 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1463 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044db%22 d=%22M1540 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1617 0h77v77h-77zM1694 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044c6%22 d=%22M1771 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430442d%22 d=%22M1848 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1925 0h77v77h-77zM0 77h77v77H0zM77 77h77v77H77zM154 77h77v77h-77zM231 77h77v77h-77zM308 77h77v77h-77zM385 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304406%22 d=%22M462 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M539 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304430%22 d=%22M616 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M693 77h77v77h-77zM770 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044ed%22 d=%22M847 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M924 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304485%22 d=%22M1001 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304450%22 d=%22M1078 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d7%22 d=%22M1155 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1232 77h77v77h-77zM1309 77h77v77h-77zM1386 77h77v77h-77zM1463 77h77v77h-77zM1540 77h77v77h-77zM1617 77h77v77h-77zM1694 77h77v77h-77zM1771 77h77v77h-77zM1848 77h77v77h-77zM1925 77h77v77h-77zM0 154h77v77H0zM77 154h77v77H77zM154 154h77v77h-77zM231 154h77v77h-77zM308 154h77v77h-77zM385 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304448%22 d=%22M462 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d4%22 d=%22M539 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M616 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044e1%22 d=%22M693 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M770 154h77v77h-77zM847 154h77v77h-77zM924 154h77v77h-77zM1001 154h77v77h-77zM1078 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304479%22 d=%22M1155 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1232 154h77v77h-77zM1309 154h77v77h-77zM1386 154h77v77h-77zM1463 154h77v77h-77zM1540 154h77v77h-77zM1617 154h77v77h-77zM1694 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304461%22 d=%22M1771 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044a5%22 d=%22M1848 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1925 154h77v77h-77zM0 231h77v77H0zM77 231h77v77H77zM154 231h77v77h-77zM231 231h77v77h-77zM308 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044be%22 d=%22M385 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044f0%22 d=%22M462 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304464%22 d=%22M539 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M616 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304476%22 d=%22M693 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M770 231h77v77h-77zM847 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d9%22 d=%22M924 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430448f%22 d=%22M1001 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1078 231h77v77h-77zM1155 231h77v77h-77zM1232 231h77v77h-77zM1309 231h77v77h-77zM1386 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430446a%22 d=%22M1463 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1540 231h77v77h-77zM1617 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304420%22 d=%22M1694 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430447a%22 d=%22M1771 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044cb%22 d=%22M1848 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044ad%22 d=%22M1925 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M0 308h77v77H0z%22%2F%3E%3Cpath fill=%22%2324304469%22 d=%22M77 308h77v77H77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M154 308h77v77h-77zM231 308h77v77h-77zM308 308h77v77h-77zM385 308h77v77h-77zM462 308h77v77h-77zM539 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d0%22 d=%22M616 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304437%22 d=%22M693 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044e3%22 d=%22M770 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044cb%22 d=%22M847 308h77v77h-77z%22%2F%3E%3Cpath fill=%22none%Line truncated
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -8,6 +8,15 @@ import NotFound from 'web-check-live/views/NotFound.tsx';
|
||||
import ErrorBoundary from 'web-check-live/components/boundaries/PageError.tsx';
|
||||
import GlobalStyles from './styles/globals.tsx';
|
||||
|
||||
const Layout = () => {
|
||||
return (
|
||||
<>
|
||||
<GlobalStyles />
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
@@ -23,12 +32,3 @@ export default function App() {
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
function Layout() {
|
||||
return (
|
||||
<>
|
||||
<GlobalStyles />
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import Button from 'web-check-live/components/Form/Button';
|
||||
import { ExpandableRow } from 'web-check-live/components/Form/Row';
|
||||
|
||||
const makeClientSupport = (results: any) => {
|
||||
if (!results?.analysis) return [];
|
||||
if (!results?.analysis || results.analysis.length <1) return [];
|
||||
const target = results.target;
|
||||
const sslLabsClientSupport = (
|
||||
results.analysis.find((a: any) => a.analyzer === 'sslLabsClientSupport')
|
||||
|
||||
@@ -13,6 +13,9 @@ const GlobalStyles = () => (
|
||||
font-family: PTMono;
|
||||
color: #fff;
|
||||
}
|
||||
#fancy-background p span {
|
||||
color: transparent;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user