just a whole lot of things

src/static/css/App.css

@@ -354,6 +354,14 @@ a {
   max-width: 100%;
 }
 
+#aboutCards {
+  justify-content: left;
+}
+
+#aboutCards > * {
+  margin: .25em;
+}
+
 .spaceBetween {
   justify-content: space-between;
 }
@@ -580,6 +588,12 @@ a {
   left: 0;
 }
 
+#contentStuffer {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 .socials {
   margin-left: 1rem;
   width: 0px;
@@ -656,6 +670,25 @@ a {
   background-size: cover;
 }
 
+#desktopSpacer {
+  height: min(20em, 30vh);
+}
+
+.homeSubContent {
+  background-color: rgb(24, 24, 24, .85);
+  padding: 0 8em;
+}
+
+#homeProjects {
+  padding: 1em;
+}
+
+.homeProject {
+  width: 20em;
+  height:5em;
+
+}
+
 .heightBox {
   height: 100%;
   display: flex;
@@ -666,9 +699,6 @@ a {
 .chess {
   max-width: 300px;
   border: none;
-  overflow: scroll;
-  /* transform: scale(.8);
-  float: right; */
 }
 
 #chessProfile {
@@ -963,6 +993,22 @@ a {
     border-bottom: solid 3px rgb(156, 49, 45, .4);
   }
 
+  .footer {
+    position: unset;
+  }
+
+  #footerSpacer {
+    flex-grow: 1;
+  }
+
+  #aboutCards {
+    flex-direction: column;
+  }
+  
+  #aboutCards > * {
+    margin: .25em auto;
+  }  
+
   .header h1 {
     font-size: 1.5rem;
   }
@@ -1009,6 +1055,10 @@ a {
     padding-top: 5em;
   }
 
