mirror of
https://github.com/asimonson1125/asimonson1125.github.io.git
synced 2026-02-25 05:09:49 -06:00
Merge pull request #20 from asimonson1125/nginxdev
catch nginx-dev branch up to main
This commit is contained in:
GitHub
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,3 +1,4 @@
|
|||||||
.venv
|
.venv
|
||||||
__pycache__
|
__pycache__
|
||||||
notes.txt
|
notes.txt
|
||||||
|
react_OLD
|
||||||
2
react_OLD/.gitattributes
vendored
2
react_OLD/.gitattributes
vendored
@@ -1,2 +0,0 @@
|
|||||||
# Auto detect text files and perform LF normalization
|
|
||||||
* text=auto
|
|
||||||
26
react_OLD/.gitignore
vendored
26
react_OLD/.gitignore
vendored
@@ -1,26 +0,0 @@
|
|||||||
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
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
# 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"]
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
asimonson.com
|
|
||||||
www.asimonson.com
|
|
||||||
Binary file not shown.
@@ -1 +0,0 @@
|
|||||||
theme: minima
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
@@ -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>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 361 KiB |
@@ -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"
|
|
||||||
}
|
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
<svg width="350" height="165" viewBox="0 0 350 165" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
|
|
||||||
<title id="titleId"/>
|
|
||||||
<desc id="descId"/>
|
|
||||||
<style>
|
|
||||||
.header {
|
|
||||||
font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
|
|
||||||
fill: #fabd2f;
|
|
||||||
animation: fadeInAnimation 0.8s ease-in-out forwards;
|
|
||||||
}
|
|
||||||
@supports(-moz-appearance: auto) {
|
|
||||||
/* Selector detects Firefox */
|
|
||||||
.header { font-size: 15.5px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideInAnimation {
|
|
||||||
from {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
width: calc(100%-100px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes growWidthAnimation {
|
|
||||||
from {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.lang-name {
|
|
||||||
font: 400 11px "Segoe UI", Ubuntu, Sans-Serif;
|
|
||||||
fill: #8ec07c;
|
|
||||||
}
|
|
||||||
.stagger {
|
|
||||||
opacity: 0;
|
|
||||||
animation: fadeInAnimation 0.3s ease-in-out forwards;
|
|
||||||
}
|
|
||||||
#rect-mask rect{
|
|
||||||
animation: slideInAnimation 1s ease-in-out forwards;
|
|
||||||
}
|
|
||||||
.lang-progress{
|
|
||||||
animation: growWidthAnimation 0.6s ease-in-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes scaleInAnimation {
|
|
||||||
from {
|
|
||||||
transform: translate(-5px, 5px) scale(0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translate(-5px, 5px) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes fadeInAnimation {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<rect data-testid="card-bg" x="0.5" y="0.5" rx="4.5" height="99%" stroke="#e4e2e2" width="349" fill="#282828" stroke-opacity="1"/>
|
|
||||||
|
|
||||||
|
|
||||||
<g data-testid="card-title" transform="translate(25, 35)">
|
|
||||||
<g transform="translate(0, 0)">
|
|
||||||
<text x="0" y="0" class="header" data-testid="header">Most Used Languages</text>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
|
|
||||||
<g data-testid="main-card-body" transform="translate(0, 55)">
|
|
||||||
|
|
||||||
<svg data-testid="lang-items" x="25">
|
|
||||||
|
|
||||||
<mask id="rect-mask">
|
|
||||||
<rect x="0" y="0" width="300" height="8" fill="white" rx="5"/>
|
|
||||||
</mask>
|
|
||||||
|
|
||||||
<rect mask="url(#rect-mask)" data-testid="lang-progress" x="0" y="0" width="128.34" height="8" fill="#f1e05a"/>
|
|
||||||
|
|
||||||
<rect mask="url(#rect-mask)" data-testid="lang-progress" x="128.34" y="0" width="63.46" height="8" fill="#f34b7d"/>
|
|
||||||
|
|
||||||
<rect mask="url(#rect-mask)" data-testid="lang-progress" x="191.8" y="0" width="49.7" height="8" fill="#3572A5"/>
|
|
||||||
|
|
||||||
<rect mask="url(#rect-mask)" data-testid="lang-progress" x="241.5" y="0" width="33.69" height="8" fill="#e34c26"/>
|
|
||||||
|
|
||||||
<rect mask="url(#rect-mask)" data-testid="lang-progress" x="275.19" y="0" width="24.81" height="8" fill="#563d7c"/>
|
|
||||||
|
|
||||||
|
|
||||||
<g transform="translate(0, 25)">
|
|
||||||
<g transform="translate(0, 0)"><g transform="translate(0, 0)">
|
|
||||||
<g class="stagger" style="animation-delay: 450ms">
|
|
||||||
<circle cx="5" cy="6" r="5" fill="#f1e05a"/>
|
|
||||||
<text data-testid="lang-name" x="15" y="10" class="lang-name">
|
|
||||||
JavaScript 42.78%
|
|
||||||
</text>
|
|
||||||
</g>
|
|
||||||
</g><g transform="translate(0, 25)">
|
|
||||||
<g class="stagger" style="animation-delay: 600ms">
|
|
||||||
<circle cx="5" cy="6" r="5" fill="#f34b7d"/>
|
|
||||||
<text data-testid="lang-name" x="15" y="10" class="lang-name">
|
|
||||||
C++ 21.15%
|
|
||||||
</text>
|
|
||||||
</g>
|
|
||||||
</g><g transform="translate(0, 50)">
|
|
||||||
<g class="stagger" style="animation-delay: 750ms">
|
|
||||||
<circle cx="5" cy="6" r="5" fill="#3572A5"/>
|
|
||||||
<text data-testid="lang-name" x="15" y="10" class="lang-name">
|
|
||||||
Python 16.57%
|
|
||||||
</text>
|
|
||||||
</g>
|
|
||||||
</g></g><g transform="translate(150, 0)"><g transform="translate(0, 0)">
|
|
||||||
<g class="stagger" style="animation-delay: 450ms">
|
|
||||||
<circle cx="5" cy="6" r="5" fill="#e34c26"/>
|
|
||||||
<text data-testid="lang-name" x="15" y="10" class="lang-name">
|
|
||||||
HTML 11.23%
|
|
||||||
</text>
|
|
||||||
</g>
|
|
||||||
</g><g transform="translate(0, 25)">
|
|
||||||
<g class="stagger" style="animation-delay: 600ms">
|
|
||||||
<circle cx="5" cy="6" r="5" fill="#563d7c"/>
|
|
||||||
<text data-testid="lang-name" x="15" y="10" class="lang-name">
|
|
||||||
CSS 8.27%
|
|
||||||
</text>
|
|
||||||
</g>
|
|
||||||
</g></g>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB |
@@ -1,4 +0,0 @@
|
|||||||
# https://www.robotstxt.org/robotstxt.html
|
|
||||||
User-agent: *
|
|
||||||
Disallow: /404/
|
|
||||||
Sitemap: https://asimonson.com/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>
|
|
||||||
@@ -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;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,894 +0,0 @@
|
|||||||
@import "~react-image-gallery/styles/css/image-gallery.css";
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
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("../../assets/photos/sun.png") 0/5rem no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
padding-left: 5.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.onRight > * {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vItem {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vItem p {
|
|
||||||
margin: 0px;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
.line {
|
|
||||||
&:not(:first-child) {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@for $i from 1 through 10 {
|
|
||||||
&:nth-child(#{$i}) {
|
|
||||||
animation:
|
|
||||||
clip 6000ms $i * -600ms linear infinite,
|
|
||||||
glitch#{$i} 2500ms random(1000) * -1ms linear infinite;
|
|
||||||
|
|
||||||
@keyframes glitch#{$i} {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
96% {
|
|
||||||
transform: translateX(0);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
97% {
|
|
||||||
transform: translateX(random(10) - 5px);
|
|
||||||
color: #4E9A26;
|
|
||||||
}
|
|
||||||
98% {
|
|
||||||
transform: translateX(random(10) - 5px);
|
|
||||||
color: #AC1212;
|
|
||||||
}
|
|
||||||
99% {
|
|
||||||
transform: translateX(random(10) - 5px);
|
|
||||||
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
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,10 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1 +0,0 @@
|
|||||||
<?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>
|
|
||||||
|
Before Width: | Height: | Size: 759 B |
@@ -1,81 +0,0 @@
|
|||||||
<?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>
|
|
||||||
|
Before Width: | Height: | Size: 2.0 KiB |
@@ -1 +0,0 @@
|
|||||||
<?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>
|
|
||||||
|
Before Width: | Height: | Size: 683 B |
@@ -1,10 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1,43 +0,0 @@
|
|||||||
<?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>
|
|
||||||
|
Before Width: | Height: | Size: 764 B |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 813 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 898 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 463 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 829 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 549 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 546 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 453 KiB |
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -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>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
</>)
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
export 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
window.onload = function () {
|
|
||||||
onLoaded();
|
|
||||||
};
|
|
||||||
function onLoaded() {
|
|
||||||
document.body.scrollTop = 0; // For Safari
|
|
||||||
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
|
|
||||||
let navs = document.querySelectorAll(".navElement");
|
|
||||||
navs.forEach(function (element) {
|
|
||||||
element.onclick = function () {
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
toggleMenu();
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
window.onresize = function () {
|
|
||||||
resizer();
|
|
||||||
};
|
|
||||||
resizer();
|
|
||||||
if (window.innerWidth < 1200) {
|
|
||||||
const e = document.querySelector(".navControl");
|
|
||||||
e.style.maxHeight = "0px";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function resizer() {
|
|
||||||
const e = document.querySelector(".navControl");
|
|
||||||
if (window.innerWidth > 1200) {
|
|
||||||
// desktop view
|
|
||||||
scrollFunction();
|
|
||||||
window.onscroll = function () {
|
|
||||||
scrollFunction();
|
|
||||||
};
|
|
||||||
e.style.maxHeight = `${e.scrollHeight + 10}px`;
|
|
||||||
} else {
|
|
||||||
// mobile view
|
|
||||||
window.onscroll = "";
|
|
||||||
document.querySelector(".header").style.backgroundColor = "#1a1a1a";
|
|
||||||
document.querySelectorAll(".header .name h1").forEach(function (x) {
|
|
||||||
x.style.fontSize = "1.5rem";
|
|
||||||
});
|
|
||||||
// document.querySelector('.header > h1').style.color = "#ecebeb";
|
|
||||||
document.querySelector(".header").style.borderBottomWidth = "3px";
|
|
||||||
e.style.maxHeight = "0px";
|
|
||||||
document.querySelectorAll(".navElement *").forEach((x) => {
|
|
||||||
x.style.paddingTop = ".3rem";
|
|
||||||
x.style.paddingBottom = ".3rem";
|
|
||||||
x.style.fontSize = "1rem";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function scrollFunction() {
|
|
||||||
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
|
|
||||||
document.querySelector(".header").style.backgroundColor = "#1a1a1a";
|
|
||||||
document.querySelectorAll(".header .name h1").forEach(function (x) {
|
|
||||||
x.style.fontSize = "1.5rem";
|
|
||||||
});
|
|
||||||
document.querySelectorAll(".navElement *").forEach((x) => {
|
|
||||||
x.style.paddingTop = ".3rem";
|
|
||||||
x.style.paddingBottom = ".3rem";
|
|
||||||
x.style.fontSize = "1rem";
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
document.querySelector(".header").style.backgroundColor = "rgba(0,0,0,0)";
|
|
||||||
document.querySelectorAll(".header .name h1").forEach(function (x) {
|
|
||||||
x.style.fontSize = "2rem";
|
|
||||||
});
|
|
||||||
// document.querySelector('.header > h1').style.color = "#ecebeb";
|
|
||||||
document.querySelectorAll(".navElement *").forEach((x) => {
|
|
||||||
x.style.paddingTop = ".5rem";
|
|
||||||
x.style.paddingBottom = ".5rem";
|
|
||||||
x.style.fontSize = "1.2rem";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function toggleMenu() {
|
|
||||||
if (window.innerWidth < 1200) {
|
|
||||||
const e = document.querySelector(".navControl");
|
|
||||||
const bar = document.querySelector(".header");
|
|
||||||
if (e.style.maxHeight === "0px") {
|
|
||||||
e.style.maxHeight = `${e.scrollHeight + 10}px`;
|
|
||||||
bar.style.borderBottomWidth = "0px";
|
|
||||||
} else {
|
|
||||||
e.style.maxHeight = "0px";
|
|
||||||
bar.style.borderBottomWidth = "3px";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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
|
|
||||||
}
|
|
||||||
53
src/app.py
53
src/app.py
@@ -1,52 +1,21 @@
|
|||||||
import flask
|
import flask
|
||||||
from flask_minify import Minify
|
from flask_minify import Minify
|
||||||
from flask_socketio import SocketIO
|
|
||||||
import json
|
import json
|
||||||
|
|
||||||
proj = json.load(open("./static/json/projects.json", "r"))
|
proj = json.load(open("./static/json/projects.json", "r"))
|
||||||
timeline = json.load(open("./static/json/timeline.json", "r"))
|
timeline = json.load(open("./static/json/timeline.json", "r"))
|
||||||
pages = {
|
pages = json.load(open("./static/json/pages.json", "r"))
|
||||||
"home": {
|
pages['about']['timeline'] = timeline
|
||||||
"template": "home.html",
|
pages['projects']['projects'] = proj
|
||||||
"title": "Andrew Simonson - Portfolio Home",
|
|
||||||
"description": "Andrew Simonson's Digital Portfolio home",
|
|
||||||
"canonical": "",
|
|
||||||
},
|
|
||||||
"projects": {
|
|
||||||
"template": "projects.html",
|
|
||||||
"projects": proj,
|
|
||||||
"title": "Andrew Simonson - Projects",
|
|
||||||
"description": "Recent projects by Andrew Simonson on his lovely portfolio website :)",
|
|
||||||
"canonical": "projects",
|
|
||||||
},
|
|
||||||
"about": {
|
|
||||||
"template": "about.html",
|
|
||||||
"timeline": timeline,
|
|
||||||
"title": "Andrew Simonson - About Me",
|
|
||||||
"description": "About Andrew Simonson",
|
|
||||||
"canonical": "about",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
app = flask.Flask(__name__)
|
app = flask.Flask(__name__)
|
||||||
Minify(app=app, html=True, js=True, cssless=True)
|
|
||||||
socketio = SocketIO(app)
|
|
||||||
|
|
||||||
|
|
||||||
@socketio.on("goto")
|
@app.route('/api/goto/')
|
||||||
def goto(location):
|
@app.route('/api/goto/<location>')
|
||||||
sid = flask.request.sid
|
def goto(location='home'):
|
||||||
pagevars = pages[location]
|
pagevars = pages[location]
|
||||||
output = [location, flask.render_template(pagevars["template"], var=pagevars), pagevars['title']]
|
return [pagevars, flask.render_template(pagevars["template"], var=pagevars)]
|
||||||
socketio.emit("goto", output, to=sid)
|
|
||||||
|
|
||||||
@socketio.on("socketio/goto")
|
|
||||||
def goto(location):
|
|
||||||
sid = flask.request.sid
|
|
||||||
pagevars = pages[location]
|
|
||||||
output = [location, flask.render_template(pagevars["template"], var=pagevars), pagevars['title']]
|
|
||||||
socketio.emit("goto", f"<h1>AAAAAAAAAAAAAA</h1>{output}", to=sid)
|
|
||||||
|
|
||||||
|
|
||||||
@app.route("/")
|
@app.route("/")
|
||||||
def home():
|
def home():
|
||||||
@@ -104,7 +73,9 @@ def static_from_root():
|
|||||||
|
|
||||||
|
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
import sass
|
# import sass
|
||||||
|
|
||||||
sass.compile(dirname=("static/scss", "static/css"), output_style="compressed")
|
# sass.compile(dirname=("static/scss", "static/css"), output_style="compressed")
|
||||||
socketio.run(app)
|
app.run()
|
||||||
|
else:
|
||||||
|
Minify(app=app, html=True, js=True, cssless=True)
|
||||||
@@ -34,6 +34,7 @@ body {
|
|||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-size: 100% auto;
|
background-size: 100% auto;
|
||||||
background-clip: border-box;
|
background-clip: border-box;
|
||||||
|
background-color: #1a1a1a;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@@ -147,11 +148,12 @@ a {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
background-color: rgb(156, 49, 45, .4);
|
background-color: rgba(139, 36, 36, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navElement:hover {
|
.navElement:hover {
|
||||||
background-color: rgb(156, 49, 45, .8);
|
background-color: rgba(139, 36, 36, 0.8);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navElement * {
|
.navElement * {
|
||||||
@@ -189,11 +191,11 @@ a {
|
|||||||
|
|
||||||
.foreground {
|
.foreground {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 7rem;
|
padding-top: 6rem;
|
||||||
padding-left: 8rem;
|
padding-left: 8rem;
|
||||||
width: calc(100%-8rem);
|
width: calc(100%-8rem);
|
||||||
min-height: calc(100vh - 8rem);
|
min-height: calc(100vh - 8rem);
|
||||||
background-color: rgb(44, 44, 44, .85);
|
background-color: rgb(24, 24, 24, .85);
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: .4s;
|
transition: .4s;
|
||||||
@@ -268,6 +270,10 @@ a {
|
|||||||
justify-content: left;
|
justify-content: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.onRight {
|
.onRight {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -309,10 +315,20 @@ a {
|
|||||||
max-height: min(30rem, 100%);
|
max-height: min(30rem, 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* #aboutGrid{
|
||||||
|
display: grid;
|
||||||
|
} */
|
||||||
|
|
||||||
.col {
|
.col {
|
||||||
float: left;
|
|
||||||
margin-right: 3rem;
|
|
||||||
width: calc(50% - 3rem);
|
width: calc(50% - 3rem);
|
||||||
|
margin-bottom: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightCol {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
margin-right: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.boxedImg {
|
.boxedImg {
|
||||||
@@ -323,15 +339,6 @@ a {
|
|||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-container {
|
|
||||||
margin-left: 10%;
|
|
||||||
max-width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.elementBlock {
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills {
|
.skills {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
@@ -349,103 +356,6 @@ a {
|
|||||||
color: rgb(212, 212, 212);
|
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 {
|
.projectList {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -602,22 +512,6 @@ a {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes swipeIn {
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(100px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.swipeIn {
|
|
||||||
animation: swipeIn 1s 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fPage {
|
.fPage {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -799,16 +693,6 @@ a {
|
|||||||
font-family: robotoreg;
|
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 {
|
.datetext {
|
||||||
margin: .25em;
|
margin: .25em;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
@@ -866,6 +750,7 @@ a {
|
|||||||
/* centered objects will need to remove 1.5 of this to center */
|
/* centered objects will need to remove 1.5 of this to center */
|
||||||
padding-right: .5rem;
|
padding-right: .5rem;
|
||||||
padding-bottom: 36px;
|
padding-bottom: 36px;
|
||||||
|
padding-top: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.homeground {
|
.homeground {
|
||||||
@@ -892,17 +777,9 @@ a {
|
|||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aboutMe {
|
.rightCol {
|
||||||
float: none;
|
position: inherit;
|
||||||
display: block;
|
margin-right: inherit;
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skills {
|
|
||||||
float: none;
|
|
||||||
margin-right: auto;
|
|
||||||
display: block;
|
|
||||||
width: 90%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
function toggle(dir) {
|
function toggleCheckbox(dir) {
|
||||||
let toggles = document.querySelectorAll(
|
let toggles = document.querySelectorAll(
|
||||||
".checkbox-wrapper input[type=checkbox]"
|
".checkbox-wrapper input[type=checkbox]"
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ async function addChessEmbed(username) {
|
|||||||
user = await fetch(`https://api.chess.com/pub/player/${username}`);
|
user = await fetch(`https://api.chess.com/pub/player/${username}`);
|
||||||
stats = await fetch(`https://api.chess.com/pub/player/${username}/stats`);
|
stats = await fetch(`https://api.chess.com/pub/player/${username}/stats`);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setChess({cName:"Chess.com request failed"});
|
setChess({ cName: "Chess.com request failed" });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (user.status === 200) {
|
if (user.status === 200) {
|
||||||
@@ -15,16 +15,17 @@ async function addChessEmbed(username) {
|
|||||||
blitz: stats.chess_blitz.last.rating,
|
blitz: stats.chess_blitz.last.rating,
|
||||||
bullet: stats.chess_bullet.last.rating,
|
bullet: stats.chess_bullet.last.rating,
|
||||||
tactics: stats.tactics.highest.rating,
|
tactics: stats.tactics.highest.rating,
|
||||||
}
|
};
|
||||||
setChess({cName:user["username"],pic:user.avatar,ratings:ratings});
|
setChess({ cName: user["username"], pic: user.avatar, ratings: ratings });
|
||||||
} else if (user === null || user.status === 403 || user.status === null) {
|
} else if (user === null || user.status === 403 || user.status === null) {
|
||||||
chessSet({cName:"Chess.com request failed"});
|
setChess({ cName: "Chess.com request failed" });
|
||||||
} else {
|
} else {
|
||||||
chessSet({cName:"User Not Found"});
|
setChess({ cName: "User Not Found" });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setChess({cName = null, pic = null, ratings = null}) {
|
function setChess({ cName = null, pic = null, ratings = null }) {
|
||||||
|
try {
|
||||||
if (cName) {
|
if (cName) {
|
||||||
document.querySelector(".chessName").textContent = cName;
|
document.querySelector(".chessName").textContent = cName;
|
||||||
}
|
}
|
||||||
@@ -32,9 +33,16 @@ function setChess({cName = null, pic = null, ratings = null}) {
|
|||||||
document.querySelector(".chessImage").src = pic;
|
document.querySelector(".chessImage").src = pic;
|
||||||
}
|
}
|
||||||
if (ratings) {
|
if (ratings) {
|
||||||
document.querySelector(".chessRapid .chessStat").textContent = ratings.rapid;
|
document.querySelector(".chessRapid .chessStat").textContent =
|
||||||
document.querySelector(".chessBlitz .chessStat").textContent = ratings.blitz;
|
ratings.rapid;
|
||||||
document.querySelector(".chessBullet .chessStat").textContent = ratings.bullet;
|
document.querySelector(".chessBlitz .chessStat").textContent =
|
||||||
document.querySelector(".chessPuzzles .chessStat").textContent = ratings.tactics;
|
ratings.blitz;
|
||||||
|
document.querySelector(".chessBullet .chessStat").textContent =
|
||||||
|
ratings.bullet;
|
||||||
|
document.querySelector(".chessPuzzles .chessStat").textContent =
|
||||||
|
ratings.tactics;
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
console.log("fucker clicking so fast the internet can't even keep up");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ function windowResized() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function draw() {
|
function draw() {
|
||||||
background(32);
|
background(24);
|
||||||
|
|
||||||
for (let i = 0; i < balls.length; i++) {
|
for (let i = 0; i < balls.length; i++) {
|
||||||
balls[i].update();
|
balls[i].update();
|
||||||
|
|||||||
@@ -4,13 +4,6 @@ window.onload = function () {
|
|||||||
function onLoaded() {
|
function onLoaded() {
|
||||||
document.body.scrollTop = 0; // For Safari
|
document.body.scrollTop = 0; // For Safari
|
||||||
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
|
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
|
||||||
let navs = document.querySelectorAll(".navElement");
|
|
||||||
navs.forEach(function (element) {
|
|
||||||
element.onclick = function () {
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
toggleMenu();
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
window.onresize = function () {
|
window.onresize = function () {
|
||||||
resizer();
|
resizer();
|
||||||
@@ -88,25 +81,31 @@ function toggleMenu() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let socket = io();
|
async function goto(location, {push=true, toggle=true}={}) {
|
||||||
|
let a = await fetch("/api/goto/" + location, {
|
||||||
function emit(event) {
|
credentials: "include",
|
||||||
socket.emit(event);
|
method: "GET",
|
||||||
}
|
mode: "cors",
|
||||||
|
});
|
||||||
function emitData(event, data) {
|
const response = await a.json();
|
||||||
socket.emit(event, data)
|
const metadata = response[0];
|
||||||
}
|
const content = response[1];
|
||||||
|
let root = document.getElementById("root");
|
||||||
socket.on('goto', (page) => {
|
|
||||||
pagename = page[0];
|
|
||||||
content = page[1];
|
|
||||||
let root = document.getElementById('root');
|
|
||||||
root.innerHTML = content;
|
root.innerHTML = content;
|
||||||
root.querySelectorAll("script").forEach(x => {
|
root.querySelectorAll("script").forEach((x) => {
|
||||||
eval(x.innerHTML);
|
eval(x.innerHTML);
|
||||||
});
|
});
|
||||||
document.querySelector('title').textContent = page[2];
|
document.querySelector("title").textContent = metadata['title'];
|
||||||
if (pagename == 'home') pagename = '/';
|
window.scrollTo(0, 0);
|
||||||
history.pushState(null, null, pagename);
|
if(toggle){
|
||||||
});
|
toggleMenu();
|
||||||
|
}
|
||||||
|
if(push){
|
||||||
|
history.pushState(null, null, metadata['canonical']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function backButton() {
|
||||||
|
const location = window.location.pathname;
|
||||||
|
goto(location.substring(1), {push:false}); // remove slash, goto already does that
|
||||||
|
}
|
||||||
|
|||||||
20
src/static/json/pages.json
Normal file
20
src/static/json/pages.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"home": {
|
||||||
|
"template": "home.html",
|
||||||
|
"title": "Andrew Simonson - Portfolio Home",
|
||||||
|
"description": "Andrew Simonson's Digital Portfolio home",
|
||||||
|
"canonical": "/"
|
||||||
|
},
|
||||||
|
"projects": {
|
||||||
|
"template": "projects.html",
|
||||||
|
"title": "Andrew Simonson - Projects",
|
||||||
|
"description": "Recent projects by Andrew Simonson on his lovely portfolio website :)",
|
||||||
|
"canonical": "/projects"
|
||||||
|
},
|
||||||
|
"about": {
|
||||||
|
"template": "about.html",
|
||||||
|
"title": "Andrew Simonson - About Me",
|
||||||
|
"description": "About Andrew Simonson",
|
||||||
|
"canonical": "/about"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,7 +1,8 @@
|
|||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="foreground">
|
<div class="foreground">
|
||||||
<div class="col">
|
<div class="relative">
|
||||||
<div id="aboutMe" data-aos="fade-up">
|
<div id="aboutGrid">
|
||||||
|
<div id="aboutMe" class="col" data-aos="fade-up">
|
||||||
<h2 class="concentratedHead">About Me</h2>
|
<h2 class="concentratedHead">About Me</h2>
|
||||||
<p>
|
<p>
|
||||||
I'm Andrew Simonson, a second year (third year standing) student at
|
I'm Andrew Simonson, a second year (third year standing) student at
|
||||||
@@ -36,20 +37,17 @@
|
|||||||
multifaceted purpose present in everything around us.
|
multifaceted purpose present in everything around us.
|
||||||
</p> -->
|
</p> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="skills" class="col rightCol" data-aos="fade-up">
|
||||||
<div class="col">
|
|
||||||
<div id="skills" data-aos="fade-up">
|
|
||||||
<h2>Skills</h2>
|
<h2>Skills</h2>
|
||||||
{% from 'partials/skills.html' import skills %}
|
{% from 'partials/skills.html' import skills %} {{ skills([ "Python",
|
||||||
{{ skills([ "Python", "JavaScript", "Java", "C", "C++", "R", "MIPS Assembly",
|
"JavaScript", "Java", "C", "C++", "R", "MIPS Assembly", "Processing",
|
||||||
"Processing", "P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy",
|
"P5.js", "SQL", "SQLite", "PostgreSQL", "SQLAlchemy", "HTML", "CSS",
|
||||||
"HTML", "CSS", "Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux",
|
"Docker", "LaTeX", "ArcGIS", "Git", "Github", "Linux", "OKD4",
|
||||||
"OKD4", "Kubernetes", "Openshift", "Angular", "Flask", "Jinja", "DOM Scraping",
|
"Kubernetes", "Openshift", "Nginx", "Angular", "Flask", "Jinja", "DOM
|
||||||
"Google API", "React", "Node.js", "ArcGIS", ]) }}
|
Scraping", "Google API", "React", "Node.js", "ArcGIS", ]) }}
|
||||||
</Skills>
|
|
||||||
<div class="chess">
|
<div class="chess">
|
||||||
{% from 'partials/chess.html' import chess %}
|
{% from 'partials/chess.html' import chess %} {{ chess('asimonson1125')
|
||||||
{{ chess('asimonson1125') }}
|
}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- {/* <div data-aos="fade-up" class="elementBlock">
|
<!-- {/* <div data-aos="fade-up" class="elementBlock">
|
||||||
@@ -82,15 +80,15 @@
|
|||||||
]}
|
]}
|
||||||
</MyCarousel>
|
</MyCarousel>
|
||||||
</div> */} -->
|
</div> */} -->
|
||||||
</div>
|
<div id="timeline" class="col">
|
||||||
<div class="col">
|
<h2>Timeline</h2>
|
||||||
<div class="checkbox-wrapper">
|
<div class="checkbox-wrapper">
|
||||||
<div class="flex start">
|
<div class="flex start">
|
||||||
<label class="switch" htmlFor="pinned">
|
<label class="switch" htmlFor="pinned">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
id="pinned"
|
id="pinned"
|
||||||
onClick='toggle("up")'
|
onClick='toggleCheckbox("up")'
|
||||||
checked
|
checked
|
||||||
/>
|
/>
|
||||||
<div class="slider round"></div>
|
<div class="slider round"></div>
|
||||||
@@ -99,20 +97,32 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex start">
|
<div class="flex start">
|
||||||
<label class="switch" htmlFor="education">
|
<label class="switch" htmlFor="education">
|
||||||
<input type="checkbox" id="education" onClick="toggle('up')" />
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="education"
|
||||||
|
onClick="toggleCheckbox('up')"
|
||||||
|
/>
|
||||||
<div class="slider round"></div>
|
<div class="slider round"></div>
|
||||||
<strong>Education</strong>
|
<strong>Education</strong>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex start">
|
<div class="flex start">
|
||||||
<label class="switch" htmlFor="experience" onClick="toggle('up')">
|
<label
|
||||||
|
class="switch"
|
||||||
|
htmlFor="experience"
|
||||||
|
onClick="toggleCheckbox('up')"
|
||||||
|
>
|
||||||
<input type="checkbox" id="experience" />
|
<input type="checkbox" id="experience" />
|
||||||
<div class="slider round"></div>
|
<div class="slider round"></div>
|
||||||
<strong>Work Experience</strong>
|
<strong>Work Experience</strong>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex start">
|
<div class="flex start">
|
||||||
<label class="switch" htmlFor="technical" onClick="toggle('up')">
|
<label
|
||||||
|
class="switch"
|
||||||
|
htmlFor="technical"
|
||||||
|
onClick="toggleCheckbox('up')"
|
||||||
|
>
|
||||||
<input type="checkbox" id="technical" />
|
<input type="checkbox" id="technical" />
|
||||||
<div class="slider round"></div>
|
<div class="slider round"></div>
|
||||||
<strong>Technical</strong>
|
<strong>Technical</strong>
|
||||||
@@ -120,12 +130,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="timeline checkbox-client">
|
<div class="timeline checkbox-client">
|
||||||
{% from 'partials/timeline.html' import timeitem %}
|
{% from 'partials/timeline.html' import timeitem %} {% for i in
|
||||||
{% for i in var["timeline"] %}
|
var["timeline"] %} {{ timeitem(i, var["timeline"][i]["classes"],
|
||||||
{{ timeitem(i, var["timeline"][i]["classes"], var["timeline"][i]["date"], var["timeline"][i]["content"])}}
|
var["timeline"][i]["date"], var["timeline"][i]["content"])}} {% endfor
|
||||||
{% endfor %}
|
%}
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
toggleCheckbox("up");
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>toggle('up')</script>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
@@ -52,22 +52,20 @@
|
|||||||
href="{{ url_for('static', filename='css/head.css') }}"
|
href="{{ url_for('static', filename='css/head.css') }}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<link rel="canonical" href="https://asimonson.com/{{ var['canonical'] }}" />
|
<link rel="canonical" href="https://asimonson.com{{ var['canonical'] }}" />
|
||||||
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
|
<script defer src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js" integrity="sha512-eVL5Lb9al9FzgR63gDs1MxcDS2wFu3loYAgjIH0+Hg38tCS8Ag62dwKyH+wzDb+QauDpEZjXbMn11blw8cbTJQ==" crossorigin="anonymous"></script>
|
<script defer src="{{ url_for('static', filename='js/idler.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/checkbox.js') }}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/responsive.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/responsive.js') }}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/chessbed.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/chessbed.js') }}"></script>
|
||||||
<title>{{ var['title'] }}</title>
|
<title>{{ var['title'] }}</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body onpopstate="backButton()">
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div class="App">
|
<div class="App">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
|
<div id="name-container" onclick="goto('home', {toggle:false})">
|
||||||
<div id="name-container" onclick="emitData('goto', 'home')">
|
|
||||||
<div class="glitch">
|
<div class="glitch">
|
||||||
{% for i in range(9) %}
|
{% for i in range(9) %}
|
||||||
<div class="line name">
|
<div class="line name">
|
||||||
@@ -85,18 +83,18 @@
|
|||||||
/>
|
/>
|
||||||
<div class="navControl">
|
<div class="navControl">
|
||||||
<div class="navBar">
|
<div class="navBar">
|
||||||
<div class="navElement">
|
<div onClick="goto('home')" class="navElement">
|
||||||
<p onclick="emitData('goto', 'home')">Home</p>
|
<p>Home</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="navElement">
|
<a href="Resume.pdf" target="_blank" class="navElement">
|
||||||
<a href="Resume.pdf" target="_blank"> Resume </a>
|
<span>Resume</span>
|
||||||
</div>
|
</a>
|
||||||
<div class="navElement">
|
<div onclick="goto('projects')" class="navElement">
|
||||||
<p onclick="emitData('goto', 'projects')">Projects</p>
|
<p>Projects</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- <a href="/activities">Activities</a> -->
|
<!-- <a href="/activities">Activities</a> -->
|
||||||
<div class="navElement">
|
<div onclick="goto('about')" class="navElement">
|
||||||
<p onclick="emitData('goto', 'about')">About Me</p>
|
<p>About Me</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -15,20 +15,20 @@
|
|||||||
<div class="checkbox-wrapper">
|
<div class="checkbox-wrapper">
|
||||||
<div class="flex start">
|
<div class="flex start">
|
||||||
<label class="switch" htmlFor="pinned">
|
<label class="switch" htmlFor="pinned">
|
||||||
<input type="checkbox" id="pinned" onClick="toggle('')" checked/>
|
<input type="checkbox" id="pinned" onClick="toggleCheckbox('')" checked/>
|
||||||
<div class="slider round"></div>
|
<div class="slider round"></div>
|
||||||
<strong>Pinned</strong>
|
<strong>Pinned</strong>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex start">
|
<div class="flex start">
|
||||||
<label class="switch" htmlFor="programming">
|
<label class="switch" htmlFor="programming">
|
||||||
<input type="checkbox" id="programming" onClick="toggle('')" />
|
<input type="checkbox" id="programming" onClick="toggleCheckbox('')" />
|
||||||
<div class="slider round"></div>
|
<div class="slider round"></div>
|
||||||
<strong>Programming</strong>
|
<strong>Programming</strong>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex start">
|
<div class="flex start">
|
||||||
<label class="switch" htmlFor="geospacial" onClick="toggle('')">
|
<label class="switch" htmlFor="geospacial" onClick="toggleCheckbox('')">
|
||||||
<input type="checkbox" id="geospacial" />
|
<input type="checkbox" id="geospacial" />
|
||||||
<div class="slider round"></div>
|
<div class="slider round"></div>
|
||||||
<strong>Geospacial</strong>
|
<strong>Geospacial</strong>
|
||||||
@@ -42,5 +42,5 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>toggle('')</script>
|
<script>toggleCheckbox('')</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user