Convert React pages to Flask

oorah.

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "python.formatting.provider": "black"
+}

src/app.py

@@ -1,19 +1,50 @@
 import flask
+from flask_minify import Minify
+import json
+
+proj = json.load(open('./static/json/projects.json', 'r'))
+timeline = json.load(open('./static/json/timeline.json', 'r'))
 
 app = flask.Flask(__name__)
+Minify(app=app, html=True, js=True, cssless=True)
 
-@app.route('/')
+
+@app.route("/")
 def home():
-    return flask.render_template('home.html', title='Andrew Simonson - Portfolio Home', description="Andrew Simonson's Digital portfolio home", canonical='')
+    return flask.render_template(
+        "home.html",
+        title="Andrew Simonson - Portfolio Home",
+        description="Andrew Simonson's Digital portfolio home",
+        canonical="",
+    )
 
-@app.route('/about')
+
+@app.route("/about")
 def about():
-    return flask.render_template('about.html', title='Andrew Simonson - About Me', description="About Andrew Simonson", canonical='about')
+    return flask.render_template(
+        "about.html",
+        timeline=timeline,
+        title="Andrew Simonson - About Me",
+        description="About Andrew Simonson",
+        canonical="about",
+    )
 
-@app.route('/resume')
+
-@app.route('/Resume.pdf')
+@app.route("/projects")
+def projects():
+    return flask.render_template(
+        "projects.html",
+        projects=proj,
+        title="Andrew Simonson - Projects",
+        description="Recent projects by Andrew Simonson on his lovely portfolio website :)",
+        canonical="projects",
+    )
+
+
+@app.route("/resume")
+@app.route("/Resume.pdf")
 def resume():
-    return flask.send_file('./static/resume.pdf')
+    return flask.send_file("./static/Resume.pdf")
 
 
 @app.errorhandler(Exception)
@@ -23,14 +54,25 @@ def page404(e):
     try:
         message = e.length
     finally:
-        return flask.render_template('error.html', error=eCode, message=message, title=f'{eCode} - Simonson Portfolio'), eCode
+        return (
+            flask.render_template(
+                "error.html",
+                error=eCode,
+                message=message,
+                title=f"{eCode} - Simonson Portfolio",
+            ),
+            eCode,
+        )
 
-@app.route('/sitemap.xml')
+
-@app.route('/robots.txt')
+@app.route("/sitemap.xml")
+@app.route("/robots.txt")
 def static_from_root():
     return flask.send_from_directory(app.static_folder, flask.request.path[1:])
 
-if __name__ == '__main__':
+
+if __name__ == "__main__":
     import sass
-    sass.compile(dirname=('static/scss', 'static/css'), output_style='compressed')
+
-    app.run()
+    sass.compile(dirname=("static/scss", "static/css"), output_style="compressed")
+    app.run(debug=True)

src/static/css/head.css

