Added new implementation of stars

package.json

@@ -21,6 +21,7 @@
         "bootstrap": "^4.1.3",
         "chart.js": "^2.9.4",
         "font-awesome": "^4.7.0",
+        "gsap": "^2.1.3",
         "material-ui-chip-input": "^1.1.0",
         "parallax-js": "^3.1.0",
         "qrcode.react": "^0.9.3",

public/tailwind-output.css

@@ -642,6 +642,10 @@ video {
   position: sticky;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .-left-48 {
   left: -12rem;
 }
@@ -670,10 +674,6 @@ video {
   right: 0px;
 }
 
-.top-0 {
-  top: 0px;
-}
-
 .bottom-\[20rem\] {
   bottom: 20rem;
 }
@@ -865,6 +865,10 @@ video {
   height: 100%;
 }
 
+.h-\[900vh\] {
+  height: 900vh;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -901,6 +905,10 @@ video {
   width: 100%;
 }
 
+.w-\[100vw\] {
+  width: 100vw;
+}
+
 .w-\[24rem\] {
   width: 24rem;
 }

src/App.jsx

@@ -17,10 +17,11 @@ import {
 import LandingPage from "./components/_Landing/Landing";
 import { Snackbar } from "@material-ui/core"; // Alert messages
 import { Alert } from "@material-ui/lab"; // Alert messages
-import ParticleBackground from "./components/_Landing/assets/Particles";
+// import ParticleBackground from "./components/_Landing/assets/Particles";
 import NavBar from "./NavBar";
 import { defaults } from "./Defaults"; // Get a handle to the default application settings
 import { Profile } from "./components/Profile"; // User profile storage
+import StarryBackground from "./components/_Landing/assets/scripts/StarryBackground";
 
 const updateStateOnURLChange =  (component) => {
     let previousUrl = "";
@@ -238,8 +239,8 @@ class App extends Component {
         return (
             <BrowserRouter style={{ width: "100%" }}>
                 {/* BrowserRouter wil allow us to switch between the different pages in our SPA based on the URL routing */}
-                <div className="bg-gradient-to-b from-mainBg to-endBg">
-                    <ParticleBackground />
+                <div className="bg-gradient-to-b from-mainBg to-endBg relative">
+                    <StarryBackground />
                     {/* Application alert messages go here */}
                     <Snackbar open={this.state.alertProps.open}
                         autoHideDuration={this.state.alertProps.duration}>

src/components/_Landing/Landing.css

@@ -21,6 +21,14 @@
   background-color: rgba(0, 0, 0, 0.4);
 }
 
+.star {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 2px;
+  background: white;
+}
+
 .floating {
   animation-name: floating;
 

src/components/_Landing/assets/scripts/StarryBackground.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from "react";
+import initStars from "./stars";
+
+function StarryBackground() {
+
+    useEffect(() => {
+        initStars(500);
+    }, []);
+
+    return <div id="starryBackground"
+        className="w-[100vw] h-full absolute top-0 overflow-hidden" />;
+}
+
+export default StarryBackground;

src/components/_Landing/assets/scripts/stars.js

@@ -1,38 +1,29 @@
-
-
-// Twinkling Star Animation
-// https://codepen.io/cliffgurney/pen/GNpzdx
-//
+import { TweenMax } from "gsap/TweenMax";
 
 // Amount of stars
-// function createStars(i) {
-//     var i = i;
-//     while(i){
-//         drawStars();
-//         i-=1;
-//     }
-// }
-// // Create Stars
-// function drawStars(){
-//     var tmpStar = document.createElement("figure");
-//     tmpStar.className = "star";
-//     tmpStar.style.top = 100*Math.random()+"%";
-//     tmpStar.style.left = 100*Math.random()+"%";
-//     document.getElementById("sky").appendChild(tmpStar);
-// }
-// // Animate Stars
-// function selectStars() {
-//     stars = document.querySelectorAll(".star");
-//     console.log(stars);
-// }
-// function animateStars() {
-//     Array.prototype.forEach.call(stars, function(el, i){
-//         TweenMax.to(el, Math.random() * 0.4 + 0.4, {opacity: Math.random(), onComplete: animateStars});
-//     });
-// }
+function createStars(numberOfStars) {
+    for (let i = 0; i < numberOfStars; i++) {
+        placeStarRandomly();
+    }
+}
+// Create Stars
+function placeStarRandomly(){
+    const tmpStar = document.createElement("figure");
+    tmpStar.className = "star";
+    tmpStar.style.top = 100*Math.random()+"%";
+    tmpStar.style.left = 100*Math.random()+"%";
+    document.getElementById("starryBackground").appendChild(tmpStar);
+}
 
-// createStars(500);
-// selectStars();
-// animateStars();
+function animateStars() {
+    const stars = document.querySelectorAll(".star");
+    Array.prototype.forEach.call(stars, function(el,){
+        TweenMax.to(el, Math.random() * 0.4 + 0.4, {opacity: Math.random(), onComplete: animateStars});
+    });
+}
 
 
+export default function initStars(numberOfStars) {
+    createStars(numberOfStars);
+    animateStars();
+}

src/components/_Landing/sections/hero/MainHeroContent.tsx

@@ -31,10 +31,6 @@ function HeroTitle() {
                 <div className="w-full flex justify-center">
                     <div className="text-2xl font-extrabold md:text-4xl lg:text-4xl glow-subtitles text-text flex">
                         Hack All Knight &nbsp;
-                        <span className="relative mt-1 md:mt-0">
-                            <div className="glowing-moon-container" />
-                            <IoMoon className="rotate-[270deg]" />
-                        </span>
                     </div>
                 </div>
                 <div className="text-2xl font-extrabold md:text-4xl lg:text-4xl glow-subtitles text-textSubtitle mt-4 flex flex-col md:flex-row md:justify-center md:items-center">