254 lines
12 KiB
HTML
254 lines
12 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: 98vh;
|
|
}
|
|
</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" style="margin-top:0px;">
|
|
<h1>About Me <span style="font-size: .5em; font-weight:normal; color: #666;">(Why I rock)</span></h1>
|
|
<h4>A brief history of Chuck & tech</h4>
|
|
<p>When I was a child I was obsessed with trains and vacuum cleaners. In elementary school my grandma tried to teach me Photoshop. In seventh grade I started teaching myself HTML. Freshman year I started learning the basics of networking and BASH so I could run a Minecraft server on my sparkly new iMac. In the first half of high school I volunteered at Phoenix Children's Hospital and in the second half I taught robotics at The Waybright Academy. On top of that, I was active throughout the school as an officer of Firebird Robotics, the director of Firebird Word, and the design editor of Chaparral Ashes. I've been digging around in computers my whole life.</p>
|
|
<h4>The Modern Chuck</h4>
|
|
<p>I'm a Computer Science student and Hackathon winner at Arizona State University interested in the intersection of technology and art. I pride myself in taking a diverse set of interest and the resulting broad set of experiences. From editorial experience working to innovate the news at the State Press to random open source contributions in my free time, I do a lot. </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 '17</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="ohack16">
|
|
</div>
|
|
<div class="details">
|
|
<div class="award">
|
|
<div>
|
|
<h3>3rd Place</h3>
|
|
<p>OHack '16</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>
|
|
<p>© Chuck Dries 2017</p>
|
|
<p style="font-family: sans-serif">;)</p>
|
|
</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> |