@@ -1 +1 @@
-.line:not(:first-child){position:absolute;top:0;left:0}.line:nth-child(1){animation:clip 6000ms -600ms linear infinite,glitch1 2500ms -229ms linear infinite}@keyframes glitch1{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-2px);color:#4E9A26}98%{transform:translateX(-2px);color:#AC1212}99%{transform:translateX(-3px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(2){animation:clip 6000ms -1200ms linear infinite,glitch2 2500ms -409ms linear infinite}@keyframes glitch2{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(3px);color:#4E9A26}98%{transform:translateX(0px);color:#AC1212}99%{transform:translateX(-3px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(3){animation:clip 6000ms -1800ms linear infinite,glitch3 2500ms -39ms linear infinite}@keyframes glitch3{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(1px);color:#4E9A26}98%{transform:translateX(5px);color:#AC1212}99%{transform:translateX(5px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(4){animation:clip 6000ms -2400ms linear infinite,glitch4 2500ms -854ms linear infinite}@keyframes glitch4{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-2px);color:#4E9A26}98%{transform:translateX(2px);color:#AC1212}99%{transform:translateX(2px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(5){animation:clip 6000ms -3000ms linear infinite,glitch5 2500ms -718ms linear infinite}@keyframes glitch5{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-3px);color:#4E9A26}98%{transform:translateX(4px);color:#AC1212}99%{transform:translateX(0px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(6){animation:clip 6000ms -3600ms linear infinite,glitch6 2500ms -628ms linear infinite}@keyframes glitch6{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(2px);color:#4E9A26}98%{transform:translateX(-2px);color:#AC1212}99%{transform:translateX(1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(7){animation:clip 6000ms -4200ms linear infinite,glitch7 2500ms -227ms linear infinite}@keyframes glitch7{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(5px);color:#AC1212}99%{transform:translateX(0px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(8){animation:clip 6000ms -4800ms linear infinite,glitch8 2500ms -464ms linear infinite}@keyframes glitch8{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-3px);color:#4E9A26}98%{transform:translateX(4px);color:#AC1212}99%{transform:translateX(5px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(9){animation:clip 6000ms -5400ms linear infinite,glitch9 2500ms -567ms linear infinite}@keyframes glitch9{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(-2px);color:#AC1212}99%{transform:translateX(-4px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(10){animation:clip 6000ms -6000ms linear infinite,glitch10 2500ms -876ms linear infinite}@keyframes glitch10{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-1px);color:#4E9A26}98%{transform:translateX(5px);color:#AC1212}99%{transform:translateX(-4px);color:#fff}100%{transform:translateX(0)}}@keyframes clip{0%{clip-path:polygon(0 100%, 100% 100%, 100% 120%, 0 120%)}100%{clip-path:polygon(0 -20%, 100% -20%, 100% 0%, 0 0)}}
+.line:not(:first-child){position:absolute;top:0;left:0}.line:nth-child(1){animation:clip 6000ms -600ms linear infinite,glitch1 2500ms -433ms linear infinite}@keyframes glitch1{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-1px);color:#4E9A26}98%{transform:translateX(4px);color:#AC1212}99%{transform:translateX(-1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(2){animation:clip 6000ms -1200ms linear infinite,glitch2 2500ms -234ms linear infinite}@keyframes glitch2{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-2px);color:#4E9A26}98%{transform:translateX(-1px);color:#AC1212}99%{transform:translateX(5px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(3){animation:clip 6000ms -1800ms linear infinite,glitch3 2500ms -189ms linear infinite}@keyframes glitch3{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-4px);color:#4E9A26}98%{transform:translateX(2px);color:#AC1212}99%{transform:translateX(-2px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(4){animation:clip 6000ms -2400ms linear infinite,glitch4 2500ms -105ms linear infinite}@keyframes glitch4{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-3px);color:#4E9A26}98%{transform:translateX(4px);color:#AC1212}99%{transform:translateX(1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(5){animation:clip 6000ms -3000ms linear infinite,glitch5 2500ms -89ms linear infinite}@keyframes glitch5{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-2px);color:#4E9A26}98%{transform:translateX(-2px);color:#AC1212}99%{transform:translateX(3px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(6){animation:clip 6000ms -3600ms linear infinite,glitch6 2500ms -936ms linear infinite}@keyframes glitch6{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(3px);color:#4E9A26}98%{transform:translateX(-4px);color:#AC1212}99%{transform:translateX(0px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(7){animation:clip 6000ms -4200ms linear infinite,glitch7 2500ms -594ms linear infinite}@keyframes glitch7{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(1px);color:#4E9A26}98%{transform:translateX(5px);color:#AC1212}99%{transform:translateX(-3px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(8){animation:clip 6000ms -4800ms linear infinite,glitch8 2500ms -464ms linear infinite}@keyframes glitch8{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-2px);color:#4E9A26}98%{transform:translateX(5px);color:#AC1212}99%{transform:translateX(1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(9){animation:clip 6000ms -5400ms linear infinite,glitch9 2500ms -520ms linear infinite}@keyframes glitch9{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(3px);color:#4E9A26}98%{transform:translateX(-2px);color:#AC1212}99%{transform:translateX(3px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(10){animation:clip 6000ms -6000ms linear infinite,glitch10 2500ms -463ms linear infinite}@keyframes glitch10{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(1px);color:#4E9A26}98%{transform:translateX(1px);color:#AC1212}99%{transform:translateX(-3px);color:#fff}100%{transform:translateX(0)}}@keyframes clip{0%{clip-path:polygon(0 100%, 100% 100%, 100% 120%, 0 120%)}100%{clip-path:polygon(0 -20%, 100% -20%, 100% 0%, 0 0)}}

