first half of post-fair updates

not yet ready for deployment

src/App.css

@@ -7,6 +7,7 @@ body{
   background-image: url('assets/plexus.jpg');/*url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')*/
   background-attachment: fixed;
   background-size: 100% auto;
+  background-clip: border-box;
 }
 *{
   font-family: "Roboto Condensed",sans-serif;
@@ -23,7 +24,7 @@ h3{
   color: #a8a8a8;
 }
 p{
-  color: #ffffff;
+  color: rgb(212, 212, 212);
   font-size: 1rem;
 }
 a { 
@@ -52,6 +53,7 @@ a {
 }
 .navBar{
   display: block;
+  border-collapse: collapse;
   padding-left: 0px;
   margin: 0px;
   width: 100%;
@@ -75,16 +77,14 @@ a {
   display: block;
 }
 .foreground{
-  padding-top:5.5rem;
+  padding-top: 7rem;
-  padding-left: .5rem;
+  padding-left: 8rem;
-  width:100%;
+  width: calc(100%-8rem);
+  height: 100%;
   background-color: rgb(44,44,44,.5);
   padding-bottom: 1rem;
   overflow: hidden;
 }
-.foreground *{
-  padding-left: .5rem;
-}
 .foreground p{
   line-height: 1.5em;
   max-width: min(95%, 40rem);
@@ -97,17 +97,6 @@ a {
   max-width: min(40rem,80%);
   max-height: min(30rem,100%);
 }
-.centerContent{
-  margin-top: 10rem;
-  margin-bottom: 10rem;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 60rem;
-}
-#aboutMe{
-  float: left;
-  width: 45%;
-}
 #skills{
   float: right;
   width: 45%;
@@ -128,13 +117,11 @@ a {
   color:rgb(212, 212, 212);
 }
 .projectList{
-  padding: 0;
+  padding: 0px;
   display: block;
   margin-left:auto;
   margin-right:auto;
-  width: 75rem;
+  width: 100%;
-  background-color: rgba(0, 0, 0, 0.3);
-  border: solid rgba(156,49,45, .8) .3rem;
   text-align: center;
 }
 .project{
@@ -142,7 +129,7 @@ a {
   text-align: left;
   margin: 1rem;
   width: 20rem;
-  height: 20rem;
+  height: 22rem;
   border: .3rem rgba(156,49,45, .8) solid;
   background-color: rgba(22,22,22,.8);
 }
@@ -154,9 +141,6 @@ a {
   display: inline-block;
   border-bottom: black solid .2rem;
 }
-.body{
-  color:rgb(212, 212, 212);
-}
 .project img{
   margin-top: auto;
   height:3rem;
@@ -191,26 +175,32 @@ a {
   color:green;
 }
 .footer{
-  display: block;
+  position: fixed;
-  background-color: rgb(156,49,45);
+  bottom: 0;
+  left: 0;
 }
 .socials{
-  padding-left: 3rem;
+  margin-left: 1rem;
-  padding-right: 3rem;
+  width:0px;
-  padding-top: .5rem;
+}
-  padding-bottom: .5rem;
+.socials td{
-  margin-right: auto;
+  padding:5px;
-  table-layout: fixed;
+  text-align: left;
+  display: inline;
+  float:left;
 }
 .socials img{
   height: 2rem;
-  margin-right: 2rem;
+  margin-bottom: 1rem;
+  filter: invert(29%) sepia(20%) saturate(1786%) hue-rotate(314deg) brightness(101%) contrast(110%);
+}
+#vertLine{
+  border-right: 1px solid rgb(156,49,45);
+  margin-left: 1rem;
+  height: 10rem;
 }
 
 @media screen and (max-width: 1200px){
-  .socials{
-    margin-left: auto;
-  }
   .projectList{
     width: 95%;
   }
@@ -231,4 +221,37 @@ a {
     display: block;
     width: 90%;
   }
+  .footer{
+    width:100%;
+    display: block;
+    background-color: rgb(156,49,45);
+  }
+  .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;
+  }
+  .socials tr{
+    display: block;
+  }
+  .socials td{
+    display: inline;
+    text-align: center;
+    width: 10vw;
+  }
+  .socials img{
+    height: 2rem;
+    margin-bottom: 0px;
+    filter: none;
+  }
+  #vertLine{
+    visibility: collapse;
+    height:0px;
+  }
 }

src/componets/Project.js

@@ -7,7 +7,7 @@ export default class Project extends React.Component {
 
     render(){
         return (
-            <li className={'project'} data-aos='fade-up' data-aos-offset={0}>
+            <li className={'project'} data-aos='fade-up'>
                 <div className='topBox'>
                     <h3>{this.props.title}</h3>
                     <p className={this.props.status + " tab"}>⬤</p>

src/componets/Socials.js

@@ -9,10 +9,12 @@ export default function Socials(){
     return(
         <table class='socials'>
             <tr>
+                <td></td>
                 <td><a href='https://github.com/asimonson1125'><img alt='Github' src={github} /></a></td>
                 <td><a href='https://www.instagram.com/an_a.simonson/'><img alt='Instagram' src={instagram} /></a></td>
                 <td><a href='https://www.linkedin.com/in/simonsonandrew/'><img alt='LinkedIn' src={linkedin} /></a></td>
                 <td><a href='mailto:asimonson1125@gmail.com'><img alt='E-mail' src={email} /></a></td>
+                <td><div id='vertLine'></div></td>
             </tr>
         </table>
     )

src/pages/AboutMe.js

@@ -1,11 +1,27 @@
 import React from 'react'
 import Skills from '../componets/Skills'
+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 img4 from '../assets/photos/atRIT.jpg'
+import img5 from '../assets/photos/hagerstownVex2019.jpg'
+import img6 from '../assets/photos/WeThePeople.jpg'
+
 
 export default function AboutMe(){
     return(
     <>
         <div id='aboutMe' data-aos='fade-up'>
             <h2>About Me</h2>
+                <p>I'm a first year student at <strong>Rochester Institute of Technology </strong>
+                    in the <b>Computing Exploration</b> program and am pursuing a career in data
+                    science with a focus on predictive analytics.
+                </p>
+                <p>When I'm not in class, you can find me working on extra collaborative projects,
+                    building discord bots, playing chess, reading up on some recent geopolitical
+                    development, or in my dorm with a fat pint of ice cream.
+                </p>
             <p>My main goal in life is to always strive to make the biggest positive impact on
                 the world that I can.  Regardless of whether that is done behind the scenes or
                 on the front lines, that is how I'll know I have purpose.
@@ -23,10 +39,14 @@ export default function AboutMe(){
         </div>
         <div id='skills' data-aos='fade-up'>
             <h2>Skills</h2>
-            <Skills>{['Python','JavaScript','Java','C++','SQL','SQLite','Sequelize','SQLAclchemy',
+            <Skills>{['Python','JavaScript','Java','C++','SQL','SQLite','Sequelize','SQLAlchemy',
                 'HTML','CSS','Object-Oriented Programming','Git','Github','Linux','Raspberry Pi',
                 'LaTeX','Flask','DOM Scraping','Google API','React.js','Node.js']}</Skills>
         </div>
+        <MyCarousel className='carousel' data-aos='fade-up'>
+                    {[[img1, "Me, chilling"],[img2, "VEX Robotics 2019"],[img3, "Academic Team county championships"], 
+                    [img4, "at RIT"], [img5, "Competing at a Hagerstown VEX competition"], [img6, "We The People State Champions"]]}
+                </MyCarousel>
     </>
     )
 }

src/pages/Home.js

@@ -1,25 +1,11 @@
 import React from 'react';
-import MyCarousel from '../componets/Carousel.js';
-import img1 from '../assets/itsa_me.JPG'
-import img2 from '../assets/me_robot.jpeg'
-import img3 from '../assets/me_dog.jpg'
 
 export default function Home() {
     return (
         <>
             <div class='centerContent' data-aos="fade-up">
-                <h2>Ahoy, I'm Andrew Simonson</h2>
+                
-                <p>I'm a first year student at <strong>Rochester Institute of Technology </strong>
+                
-                    in the <b>Computing Exploration</b> program and am pursuing a career in data
-                    science with a focus on predictive analytics.
-                </p>
-                <p>When I'm not in class, you can find me working on extra collaborative projects,
-                    building discord bots, playing chess, reading up on some recent geopolitical
-                    development, or in my dorm with a fat pint of ice cream.
-                </p>
-                <MyCarousel>
-                    {[[img1, "Me, chilling"],[img2, "VEX Robotics 2019"]]}
-                </MyCarousel>
             </div>
         </>
     )