<!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 & 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>