351 lines
13 KiB
HTML
351 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Chuck Dries</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
|
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://chuckdri.es/icons/apple-touch-icon-57x57.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://chuckdri.es/icons/apple-touch-icon-114x114.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://chuckdri.es/icons/apple-touch-icon-72x72.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://chuckdri.es/icons/apple-touch-icon-144x144.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://chuckdri.es/icons/apple-touch-icon-120x120.png" />
|
|
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://chuckdri.es/icons/apple-touch-icon-152x152.png" />
|
|
<link rel="icon" type="image/png" href="http://chuckdri.es/icons/favicon-32x32.png" sizes="32x32" />
|
|
<link rel="icon" type="image/png" href="http://chuckdri.es/icons/favicon-16x16.png" sizes="16x16" />
|
|
<meta name="application-name" content="Chuck Dries" />
|
|
<meta name="msapplication-TileColor" content="#FFFFFF" />
|
|
<meta name="msapplication-TileImage" content="http://chuckdri.es/icons/mstile-144x144.png" />
|
|
|
|
<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="images/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/chuckblog">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 and Hackathon winner at Arizona State University and I'm interested in the intersection of technology and art. I pride myself in taking a diverse set of interest 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>
|
|
<p>This website is still an active development project, pls don't judge too harshly.</p>
|
|
<div id="skilltable" style="display:none; ">
|
|
<h1 id="skills">Skills</h1>
|
|
<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><a id="skilltablebutton" style="text-decoration: underline; font-size: 1.1em; font-style: italic; font-weight: normal;" onclick="toggleSkillTable()">More about me</a>
|
|
</div>
|
|
</div>
|
|
<div class="slide">
|
|
<h1>Projects & Experience</h1>
|
|
<div class="grid" data-masonry='{ "itemSelector": ".project", "columnWidth": 400 }'>
|
|
<div class="project">
|
|
<div class="cover" id="virtualKeyality">
|
|
</div>
|
|
<div class="details">
|
|
<div class="award">
|
|
<div>
|
|
<h3>1st Place</h3>
|
|
<p>Desert Hacks 2017</p>
|
|
</div>
|
|
</div>
|
|
<h2>Virtual Keyality</h2>
|
|
<p>A VR typing game.</p>
|
|
<p>The idea started as something of a joke, but after prototyping we realized that we stumbled upon a killer feature: when you're wearing the headset, you can't see your keyboard. </p>
|
|
<p><a href="https://github.com/James-Quigley/deserthacks">View on GitHub</a></p>
|
|
<span class="tag cat">Tech</span>
|
|
<span class="tag cat">Design</span>
|
|
<span class="tag">Unity</span>
|
|
<span class="tag">C#</span>
|
|
<span class="tag">Virtual Reality</span>
|
|
<span class="tag">SteamVR</span>
|
|
<span class="tag">Hackathon projects</span>
|
|
</div>
|
|
</div>
|
|
<div class="project">
|
|
<div class="cover" id="virtualKeyality">
|
|
</div>
|
|
<div class="details">
|
|
<div class="award">
|
|
<div>
|
|
<h3>3rd Place</h3>
|
|
<p>Opportunity Hack 2016</p>
|
|
</div>
|
|
</div>
|
|
<h2>Volunteer Management Portal</h2>
|
|
<p>A web app for nonprofits.</p>
|
|
<p>Opportunity Hack is a charity hackathon where hackers are paired with nonprofits to solve the real world problems they face. The Lost Our Home pet rescue needed a better way to track volunteers and encourage volunteers to keep coming
|
|
back. Our solution revolved around easy to access scheduling and volunteer-hour leaderboards to encourage first time volunteers to return.</p>
|
|
<p><a href="https://github.com/Opportunity-Hack-2016-AZ/Team15">View on GitHub</a></p>
|
|
<span class="tag cat">Tech</span>
|
|
<span class="tag cat">Design</span>
|
|
<span class="tag">NodeJS</span>
|
|
<span class="tag">MongoDB</span>
|
|
<span class="tag">ExpressJS</span>
|
|
<span class="tag">Bootstrap</span>
|
|
<span class="tag">Web</span>
|
|
<span class="tag">Hackathon projects</span>
|
|
</div>
|
|
</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 = false;
|
|
var st = document.getElementById("skilltable");
|
|
var stb = document.getElementById("skilltablebutton");
|
|
document.addEventListener("scroll", function() {
|
|
last_known_scroll = getScrollY();
|
|
sc(last_known_scroll);
|
|
// Usually an important performance consideration, this ends up significantly delaying the resizing of the top box, which is important to stay sized correctly
|
|
// if (!queueing) {
|
|
// window.requestAnimationFrame(function() {
|
|
// sc(last_known_scroll);
|
|
// queueing = false;
|
|
// });
|
|
// }
|
|
// queueing = true;
|
|
});
|
|
|
|
sc(last_known_scroll);
|
|
|
|
//execute scroll style modifications
|
|
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 = "More about me";
|
|
t = false;
|
|
} else {
|
|
st.style.display = "block";
|
|
stb.innerText = "Less about me";
|
|
t = true;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |