Merge pull request #18 from asimonson1125/to-flask

To flask

.dockerignore

@@ -0,0 +1,6 @@
+react_OLD
+.venv
+.vscode
+.git
+.git*
+__pycache__

.github/workflows/codeql-analysis.yml

@@ -1,70 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ master ]
-  schedule:
-    - cron: '37 14 * * 6'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://git.io/codeql-language-support
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2

.gitignore

@@ -1,26 +1,3 @@
-site
+.venv
-
+__pycache__
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-
 notes.txt

.vscode/settings.json

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

Dockerfile

@@ -1,24 +1,13 @@
-# pull official base image
+FROM docker.io/python:3.8-buster
-FROM node:13.12.0-alpine
+LABEL maintainer="Andrew Simonson <asimonson1125@gmail.com>"
 
-# set working directory
 WORKDIR /app
+ADD ./src /app
 
-# add `/app/node_modules/.bin` to $PATH
+COPY . .
-ENV PATH /app/node_modules/.bin:$PATH
 
-# install app dependencies
+RUN apt-get -yq update && \
-COPY package.json ./
+    pip install --no-cache-dir -r ./src/requirements.txt
-COPY package-lock.json ./
+WORKDIR /app/src
-RUN npm install --silent
-RUN npm install react-scripts@3.4.1 -g --silent
 
-RUN mkdir node_modules/.cache && chmod -R 777 node_modules/.cache
+CMD [ "gunicorn", "--bind", "0.0.0.0:8080", "app:app"]
-
-
-# add app
-COPY . ./
-ENV PORT=8080
-
-# start app
-CMD ["npm", "start"]

package.json

@@ -1,58 +0,0 @@
-{
-  "name": "portfolio",
-  "version": "0.3.0",
-  "homepage": "https://asimonson.com",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.1",
-    "@testing-library/user-event": "^14.1.0",
-    "aos": "^2.3.4",
-    "node": "^17.7.2",
-    "node-dom": "^0.1.0",
-    "on-resize": "^2.0.0",
-    "react": "^18.0.0",
-    "react-aos": "^1.0.1",
-    "react-bootstrap": "^2.2.3",
-    "react-dom": "^18.0.0",
-    "react-ga": "^3.3.1",
-    "react-image-gallery": "^1.2.11",
-    "react-p5": "^1.3.30",
-    "react-router-dom": "^6.3.0",
-    "react-router-sitemap": "^1.2.0",
-    "react-scripts": "^5.0.1",
-    "sass": "^1.55.0",
-    "semver": "^7.3.7",
-    "set-value": "^4.1.0",
-    "update": "^0.7.4"
-  },
-  "devDependencies": {
-    "gh-pages": "^3.2.3"
-  },
-  "scripts": {
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}

react_OLD/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

react_OLD/.gitignore

@@ -0,0 +1,26 @@
+site
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+notes.txt

react_OLD/Dockerfile

@@ -0,0 +1,24 @@
+# pull official base image
+FROM node:13.12.0-alpine
+
+# set working directory
+WORKDIR /app
+
+# add `/app/node_modules/.bin` to $PATH
+ENV PATH /app/node_modules/.bin:$PATH
+
+# install app dependencies
+COPY package.json ./
+COPY package-lock.json ./
+RUN npm install --silent
+RUN npm install react-scripts@3.4.1 -g --silent
+
+RUN mkdir node_modules/.cache && chmod -R 777 node_modules/.cache
+
+
+# add app
+COPY . ./
+ENV PORT=8080
+
+# start app
+CMD ["npm", "start"]

src/app.py

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

