248 lines
8.0 KiB
HTML
248 lines
8.0 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>
|
|
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 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> |