258 lines
8.3 KiB
HTML
258 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="covers.css">
|
|
<style>
|
|
#spaceTakerUpper {
|
|
height: 105vh;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="top">
|
|
<div style="display:table;width:100%;height: 100%">
|
|
<div style="display:table-cell;vertical-align:middle;">
|
|
<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>
|
|
</div>
|
|
<div id="spaceTakerUpper">
|
|
</div>
|
|
<div class="slide">
|
|
<h1>About Me</h1>
|
|
<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.</p>
|
|
</div>
|
|
<div class="slide">
|
|
<h1>Projects</h1>
|
|
<div>
|
|
<div>
|
|
<div class="cover" id="sierra">
|
|
<!-- centering container -->
|
|
<div style="display:table;width:100%;height:100%;margin:0px;">
|
|
<div style="display:table-cell;vertical-align:middle;margin:0px;">
|
|
<h2>Project Sierra</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>Project description</p>
|
|
</div>
|
|
<div>
|
|
<div class="cover" id="sierra">
|
|
<!-- centering container -->
|
|
<div style="display:table;width:100%;height:100%;margin:0px;">
|
|
<div style="display:table-cell;vertical-align:middle;margin:0px;">
|
|
<h2>Project Sierra</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>Project description</p>
|
|
</div>
|
|
<div>
|
|
<div class="cover" id="sierra">
|
|
<!-- centering container -->
|
|
<div style="display:table;width:100%;height:100%;margin:0px;">
|
|
<div style="display:table-cell;vertical-align:middle;margin:0px;">
|
|
<h2>Project Sierra</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>Project description</p>
|
|
</div>
|
|
<div>
|
|
<div class="cover" id="sierra">
|
|
<!-- centering container -->
|
|
<div style="display:table;width:100%;height:100%;margin:0px;">
|
|
<div style="display:table-cell;vertical-align:middle;margin:0px;">
|
|
<h2>Project Sierra</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p>Project description</p>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
<script>
|
|
var last_known_scroll = getScrollY();
|
|
var queueing = false;
|
|
document.addEventListener("scroll", function() {
|
|
last_known_scroll = getScrollY();
|
|
if (!queueing) {
|
|
window.requestAnimationFrame(function() {
|
|
sc(last_known_scroll);
|
|
queueing = false;
|
|
});
|
|
}
|
|
queueing = true;
|
|
});
|
|
|
|
sc(last_known_scroll);
|
|
|
|
function sc(ypos) {
|
|
|
|
var wheight = window.innerHeight;
|
|
//top thing
|
|
var topDiv = document.getElementById("top");
|
|
var mast = document.getElementById("mast");
|
|
var hcalc = wheight - ypos;
|
|
var topHeight = 100;
|
|
if (hcalc > 100) {
|
|
topHeight = hcalc;
|
|
} else {
|
|
topHeight = 100;
|
|
}
|
|
// var mastHeight = mast.clientHeight;
|
|
// var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
|
|
if (topHeight < 300) {
|
|
mast.className = "small";
|
|
} else {
|
|
mast.className = "large";
|
|
}
|
|
topDiv.style.height = topHeight + "px";
|
|
console.log("topheight is " + topHeight + " and topDiv.style.height = " + topDiv.style.height);
|
|
// 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;
|
|
|
|
}
|
|
|
|
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> |