src/static/chesscom-embed/default.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 400 400" xml:space="preserve"><style>.st2{fill:#bcbbb7}</style><path fill="#e7e5e3" d="M0 0h400v400H0z"/><path d="M275.8 269.6c-52.8-40.2-46.9-75.2-47.6-89.5h32.2c3.8-6.6 5.7-14 5.7-21.5l-36.5-24c22.6-16.3 27.8-47.9 11.5-70.5-5.6-7.7-13.2-13.8-22.1-17.3-5.9-2.4-47.2 133.4-47.2 133.4-.1 3.1-.2 7.2-.2 12.1 0 13.5 33.1 11.4 31.4 23.4-2.6 17.8-3.2 31.3-18.5 74.1-10.4 28.9-79.4 0-84.3 14.2-3.6 10.6-5.3 21.7-5.2 32.8 0 1.3 2.7 20.4 105.1 20.4s105.1-19.1 105.1-20.4c-.1-29.2-10.9-53.1-29.4-67.2z" fill="#898785"/><path class="st2" d="M198.1 287.6c5.7-25.9 10.7-53.5 13.8-70 3.8-20.6-27.5-24.3-40.3-26.2-.6 17.6-5.5 46.2-47.4 78.2-11.3 8.6-19.7 20.9-24.6 35.8 11.3 5.5 26.4 8.8 49.7 8.8 14.9 0 42.6 1.8 48.8-26.6zM220.1 180.1c5-12.9 4.3-21.5 4.3-21.5l-20.7-24c22-9.4 35.2-27 35.2-47.5 0-15.8-7.4-30.6-19.9-40.2-25.8-10.5-55.3 1.9-65.9 27.7-8.8 21.6-1.7 46.4 17.2 60l-36.5 24c0 7.6 1.9 15 5.7 21.5h80.6z"/><path d="M197.1 53.3c29.1 4.5-13.4 38.4-26.9 36.8-12.7-1.6-.4-41 26.9-36.8z" fill="#dad7d5"/></svg>

src/static/css/App.css

