Added all files.
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Andrew's Homepage - Contact</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Contact information for Andrew Lalis.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles/font.css" type="text/css">
|
||||
|
||||
<!-- CSS class to hide elements if JS is not enabled. -->
|
||||
<noscript><style>.jsonly{display: none !important;}</style></noscript>
|
||||
|
||||
<script>
|
||||
// An inline script that manages the site's color theme.
|
||||
const THEMES = ["light", "dark"];
|
||||
|
||||
function getPreferredTheme() {
|
||||
const storedTheme = localStorage.getItem("theme");
|
||||
if (storedTheme !== null && THEMES.includes(storedTheme)) return storedTheme;
|
||||
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
return "dark";
|
||||
}
|
||||
return "light";
|
||||
}
|
||||
|
||||
function setPreferredTheme(theme) {
|
||||
document.documentElement.className = theme;
|
||||
localStorage.setItem("theme", theme);
|
||||
}
|
||||
|
||||
setPreferredTheme(getPreferredTheme());
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
|
||||
const newTheme = event.matches ? "dark" : "light";
|
||||
setPreferredTheme(newTheme);
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", event => {
|
||||
const themeToggleButton = document.getElementById("themeToggleButton");
|
||||
themeToggleButton.onclick = clickEvent => {
|
||||
const currentTheme = getPreferredTheme();
|
||||
const idx = THEMES.indexOf(currentTheme);
|
||||
const nextIdx = idx === THEMES.length - 1 ? 0 : idx + 1;
|
||||
setPreferredTheme(THEMES[nextIdx]);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="styles/style.css" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="page-header">
|
||||
<h1>Andrew's Contact Info</h1>
|
||||
<nav>
|
||||
<div>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="blog.html">Articles</a>
|
||||
<a href="projects.html">Projects</a>
|
||||
<a href="training.html">Training</a>
|
||||
<a class="page-header-selected" href="contact.html">Contact</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://github.com/andrewlalis">GitHub</a>
|
||||
<a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
|
||||
<a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button id="themeToggleButton" class="jsonly">Change Color Theme</button>
|
||||
<hr>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<p>
|
||||
You can contact me in a few ways:
|
||||
</p>
|
||||
<ul>
|
||||
<li>My email address is andrewlalisofficial at gmail dot com.</li>
|
||||
<li>My Discord username is <code>____andrew____</code></li>
|
||||
</ul>
|
||||
</article>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 46 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1344" height="2500" viewBox="6.527 4.399 290.829 540.906"><path d="M285.104 430.945h-2.037v-1.14h5.486v1.14h-2.025v5.688h-1.424v-5.688zm10.942.297h-.032l-2.02 5.393h-.924l-2.006-5.393h-.024v5.393h-1.343v-6.828h1.976l1.86 4.835 1.854-4.835h1.969v6.828h-1.311l.001-5.393z" fill="#e76f00"/><path d="M102.681 291.324s-14.178 8.245 10.09 11.035c29.4 3.354 44.426 2.873 76.825-3.259 0 0 8.518 5.341 20.414 9.967-72.63 31.128-164.376-1.803-107.329-17.743M93.806 250.704s-15.902 11.771 8.384 14.283c31.406 3.24 56.208 3.505 99.125-4.759 0 0 5.937 6.018 15.271 9.309-87.815 25.678-185.624 2.025-122.78-18.833" fill="#5382a1"/><path d="M168.625 181.799c17.896 20.604-4.701 39.146-4.701 39.146s45.439-23.458 24.571-52.833c-19.491-27.395-34.438-41.005 46.479-87.934.001-.001-127.013 31.721-66.349 101.621" fill="#e76f00"/><path d="M264.684 321.369s10.492 8.646-11.555 15.333c-41.923 12.7-174.488 16.535-211.314.507-13.238-5.76 11.587-13.752 19.396-15.429 8.144-1.766 12.798-1.437 12.798-1.437-14.722-10.371-95.157 20.363-40.857 29.166 148.084 24.015 269.944-10.814 231.532-28.14M109.499 208.617s-67.431 16.016-23.879 21.832c18.389 2.462 55.047 1.905 89.192-.956 27.906-2.354 55.928-7.358 55.928-7.358s-9.84 4.214-16.959 9.074c-68.475 18.01-200.756 9.631-162.674-8.79 32.206-15.568 58.392-13.802 58.392-13.802M230.462 276.231c69.608-36.171 37.425-70.932 14.96-66.248-5.506 1.146-7.961 2.139-7.961 2.139s2.045-3.202 5.947-4.588c44.441-15.624 78.619 46.081-14.346 70.521 0 0 1.079-.962 1.4-1.824" fill="#5382a1"/><path d="M188.495 4.399s38.55 38.562-36.563 97.862c-60.233 47.567-13.735 74.689-.025 105.678-35.158-31.723-60.96-59.647-43.65-85.637 25.406-38.151 95.792-56.648 80.238-117.903" fill="#e76f00"/><path d="M116.339 374.246c66.815 4.277 169.417-2.373 171.846-33.987 0 0-4.67 11.984-55.219 21.503-57.027 10.731-127.364 9.479-169.081 2.601.002-.002 8.541 7.067 52.454 9.883" fill="#5382a1"/><path d="M105.389 495.049c-6.303 5.467-12.96 8.536-18.934 8.536-8.527 0-13.134-5.113-13.134-13.314 0-8.871 4.937-15.357 24.739-15.357h7.328l.001 20.135m17.392 19.623V453.93c0-15.518-8.85-25.756-30.188-25.756-12.457 0-23.369 3.076-32.238 6.999l2.56 10.752c6.983-2.563 16.022-4.949 24.894-4.949 12.292 0 17.58 4.949 17.58 15.181v7.678h-6.135c-29.865 0-43.337 11.593-43.337 28.993 0 15.018 8.878 23.554 25.594 23.554 10.745 0 18.766-4.437 26.264-10.929l1.361 9.221 13.645-.002zM180.824 514.672h-21.691l-26.106-84.96h18.944l16.198 52.199 3.601 15.699c8.195-22.698 13.992-45.726 16.891-67.898h18.427c-4.938 27.976-13.822 58.684-26.264 84.96M264.038 495.049c-6.315 5.467-12.983 8.536-18.958 8.536-8.512 0-13.131-5.113-13.131-13.314 0-8.871 4.947-15.357 24.748-15.357h7.341v20.135m17.39 19.623V453.93c0-15.518-8.871-25.756-30.186-25.756-12.465 0-23.381 3.076-32.246 6.999l2.557 10.752c6.985-2.563 16.041-4.949 24.906-4.949 12.283 0 17.579 4.949 17.579 15.181v7.678h-6.146c-29.873 0-43.34 11.593-43.34 28.993 0 15.018 8.871 23.554 25.584 23.554 10.752 0 18.77-4.437 26.28-10.929l1.366 9.221 13.646-.002zM36.847 529.099c-4.958 7.239-12.966 12.966-21.733 16.206L6.527 535.2c6.673-3.424 12.396-8.954 15.055-14.104 2.3-4.581 3.252-10.485 3.252-24.604v-96.995h18.478v95.666c-.001 18.875-1.51 26.5-6.465 33.936" fill="#e76f00"/></svg>
|
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 17 KiB |
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
|
After Width: | Height: | Size: 467 B |
89
index.html
|
@ -3,50 +3,89 @@
|
|||
|
||||
<head>
|
||||
<title>Andrew's Homepage</title>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="description" content="The Homepage of Andrew Lalis."/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<!-- <link rel="stylesheet" href="style.css" type="text/css"/> -->
|
||||
<style>
|
||||
article {
|
||||
max-width: 50ch;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="The Homepage of Andrew Lalis.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles/font.css" type="text/css">
|
||||
|
||||
<!-- CSS class to hide elements if JS is not enabled. -->
|
||||
<noscript><style>.jsonly{display: none !important;}</style></noscript>
|
||||
|
||||
<script>
|
||||
// An inline script that manages the site's color theme.
|
||||
const THEMES = ["light", "dark"];
|
||||
|
||||
function getPreferredTheme() {
|
||||
const storedTheme = localStorage.getItem("theme");
|
||||
if (storedTheme !== null && THEMES.includes(storedTheme)) return storedTheme;
|
||||
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
return "dark";
|
||||
}
|
||||
return "light";
|
||||
}
|
||||
</style>
|
||||
|
||||
function setPreferredTheme(theme) {
|
||||
document.documentElement.className = theme;
|
||||
localStorage.setItem("theme", theme);
|
||||
}
|
||||
|
||||
setPreferredTheme(getPreferredTheme());
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
|
||||
const newTheme = event.matches ? "dark" : "light";
|
||||
setPreferredTheme(newTheme);
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", event => {
|
||||
const themeToggleButton = document.getElementById("themeToggleButton");
|
||||
themeToggleButton.onclick = clickEvent => {
|
||||
const currentTheme = getPreferredTheme();
|
||||
const idx = THEMES.indexOf(currentTheme);
|
||||
const nextIdx = idx === THEMES.length - 1 ? 0 : idx + 1;
|
||||
setPreferredTheme(THEMES[nextIdx]);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="styles/style.css" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<h1 style="text-align: center;">Andrew's Homepage</h1>
|
||||
|
||||
<nav style="text-align: center;">
|
||||
<a href="https://github.com/andrewlalis">GitHub</a>
|
||||
<a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
|
||||
<a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
|
||||
<a href="contact">Contact</a>
|
||||
<header class="page-header">
|
||||
<h1>Andrew's Homepage</h1>
|
||||
<nav>
|
||||
<div>
|
||||
<a class="page-header-selected" href="index.html">Home</a>
|
||||
<a href="blog.html">Articles</a>
|
||||
<a href="projects.html">Projects</a>
|
||||
<a href="training.html">Training</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://github.com/andrewlalis">GitHub</a>
|
||||
<a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
|
||||
<a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<hr/>
|
||||
|
||||
<button id="themeToggleButton" class="jsonly">Change Color Theme</button>
|
||||
<hr>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>About Andrew</h2>
|
||||
<p>
|
||||
Andrew (the author of this site) is a software engineer by education and profession, but I also do a few other things in my spare time. That includes some combination of running, lifting, computer gaming, and cooking.
|
||||
I (Andrew) am a software engineer by education and profession, but I also do a few other things in my spare time. That includes some combination of running, lifting, computer gaming, and cooking.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>About this Site</h2>
|
||||
<p>
|
||||
This page was written by Andrew Lalis, to be his personal website on the world-wide-web. It's got all the usual stuff that a personal site should have, like important links and contact details, plus a little series of articles I've written about my experiences with programming, lifting, gaming, or anything else of interest.
|
||||
This page was written by me, Andrew Lalis, to be my personal website on the world-wide-web. It's got all the usual stuff that a personal site should have, like important links and contact details, plus a little series of articles I've written about my experiences with programming, lifting, gaming, or anything else of interest.
|
||||
</p>
|
||||
<p>
|
||||
As you can see, I'm a fan of the <em>plain HTML is responsive</em> school of thought. This website is intentionally very simple in its structure, styling, and interactivity. This is because I believe that the vast majority of the internet's most popular websites sacrifice usability and accessibility to make a flashier product.
|
||||
As you can see, I'm a fan of the <em>"plain HTML is responsive"</em> school of thought. This website is intentionally very simple in its structure, styling, and interactivity. This is because I believe that the vast majority of the internet's most popular websites sacrifice usability and accessibility to make a flashier product. By using a simpler design, we can help to make the internet more accessible to all, regardless of their physical ability or device's processing power.
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1,186 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Andrew's Homepage - Projects</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="The Homepage of Andrew Lalis.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles/font.css" type="text/css">
|
||||
|
||||
<!-- CSS class to hide elements if JS is not enabled. -->
|
||||
<noscript><style>.jsonly{display: none !important;}</style></noscript>
|
||||
|
||||
<script>
|
||||
// An inline script that manages the site's color theme.
|
||||
const THEMES = ["light", "dark"];
|
||||
|
||||
function getPreferredTheme() {
|
||||
const storedTheme = localStorage.getItem("theme");
|
||||
if (storedTheme !== null && THEMES.includes(storedTheme)) return storedTheme;
|
||||
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
return "dark";
|
||||
}
|
||||
return "light";
|
||||
}
|
||||
|
||||
function setPreferredTheme(theme) {
|
||||
document.documentElement.className = theme;
|
||||
localStorage.setItem("theme", theme);
|
||||
}
|
||||
|
||||
setPreferredTheme(getPreferredTheme());
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
|
||||
const newTheme = event.matches ? "dark" : "light";
|
||||
setPreferredTheme(newTheme);
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", event => {
|
||||
const themeToggleButton = document.getElementById("themeToggleButton");
|
||||
themeToggleButton.onclick = clickEvent => {
|
||||
const currentTheme = getPreferredTheme();
|
||||
const idx = THEMES.indexOf(currentTheme);
|
||||
const nextIdx = idx === THEMES.length - 1 ? 0 : idx + 1;
|
||||
setPreferredTheme(THEMES[nextIdx]);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="styles/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="styles/project.css" type="text/css">
|
||||
<link rel="stylesheet" href="vendor/prism.css" data-noprefix>
|
||||
<script src="vendor/prism.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="page-header">
|
||||
<h1>Andrew's Projects</h1>
|
||||
<nav>
|
||||
<div>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="blog.html">Articles</a>
|
||||
<a class="page-header-selected" href="projects.html">Projects</a>
|
||||
<a href="training.html">Training</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://github.com/andrewlalis">GitHub</a>
|
||||
<a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
|
||||
<a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button id="themeToggleButton" class="jsonly">Change Color Theme</button>
|
||||
<hr>
|
||||
</header>
|
||||
<main>
|
||||
<article class="project-card">
|
||||
<h2><a href="">Ace of Shades</a></h2>
|
||||
<p>
|
||||
A top-down 2D shooter game inspired by <em>Ace of Spades</em>, and was made as a submission the 2021 Java Discord server's Java Jam. Includes a dedicated server, client, and server registry application.
|
||||
</p>
|
||||
<video src="videos/aos-latest-2023-04-06_19.39.53.mp4" type="video/mp4" style="width: 100%" controls></video>
|
||||
<img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
|
||||
</article>
|
||||
|
||||
<article class="project-card">
|
||||
<h2><a href="">Ace of Shades 2</a></h2>
|
||||
<p>
|
||||
A 3D first-person shooter designed as the successor to <em>Ace of Shades</em>. This was again made as a 2022 Java Discord Java Jam submission, but I continued to develop it well beyond that.
|
||||
</p>
|
||||
<video src="videos/aos2-2022-07-29_16.25.08.mp4" type="video/mp4" style="width: 100%" controls></video>
|
||||
<img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
|
||||
<img src="images/logo_open_gl.png" class="lang-icon" alt="OpenGL API logo">
|
||||
</article>
|
||||
|
||||
<article class="project-card">
|
||||
<h2><a href="https://github.com/andrewlalis/handy-httpd">Handy-Httpd</a></h2>
|
||||
<p>
|
||||
An extremely lightweight and flexible HTTP server implemented in the D programming language. Below is an example of a "<em>Hello world</em>" server that just says "Hello" in response to any request.
|
||||
</p>
|
||||
<pre><code class="language-d">
|
||||
import handy_httpd;
|
||||
|
||||
void main() {
|
||||
HttpServer server = new HttpServer((ref ctx) {
|
||||
ctx.response.writeBodyString("Hello");
|
||||
});
|
||||
server.start();
|
||||
}
|
||||
</code></pre>
|
||||
<img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
|
||||
</article>
|
||||
|
||||
<article class="project-card">
|
||||
<h2><a href="https://github.com/andrewlalis/movescript">Movescript & Itemscript</a></h2>
|
||||
<p>
|
||||
Simple grammars for concisely defining robotic movement and inventory management for ComputerCraft robots in Minecraft.
|
||||
</p>
|
||||
<p>
|
||||
Instead of doing this:
|
||||
</p>
|
||||
<pre><code class="language-lua">
|
||||
turtle.forward()
|
||||
turtle.forward()
|
||||
local success = turtle.up()
|
||||
while not success do
|
||||
success = turtle.up()
|
||||
end
|
||||
turtle.dig()
|
||||
</code></pre>
|
||||
<p>
|
||||
You can use Movescript to safely move using a simpler syntax:
|
||||
</p>
|
||||
<pre><code class="language-lua">
|
||||
local ms = require("movescript")
|
||||
ms.run("2FUDg")
|
||||
</code></pre>
|
||||
<img src="images/logo_lua.png" class="lang-icon" alt="Lua programming language logo">
|
||||
</article>
|
||||
|
||||
<article class="project-card">
|
||||
<h2><a href="">Rail Signal</a></h2>
|
||||
<p>
|
||||
API and web app for designing and managing rail systems, with real-time data updates via websockets. Originally designed for use with Minecraft and the Immersive Railroading mod, but practically can be used anywhere, as long as you've got the right device driver.
|
||||
</p>
|
||||
<img src="images/logo_java.svg" class="lang-icon" alt="Java programming language logo">
|
||||
<img src="images/logo_spring_sm.png" class="lang-icon" alt="Spring Framework logo">
|
||||
<img src="images/logo_vue.svg" class="lang-icon" alt="Vue JS framework logo">
|
||||
<img src="images/logo_lua.png" class="lang-icon" alt="Lua programming language logo">
|
||||
</article>
|
||||
|
||||
<article class="project-card">
|
||||
<h2><a href="https://github.com/andrewlalis/slf4d">SLF4D</a></h2>
|
||||
<p>
|
||||
A common logging interface for D projects, inspired by Java's SLF4J interfaces, but in an idiomatic D way. Any library can make use of SLF4D, while still letting the application developer decide how log messages are handled.
|
||||
</p>
|
||||
<p>
|
||||
Here's an example of how it's used:
|
||||
</p>
|
||||
<pre><code class="language-d">
|
||||
import slf4d;
|
||||
|
||||
void myFunction(int n) {
|
||||
infoF!"Called myFunction with n = %d"(n);
|
||||
for (int i = 0; i < n; i++) {
|
||||
try {
|
||||
doSomethingRisky(i);
|
||||
} catch (Exception e) {
|
||||
warn("Failed to do something risky.", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
|
||||
</article>
|
||||
|
||||
<article class="project-card">
|
||||
<h2><a href="https://github.com/andrewlalis/streams">Streams</a></h2>
|
||||
<p>
|
||||
A library that defines compile-time primitives and helper functions for working with <em>streams</em> of elements. A stream is anything which provides a <code>readFromStream</code> or <code>writeToStream</code> method. Also includes many stream implementations for things like files, sockets, chunked encoding, buffering, and more.
|
||||
</p>
|
||||
<img src="images/logo_d.png" class="lang-icon" alt="D programming language logo">
|
||||
</article>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url(../fonts/IBMPlexSans-Regular.woff2);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url(../fonts/IBMPlexSans-Italic.woff2);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url(../fonts/IBMPlexSans-Bold.woff2);
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url(../fonts/IBMPlexSans-BoldItalic.woff2);
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url(../fonts/IBMPlexSans-Light.woff2);
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Sans";
|
||||
src: url(../fonts/IBMPlexSans-LightItalic.woff2);
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Monospace variant(s) */
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url(../fonts/IBMPlexMono-Regular.ttf);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
.project-card {
|
||||
background-color: var(--background-color-2);
|
||||
padding: 0.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.project-card h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.lang-icon {
|
||||
max-height: 2.5em;
|
||||
}
|
||||
|
||||
.lang-icon:not(:last-child) {
|
||||
margin-right: 0.5em;
|
||||
}
|
|
@ -0,0 +1,80 @@
|
|||
:root.light {
|
||||
--background-color: #e8e8e8;
|
||||
--background-color-2: #e0e0e0;
|
||||
--background-color-3: #d1d1d1;
|
||||
--text-color: #1c1c1c;
|
||||
--link-color: #194b26;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--background-color: #1c1c1c;
|
||||
--background-color-2: #222222;
|
||||
--background-color-3: #2b2b2b;
|
||||
--text-color: #e8e8e8;
|
||||
--link-color: #46d169;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: "IBM Plex Sans", sans-serif;
|
||||
max-width: 50ch;
|
||||
margin: 0 auto;
|
||||
padding: 0 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
}
|
||||
|
||||
.stats-table {
|
||||
background-color: var(--background-color-2);
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
.stats-table th {
|
||||
text-align: start;
|
||||
border: 1px solid var(--background-color-3);
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.stats-table td {
|
||||
font-family: "IBM Plex Mono";
|
||||
text-align: end;
|
||||
border: 1px solid var(--background-color-3);
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header div {
|
||||
background-color: var(--background-color-2);
|
||||
margin: 0.25em auto;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.page-header a:not(:last-child) {
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
|
||||
.page-header-selected {
|
||||
text-decoration: underline !important;
|
||||
}
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Andrew's Homepage - Training</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="An overview of Andrew's lifting, endurance, and other athletic achievements.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles/font.css" type="text/css">
|
||||
|
||||
<!-- CSS class to hide elements if JS is not enabled. -->
|
||||
<noscript><style>.jsonly{display: none !important;}</style></noscript>
|
||||
|
||||
<script>
|
||||
// An inline script that manages the site's color theme.
|
||||
const THEMES = ["light", "dark"];
|
||||
|
||||
function getPreferredTheme() {
|
||||
const storedTheme = localStorage.getItem("theme");
|
||||
if (storedTheme !== null && THEMES.includes(storedTheme)) return storedTheme;
|
||||
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
return "dark";
|
||||
}
|
||||
return "light";
|
||||
}
|
||||
|
||||
function setPreferredTheme(theme) {
|
||||
document.documentElement.className = theme;
|
||||
localStorage.setItem("theme", theme);
|
||||
}
|
||||
|
||||
setPreferredTheme(getPreferredTheme());
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
|
||||
const newTheme = event.matches ? "dark" : "light";
|
||||
setPreferredTheme(newTheme);
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", event => {
|
||||
const themeToggleButton = document.getElementById("themeToggleButton");
|
||||
themeToggleButton.onclick = clickEvent => {
|
||||
const currentTheme = getPreferredTheme();
|
||||
const idx = THEMES.indexOf(currentTheme);
|
||||
const nextIdx = idx === THEMES.length - 1 ? 0 : idx + 1;
|
||||
setPreferredTheme(THEMES[nextIdx]);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="styles/style.css" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="page-header">
|
||||
<h1>Andrew's Training</h1>
|
||||
<nav>
|
||||
<div>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="blog.html">Articles</a>
|
||||
<a href="projects.html">Projects</a>
|
||||
<a class="page-header-selected" href="training.html">Training</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://github.com/andrewlalis">GitHub</a>
|
||||
<a href="https://www.linkedin.com/in/andrew-lalis/">LinkedIn</a>
|
||||
<a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button id="themeToggleButton" class="jsonly">Change Color Theme</button>
|
||||
<hr>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Lifting</h2>
|
||||
<p>
|
||||
This table lists my current personal records for various lifts, including the big 3 (<em>barbell bench, squat, and deadlift</em>). Unless I specify otherwise, these are all 1-rep-max attempts.
|
||||
</p>
|
||||
<p>
|
||||
You can check out my <a href="https://www.youtube.com/channel/UC9X4mx6-ObPUB6-ud2IGAFQ">YouTube channel</a> for some videos of these lifts.
|
||||
</p>
|
||||
<table class="stats-table">
|
||||
<tr><th>Barbell Bench Press</th><td>125 Kg</td></tr>
|
||||
<tr><th>Barbell Squat</th><td>170 Kg</td></tr>
|
||||
<tr><th>Barbell Deadlift (Conventional)</th><td>212.5 Kg</td></tr>
|
||||
<tr><th>Barbell Overhead Press</th><td>90 Kg</td></tr>
|
||||
<tr><th>Dumbbell Bench Press</th><td>50 Kg</td></tr>
|
||||
<tr><th>EZ-Bar Strict Curl</th><td>45 Kg</td></tr>
|
||||
</table>
|
||||
<p>
|
||||
Currently, I'm following a simple powerlifting "5x5" training plan for each of the big 3 lifts. This means that each time I perform one of those lifts, I do 5 working sets with a weight that's just heavy enough for me to do 5 reps with. Once I can successfully do a 5x5 with a certain weight twice in a row, I increment the weight slightly.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Running</h2>
|
||||
<p>
|
||||
Occasionally, I get into (somewhat) long-distance running. Here's a list of some of my achievements in that area.
|
||||
</p>
|
||||
<table class="stats-table">
|
||||
<tr><th>5k Personal Best</th><td><time datetime="PT20M29S">20:29</time></td></tr>
|
||||
<tr><th>10k Personal Best</th><td><time datetime="PT44M39S">44:39</time></td></tr>
|
||||
<tr><th>Best Distance</th><td>21.49 Km</td></tr>
|
||||
<tr><th>Total Distance</th><td>1025.30 Km</td></tr>
|
||||
</table>
|
||||
</article>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,4 @@
|
|||
/* PrismJS 1.29.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+arduino+bash+c+cpp+d+gdscript+glsl+java+json+json5+lua+markup-templating+php+powershell+python+rust+sql+yaml&plugins=line-numbers+normalize-whitespace */
|
||||
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
|
||||
pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
|