About Me page to grid

src/static/css/App.css

@@ -323,12 +323,11 @@ a {
 .col {
   width: calc(50% - 3rem);
   margin-bottom: 3em;
+  float: left; 
 }
 
 .rightCol {
-  position: absolute;
+  float: left;
-  right: 0;
-  top: 0;
   margin-right: 3em;
 }
 

src/templates/about.html

@@ -5,7 +5,7 @@
     <div id="aboutMe" class="col" data-aos="fade-up">
       <h2 class="concentratedHead">About Me</h2>
       <p>
-        I'm Andrew Simonson, a second year (third year standing) student at
+        I'm Andrew Simonson, a fourth year student at
         <strong>Rochester Institute of Technology </strong>
         in the <b>Computer Science</b> BS program, pursuing a career in data
         science with a focus on predictive analytics.
@@ -36,51 +36,22 @@
         take pride in each of my projects, bridging the gap between the the
         multifaceted purpose present in everything around us.
       </p> -->
-    </div>
-    <div id="skills" class="col rightCol" data-aos="fade-up">
-      <h2>Skills</h2>
-      {% from 'partials/skills.html' import skills %} {{ skills([ "Python",
-      "JavaScript", "Java", "C", "C++", "R", "MIPS Assembly", "Processing",
-      "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy", "HTML", "CSS",
-      "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux", "OKD4",
-      "Kubernetes", "Openshift", "Nginx", "Angular", "Flask", "Jinja", "DOM
-      Scraping", "Google API", "React", "Node.js", "ArcGIS", ]) }}
       <div class="chess">
         {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
         }}
       </div>
     </div>
-    <!-- {/* <div data-aos="fade-up" class="elementBlock">
+    <div class="col rightCol" data-aos="fade-up">
-      <h2>Extracirricular Awards</h2>
+      <div id="skills">
-      <MyCarousel class="carousel" data-aos="fade-up">
+      <h2>Skills</h2>
-        {[
+      {% from 'partials/skills.html' import skills %} {{ skills([ "Python",
-          {
+      "JavaScript", "Java", "C", "C++", "R", "MIPS Assembly", "Processing",
-            original: img4,
+      "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy", "HTML", "CSS",
-            description:
+      "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux", "OKD4",
-              "High School VEX Robotics President and Team Leader",
+      "Kubernetes", "Openshift", "Nginx", "Angular", "Flask", "Jinja", "Web
-          },
+      Scraping", "Google API", "React", "Node.js", "ArcGIS", ]) }}
-          {
+    </div>
-            original: img5,
+      <div id="timeline">
-            description:
-              "We the People Civics Competition District Champions",
-          },
-          {
-            original: img6,
-            description: "We The People State Civics Competition Champions",
-          },
-          {
-            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 id="timeline" class="col">
         <h2>Timeline</h2>
         <div class="checkbox-wrapper">
           <div class="flex start">
@@ -140,6 +111,37 @@
         </script>
       </div>
     </div>
+    <!-- {/* <div data-aos="fade-up" class="elementBlock">
+      <h2>Extracirricular Awards</h2>
+      <MyCarousel class="carousel" data-aos="fade-up">
+        {[
+          {
+            original: img4,
+            description:
+              "High School VEX Robotics President and Team Leader",
+          },
+          {
+            original: img5,
+            description:
+              "We the People Civics Competition District Champions",
+          },
+          {
+            original: img6,
+            description: "We The People State Civics Competition Champions",
+          },
+          {
+            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>
   </div>
 </div>
 {% endblock %}