@@ -0,0 +1,941 @@
+@font-face {
+  font-family: "neon-future";
+  src: url("../fonts/Neon Future.ttf")
+}
+
+@font-face {
+  font-family: "starixo";
+  src: url("../fonts/Starixo.otf")
+}
+
+@font-face {
+  font-family: "independent";
+  src: url("../fonts/INDEPENDENT.ttf")
+}
+
+@font-face {
+  font-family: "sunset-club";
+  src: url("../fonts/SunsetClub.otf")
+}
+
+@font-face {
+  font-family: "robotoreg";
+  src: url("../fonts/RobotoCondensed-Regular.ttf")
+}
+
+html, body {
+  overflow-x: hidden;
+}
+
+body {
+  margin: 0;
+  /* background-image: url('../photos/plexus.jpg'); */
+  /*url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')*/
+  background-attachment: fixed;
+  background-size: 100% auto;
+  background-clip: border-box;
+}
+
+* {
+  font-family: "Roboto Condensed", sans-serif;
+}
+
+#menu {
+  height: 2rem;
+  display: none;
+  filter: brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(1%) hue-rotate(151deg) brightness(95%) contrast(86%);
+  float: right;
+  margin-right: 1rem;
+  margin-top: .25rem;
+  cursor: pointer;
+}
+
+#defaultCanvas0 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  position: fixed;
+  z-index: -69;
+}
+
+h1, h2 {
+  color: #ecebeb;
+}
+
+h2 {
+  font-size: 2rem;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+h3, h4 {
+  color: #a8a8a8;
+}
+
+strong {
+  color: #ecebeb;
+}
+
+p, li {
+  color: rgb(212, 212, 212);
+  font-size: 1rem;
+}
+
+a {
+  color: #a0a0a0a0;
+  text-decoration: none;
+}
+
+.header h1 {
+  display: inline-block;
+  transition: .4s;
+  margin-bottom: 0px;
+  margin-top: .5rem;
+  margin-left: 1rem;
+  font-size: 2rem;
+}
+
+.header {
+  margin-bottom: 0px;
+  margin-left: 0rem;
+  background-color: #1a1a1a;
+  width: 100%;
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  left: 0;
+  transition: .4s;
+  overflow: hidden;
+}
+
+#name-container {
+  display: inline;
+}
+
+.name {
+  display: inline;
+  background: url("../photos/sun.png") 0/5rem no-repeat;
+  background-size: contain;
+  padding-left: 5.5rem;
+  font-size: xx-large;
+}
+
+.glitch {
+  display: inline;
+}
+
+.textGrad {
+  font-family: "sunset-club" !important;
+}
+
+.navControl {
+  transition: .4s;
+}
+
+.navBar {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 0px;
+  margin: 0px;
+  width: 100%;
+}
+
+.navElement {
+  border: solid black .2rem;
+  width: 25vw;
+  text-align: center;
+  font-size: 1.2rem;
+  font-size: 1rem;
+  background-color: rgb(156, 49, 45, .4);
+}
+
+.navElement:hover {
+  background-color: rgb(156, 49, 45, .8);
+}
+
+.navElement * {
+  color: white;
+  margin: 0px;
+  display: block;
+  padding-top: .3rem;
+  padding-bottom: .3rem;
+  transition: .4s;
+}
+
+#home {
+  /* height: 100vh; */
+  overflow-y: hidden;
+}
+
+.langstats {
+  width: 350px;
+  height: 165px;
+  border: none;
+  display: block;
+}
+
+.diamonds {
+  background: black;
+  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .75)), url('../chesscom-embed/diamonds.png');
+}
+
+.concentratedHead {
+  display: inline-block;
+  padding-right: 4rem;
+  border-bottom: #0f0f0f solid 5px;
+  color: white;
+}
+
+.foreground {
+  position: relative;
+  padding-top: 7rem;
+  padding-left: 8rem;
+  width: calc(100%-8rem);
+  min-height: calc(100vh - 8rem);
+  background-color: rgb(44, 44, 44, .85);
+  padding-bottom: 1rem;
+  overflow: hidden;
+  transition: .4s;
+}
+
+.foreground 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;
+}
+
+.noBackground {
+  background: none;
+}
+
+.relative {
+  position: relative;
+}
+
+.noPad {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+
+.centerContent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.centerContent>div {
+  margin-top: 30vh;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+#HomeContent {
+  padding: 3rem;
+  display: inline-block;
+  background-color: rgb(44, 44, 44, .75);
+  border: solid black 4px;
+  text-align: center;
+}
+
+.flex {
+  display: flex;
+  justify-content: space-around;
+}
+
+.vFlex {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.spaceBetween {
+  justify-content: space-between;
+}
+
+.start {
+  justify-content: left;
+}
+
+.onRight {
+  position: absolute;
+  right: 0;
+  top: 0;
+  max-width: 100vw;
+  margin-right: 5px;
+}
+
+.onRight>* {
+  margin: auto;
+  margin-bottom: 5px;
+}
+
+.bgi {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position-y: center;
+  opacity: 0.4;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+}
+
+#Vertical {
+  margin-left: auto;
+  margin-right: auto;
+  width: 0;
+  height: 3rem;
+  border-right: rgb(156, 49, 45) solid 1px;
+}
+
+.sideimg {
+  float: right;
+  top: 0;
+  right: 0;
+  display: block;
+  max-width: min(40rem, 80%);
+  max-height: min(30rem, 100%);
+}
+
+.col {
+  float: left;
+  margin-right: 3rem;
+  width: calc(50% - 3rem);
+}
+
+.boxedImg {
+  border: .5rem solid rgba(22, 22, 22, .8);
+  max-width: calc(90% - 1rem);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.carousel-container {
+  margin-left: 10%;
+  max-width: 80%;
+}
+
+.elementBlock {
+  margin-top: 3rem;
+}
+
+.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;
+}
+
+.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);
+}
+
+#skillList {
+  color: white;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#skillDisp {
+  width: 30em;
+  position: relative;
+}
+
+#skillDisp::after {
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: right top;
+  opacity: .2;
+  position: absolute;
+  height: 60%;
+  width: 100%;
+  top: 0;
+  right: 0;
+  content: "";
+  z-index: -1;
+}
+
+#skillDisp.python::after {
+  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png')
+}
+
+#skillDisp.js::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-PTty3CfTGnA%2FTpZOEjTQ_WI%2FAAAAAAAAAeo%2FKeKt_D5X2xo%2Fs1600%2Fjs.jpg&f=1&nofb=1&ipt=c8ae673676226ae40a5cd1408a5c7607e6b9725025888f4994a705309a16d1c3&ipo=images')
+}
+
+#skillDisp.html::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Flogos-download.com%2Fwp-content%2Fuploads%2F2017%2F07%2FHTML5_badge.png&f=1&nofb=1&ipt=db644f64f96f334aad37d31dc1c9dab28021476f6effaa0cb682297f8fd14240&ipo=images')
+}
+
+#skillDisp.sql::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn3.iconfinder.com%2Fdata%2Ficons%2Fbasicolor-computer-tech%2F24%2F091_database_data_sql-512.png&f=1&nofb=1&ipt=cffc17203486b92c9733b992733e6934c03f984bc530c94b75bed278bc73477d&ipo=images')
+}
+
+#skillDisp.cpp::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fen.nokiawroclaw.pl%2Fwp-content%2Fuploads%2Fsites%2F5%2F2018%2F11%2Fcpp_logo.png&f=1&nofb=1&ipt=5fc23951b00bcbdec1977f3bc4591a7b8511ab29f5982963c541526902c0b4fd&ipo=images')
+}
+
+#skillDisp.other::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.freebiesupply.com%2Flogos%2Flarge%2F2x%2Fgit-icon-logo-png-transparent.png&f=1&nofb=1&ipt=834c5a11f63e26429713be2b7d9c9d1e45ce53d771862b9ab49bc35571513894&ipo=images')
+}
+
+#skillDisp.tools::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages.g2crowd.com%2Fuploads%2Fproduct%2Fimage%2Flarge_detail%2Flarge_detail_64636a5c446c22391d4ed719e0987cd2%2Farcgis-pro.png&f=1&nofb=1&ipt=812a2905dd03e5c68f55a9f095bfe7a54feb801bf7f3f11cc01352f45f8a4f8d&ipo=images')
+}
+
+.hex-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: 50px;
+}
+
+.hex-row {
+  display: flex;
+}
+
+.hex {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  margin: 0px 5px;
+}
+
+.hex:hover {
+  transform: scaleX(1.1) scaleY(1.1);
+}
+
+.hex>* {
+  position: absolute;
+}
+
+.hex-odd {
+  margin: 0px 55px;
+}
+
+.hex-border {
+  border-left: solid black 3px;
+  border-right: solid black 3px;
+  width: 100%;
+  height: 58%;
+}
+
+.hex>.hex-border:nth-child(1) {
+  rotate: 60deg;
+}
+
+.hex>.hex-border:nth-child(2) {
+  rotate: 120deg;
+}
+
+.projectList {
+  padding: 0px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  text-align: center;
+}
+
+.project {
+  display: inline-block;
+  text-align: left;
+  margin: 1rem;
+  width: 20rem;
+  height: 22rem;
+  border: .3rem rgba(156, 49, 45, .8) solid;
+  background-color: rgba(22, 22, 22, .8);
+  transition: .3s;
+  overflow: hidden;
+}
+
+.projTitle>* {
+  margin-bottom: 0;
+}
+
+.projBody {
+  position: relative;
+  z-index: 3;
+}
+
+.project .topBox, .project .bottomBox, .project .projTitle {
+  padding: 0 1rem;
+  z-index: inherit;
+}
+
+.backedBody {
+  background-color: #1a1a1a;
+  padding: .25em;
+}
+
+.tab {
+  display: inline;
+  float: right;
+}
+
+.project h3 {
+  display: inline-block;
+  border-bottom: black solid .2rem;
+}
+
+.project img {
+  margin-top: auto;
+  height: 3rem;
+}
+
+.bottomBox a, .placeholding {
+  vertical-align: middle;
+  display: inline;
+  text-align: left;
+  height: unset;
+}
+
+.project a img, .project a p {
+  padding: .5rem;
+  filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(52deg) brightness(106%) contrast(101%);
+}
+
+.project a img:hover, .project a p:hover {
+  filter: invert(66%) sepia(0%) saturate(3964%) hue-rotate(99deg) brightness(100%) contrast(105%);
+}
+
+.incomplete {
+  color: red;
+}
+
+.WIP {
+  color: yellow;
+}
+
+.complete {
+  color: green;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+
+.socials {
+  margin-left: 1rem;
+  width: 0px;
+}
+
+.socials img {
+  height: 2rem;
+  margin-bottom: 1rem;
+  filter: invert(29%) sepia(20%) saturate(1786%) hue-rotate(314deg) brightness(101%) contrast(110%);
+  transition: .2s;
+}
+
+.socials img:hover {
+  opacity: .5;
+}
+
+#vertLine {
+  border-right: 1px solid rgb(156, 49, 45);
+  margin-left: 1rem;
+  height: 10rem;
+}
+
+.neon {
+  display: inline-block;
+  font-family: "neon-future";
+  color: #fff;
+  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #5271ff,
+    0 0 82px #5271ff, 0 0 92px #5271ff, 0 0 102px #5271ff, 0 0 151px #5271ff;
+  animation: pulsate 0.11s ease-in-out infinite alternate;
+}
+
+.neonBox h1 {
+  font-size: min(4em, 12vw);
+}
+
+.neonBox h3 {
+  font-size: min(2em, 6vw);
+}
+
+.neonBox {
+  border: 0.2rem solid #fff;
+  border-radius: 2rem;
+  padding: 2em;
+  margin: 2em;
+  box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 2rem #5271ff,
+    0 0 0.8rem #5271ff, 0 0 2.8rem #5271ff, inset 0 0 1.3rem #5271ff;
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.thedermacompany.co.uk%2Fwp-content%2Fuploads%2F2020%2F11%2Fblack-brick-scaled.jpg&f=1&nofb=1&ipt=d10be6df79141da1b4ec0c725575cef0f7b67e957e391662226d66cff02d25e6&ipo=images');
+  /* background-blend-mode: ; */
+  text-align: center;
+}
+
+@keyframes pulsate {
+  100% {
+    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff,
+      0 0 40px #5271ff, 0 0 80px #5271ff, 0 0 90px #5271ff,
+      0 0 100px #5271ff, 0 0 150px #5271ff;
+  }
+
+  0% {
+    text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 18px #fff,
+      0 0 38px #5271ff, 0 0 73px #5271ff, 0 0 80px #5271ff, 0 0 94px #5271ff,
+      0 0 140px #5271ff;
+  }
+}
+
+@keyframes swipeIn {
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+}
+
+.swipeIn {
+  animation: swipeIn 1s 1;
+}
+
+.fPage {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.heightBox {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.chess {
+  width: 300px;
+  border: none;
+  /* transform: scale(.8);
+  float: right; */
+}
+
+#chessProfile {
+  border-radius: 5px;
+  width: 300px;
+  height: calc(125px + 2em);
+  color: #AAAAAA;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  cursor: pointer;
+}
+
+.chessInfo {
+  background-color: rgba(0, 0, 0, .3);
+  ;
+  margin: 1em;
+}
+
+.chessRapid::after, .chessBlitz::after, .chessBullet::after, .chessPuzzles::after {
+  font-size: xx-small;
+  float: right;
+  margin-right: 5px;
+  margin-top: 1rem;
+}
+
+.chessStat {
+  display: inline;
+  vertical-align: center;
+}
+
+.chessStat::after {
+  font-size: xx-small;
+  float: right;
+}
+
+.chessPuzzles::after {
+  content: 'Tactics';
+}
+
+.chessBullet::after {
+  content: "Bullet";
+}
+
+.chessBlitz::after {
+  content: "Blitz";
+}
+
+.chessRapid::after {
+  content: "Rapid";
+}
+
+.bottomtext {
+  font-size: x-small;
+  margin: 3px;
+  color: white;
+  text-align: right;
+}
+
+.black {
+  background-color: black;
+}
+
+.identity {
+  margin-right: 0px;
+}
+
+.identity h5 {
+  margin: 0px;
+  margin-top: -25px;
+  background: black;
+  z-index: 50;
+  position: relative;
+  width: 90%;
+  margin-left: 10px;
+
+}
+
+.pfpContainer {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
+.pfpContainer>div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.pfp {
+  border-radius: 50%;
+  width: 100px;
+  text-align: center;
+}
+
+.vContainer {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+  justify-content: space-around;
+}
+
+.chessIcon {
+  display: inline-block;
+  font-family: Chess New;
+  font-size: x-large;
+  width: 25px;
+  text-align: center;
+}
+
+.rapid {
+  color: #6c9d41;
+}
+
+.blitz {
+  color: #f7c045;
+}
+
+.bullet {
+  color: #a58a45;
+}
+
+.puzzles {
+  color: #db7e3b;
+}
+
+.timeitem {
+  transition: .4s;
+  overflow-y: clip;
+  height: auto;
+  max-height: 500px;
+}
+
+.timeitem a {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  text-decoration: underline;
+}
+
+.timeline-item {
+  border-left: solid #AAAAAA 3px;
+}
+
+.timeline-item h2 {
+  margin-top: 0px;
+  margin-left: .5em;
+  font-family: robotoreg;
+}
+
+.timeline-item p {
+  margin-bottom: 0px;
+  padding-bottom: 2em;
+  padding-left: 3em;
+  font-family: robotoreg;
+}
+
+/* .timeline-item::before{
+  content: "";
+  background-color: red;
+  border: solid black 3px;
+  border-radius: 100%;
+  padding: 5px;
+  position: absolute;
+  margin-left: -8px;
+} */
+
+.datetext {
+  margin: .25em;
+  font-size: small;
+  margin-left: -1.5em;
+  font-family: robotoreg;
+}
+
+@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) {
+
+  #menu {
+    display: unset;
+  }
+
+  .header {
+    background-color: #1a1a1a;
+    border-bottom: solid 3px rgb(156, 49, 45, .4);
+  }
+
+  .header h1 {
+    font-size: 1.5rem;
+  }
+
+  .navBar {
+    flex-direction: column;
+  }
+
+  .navElement {
+    width: 100vw;
+  }
+
+  .navControl {
+    max-height: 0px;
+  }
+
+  .projectList {
+    width: 95%;
+  }
+
+  .sideimg {
+    position: relative;
+  }
+
+  body {
+    background-size: auto 100%;
+  }
+
+  .foreground {
+    width: 100%;
+    padding-left: 2rem;
+    /* centered objects will need to remove 1.5 of this to center */
+    padding-right: .5rem;
+    padding-bottom: 36px;
+  }
+
+  .homeground {
+    width: 90%;
+    padding-bottom: 36px;
+    display: flex;
+    margin: auto;
+    overflow: visible;
+  }
+
+  .centeredForeground {
+    margin-left: -1.5rem;
+    /* remove .foreground excess margin */
+  }
+
+  .onRight {
+    position: unset;
+    margin-top: 3rem;
+    margin-right: 0;
+  }
+
+  .col {
+    width: 90%;
+    margin-bottom: 3rem;
+  }
+
+  #aboutMe {
+    float: none;
+    display: block;
+    width: 90%;
+  }
+
+  #skills {
+    float: none;
+    margin-right: auto;
+    display: block;
+    width: 90%;
+  }
+
+  .footer {
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    background-color: rgb(156, 49, 45);
+  }
+
+  .socials {
+    display: flex;
+    justify-content: space-around;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    margin-right: auto;
+    margin-left: auto;
+    width: min(100vw, 400px);
+  }
+
+  .socials * {
+    display: inline;
+    text-align: center;
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .socials img {
+    height: 2rem;
+    margin-bottom: 0px;
+    filter: none;
+  }
+
+  #vertLine {
+    display: none;
+    height: 0px;
+  }
+}

