oops

the no argument version of /hotspots should include the legend because it's expected to be used as a dashboard :)

.gitignore

@@ -2,3 +2,4 @@
 __pycache__
 notes.txt
 react_OLD
+envs.py

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Python Debugger: Flask",
+            "type": "debugpy",
+            "request": "launch",
+            "cwd": "${workspaceFolder}/src",
+            "module": "flask",
+            "env": {
+                "FLASK_APP": "app.py",
+                "FLASK_DEBUG": "1",
+                
+            },
+            "args": [
+                "run",
+                "--no-debugger",
+                "--no-reload"
+            ],
+            "jinja": true
+        }
+    ]
+}

Dockerfile

@@ -9,7 +9,7 @@ RUN apt-get install -y python3-pip nginx gunicorn supervisor
 # Setup flask application
 RUN mkdir -p /deploy/app
 COPY src /deploy/app
-RUN pip install -r /deploy/app/requirements.txt
+RUN pip install -r /deploy/app/requirements.txt --break-system-packages
 
 # Setup nginx
 RUN rm /etc/nginx/sites-enabled/default

README.md

@@ -0,0 +1,9 @@
+# I made a uhh website
+So people can see how excellent my coding standards are.
+
+* Style: 5/10
+* Originality: 3/10
+* Security: Yes*
+* Viruses: not included
+
+You gotta uhh `pip3 install -r requirements.txt` and `python3 app.py` that thing

ecs-task.json

@@ -1,18 +0,0 @@
-{
-  "containerDefinitions": [
-    {
-      "name": "app",
-      "image": "asimonson1125/asimonson1125.github.io",
-      "essential": true,
-      "memory": 500,
-      "cpu": 10,
-      "portMappings": [
-        {
-          "containerPort": 80,
-          "hostPort": 80
-        }
-      ]
-    }
-  ],
-  "family": "Portfolio"
-}

flask.conf

@@ -4,22 +4,21 @@ server {
     return    301 https://asimonson.com$request_uri;
 }
 server {
-    listen      8080 http2;
-    server_name nginx-dev-asimonson.apps.okd4.csh.rit.edu;
+    listen      8080;
+    server_name asimonson.com;
 
     gzip        on;
     gzip_types  text/plain text/javascript text/css;
     gunzip      on;
 
-    add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' *.cloudflare.com *.chesscomfiles.com *.chess.com *.googletagmanager.com cdn.jsdelivr.net www.google-analytics.com ajax.googleapis.com;";
     add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
     add_header X-Content-Type-Options 'nosniff';
     add_header X-Frame-Options 'SAMEORIGIN';
 
     location / {
-        include     proxy_params;
         proxy_pass http://localhost:5000/;
         proxy_set_header Host $host;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     }
+
 }

src/app.py

@@ -1,45 +1,78 @@
 import flask
 from flask_minify import Minify
 import json
+import werkzeug.exceptions as HTTPerror
+import requests
+from config import *
 
 proj = json.load(open("./static/json/projects.json", "r"))
+books = json.load(open("./static/json/books.json", "r"))
+skillList = json.load(open("./static/json/skills.json", "r"))
 timeline = json.load(open("./static/json/timeline.json", "r"))
 pages = json.load(open("./static/json/pages.json", "r"))
+pages['about']['skillList'] = skillList
 pages['about']['timeline'] = timeline
 pages['projects']['projects'] = proj
+pages['home']['books'] = books
+pages['books']['books'] = books
 
 app = flask.Flask(__name__)
 
-
 @app.route('/api/goto/')
 @app.route('/api/goto/<location>')
 def goto(location='home'):
     pagevars = pages[location]
-    return [pagevars, flask.render_template(pagevars["template"], var=pagevars)]
+    page = None
+    try:
+        page = flask.render_template(pagevars["template"], var=pagevars)
+    except Exception as e:
+        # raise e
+        e = HTTPerror.InternalServerError(None, e)
+        page = page404(e)
+    return [pagevars, page]
 
-@app.route("/")
-def home():
-    pagevars = pages["home"]
-    return flask.render_template("header.html", var=pagevars)
+def funcGen(pagename, pages):
+    def dynamicRule():
+        try:
+            return flask.render_template('header.html', var=pages[pagename])
+        except Exception:
+            e = HTTPerror.InternalServerError()
+            return page404(e)
+    return dynamicRule  
+
+for i in pages:
+    func = funcGen(i, pages)
+    app.add_url_rule(pages[i]['canonical'], i, func)
     
 
-@app.route("/projects")
-def projects():
-    pagevars = pages["projects"]
-    return flask.render_template("header.html", var=pagevars)
-
-
-@app.route("/about")
-def about():
-    pagevars = pages["about"]
-    return flask.render_template("header.html", var=pagevars)
+# for i in pages:
+#     exec(f"@app.route(pages['{i}']['canonical'])\ndef {i}(): return flask.render_template('header.html', var=pages['{i}'])")
 
+@app.route("/huge")
+def huge():
+    return flask.render_template('huge.html')
 
 @app.route("/resume")
 @app.route("/Resume.pdf")
 def resume():
     return flask.send_file("./static/Resume.pdf")
 
+@app.route("/hotspots")
+def hotspotsRIT():
+    url = HotspotsURL
+    if flask.request.args.get("legend") == "false":
+        url += "?legend=false"
+    pagevars = {
+            "template": "iframe.html",
+            "title": f"Hotspots @ RIT",
+            "description": "Hotspots @ RIT by Andrew Simonson",
+            "canonical": "/hotspots",
+        }
+    return flask.render_template("iframe.html", url=url, var=pagevars)
+
+@app.route("/hotspots/<path>")
+def hotspotsProxy(path):
+    return requests.get(f"{HotspotsURL}/{path}").content
 
 @app.errorhandler(Exception)
 def page404(e):

src/config.py

@@ -0,0 +1,8 @@
+from os import environ as env
+# automatically updates some dev envs.  need to remove for production.
+try:
+    __import__('envs.py')
+except ImportError:
+    pass
+
+HotspotsURL = env.get('HotspotsURL', 'https://asimonson.com/hotspots')

src/static/css/App.css

@@ -3,14 +3,10 @@
   src: url("../fonts/NeonFuture.ttf")
 }
 
-@font-face {
-  font-family: "starixo";
-  src: url("../fonts/Starixo.otf")
-}
 
 @font-face {
-  font-family: "independent";
-  src: url("../fonts/INDEPENDENT.ttf")
+  font-family: "shuttlex";
+  src: url("../fonts/SHUTTLE-X.ttf");
 }
 
 @font-face {
@@ -18,13 +14,14 @@
   src: url("../fonts/SunsetClub.otf")
 }
 
+
 @font-face {
   font-family: "robotoreg";
   src: url("../fonts/RobotoCondensed-Regular.ttf")
 }
 
 html, body {
-  overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -41,6 +38,11 @@ body {
   font-family: "Roboto Condensed", sans-serif;
 }
 
+#fullIframe {
+  width:100vw;
+  height: 100vh;
+}
+
 #menu {
   height: 2rem;
   display: none;
@@ -51,12 +53,32 @@ body {
   cursor: pointer;
 }
 
-#defaultCanvas0 {
+/* #defaultCanvas0 {
   position: fixed;
   top: 0;
   left: 0;
   position: fixed;
   z-index: -69;
+} */
+
+#map {
+  height: 100%;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -69;
+}
+
+.leaflet-layer,
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out,
+.leaflet-control-attribution {
+  filter: brightness(500%) contrast(130%);
+}
+
+.leaflet-tile-pane {
+  filter: brightness(50%);
 }
 
 h1, h2 {
@@ -69,10 +91,14 @@ h2 {
   margin-bottom: 2rem;
 }
 
-h3, h4 {
+h3, h4, h5 {
   color: #a8a8a8;
 }
 
+h5 {
+  margin: 0;
+}
+
 strong {
   color: #ecebeb;
 }
@@ -87,6 +113,14 @@ a {
   text-decoration: none;
 }
 
+.transparent {
+  opacity: 0 !important;
+}
+
+.unsetPos {
+  position: unset !important;
+}
+
 .header h1 {
   display: inline-block;
   transition: .4s;
@@ -100,25 +134,43 @@ a {
   margin-bottom: 0px;
   margin-left: 0rem;
   background-color: #1a1a1a;
-  width: 100%;
+  width: 100vw;
   z-index: 99;
   position: fixed;
   top: 0;
   left: 0;
   transition: .4s;
+  border-bottom: solid .2em rgba(139, 36, 36, 0.5);
   overflow: hidden;
 }
 
+#homeIcon {
+  margin: auto;
+  display: block;
+  width: 5em;
+}
+
+#homeName {
+  margin-top: .25em;
+}
+
 #name-container {
-  display: inline;
+  display: inline-block;
+  cursor: pointer;
+  max-width: calc(100% - 3em);
+  margin: 0.2em;
+}
+
+.pointer {
+  cursor: pointer;
 }
 
 .name {
   display: inline;
-  color: #a0a0a0a0;
-  background: url("../photos/sun.png") 0/5rem no-repeat;
+  color: #bbbaba;
+  background: url("../icons/neonfinal3.svg") 0/5rem no-repeat;
   background-size: contain;
-  padding-left: 5.5rem;
+  padding-left: min(10vw, 3.5rem);
   font-size: xx-large;
 }
 
