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;
-  right: 0;
-  top: 0;
+  float: left;
   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,18 +36,79 @@
         take pride in each of my projects, bridging the gap between the the
         multifaceted purpose present in everything around us.
       </p> -->
+      <div class="chess">
+        {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
+        }}
+      </div>
     </div>
-    <div id="skills" class="col rightCol" data-aos="fade-up">
+    <div class="col rightCol" data-aos="fade-up">
+      <div id="skills">
       <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
+      "Kubernetes", "Openshift", "Nginx", "Angular", "Flask", "Jinja", "Web
       Scraping", "Google API", "React", "Node.js", "ArcGIS", ]) }}
-      <div class="chess">
-        {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
-        }}
+    </div>
+      <div id="timeline">
+        <h2>Timeline</h2>
+        <div class="checkbox-wrapper">
+          <div class="flex start">
+            <label class="switch" htmlFor="pinned">
+              <input
+                type="checkbox"
+                id="pinned"
+                onClick='toggleCheckbox("up")'
+                checked
+              />
+              <div class="slider round"></div>
+              <strong>Pinned</strong>
+            </label>
+          </div>
+          <div class="flex start">
+            <label class="switch" htmlFor="education">
+              <input
+                type="checkbox"
+                id="education"
+                onClick="toggleCheckbox('up')"
+              />
+              <div class="slider round"></div>
+              <strong>Education</strong>
+            </label>
+          </div>
+          <div class="flex start">
+            <label
+              class="switch"
+              htmlFor="experience"
+              onClick="toggleCheckbox('up')"
+            >
+              <input type="checkbox" id="experience" />
+              <div class="slider round"></div>
+              <strong>Work Experience</strong>
+            </label>
+          </div>
+          <div class="flex start">
+            <label
+              class="switch"
+              htmlFor="technical"
+              onClick="toggleCheckbox('up')"
+            >
+              <input type="checkbox" id="technical" />
+              <div class="slider round"></div>
+              <strong>Technical</strong>
+            </label>
+          </div>
+        </div>
+        <div class="timeline checkbox-client">
+          {% from 'partials/timeline.html' import timeitem %} {% for i in
+          var["timeline"] %} {{ timeitem(i, var["timeline"][i]["classes"],
+          var["timeline"][i]["date"], var["timeline"][i]["content"])}} {% endfor
+          %}
+        </div>
+        <script>
+          toggleCheckbox("up");
+        </script>
       </div>
     </div>
     <!-- {/* <div data-aos="fade-up" class="elementBlock">
@@ -80,65 +141,6 @@
         ]}
       </MyCarousel>
     </div> */} -->
-    <div id="timeline" class="col">
-      <h2>Timeline</h2>
-      <div class="checkbox-wrapper">
-        <div class="flex start">
-          <label class="switch" htmlFor="pinned">
-            <input
-              type="checkbox"
-              id="pinned"
-              onClick='toggleCheckbox("up")'
-              checked
-            />
-            <div class="slider round"></div>
-            <strong>Pinned</strong>
-          </label>
-        </div>
-        <div class="flex start">
-          <label class="switch" htmlFor="education">
-            <input
-              type="checkbox"
-              id="education"
-              onClick="toggleCheckbox('up')"
-            />
-            <div class="slider round"></div>
-            <strong>Education</strong>
-          </label>
-        </div>
-        <div class="flex start">
-          <label
-            class="switch"
-            htmlFor="experience"
-            onClick="toggleCheckbox('up')"
-          >
-            <input type="checkbox" id="experience" />
-            <div class="slider round"></div>
-            <strong>Work Experience</strong>
-          </label>
-        </div>
-        <div class="flex start">
-          <label
-            class="switch"
-            htmlFor="technical"
-            onClick="toggleCheckbox('up')"
-          >
-            <input type="checkbox" id="technical" />
-            <div class="slider round"></div>
-            <strong>Technical</strong>
-          </label>
-        </div>
-      </div>
-      <div class="timeline checkbox-client">
-        {% from 'partials/timeline.html' import timeitem %} {% for i in
-        var["timeline"] %} {{ timeitem(i, var["timeline"][i]["classes"],
-        var["timeline"][i]["date"], var["timeline"][i]["content"])}} {% endfor
-        %}
-      </div>
-      <script>
-        toggleCheckbox("up");
-      </script>
-    </div>
   </div>
   </div>
 </div>