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) => {
+
+  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>;
+
   return (
     <div className="Home">
-      <div className="theater">
-        <div className="theater-bg" />
-        <div className="theater-content">
-          <h1>Welcome to my Portfolio</h1>
-          <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>
+      <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;
+}