Convert React pages to Flask

oorah.
This commit is contained in:
2023-01-28 12:26:44 -06:00
parent bb6e81a77c
commit c82606319c
13 changed files with 460 additions and 23 deletions

131
src/templates/about.html Normal file
View File

@@ -0,0 +1,131 @@
{% extends "header.html" %} {% block content %}
<div class="foreground">
<div class="col">
<div id="aboutMe" 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>
<div class="col">
<div id="skills" data-aos="fade-up">
<h2>Skills</h2>
{% from 'partials/skills.html' import skills %}
{{ skills([ "Python", "JavaScript", "Java", "C", "C++", "MIPS Assembly",
"Processing", "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy",
"HTML", "CSS", "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux",
"OKD4", "Kubernetes", "Angular", "Flask", "Jinja", "DOM Scraping",
"Google API", "React", "Node.js", "ArcGIS", ]) }}
</Skills>
<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>
<div class="col">
<div class="checkbox-wrapper">
<div class="flex start">
<label class="switch" htmlFor="pinned">
<input
type="checkbox"
id="pinned"
onClick='toggle("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="toggle('up')" />
<div class="slider round"></div>
<strong>Education</strong>
</label>
</div>
<div class="flex start">
<label class="switch" htmlFor="experience" onClick="toggle('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="toggle('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 timeline %}
{{ timeitem(i, timeline[i]["classes"], timeline[i]["date"], timeline[i]["content"])}}
{% endfor %}
</div>
<script>toggle('up')</script>
</div>
</div>
{% endblock %}

View File

@@ -7,19 +7,23 @@
<meta name="theme-color" content="#000000" />
<meta name="description" content="{{ description }}" />
<meta property="og:title" content="Andrew Simonson" />
<meta name="og:description" content="{{ description }}" />
<!-- <meta property="og:type" content="article" /> -->
<meta
property="og:description"
content="Digital Portfolio - Andrew Simonson"
/>
<meta
property="og:image"
content="{{ url_for('static', filename='photos/sun.png') }}"
/>
<meta property="og:url" content="https://asimonson.com" />
<meta property="twitter:title" content="Andrew Simonson" />
<meta name="twitter:description" content="{{ description }}" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:site_name" content="Andrew Simonson - Portfolio" />
<meta
property="twitter:image"
content="{{ url_for('static', filename='photos/sun.png') }}"
/>
<meta name="twitter:image:alt" content="some example picture idk" />
<meta name="twitter:site" content="@asimonson1125" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
@@ -49,7 +53,7 @@
/>
<link rel="canonical" href="https://asimonson.com/{{ canonical }}" />
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
<script src="{{ url_for('static', filename='js/idler.js') }}"></script>
<script src="{{ url_for('static', filename='js/checkbox.js') }}"></script>
<script src="{{ url_for('static', filename='js/responsive.js') }}"></script>
@@ -59,7 +63,6 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- https://jinja.palletsprojects.com/en/3.1.x/templates/#include -->
<div class="App">
<div class="header">
@@ -98,11 +101,11 @@
</div>
</div>
</div>
<div class="footer">
<!-- <Socials /> -->
</div>
</div>
</div>
<div id="root">{% block content %}{% endblock %}</div>
<div class="footer">
{% include 'partials/socials.html' %}
</div>
</body>
</html>

View File

@@ -0,0 +1,33 @@
{% macro project(title, classes, status, bgi, content, links) %}
<div class="project {{ classes }}" data-aos="fade-up">
<div class="vFlex">
<div class="projTitle">
<h3>{{ title }}</h3>
<p class="{{ status }} tab"></p>
</div>
<div class="projBody vFlex spaceBetween">
{% if bgi|length > 0 %}
{% set path = url_for('static', filename='photos/' + bgi) %}
<div style="background-image: url('{{path}}');" class="bgi"></div>
{% endif %}
<div class="topBox">
<p class="backedBody">{{ content }}</p>
</div>
<div class="bottomBox">
{% for i in links %} {% set src = 'icons/' + i[0] + '.svg' %}
<a href="{{i[1]}}">
<img src="{{ url_for('static', filename=src) }}" alt="{{i[0]}}" />
</a>
{% endfor %} {% if links|length == 0 %}
<div class="placeholder">
<img
alt="no links!"
src="{{ url_for('static', filename='photos/placeholder.png') }}"
/>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endmacro %}

View File

@@ -0,0 +1,5 @@
{% macro skills(skills) %}
<ul class='skills'>
{% for i in skills %}<li class='skill'>{{i}}</li>{% endfor %}
</ul>
{% endmacro %}

View File

@@ -0,0 +1,7 @@
<div class='socials'>
<a href='https://github.com/asimonson1125'><img alt='Github' src="{{ url_for('static', filename='icons/github.svg') }}" /></a>
<a href='https://www.instagram.com/an_a.simonson/'><img alt='Instagram' src="{{ url_for('static', filename='icons/instagram.svg') }}" /></a>
<a href='https://www.linkedin.com/in/simonsonandrew/'><img alt='LinkedIn' src="{{ url_for('static', filename='icons/linkedin.svg') }}" /></a>
<a href='mailto:asimonson1125@gmail.com'><img alt='E-mail' src="{{ url_for('static', filename='icons/email.svg') }}" /></a>
<div id='vertLine'></div>
</div>

View File

@@ -0,0 +1,13 @@
{% macro timeitem(title, classes, date, deets) %}
<div class="timeitem {{classes}}">
<p class="datetext">{{date}}</p>
<div class="timeline-item">
<h2>{{title}}</h2>
<div class="timeline-deets">
<p>
{{deets}}
</p>
</div>
</div>
</div>
{% endmacro %}

View File

@@ -0,0 +1,46 @@
{% extends "header.html" %} {% block content %}
<div class="foreground">
<div data-aos="fade-up">
<h2 class="concentratedHead">Projects</h2>
<p>
Project status is indicated by the color of the project card:
<br />
<span class="complete"></span> - Complete
<br />
<span class="WIP"></span> - Work In Progress
<br />
<span class="incomplete"></span> - Incomplete
</p>
</div>
<div class="checkbox-wrapper">
<div class="flex start">
<label class="switch" htmlFor="pinned">
<input type="checkbox" id="pinned" onClick="toggle('')" checked/>
<div class="slider round"></div>
<strong>Pinned</strong>
</label>
</div>
<div class="flex start">
<label class="switch" htmlFor="programming">
<input type="checkbox" id="programming" onClick="toggle('')" />
<div class="slider round"></div>
<strong>Programming</strong>
</label>
</div>
<div class="flex start">
<label class="switch" htmlFor="geospacial" onClick="toggle('')">
<input type="checkbox" id="geospacial" />
<div class="slider round"></div>
<strong>Geospacial</strong>
</label>
</div>
</div>
<div class="projectList centeredForeground checkbox-client">
{% from 'partials/project.html' import project %}
{% for i in projects %}
{{ project(i, projects[i]["classes"], projects[i]["status"], projects[i]["bgi"], projects[i]["content"], projects[i]["links"]) }}
{% endfor %}
</div>
</div>
<script>toggle('')</script>
{% endblock %}