Rebuild homepage with Flask

.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,4 @@
-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*
-
-
+.venv
+__pycache__
+srcReact
 notes.txt

Dockerfile

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

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"
-    ]
-  }
-}

public/.htaccess

@@ -1,6 +0,0 @@
-# 301 REDIRECT WWW TO NON-WWW
-<IfModule mod_rewrite.c>
-RewriteEngine On
-RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
-RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
-</IfModule>

public/CNAME

@@ -1,2 +0,0 @@
-asimonson.com
-www.asimonson.com

public/_config.yml

@@ -1 +0,0 @@
-theme: minima

public/index.html

@@ -1,53 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="Simonson - Portfolio"
-      content="Digital portfolio of Andrew Simonson"
-    />
-    <meta property="og:title" content="European Travel Destinations" />
-    <meta property="og:type" content="article" />
-    <meta
-      property="og:description"
-      content="Digital Portfolio - Andrew Simonson"
-    />
-    <meta property="og:image" content="%PUBLIC_URL%/lol.jpg" />
-    <meta property="og:url" content="%PUBLIC_URL%" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta property="og:site_name" content="Andrew Simonson - Portfolio" />
-    <meta name="twitter:image:alt" content="some example picture idk" />
-    <!-- <meta property="og:title" content="__OG_TITLE__" />
-    <meta property="og:description" content="__OG_DESCRIPTION__" /> -->
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-E2V93W9CNV"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-
-      gtag("config", "G-E2V93W9CNV");
-    </script>
-
-    <title>Simonson - Portfolio</title>
-  </head>
-
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public/sitemap.xml

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  <url>
-    <loc>https://asimonson.com</loc>
-    <loc>https://asimonson.com/about</loc>
-    <loc>https://asimonson.com/projects</loc>
-    <loc>https://asimonson.com/Resume</loc>
-    <lastmod>2022-06-04</lastmod>
-  </url>
-</urlset>

src/App.js

@@ -1,56 +0,0 @@
-import { Route, Link, Routes, BrowserRouter as Router, Navigate } from "react-router-dom";
-
-import "./assets/css/App.css";
-import "./assets/css/checkbox.css"
-import "./assets/css/head.scss";
-import menu from "./assets/icons/menu.svg";
-import Nav from "./componets/Nav.js";
-import Socials from "./componets/Socials.js";
-import Name from "./componets/Name.js";
-import Home from "./pages/Home.js";
-import Projects from "./pages/Projects";
-import Activities from "./pages/Activities";
-import AboutMe from "./pages/AboutMe";
-import Idler from "./componets/Idler";
-import ErrorNotFound from "./pages/Error";
-import AOS from "aos";
-// import 'aos/dist/aos.css'; // You can also use <link> for styles
-import { toggleMenu } from "./scripts/responsive";
-
-AOS.init();
-function App() {
-  return (
-    <Router>
-      <Idler />
-      <div className="App">
-        <div className="header">
-          <Name />
-          <img src={menu} alt="menu" id="menu" onClick={toggleMenu} />
-          <Nav id="navbar">
-            <Link to="/">Home</Link>
-            <a href="Resume.pdf" target="_blank">
-              Resume
-            </a>
-            <Link to="/projects">Projects</Link>
-            {/* <Link to="/activities">Activities</Link> */}
-            <Link to="/about">About Me</Link>
-          </Nav>
-        </div>
-        <Routes>
-          {/* <Route exact path='' element={ <Navigate to='/' />} /> */}
-          <Route exact path="/" element={<Home />}></Route>
-          <Route exact path="/projects" element={<Projects />}></Route>
-          <Route exact path="activities" element={<Activities />}></Route>
-          <Route exact path="/about" element={<AboutMe />}></Route>
-          <Route exact path="/notFound" element={<ErrorNotFound />} />
-          <Route exact path="/*" element={<ErrorNotFound />} />
-        </Routes>
-        <div className="footer">
-          <Socials />
-        </div>
-      </div>
-    </Router>
-  );
-}
-
-export default App;

src/app.py

@@ -0,0 +1,43 @@
+import flask
+from flask_sitemap import Sitemap
+import sass
+
+app = flask.Flask(__name__)
+ext = Sitemap(app=app)
+sass.compile(dirname=('static/scss', 'static/css'), output_style='compressed')
+
+@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', title='Andrew Simonson - About Me', description="About Andrew Simonson", canonical='about')
+
+@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:])
+
+# @ext.register_generator
+# def index():
+#     # Not needed if you set SITEMAP_INCLUDE_RULES_WITHOUT_PARAMS=True
+#     yield 'index', {}
+
+if __name__ == '__main__':
+    app.run()

src/componets/Carousel.js

@@ -1,12 +0,0 @@
-import React from "react";
-import ImageGallery from 'react-image-gallery';
-
-export default function ResponsiveCarousel(props) {
-  return (
-    <div>
-      <div className="carousel-container">
-      <ImageGallery items={props.children}/>
-      </div>
-    </div>
-  );
-}

src/componets/ChessBed.js