src/static/css/checkbox.css

@@ -0,0 +1,70 @@
+.hidden {
+    display: none;
+}
+
+.hiddenup {
+    max-height: 0px !important;
+}
+
+.checkbox-wrapper > div {
+    display: inline-block;
+    margin-right: 1em;
+    margin-bottom: 1em;
+}
+
+.checkbox-wrapper > div:last-child {
+    margin-bottom: 0;;
+}
+
+.checkbox-wrapper .switch {
+    display: flex;
+    position: relative;
+    cursor: pointer;
+}
+
+.checkbox-wrapper .switch > * {
+    align-self: center;
+}
+
+.checkbox-wrapper .switch input {
+    display: none;
+}
+
+
+.checkbox-wrapper .slider {
+    background-color: #ccc;
+    transition: 0.4s;
+    height: 34px;
+    width: 60px;
+}
+
+.checkbox-wrapper .slider:before {
+    background-color: #fff;
+    bottom: 4px;
+    content: "";
+    height: 26px;
+    left: 4px;
+    position: absolute;
+    transition: 0.4s;
+    width: 26px;
+}
+
+.checkbox-wrapper input:checked+.slider {
+    background-color: #66bb6a;
+}
+
+.checkbox-wrapper input:checked+.slider:before {
+    transform: translateX(26px);
+}
+
+.checkbox-wrapper .slider.round {
+    border-radius: 34px;
+}
+
+.checkbox-wrapper .slider.round:before {
+    border-radius: 50%;
+}
+
+.checkbox-wrapper strong {
+    margin-left: .5em;
+}

