chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

New scroll mechanic

Browse Source
This commit is contained in:
Chuck Dries 2017-02-16 19:28:20 -07:00
parent 65636fb834
commit c76f7a8f46
6 changed files with 638 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Chuck.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 MiB

374
index.html
View File

@ -1,180 +1,196 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chuck Dries</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
//we're going to do a quick thing to measure how long it takes the page to load
var timerStart = Date.now();
window.onload = function () {
var time = Date.now() - timerStart;
console.log(time);
if (time > 1000) {
//browser is fast enough, run download and run animation scripts!
}
}
var x;
var mast;
function bgColor() {
var p = ((window.innerHeight - getScrollY()) / window.innerHeight); //calulate ratio of scroll
x.innerHTML = " " + String(parseInt(p * 100)); //display it
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
document.body.style.backgroundColor = colorString;
}
function getScrollY(){
//internet explorer does not have a window.scrollY property, so we need to make our own
return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
}
</script>
<style>
/*fallback styles*/
</style>
</head>
<body id="jscanary" class="nojs">
<div class="slide slide-full " id="mast">
<div class="vcwrapper full">
<!--Gross markup to facilitate vertical centering-->
<div style="display:table-row;height:100%;">
<!--ewwww tables-->
<div style="display:table-cell;vertical-align:middle;">
<div>
<h1 style="display:none;">Chuck Dries</h1>
<img src="cd.png" alt="Chuck Dries">
<h2 id="tagline"><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a> / <a href="#design">Design</a> / <a href="#photography">Photography</a> / <a href="#leadership">Leadership</a></h2>
<p>Digital Developer, <span class="sub">The State Press</span></p>
<p>Computer Science Student, <span class="sub">Arizona State University</span></p>
<p><a href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p>
<p>
<a href="http://github.com/chuckdries">Github</a> /
<a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> /
<a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
<a href="https://medium.com/@chuckdries">Blog</a>
</p>
</div>
</div>
</div>
<h2>Learn more <span id="db" class="arrow"></span></h2>
</div>
</div>
<div id="tech" class="slide">
<div class="copy">
<h1><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a></h1>
<h2>Overview</h2>
<div class="right">
<p>I'm currently studying Computer Science, and I have a wealth of experience through hackathons, odd jobs,
and working with multiple tech support clients. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur vitae quam ut felis blandit luctus. Suspendisse potenti. Vivamus a metus ex. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eget dapibus tortor, auctor
dignissim metus. Aliquam at sollicitudin tortor. Donec finibus faucibus erat, vitae cursus urna maximus
sed. Quisque tristique sit amet risus et tempus. Pellentesque sed metus nec nunc bibendum fringilla.
Curabitur accumsan ultrices est ut dapibus.
</p>
</div>
<h2>Skills</h2>
<div>
<table>
<tr>
<td class="ld">Web</td>
<td>HTML5, CSS3, Javascript &amp; Node</td>
</tr>
<tr>
<td class="ld">Programming</td>
<td>Java, C, C# with Unity, C++, Python, Scheme, Bash</td>
</tr>
<tr>
<td class="ld">Etcetera</td>
<td>Leadership experience, KVM/LibVirt/QEMU, ESXi</td>
</tr>
</table>
</div>
<h2>Experience: Jobs</h2>
<!--we can do some product page like stuff with pictures and everything-->
<h2>Experience: Projects</h2>
</div>
</div>
<div id="design" class="slide">
<div class="copy">
<h1>Design</h1>
<h2>Skills</h2>
<div>
<table>
<tr>
<td class="ld">Design</td>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</tr>
</table>
</div>
</div>
</div>
<div id="photography" class="slide">
<div class="copy">
<h1>Photography</h1>
<h2>Skills</h2>
<p>Replace this with something better</p>
<div>
<table>
<tr>
<td class="ld">Design</td>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</tr>
</table>
</div>
</div>
</div>
<div id="leadership" class="slide">
<div class="copy">
<h1>Leadership</h1>
<h2>Skills</h2>
<p>A skills list is definitely not relevant or helpful here!</p>
<div>
<table>
<tr>
<td class="ld">Design</td>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</tr>
</table>
</div>
</div>
</div>
<script>
/*why is this so indented?*/
x = document.getElementById("db"); //db is the scroll counter. Why is it called that?
//mast = document.getElementById("mast");
//style = window.getComputedStyle(mast);
//var color = style.getPropertyValue('color');
//if (color == "rgb(255, 255, 255)") { //we should check that the stylesheet is being applied to avoid making the entire page unreadable
document.getElementById("jscanary").className = "js";
bgColor();
document.addEventListener("scroll", bgColor);
window.addEventListener("resize", bgColor);
//}
</script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-34100225-1', 'auto');
ga('send', 'pageview');
</script>
<script src="scroll.js"></script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chuck Dries</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
//we're going to do a quick thing to measure how long it takes the page to load
var timerStart = Date.now();
window.onload = function () {
var time = Date.now() - timerStart;
console.log(time);
if (time > 1000) {
//browser is fast enough, run download and run animation scripts!
}
}
var x;
var mast;
function bgColor() {
var p = ((window.innerHeight - getScrollY()) / window.innerHeight); //calulate ratio of scroll
x.innerHTML = " " + String(parseInt(p * 100)); //display it
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
document.body.style.backgroundColor = colorString;
}
function getScrollY() {
//internet explorer does not have a window.scrollY property, so we need to make our own
return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
}
</script>
<style>
/*fallback styles*/
</style>
</head>
<body id="jscanary" class="nojs">
<div class="slide slide-full " id="mast">
<div class="vcwrapper full">
<!--Gross markup to facilitate vertical centering-->
<div style="display:table-row;height:100%;">
<!--ewwww tables-->
<div style="display:table-cell;vertical-align:middle;">
<div>
<h1 style="display:none;">Chuck Dries</h1>
<img src="cd.png" alt="Chuck Dries">
<h2 id="tagline"><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a> / <a href="#design">Design</a> / <a href="#photography">Photography</a> / <a href="#leadership">Leadership</a></h2>
<p>Digital Developer, <span class="sub">The State Press</span></p>
<p>Computer Science Student, <span class="sub">Arizona State University</span></p>
<p><a href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p>
<p>
<a href="http://github.com/chuckdries">Github</a> /
<a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> /
<a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
<a href="https://medium.com/@chuckdries">Blog</a>
</p>
</div>
</div>
</div>
<h2>Learn more <span id="db" class="arrow"></span></h2>
</div>
</div>
<div id="tech" class="slide">
<div class="copy">
<h1><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a></h1>
<!--<h2>Overview</h2>-->
<div class="right">
<p>I'm a motivated Computer Science student at ASU with a focus on the intersection of humanities and computers.
</p>
</div>
<h2>Skills</h2>
<div>
<table>
<tr>
<td class="ld">Web</td>
<td>HTML5, CSS3, Javascript &amp; Node</td>
</tr>
<tr>
<td class="ld">Programming</td>
<td>Java, C, C# with Unity, C++, Python, Scheme, Bash</td>
</tr>
<tr>
<td class="ld">Etcetera</td>
<td>Leadership experience, KVM/LibVirt/QEMU, ESXi</td>
</tr>
</table>
</div>
<h2>Experience: Jobs</h2>
<!--we can do some product page like stuff with pictures and everything-->
<ul>
<li>
<h3>The State Press</h3>
</li>
<li>
<h3>Desert Community Robotics</h3>
</li>
</ul>
<h2>Experience: Projects</h2>
<ul>
<li>
<h3>Volunteer Management Portal</h3>
</li>
<li>
<h3>PaperBoy</h3>
</li>
<li>
<h3>Linker</h3>
</li>
<li>
<h3>Sorting Algorithm Visualizer</h3>
</li>
</ul>
</div>
</div>
<div id="design" class="slide">
<div class="copy">
<h1>Design</h1>
<h2>Skills</h2>
<div>
<table>
<tr>
<td class="ld">Design</td>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</tr>
</table>
</div>
</div>
</div>
<div id="photography" class="slide">
<div class="copy">
<h1>Photography</h1>
<h2>Skills</h2>
<p>Replace this with something better</p>
<div>
<table>
<tr>
<td class="ld">Design</td>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</tr>
</table>
</div>
</div>
</div>
<div id="leadership" class="slide">
<div class="copy">
<h1>Leadership</h1>
<h2>Skills</h2>
<p>A skills list is definitely not relevant or helpful here!</p>
<div>
<table>
<tr>
<td class="ld">Design</td>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</tr>
</table>
</div>
</div>
</div>
<script>
/*why is this so indented?*/
x = document.getElementById("db"); //db is the scroll counter. Why is it called that?
//mast = document.getElementById("mast");
//style = window.getComputedStyle(mast);
//var color = style.getPropertyValue('color');
//if (color == "rgb(255, 255, 255)") { //we should check that the stylesheet is being applied to avoid making the entire page unreadable
document.getElementById("jscanary").className = "js";
bgColor();
document.addEventListener("scroll", bgColor);
window.addEventListener("resize", bgColor);
//}
</script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-34100225-1', 'auto');
ga('send', 'pageview');
</script>
<script src="scroll.js"></script>
</body>
</html>

