table bugstomp

src/App.css

@@ -1,37 +1,47 @@
 @import "~react-image-gallery/styles/css/image-gallery.css";
+
 html, body {
   background-color: #1b1f27;
   overflow-x: hidden;
 }
+
 body {
   margin: 0;
-  background-image: url('assets/plexus.jpg');/*url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')*/
+  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;
 }
+
 h1, h2 {
   color: #ecebeb;
 }
+
 h2 {
   font-size: 2rem;
   margin-top: 1rem;
   margin-bottom: 2rem;
 }
+
 h3, h4 {
   color: #a8a8a8;
 }
-p{
+
+p, li {
   color: rgb(212, 212, 212);
   font-size: 1rem;
 }
+
 a {
   color: #a0a0a0a0;
   text-decoration: none;
 }
+
 .header h1 {
   display: inline-block;
   transition: .4s;
@@ -40,6 +50,7 @@ a {
   margin-left: 1rem;
   font-size: 2rem;
 }
+
 .header {
   margin-bottom: 0px;
   margin-left: 0rem;
@@ -52,13 +63,15 @@ a {
   transition: .4s;
   overflow: hidden;
 }
+
 .navBar {
-  display: block;
-  border-collapse: collapse;
+  display: flex;
+  justify-content: space-between;
   padding-left: 0px;
   margin: 0px;
   width: 100%;
 }
+
 .navElement {
   border: solid black .2rem;
   width: 25vw;
@@ -69,24 +82,29 @@ a {
   padding-bottom: .5rem;
   background-color: rgb(156, 49, 45, .4);
 }
+
 .navElement:hover {
   background-color: rgb(156, 49, 45, .8);
 }
+
 .navElement * {
   color: white;
   margin: 0px;
   display: block;
 }
+
 #home {
   height: 100vh;
   overflow-y: hidden;
 }
+
 .concentratedHead {
   display: inline-block;
   padding-right: 4rem;
   border-bottom: #0f0f0f solid 5px;
   color: white;
 }
+
 .foreground {
   padding-top: 7rem;
   padding-left: 8rem;
@@ -97,21 +115,25 @@ a {
   overflow: hidden;
   transition: .4s;
 }
+
 .foreground p {
   line-height: 1.5em;
   max-width: min(90%, 40rem);
 }
+
 .centerContent {
   margin-top: 30vh;
   margin-left: auto;
   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;
@@ -119,6 +141,7 @@ a {
   height: 3rem;
   border-right: rgb(156, 49, 45) solid 1px;
 }
+
 .sideimg {
   float: right;
   top: 0;
@@ -127,11 +150,13 @@ a {
   max-width: min(40rem, 80%);
   max-height: min(30rem, 100%);
 }
+
 .col {
   float: left;
   margin-right: 3rem;
   width: calc(50% - 3rem);
 }
+
 .boxedImg {
   border: .5rem solid rgba(22, 22, 22, .8);
   max-width: calc(90% - 1rem);
@@ -139,13 +164,16 @@ a {
   margin-left: auto;
   margin-right: auto;
 }
+
 .carousel-container {
   margin-left: 10%;
   max-width: 80%;
 }
+
 .elementBlock {
   margin-top: 3rem;
 }
+
 .skills {
   display: inline-block;
   background-color: rgba(0, 0, 0, 0.3);
@@ -153,6 +181,7 @@ a {
   text-align: center;
   padding: 1rem;
 }
+
 .skill {
   display: inline-block;
   border: rgba(156, 49, 45, .8) solid .15rem;
@@ -161,6 +190,7 @@ a {
   background-color: rgba(11, 11, 11, .8);
   color: rgb(212, 212, 212);
 }
+
 .projectList {
   padding: 0px;
   display: block;
@@ -169,6 +199,7 @@ a {
   width: 100%;
   text-align: center;
 }
+
 .project {
   display: inline-block;
   text-align: left;
@@ -178,74 +209,85 @@ 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;
 }
+
 .project h3 {
   display: inline-block;
   border-bottom: black solid .2rem;
 }
+
 .project img {
   margin-top: auto;
   height: 3rem;
 }
+
 .topBox {
   padding-left: .5rem;
   padding-right: 1rem;
   height: 75%;
 }
+
 .bottomBox {
   height: auto;
   padding-left: 0rem;
   padding-right: 1rem;
 }
+
 .bottomBox a {
   vertical-align: middle;
 }
+
 .project a img, .project a p {
   padding: .5rem;
   filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(52deg) brightness(106%) contrast(101%);
 }
+
 .project a img:hover, .project a p:hover {
   filter: invert(66%) sepia(0%) saturate(3964%) hue-rotate(99deg) brightness(100%) contrast(105%);
 }
+
 .incomplete {
   color: red;
 }
+
 .WIP {
   color: yellow;
 }
+
 .complete {
   color: green;
 }
+
 .footer {
   position: fixed;
   bottom: 0;
   left: 0;
 }
+
 .socials {
   margin-left: 1rem;
   width: 0px;
 }
-.socials td{
-  padding:5px;
-  text-align: left;
-  display: inline;
-  float:left;
-}
+
 .socials img {
   height: 2rem;
   margin-bottom: 1rem;
   filter: invert(29%) sepia(20%) saturate(1786%) hue-rotate(314deg) brightness(101%) contrast(110%);
   transition: .2s;
 }
+
 .socials img:hover {
   opacity: .5;
 }
+
 #vertLine {
   border-right: 1px solid rgb(156, 49, 45);
   margin-left: 1rem;
@@ -253,71 +295,90 @@ a {
 }
 
 @media screen and (max-width: 1200px) {
+
+  .navBar {
+    flex-direction: column;
+  }
+
+  .navElement {
+    width: 100vw;
+  }
+
   .projectList {
     width: 95%;
   }
+
   .sideimg {
     position: relative;
   }
+
   body {
     background-size: auto 100%;
   }
+
   .foreground {
     width: 100%;
-    padding-left: 2rem; /* centered objects will need to remove 1.5 of this to center */
+    padding-left: 2rem;
+    /* centered objects will need to remove 1.5 of this to center */
     padding-right: .5rem;
     padding-bottom: 36px;
   }
+
   .centeredForeground {
-    margin-left: -1.5rem; /* remove .foreground excess margin */
+    margin-left: -1.5rem;
+    /* remove .foreground excess margin */
   }
+
   .col {
     width: 90%;
     margin-bottom: 3rem;
   }
+
   #aboutMe {
     float: none;
     display: block;
     width: 90%;
   }
+
   #skills {
     float: none;
     margin-right: auto;
     display: block;
     width: 90%;
   }
+
   .footer {
     position: relative;
     width: 100%;
     display: inline-block;
     background-color: rgb(156, 49, 45);
   }
+
   .socials {
-    display:block;
+    display: flex;
+    justify-content: space-around;
     padding-top: .5rem;
     padding-bottom: .5rem;
     margin-right: auto;
     margin-left: auto;
-    table-layout: fixed;
-    width: 100%;
+    width: 400px;
   }
-  .socials tr{
-    display: block;
-  }
-  .socials td{
+
+  .socials * {
     display: inline;
     text-align: center;
-    width: calc(100% / 6);
     padding-left: 0px;
     padding-right: 0px;
   }
+
   .socials img {
     height: 2rem;
     margin-bottom: 0px;
     filter: none;
   }
+
   #vertLine {
-    visibility: collapse;
+    display: none;
     height: 0px;
   }
 }

src/componets/Nav.js

@@ -6,15 +6,15 @@ export default function Nav(props){
         items = (
             <>
                 {items}
-                <td className='navElement'>{props.children[i]}</td>
+                <div className='navElement'>{props.children[i]}</div>
             </>
         )
     }
     return (
         <div className='navControl'>
-            <table className='navBar'>
+            <div className='navBar'>
                 {items}
-            </table>
+            </div>
         </div>
     )
 }

src/componets/Socials.js

@@ -7,15 +7,12 @@ import email from '../assets/email.svg'
 
 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>
+        <div className='socials'>
+                <a href='https://github.com/asimonson1125'><img alt='Github' src={github} /></a>
+                <a href='https://www.instagram.com/an_a.simonson/'><img alt='Instagram' src={instagram} /></a>
+                <a href='https://www.linkedin.com/in/simonsonandrew/'><img alt='LinkedIn' src={linkedin} /></a>
+                <a href='mailto:asimonson1125@gmail.com'><img alt='E-mail' src={email} /></a>
+                <div id='vertLine'></div>
+        </div>
     )
 }

src/pages/Home.js

@@ -3,7 +3,7 @@ import React from 'react';
 export default function Home() {
     return (
         <div id='home'>
-            <div class='centerContent' data-aos="fade-up">
+            <div className='centerContent' data-aos="fade-up">
                 <div id='HomeContent'>
                 <h1>Andrew Simonson</h1>
                 <h3>Computer Science student at Rochester Institute of Technology</h3>

src/pages/Projects.js

@@ -7,7 +7,7 @@ export default function Projects(){
     return(
       <div className='foreground'>
         <div data-aos='fade-up'>
-        <h2 class='concentratedHead'>Projects</h2>
+        <h2 className='concentratedHead'>Projects</h2>
           <p>Project status is indicated by the color of the project card:<br /><span className='complete'>⬤</span> - Complete<br />
             <span className='WIP'>⬤</span> - Work In Progress<br /><span className='incomplete'>⬤</span> - Incomplete
           </p>