<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chuck Dries</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>When I was a child I was obsessed with trains and vacuum cleaners. I spent many sleepless nights marveling at these incredible machines. Today, I spend my nights pulling my hair out over webkit paint timing graphs. In a way, these nights are not
so different.</p>
<p>I'm a Computer Science student at Arizona State Univrsity interested in the intersection of technology and art. I pride myself in taking a diverse set of interests and my pixel perfect lovingly handcrafted 💯% good stuff 👍👌 HTML. These days,
you can find me at The State Press working on ways to innovate the news during the week and winning hackathons on the weekends.</p>
<h1>Skills <a id="skilltablebutton" style="text-decoration: underline; font-style: italic; font-weight: normal; font-size: 14px;" onclick="toggleSkillTable()">hide</a></h1>
<div id="skilltable">
<table>
<tr>
<td class="ld">The <span style="font-style:italic">Internet</span></td>
<td>
<ul>
<li>HTML5</li>
<li>CSS3 & Sass</li>
<li>Javascript, TypeScript, & Node</li>
</ul>
</td>
</tr>
<tr>
<td class="ld">General Programming & Scripting</td>
<td>
<ul>
<li>Java</li>
<li>C, C# with Unity, & C++</li>
<li>Python</li>
<li>Scheme</li>
<li>Bash</li>
</ul>
</td>
</tr>
<tr>
<td class="ld">System Administration</td>
<td>
<ul>
<li>Virtualization with KVM/LibVirt/QEMU and ESXi</li>
<li>A <span style="font-style:italic">lot</span> of time spent managing POSIX and Windows environments</li>
<li>Network configuration in PFSense and in general</li>
</ul>
</td>
</tr>
<tr>
<td class="ld">Software Packages</td>
<td>
<ul>
<li>Adobe Photoshop, Indesign, Premiere, & After Effects</li>
<li>Microsoft Office</li>
<li>MatLab and IPython/Anaconda Suite</li>
</ul>
</td>
</tr>
<tr>
<td class="ld">Life & non-technology skills</td>
<td>
<ul>
<li>A plethora of leadership experience</li>
<li>A Decent understanding of photography</li>
<li>A borderline unhealthy amount of curiosity</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
<div class="slide">
<h1>Projects & Experience</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;
var t = true;
var st = document.getElementById("skilltable");
var stb = document.getElementById("skilltablebutton");
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;
}
function toggleSkillTable() {
if (t) {
st.style.display = "none";
stb.innerText = "show";
t = false;
} else {
st.style.display = "block";
stb.innerText = "hide";
t = true;
}
}
</script>
</body>
</html>