src/static/json/projects.json

@@ -0,0 +1,117 @@
+{
+  "Lower 48 Alt. Energy Map": {
+    "status": "complete",
+    "classes": "pinned geospacial",
+    "bgi": "geovisF.png",
+    "content": "ArcGIS Map of the most effective alternative energy sources in the continental United States",
+    "links": [
+      [
+        "globe",
+        "https://ritarcgis.maps.arcgis.com/apps/dashboards/17d5bda01edc4a2eb6205a4922d889c9",
+        "ArcGIS"
+      ]
+    ]
+  },
+  "OccupyRIT": {
+    "status": "WIP",
+    "classes": "pinned programming",
+    "bgi": "occupyRIT.png",
+    "content": "Collects RIT Gym Occupancy data, determining busiest workout times",
+    "links": [
+      ["github", "https://github.com/asimonson1125/Occupy-RIT", "git repo"]
+    ]
+  },
+  "Chesscom Embeds": {
+    "status": "complete",
+    "classes": "programming",
+    "bgi": "chessbed.png",
+    "content": "A template for creating Chess.com user profile embeds",
+    "links": [
+      ["github", "https://github.com/asimonson1125/chesscom-embed", "git repo"]
+    ]
+  },
+  "Resume": {
+    "status": "WIP",
+    "classes": "programming",
+    "bgi": "resume.png",
+    "content": "My Resume, made in LaTeX with a custom design derived by the AltaCV template on OverLeaf",
+    "links": [
+      ["github", "https://github.com/asimonson1125/Resume", "git repo"],
+      ["globe", "https://asimonson.com/Resume.pdf/", "Resume"]
+    ]
+  },
+  "Digital Portfolio": {
+    "status": "WIP",
+    "classes": "programming",
+    "bgi": "website.png",
+    "content": "My personal portfolio website (you're on it now!)",
+    "links": [
+      ["github", "https://github.com/asimonson1125/asimonson1125.github.io", "git repo"],
+      ["globe", "https://asimonson.com", "site link"]
+    ]
+  },
+  "Slate": {
+    "status": "complete",
+    "classes": "pinned programming",
+    "bgi": "slate.png",
+    "content": "Slate is a web app designed to help event coordinators schedule events by congregating participant calendar data. Includes Computer Science House account integration",
+    "links": [
+      ["github", "https://github.com/asimonson1125/Slate", "git repo"],
+      ["globe", "https://slate.csh.rit.edu", "site link"]
+    ]
+  },
+  "HvZ Bot": {
+    "status": "complete",
+    "classes": "programming",
+    "bgi": "",
+    "content": "A Discord bot to handle role management and statistics for RIT's Humans vs. Zombies games",
+    "links": [
+      ["github", "https://github.com/asimonson1125/HvZ-bot", "git repo"]
+    ]
+  },
+  "FinTech": {
+    "status": "WIP",
+    "classes": "pinned programming",
+    "bgi": "",
+    "content": "A team derived from the RIT Financial Management Association dedicated to learning about financial management of equities using automated solutions developed by students",
+    "links": [
+      ["github", "https://github.com/LukeHorigan/Financial-Management-Assocation-", "git repo"]
+    ]
+  },
+  "Browser Trivia Bot": {
+    "status": "complete",
+    "classes": "programming",
+    "bgi": "",
+    "content": "A tampermonkey tool used to automatically answer and submit online trivia forms, which can be tailored to different site layouts.  Source currently private.",
+    "links": [
+    ]
+  },
+  "NationsGame Rolls Sim": {
+    "status": "complete",
+    "classes": "programming",
+    "bgi": "ceoOfYugo.png",
+    "content": "A simulator for the browser game, NationsGame, to analyze unit composition and predict in-game victors and unit statistics.  Unfortunately, NationsGame is now defunct. Limited screenshots of functionality.",
+    "links": [
+      ["github", "https://github.com/asimonson1125/NG-Rolls-Simulator", "git repo"]
+    ]
+  },
+  "VEXcode Button Engine": {
+    "status": "complete",
+    "classes": "programming",
+    "bgi": "vexcodeButtons.jpeg",
+    "content": "VEXcode button library + examples and template for the VEX V5 brain",
+    "links": [
+      ["github", "https://github.com/asimonson1125/VEXcode-Button-Generator", "git repo"],
+      ["globe", "https://www.vexforum.com/t/vexcode-button-generator/72450", "Forum post"]
+    ]
+  },
+  "WinKeylogger": {
+    "status": "complete",
+    "classes": "programming",
+    "bgi": "",
+    "content": "A C++ keylogger for windows based off a Udemy course with my custom modifications and powershell script",
+    "links": [
+      ["github", "https://github.com/asimonson1125/WinKeylogger", "git repo"]
+    ]
+  }
+}

