simulate Single Page App with websockets

src/templates/about.html

@@ -1,4 +1,4 @@
-{% extends "header.html" %} {% block content %}
+{% block content %}
 <div class="foreground">
   <div class="col">
     <div id="aboutMe" data-aos="fade-up">
@@ -41,10 +41,10 @@
     <div id="skills" data-aos="fade-up">
       <h2>Skills</h2>
       {% from 'partials/skills.html' import skills %}
-        {{ skills([ "Python", "JavaScript", "Java", "C", "C++", "MIPS Assembly",
+        {{ 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", "Angular", "Flask", "Jinja", "DOM Scraping",
+        "OKD4", "Kubernetes", "Openshift", "Angular", "Flask", "Jinja", "DOM Scraping",
         "Google API", "React", "Node.js", "ArcGIS", ]) }}
       </Skills>
       <div class="chess">
@@ -121,8 +121,8 @@
     </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"])}}
+      {% for i in var["timeline"] %}
+      {{ timeitem(i, var["timeline"][i]["classes"], var["timeline"][i]["date"], var["timeline"][i]["content"])}}
       {% endfor %}
     </div>
     <script>toggle('up')</script>

src/templates/error.html

@@ -1,4 +1,4 @@
-{% extends "header.html" %} {% block content %}
+{% block content %}
 <div class="fPage">
   <div class="heightBox">
     <div class="neonBox">

src/templates/header.html

@@ -5,22 +5,22 @@
     <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="{{ description }}" />
+    <meta name="description" content="{{ var['description'] }}" />
     <meta property="og:title" content="Andrew Simonson" />
-    <meta name="og:description" content="{{ description }}" />
+    <meta name="og:description" content="{{ var['description'] }}" />
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="{{ url_for('static', filename='photos/sun.png') }}"
+      content="https://asimonson.com{{ 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:description" content="{{ var['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') }}"
+      content="https://asimonson.com{{ url_for('static', filename='photos/sun.png') }}"
     />
     <meta name="twitter:image:alt" content="some example picture idk" />
     <meta name="twitter:site" content="@asimonson1125" />
@@ -52,13 +52,14 @@
       href="{{ url_for('static', filename='css/head.css') }}"
     />
 
-    <link rel="canonical" href="https://asimonson.com/{{ canonical }}" />
+    <link rel="canonical" href="https://asimonson.com/{{ var['canonical'] }}" />
     <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js" integrity="sha512-eVL5Lb9al9FzgR63gDs1MxcDS2wFu3loYAgjIH0+Hg38tCS8Ag62dwKyH+wzDb+QauDpEZjXbMn11blw8cbTJQ==" crossorigin="anonymous"></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>
     <script src="{{ url_for('static', filename='js/chessbed.js') }}"></script>
-    <title>{{ title }}</title>
+    <title>{{ var['title'] }}</title>
   </head>
 
   <body>
@@ -87,23 +88,23 @@
         <div class="navControl">
           <div class="navBar">
             <div class="navElement">
-              <a href="/">Home</a>
+              <p onclick="emitData('goto', 'home')">Home</p>
             </div>
             <div class="navElement">
               <a href="Resume.pdf" target="_blank"> Resume </a>
             </div>
             <div class="navElement">
-              <a href="/projects">Projects</a>
+              <p onclick="emitData('goto', 'projects')">Projects</p>
             </div>
             <!-- <a href="/activities">Activities</a> -->
             <div class="navElement">
-              <a href="/about">About Me</a>
+              <p onclick="emitData('goto', 'about')">About Me</p>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div id="root">{% block content %}{% endblock %}</div>
+    <div id="root">{% include var['template'] %}</div>
     <div class="footer">
       {% include 'partials/socials.html' %}
     </div>

src/templates/home.html

@@ -1,4 +1,4 @@
-{% extends "header.html" %} {% block content %}
+{% block content %}
 <div class="homeground">
   <div class="relative">
     <div class="flex">
@@ -8,14 +8,13 @@
       </div>
     </div>
     <div class="onRight" data-aos="fade-up">
-      <iframe
-        title="langstats"
+      <img
         src="{{ url_for('static', filename='readme-stats-vercel-01-25-2023.svg') }}"
         class="langstats"
-      ></iframe>
+      />
       <div class="chess">
-        {% from 'partials/chess.html' import chess %}
-        {{ chess('asimonson1125') }}
+        {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
+        }}
       </div>
     </div>
   </div>

src/templates/projects.html

@@ -1,4 +1,4 @@
-{% extends "header.html" %} {% block content %}
+{% block content %}
 <div class="foreground">
     <div data-aos="fade-up">
       <h2 class="concentratedHead">Projects</h2>
@@ -37,8 +37,8 @@
     </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"]) }}
+        {% for i in var["projects"] %}
+        {{ project(i, var["projects"][i]["classes"], var["projects"][i]["status"], var["projects"][i]["bgi"], var["projects"][i]["content"], var["projects"][i]["links"]) }}
         {% endfor %}
     </div>
   </div>