@@ -1,127 +0,0 @@
-import React from "react";
-import bg from "../assets/chesscom-embed/diamonds.png";
-import def from "../assets/chesscom-embed/default.svg";
-
-export default class ChessBed extends React.Component {
-  constructor(props) {
-    super(props);
-    this.seeAccount = this.seeAccount.bind(this, props.username);
-    this.addChessEmbed = this.addChessEmbed.bind(this, props.username);
-    this.state = {
-      name: "Loading..",
-      pic: def,
-      ratings: {
-        rapid: "Loading",
-        blitz: "Loading",
-        bullet: "Loading",
-        tactics: "Loading",
-      },
-      loaded: "hidden"
-    };
-    this.diamonds = {
-      background: "black",
-      backgroundImage: `linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .75)), url(${bg})`,
-    };
-  }
-
-  seeAccount(username) {
-    window.top.location.href = "https://chess.com/member/" + username;
-  }
-
-  async 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) {
-      this.setState({
-        name: "Chess.com request failed",
-        ratings: {
-          rapid: "Site may",
-          blitz: "be blocked",
-          bullet: "by client.\n\n",
-          tactics: "not my fault :(",
-        },
-      });
-      return;
-    }
-    if (user.status === 200) {
-      user = await user.json();
-      stats = await stats.json();
-      this.setState({
-        name: user["username"],
-        pic: user.avatar,
-        ratings: {
-          rapid: stats.chess_rapid.last.rating,
-          blitz: stats.chess_blitz.last.rating,
-          bullet: stats.chess_bullet.last.rating,
-          tactics: stats.tactics.highest.rating,
-        },
-        loaded: ''
-      });
-    } else if (user === null || user.status === 403 || user.status === null) {
-      this.setState({
-        name: "Chess.com request failed"
-      });
-    } else {
-      this.setState({
-        name: "User Not Found",
-        loaded: ''
-      });
-    }
-  }
-
-  componentDidMount() {
-    this.addChessEmbed();
-  }
-
-  render() {
-    return (
-      <>
-        <div className="black">
-          <div
-            id="chessProfile"
-            onClick={this.seeAccount}
-            style={this.diamonds}
-          >
-            <div className="identity chessInfo">
-              <div className="pfpContainer">
-                <div>
-                  <img
-                    className="pfp"
-                    src={this.state.pic}
-                    alt={this.username}
-                  />
-                </div>
-              </div>
-              <h5 className="chessName">{this.state.name}</h5>
-            </div>
-            <div className="vContainer chessInfo">
-              <div className="vItem">
-                <div className={"chessIcon rapid " + this.state.loaded}>Ἓ</div>
-                <p>{this.state.ratings.rapid}</p>
-              </div>
-              <div className="vItem">
-                <div className={"chessIcon blitz " + this.state.loaded}>Ἔ</div>
-                <p>{this.state.ratings.blitz}</p>
-              </div>
-              <div className="vItem">
-                <div className={"chessIcon bullet " + this.state.loaded}>Ἕ</div>
-                <p>{this.state.ratings.bullet}</p>
-              </div>
-              <div className="vItem">
-                <div className={"chessIcon puzzles " + this.state.loaded}>ἕ</div>
-                <p>{this.state.ratings.tactics}</p>
-              </div>
-            </div>
-          </div>
-          <div className="bottomtext">
-            Chess.com Stat Embed by Andrew Simonson
-          </div>
-        </div>
-      </>
-    );
-  }
-}

src/componets/HexGrid.js