src/static/json/timeline.json

@@ -0,0 +1,37 @@
+{
+    "Co-op @ Dow Chemical": {
+        "classes": "pinned experience technical",
+        "date": "01/2023 - 05/2023",
+        "content": "Spring 2023 Semester Co-op under Dow Chemical's Global Reactive Chemicals team in Analytical Sciences. Responsibilities included management of chemical compatability data and tool creation for parsing, generating, and submitting reports."
+    },
+    "Started Portfolio": {
+        "classes": "",
+        "date": "08/26/2021",
+        "content": "I started building this website on this day. I wish I could say I was farther along than I am."
+    },
+    "Rochester Institute of Technology": {
+        "classes": "pinned education technical",
+        "date": "08/2021 - 05/2025",
+        "content": "Studying in Rochester Institute of Technology's Computer Science BS program with a minor in International Relations."
+    },
+    "Pretzel & Pizza Creations": {
+        "classes": "experience",
+        "date": "04/2021 - 08/2021",
+        "content": "Worked part-time as a chef, managing active ingredient supply and fulfilling orders. I personally recommend the stuffed pretzels."
+    },
+    "Election Official": {
+        "classes": "experience",
+        "date": "08/2020 - 12/2020",
+        "content": "Trained in voter registry operations and provisional voting by the Washington County Board of Elections for the 2020 US Presidential Election."
+    },
+    "Boonsboro High School": {
+        "classes": "education",
+        "date": "09/2016 - 06/2021",
+        "content": "Graduated high school with highest honors.\nMember of National Honor Society, Academic Team County Champions. Participated in Physics Olympics, Robotics Club, and scored at state championships in Cross Country and Track and Field (4x800, 800)."
+    },
+    "Vex Robotics Team Lead/Club Preisdent": {
+        "classes": "technical",
+        "date": "10/2015 - 04/2021",
+        "content": "Led 5 teams through middle and high school to VEX Robotics Competitions, elevating Boonsboro from county group-stage elimination to its first state championship participation. Reorganized club and set up its first interface with the community + sponsors"
+    }
+}

src/templates/about.html

@@ -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 %}

src/templates/header.html

@@ -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>

src/templates/partials/project.html

@@ -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 %}

src/templates/partials/skills.html

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

src/templates/partials/socials.html

@@ -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>

src/templates/partials/timeline.html

@@ -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 %}

src/templates/projects.html

@@ -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 %}