chore: remove sass dependency (#24)

* chore: remove sass dependency

* style: add more stars to fill empty spaces

* chore: optimize stars

package.json

@@ -30,7 +30,6 @@
     "@types/react-transition-group": "4.4.5",
     "@types/styled-components": "5.1.25",
     "@vitejs/plugin-react": "2.0.0",
-    "sass": "1.58.0",
     "typescript": "4.6.4",
     "vite": "3.0.0",
     "vite-tsconfig-paths": "3.5.0"

src/containers/StarsBackground/index.tsx

@@ -1,24 +1,129 @@
 import styled from "styled-components";
-import "~/assets/css/stars.sass";
 
-const StarsContainer = styled.div`
+const getRandomInt = (max: number) => {
+  return Math.floor(Math.random() * max);
+};
+
+const generateStars = (stars: number) => {
+  const width = 2000;
+  const height = 4000;
+
+  let shadows = `${getRandomInt(width)}px ${getRandomInt(height)}px #fff`;
+  for (let index = 0; index < stars; index++) {
+    shadows = `${shadows}, ${getRandomInt(width)}px ${getRandomInt(
+      height
+    )}px #fff`;
+  }
+  return shadows;
+};
+
+export interface StarsContainerProps {
+  smStars: number;
+  mdStars: number;
+  lgStars: number;
+}
+
+const StarsContainer = styled.div<StarsContainerProps>`
   position: relative;
   width: 100%;
   top: 0;
   left: 0;
 
+  & .stars {
+    width: 0.1rem;
+    height: 0.1rem;
+    box-shadow: ${(props) => generateStars(props.smStars)};
+    animation: animStar ${getRandomInt(2000) + 1000}ms linear infinite;
+    z-index: 100;
+  }
+
+  & .stars1 {
+    width: 0.1rem;
+    height: 0.1rem;
+    box-shadow: ${(props) => generateStars(props.smStars)};
+    animation: animStar ${getRandomInt(2000) + 1000}ms linear infinite;
+    z-index: 100;
+  }
+
+  & .stars2 {
+    width: 0.1rem;
+    height: 0.1rem;
+    box-shadow: ${(props) => generateStars(props.smStars)};
+    animation: animStar ${getRandomInt(2000) + 1000}ms linear infinite;
+    z-index: 100;
+  }
+
+  & .stars3 {
+    width: 0.1rem;
+    height: 0.1rem;
+    box-shadow: ${(props) => generateStars(props.smStars)};
+    animation: animStar ${getRandomInt(2000) + 1000}ms linear infinite;
+    z-index: 100;
+  }
+
+  & .stars4 {
+    width: 0.1rem;
+    height: 0.1rem;
+
+    box-shadow: ${(props) => generateStars(props.smStars)};
+    animation: animStar ${getRandomInt(2000) + 1000}ms linear infinite;
+    z-index: 100;
+  }
+
+  & .stars5 {
+    width: 0.2rem;
+    height: 0.2rem;
+    background: transparent;
+    box-shadow: ${(props) => generateStars(props.mdStars)};
+    animation: animStar 1213ms linear infinite;
+  }
+  & .stars6 {
+    width: 0.3rem;
+    height: 0.3rem;
+    background: transparent;
+    box-shadow: ${(props) => generateStars(props.lgStars)};
+    animation: animStar2 747ms linear infinite;
+  }
+
   & div {
     border-radius: 100%;
   }
+
+  @keyframes animStar {
+    0% {
+      opacity: 0.1;
+    }
+    50% {
+      opacity: 0.7;
+    }
+    100% {
+      opacity: 0.1;
+    }
+  }
+
+  @keyframes animStar2 {
+    0% {
+      opacity: 0.5;
+    }
+    50% {
+      opacity: 0.1;
+    }
+    100% {
+      opacity: 0.5;
+    }
+  }
 `;
 
 export function StarsBackground() {
   return (
-    <StarsContainer>
-      <div id="stars"></div>
-      <div id="stars1"></div>
-      <div id="stars2"></div>
-      <div id="stars3"></div>
+    <StarsContainer smStars={700} mdStars={700} lgStars={50}>
+      <div className="stars"></div>
+      <div className="stars1"></div>
+      <div className="stars2"></div>
+      <div className="stars3"></div>
+      <div className="stars4"></div>
+      <div className="stars5"></div>
+      <div className="stars6"></div>
     </StarsContainer>
   );
 }

src/pages/Home.tsx

@@ -1,12 +1,13 @@
 import { Outlet } from "react-router-dom";
 
 import { PageContent } from "~/components/app";
-import { Footer, Navbar } from "~/containers";
+import { Footer, Navbar, StarsBackground } from "~/containers";
 
 export function Home() {
   return (
     <>
       <Navbar />
+      <StarsBackground />
       <PageContent>
         <Outlet />
       </PageContent>

src/pages/Landing/Landing.tsx

@@ -1,12 +1,10 @@
-import { StarsBackground } from "~/containers";
 import { HeroSection } from "./HeroSection";
 import { ContentSection } from "./ContentSection";
 
 export function Landing() {
   return (
     <>
       <HeroSection />
-      <StarsBackground />
       <ContentSection />
     </>
   );

src/pages/Portfolio/index.tsx

@@ -17,15 +17,13 @@ import { ProjectsList } from "./ProjectsList";
 import { Distortion } from "~/components/common/DistortionText";
 import { Divider } from "./ProjectsList/ProjectsList.styles";
 import { useWindowDimensions } from "~/hooks/windowDimensions";
-import { StarsBackground } from "~/containers";
 
 export function Portfolio() {
   const { isMobile } = useWindowDimensions();
 
   return (
     <>
       <Container>
-        <StarsBackground />
         <BackgroundContainer>
           <BG_1 type="2" align="center" />
           <BG_2 type="1" align="left" />

src/pages/Team/index.tsx

@@ -1,6 +1,5 @@
 import { WonderTeamSection } from "./TeamGrid.tsx";
 import { BackgroundImg, Container, HeroDivider, TeamBall } from "./Team.styles";
-import { StarsBackground } from "~/containers";
 import { LiquidDistortion } from "~/components/common";
 import { useWindowDimensions } from "~/hooks/windowDimensions";
 
@@ -9,7 +8,6 @@ export function Team() {
 
   return (
     <>
-      <StarsBackground />
       <BackgroundImg type="3" align="center" />
       <Container>
         <HeroDivider>