@@ -1,50 +0,0 @@
-import { skill } from '../scripts/skill'
-
-export default function HexGrid() {
-  return (
-    <div className="hex-wrapper">
-      <div className="hex-row hex-odd">
-        <div className="hex" onMouseOver={(event) => skill('python')}>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-        </div>
-        <div className="hex" onMouseOver={(event) => skill('js')}>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-        </div>
-      </div>
-      <div className="hex-row hex-even">
-        <div className="hex" onMouseOver={(event) => skill('html')}>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-          <h3>Ahoy</h3>
-        </div>
-        <div className="hex" onMouseOver={(event) => skill('sql')}>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-        </div>
-        <div className="hex" onMouseOver={(event) => skill('cpp')}>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-        </div>
-      </div>
-      <div className="hex-row hex-odd">
-        <div className="hex" onMouseOver={(event) => skill('other')}>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-        </div>
-        <div className="hex" onMouseOver={(event) => skill('tools')}>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-          <div className="hex-border"></div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/componets/Idler.js

@@ -1,102 +0,0 @@
-import Sketch from "react-p5";
-import React from "react";
-
-const balls = [];
-const density = 0.00005;
-let screenWidth = window.innerWidth + 10;
-let screenHeight = window.innerHeight + 10;
-
-export default class Idler extends React.Component {
-  setup = (p5, parentRef) => {
-    p5.frameRate(15);
-    const pix = screenHeight * screenWidth;
-    p5.createCanvas(screenWidth, screenHeight).parent(parentRef);
-    for (let i = 0; i < pix * density; i++) {
-      let thisBall = new Ball(
-        p5.random(screenWidth),
-        p5.random(screenHeight),
-        p5.random(6) + 3,
-        Math.exp(p5.random(4) + 3) / 1000 + 1,
-        p5.random(360)
-      );
-      balls.push(thisBall);
-    }
-
-    p5.stroke(255);
-  };
-
-  draw = (p5) => {
-    p5.background(32);
-
-    for (let i = 0; i < balls.length; i++) {
-      balls[i].update();
-      p5.stroke(200, 100);
-      p5.strokeWeight(2);
-      p5.fill(0);
-      p5.ellipse(balls[i].x, balls[i].y, balls[i].size, balls[i].size);
-    }
-    for (let i = 0; i < balls.length - 1; i++) {
-      for (let j = i + 1; j < balls.length; j++) {
-        let distance = p5.dist(balls[i].x, balls[i].y, balls[j].x, balls[j].y);
-        if (distance < 100){
-          p5.stroke(150);
-          p5.line(balls[i].x, balls[i].y, balls[j].x, balls[j].y);
-        }
-        else if (distance < 150) {
-          p5.stroke(100);
-          let chance = 0.3 ** (((p5.random(0.2) + 0.8) * distance) / 150);
-          if (chance < 0.5) {
-            p5.stroke(50);
-          }
-          p5.line(balls[i].x, balls[i].y, balls[j].x, balls[j].y);
-        }
-      }
-    }
-  };
-  render() {
-    const windowResized = (p5) => {
-      p5.resizeCanvas(p5.windowWidth, p5.windowHeight);
-      screenWidth = window.innerWidth + 10;
-      screenHeight = window.innerHeight + 10;
-    };
-    return (
-      <Sketch
-        windowResized={windowResized}
-        setup={this.setup}
-        draw={this.draw}
-        style={{ position: "fixed", zIndex: -69 }}
-      />
-    );
-  }
-}
-
-class Ball {
-  constructor(x, y, size, speed, angle) {
-    this.x = x;
-    this.y = y;
-    this.size = size;
-    this.speed = speed;
-    this.angle = angle;
-    this.calcChange();
-  }
-
-  calcChange() {
-    this.xSpeed = this.speed * Math.sin((this.angle * Math.PI) / 180);
-    this.ySpeed = this.speed * Math.cos((this.angle * Math.PI) / 180);
-  }
-
-  update() {
-    this.x += this.xSpeed;
-    this.y += this.ySpeed;
-    if (this.x > screenWidth) {
-      this.x -= screenWidth;
-    } else if (this.x < 0) {
-      this.x += screenWidth;
-    }
-    if (this.y > screenHeight) {
-      this.y -= screenHeight;
-    } else if (this.y < 0) {
-      this.y += screenHeight;
-    }
-  }
-}

src/componets/Name.js

@@ -1,37 +0,0 @@
-export default function Name() {
-  return (
-    <a href="/">
-      <div id="name-container">
-        <div className="glitch">
-          <div className="line name">
-            <h1 className="textGrad">Andrew Simonson</h1>
-          </div>
-          <div className="line name">
-            <h1 className="textGrad">Andrew Simonson</h1>
-          </div>
-          <div className="line name">
-            <h1 className="textGrad">Andrew Simonson</h1>
-          </div>
-          <div className="line name">
-            <h1 className="textGrad">Andrew Simonson</h1>
-          </div>
-          <div className="line name">
-            <h1 className="textGrad">Andrew Simonson</h1>
-          </div>
-          <div className="line name">
-            <h1 className="textGrad">Andrew Simonson</h1>
-          </div>
-          <div className="line name">
-            <h1 className="textGrad">Andrew Simonson</h1>
-          </div>
-          <div className="line name">
-            <h1 className="textGrad">Andrew Simonson</h1>
-          </div>
-          <div className="line name">
-            <h1 className="textGrad">Andrew Simonson</h1>
-          </div>
-        </div>
-      </div>
-    </a>
-  );
-}

src/componets/Nav.js

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export default function Nav(props) {
-    let items;
-    for (let i = 0; i < props.children.length; i++) {
-        items = (
-            <>
-                {items}
-                <div className='navElement'>{props.children[i]}</div>
-            </>
-        )
-    }
-    return (
-        <div className='navControl'>
-            <div className='navBar'>
-                {items}
-            </div>
-        </div>
-    )
-}

src/componets/Neon.js

@@ -1,21 +0,0 @@
-export default function ProjectList(props) {
-  let text;
-  props.children.forEach(function (x) {
-    text = (
-      <>
-        {text}
-        {x}
-      </>
-    );
-  });
-  text = (<div className='neonBox'>{text}</div>)
-  return (
-    <>
-      <div id="pBody">
-        <div className="fPage">
-          <div className="heightBox">{text}</div>
-        </div>
-      </div>
-    </>
-  );
-}

src/componets/Project.js

@@ -1,44 +0,0 @@
-import React from "react";
-import placeholder from "../assets/photos/placeholder.png";
-
-export default class Project extends React.Component {
-  render() {
-    let style = {
-      backgroundImage: "url(" + this.props.bgi + ")",
-    };
-    let links = <></>;
-    if (this.props.links != null) {
-      this.props.links.forEach((x) => {
-        links = (
-          <>
-            {links}
-            <a href={x[0]}>{x[1]}</a>
-          </>
-        );
-      });
-    } else {
-      links = (
-        <div className="placeholder">
-          <img alt="no links!" src={placeholder} />
-        </div>
-      );
-    }
-    return (
-      <div className={"project " + this.props.classes} data-aos="fade-up">
-        <div className="vFlex">
-          <div className="projTitle">
-            <h3>{this.props.title}</h3>
-            <p className={this.props.status + " tab"}>⬤</p>
-          </div>
-          <div className='projBody vFlex spaceBetween'>
-            <div style={style} className='bgi' />
-            <div className="topBox">
-              <p className="backedBody">{this.props.children}</p>
-            </div>
-            <div className="bottomBox">{links}</div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}

src/componets/ProjectList.js

@@ -1,18 +0,0 @@
-import React from 'react'
-
-export default function ProjectList(props){
-    let projects;
-    props.children.forEach(function(x){
-        projects = (
-            <>
-            {projects}
-            {x}
-            </>
-        );
-    });
-    return(
-        <div className={'projectList centeredForeground ' + props.classes} data-aos='fade-up'>
-            {projects}
-        </div>
-    );
-} 

src/componets/Skills.js

@@ -1,17 +0,0 @@
-import React from 'react'
-
-export default function Skills(props){
-    let allSkills;
-    props.children.forEach(x => {
-        allSkills = (
-            <>
-                {allSkills}
-                <li className='skill'>{x}</li>
-            </>
-        )
-    });
-    return (
-        <ul className='skills'>
-            {allSkills}
-        </ul>);
-}

src/componets/Socials.js

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import github from '../assets/icons/github.svg'
-import instagram from '../assets/icons/instagram.svg'
-import linkedin from '../assets/icons/linkedin.svg'
-import email from '../assets/icons/email.svg'
-
-export default function Socials(){
-    return(
-        <div className='socials'>
-                <a href='https://github.com/asimonson1125'><img alt='Github' src={github} /></a>
-                <a href='https://www.instagram.com/an_a.simonson/'><img alt='Instagram' src={instagram} /></a>
-                <a href='https://www.linkedin.com/in/simonsonandrew/'><img alt='LinkedIn' src={linkedin} /></a>
-                <a href='mailto:asimonson1125@gmail.com'><img alt='E-mail' src={email} /></a>
-                <div id='vertLine'></div>
-        </div>
-    )
-}

src/componets/TimeItem.js

@@ -1,21 +0,0 @@
-import React from "react";
-
-export default class TimeItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.date = props.date;
-    this.classes = props.classes;
-    this.item = (
-      <>
-        <h2>{props.title}</h2>
-        <div className="timeline-deets">
-          <p>{props.children}</p>
-        </div>
-      </>
-    );
-  }
-
-  render() {
-    return <div className={"timeitem " + this.classes}><p className="datetext">{this.date}</p><div className="timeline-item">{this.item}</div></div>;
-  }
-}

src/componets/Timeline.js

@@ -1,17 +0,0 @@
-import React from "react";
-
-export default class Timeline extends React.Component {
-  constructor(props) {
-    super(props);
-    this.items = props.children;
-    this.classes = props.classes;
-  }
-
-  componentDidMount() {}
-
-  render() {
-    return <div className={"timeline " + this.classes}>
-        {this.items}
-    </div>;
-  }
-}

src/index.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-
-const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(
-  // <React.StrictMode>
-    <App />
-  // </React.StrictMode>
-  );

src/pages/AboutMe.js

@@ -1,265 +0,0 @@
-import React, { useEffect } from "react";
-// import MyCarousel from "../componets/Carousel.js";
-import ChessBed from "../componets/ChessBed.js";
-// import HexGrid from "../componets/HexGrid";
-import Skills from "../componets/Skills";
-import Timeline from "../componets/Timeline";
-import TimeItem from "../componets/TimeItem.js";
-import { toggle } from "../scripts/checkbox";
-// import img1 from '../assets/photos/itsa_me.JPG'
-// import img2 from '../assets/photos/me_robot.jpeg'
-// import img3 from "../assets/photos/AcademicTeam.jpg";
-// import img4 from "../assets/photos/hagerstownVex2019.jpg";
-// import img5 from "../assets/photos/WeThePeople_Districts.jpg";
-// import img6 from "../assets/photos/WeThePeople.jpg";
-// import img7 from "../assets/photos/WeThePeople_NationalsSetup.jpg";
-
-export default function AboutMe() {
-  useEffect(() => {
-    // This will run when the page first loads and whenever the title changes
-    document.title = "Andrew Simonson - About Me";
-  }, []);
-
-  return (
-    <div className="foreground" onLoad={() => toggle("up")}>
-      <meta
-        name="description"
-        content="About Andrew Simonson - learn all about me and the stuff I do, it's real great."
-      />
-      <link rel="canonical" href="https://asimonson.com/about"></link>
-      <div className="col">
-        <div id="aboutMe" data-aos="fade-up">
-          <h2 className="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> */}
-          {/*<img src={img1} alt='Me' className='boxedImg' />*/}
-        </div>
-      </div>
-      <div className="col">
-        <div id="skills" data-aos="fade-up">
-          <h2>Skills</h2>
-          {/* <div id="skillList">
-            <HexGrid></HexGrid>
-            <div id="skillDisp">
-              <h2></h2>
-              <p></p>
-            </div>
-          </div> */}
-          <Skills>
-            {[
-              "Python",
-              "JavaScript",
-              "Java",
-              "C",
-              "C++",
-              "MIPS Assembly",
-              "Processing",
-              "P5.js",
-              "SQL",
-              "SQLite",
-              "PostgreSQL",
-              "SQLAlchemy",
-              "HTML",
-              "CSS",
-              "Docker",
-              "LaTeX",
-              "ArcGIS",
-              "Git",
-              "Github",
-              "Linux",
-              "OKD4",
-              "Kubernetes",
-              "Angular",
-              "Flask",
-              "Jinja",
-              "DOM Scraping",
-              "Google API",
-              "React",
-              "Node.js",
-              "ArcGIS",
-            ]}
-          </Skills>
-          <div className="chess">
-            <ChessBed username="asimonson1125"></ChessBed>
-          </div>
-        </div>
-        {/* <div data-aos="fade-up" className="elementBlock">
-          <h2>Extracirricular Awards</h2>
-          <MyCarousel className="carousel" data-aos="fade-up">
-            {[
-              {
-                original: img4,
-                description:
-                  "High School VEX Robotics President and Team Leader",
-              },
-              {
-                original: img5,
-                description:
-                  "We the People Civics Competition District Champions",
-              },
-              {
-                original: img6,
-                description: "We The People State Civics Competition Champions",
-              },
-              {
-                original: img7,
-                description:
-                  "what it looks like to compete in We the People Nationals, circa 2020",
-              },
-              {
-                original: img3,
-                description: "Academic Team county championships",
-              },
-            ]}
-          </MyCarousel>
-        </div> */}
-      </div>
-      <div className="col">
-        <div className="checkbox-wrapper">
-          <div className="flex start">
-            <label className="switch" htmlFor="pinned">
-              <input
-                type="checkbox"
-                id="pinned"
-                onClick={() => toggle("up")}
-                defaultChecked
-              />
-              <div className="slider round"></div>
-              <strong>Pinned</strong>
-            </label>
-          </div>
-          <div className="flex start">
-            <label className="switch" htmlFor="education">
-              <input
-                type="checkbox"
-                id="education"
-                onClick={() => toggle("up")}
-              />
-              <div className="slider round"></div>
-              <strong>Education</strong>
-            </label>
-          </div>
-          <div className="flex start">
-            <label
-              className="switch"
-              htmlFor="experience"
-              onClick={() => toggle("up")}
-            >
-              <input type="checkbox" id="experience" />
-              <div className="slider round"></div>
-              <strong>Work Experience</strong>
-            </label>
-          </div>
-          <div className="flex start">
-            <label
-              className="switch"
-              htmlFor="technical"
-              onClick={() => toggle("up")}
-            >
-              <input type="checkbox" id="technical" />
-              <div className="slider round"></div>
-              <strong>Technical</strong>
-            </label>
-          </div>
-        </div>
-        <Timeline classes="checkbox-client">
-          <TimeItem
-            date="01/2023 - 05/2023"
-            title="Co-op @ Dow Chemical"
-            classes="pinned experience technical"
-          >
-            Spring 2023 Semester Co-op under Dow Chemical's Global Reactive
-            Chemicals team in Analytical Sciences. Responsibilities included
-            management of chemical compatability data and tool creation for
-            parsing, generating, and submitting reports.
-          </TimeItem>
-          <TimeItem date="08/26/2021" title="Started Portfolio">
-            I started building this website on this day. I wish I could say I
-            was farther along than I am.
-          </TimeItem>
-          <TimeItem
-            date="08/2021 - 05/2025"
-            title="Rochester Institute of Technology"
-            classes="pinned education technical"
-          >
-            Studying in Rochester Institute of Technology's Computer Science BS
-            program with a minor in International Relations.
-          </TimeItem>
-          <TimeItem
-            date="04/2021 - 08/2021"
-            title="Pretzel & Pizza Creations"
-            classes="experience"
-          >
-            Worked part-time as a chef, managing active ingredient supply and
-            fulfilling orders. I personally recommend the stuffed pretzels.
-          </TimeItem>
-          <TimeItem
-            date="08/2020 - 12/2020"
-            title="Election Official"
-            classes="experience"
-          >
-            Trained in voter registry operations and provisional voting by the
-            Washington County Board of Elections for the 2020 US Presidential
-            Election.
-          </TimeItem>
-          <TimeItem
-            date="09/2016 - 06/2021"
-            title="Boonsboro High School"
-            classes="education"
-          >
-            Graduated high school with highest honors.
-            <br />
-            Member of National Honor Society, Academic Team County Champions.
-            Participated in Physics Olympics, Robotics Club, and scored at state
-            championships in{" "}
-            <a href="https://www.athletic.net/athlete/10265585/track-and-field/high-school">
-              Cross Country and Track and Field (4x800, 800)
-            </a>
-            .{" "}
-          </TimeItem>
-          <TimeItem
-            date="10/2015 - 04/2021"
-            title="Vex Robotics Team Lead/Club President"
-            classes="technical"
-          >
-            Led 5 teams through middle and high school to VEX Robotics
-            Competitions, elevating Boonsboro from county group-stage
-            elimination to its first state championship participation.
-            Reorganized club and set up its first interface with the community +
-            sponsors
-          </TimeItem>
-        </Timeline>
-      </div>
-    </div>
-  );
-}

src/pages/Activities.js

@@ -1,14 +0,0 @@
-import Neon from "../componets/Neon";
-
-export default function ErrorNotFound() {
-  return (
-    <>
-      <link rel="canonical" href="https://asimonson.com/activities"></link>
-      <Neon color="#fff">
-        <h1 className="neon">ERROR 404</h1>
-        <br />
-        <h3 className="neon">URL Not Found</h3>
-      </Neon>
-    </>
-  );
-}

src/pages/Error.js

@@ -1,8 +0,0 @@
-import Neon from '../componets/Neon'
-
-export default function ErrorNotFound() {
-    return (<>
-    <link rel="canonical" href="https://asimonson.com/404"></link>
-        <Neon color='#fff'><h1 className='neon'>ERROR 404</h1><br /><h3 className='neon'>URL Not Found</h3></Neon>
-    </>)
-}

src/pages/Home.js

@@ -1,49 +0,0 @@
-import React, { useEffect } from "react";
-import ChessBed from "../componets/ChessBed.js";
-
-export default function Home() {
-  const langstyle = {
-    width: "350px",
-    height: "165px",
-    border: "none",
-    display: "block",
-  };
-
-  useEffect(() => {
-    // This will run when the page first loads and whenever the title changes
-    document.title = "Andrew Simonson - Portfolio Home";
-  }, []);
-
-  return (
-    <div id="home">
-      <link rel="canonical" href="https://asimonson.com/"></link>
-      <meta
-        name="description"
-        content="Andrew Simonson's Portfolio Website - Homepage"
-      />
-
-      <div className="homeground">
-        <div className="relative">
-          <div className="flex">
-            <div id="HomeContent" data-aos="fade-up">
-              <h1>Andrew Simonson</h1>
-              <h3>
-                Computer Science student at Rochester Institute of Technology
-              </h3>
-            </div>
-          </div>
-          <div className="onRight" data-aos="fade-up">
-            <iframe
-              title="langstats"
-              src="./readme-stats-vercel-01-25-2023.svg"
-              style={langstyle}
-            ></iframe>
-            <div className="chess">
-              <ChessBed username="asimonson1125"></ChessBed>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/pages/Projects.js

@@ -1,287 +0,0 @@
-import React, { useEffect } from "react";
-import ProjectList from "../componets/ProjectList";
-import Project from "../componets/Project";
-import { toggle } from "../scripts/checkbox";
-import github from "../assets/icons/github.svg";
-import globe from "../assets/icons/globe.svg";
-
-import geovisF from "../assets/photos/geovisF.png";
-import chessbed from "../assets/photos/chessbed.png";
-import occupyrit from "../assets/photos/occupyRIT.png";
-import slate from "../assets/photos/slate.png";
-import website from "../assets/photos/website.png";
-import resume from "../assets/photos/resume.png";
-import yugoslavia from "../assets/photos/ceoOfYugo.png";
-import vexbutt from "../assets/photos/vexcodeButtons.jpeg";
-
-export default function Projects() {
-  useEffect(() => {
-    // This will run when the page first loads and whenever the title changes
-    document.title = "Andrew Simonson - Projects";
-  }, []);
-
-  return (
-    <div className="foreground" onLoad={() => toggle('')}>
-      <link rel="canonical" href="https://asimonson.com/projects"></link>
-      <meta
-        name="description"
-        content="Recent projects by Andrew Simonson on his lovely portfolio website :)"
-      />
-      <div data-aos="fade-up">
-        <h2 className="concentratedHead">Projects</h2>
-        <p>
-          Project status is indicated by the color of the project card:
-          <br />
-          <span className="complete">⬤</span> - Complete
-          <br />
-          <span className="WIP">⬤</span> - Work In Progress
-          <br />
-          <span className="incomplete">⬤</span> - Incomplete
-        </p>
-      </div>
-      <div className="checkbox-wrapper">
-        <div className="flex start">
-        <label className="switch" htmlFor="pinned">
-          <input type="checkbox" id="pinned" onClick={() => toggle('')} defaultChecked/>
-          <div className="slider round"></div>
-          <strong>Pinned</strong>
-        </label>
-        </div>
-        <div className="flex start">
-        <label className="switch" htmlFor="programming">
-          <input type="checkbox" id="programming" onClick={() => toggle('')} />
-          <div className="slider round"></div>
-          <strong>Programming</strong>
-        </label>
-        </div>
-        <div className="flex start">
-        <label className="switch" htmlFor="geospacial" onClick={() => toggle('')}>
-          <input type="checkbox" id="geospacial" />
-          <div className="slider round"></div>
-          <strong>Geospacial</strong>
-        </label>
-        </div>
-      </div>
-      <ProjectList classes="checkbox-client">
-        <Project
-          status="complete"
-          title="Lower 48 Alt. Energy Map"
-          bgi={geovisF}
-          classes="pinned geospacial"
-          links={[
-            [
-              "https://ritarcgis.maps.arcgis.com/apps/dashboards/17d5bda01edc4a2eb6205a4922d889c9",
-              <img alt="ArcGIS" src={globe} />,
-            ],
-          ]}
-        >
-          ArcGIS Map of the most effective alternative energy sources in the
-          continental United States
-        </Project>
-        <Project
-          status="WIP"
-          title="OccupyRIT"
-          classes="pinned programming"
-          bgi={occupyrit}
-          links={[
-            [
-              "https://github.com/asimonson1125/Occupy-RIT",
-              <img alt="github" src={github} />,
-            ],
-          ]}
-        >
-          Collects RIT Gym Occupancy data, determining busiest workout
-          times.
-        </Project>
-        <Project
-          status="complete"
-          title="Chesscom Embeds"
-          classes="programming"
-          bgi={chessbed}
-          links={[
-            [
-              "https://github.com/asimonson1125/chesscom-embed",
-              <img alt="github" src={github} />,
-            ],
-          ]}
-        >
-          A template for creating Chess.com user profile embeds
-        </Project>
-        <Project
-          status="complete"
-          title="Resume"
-          classes="programming"
-          bgi={resume}
-          links={[
-            [
-              "https://github.com/asimonson1125/Resume",
-              <img alt="github" src={github} />,
-            ],
-            [
-              "https://asimonson.com/Resume.pdf/",
-              <img alt="site" src={globe} />,
-            ],
-          ]}
-        >
-          My Resume, made in LaTeX with a custom design derived by the AltaCV
-          template on OverLeaf.
-        </Project>
-        <Project
-          status="WIP"
-          title="Digital Portfolio"
-          classes="programming"
-          bgi={website}
-          links={[
-            [
-              "https://github.com/asimonson1125/asimonson1125.github.io",
-              <img alt="github" src={github} />,
-            ],
-            ["https://asimonson.com/", <img alt="site" src={globe} />],
-          ]}
-        >
-          A personal portfolio site made with React.js.
-        </Project>
-        <Project
-          status="complete"
-          title="Slate"
-          classes="pinned programming"
-          bgi={slate}
-          links={[
-            [
-              "https://github.com/asimonson1125/Slate",
-              <img alt="github" src={github} />,
-            ],
-            ["https://slate.csh.rit.edu/", <img alt="site" src={globe} />],
-          ]}
-        >
-          Slate is a web app designed to help event coordinators schedule events
-          by congregating participant calendar data. Includes Computer Science
-          House account integration.
-        </Project>
-        <Project
-          status="complete"
-          title="Humans vs. Zombies Bot"
-          classes="programming"
-          links={[
-            [
-              "https://github.com/asimonson1125/HvZ-bot",
-              <img alt="github" src={github} />,
-            ],
-          ]}
-        >
-          A Discord bot to handle role management and statistics for RIT's
-          Humans vs. Zombies games.
-        </Project>
-        <Project
-          status="WIP"
-          title="FinTech"
-          classes="pinned programming"
-          links={[
-            [
-              "https://github.com/LukeHorigan/Financial-Management-Assocation-",
-              <img alt="github" src={github} />,
-            ],
-          ]}
-        >
-          A team derived from the RIT Financial Management Association dedicated
-          to learning about financial management of equities using automated
-          solutions developed by students.
-        </Project>
-        <Project status="complete" classes="programming" title="Browser Trivia Bot">
-          A tampermonkey tool used to automatically answer and submit online
-          trivia forms, which can be tailored to different site layouts.
-          <br />
-          <br />
-          Source is currently private.
-        </Project>
-        <Project
-          status="complete"
-          title="Querist"
-          classes="programming"
-          links={[
-            [
-              "https://github.com/asimonson1125/Querist",
-              <img alt="github" src={github} />,
-            ],
-          ]}
-        >
-          A modular discord bot to manage class discord servers divided by class
-          sections. Used in my Web and Mobile 101 class discord server.
-        </Project>
-        <Project
-          status="complete"
-          title="Acumen"
-          classes="programming"
-          links={[
-            [
-              "https://github.com/asimonson1125/Acumen",
-              <img alt="github" src={github} />,
-            ],
-          ]}
-        >
-          A personal Discord bot focused on statistical insight and role
-          management for NationsGame, including NG Rolls Sim accessibility.
-        </Project>
-        <Project
-          status="complete"
-          title="NationsGame Rolls Sim"
-          classes="programming"
-          bgi={yugoslavia}
-          links={[
-            [
-              "https://github.com/asimonson1125/NG-Rolls-Simulator",
-              <img alt="github" src={github} />,
-            ],
-          ]}
-        >
-          A simulator for the browser game, NationsGame, to analyze unit
-          composition and predict in-game victors and unit statistics.
-          <br />
-          Unfortunately, NationsGame is now defunct. Limited screenshots of
-          functionality.
-        </Project>
-        <Project
-          status="incomplete"
-          title="WallCycle"
-          classes="programming"
-          links={[
-            [
-              "https://github.com/asimonson1125/WallCycle",
-              <img alt="github" src={github} />,
-            ],
-          ]}
-        >
-          A GNOME extension that cycles through a folder of wallpapers.
-        </Project>
-        <Project
-          status="complete"
-          title="VEXcode Button Engine"
-          classes="programming"
-          bgi={vexbutt}
-          links={[
-            [
-              "https://github.com/asimonson1125/VEXcode-Button-Generator",
-              <img alt="github" src={github} />,
-            ],
-          ]}
-        >
-          VEXcode button library + examples and template for the VEX V5 brain
-        </Project>
-        <Project
-          status="complete"
-          title="WinKeylogger"
-          classes="programming"
-          links={[
-            [
-              "https://github.com/asimonson1125/WinKeylogger",
-              <img alt="github" src={github} />,
-            ],
-          ]}
-        >
-          A C++ keylogger for windows based off a udemy course with my custom
-          modifications and powershell script.
-        </Project>
-      </ProjectList>
-    </div>
-  );
-}

src/scripts/skill.js

@@ -1,26 +0,0 @@
-let currentType = "";
-
-const dict = {
-    'python': {'name': 'Python', 'info': 'Python and shit'},
-    'js': {'name': 'Javascript', 'info': 'JS and shit'},
-    'html': {'name': 'HTML/CSS', 'info': 'also SCSS'},
-    'sql': {'name': 'HTML/CSS', 'info': 'also SCSS'},
-    'cpp': {'name': 'HTML/CSS', 'info': 'also SCSS'},
-    'other': {'name': 'HTML/CSS', 'info': 'also SCSS'},
-    'tools': {'name': 'HTML/CSS', 'info': 'also SCSS'}
-}
-
-export function skill(type) {
-  if (currentType === type) {
-    return;
-  }
-  currentType = type;
-  let disp = document.getElementById("skillDisp");
-  disp.classList = [];
-  let ugh = disp.offsetWidth; // without this delay the animation doesn't begin.  idfk.
-  disp.querySelector('h2').textContent = dict[type]['name'];
-  disp.querySelector('p').textContent = dict[type]['info'];
-  disp.classList.add(type);
-  disp.classList.add('swipeIn');
-  return ugh; // gets rid of unused variable warning
-}

src/static/css/App.css

@@ -1,8 +1,6 @@
-@import "~react-image-gallery/styles/css/image-gallery.css";
-
 @font-face {
   font-family: "neon-future";
-  src: url("../fonts/Neon\ Future.ttf")
+  src: url("../fonts/Neon Future.ttf")
 }
 
 @font-face {
@@ -52,6 +50,14 @@ body {
   cursor: pointer;
 }
 
+#defaultCanvas0 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  position: fixed;
+  z-index: -69;
+}
+
 h1, h2 {
   color: #ecebeb;
 }
@@ -108,9 +114,10 @@ a {
 
 .name {
   display: inline;
-  background: url("../../assets/photos/sun.png") 0/5rem no-repeat;
+  background: url("../photos/sun.png") 0/5rem no-repeat;
   background-size: contain;
   padding-left: 5.5rem;
+  font-size: xx-large;
 }
 
 .glitch {
@@ -160,6 +167,18 @@ a {
   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;
@@ -253,10 +272,12 @@ a {
   right: 0;
   top: 0;
   max-width: 100vw;
+  margin-right: 5px;
 }
 
-.onRight > * {
+.onRight>* {
   margin: auto;
+  margin-bottom: 5px;
 }
 
 .bgi {
@@ -447,7 +468,7 @@ a {
   overflow: hidden;
 }
 
-.projTitle > * {
+.projTitle>* {
   margin-bottom: 0;
 }
 
@@ -637,6 +658,39 @@ a {
   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;
@@ -686,15 +740,7 @@ a {
   flex-direction: column;
   max-height: 100%;
   max-width: 100%;
-}
-
-.vItem {
-  display: inline-block;
-}
-
-.vItem p {
-  margin: 0px;
-  display: inline;
+  justify-content: space-around;
 }
 
 .chessIcon {
@@ -735,17 +781,17 @@ a {
   text-decoration: underline;
 }
 
-.timeline-item{
+.timeline-item {
   border-left: solid #AAAAAA 3px;
 }
 
-.timeline-item h2{
+.timeline-item h2 {
   margin-top: 0px;
   margin-left: .5em;
   font-family: robotoreg;
 }
 
-.timeline-item p{
+.timeline-item p {
   margin-bottom: 0px;
   padding-bottom: 2em;
   padding-left: 3em;
@@ -837,6 +883,7 @@ a {
   .onRight {
     position: unset;
     margin-top: 3rem;
+    margin-right: 0;
   }
 
   .col {

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 -333ms linear infinite}@keyframes glitch1{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(2){animation:clip 6000ms -1200ms linear infinite,glitch2 2500ms -129ms linear infinite}@keyframes glitch2{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(-4px);color:#AC1212}99%{transform:translateX(0px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(3){animation:clip 6000ms -1800ms linear infinite,glitch3 2500ms -458ms linear infinite}@keyframes glitch3{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(4){animation:clip 6000ms -2400ms linear infinite,glitch4 2500ms -490ms linear infinite}@keyframes glitch4{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-4px);color:#4E9A26}98%{transform:translateX(-1px);color:#AC1212}99%{transform:translateX(-2px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(5){animation:clip 6000ms -3000ms linear infinite,glitch5 2500ms -53ms linear infinite}@keyframes glitch5{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(0px);color:#4E9A26}98%{transform:translateX(4px);color:#AC1212}99%{transform:translateX(-3px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(6){animation:clip 6000ms -3600ms linear infinite,glitch6 2500ms -710ms linear infinite}@keyframes glitch6{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(5px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(7){animation:clip 6000ms -4200ms linear infinite,glitch7 2500ms -450ms linear infinite}@keyframes glitch7{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(3px);color:#4E9A26}98%{transform:translateX(0px);color:#AC1212}99%{transform:translateX(0px);color:#fff}100%{transform:translateX(0)}}.line:nth-child(8){animation:clip 6000ms -4800ms linear infinite,glitch8 2500ms -696ms linear infinite}@keyframes glitch8{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(9){animation:clip 6000ms -5400ms linear infinite,glitch9 2500ms -595ms linear infinite}@keyframes glitch9{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(10){animation:clip 6000ms -6000ms linear infinite,glitch10 2500ms -479ms linear infinite}@keyframes glitch10{0%{transform:translateX(0)}96%{transform:translateX(0);color:#fff}97%{transform:translateX(-4px);color:#4E9A26}98%{transform:translateX(3px);color:#AC1212}99%{transform:translateX(-1px);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/js/checkbox.js

@@ -1,4 +1,4 @@
-export function toggle(dir) {
+function toggle(dir) {
   let toggles = document.querySelectorAll(
     ".checkbox-wrapper input[type=checkbox]"
   );

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;
+  }
+}

src/static/js/idler.js

@@ -0,0 +1,92 @@
+const balls = [];
+const density = 0.00003;
+let screenWidth = window.innerWidth + 10;
+let screenHeight = window.innerHeight + 10;
+
+class Ball {
+  constructor(x, y, size, speed, angle) {
+    this.x = x;
+    this.y = y;
+    this.size = size;
+    this.speed = speed;
+    this.angle = angle;
+    this.calcChange();
+  }
+
+  calcChange() {
+    this.xSpeed = this.speed * Math.sin((this.angle * Math.PI) / 180);
+    this.ySpeed = this.speed * Math.cos((this.angle * Math.PI) / 180);
+  }
+
+  update() {
+    this.x += this.xSpeed;
+    this.y += this.ySpeed;
+    if (this.x > screenWidth) {
+      this.x -= screenWidth;
+    } else if (this.x < 0) {
+      this.x += screenWidth;
+    }
+    if (this.y > screenHeight) {
+      this.y -= screenHeight;
+    } else if (this.y < 0) {
+      this.y += screenHeight;
+    }
+    this.draw();
+  }
+
+  draw() {
+    stroke(200, 100);
+    strokeWeight(2);
+    fill(0);
+    ellipse(this.x, this.y, this.size, this.size);
+  }
+}
+
+function setup() {
+  frameRate(15);
+  const pix = screenHeight * screenWidth;
+  createCanvas(screenWidth, screenHeight);
+  for (let i = 0; i < pix * density; i++) {
+    let thisBall = new Ball(
+      random(screenWidth),
+      random(screenHeight),
+      random(6) + 3,
+      Math.exp(random(4) + 3) / 1000 + 1,
+      random(360)
+    );
+    balls.push(thisBall);
+  }
+
+  stroke(255);
+}
+
+function windowResized() {
+  screenWidth = window.innerWidth + 10;
+  screenHeight = window.innerHeight + 10;
+  resizeCanvas(screenWidth, screenHeight);
+}
+
+function draw() {
+  background(32);
+
+  for (let i = 0; i < balls.length; i++) {
+    balls[i].update();
+  }
+  for (let i = 0; i < balls.length - 1; i++) {
+    for (let j = i + 1; j < balls.length; j++) {
+      let distance = dist(balls[i].x, balls[i].y, balls[j].x, balls[j].y);
+      if (distance < 100){
+        stroke(150);
+        line(balls[i].x, balls[i].y, balls[j].x, balls[j].y);
+      }
+      else if (distance < 150) {
+        stroke(100);
+        let chance = 0.3 ** (((random(0.2) + 0.8) * distance) / 150);
+        if (chance < 0.5) {
+          stroke(50);
+        }
+        line(balls[i].x, balls[i].y, balls[j].x, balls[j].y);
+      }
+    }
+  }
+}

src/static/js/responsive.js

@@ -74,7 +74,7 @@ function scrollFunction() {
   }
 }
 
-export function toggleMenu() {
+function toggleMenu() {
   if (window.innerWidth < 1200) {
     const e = document.querySelector(".navControl");
     const bar = document.querySelector(".header");

src/templates/error.html

@@ -0,0 +1,11 @@
+{% extends "header.html" %} {% block content %}
+<div class="fPage">
+  <div class="heightBox">
+    <div class="neonBox">
+      <h1 class="neon">ERROR {{error}}</h1>
+      <br /><br />
+      <h3 class="neon">{{message}}</h3>
+    </div>
+  </div>
+</div>
+{% endblock %}

src/templates/header.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="{{ description }}" />
+    <meta property="og:title" content="Andrew Simonson" />
+    <!-- <meta property="og:type" content="article" /> -->
+    <meta
+      property="og:description"
+      content="Digital Portfolio - Andrew Simonson"
+    />
+    <meta
+      property="og:image"
+      content="{{ url_for('static', filename='photos/sun.png') }}"
+    />
+    <meta property="og:url" content="https://asimonson.com" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="og:site_name" content="Andrew Simonson - Portfolio" />
+    <meta name="twitter:image:alt" content="some example picture idk" />
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-E2V93W9CNV"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-E2V93W9CNV");
+    </script>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='css/App.css') }}"
+    />
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='css/checkbox.css') }}"
+    />
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='css/head.css') }}"
+    />
+
+    <link rel="canonical" href="https://asimonson.com/{{ canonical }}" />
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
+    <script src="{{ url_for('static', filename='js/idler.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/checkbox.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/responsive.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/chessbed.js') }}"></script>
+    <title>{{ title }}</title>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- https://jinja.palletsprojects.com/en/3.1.x/templates/#include -->
+    <div class="App">
+      <div class="header">
+
+        <a href="/">
+          <div id="name-container">
+            <div class="glitch">
+              {% for i in range(9) %}
+              <div class="line name">
+                <span class="textGrad">Andrew Simonson</span>
+              </div>
+              {% endfor %}
+            </div>
+          </div>
+        </a>
+
+        <img
+          src="{{ url_for('static', filename='icons/menu.svg')}}"
+          alt="menu"
+          id="menu"
+          onClick="toggleMenu()"
+        />
+        <div class="navControl">
+          <div class="navBar">
+            <div class="navElement">
+              <a href="/">Home</a>
+            </div>
+            <div class="navElement">
+              <a href="Resume.pdf" target="_blank"> Resume </a>
+            </div>
+            <div class="navElement">
+              <a href="/projects">Projects</a>
+            </div>
+            <!-- <a href="/activities">Activities</a> -->
+            <div class="navElement">
+              <a href="/about">About Me</a>
+            </div>
+          </div>
+        </div>
+        <div class="footer">
+          <!-- <Socials /> -->
+        </div>
+      </div>
+    </div>
+    <div id="root">{% block content %}{% endblock %}</div>
+  </body>
+</html>

src/templates/home.html

@@ -0,0 +1,23 @@
+{% extends "header.html" %} {% block content %}
+<div class="homeground">
+  <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>
+    </div>
+    <div class="onRight" data-aos="fade-up">
+      <iframe
+        title="langstats"
+        src="{{ url_for('static', filename='readme-stats-vercel-01-25-2023.svg') }}"
+        class="langstats"
+      ></iframe>
+      <div class="chess">
+        {% from 'partials/chess.html' import chess %}
+        {{ chess('asimonson1125') }}
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}

src/templates/partials/chess.html

@@ -0,0 +1,41 @@
+{% macro chess(username) %}
+<div class="black">
+  <div
+    id="chessProfile"
+    class="diamonds"
+    onClick="window.top.location.href = 'https://chess.com/member/{{ username }}'"
+  >
+    <div class="identity chessInfo">
+      <div class="pfpContainer">
+        <div>
+          <img class="pfp chessImage" src='{{ url_for('static',
+          filename='chesscom-embed/default.svg') }}' alt={{ username }} />
+        </div>
+      </div>
+      <h5 class="chessName">Loading...</h5>
+    </div>
+    <div class="vContainer chessInfo">
+      <div class="vItem chessRapid">
+        <div class="chessIcon rapid">Ἓ</div>
+        <div class="chessStat"></div>
+      </div>
+      <div class="vItem chessBlitz">
+        <div class="chessIcon blitz">Ἔ</div>
+        <div class="chessStat"></div>
+      </div>
+      <div class="vItem chessBullet">
+        <div class="chessIcon bullet">Ἕ</div>
+        <div class="chessStat"></div>
+      </div>
+      <div class="vItem chessPuzzles">
+        <div class="chessIcon puzzles">ἕ</div>
+        <div class="chessStat"></div>
+      </div>
+    </div>
+  </div>
+  <div class="bottomtext">Chess.com Stat Embed by Andrew Simonson</div>
+</div>
+<script>
+  addChessEmbed("{{ username }}");
+</script>
+{%- endmacro %}