src/static/css/head.css

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

src/static/icons/email.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
+	<path d="M 0 11.755 v 66.489 h 90 V 11.755 H 0 z M 45 50.49 L 7.138 15.755 h 75.724 L 45 50.49 z M 33.099 45 L 4 71.695 V 18.304 L 33.099 45 z M 36.058 47.714 L 45 55.918 l 8.943 -8.204 l 28.919 26.53 H 7.138 L 36.058 47.714 z M 56.901 45 L 86 18.304 v 53.392 L 56.901 45 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</g>
+</svg>

src/static/icons/github.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="48px" height="48px">    <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>

src/static/icons/globe.svg

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 205.229 205.229" style="enable-background:new 0 0 205.229 205.229;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<g>
+				<path style="fill:#010002;" d="M102.618,205.229c-56.585,0-102.616-46.031-102.616-102.616C0.002,46.031,46.033,0,102.618,0
+					C159.2,0,205.227,46.031,205.227,102.613C205.227,159.198,159.2,205.229,102.618,205.229z M102.618,8.618
+					c-51.829,0-94.002,42.166-94.002,93.995s42.17,93.995,94.002,93.995c51.825,0,93.988-42.162,93.988-93.995
+					C196.606,50.784,154.444,8.618,102.618,8.618z"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<rect x="5.746" y="98.304" style="fill:#010002;" width="193.734" height="8.618"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<path style="fill:#010002;" d="M104.941,62.111c-48.644,0-84.94-10.704-87.199-11.388l2.494-8.253
+					c0.816,0.247,82.657,24.336,164.38-0.004l2.452,8.26C158.405,59.266,130.021,62.111,104.941,62.111z"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<path style="fill:#010002;" d="M20.416,160.572l-2.459-8.26c84.271-25.081,165.898-1.027,169.333,0l-2.494,8.256
+					C183.976,160.318,102.142,136.24,20.416,160.572z"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<path style="fill:#010002;" d="M69.399,196.168C26.933,96.747,63.584,8.604,63.959,7.727l7.927,3.378
+					c-0.365,0.845-35.534,85.756,5.44,181.677L69.399,196.168z"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<path style="fill:#010002;" d="M135.168,196.168l-7.927-3.382c40.971-95.92,5.801-180.832,5.436-181.677l7.927-3.378
+					C140.973,8.604,177.627,96.747,135.168,196.168z"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<rect x="98.306" y="5.744" style="fill:#010002;" width="8.614" height="197.302"/>
+			</g>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/static/icons/instagram.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="60px" height="60px">    <path d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"/></svg>