163
style.css
View File

@ -1,70 +1,93 @@
.reset, body, .slide {
padding: 0px;
margin: 0px;
clear: both; }
* {
transition-duration: .2s; }
body {
font-family: serif;
font-size: 1em;
line-height: 1.6;
transition: none; }
#mast {
background: none;
line-height: 1.2;
color: white; }
#mast a {
color: white;
font-style: italic; }
#mast a:hover {
color: #ed1a76; }
#mast .sub {
font-style: italic;
color: #ccc; }
#mast img {
width: 100%;
max-width: 400px; }
.copy h1 {
text-decoration: underline;
font-style: italic; }
.copy h1 a {
color: black; }
.nojs body {
background: white; }
.nojs #mast {
background: black; }
.slide {
padding: 0px; }
.slide div {
/*width wrapping*/
max-width: 800px;
margin: auto; }
.full {
height: 100vh;
width: 100%; }
.vcwrapper {
display: table; }
.arrow {
font-variant-position: sub;
font-size: .6em; }
.arrow:before {
content: "\0025BC"; }
h1 {
font-size: 2em; }
h2 {
font-weight: normal;
font-style: italic; }
/*# sourceMappingURL=style.css.map */
.reset, body, .slide {
padding: 0px;
margin: 0px;
clear: both; }
body {
font-family: serif;
font-size: 1em;
line-height: 1.6;
transition: none; }
#top {
position: fixed;
background: black; }
#mast {
background: none;
line-height: 1.2;
color: white; }
#mast a {
color: white;
font-style: italic; }
#mast a:hover {
color: #ed1a76; }
#mast .sub {
font-style: italic;
color: #ccc; }
#mast img {
transition-duration: .2s; }
#mast .hideable {
transition-duration: .2s; }
#mast h2 {
transition-property: size;
transition-duration: .2s; }
.small .hideable {
display: none;
opacity: 0; }
.small img {
max-width: 200px; }
.small h2 {
font-size: 1em; }
.large img {
width: 100%;
max-width: 400px; }
.large .hideable {
opacity: 1; }
.copy h1 {
text-decoration: underline;
font-style: italic; }
.copy h1 a {
color: black; }
.nojs body {
background: white; }
.nojs #mast {
background: black; }
.slide {
padding: 0px;
width: 100%; }
.slide div {
/*width wrapping*/
max-width: 800px;
margin: auto; }
.full {
height: 100vh;
width: 100%; }
.vcwrapper {
display: table; }
.arrow {
font-variant-position: sub;
font-size: .6em; }
.arrow:before {
content: "\0025BC"; }
h1 {
font-size: 2em; }
h2 {
font-weight: normal;
font-style: italic; }
a {
transition-duration: .2s; }
/*# sourceMappingURL=style.css.map */

