predeployment

Just need to add something to homepage and split about carousel

src/App.css

@@ -21,7 +21,7 @@ h2{
   margin-top: 1rem;
   margin-bottom: 2rem;
 }
-h3{
+h3, h4{
   color: #a8a8a8;
 }
 p{
@@ -77,6 +77,10 @@ a {
   margin:0px;
   display: block;
 }
+#home{
+  height: 100vh;
+  overflow-y: hidden;
+}
 .foreground{
   padding-top: 7rem;
   padding-left: 8rem;
@@ -85,13 +89,14 @@ a {
   background-color: rgb(44,44,44,.5);
   padding-bottom: 1rem;
   overflow: hidden;
+  transition: .4s;
 }
 .foreground p{
   line-height: 1.5em;
   max-width: min(95%, 40rem);
 }
 .centerContent{
-  margin-top: 10vh;
+  margin-top: 30vh;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
@@ -100,7 +105,7 @@ a {
   margin-left: auto;
   margin-right: auto;
   width:0;
-  height: 50rem;
+  height: 3rem;
   border-right: rgb(156,49,45) solid 1px;
 }
 .sideimg{
@@ -151,6 +156,9 @@ a {
   border: .3rem rgba(156,49,45, .8) solid;
   background-color: rgba(22,22,22,.8);
 }
+.project .topBox, .project .bottomBox{
+  padding-left: 1rem;
+}
 .tab{
   display: inline;
   float: right;
@@ -232,6 +240,9 @@ a {
   body{
     background-size: auto 100%;
   }
+  .foreground{
+    padding-bottom: 36px;
+  }
   .col{
     width: 90%;
     margin-bottom: 3rem;
@@ -254,14 +265,12 @@ a {
   }
   .socials{
     display:block;
-    padding-left: 3rem;
-    padding-right: 3rem;
     padding-top: .5rem;
     padding-bottom: .5rem;
     margin-right: auto;
     margin-left: auto;
     table-layout: fixed;
-    width: 80vw;
+    width: 100%;
   }
   .socials tr{
     display: block;
@@ -269,7 +278,9 @@ a {
   .socials td{
     display: inline;
     text-align: center;
-    width: 10vw;
+    width: calc(100% / 6);
+    padding-left: 0px;
+    padding-right: 0px;
   }
   .socials img{
     height: 2rem;

src/App.js

@@ -24,13 +24,9 @@ function App() {
           <Link to='/about'>About</Link>
         </Nav>
       </div>
-      <div className='foreground'>
-        
-          <Route exact path='/'><Home /></Route>
+      <Route exact path='/'><Home /></Route>
           <Route exact path='/projects'><Projects /></Route>
           <Route exact path='/about'><AboutMe /></Route>
-        
-      </div>
       <div className='footer'>
         <Socials />
       </div>

src/pages/AboutMe.js

@@ -4,13 +4,15 @@ import MyCarousel from '../componets/Carousel.js';
 import img1 from '../assets/photos/itsa_me.JPG'
 import img2 from '../assets/photos/me_robot.jpeg'
 import img3 from '../assets/photos/AcademicTeam.jpg'
-import img5 from '../assets/photos/hagerstownVex2019.jpg'
+import img4 from '../assets/photos/hagerstownVex2019.jpg'
+import img5 from '../assets/photos/WeThePeople_Districts.jpg'
 import img6 from '../assets/photos/WeThePeople.jpg'
+import img7 from '../assets/photos/WeThePeople_NationalsSetup.jpg'
 
 
 export default function AboutMe(){
     return(
-    <>
+    <div className='foreground'>
     <div className='col'>
         <div id='aboutMe' data-aos='fade-up'>
             <h2>About Me</h2>
@@ -45,6 +47,7 @@ export default function AboutMe(){
                 'HTML','CSS','Object-Oriented Programming','Git','Github','Linux','Raspberry Pi',
                 'LaTeX','Flask','DOM Scraping','Google API','React.js','Node.js']}</Skills>
         </div>
+        <div data-aos='fade-up'>
         <MyCarousel className='carousel' data-aos='fade-up'>
                     {[{original: img1, 
                         description: "Me, chilling"
@@ -59,18 +62,23 @@ export default function AboutMe(){
                     }, 
                     {
                         original: img4, 
-                        description:"at RIT"
+                        description:"Competing at a Hagerstown VEX competition"
                     }, 
                     {
                         original: img5, 
-                        description: "Competing at a Hagerstown VEX competition"
+                        description: "We the People Civics Competition District Champions"
                     }, 
                     {
                         original: img6, 
-                        description: "We The People State Champions"
+                        description: "We The People State Civics Competition Champions"
+                    },
+                    {
+                        original: img7,
+                        description: "what it looks like to compete in We the People Nationals, circa 2020"
                     }]}
                 </MyCarousel>
                 </div>
-    </>
+                </div>
+    </div>
     )
 }

src/pages/Home.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import MyCarousel from '../componets/Carousel'
 
 export default function Home() {
     return (
-        <>
+        <div id='home'>
             <div class='centerContent' data-aos="fade-up">
                 <h1>Andrew Simonson</h1>
-                <h3>The person who can do things good</h3>
+                <h3>Computer Science student at Rochester Institute of Technology</h3>
                 <div id='Vertical' />
             </div>
-        </>
+        </div>
     )
 }

src/pages/Projects.js

@@ -4,7 +4,7 @@ import github from '../assets/github.svg'
 
 export default function Projects(){
     return(
-      <>
+      <div className='foreground'>
         <div data-aos='fade-up'>
         <h2>Projects</h2>
           <p>Project status is indicated by the color of the project card:<br /><span className='complete'>⬤</span> - Complete<br />
@@ -40,6 +40,6 @@ export default function Projects(){
             A C++ keylogger for windows based off a udemy course with my custom modifications and powershell script.
           </Project>
         </ProjectList>
-      </>
+      </div>
     )
 }