Adds Svelte, Framer and starts work on homepage

src/components/HomeBackground.tsx

@@ -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;

src/pages/account/index.astro

@@ -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>

src/web-check-live/App.tsx

@@ -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 />
-  </>
-  );
-}

src/web-check-live/components/Results/TlsClientSupport.tsx

@@ -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')

src/web-check-live/styles/globals.tsx

@@ -13,6 +13,9 @@ const GlobalStyles = () => (
       font-family: PTMono;
       color: #fff;
     }
+    #fancy-background p span {
+      color: transparent;
+    }
     `}
   />
 );