14
style.css.map
View File

@ -1,7 +1,7 @@
{
"version": 3,
"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAEf,CAAC;EACG,mBAAmB,EAAE,GAAG;;AAI5B,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAO;IACH,KAAK,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAI;IACA,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;;AAKpB,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAC;IACG,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AASzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,UAAI;IACA,kBAAkB;IAClB,SAAS,EAvET,KAAK;IAwEL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM",
"sources": ["style.scss"],
"names": [],
"file": "style.css"
}
{
"version": 3,
"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAIf,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAEpB,IAAI;EACA,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;;AAErB,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAG;IACC,mBAAmB,EAAE,GAAG;EAE5B,eAAS;IACL,mBAAmB,EAAE,GAAG;EAE5B,QAAE;IACE,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAK5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAG;EACC,SAAS,EAAE,KAAK;AAEpB,SAAE;EACE,SAAS,EAAE,GAAG;;AAItB,UAAI;EACI,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAS;EACL,OAAO,EAAE,CAAC;;AAMd,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAE;IACE,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,kBAAkB;IAClB,SAAS,EAjGT,KAAK;IAkGL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAEtB,CAAC;EACG,mBAAmB,EAAE,GAAG",
"sources": ["style.scss"],
"names": [],
"file": "style.css"
}

233
style.scss
View File

