Add firebird robotics site
This commit is contained in:
225
index.html
225
index.html
@@ -6,7 +6,6 @@
|
||||
<title>Chuck Dries</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i" rel="stylesheet">
|
||||
<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" />
|
||||
@@ -28,7 +27,9 @@
|
||||
<div id="mast">
|
||||
<h1 style="display:none;">Chuck Dries</h1>
|
||||
<img src="images/cd.png" alt="Chuck Dries">
|
||||
<h2 class="tagline">Programmer <span style="font-style: normal">/</span> Student <span style="font-style: normal">/</span> Friendly dude
|
||||
<h2 class="tagline">Programmer
|
||||
<span style="font-style: normal">/</span> Student
|
||||
<span style="font-style: normal">/</span> Friendly dude
|
||||
</h2>
|
||||
<p>
|
||||
<a href="#about">About Me</a> /
|
||||
@@ -36,9 +37,14 @@
|
||||
<a href="#projects">Projects</a>
|
||||
</p>
|
||||
<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>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> /
|
||||
@@ -57,7 +63,9 @@
|
||||
</div>
|
||||
<div class="slide" style="margin-top:0px;">
|
||||
<a name="about" style="padding-top: 130px"></a>
|
||||
<h1>About Me <span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock 🎶</span></h1>
|
||||
<h1>About Me
|
||||
<span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock 🎶</span>
|
||||
</h1>
|
||||
<h3>A brief history of Chuck & tech</h3>
|
||||
<p>I'm a computer science student with experience in photography, digital and print graphic design, teaching, and leading.
|
||||
I've been "into computers" my whole life, but I didn't really get into the technical stuff until middle school,
|
||||
@@ -71,7 +79,9 @@
|
||||
<div id="skilltable" style="display:none;">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="ld">The <span style="font-style:italic">Internet</span></td>
|
||||
<td class="ld">The
|
||||
<span style="font-style:italic">Internet</span>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>HTML5</li>
|
||||
@@ -98,7 +108,8 @@
|
||||
<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>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>
|
||||
@@ -125,14 +136,15 @@
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div><a id="skilltablebutton" onclick="toggleSkillTable()">Show skills table</a>
|
||||
<div>
|
||||
<a id="skilltablebutton" onclick="toggleSkillTable()">Show skills table</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<a name="projects" style="padding-top: 130px;"></a>
|
||||
<h1>Projects & Experience</h1>
|
||||
<p style="text-indent: 0; margin-bottom: 5px;font-style: italic; font-weight:normal; color: #555;">More projects coming. For now, check my github or email me.</p>
|
||||
<div class="grid" data-masonry='{"itemSelector" :".project", "columnWidth": 400 }'>
|
||||
<div class="grid">
|
||||
<div class="project">
|
||||
<div class="cover" id="virtualKeyality">
|
||||
</div>
|
||||
@@ -147,7 +159,9 @@
|
||||
<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://devpost.com/software/deserthacks">View on Devpost</a></p>
|
||||
<p>
|
||||
<a href="https://devpost.com/software/deserthacks">View on Devpost</a>
|
||||
</p>
|
||||
<span class="tag">Unity</span>
|
||||
<span class="tag">C#</span>
|
||||
<span class="tag">Virtual Reality</span>
|
||||
@@ -171,7 +185,9 @@
|
||||
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>
|
||||
<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>
|
||||
@@ -182,91 +198,124 @@
|
||||
<span class="tag">Hackathon projects</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project">
|
||||
<div class="cover" id="fbr">
|
||||
<video autoplay loop src="images/scroll.mp4"></video>
|
||||
</div>
|
||||
<div class="details">
|
||||
<h2>Firebird Robotics Website</h2>
|
||||
<p>My First Real Website</p>
|
||||
<p>I was on my high school's robotics team, and we needed a website. This is where I really learned CSS
|
||||
in depth, I handled the photography and wrote the entire site by hand fresh every year. I no longer
|
||||
control the content of the site, so instead of linking it directly, I'm linking it as it existed
|
||||
in two different school years while I was still in charge.</p>
|
||||
<p>
|
||||
<a href="http://web.archive.org/web/20150209123618im_/http://firebirdrobotics.com/default.html">2014 School Year</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://web.archive.org/web/20150908032117im_/http://www.firebirdrobotics.com:80/">2015 School Year</a>
|
||||
</p>
|
||||
<!--<span class="tag cat ">Tech</span>-->
|
||||
<!--<span class="tag cat ">Design</span>-->
|
||||
<span class="tag">Web</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>© Chuck Dries 2017</p>
|
||||
<br>
|
||||
<!--ewwww-->
|
||||
</div>
|
||||
<p>© Chuck Dries 2017</p>
|
||||
<br>
|
||||
<!--ewwww-->
|
||||
</div>
|
||||
<script>
|
||||
var last_known_scroll = getScrollY();
|
||||
var queueing = false;
|
||||
var t = false; //state of skill table
|
||||
var st = document.getElementById("skilltable");
|
||||
var stb = document.getElementById("skilltablebutton");
|
||||
var sp = document.getElementById("scrollprompt");
|
||||
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;
|
||||
});
|
||||
<script>
|
||||
var last_known_scroll = getScrollY();
|
||||
var queueing = false;
|
||||
var t = false; //state of skill table
|
||||
var st = document.getElementById("skilltable");
|
||||
var stb = document.getElementById("skilltablebutton");
|
||||
var sp = document.getElementById("scrollprompt");
|
||||
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 windowHeight = window.innerHeight;
|
||||
//top thing
|
||||
var topDiv = document.getElementById("top");
|
||||
var mast = document.getElementById("mast");
|
||||
var hcalc = windowHeight - ypos;
|
||||
var topheight;
|
||||
if (hcalc > 130) {
|
||||
topHeight = hcalc;
|
||||
} else {
|
||||
topHeight = 130;
|
||||
}
|
||||
// var mastHeight = mast.clientHeight;
|
||||
// var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
|
||||
if (topHeight < 360) {
|
||||
topDiv.className = "small";
|
||||
} else {
|
||||
topDiv.className = "large";
|
||||
}
|
||||
topDiv.style.height = topHeight - 10 + "px"; //subtract 10 to account for padding-top on #top
|
||||
|
||||
//background thing
|
||||
var p = ((windowHeight - ypos) / windowHeight); //calulate ratio of scroll
|
||||
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
|
||||
|
||||
}
|
||||
queueing = true;
|
||||
});
|
||||
|
||||
sc(last_known_scroll);
|
||||
|
||||
//execute scroll style modifications
|
||||
function sc(ypos) {
|
||||
|
||||
var windowHeight = window.innerHeight;
|
||||
//top thing
|
||||
var topDiv = document.getElementById("top");
|
||||
var mast = document.getElementById("mast");
|
||||
var hcalc = windowHeight - ypos;
|
||||
var topheight;
|
||||
if (hcalc > 130) {
|
||||
topHeight = hcalc;
|
||||
} else {
|
||||
topHeight = 130;
|
||||
function getScrollY() {
|
||||
//internet explorer does not have a window.scrollY property, it has pageYOffset
|
||||
return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
|
||||
}
|
||||
// var mastHeight = mast.clientHeight;
|
||||
// var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
|
||||
if (topHeight < 360) {
|
||||
topDiv.className = "small";
|
||||
} else {
|
||||
topDiv.className = "large";
|
||||
|
||||
function toggleSkillTable() {
|
||||
if (t) {
|
||||
st.style.display = "none";
|
||||
stb.innerText = "Show skills table";
|
||||
t = false;
|
||||
} else {
|
||||
st.style.display = "block";
|
||||
stb.innerText = "Less about me";
|
||||
t = true;
|
||||
}
|
||||
}
|
||||
topDiv.style.height = topHeight - 10 + "px"; //subtract 10 to account for padding-top on #top
|
||||
|
||||
//background thing
|
||||
var p = ((windowHeight - ypos) / windowHeight); //calulate ratio of scroll
|
||||
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
|
||||
|
||||
}
|
||||
|
||||
function getScrollY() {
|
||||
//internet explorer does not have a window.scrollY property, it has pageYOffset
|
||||
return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
|
||||
}
|
||||
|
||||
function toggleSkillTable() {
|
||||
if (t) {
|
||||
st.style.display = "none";
|
||||
stb.innerText = "Show skills table";
|
||||
t = false;
|
||||
} else {
|
||||
st.style.display = "block";
|
||||
stb.innerText = "Less about me";
|
||||
t = true;
|
||||
function openSkillTable() {
|
||||
if (!t) {
|
||||
st.style.display = "block";
|
||||
stb.innerText = "Less about me";
|
||||
t = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function openSkillTable() {
|
||||
if (!t) {
|
||||
st.style.display = "block";
|
||||
stb.innerText = "Less about me";
|
||||
t = true;
|
||||
function prompt() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function prompt() {
|
||||
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
||||
<script>
|
||||
var msnry = new Masonry('.grid', {
|
||||
itemSelector: '.project',
|
||||
columnWidth: 400,
|
||||
// disable initial layout
|
||||
initLayout: false
|
||||
});
|
||||
window.onload = function () {
|
||||
msnry.layout();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user