finalized temporary home/about

src/App.css

@@ -101,6 +101,11 @@ a {
   margin-right: auto;
   text-align: center;
 }
+#HomeContent{
+  padding: 3rem;
+  display: inline-block;
+  background-color: rgb(44,44,44, .95);
+}
 #Vertical{
   margin-left: auto;
   margin-right: auto;
@@ -121,15 +126,23 @@ a {
   margin-right: 3rem;
   width: calc(50% - 3rem);
 }
+.boxedImg{
+  border: .5rem solid rgba(22,22,22,.8);
+  max-width: calc(90% - 1rem);
+}
 .carousel-container{
   margin-left: 10%;
   max-width: 80%;
 }
+.elementBlock{
+  margin-top: 3rem;
+}
 .skills{
   display: inline-block;
   background-color: rgba(0, 0, 0, 0.3);
   border: solid rgba(156,49,45, .8) .3rem;
   text-align: center;
+  padding:1rem;
 }
 .skill{
   display: inline-block;
@@ -241,6 +254,7 @@ a {
     background-size: auto 100%;
   }
   .foreground{
+    padding-left: 3rem;
     padding-bottom: 36px;
   }
   .col{
@@ -259,8 +273,9 @@ a {
     width: 90%;
   }
   .footer{
+    position:relative;
     width:100%;
-    display: block;
+    display: inline-block;
     background-color: rgb(156,49,45);
   }
   .socials{

src/pages/AboutMe.js

@@ -38,6 +38,7 @@ export default function AboutMe(){
                 be the one with a collection of distinct interests and a knack for bridging 
                 the gap between them.
             </p>
+            <img src={img1} alt='Me' className='boxedImg'/>
         </div>
     </div>
     <div className='col'>
@@ -47,23 +48,10 @@ 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'>
+        <div data-aos='fade-up' className='elementBlock'>
+            <h2>Extracirricular Awards</h2>
         <MyCarousel className='carousel' data-aos='fade-up'>
-                    {[{original: img1, 
-                        description: "Me, chilling"
-                    },
-                    {
-                        original:img2, 
-                        description: "VEX Robotics 2019"
-                    },
-                    {
-                        original:img3, 
-                        description: "Academic Team county championships"
-                    }, 
-                    {
-                        original: img4, 
-                        description:"Competing at a Hagerstown VEX competition"
-                    }, 
+                    {[
                     {
                         original: img5, 
                         description: "We the People Civics Competition District Champions"
@@ -75,7 +63,12 @@ export default function AboutMe(){
                     {
                         original: img7,
                         description: "what it looks like to compete in We the People Nationals, circa 2020"
-                    }]}
+                    },
+                    {
+                        original:img3, 
+                        description: "Academic Team county championships"
+                    }
+                    ]}
                 </MyCarousel>
                 </div>
                 </div>

src/pages/Home.js

@@ -4,9 +4,11 @@ export default function Home() {
     return (
         <div id='home'>
             <div class='centerContent' data-aos="fade-up">
+                <div id='HomeContent'>
                 <h1>Andrew Simonson</h1>
                 <h3>Computer Science student at Rochester Institute of Technology</h3>
-                <div id='Vertical' />
+                
+                </div>
             </div>
         </div>
     )

src/responsive.js

@@ -1,7 +1,7 @@
 window.onscroll = function() {scrollFunction()};
 
 function scrollFunction() {
-  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
+  if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
     document.querySelector('.header').style.backgroundColor = '#1a1a1a';
     document.querySelector('.header > a > h1').style.fontSize = "1.5rem";
     // document.querySelector('.header > h1').style.color = "#a8a8a8";