@ -1,103 +1,132 @@
//setup
$width: 800px;
$grey: #ccc;
$pink: #ed1a76;
.reset {
padding: 0px;
margin: 0px;
clear: both;
}
*{
transition-duration: .2s;
}
//sections
body {
@extend .reset;
font-family: serif;
font-size: 1em;
line-height: 1.6;
transition: none;
}
#mast {
background: none;
line-height: 1.2;
color: white;
a {
color: white;
font-style: italic;
}
a:hover{
color: $pink;
}
.sub {
font-style: italic;
color: $grey;
}
img {
width: 100%;
max-width: 400px;
}
}
.copy {
h1 {
text-decoration: underline;
font-style: italic;
a{
color: black;
}
}
}
.nojs {
body {
background: white;
}
#mast {
background: black;
}
}
//standalone elements
p {
// max-width: 600px;
}
.slide {
@extend .reset;
padding: 0px;
div {
/*width wrapping*/
max-width: $width;
margin: auto;
}
}
.full {
height: 100vh;
width: 100%;
}
.vcwrapper {
display: table;
}
.arrow {
font-variant-position: sub;
font-size: .6em;
}
.arrow:before {
content: "\0025BC";
}
h1 {
font-size: 2em;
}
h2 {
font-weight: normal;
font-style: italic;
//setup
$width: 800px;
$grey: #ccc;
$pink: #ed1a76;
.reset {
padding: 0px;
margin: 0px;
clear: both;
}
//sections
body {
@extend .reset;
font-family: serif;
font-size: 1em;
line-height: 1.6;
transition: none;
}
#top{
position: fixed;
background: black;
}
#mast {
background: none;
line-height: 1.2;
color: white;
a {
color: white;
font-style: italic;
}
a:hover {
color: $pink;
}
.sub {
font-style: italic;
color: $grey;
}
img{
transition-duration: .2s;
}
.hideable{
transition-duration: .2s;
}
h2{
transition-property: size;
transition-duration: .2s;
}
}
.small {
.hideable {
display: none;
opacity: 0;
}
img{
max-width: 200px;
}
h2{
font-size: 1em;
}
}
.large{
img {
width: 100%;
max-width: 400px;
}
.hideable{
opacity: 1;
}
}
.copy {
h1 {
text-decoration: underline;
font-style: italic;
a {
color: black;
}
}
}
.nojs {
body {
background: white;
}
#mast {
background: black;
}
}
//standalone elements
.slide {
@extend .reset;
padding: 0px;
width: 100%;
div {
/*width wrapping*/
max-width: $width;
margin: auto;
}
}
.full {
height: 100vh;
width: 100%;
}
.vcwrapper {
display: table;
}
.arrow {
font-variant-position: sub;
font-size: .6em;
}
.arrow:before {
content: "\0025BC";
}
h1 {
font-size: 2em;
}
h2 {
font-weight: normal;
font-style: italic;
}
a{
transition-duration: .2s;
}

212
toptest.html Normal file
View File

