92 lines
2.4 KiB
HTML
92 lines
2.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<!-- Basic Page Needs -->
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Brian Picciano - Freelance Developer</title>
|
||
|
|
<meta name="author" content="Brian Picciano">
|
||
|
|
|
||
|
|
<!-- No favicon -->
|
||
|
|
<link rel="shortcut icon" href="#" />
|
||
|
|
|
||
|
|
<!-- Mobile Specific Metas -->
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
|
||
|
|
<!-- CSS -->
|
||
|
|
<link rel="stylesheet" href="css/normalize.css">
|
||
|
|
<link rel="stylesheet" href="css/skeleton.css">
|
||
|
|
<link rel="stylesheet" href="css/main.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="header">
|
||
|
|
<div class="tab"><a href="index.html">/resume</a></div><!--
|
||
|
|
--><div class="tab"><a href="contact.html">/contact</a></div><!--
|
||
|
|
--><div class="selected tab">/about</div>
|
||
|
|
<div class="x">X</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<h1>About This Site</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
The design of this site is based on the layout and color theme
|
||
|
|
of the IDE I use for all my development. I use
|
||
|
|
<a href="https://neovim.io/">Neovim</a> in a terminal, with the
|
||
|
|
<a href="https://github.com/NLKNguyen/papercolor-theme">Papercolor</a>
|
||
|
|
theme for readability.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
The server hosting this site, and all of my other services, lives in
|
||
|
|
my living room.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
<div class="scrollpos" id="scrollpos">---</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
function getScrollPct() {
|
||
|
|
|
||
|
|
const heightOfWindow = window.innerHeight,
|
||
|
|
contentScrolled = window.pageYOffset,
|
||
|
|
bodyHeight = document.body.offsetHeight;
|
||
|
|
|
||
|
|
if(bodyHeight - contentScrolled <= heightOfWindow) {
|
||
|
|
|
||
|
|
return "Bot";
|
||
|
|
|
||
|
|
} else if (contentScrolled == 0) {
|
||
|
|
|
||
|
|
return "Top";
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
const total = bodyHeight - heightOfWindow,
|
||
|
|
got = contentScrolled,
|
||
|
|
percent = parseInt((got/total) * 100);
|
||
|
|
|
||
|
|
return percent + "%"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const scrollposEl = document.getElementById("scrollpos");
|
||
|
|
scrollposEl.textContent = getScrollPct();
|
||
|
|
|
||
|
|
window.addEventListener("scroll", (event) => {
|
||
|
|
scrollposEl.textContent = getScrollPct();
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|