src/static/icons/linkedin.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
+	<path d="M 45 0 C 20.147 0 0 20.147 0 45 c 0 24.853 20.147 45 45 45 c 24.853 0 45 -20.147 45 -45 C 90 20.147 69.853 0 45 0 z M 31.187 69.956 H 20.822 V 36.617 h 10.365 V 69.956 z M 26.005 32.062 c -3.32 0 -6.005 -2.692 -6.005 -6.007 c 0 -3.318 2.685 -6.011 6.005 -6.011 c 3.313 0 6.005 2.692 6.005 6.011 C 32.01 29.37 29.317 32.062 26.005 32.062 z M 70 69.956 H 59.643 V 53.743 c 0 -3.867 -0.067 -8.84 -5.385 -8.84 c -5.392 0 -6.215 4.215 -6.215 8.562 v 16.491 H 37.686 V 36.617 h 9.939 v 4.559 h 0.141 c 1.383 -2.622 4.764 -5.385 9.804 -5.385 C 68.063 35.791 70 42.694 70 51.671 V 69.956 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</g>
+</svg>

src/static/icons/menu.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 377 377" style="enable-background:new 0 0 377 377;" xml:space="preserve">
+<g>
+	<circle cx="15" cy="88.5" r="15"/>
+	<rect x="75" y="73.5" width="302" height="30"/>
+	<circle cx="15" cy="288.5" r="15"/>
+	<rect x="75" y="273.5" width="302" height="30"/>
+	<circle cx="15" cy="188.5" r="15"/>
+	<rect x="75" y="173.5" width="302" height="30"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/static/js/checkbox.js

