restyle about page - mobile multi-column realign

This commit is contained in:
2023-02-10 10:52:43 -06:00
parent fb54c81f19
commit 891371e03a
2 changed files with 93 additions and 72 deletions

View File

@@ -1,7 +1,8 @@
{% block content %}
<div class="foreground">
<div class="col">
<div id="aboutMe" data-aos="fade-up">
<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
@@ -36,20 +37,17 @@
multifaceted purpose present in everything around us.
</p> -->
</div>
</div>
<div class="col">
<div id="skills" data-aos="fade-up">
<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", "Angular", "Flask", "Jinja", "DOM Scraping",
"Google API", "React", "Node.js", "ArcGIS", ]) }}
</Skills>
{% 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') }}
{% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
}}
</div>
</div>
<!-- {/* <div data-aos="fade-up" class="elementBlock">
@@ -82,50 +80,66 @@
]}
</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 class="col">
<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>
{% endblock %}