{% block content %}
<div class="foreground">
  <div class="relative">
  <div id="aboutGrid">
    <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
        <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.
      </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 haphazardly expanding my list of
        unusable, yet bizzarely wise quotes.
      </p>
      <!-- <p>
        My goal is to strive to make the biggest positive impact on the
        world that I can. I'm here to improve and optimize what we have so
        that we can spend more time on the things that matter.
      </p>
      <p>
        I also value the ability to understand the world at large. That
        awareness is what grounds a person into reality and gives their
        place in the world value. My favorite part of learning about
        grographies and cultures is when I can justify to myself the hidden
        causality to historic events, which presents an inside look into how
        we can act in the present.
      </p>
      <p>
        It is my belief that being able to channel each distinct creative
        interest into a final product is vital. With this philosophy that
        promotes dedication and enables an in-depth understanding, I can
        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">
      <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 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>
{% endblock %}