+  .homeSubContent {
+    padding: 0;
+  }
+
   .onRight {
     margin: unset;
     margin-top: 3rem;

src/static/js/responsive.js

@@ -1,35 +1,8 @@
-window.onload = function () {
-  onLoaded();
-};
-function onLoaded() {
-  window.onresize = function () {
-    resizer();
-  };
-  resizer();
-}
-
-function resizer() {
-  const e = document.querySelector(".navControl");
-  if (window.innerWidth > 1400) {
-    // desktop view
-    e.style.maxHeight = `${e.scrollHeight + 10}px`;
-  } else {
-    // mobile view
-    document.querySelector(".header").style.borderBottomWidth = "3px";
-    e.style.maxHeight = "0px";
-    document.querySelectorAll(".navElement *").forEach((x) => {
-      x.style.paddingTop = ".3rem";
-      x.style.paddingBottom = ".3rem";
-      x.style.fontSize = "1rem";
-    });
-  }
-}
-
-function toggleMenu() {
+function toggleMenu(collapse=false) {
   if (window.innerWidth < 1400) {
     const e = document.querySelector(".navControl");
     const bar = document.querySelector(".header");
-    if (e.style.maxHeight === "0px") {
+    if (e.style.maxHeight === "0px" && !collapse) {
       e.style.maxHeight = `${e.scrollHeight + 10}px`;
       bar.style.borderBottomWidth = "0px";
     } else {
@@ -39,7 +12,7 @@ function toggleMenu() {
   }
 }
 
-async function goto(location, { push = true, toggle = true } = {}) {
+async function goto(location, { push = true } = {}) {
   let a = await fetch("/api/goto/" + location, {
     credentials: "include",
     method: "GET",
@@ -56,9 +29,7 @@ async function goto(location, { push = true, toggle = true } = {}) {
   root.querySelectorAll("script").forEach((x) => {
     eval(x.innerHTML);
   });
-  if (toggle) {
-    toggleMenu();
-  }
+  toggleMenu(collapse=true);
   document.querySelector("title").textContent = metadata["title"];
   if (push) {
     history.pushState(null, null, metadata["canonical"]);

src/templates/about.html

@@ -2,99 +2,112 @@
 <div class="foreground"></div>
 <div class="foregroundContent">
   <div class="relative">
-      <div id="aboutMe" data-aos="fade-up">
-        <h2 class="concentratedHead">About Me</h2>
-        <p>
-          I'm Andrew Simonson, a senior undergrad at
-          <strong>Rochester Institute of Technology </strong>
-          in the <b>Computer Science BS</b> program (international relations minor), pursuing a career in data
-          science with a focus on predictive analytics.
-        </p>
-        <p>
-          <br />
-          Ominous positivity is kinda my thing.
-        </p>
+    <div id="aboutMe" data-aos="fade-up">
+      <h2 class="concentratedHead">About Me</h2>
+      <p>
+        I'm Andrew Simonson<!--, CEO of the anti-thermodynamics syndicate.-->, a
+        senior undergrad at
+        <strong>Rochester Institute of Technology </strong>
+        in the <b>Computer Science BS</b> program (international relations
+        minor), pursuing a career in data science.
         <br />
-          <div class="chess">
-            {% from 'partials/chess.html' import chess %} {{
-            chess('asimonson1125') }}
-          </div>
-          <br />
-          {% from 'partials/bookshelf.html' import bookshelf %} {{
-          bookshelf(var.books) }}
-          <br />
-          <div class="pointer" onClick="goto('duck')">
-            <img
-                alt="duck spinning"
-                src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
-                class="smallImg"
+        <br />
+        Data without sound methodology is at best meaningless and at worst
+        counterproductive and costly.
+        <br />
+        My mission is to bring logical transparency and literal deductions back
+        into digital analysis so we can learn about the world through computing,
+        rather than letting computers make decisions for the world we think we
+        know.
+        <br />
+        <br />
+        We as data scientists shouldn't just be building heuristics. We should
+        be making discoveries and building new knowledge.
+        <br />
+        Bring the scientific method to AI.
+      </p>
+    </div>
+    <div data-aos="fade-up">
+      <div id="skills">
+        <h2 id="skillstag">Skills</h2>
+        {% from 'partials/skills.html' import skills %} {{
+        skills(var['skillList']) }}
+      </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>
+              <div class="slider round"></div>
+              <strong>Pinned</strong>
+            </label>
           </div>
-      <div data-aos="fade-up">
-        <div id="skills">
-          <h2 id="skillstag">Skills</h2>
-          {% from 'partials/skills.html' import skills %} {{ skills(var['skillList']) }}
-        </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"
+          <div class="flex start">
+            <label class="switch" htmlFor="education">
+              <input
+                type="checkbox"
+                id="education"
                 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 class="slider round"></div>
+              <strong>Education</strong>
+            </label>
           </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 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>
-          <script>
-            toggleCheckbox("up");
-          </script>
         </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 id="aboutCards" class="flex">
+    <div class="chess">
+      {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125') }}
+    </div>
+    <br />
+    {% from 'partials/bookshelf.html' import bookshelf %} {{
+    bookshelf(var.books) }}
+    <br />
+    <div class="pointer" onClick="goto('duck')">
+      <img
+        alt="duck spinning"
+        src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
+        class="smallImg"
+      />
     </div>
   </div>
 </div>

src/templates/duck.html

@@ -1,11 +1,12 @@
 {% block content %}
 <div class="foreground"></div>
 <div class="foregroundContent">
-  <h2>What the duck?</h2>
+  <h1>What the duck?</h1>
   <img
     alt="mega spinney duck"
     src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
     style="max-width: calc(100% - 2em);"
   />
 </div>
+<!-- BONUS DUCKS! -->
 {% endblock %}

src/templates/header.html

@@ -50,10 +50,11 @@
       rel="stylesheet"
       href="{{ url_for('static', filename='css/checkbox.css') }}"
     />
+    <!--
     <link
       rel="stylesheet"
       href="{{ url_for('static', filename='css/head.css') }}"
-    />
+    /></!-->
 
     <link rel="canonical" href="https://asimonson.com{{ var['canonical'] }}" />
     <script src="{{ url_for('static', filename='js/checkbox.js') }}"></script>
@@ -65,43 +66,44 @@
   <body onpopstate="backButton()">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <iframe src="/hotspots?legend=false" title="HotspotsRIT" id="map"></iframe>
-    <div class="header">
-      <div id="name-container" onclick="goto('home', {toggle:false})">
-        <div class="glitch">
+    <div id="contentStuffer">
+      <div class="header">
+        <div id="name-container" onclick="goto('home')">
           <div class="line name">
             <span class="textGrad">Andrew Simonson</span>
           </div>
         </div>
-      </div>
 
-      <img
-        src="{{ url_for('static', filename='icons/menu.svg')}}"
-        alt="menu"
-        id="menu"
-        onClick="toggleMenu()"
-      />
-      <div class="navControl">
-        <div class="navBar">
-          <div onClick="goto('home')" class="navElement">
-            <p>Home</p>
-          </div>
-          <a href="Resume.pdf" target="_blank" class="navElement">
-            <span>Resume</span>
-          </a>
-          <div onclick="goto('projects')" class="navElement">
-            <p>Projects</p>
-          </div>
-          <!-- <a href="/activities">Activities</a> -->
-          <div onclick="goto('about')" class="navElement">
-            <p>About Me</p>
+        <img
+          src="{{ url_for('static', filename='icons/menu.svg')}}"
+          alt="menu"
+          id="menu"
+          onClick="toggleMenu()"
+        />
+        <div class="navControl">
+          <div class="navBar">
+            <div onClick="goto('home')" class="navElement">
+              <p>Home</p>
+            </div>
+            <a href="Resume.pdf" target="_blank" class="navElement">
+              <span>Resume</span>
+            </a>
+            <div onclick="goto('projects')" class="navElement">
+              <p>Projects</p>
+            </div>
+            <!-- <a href="/activities">Activities</a> -->
+            <div onclick="goto('about')" class="navElement">
+              <p>About Me</p>
+            </div>
           </div>
         </div>
       </div>
+      {% endblock %} {% block content%}
+      <div id="root">{% include var['template'] %}</div>
+      {% endblock %} {% block footer %}
+      <div id="footerSpacer"></div>
+      <div class="footer">{% include 'partials/socials.html' %}</div>
+      {% endblock %}
     </div>
-    {% endblock %} {% block content%}
-    <div id="root">{% include var['template'] %}</div>
-    {% endblock %} {% block footer %}
-    <div class="footer">{% include 'partials/socials.html' %}</div>
-    {% endblock %}
   </body>
 </html>

src/templates/home.html

@@ -14,5 +14,9 @@
 <div class="relative">
   <div id="nametag" class="flex" data-aos="fade-up">{{ nameplate() }}</div>
 </div>
-<INSERT SMALL BANNER HERE FOR PROJECT IMAGECARD CAROUSEL>
-{% endblock %}
+<!--<INSERT SMALL BANNER HERE FOR PROJECT IMAGECARD CAROUSEL>-->
+<div id="desktopSpacer"></div>
+<div class="homeSubContent">
+  <h1>About Me</h1>
+</div>
+  {% endblock %}