@@ -127,10 +179,13 @@ a {
 }
 
 .textGrad {
-  font-family: "sunset-club" !important;
+  font-family: "shuttlex" !important;
 }
 
 .navControl {
+  max-height: 57px;
+  float: right;
+  margin-right: 1em;
   transition: .4s;
 }
 
@@ -143,12 +198,15 @@ a {
 }
 
 .navElement {
+  display: inline-block;
   border: solid black .2rem;
-  width: 25vw;
   text-align: center;
-  font-size: 1.2rem;
-  font-size: 1rem;
   background-color: rgba(139, 36, 36, 0.5);
+  padding: 0 1em;
+  margin-left: .5em;
+  padding-top: 1.2em;
+  margin-top: -1.3em;
+  border-radius: .5em;
 }
 
 .navElement:hover {
@@ -171,8 +229,8 @@ a {
 }
 
 .langstats {
-  width: 350px;
-  height: 165px;
+  width: min(100%, 350px);
+  /* height: 165px; */
   border: none;
   display: block;
 }
@@ -190,29 +248,35 @@ a {
 }
 
 .foreground {
-  position: relative;
-  padding-top: 6rem;
-  padding-left: 8rem;
-  width: calc(100%-8rem);
-  min-height: calc(100vh - 8rem);
-  background-color: rgb(24, 24, 24, .85);
-  padding-bottom: 1rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  min-width: 100vw;
+  min-height: 100vh;
   overflow: hidden;
-  transition: .4s;
+  background-color: rgb(24, 24, 24, .85);
+  z-index: -1;
 }
 
-.foreground p {
+.foregroundContent {
+  padding-top: 4rem;
+  padding-left: 8rem;
+  max-width: calc(100%-8rem);
+  padding-bottom: 1rem;
+}
+
+.foregroundContent p {
   line-height: 1.5em;
   max-width: min(90%, 40rem);
 }
 
 .homeground {
-  position: relative;
-  padding-top: 7rem;
-  min-height: calc(100vh - 8rem);
-  padding-bottom: 1rem;
-  overflow: hidden;
-  transition: .4s;
+  background-color: rgb(0, 0, 0, .6);
+}
+
+.homegroundContent {
+  padding-top: 5em;
+  padding-left: 0em;
 }
 
 .noBackground {
@@ -244,11 +308,42 @@ a {
 }
 
 #HomeContent {
-  padding: 3rem;
+  display: inline-block;
+  flex-grow: 1;
+  min-width: 65em;
+}
+
+#nametag {
+  padding: 2em 3em;
   display: inline-block;
   background-color: rgb(44, 44, 44, .75);
+  border-radius: 1em;
   border: solid black 4px;
   text-align: center;
+  max-width: 30em;
+}
+
+#nametag *:not(h1) {
+  text-shadow: .1em .1em rgba(255, 255, 255, 0.2);
+}
+
+#nametag p {
+  text-shadow: none;
+  color: #a8a8a8;
+  margin: 0;
+}
+
+#nametagContainer {
+  display: flex;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  justify-content: center;
+  z-index: -1;
+}
+
+.nomargin {
+  margin: 0;
 }
 
 .flex {
@@ -262,6 +357,11 @@ a {
   height: 100%;
 }
 
+.wrap {
+  flex-wrap: wrap;
+  max-width: 100%;
+}
+
 .spaceBetween {
   justify-content: space-between;
 }
@@ -275,11 +375,8 @@ a {
 }
 
 .onRight {
-  position: absolute;
-  right: 0;
-  top: 0;
-  max-width: 100vw;
-  margin-right: 5px;
+  overflow: scroll;
+  margin: auto;
 }
 
 .onRight>* {
@@ -315,19 +412,14 @@ a {
   max-height: min(30rem, 100%);
 }
 
-/* #aboutGrid{
-  display: grid;
-} */
-
 .col {
   width: calc(50% - 3rem);
   margin-bottom: 3em;
+  float: left;
 }
 
 .rightCol {
-  position: absolute;
-  right: 0;
-  top: 0;
+  float: left;
   margin-right: 3em;
 }
 
@@ -339,23 +431,72 @@ a {
   margin-right: auto;
 }
 
-.skills {
-  display: inline-block;
-  background-color: rgba(0, 0, 0, 0.3);
-  border: solid rgba(156, 49, 45, .8) .3rem;
-  text-align: center;
-  padding: 1rem;
+#skillstag::after {
+  content: "Click for details...";
+  display: block;
+  font-size: small;
+  color: #a8a8a8;
+}
+
+#skillTree {
+  border-left: rgb(139, 36, 36) solid 3px;
+  background: rgba(22,22,22,.8);
+  font-size: x-large;
+  margin-bottom: 10px;
 }
 
 .skill {
-  display: inline-block;
-  border: rgba(156, 49, 45, .8) solid .15rem;
-  padding: .2rem;
-  margin: .5rem;
-  background-color: rgba(11, 11, 11, .8);
-  color: rgb(212, 212, 212);
+  display: none;
+  padding: .2em;
+  color: rgb(235, 235, 235);
 }
 
+.skill.activeSkill > .skillname {
+  color: rgb(170, 170, 170);
+}
+
+.skill > .skillname:hover {
+  color: rgb(170, 170, 170);
+}
+
+#skillTree > .skill {
+  display: block;
+}
+
+.skill > .skill {
+  font-size: large !important;
+  padding-left: .5em;
+}
+
+.skill.activeSkill > .skill {
+  display: block !important;
+}
+
+.skill > .skillname {
+  text-decoration: underline;
+}
+
+.skill > .skillname::after {
+  content: " >";
+}
+
+.skill.activeSkill > .skillname::after {
+  content: " <";
+}
+
+.skill[data-length="0"].activeSkill > .skillname, .skill[data-length="0"] > .skillname:hover, .skill.activeSkill > .skillname:hover {
+  color: rgb(235, 235, 235);
+}
+
+.skill[data-length="0"] > .skillname::after {
+  content: ""
+}
+
+.skill[data-length="0"] > .skillname {
+  text-decoration: none;
+}
+
+
 .projectList {
   padding: 0px;
   display: flex;
@@ -531,8 +672,9 @@ a {
 }
 
 .chess {
-  width: 300px;
+  max-width: 300px;
   border: none;
+  overflow: scroll;
   /* transform: scale(.8);
   float: right; */
 }
@@ -662,6 +804,63 @@ a {
   color: #db7e3b;
 }
 
+.bookshelf {
+  max-width: 360px;
+  padding: 10px;
+  border: solid 2px #553;
+  background-image: url("/static/photos/wood.jpg");
+}
+
+.bookshelfHeader {
+  color: lightgray;
+  margin: .5em;
+  border-bottom: solid black 3px;
+  flex-grow: 1;
+}
+
+.bookContainer {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.bookContainer > a {
+  max-width: min(90px, 24%);
+  }
+
+.book {
+  display: inline-block;
+}
+
+.book img {
+  display: block;
+  margin: auto;
+  width: 75px;
+  height: 112px;
+}
+
+.book h4 {
+  font-size: x-small;
+  color: lightgray;
+  margin-bottom: 0;
+  text-align: center;
+}
+
+.bookReview {
+  width: 6em;
+  padding: 1em;
+}
+
+.bookcover {
+  width: 6em;
+}
+
+.booklist {
+  margin: min(10em, 10%);
+  margin-bottom: 20em;
+  margin-top: 2em;
+}
+
 .timeitem {
   transition: .4s;
   overflow-y: clip;
@@ -700,12 +899,68 @@ a {
   font-family: robotoreg;
 }
 
+.smallImg {
+  display: inline-block;
+  width: 75px;
+}
+
+.hover-container {
+  position: relative;
+}
+
+.hover-container .hover-element {
+  position: absolute;
+  top: 3em;
+  left: -50%;
+  padding: 1em;
+  border-radius: 1em;
+  width: 20em;
+  background-color: #1a1a1a;
+  opacity: 0;
+  transition: 1s;
+  z-index: -1;
+}
+
+.hover-container:hover .hover-element {
+  opacity: 1;
+  z-index: 10;
+}
+
 @font-face {
   font-family: Chess New;
   src: url('https://www.chess.com/bundles/web/fonts/chessglyph-new.0cc8115c.woff2');
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (max-width: 600) {
+  #nametagContainer {
+    width: unset;
+  }
+}
+
+@media screen and (max-width: 1400px) {
+
+  #homepage {
+    flex-direction: column;
+  }
+
+  #HomeContent {
+    min-width: 0;
+  }
+
+  /* fuckin iOS gotta render gaussian blurs differently so better fuckin uhh make rasters for mobile users */
+  #homeIcon {
+    content: url("../icons/rasterLogo.png");
+  }
+
+  .name {
+    font-size: min(6vw, 2em);
+    background: url("../icons/rasterLogo.png") 0/5rem no-repeat;
+    background-size: contain;
+  }
+
+  .mobileV {
+    flex-direction: column;
+  }
 
   #menu {
     display: unset;
@@ -726,10 +981,16 @@ a {
 
   .navElement {
     width: 100vw;
+    padding: 0;
+    margin-left: 0;
+    padding-top: unset;
+    margin-top: unset;
+    border-radius: 0;
   }
 
   .navControl {
     max-height: 0px;
+    margin: 0;
   }
 
   .projectList {
@@ -744,37 +1005,34 @@ a {
     background-size: auto 100%;
   }
 
-  .foreground {
-    width: 100%;
-    padding-left: 2rem;
+  .foregroundContent {
     /* centered objects will need to remove 1.5 of this to center */
-    padding-right: .5rem;
+    padding-left: 1em;
+    padding-right: 1em;
     padding-bottom: 36px;
     padding-top: 3em;
   }
 
-  .homeground {
-    width: 90%;
-    padding-bottom: 36px;
-    display: flex;
-    margin: auto;
-    overflow: visible;
-  }
-
-  .centeredForeground {
-    margin-left: -1.5rem;
-    /* remove .foreground excess margin */
+  .homegroundContent {
+    padding-top: 5em;
   }
 
   .onRight {
-    position: unset;
+    margin: unset;
     margin-top: 3rem;
-    margin-right: 0;
+  }
+
+  .onRight>* {
+    margin: auto;
+  }
+
+  .timeline {
+    padding-left: 1em;
   }
 
   .col {
-    width: 90%;
-    margin-bottom: 3rem;
+    width: 100%;
+    margin-bottom: 0;
   }
 
   .rightCol {

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 -540ms linear infinite}@keyframes glitch1{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(3px);color:#4E9A26}98%{transform:translateX(-3px);color:#AC1212}99%{transform:translateX(-3px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(2){animation:clip 6000ms -1200ms linear infinite,glitch2 2500ms -210ms linear infinite}@keyframes glitch2{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(1px);color:#4E9A26}98%{transform:translateX(-2px);color:#AC1212}99%{transform:translateX(-1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(3){animation:clip 6000ms -1800ms linear infinite,glitch3 2500ms -866ms linear infinite}@keyframes glitch3{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(2px);color:#4E9A26}98%{transform:translateX(0px);color:#AC1212}99%{transform:translateX(4px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(4){animation:clip 6000ms -2400ms linear infinite,glitch4 2500ms -60ms linear infinite}@keyframes glitch4{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-3px);color:#4E9A26}98%{transform:translateX(1px);color:#AC1212}99%{transform:translateX(1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(5){animation:clip 6000ms -3000ms linear infinite,glitch5 2500ms -221ms linear infinite}@keyframes glitch5{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(-3px);color:#AC1212}99%{transform:translateX(-4px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(6){animation:clip 6000ms -3600ms linear infinite,glitch6 2500ms -716ms linear infinite}@keyframes glitch6{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(-1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(7){animation:clip 6000ms -4200ms linear infinite,glitch7 2500ms -157ms linear infinite}@keyframes glitch7{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-1px);color:#4E9A26}98%{transform:translateX(-3px);color:#AC1212}99%{transform:translateX(-2px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(8){animation:clip 6000ms -4800ms linear infinite,glitch8 2500ms -955ms linear infinite}@keyframes glitch8{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(-4px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(9){animation:clip 6000ms -5400ms linear infinite,glitch9 2500ms -54ms linear infinite}@keyframes glitch9{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(-3px);color:#AC1212}99%{transform:translateX(-1px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(10){animation:clip 6000ms -6000ms linear infinite,glitch10 2500ms -857ms linear infinite}@keyframes glitch10{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(3px);color:#4E9A26}98%{transform:translateX(1px);color:#AC1212}99%{transform:translateX(2px);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}@keyframes glitch1{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(2px);color:#4E9A26}98%{transform:translateX(3px);color:#AC1212}99%{transform:translateX(5px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch2{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(-4px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch3{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(4px);color:#4E9A26}98%{transform:translateX(4px);color:#AC1212}99%{transform:translateX(-3px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch4{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)}}@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(-1px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch6{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(0px);color:#AC1212}99%{transform:translateX(0px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch7{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(1px);color:#AC1212}99%{transform:translateX(4px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch8{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(3px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch9{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(3px);color:#4E9A26}98%{transform:translateX(3px);color:#AC1212}99%{transform:translateX(3px);color:#fff}100%{transform:translateX(0)}}@keyframes glitch10{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(5px);color:#4E9A26}98%{transform:translateX(4px);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)}}

src/static/icons/neonfinal3.svg

@@ -0,0 +1,432 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="216.75919mm"
+   height="216.7592mm"
+   viewBox="0 0 216.75919 216.7592"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   sodipodi:docname="workingModel.svg"
+   inkscape:export-filename="neonfinal.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#1a1a1a"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.61646116"
+     inkscape:cx="438.79488"
+     inkscape:cy="524.76947"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <linearGradient
+       id="linearGradient1"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#ffc919;stop-opacity:1;"
+         offset="0"
+         id="stop1" />
+      <stop
+         style="stop-color:#d2ae2d;stop-opacity:1;"
+         offset="1"
+         id="stop2" />
+    </linearGradient>
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect17"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,7.9986979,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect16"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,8.0780818,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect9"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,9.6572028,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect8"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,7.5495738,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect8-2"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,7.5495738,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect9-9"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,9.6572028,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter9"
+       x="-0.030747933"
+       y="-0.028448841"
+       width="1.0614959"
+       height="1.0568977">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="1.1764713"
+         id="feGaussianBlur9" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter29"
+       x="-0.090988795"
+       y="-0.084185358"
+       width="1.1819776"
+       height="1.1683707">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="4.7058852"
+         id="feGaussianBlur29" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter30"
+       x="-0.23378194"
+       y="-0.21630154"
+       width="1.4675639"
+       height="1.4326031">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="13.071903"
+         id="feGaussianBlur30" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter5"
+       x="-0.041894038"
+       y="-0.041893957"
+       width="1.083788"
+       height="1.0837879">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="1.0664778"
+         id="feGaussianBlur5" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter6"
+       x="-0.23389403"
+       y="-0.23389395"
+       width="1.467788"
+       height="1.4677879">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="9.2941268"
+         id="feGaussianBlur6" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter8"
+       x="-0.44132139"
+       y="-0.4413213"
+       width="1.8826427"
+       height="1.8826426">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="10.040917"
+         id="feGaussianBlur8" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter10"
+       x="-0.01629857"
+       y="-0.01629849"
+       width="1.0325971"
+       height="1.032597">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.49999998"
+         id="feGaussianBlur10" />
+    </filter>
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect16-7"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,8.0780818,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect17-5"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,7.9986979,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1"
+       id="radialGradient2"
+       cx="68.084846"
+       cy="82.277237"
+       fx="68.084846"
+       fy="82.277237"
+       r="51.629848"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-6.8045576,-27.991731)">
+    <circle
+       style="display:none;opacity:1;fill:#1a1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.09141;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;paint-order:markers stroke fill"
+       id="background"
+       cx="115.18415"
+       cy="136.37132"
+       r="108.37959"
+       inkscape:export-filename="withBackground.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#use6"
+       id="use7"
+       style="display:inline;opacity:1;filter:url(#filter8)"
+       inkscape:export-filename="orangOutline.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#star"
+       id="use6"
+       style="display:inline;opacity:0.7;mix-blend-mode:normal;filter:url(#filter6)"
+       inkscape:export-filename="../../Documents/GitHub/asimonson1125.github.io/src/static/icons/neonfinal3.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <g
+       id="star"
+       style="display:inline;opacity:1;filter:url(#filter5)"
+       transform="matrix(1.1617659,0,0,1.1617659,37.635304,39.028635)"
+       inkscape:export-filename="../../Documents/GitHub/asimonson1125.github.io/src/static/icons/neonfinal2.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96">
+      <path
+         style="opacity:1;mix-blend-mode:normal;fill:url(#radialGradient2);fill-opacity:1;fill-rule:evenodd;stroke:#ff9c00;stroke-width:0.860759;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter10)"
+         d="m 65.084856,67.277241 c -1.287779,9.10845 -5.183319,11.28276 -12.694774,12 -7.511459,0.71725 -34.305226,3 -34.305226,3 0,0 25.891549,1.71223 35,3 9.108454,1.28778 11.282748,4.48855 12,12 0.717252,7.511459 3,34.999999 3,34.999999 0,0 1.712221,-25.89154 3,-34.999999 1.28778,-9.10844 4.488549,-11.28275 11.999999,-12 7.51146,-0.71724 34.999995,-3 34.999995,-3 0,0 -25.891545,-1.71222 -34.999995,-3 -9.10845,-1.28777 -11.282748,-4.48854 -11.999999,-12 -0.717252,-7.51145 -3,-34.999998 -3,-34.999998 0,0 -1.71222,25.891548 -3,34.999998 z"
+         id="path3-6-8"
+         sodipodi:nodetypes="sscsscsscsscs" />
+    </g>
+    <g
+       id="neonHighlights"
+       style="display:inline;opacity:0.75"
+       transform="translate(18.455527)">
+      <use
+         x="0"
+         y="0"
+         xlink:href="#neonTubing"
+         id="use30"
+         style="display:inline;mix-blend-mode:normal;filter:url(#filter30)"
+         transform="translate(-18.455527)" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#neonTubing"
+         id="use29"
+         style="display:inline;mix-blend-mode:normal;filter:url(#filter29)"
+         transform="translate(-18.455527)" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#neonTubing"
+         id="use9"
+         style="opacity:1;filter:url(#filter9)"
+         transform="translate(-18.455527)" />
+    </g>
+    <g
+       id="neonTubing"
+       style="fill:none;fill-opacity:1;stroke:#f8e0c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       transform="translate(18.455527)">
+      <g
+         id="g1"
+         style="display:none;stroke:#f8e0c3;stroke-width:3;stroke-dasharray:none;stroke-opacity:1">
+        <path
+           style="fill:none;fill-opacity:1;stroke:#f8e0c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 129.66155,74.179932 H 61.78218 a 9.6572028,9.6572028 135 0 0 -9.657203,9.657203 v 39.314015"
+           id="path1"
+           inkscape:path-effect="#path-effect9"
+           inkscape:original-d="M 129.66155,74.179932 H 52.124977 v 48.971218" />
+        <path
+           style="fill:none;fill-opacity:1;stroke:#f8e0c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 114.02977,84.567913 H 72.042986 a 7.4885845,7.4885845 134.76763 0 0 -7.488338,7.549325 l 0.186961,23.049192"
+           id="path2"
+           inkscape:path-effect="#path-effect8"
+           inkscape:original-d="M 114.02977,84.567913 H 64.493412 l 0.248197,30.598517"
+           transform="translate(-0.40337459,1.3209286)" />
+        <path
+           style="fill:none;fill-opacity:1;stroke:#f8e0c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 129.66155,74.179932 H 61.78218 a 9.6572028,9.6572028 135 0 0 -9.657203,9.657203 v 39.314015"
+           id="path1-2"
+           inkscape:path-effect="#path-effect9-9"
+           inkscape:original-d="M 129.66155,74.179932 H 52.124977 v 48.971218"
+           transform="rotate(180,96.802685,134.07745)" />
+        <path
+           style="fill:none;fill-opacity:1;stroke:#f8e0c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 114.02977,84.567913 H 72.042986 a 7.4885845,7.4885845 134.76763 0 0 -7.488338,7.549325 l 0.186961,23.049192"
+           id="path2-7"
+           inkscape:path-effect="#path-effect8-2"
+           inkscape:original-d="M 114.02977,84.567913 H 64.493412 l 0.248197,30.598517"
+           transform="rotate(180,97.004375,133.41698)" />
+      </g>
+      <g
+         id="g33"
+         transform="translate(-7.6804235,-33.343613)"
+         style="display:inline;stroke:#f8e0c3;stroke-width:3;stroke-dasharray:none;stroke-opacity:1">
+        <path
+           style="fill:none;stroke:#ededed;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 142.67883,102.44998 H 73.832338 a 10.424106,10.424106 142.5 0 0 -10.068913,7.72615 l -6.688692,24.96254"
+           id="path10"
+           inkscape:path-effect="#path-effect17"
+           inkscape:original-d="M 142.67883,102.44998 H 65.83364 l -8.758907,32.68869"
+           transform="translate(-6.0989631,2.1674006)" />
+        <path
+           style="fill:none;stroke:#ededed;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 156.95436,91.412872 H 56.426396 A 10.527561,10.527561 142.5 0 0 46.257553,99.2157 l -11.945382,44.58078"
+           id="path11"
+           inkscape:path-effect="#path-effect16"
+           inkscape:original-d="M 156.95436,91.412872 H 48.348314 L 34.312171,143.79648" />
+        <path
+           style="display:inline;fill:none;fill-opacity:1;stroke:#ededed;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 142.67883,102.44998 H 73.832338 a 10.424106,10.424106 142.5 0 0 -10.068913,7.72615 l -6.688692,24.96254"
+           id="path10-6"
+           inkscape:path-effect="#path-effect17-5"
+           inkscape:original-d="M 142.67883,102.44998 H 65.83364 l -8.758907,32.68869"
+           transform="rotate(180,105.40367,165.67111)" />
+        <path
+           style="display:inline;fill:none;fill-opacity:1;stroke:#ededed;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 156.95436,91.412872 H 56.426396 a 10.496229,10.496229 142.41749 0 0 -10.146361,7.808817 l -13.97988,52.781241"
+           id="path11-2"
+           inkscape:path-effect="#path-effect16-7"
+           inkscape:original-d="M 156.95436,91.412872 H 48.348314 L 32.300155,152.00293"
+           transform="rotate(180,103.61221,167.4007)"
+           sodipodi:nodetypes="ccc" />
+      </g>
+    </g>
+  </g>
+</svg>

src/static/icons/withBackground.svg

@@ -0,0 +1,432 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="216.75919mm"
+   height="216.7592mm"
+   viewBox="0 0 216.75919 216.7592"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   sodipodi:docname="workingModel.svg"
+   inkscape:export-filename="neonfinal.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#1a1a1a"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.61646116"
+     inkscape:cx="438.79488"
+     inkscape:cy="524.76947"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <linearGradient
+       id="linearGradient1"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#ffc919;stop-opacity:1;"
+         offset="0"
+         id="stop1" />
+      <stop
+         style="stop-color:#d2ae2d;stop-opacity:1;"
+         offset="1"
+         id="stop2" />
+    </linearGradient>
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect17"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,7.9986979,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect16"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,8.0780818,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect9"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,9.6572028,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect8"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,7.5495738,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect8-2"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,7.5495738,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect9-9"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,9.6572028,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter9"
+       x="-0.030747933"
+       y="-0.028448841"
+       width="1.0614959"
+       height="1.0568977">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="1.1764713"
+         id="feGaussianBlur9" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter29"
+       x="-0.090988795"
+       y="-0.084185358"
+       width="1.1819776"
+       height="1.1683707">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="4.7058852"
+         id="feGaussianBlur29" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter30"
+       x="-0.23378194"
+       y="-0.21630154"
+       width="1.4675639"
+       height="1.4326031">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="13.071903"
+         id="feGaussianBlur30" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter5"
+       x="-0.041894038"
+       y="-0.041893957"
+       width="1.083788"
+       height="1.0837879">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="1.0664778"
+         id="feGaussianBlur5" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter6"
+       x="-0.23389403"
+       y="-0.23389395"
+       width="1.467788"
+       height="1.4677879">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="9.2941268"
+         id="feGaussianBlur6" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter8"
+       x="-0.44132139"
+       y="-0.4413213"
+       width="1.8826427"
+       height="1.8826426">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="10.040917"
+         id="feGaussianBlur8" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter10"
+       x="-0.01629857"
+       y="-0.01629849"
+       width="1.0325971"
+       height="1.032597">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.49999998"
+         id="feGaussianBlur10" />
+    </filter>
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect16-7"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,8.0780818,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <inkscape:path-effect
+       effect="fillet_chamfer"
+       id="path-effect17-5"
+       is_visible="true"
+       lpeversion="1"
+       nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,7.9986979,0,1 @ F,0,0,1,0,0,0,1"
+       radius="0"
+       unit="px"
+       method="auto"
+       mode="F"
+       chamfer_steps="1"
+       flexible="false"
+       use_knot_distance="true"
+       apply_no_radius="true"
+       apply_with_radius="true"
+       only_selected="false"
+       hide_knots="false" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1"
+       id="radialGradient2"
+       cx="68.084846"
+       cy="82.277237"
+       fx="68.084846"
+       fy="82.277237"
+       r="51.629848"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-6.8045576,-27.991731)">
+    <circle
+       style="opacity:1;fill:#1a1a1a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.09141;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;paint-order:markers stroke fill"
+       id="background"
+       cx="115.18415"
+       cy="136.37132"
+       r="108.37959"
+       inkscape:export-filename="withBackground.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#use6"
+       id="use7"
+       style="display:inline;opacity:1;filter:url(#filter8)"
+       inkscape:export-filename="orangOutline.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#star"
+       id="use6"
+       style="display:inline;opacity:0.7;mix-blend-mode:normal;filter:url(#filter6)"
+       inkscape:export-filename="../../Documents/GitHub/asimonson1125.github.io/src/static/icons/neonfinal3.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <g
+       id="star"
+       style="display:inline;opacity:1;filter:url(#filter5)"
+       transform="matrix(1.1617659,0,0,1.1617659,37.635304,39.028635)"
+       inkscape:export-filename="../../Documents/GitHub/asimonson1125.github.io/src/static/icons/neonfinal2.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96">
+      <path
+         style="opacity:1;mix-blend-mode:normal;fill:url(#radialGradient2);fill-opacity:1;fill-rule:evenodd;stroke:#ff9c00;stroke-width:0.860759;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter10)"
+         d="m 65.084856,67.277241 c -1.287779,9.10845 -5.183319,11.28276 -12.694774,12 -7.511459,0.71725 -34.305226,3 -34.305226,3 0,0 25.891549,1.71223 35,3 9.108454,1.28778 11.282748,4.48855 12,12 0.717252,7.511459 3,34.999999 3,34.999999 0,0 1.712221,-25.89154 3,-34.999999 1.28778,-9.10844 4.488549,-11.28275 11.999999,-12 7.51146,-0.71724 34.999995,-3 34.999995,-3 0,0 -25.891545,-1.71222 -34.999995,-3 -9.10845,-1.28777 -11.282748,-4.48854 -11.999999,-12 -0.717252,-7.51145 -3,-34.999998 -3,-34.999998 0,0 -1.71222,25.891548 -3,34.999998 z"
+         id="path3-6-8"
+         sodipodi:nodetypes="sscsscsscsscs" />
+    </g>
+    <g
+       id="neonHighlights"
+       style="display:inline;opacity:0.75"
+       transform="translate(18.455527)">
+      <use
+         x="0"
+         y="0"
+         xlink:href="#neonTubing"
+         id="use30"
+         style="display:inline;mix-blend-mode:normal;filter:url(#filter30)"
+         transform="translate(-18.455527)" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#neonTubing"
+         id="use29"
+         style="display:inline;mix-blend-mode:normal;filter:url(#filter29)"
+         transform="translate(-18.455527)" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#neonTubing"
+         id="use9"
+         style="opacity:1;filter:url(#filter9)"
+         transform="translate(-18.455527)" />
+    </g>
+    <g
+       id="neonTubing"
+       style="fill:none;fill-opacity:1;stroke:#f8e0c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       transform="translate(18.455527)">
+      <g
+         id="g1"
+         style="display:none;stroke:#f8e0c3;stroke-width:3;stroke-dasharray:none;stroke-opacity:1">
+        <path
+           style="fill:none;fill-opacity:1;stroke:#f8e0c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 129.66155,74.179932 H 61.78218 a 9.6572028,9.6572028 135 0 0 -9.657203,9.657203 v 39.314015"
+           id="path1"
+           inkscape:path-effect="#path-effect9"
+           inkscape:original-d="M 129.66155,74.179932 H 52.124977 v 48.971218" />
+        <path
+           style="fill:none;fill-opacity:1;stroke:#f8e0c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 114.02977,84.567913 H 72.042986 a 7.4885845,7.4885845 134.76763 0 0 -7.488338,7.549325 l 0.186961,23.049192"
+           id="path2"
+           inkscape:path-effect="#path-effect8"
+           inkscape:original-d="M 114.02977,84.567913 H 64.493412 l 0.248197,30.598517"
+           transform="translate(-0.40337459,1.3209286)" />
+        <path
+           style="fill:none;fill-opacity:1;stroke:#f8e0c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 129.66155,74.179932 H 61.78218 a 9.6572028,9.6572028 135 0 0 -9.657203,9.657203 v 39.314015"
+           id="path1-2"
+           inkscape:path-effect="#path-effect9-9"
+           inkscape:original-d="M 129.66155,74.179932 H 52.124977 v 48.971218"
+           transform="rotate(180,96.802685,134.07745)" />
+        <path
+           style="fill:none;fill-opacity:1;stroke:#f8e0c3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 114.02977,84.567913 H 72.042986 a 7.4885845,7.4885845 134.76763 0 0 -7.488338,7.549325 l 0.186961,23.049192"
+           id="path2-7"
+           inkscape:path-effect="#path-effect8-2"
+           inkscape:original-d="M 114.02977,84.567913 H 64.493412 l 0.248197,30.598517"
+           transform="rotate(180,97.004375,133.41698)" />
+      </g>
+      <g
+         id="g33"
+         transform="translate(-7.6804235,-33.343613)"
+         style="display:inline;stroke:#f8e0c3;stroke-width:3;stroke-dasharray:none;stroke-opacity:1">
+        <path
+           style="fill:none;stroke:#ededed;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 142.67883,102.44998 H 73.832338 a 10.424106,10.424106 142.5 0 0 -10.068913,7.72615 l -6.688692,24.96254"
+           id="path10"
+           inkscape:path-effect="#path-effect17"
+           inkscape:original-d="M 142.67883,102.44998 H 65.83364 l -8.758907,32.68869"
+           transform="translate(-6.0989631,2.1674006)" />
+        <path
+           style="fill:none;stroke:#ededed;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 156.95436,91.412872 H 56.426396 A 10.527561,10.527561 142.5 0 0 46.257553,99.2157 l -11.945382,44.58078"
+           id="path11"
+           inkscape:path-effect="#path-effect16"
+           inkscape:original-d="M 156.95436,91.412872 H 48.348314 L 34.312171,143.79648" />
+        <path
+           style="display:inline;fill:none;fill-opacity:1;stroke:#ededed;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 142.67883,102.44998 H 73.832338 a 10.424106,10.424106 142.5 0 0 -10.068913,7.72615 l -6.688692,24.96254"
+           id="path10-6"
+           inkscape:path-effect="#path-effect17-5"
+           inkscape:original-d="M 142.67883,102.44998 H 65.83364 l -8.758907,32.68869"
+           transform="rotate(180,105.40367,165.67111)" />
+        <path
+           style="display:inline;fill:none;fill-opacity:1;stroke:#ededed;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+           d="M 156.95436,91.412872 H 56.426396 a 10.496229,10.496229 142.41749 0 0 -10.146361,7.808817 l -13.97988,52.781241"
+           id="path11-2"
+           inkscape:path-effect="#path-effect16-7"
+           inkscape:original-d="M 156.95436,91.412872 H 48.348314 L 32.300155,152.00293"
+           transform="rotate(180,103.61221,167.4007)"
+           sodipodi:nodetypes="ccc" />
+      </g>
+    </g>
+  </g>
+</svg>

src/static/js/checkbox.js

@@ -25,3 +25,17 @@ function toggleCheckbox(dir) {
     }
   }
 }
+
+function activeSkill(obj) {
+  if (obj.parentElement.classList.contains("activeSkill")) {
+    obj.parentElement.classList.remove("activeSkill");
+    return;
+  }
+  // document.querySelectorAll(".skill").forEach((x) => {
+  //   x.classList.remove("activeSkill");
+  // });
+  while (obj.parentElement.classList.contains("skill")) {
+    obj = obj.parentElement;
+    obj.classList.add("activeSkill");
+  }
+}

src/static/js/responsive.js

@@ -2,36 +2,19 @@ window.onload = function () {
   onLoaded();
 };
 function onLoaded() {
-  document.body.scrollTop = 0; // For Safari
-  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-
   window.onresize = function () {
     resizer();
   };
   resizer();
-  if (window.innerWidth < 1200) {
-    const e = document.querySelector(".navControl");
-    e.style.maxHeight = "0px";
-  }
 }
 
 function resizer() {
   const e = document.querySelector(".navControl");
-  if (window.innerWidth > 1200) {
+  if (window.innerWidth > 1400) {
     // desktop view
-    scrollFunction();
-    window.onscroll = function () {
-      scrollFunction();
-    };
     e.style.maxHeight = `${e.scrollHeight + 10}px`;
   } else {
     // mobile view
-    window.onscroll = "";
-    document.querySelector(".header").style.backgroundColor = "#1a1a1a";
-    document.querySelectorAll(".header .name h1").forEach(function (x) {
-      x.style.fontSize = "1.5rem";
-    });
-    // document.querySelector('.header > h1').style.color = "#ecebeb";
     document.querySelector(".header").style.borderBottomWidth = "3px";
     e.style.maxHeight = "0px";
     document.querySelectorAll(".navElement *").forEach((x) => {
@@ -42,33 +25,8 @@ function resizer() {
   }
 }
 
-function scrollFunction() {
-  if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
-    document.querySelector(".header").style.backgroundColor = "#1a1a1a";
-    document.querySelectorAll(".header .name h1").forEach(function (x) {
-      x.style.fontSize = "1.5rem";
-    });
-    document.querySelectorAll(".navElement *").forEach((x) => {
-      x.style.paddingTop = ".3rem";
-      x.style.paddingBottom = ".3rem";
-      x.style.fontSize = "1rem";
-    });
-  } else {
-    document.querySelector(".header").style.backgroundColor = "rgba(0,0,0,0)";
-    document.querySelectorAll(".header .name h1").forEach(function (x) {
-      x.style.fontSize = "2rem";
-    });
-    // document.querySelector('.header > h1').style.color = "#ecebeb";
-    document.querySelectorAll(".navElement *").forEach((x) => {
-      x.style.paddingTop = ".5rem";
-      x.style.paddingBottom = ".5rem";
-      x.style.fontSize = "1.2rem";
-    });
-  }
-}
-
 function toggleMenu() {
-  if (window.innerWidth < 1200) {
+  if (window.innerWidth < 1400) {
     const e = document.querySelector(".navControl");
     const bar = document.querySelector(".header");
     if (e.style.maxHeight === "0px") {
@@ -81,13 +39,16 @@ function toggleMenu() {
   }
 }
 
-async function goto(location, {push=true, toggle=true}={}) {
+async function goto(location, { push = true, toggle = true } = {}) {
   let a = await fetch("/api/goto/" + location, {
     credentials: "include",
     method: "GET",
     mode: "cors",
   });
   const response = await a.json();
+  if (!location.includes("#")) {
+    window.scrollTo({top: 0, left: 0, behavior:"instant"});
+  }
   const metadata = response[0];
   const content = response[1];
   let root = document.getElementById("root");
@@ -95,17 +56,16 @@ async function goto(location, {push=true, toggle=true}={}) {
   root.querySelectorAll("script").forEach((x) => {
     eval(x.innerHTML);
   });
-  document.querySelector("title").textContent = metadata['title'];
-  window.scrollTo(0, 0);
-  if(toggle){
+  if (toggle) {
     toggleMenu();
   }
-  if(push){
-    history.pushState(null, null, metadata['canonical']);
+  document.querySelector("title").textContent = metadata["title"];
+  if (push) {
+    history.pushState(null, null, metadata["canonical"]);
   }
 }
 
 function backButton() {
   const location = window.location.pathname;
-  goto(location.substring(1), {push:false}); // remove slash, goto already does that
+  goto(location.substring(1), { push: false }); // remove slash, goto already does that
 }

src/static/json/books.json

@@ -0,0 +1,140 @@
+{
+  "selection": [
+    "The Rational Optimist",
+    "The Accidental Superpower",
+    "Freakonomics",
+    "Zero To One"
+  ],
+  "books": {
+    "The Rational Optimist": {
+      "filename": "ratOpt.jpg",
+      "link": "https://www.amazon.com/Rational-Optimist-Prosperity-Evolves-P-s/dp/0061452068",
+      "review": "The story of humanity's growth with a refined variation of a lens I very much believe deserves greater publicity.  Long, yes, but ultimately one of the most important books for me to have read."
+    },
+    "Freakonomics": {
+      "filename": "freakonomics.jpeg",
+      "link": "https://freakonomics.com/books/",
+      "review": "The original on cracked economics.  Dozens of case studies heavy on the unexpected results of incentives.  Mind Expanding. Very nice."
+    },
+    "Superfreakonomics": {
+      "filename": "superfreakonomics.jpeg",
+      "link": "https://freakonomics.com/books/",
+      "review": "More of the goods?  Excellent.  A number of case studies on finding simple solutions to wicked problems through changing the attack vector in brainstorming.  Another fun read."
+    },
+    "When to Rob a Bank": {
+      "filename": "whenToRobABank.jpeg",
+      "link": "https://freakonomics.com/books/",
+      "review": "Collection of blog posts.  Good for short reading sessions.  I read this one first, I thought the Freakonomics mode of thinking was hilarious.  Classic."
+    },
+    "Think like a Freak": {
+      "filename": "thinkLikeAFreak.jpg",
+      "link": "https://freakonomics.com/books/",
+      "review": "More like the other Freakonomics books than I expected (cracked storytelling), which is still excellent, but I wished there was greater insights into seeing past conventional wisdom, which is what thinking like a freak means.  Still a great book."
+    },
+    "The Accidental Superpower": {
+      "filename": "theAccidentalSuperpower.jpeg",
+      "link": "https://zeihan.com/",
+      "review": "My intro to geopolitics, brilliant hook that made possibly my fastest read ever.  The straightforward the lines of reasoning and grounding in concrete realities that few would consider controversial is incredible, even when the conclusions seem hyper-dramatic."
+    },
+    "The Absent Superpower": {
+      "filename": "theAbsentSuperpower.jpeg",
+      "link": "https://zeihan.com/",
+      "review": "Hadn't realized the author was the same as Accidental when I bought it.  It covered a lot of the same stuff but with a heavy emphasis on fracking technology which was a bit slow but it solidified the veracity of Zeihan's worldview."
+    },
+    "Disunited Nations": {
+      "filename": "disunitedNations.jpeg",
+      "link": "https://zeihan.com/disunited-nations/",
+      "review": "Chapter profiles of key countries in the world provides lots of interesting supporting details, but being the third book of its kind made the rehashing a bit of a drag."
+    },
+    "The End of the World is Just the Beginning": {
+      "filename": "theEndOfTheWorldIsJustTheBeginning.jpeg",
+      "link": "https://zeihan.com/end-of-the-world/",
+      "review": "Separates itself from the others by Zeihan in its breakdown of specific resources of every category, from nickel to corn.  Being generalized, specific, and an enjoyable read all at the same time.  Galaxy Brain stuff."
+    },
+    "The Storm Before the Calm": {
+      "filename": "theStormBeforeTheCalm.jpeg",
+      "link": "https://www.amazon.com/Storm-Before-Calm-Americas-Discord/dp/1101911786/",
+      "review": "Repetitive and almost faith-based.  The cycles and cultural inclinations used as the backbone for predictions may be accurate, but the evidence for this was slim.  Nonetheless, the cultural archetypes laid out here have stuck with me, albeit not for political fortune-telling purposes."
+    },
+    "No, They Can't": {
+      "filename": "no-they-cant.jpeg",
+      "link": "https://www.goodreads.com/book/show/13260131-no-they-can-t",
+      "review": "I much preferred Give Me A Break (which I read first).  Sossel's writing style in this book is less developed - it feels aimless and with an intent to lecture."
+    },
+    "Give Me a Break": {
+      "filename": "giveMeABreak.jpeg",
+      "link": "https://www.amazon.com/Give-Me-Break-Exposed-Hucksters-ebook/dp/B000FC2NF8/",
+      "review": "I expected a boring autobiography-type book, but instead is a glimpse inside Stossel's work that transformed itself as it transformed his view.  Was very happy to see a figure of similar personal ideology.  Probably made it a little too easy to swallow that pill."
+    },
+    "Zero To One": {
+      "filename": "zeroToOne.jpeg",
+      "link": "https://www.amazon.com/Zero-One-Notes-Startups-Future/dp/0804139296",
+      "review": "Initially very frustrating read.  Took a bit of internal review to realize that this has to be read with an entrepreneurial perspective, not a consumer one.  After that, it's quite eye-opening in ways that would've been obvious without the lens of life experience.  The optimistic takes are very much appreciated and their justifications are solid."
+    },
+    "Courage is Calling": {
+      "filename": "courageIsCalling.jpeg",
+      "link": "https://www.amazon.com/Courage-Calling-Fortune-Favors-Brave/dp/B094PMPCBT/",
+      "review": "Average on the readability scale, but inspiring all the same.  As a primer in stoicism it gets a 8/10 for not enough gigachad energy to match the gigachad content."
+    },
+    "Discipline Is Destiny": {
+      "filename": "disciplineIsDestiny.jpg",
+      "link": "https://www.amazon.com/Discipline-Destiny-Power-Self-Control-Virtues/dp/0593191692",
+      "review": "Much like the first in its series - small chapters (very helpful) each with inspiring insider stories of figures of history.  Anyone capable of learning from these figures would benefit greatly from implementing the virtues in this series."
+    },
+    "On Grand Strategy": {
+      "filename": "onGrandStrategy.jpeg",
+      "link": "https://www.amazon.com/Grand-Strategy-John-Lewis-Gaddis/dp/1594203512",
+      "review": "Book for the academically-inclined.  Not fun to read.  Big words scary.  It's insightful to be sure but I wouldn't read it again.  The message on conceptual contradictions has stuck with me.  Quite the brain food."
+    },
+    "The Parasitic Mind": {
+      "filename": "theParasiticMind.jpeg",
+      "link": "https://www.amazon.com/Parasitic-Mind-Infectious-Killing-Common/dp/1684512298/",
+      "review": "The humor is the most memorable part but the concepts are no slouches.  The contemporary culture war basis makes it tricky to talk about, but it absolutely should be discussed."
+    },
+    "David and Goliath": {
+      "filename": "davidAndGoliath.png",
+      "link": "https://www.amazon.com/David-Goliath-Underdogs-Misfits-Battling/dp/0316239852/",
+      "review": "Book contains takes that may not be hot, but *are* incredibly based.  In a sentence: Goliath is only the giant from the wrong perspectives.  The only reason it's not one of my favorites is that it's tamer than the aggressively standoffish and hilarious."
+    },
+    "Verbal Judo": {
+      "filename": "verbalJudo.png",
+      "link": "https://www.amazon.com/Verbal-Judo-Second-Gentle-Persuasion-ebook/dp/B00FJ3CMI6/",
+      "review": "Book tries to hook you into reading it even when you're already halfway through reading it.  And it works!  Definitely a good book to review occasionally to keep yourself grounded during tense moments."
+    },
+    "You Can Read Anyone": {
+      "filename": "youCanReadAnyone.jpg",
+      "link": "https://www.amazon.com/YOU-READ-ANYONE-David-Lieberman-ebook/dp/B001J6OV0Y",
+      "review": "Not as page-turning as many of the others and clearly not as memorable.  The techniques pique curiosity but are difficult to use without practice."
+    },
+    "Profiles in Courage": {
+      "filename": "profilesInCourage.jpeg",
+      "link": "https://www.amazon.com/Profiles-Courage-John-F-Kennedy/dp/0060854936",
+      "review": "Another book that was hard to really get into but still provided fascinating commentary on some very important figures that have faded from public memory."
+    },
+    "Where Good Ideas Come From": {
+      "filename": "where-good-ideas-come-from.png",
+      "link": "https://www.goodreads.com/book/show/8034188-where-good-ideas-come-from",
+      "review": "I got this book at a recycling center.  I didn't want to read it or like it.  Unfortnuately, it's pretty good.  200 pages of considerate review of how innovation comes to be + suggestions to expand the utility of your ideas (I've adopted several!)"
+    },
+    "Make Your Bed": {
+      "filename": "makeYourBed.jpg",
+      "link": "https://www.amazon.com/Make-Your-Bed-Little-Things/dp/1455570249",
+      "review": "Something small to read on a rainy day or flight.  Valuable advice condensed into personal stories that stretch beyond anecdotes."
+    },
+    "12 Rules for Life": {
+      "filename": "12RulesForLife.jpg",
+      "link": "https://www.amazon.com/12-Rules-Life-Antidote-Chaos/dp/0345816021/",
+      "review": "Another read with challenging academic vernacular.  I had a agreeable-hate relationship with the biblical storytelling that made me somewhat dread reading yet also question the nature of religion.  Another example of books with good advice being not fun to get into."
+    },
+    "Beyond Order: 12 More Rules for Life": {
+      "filename": "BeyondOrder.jpg",
+      "link": "https://www.amazon.com/Beyond-Order-More-Rules-Life/dp/0593084640",
+      "review": "It bothers how much these books make me stop and think because it throws me out of the focus of actually reading.  More solid advice with less religion than the predecessor but retaining the 'difficult to want to read' badge."
+    },
+    "The Hitchhiker's Guide to the Galaxy": {
+      "filename": "HitchhikersGuideToTheGalaxy.jpeg",
+      "link": "https://www.amazon.com/Hitchhikers-Guide-Galaxy-Douglas-Adams/dp/0345418913",
+      "review": "It's alright.  It felt like an aimless journey without defined boundaries that reveled in that fact for irony and wit points."
+    }
+  }
+}

src/static/json/pages.json

@@ -16,5 +16,17 @@
         "title": "Andrew Simonson - About Me",
         "description": "About Andrew Simonson",
         "canonical": "/about"
+    },
+    "books": {
+        "template": "books.html",
+        "title": "Andrew Simonson - Bookshelf",
+        "description": "Some of the books I've read",
+        "canonical": "/books"
+    },
+    "duck": {
+        "template": "duck.html",
+        "title":"You've been ducked!",
+        "description": "Face it, you've been ducked",
+        "canonical": "/duck"
     }
 }

src/static/json/projects.json

@@ -1,5 +1,33 @@
 {
-  "Lower 48 Alt. Energy Map": {
+  "RIT Hotspots": {
+    "status": "WIP",
+    "classes": "pinned geospacial programming",
+    "bgi": "hotspotsrit.png",
+    "content": "Live crowd migration map using RIT occupancy data",
+    "links": [
+      [
+        "github", "https://github.com/asimonson1125/hotspotsrit", "git repo"
+      ],
+      [
+        "globe", "https://asimonson.com/hotspots", "demo"
+      ]
+    ]
+  },
+  "LogicFlow": {
+    "status": "incomplete",
+    "classes": "programming",
+    "bgi": "logicflow.jpg",
+    "content": "Translate paragraphs to logical flowcharts, powered by ChatGPT         Winner of CSHacks' Best Use of AI by Paychex",
+    "links": [
+      [
+        "github", "https://github.com/asimonson1125/LogicFlow", "git repo"
+      ],
+      [
+        "globe", "https://devpost.com/software/logicflow", "Hackathon listing"
+      ]
+    ]
+  },
+  "Alternative Energy Map": {
     "status": "complete",
     "classes": "pinned geospacial",
     "bgi": "geovisF.png",
@@ -14,7 +42,7 @@
   },
   "OccupyRIT": {
     "status": "WIP",
-    "classes": "pinned programming",
+    "classes": "programming",
     "bgi": "occupyRIT.png",
     "content": "Collects RIT Gym Occupancy data, determining busiest workout times",
     "links": [

src/static/json/skills.json

@@ -0,0 +1,26 @@
+{
+    "Data and AI": {
+        "Python": {
+            "PyTorch/TensorFlow": {},
+            "Numpy/Pandas": {},
+            "Selenium/BS4": {}
+        },
+        "R": {},
+        "SQL": {}
+    },
+    "Frontend": {
+        "Flask (Python)": {},
+        "React (Javascript)": {},
+        "Angular (Typescript)": {}
+    },
+    "Backend & DevOps": {
+        "DevOps": {
+            "Docker": {},
+            "Microsoft Azure": {},
+            "Kubernetes/Openshift": {},
+            "Bash": {}
+        },
+        "C#": {},
+        "C++": {}
+    }
+}

src/static/json/timeline.json

@@ -11,7 +11,7 @@
     },
     "Rochester Institute of Technology": {
         "classes": "pinned education technical",
-        "date": "08/2021 - 05/2025",
+        "date": "08/2021 - 12/2024",
         "content": "Studying in Rochester Institute of Technology's Computer Science BS program with a minor in International Relations."
     },
     "Pretzel & Pizza Creations": {

src/static/scss/head.scss

@@ -7,9 +7,9 @@
   
   @for $i from 1 through 10 {
     &:nth-child(#{$i}) {
-      animation:
-        clip 6000ms $i * -600ms linear infinite,
-        glitch#{$i} 2500ms random(1000) * -1ms linear infinite;
+      // animation:
+      //   clip 6000ms $i * -600ms linear infinite,
+      //   glitch#{$i} 2500ms random(1000) * -1ms linear infinite;
 
       @keyframes glitch#{$i} {
         0% {

src/templates/about.html

@@ -1,145 +1,86 @@
 {% block content %}
-<div class="foreground">
+<div class="foreground"></div>
+<div class="foregroundContent">
   <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
-        <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 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", "Nginx", "Angular", "Flask", "Jinja", "DOM
-      Scraping", "Google API", "React", "Node.js", "ArcGIS", ]) }}
-      <div class="chess">
-        {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
-        }}
+      <div id="aboutMe" class="col" data-aos="fade-up">
+        <h2 class="concentratedHead">About Me</h2>
+        <p>
+          I'm Andrew Simonson, a senior undergrad at
+          <strong>Rochester Institute of Technology </strong>
+          in the <b>Computer Science BS</b> program (international relations minor), pursuing a career in data
+          science with a focus on predictive analytics.
+        </p>
+        <p>
+          <br />
+          Ominous positivity is kinda my thing.
+        </p>
+        <br />
       </div>
+      <div class="col rightCol" data-aos="fade-up">
+        <div id="skills">
+          <h2 id="skillstag">Skills</h2>
+          {% from 'partials/skills.html' import skills %} {{ skills(var['skillList']) }}
+        </div>
+        <div id="timeline">
+          <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 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 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>
 </div>
 {% endblock %}

src/templates/books.html

@@ -0,0 +1,25 @@
+{% block content %}
+<div class="foreground"></div>
+<div class="foregroundContent">
+  <h2>These are some of the books I've read since 2020, vaguely sorted by topic.</h2>
+  <h3>"You can't judge a book by its cover but you can judge a person by their bookshelf" - Me, today.</h3>
+  <h4>Hover to reveal review<br />Read to reveal KNOWLEDGE</h4>
+  <div class="booklist flex wrap mobileV">
+    {% for i in var.books.books %}
+    <div id="'{{i}}'" class="bookReview">
+      <div class="hover-container">
+        <img
+          class="bookcover"
+          alt="{{i}} cover"
+          src="{{ url_for('static', filename=('photos/books/' + var.books.books[i].filename))}}"
+        />
+        <div class="hover-element">
+          <p>{{ var.books.books[i].review }}</p>
+          <a href="{{ var.books.books[i].link }}">Book Source</a>
+        </div>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</div>
+{% endblock %}

src/templates/duck.html

@@ -0,0 +1,12 @@
+{% block content %}
+<div class="foreground"></div>
+<div class="foregroundContent">
+  <h2>What the duck?</h2>
+  <img
+    alt="mega spinney duck"
+    src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
+    style="max-width: calc(100% - 2em);"
+  />
+  <h3>Stop disturbing the duck, can't you see he's busy spinning?</h3>
+</div>
+{% endblock %}

src/templates/error.html

@@ -1,4 +1,5 @@
 {% block content %}
+<div class="foreground homeground"></div>
 <div class="fPage">
   <div class="heightBox">
     <div class="neonBox">

src/templates/header.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" />
+    <link rel="icon" href="{{ url_for('static', filename='icons/withBackground.svg') }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="{{ var['description'] }}" />
@@ -11,7 +11,7 @@
     <meta property="og:type" content="website" />
     <meta
       property="og:image"
-      content="https://asimonson.com{{ url_for('static', filename='photos/sun.png') }}"
+      content="https://asimonson.com{{ url_for('static', filename='icons/rasterLogoCircle.png') }}"
     />
     <meta property="og:url" content="{{ var['description'] }}" />
     <meta property="twitter:title" content="Andrew Simonson" />
@@ -20,7 +20,7 @@
     <meta property="og:site_name" content="Andrew Simonson - Portfolio" />
     <meta
       property="twitter:image"
-      content="https://asimonson.com{{ url_for('static', filename='photos/sun.png') }}"
+      content="https://asimonson.com{{ url_for('static', filename='icons/rasterLogoCircle.png') }}"
     />
     <meta name="twitter:image:alt" content="some example picture idk" />
     <meta name="twitter:site" content="@asimonson1125" />
@@ -53,27 +53,24 @@
     />
 
     <link rel="canonical" href="https://asimonson.com{{ var['canonical'] }}" />
-    <script defer src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
-    <script defer 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>{{ var['title'] }}</title>
   </head>
-
+  {% block header %}
   <body onpopstate="backButton()">
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <iframe src="/hotspots?legend=false" title="HotspotsRIT" id="map"></iframe>
     <div class="App">
       <div class="header">
-          <div id="name-container" onclick="goto('home', {toggle:false})">
-            <div class="glitch">
-              {% for i in range(9) %}
-              <div class="line name">
-                <span class="textGrad">Andrew Simonson</span>
-              </div>
-              {% endfor %}
+        <div id="name-container" onclick="goto('home', {toggle:false})">
+          <div class="glitch">
+            <div class="line name">
+              <span class="textGrad">Andrew Simonson</span>
             </div>
           </div>
+        </div>
 
         <img
           src="{{ url_for('static', filename='icons/menu.svg')}}"
@@ -100,9 +97,12 @@
         </div>
       </div>
     </div>
+    {% endblock %}
+    {% block content%}
     <div id="root">{% include var['template'] %}</div>
-    <div class="footer">
-      {% include 'partials/socials.html' %}
-    </div>
+    {% endblock %}
+    {% block footer %}
+    <div class="footer">{% include 'partials/socials.html' %}</div>
+    {% endblock %}
   </body>
 </html>

src/templates/home.html

@@ -1,21 +1,54 @@
-{% block content %}
-<div class="homeground">
+{% block content %} {% macro nameplate() %}
+<img
+  src="{{ url_for('static', filename='icons/neonfinal3.svg') }}"
+  id="homeIcon"
+  alt="logo"
+/>
+<h1 id="homeName" class='textGrad'>Andrew Simonson</h1>
+<h3>Computer Science student at Rochester Institute of Technology</h3>
+<h5>End-to-End Services in Data Science and AI</h5>
+{% endmacro %}
+
+<div class="foreground homeground"></div>
+<div class="foregroundContent homegroundContent">
   <div class="relative">
-    <div class="flex">
-      <div id="HomeContent" data-aos="fade-up">
-        <h1>Andrew Simonson</h1>
-        <h3>Computer Science student at Rochester Institute of Technology</h3>
+    <div id="homepage" class="flex">
+      <div id="HomeContent">
+        <div class="flex">
+          <div id="nametag" class="transparent unsetPos" data-aos="fade-up">
+            {{ nameplate() }}
+          </div>
+          <div id="nametagContainer">
+            <div id="nametag" data-aos="fade-up">{{ nameplate() }}</div>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="onRight" data-aos="fade-up">
-      <img
-        src="{{ url_for('static', filename='readme-stats-vercel-01-25-2023.svg') }}"
-        class="langstats"
-        alt="Language stats"
-      />
-      <div class="chess">
-        {% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
-        }}
+      <div class="onRight" data-aos="fade-up">
+        <div class="chess">
+          {% from 'partials/chess.html' import chess %} {{
+          chess('asimonson1125') }}
+        </div>
+        <br />
+        {% from 'partials/bookshelf.html' import bookshelf %} {{
+        bookshelf(var.books) }}
+        <br />
+          <div class="flex pointer" onclick="goto('duck')">
+            <img
+              alt="duck spinning"
+              src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
+              class="smallImg"
+            />
+            <img
+              alt="duck spinning"
+              src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
+              class="smallImg"
+            />
+            <img
+              alt="duck spinning"
+              src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
+              class="smallImg"
+            />
+          </div>
       </div>
     </div>
   </div>

src/templates/hotspots.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<head>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/hotspots.css') }}" />
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""
+  />
+  <script
+    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""
+  ></script>
+  <script src="{{ url_for('static', filename='js/lib/leaflet-providers.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/lib/CUSTOM.leaflet.curve.js') }}"></script>
+</head>
+<body>
+  <div id="map"></div>
+  <script src="{{ url_for('static', filename='js/hotspots.js') }}"></script>
+</body>

src/templates/huge.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>incredibly important</title>
+<body>
+  <button type="button" style="height:4em; width:10em;" onclick="playme()" id="trigger">
+    doot button
+  </button>
+  <video id="myVideo" style="display: none">
+    <source src="{{ url_for('static',
+    filename="photos/moving-pictures/doot.mp4")}}" type="video/mp4"> Your
+    browser does not support the video tag.
+  </video>
+
+  <script>
+    const video = document.getElementById("myVideo");
+    const trigger = document.getElementById("trigger");
+    async function playme() {
+      trigger.style.display = "none";
+      video.style.display = "";
+      await video.play();
+      setTimeout(function () {
+        video.style.display = "none";
+        trigger.style.display = "";
+      }, 1300);
+      video.muted = false;
+    }
+  </script>
+</body>

src/templates/iframe.html

@@ -0,0 +1,4 @@
+{% extends "header.html" %}
+{% block header %}{% endblock %}
+{% block footer %}{% endblock %}
+{% block content %}<iframe id="fullIframe" src="{{ url }}" title="HotspotsRIT"></iframe>{% endblock %}

src/templates/partials/bookshelf.html

@@ -0,0 +1,23 @@
+{% macro bookshelf(books) %}
+<a href="/books">
+  <div class="bookshelf">
+    <div class="flex">
+      <h4 class="bookshelfHeader">Check out the things I read:</h4>
+      <p class='nomargin'>See More >></p>
+    </div>
+    <div class="bookContainer">
+      {% for i in books.selection %} {% set book = books.books[i] %}
+      <a href="/books#'{{i}}'">
+        <div class="book">
+          <img
+            alt="{{ i }} cover"
+            src="{{ url_for('static', filename=('photos/books/' + book.filename))}}"
+          />
+          <h4>{{ i }}</h4>
+        </div>
+      </a>
+      {% endfor %}
+    </div>
+  </div>
+</a>
+{% endmacro %}

src/templates/partials/skills.html

@@ -1,5 +1,16 @@
-{% macro skills(skills) %}
-<ul class='skills'>
-    {% for i in skills %}<li class='skill'>{{i}}</li>{% endfor %}
-</ul>
+{% macro expandSkill(dict, name, classes="") %} 
+<div class='skill {{ classes }}' data-length='{{ dict[name]|length }}'>
+    <div onclick='activeSkill(this)' class='skillname'>{{ name }}</div>
+{% for child in dict[name] %}
+{{ expandSkill(dict[name], child) }}
+{% endfor %} 
+</div>
+{% endmacro %}
+
+{% macro skills(skills) %}
+<div id="skillTree">
+    {% for skill in skills %}
+    {{ expandSkill(skills, skill, 'activeSkill') }}
+    {% endfor %}
+</div>
 {% endmacro %}

src/templates/projects.html

@@ -1,7 +1,9 @@
 {% block content %}
-<div class="foreground">
+<div class="foreground"></div>
+<div class="foregroundContent">
     <div data-aos="fade-up">
       <h2 class="concentratedHead">Projects</h2>
+      <h3>Shhh shh shh sh sh I know I know I'm gonna revamp this page later </h3>
       <p>
         Project status is indicated by the color of the project card:
         <br />
@@ -35,7 +37,7 @@
       </label>
       </div>
     </div>
-    <div class="projectList centeredForeground checkbox-client">
+    <div class="projectList checkbox-client">
         {% from 'partials/project.html' import project %} 
         {% 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"]) }}