shtuff

src/assets/stylesheets/home.scss

@@ -21,7 +21,7 @@
 .home__content__panel {
   background-color: transparent;
   width: 100%;
-  height: 100vh;
+  height: 90vh;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -29,19 +29,23 @@
   overflow: hidden;
 }
 
+.home__content__panel__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .home__content__panel__title {
   position: absolute;
   color: white;
   text-align: center;
-  font-size: 500%;
+  font-size: 70px;
   font-family: "itrFont";
   animation: textSlide 1s ease;
   animation-iteration-count: 1;
   opacity: 100%;
   width: 100%;
-  padding-top: 20px;
-  padding-bottom: 10px;
-  letter-spacing: 5px;
+  letter-spacing: 2px;
   filter: drop-shadow(0 0 0.75rem rgb(77, 77, 77));
   z-index: 1;
 }
@@ -76,71 +80,13 @@
   background: linear-gradient(#353535, #232323);
 }
 
-.home__content__info__image {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  right: 0;
-  margin-top: 20vh;
-  width: 45vw;
-  height: 40vw;
-}
-
-.home__content__info__image img {
-  margin-right: 5vw;
-  width: 30vw;
-  animation: glow;
-  animation-duration: 1s;
-  animation-timing-function: ease;
-  animation-delay: 2s;
-  animation-fill-mode: forwards;
-}
-
-@media screen and (max-width: 912px) {
-  // Tablets
-  .home__content__panel__video {
-    zoom: 130%;
-  }
-}
-
 @media screen and (max-width: 650px) {
   // Phones
-  .home__content__info__image {
-    opacity: 0%;
 }
 
-  .home__content__panel__title {
-    color: rgb(255, 255, 255);
-    font-size: 250%;
-    padding-top: 20px;
-    padding-bottom: 10px;
-    letter-spacing: 5px;
-    filter: drop-shadow(0 0 0.75rem rgb(77, 77, 77));
-    z-index: 1;
-  }
-
-  .home__content__panel__button {
-    margin-top: 80vh;
-  }
-
-  .home__content__panel__video {
-    zoom: 100%;
-  }
-}
 
 // Animations
 
-@keyframes glow {
-  0% {
-    filter: drop-shadow(0vw 0vw 0vw #ff6767c0);
-  }
-  100% {
-    filter: drop-shadow(0vw 0vw 3vw #ff6767c0);
-  }
-}
-
 @keyframes textSlide {
   0% {
     margin-top: 50vw;

src/components/Home.js

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import backgroundVideo from "../assets/videos/video.mp4";
 import "../assets/stylesheets/home.scss";
-import { AnimationOnScroll } from "react-animation-on-scroll";
 import Bubble from "./Bubble";
 import * as Scroll from "react-scroll";
 import "animate.css";
@@ -26,12 +25,12 @@ export default class Home extends Component {
               <p>ILLINOIS TECH</p>
               <p>ROBOTICS</p>
             </label>
-            <button
+            {/* <button
               className="home__content__panel__button"
               onClick={this.scrollToContent}
             >
               ⬇️
-            </button>
+            </button> */}
             <video
               autoPlay
               playsInline
@@ -41,26 +40,12 @@ export default class Home extends Component {
               muted
               className="home__content__panel__video"
               type="video/mp4"
+              src={backgroundVideo}
             >
-              <source src={backgroundVideo} type="video/mp4" />
             </video>
           </div>
 
           <div className="home__content__info">
-            <div className="home__content__info__image">
-              <AnimationOnScroll
-                className="home__content__info_join"
-                animateIn="animate__fadeInRight"
-                animateOnce="true"
-                duration={1}
-                delay={1200}
-              >
-                <img
-                  src={require("../assets/pics/fenrir.png")}
-                  alt="Fenrir"
-                ></img>
-              </AnimationOnScroll>
-            </div>
             <Bubble top="10vh" left="10vw" h1="Join us at our" h2="GBMs 🤝">
               <span>
                 Welcome to the Illinois Tech Robotics Club! We are a student-run