chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add firebird robotics site

Browse Source
This commit is contained in:
Chuck Dries 2017-10-14 03:55:07 -07:00
parent 6087de6e79
commit 897e6f390f
5 changed files with 160 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/style.css
View File

@ -229,7 +229,8 @@ body {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
box-shadow: 1px 1px 3px #ddd; box-shadow: 1px 1px 3px #ddd;
background: white; } background: white;
margin-bottom: 20px; }
.slide div .project .cover { .slide div .project .cover {
height: 15em; height: 15em;
background-position: center center; background-position: center center;
@ -237,6 +238,9 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
margin: 0px; margin: 0px;
padding: 1em; } padding: 1em; }
.slide div .project .cover video {
height: 100%;
width: 100%; }
.slide div .project .details { .slide div .project .details {
padding: 1em 1em 0 1em; } padding: 1em 1em 0 1em; }
.slide div .project .details h2 { .slide div .project .details h2 {

BIN
images/scroll.mp4 Normal file
View File

Binary file not shown.

225
index.html
View File

@ -6,7 +6,6 @@
<title>Chuck Dries</title> <title>Chuck Dries</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <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="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="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="72x72" href="http://chuckdri.es/icons/apple-touch-icon-72x72.png" />
@ -28,7 +27,9 @@
<div id="mast"> <div id="mast">
<h1 style="display:none;">Chuck Dries</h1> <h1 style="display:none;">Chuck Dries</h1>
<img src="images/cd.png" alt="Chuck Dries"> <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> </h2>
<p> <p>
<a href="#about">About Me</a> / <a href="#about">About Me</a> /
@ -36,9 +37,14 @@
<a href="#projects">Projects</a> <a href="#projects">Projects</a>
</p> </p>
<div class="hideable"> <div class="hideable">
<p>Digital Developer, <span class="sub">The State Press</span></p> <p>Digital Developer,
<p>Computer Science Student, <span class="sub">Arizona State University</span></p> <span class="sub">The State Press</span>
<p><a href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p> </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> <p>
<a href="http://github.com/chuckdries">Github</a>/ <a href="http://github.com/chuckdries">Github</a>/
<a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> / <a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> /
@ -57,7 +63,9 @@
</div> </div>
<div class="slide" style="margin-top:0px;"> <div class="slide" style="margin-top:0px;">
<a name="about" style="padding-top: 130px"></a> <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 &amp; tech</h3> <h3>A brief history of Chuck &amp; tech</h3>
<p>I'm a computer science student with experience in photography, digital and print graphic design, teaching, and leading. <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, 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;"> <div id="skilltable" style="display:none;">
<table> <table>
<tr> <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> <td>
<ul> <ul>
<li>HTML5</li> <li>HTML5</li>
@ -98,7 +108,8 @@
<td> <td>
<ul> <ul>
<li>Virtualization with KVM/LibVirt/QEMU and ESXi</li> <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> <li>Network configuration in PFSense and in general</li>
</ul> </ul>
</td> </td>
@ -125,14 +136,15 @@
</tr> </tr>
</table> </table>
</div> </div>
<div><a id="skilltablebutton" onclick="toggleSkillTable()">Show skills table</a> <div>
<a id="skilltablebutton" onclick="toggleSkillTable()">Show skills table</a>
</div> </div>
</div> </div>
<div class="slide"> <div class="slide">
<a name="projects" style="padding-top: 130px;"></a> <a name="projects" style="padding-top: 130px;"></a>
<h1>Projects &amp; Experience</h1> <h1>Projects &amp; 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> <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="project">
<div class="cover" id="virtualKeyality"> <div class="cover" id="virtualKeyality">
</div> </div>
@ -147,7 +159,9 @@
<p>A VR typing game.</p> <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 <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> 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">Unity</span>
<span class="tag">C#</span> <span class="tag">C#</span>
<span class="tag">Virtual Reality</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 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 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> 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 ">Tech</span>-->
<!--<span class="tag cat ">Design</span>--> <!--<span class="tag cat ">Design</span>-->
<span class="tag">NodeJS</span> <span class="tag">NodeJS</span>
@ -182,91 +198,124 @@
<span class="tag">Hackathon projects</span> <span class="tag">Hackathon projects</span>
</div> </div>
</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>&copy; Chuck Dries 2017</p>
<br>
<!--ewwww-->
</div> </div>
<p>&copy; Chuck Dries 2017</p> <script>
<br> var last_known_scroll = getScrollY();
<!--ewwww--> var queueing = false;
</div> var t = false; //state of skill table
<script> var st = document.getElementById("skilltable");
var last_known_scroll = getScrollY(); var stb = document.getElementById("skilltablebutton");
var queueing = false; var sp = document.getElementById("scrollprompt");
var t = false; //state of skill table document.addEventListener("scroll", function () {
var st = document.getElementById("skilltable"); last_known_scroll = getScrollY();
var stb = document.getElementById("skilltablebutton"); // sc(last_known_scroll);
var sp = document.getElementById("scrollprompt"); // Usually an important performance consideration, this ends up significantly delaying the resizing of the top box, which is important to stay sized correctly
document.addEventListener("scroll", function () { if (!queueing) {
last_known_scroll = getScrollY(); window.requestAnimationFrame(function () {
// sc(last_known_scroll); 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 queueing = false;
if (!queueing) { });
window.requestAnimationFrame(function () { }
sc(last_known_scroll); queueing = true;
queueing = false; });
});
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); function getScrollY() {
//internet explorer does not have a window.scrollY property, it has pageYOffset
//execute scroll style modifications return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
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)); function toggleSkillTable() {
if (topHeight < 360) { if (t) {
topDiv.className = "small"; st.style.display = "none";
} else { stb.innerText = "Show skills table";
topDiv.className = "large"; 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 function openSkillTable() {
var p = ((windowHeight - ypos) / windowHeight); //calulate ratio of scroll if (!t) {
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color st.style.display = "block";
stb.innerText = "Less about me";
} t = true;
}
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() { function prompt() {
if (!t) {
st.style.display = "block";
stb.innerText = "Less about me";
t = true;
} }
} </script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
function prompt() { <script>
var msnry = new Masonry('.grid', {
} itemSelector: '.project',
</script> columnWidth: 400,
// disable initial layout
initLayout: false
});
window.onload = function () {
msnry.layout();
}
</script>
</body> </body>
</html> </html>

12
package-lock.json generated
View File

@ -4646,6 +4646,12 @@
"limiter": "1.1.2" "limiter": "1.1.2"
} }
}, },
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"dev": true
},
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@ -4657,12 +4663,6 @@
"strip-ansi": "3.0.1" "strip-ansi": "3.0.1"
} }
}, },
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"dev": true
},
"stringstream": { "stringstream": {
"version": "0.0.5", "version": "0.0.5",
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",

12
sass/style.scss
View File

@ -137,6 +137,7 @@ body {
div { div {
@extend .widthCenter; @extend .widthCenter;
/* Project bits */ /* Project bits */
//TODO: un-nest this stuff
.project { .project {
width: $width/2 - 10; width: $width/2 - 10;
padding: 0 0 1em 0; padding: 0 0 1em 0;
@ -145,6 +146,7 @@ body {
overflow: hidden; overflow: hidden;
box-shadow: 1px 1px 3px #ddd; box-shadow: 1px 1px 3px #ddd;
background: white; background: white;
margin-bottom: 20px;
.cover { .cover {
height: 15em; height: 15em;
background-position: center center; background-position: center center;
@ -152,6 +154,10 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
margin: 0px; margin: 0px;
padding: 1em; padding: 1em;
video {
height: 100%;
width: 100%;
}
} }
.details { .details {
padding: 1em 1em 0 1em; padding: 1em 1em 0 1em;
@ -243,6 +249,9 @@ body {
font-style: italic; // font-weight: 700; font-style: italic; // font-weight: 700;
margin-top: 1.7em; margin-top: 1.7em;
} }
.grid {
// columns: 2 auto;
}
@include textElements() { @include textElements() {
@extend .widthCenter; @extend .widthCenter;
} }
@ -266,6 +275,9 @@ body {
// margin-right: .8em; // margin-right: .8em;
// margin-left: .8em; // margin-left: .8em;
} }
.grid {
// columns: 1 auto;
}
} }
} }