@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style>
#spaceTakerUpper {
height: 100vh;
}
</style>
</head>
<body>
<div class="slide" id="top">
<div id="mast">
<h1 style="display:none;">Chuck Dries</h1>
<img src="cd.png" alt="Chuck Dries">
<h2 id="tagline"><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a> / <a href="#design">Design</a> / <a href="#photography">Photography</a> / <a href="#leadership">Leadership</a></h2>
<div class="hideable">
<p>Digital Developer, <span class="sub">The State Press</span></p>
<p>Computer Science Student, <span class="sub">Arizona State University</span></p>
<p><a href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p>
<p>
<a href="http://github.com/chuckdries">Github</a> /
<a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> /
<a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
<a href="https://medium.com/@chuckdries">Blog</a>
</p>
</div>
</div>
</div>
<div id="spaceTakerUpper">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus lorem, pretium non suscipit vel, dapibus non dolor.
Suspendisse potenti. Phasellus interdum tempus placerat. Vivamus nec interdum mauris. Integer eu neque lacus. Nulla
turpis turpis, fermentum in elementum nec, aliquam sed elit. Maecenas fringilla tristique leo quis mattis. In tempor
justo id vehicula porta. Ut metus tortor, laoreet quis iaculis ac, aliquet et metus. Suspendisse potenti. Nullam
at hendrerit neque. Vestibulum scelerisque turpis felis, et mollis risus suscipit eget. Donec condimentum ornare
dictum. Vivamus rhoncus felis nisl, suscipit imperdiet ante tempus sit amet. Nullam lobortis sem ultricies, tempus
felis a, hendrerit lacus. Suspendisse potenti. Suspendisse sollicitudin purus vitae felis molestie placerat. Vivamus
aliquam tincidunt velit, id cursus purus euismod vitae. Praesent a rhoncus quam, non scelerisque lorem. Aenean mollis
dapibus odio, ut bibendum arcu mattis vitae. Maecenas id faucibus arcu. Aenean ullamcorper urna id cursus semper.
Sed aliquet, est ut interdum ultrices, arcu libero venenatis lacus, ut viverra ante massa id elit. Mauris molestie
enim sit amet neque viverra, luctus laoreet dolor efficitur. Mauris non mi auctor, tincidunt odio in, ultricies sapien.
Sed mollis ligula vitae magna malesuada imperdiet. Aliquam quis felis urna. Morbi feugiat metus sed massa finibus
dapibus at sed augue. Curabitur in eleifend neque. Sed malesuada rutrum tellus, sit amet tempus enim pretium sed.
Mauris nisi eros, facilisis a ornare sit amet, efficitur vitae mauris. Aliquam in nibh placerat, mollis augue sit
amet, interdum felis. Morbi justo felis, semper ac lorem in, lobortis pharetra purus. Curabitur ut neque vitae magna
interdum pulvinar ac vitae dui. Donec consequat est ex, et tincidunt tellus rhoncus nec. Donec a dictum nisi, mollis
egestas lectus. Quisque vel fringilla justo, ultricies pharetra dui. Morbi egestas libero et turpis congue tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Aenean ullamcorper luctus dolor, nec consectetur erat placerat at. Phasellus a metus
sed lorem molestie euismod finibus id turpis. Integer iaculis dignissim eleifend. Ut enim risus, bibendum ac ultricies
tempus, blandit ut justo. Morbi id nulla tincidunt, aliquet quam et, consectetur purus. Quisque lobortis leo lorem,
sit amet pellentesque leo eleifend non. Fusce consectetur sapien risus, id sagittis velit ornare vitae. Duis ultricies,
sem sed facilisis lacinia, ex libero finibus ex, vel egestas ex lacus in dui. Quisque eros nulla, placerat a massa
et, fringilla feugiat purus. Proin ipsum neque, varius in turpis id, facilisis convallis justo. Donec vulputate sapien
pharetra erat blandit semper. Vestibulum mollis, ante sit amet tristique ullamcorper, leo dolor iaculis ligula, eget
dapibus nulla lorem viverra felis. Nulla eleifend fermentum ipsum a posuere. Curabitur sed placerat elit, ac molestie
metus. Pellentesque id eros volutpat, volutpat leo nec, finibus justo. Fusce euismod, mi bibendum ornare tincidunt,
lorem nisi interdum turpis, vulputate pretium lectus augue eget sem. Nam et nibh purus. Cras volutpat sagittis accumsan.
Vestibulum semper dui hendrerit, iaculis nunc at, imperdiet ligula. Cras fringilla nunc eros, non bibendum lorem
cursus non. Quisque scelerisque mauris accumsan risus ultrices maximus. Aenean tristique gravida suscipit. Mauris
sit amet varius tellus. Suspendisse interdum dolor sit amet lacinia consequat. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Integer nec mattis nisi. Orci varius natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Sed quis enim at sapien scelerisque tristique non et libero.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
sc();
document.addEventListener("scroll", sc);
function sc() {
var ypos = getScrollY();
var wheight = window.innerHeight;
//top thing
var topDiv = document.getElementById("top");
var mast = document.getElementById("mast");
var topHeight = wheight - ypos;
var mastHeight = mast.clientHeight;
var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
if(topHeight < 300){
mast.className = "small";
console.log("boop!");
}else{
mast.className = "large";
}
if (topHeight > 100) {
topDiv.style.height = topHeight + "px";
mast.style.marginTop = halfHeight + "px";
}
//background thing
var p = ((wheight - ypos) / wheight); //calulate ratio of scroll
// x.innerHTML = " " + String(parseInt(p * 100)); //display it
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
document.body.style.backgroundColor = colorString;
console.log("wheight = " + wheight);
}
function bgColor() {
}
function getScrollY() {
//internet explorer does not have a window.scrollY property, so we need to make our own
return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
}
</script>
</body>
</html>