andrew/asimonson1125.github.io
1
0
Fork 0
mirror of https://github.com/asimonson1125/asimonson1125.github.io.git synced 2026-02-24 21:09:49 -06:00
Code Issues Packages Projects Releases Wiki Activity

restyle about page - mobile multi-column realign

Browse Source
This commit is contained in:
Andrew Simonson
2023-02-10 10:52:43 -06:00
parent fb54c81f19
commit 891371e03a
2 changed files with 93 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/static/css/App.css
View File

@@ -191,7 +191,7 @@ a {
.foreground {
position: relative;
padding-top: 7rem;
padding-top: 6rem;
padding-left: 8rem;
width: calc(100%-8rem);
min-height: calc(100vh - 8rem);
@@ -270,6 +270,10 @@ a {
justify-content: left;
}
.relative {
position: relative;
}
.onRight {
position: absolute;
right: 0;
@@ -311,10 +315,20 @@ a {
max-height: min(30rem, 100%);
}
/* #aboutGrid{
display: grid;
} */
.col {
float: left;
margin-right: 3rem;
width: calc(50% - 3rem);
margin-bottom: 3em;
}
.rightCol {
position: absolute;
right: 0;
top: 0;
margin-right: 3em;
}
.boxedImg {
@@ -868,6 +882,7 @@ a {
/* centered objects will need to remove 1.5 of this to center */
padding-right: .5rem;
padding-bottom: 36px;
padding-top: 3em;
}
.homeground {
@@ -894,19 +909,11 @@ a {
margin-bottom: 3rem;
}
#aboutMe {
float: none;
display: block;
width: 90%;
.rightCol {
position: inherit;
margin-right: inherit;
}
#skills {
float: none;
margin-right: auto;
display: block;
width: 90%;
}
.footer {
position: relative;
width: 100%;

128
src/templates/about.html
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 %}