@@ -0,0 +1,27 @@
+function toggle(dir) {
+  let toggles = document.querySelectorAll(
+    ".checkbox-wrapper input[type=checkbox]"
+  );
+  let allow = [];
+  toggles.forEach(function (x) {
+    if (x.checked) {
+      allow.push(x.id);
+    }
+  });
+  let list = document.querySelectorAll(".checkbox-client > div");
+  if (allow.length === 0) {
+    for (let i = 0; i < list.length; i++) {
+      list[i].classList.remove("hidden" + dir);
+    }
+  } else {
+    for (let i = 0; i < list.length; i++) {
+      list[i].classList.remove("hidden" + dir);
+      for (let x = 0; x < allow.length; x++) {
+        if (!list[i].classList.contains(allow[x])) {
+          list[i].classList.add("hidden" + dir);
+          break;
+        }
+      }
+    }
+  }
+}

src/static/js/chessbed.js

@@ -0,0 +1,40 @@
+async function addChessEmbed(username) {
+  let user, stats;
+  try {
+    user = await fetch(`https://api.chess.com/pub/player/${username}`);
+    stats = await fetch(`https://api.chess.com/pub/player/${username}/stats`);
+  } catch (e) {
+    setChess({cName:"Chess.com request failed"});
+    return;
+  }
+  if (user.status === 200) {
+    user = await user.json();
+    stats = await stats.json();
+    ratings = {
+      rapid: stats.chess_rapid.last.rating,
+      blitz: stats.chess_blitz.last.rating,
+      bullet: stats.chess_bullet.last.rating,
+      tactics: stats.tactics.highest.rating,
+    }
+    setChess({cName:user["username"],pic:user.avatar,ratings:ratings});
+  } else if (user === null || user.status === 403 || user.status === null) {
+    chessSet({cName:"Chess.com request failed"});
+  } else {
+    chessSet({cName:"User Not Found"});
+  }
+}
+
+function setChess({cName = null, pic = null, ratings = null}) {
+  if (cName) {
+    document.querySelector(".chessName").textContent = cName;
+  }
+  if (pic) {
+    document.querySelector(".chessImage").src = pic;
+  }
+  if (ratings) {
+    document.querySelector(".chessRapid .chessStat").textContent = ratings.rapid;
+    document.querySelector(".chessBlitz .chessStat").textContent = ratings.blitz;
+    document.querySelector(".chessBullet .chessStat").textContent = ratings.bullet;
+    document.querySelector(".chessPuzzles .chessStat").textContent = ratings.tactics;
+  }
+}