Moved the theater to it's own re-usable component

src/components/Home.js

@@ -1,21 +1,21 @@
 import React from 'react';
+import Theater from './Theater';
 import './css/Home.css';
 
 const Home = (props) => {
-  return (
-    <div className="Home">
-      <div className="theater">
-        <div className="theater-bg" />
-        <div className="theater-content">
-          <h1>Welcome to my Portfolio</h1>
+
+  const title = "Welcome to my Portfolio";
+  const description = 
     <p>
       This website helps you access the projects that I've worked on. You can navigate
       at the top to different locations in the site. Within you can find information about me,
       my github repositories, and some youtube videos I've posted. This website is coded with
       React/Redux and hosted over Vercel. You can email me at <a href="mailto:camerin@camsprojects.online">camerin@camsprojects.online</a>.
-          </p>
-        </div>
-      </div>
+    </p>;
+
+  return (
+    <div className="Home">
+      <Theater title={title} description={description} />
     </div>
   );
 }

src/components/Theater.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import './css/Theater.css';
+
+const Theater = (props) => {
+    
+    return (
+        <div className={`theater ${props.peak ? 'peak':''}`}>
+            <div className="theater-bg" style={props.background ? {backgroundImage: `url(${props.background})`} : {}}/>
+            <div className="theater-content">
+                <h1>{props.title}</h1>
+                <p>
+                    {props.description}
+                </p>
+            </div>
+        </div>
+        
+    );
+};
+
+export default Theater;

src/components/css/Home.css

@@ -1,51 +1,11 @@
-.theater {
-    display: grid;
-    place-items:center;
-    grid-template-areas: "inner-div";
-}
-
-.theater-bg {
-    height: 94.6vh;
-    width:100vw;
-    background-size: cover;
-    background-image: url('../../img/background.webp');
-    filter: blur(2px);
-    -webkit-filter: blur(2px);
-    z-index:0;
-    grid-area: inner-div;
-}
-
-.theater-content {
-    display:flex;
-    flex-direction: column;
-    text-shadow: 0px 0px 2px black;
-    text-align: center;
-    z-index:1;
-    color: #FAFCF0;
-    grid-area: inner-div;
-    font-weight:bolder;
-    max-width: 100vw;
-    width:100vw;
-    background: rgba(76, 76, 80, 0.75);
-    align-items: center;
-}
-
-.theater-content p,h1 {
-    width: 50vw;
-}
-
-.theater-content a {
-    color: #CFCFBA;
-}
-
 a:link {
-    color: inherit;
+    color:black;
     text-decoration: none;
     cursor: pointer;
 }
 
 a:visited {
-    color: inherit;
+    color:black;
     text-decoration: none;
     cursor: pointer;
 }
@@ -53,6 +13,8 @@ a:visited {
 body {
     font-family: Arial, Helvetica, sans-serif;
     margin:0;
+    width: 100vw;
+    overflow-x: hidden;
 }
 
 @media only screen and (max-width: 600px) {

src/components/css/Theater.css

@@ -0,0 +1,43 @@
+.theater {
+    display: grid;
+    place-items:center;
+    grid-template-areas: "inner-div";
+}
+
+.theater-bg {
+    height: 94.6vh;
+    width:100vw;
+    background-size: cover;
+    background-image: url('../../img/background.webp');
+    filter: blur(2px);
+    -webkit-filter: blur(2px);
+    z-index:0;
+    grid-area: inner-div;
+}
+
+.theater.peak .theater-bg {
+    height: 85vh;
+}
+
+.theater-content {
+    display:flex;
+    flex-direction: column;
+    text-shadow: 0px 0px 2px black;
+    text-align: center;
+    z-index:1;
+    color: #FAFCF0;
+    grid-area: inner-div;
+    font-weight:bolder;
+    max-width: 100vw;
+    width:100vw;
+    background: rgba(76, 76, 80, 0.75);
+    align-items: center;
+}
+
+.theater-content p,h1 {
+    width: 50vw;
+}
+
+.theater-content a {
+    color: #CFCFBA !important;
+}