Move gatsby data to top level

old website/css/style.css

@@ -0,0 +1,366 @@
+@-webkit-keyframes fadeIn {
+  0% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  50% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  100% {
+    -moz-opacity: 1;
+    -webkit-opacity: 1;
+    -o-opacity: 1;
+    opacity: 1;
+    -moz-transform: none;
+    -webkit-transform: none;
+    -o-transform: none;
+    transform: none; } }
+
+@-moz-keyframes fadeIn {
+  0% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  50% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  100% {
+    -moz-opacity: 1;
+    -webkit-opacity: 1;
+    -o-opacity: 1;
+    opacity: 1;
+    -moz-transform: none;
+    -webkit-transform: none;
+    -o-transform: none;
+    transform: none; } }
+
+@-o-keyframes fadeIn {
+  0% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  50% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  100% {
+    -moz-opacity: 1;
+    -webkit-opacity: 1;
+    -o-opacity: 1;
+    opacity: 1;
+    -moz-transform: none;
+    -webkit-transform: none;
+    -o-transform: none;
+    transform: none; } }
+
+@keyframes fadeIn {
+  0% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  50% {
+    -moz-opacity: 0;
+    -webkit-opacity: 0;
+    -o-opacity: 0;
+    opacity: 0;
+    -moz-transform: translate(0, 10vh);
+    -webkit-transform: translate(0, 10vh);
+    -o-transform: translate(0, 10vh);
+    transform: translate(0, 10vh); }
+  100% {
+    -moz-opacity: 1;
+    -webkit-opacity: 1;
+    -o-opacity: 1;
+    opacity: 1;
+    -moz-transform: none;
+    -webkit-transform: none;
+    -o-transform: none;
+    transform: none; } }
+
+.reset, body, .slide, .slide .project .details h2, .slide .project .details p, .slide .project .details .award div p {
+  padding: 0;
+  margin: 0;
+  text-indent: 0; }
+
+.widthCenter, .slide, .slide p,
+.slide h1,
+.slide h2,
+.slide h3,
+.slide h4 {
+  max-width: 800px;
+  margin: auto; }
+
+/*
+ * Covers for projects section
+ */
+#sierra {
+  background-image: url("../images/ChuckNew.jpg"); }
+
+#virtualKeyality {
+  background-image: url("../images/keyality.jpg"); }
+
+#ohack16 {
+  background-image: url("../images/ohackscreenshot.png");
+  background-size: contain; }
+
+/*
+ * sections
+ */
+body {
+  font-family: "Playfair Display", serif;
+  line-height: 2; }
+
+#top {
+  padding-top: 10px;
+  width: 100%;
+  position: fixed;
+  z-index: 999; }
+  #top div {
+    margin: auto;
+    max-width: 800px; }
+  #top h2 {
+    font-weight: normal; }
+
+#mast {
+  margin-top: 10px;
+  background: none;
+  line-height: 1.2;
+  color: white; }
+  #mast a {
+    color: white;
+    font-style: inherit; }
+  #mast a:hover {
+    color: #ff429a; }
+  #mast .sub {
+    font-style: italic;
+    color: #ccc; }
+  #mast h1 {
+    font-size: 2.8em;
+    font-style: italic;
+    font-weight: normal;
+    color: #ff429a;
+    transition-property: size;
+    transition-duration: 0.2s;
+    margin: -18px 0 0 0; }
+  #mast h2 {
+    transition-property: size;
+    transition-duration: 0.2s;
+    color: #91efff;
+    margin: 0; }
+
+#spaceTakerUpper {
+  height: 100vh;
+  background: #202020; }
+
+.small {
+  background: #202020; }
+  .small .hideable {
+    display: none;
+    opacity: 0; }
+  .small img {
+    max-width: 200px; }
+  .small h2 {
+    font-size: 1.2em;
+    margin: 5px; }
+  .small p {
+    margin: 5px; }
+
+.large img {
+  width: 100%;
+  max-width: 380px; }
+
+.large .hideable {
+  opacity: 1; }
+
+.large h2 {
+  font-size: 1.3em; }
+
+.nojs body {
+  background: white; }
+
+.nojs #mast {
+  background: #202020; }
+
+/*
+ * standalone elements
+ */
+.slide {
+  padding: 0px;
+  width: 100%;
+  margin-top: 50px;
+  /* Project bits */ }
+  .slide .project {
+    width: 390px;
+    padding: 0 0 1em 0;
+    border: 1px solid #eee;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 1px 1px 3px #ddd;
+    background: white;
+    margin-bottom: 20px; }
+    .slide .project .cover {
+      height: 14em;
+      background-position: center center;
+      background-size: cover;
+      background-repeat: no-repeat;
+      margin: 0px;
+      padding: 1em; }
+      .slide .project .cover video {
+        height: 100%;
+        width: 100%; }
+      @media (max-width: 800px) {
+        .slide .project .cover {
+          height: 45vw; } }
+    .slide .project .details {
+      padding: 1em 1em 0 1em; }
+      .slide .project .details h2 {
+        line-height: 1;
+        margin: 0 0 0.5em 0; }
+      .slide .project .details p {
+        margin: 0 0 0.5em 0; }
+      .slide .project .details .tag {
+        float: left;
+        padding: 0 0.3em 0 0.3em;
+        background: #f3f3f3;
+        border: 1px solid #ddd;
+        margin: 0.2em;
+        border-radius: 5px; }
+      .slide .project .details .cat {
+        background: #b7eeff;
+        border: 1px solid #8ac9dd; }
+      .slide .project .details .award {
+        float: right;
+        background: none;
+        border: none;
+        margin: 0 0 0.5em 0.5em; }
+        .slide .project .details .award div {
+          display: inline-block;
+          text-align: center;
+          vertical-align: middle;
+          padding: 0; }
+          .slide .project .details .award div h3 {
+            margin: 0;
+            padding: 0;
+            font-size: 1.4em;
+            line-height: 1;
+            font-weight: normal;
+            font-style: italic; }
+          .slide .project .details .award div p {
+            font-size: 0.8em; }
+      .slide .project .details .award::before,
+      .slide .project .details .award::after {
+        vertical-align: middle;
+        background-image: url(../images/laurelleft.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        display: inline-block;
+        content: "";
+        width: 1.6em;
+        height: 3em;
+        position: relative; }
+      .slide .project .details .award::before {
+        background-image: url(../images/laurelleft.png);
+        left: 0.09em; }
+      .slide .project .details .award::after {
+        background-image: url(../images/laurelright.png);
+        right: 0.11em; }
+  .slide table {
+    line-height: 1.3;
+    margin: 0;
+    padding: 2px;
+    border-spacing: 0;
+    border-collapse: collapse;
+    vertical-align: text-top; }
+  .slide ul {
+    margin: 5px; }
+  .slide p {
+    text-indent: 2em; }
+  .slide h1 {
+    font-size: 2em;
+    font-style: italic; }
+  @media (max-width: 800px) {
+    .slide .widthCenter, .slide .slide, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 {
+      margin-left: 12px;
+      margin-right: 12px; }
+    .slide div .project {
+      width: 90%;
+      float: none;
+      display: block;
+      margin: 0 0 0.5em 5%; } }
+
+#skilltablebutton {
+  text-decoration: underline;
+  font-size: 1.1em;
+  font-style: italic;
+  font-weight: normal; }
+
+#scrollprompt {
+  -moz-animation: 3s ease fadeIn;
+  -webkit-animation: 3s ease fadeIn;
+  -o-animation: 3s ease fadeIn;
+  animation: 3s ease fadeIn;
+  color: #91efff; }
+
+@media (max-width: 800px) {
+  #mast {
+    padding-left: 1em; } }
+
+h2 {
+  font-style: italic; }
+
+a {
+  transition-duration: 0.2s; }
+
+#picOfMe {
+  background-image: url("../images/ChuckNew.jpg");
+  width: 300px;
+  height: 300px;
+  float: right;
+  background-size: cover;
+  margin: 40px 10px;
+  border-radius: 150px;
+  background-position: center center; }
+  @media (max-width: 600px) {
+    #picOfMe {
+      height: 150px;
+      width: 150px;
+      border-radius: 75px;
+      margin: 30px 8px 8px 8px; } }

old website/gulpfile.js

@@ -0,0 +1,22 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var connect = require('gulp-connect');
+
+gulp.task('default', function() {
+    connect.server({
+        port: 3000,
+        livereload: true
+    });
+    gulp.watch("./sass/*.scss", ['style', 'reload']);
+    gulp.watch("*.html", ['reload']);
+})
+gulp.task('style', function() {
+    // place code for your default task here
+    gulp.src('./sass/style.scss')
+        .pipe(sass().on('error', sass.logError))
+        .pipe(gulp.dest('./css/'));
+});
+gulp.task('reload', function() {
+    gulp.src('*.html')
+        .pipe(connect.reload());
+})

old website/icons/code.txt

@@ -0,0 +1,20 @@
+<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://chuckdri.es/apple-touch-icon-57x57.png" />
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://chuckdri.es/apple-touch-icon-114x114.png" />
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://chuckdri.es/apple-touch-icon-72x72.png" />
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://chuckdri.es/apple-touch-icon-144x144.png" />
+<link rel="apple-touch-icon-precomposed" sizes="60x60" href="http://chuckdri.es/apple-touch-icon-60x60.png" />
+<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://chuckdri.es/apple-touch-icon-120x120.png" />
+<link rel="apple-touch-icon-precomposed" sizes="76x76" href="http://chuckdri.es/apple-touch-icon-76x76.png" />
+<link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://chuckdri.es/apple-touch-icon-152x152.png" />
+<link rel="icon" type="image/png" href="http://chuckdri.es/favicon-196x196.png" sizes="196x196" />
+<link rel="icon" type="image/png" href="http://chuckdri.es/favicon-96x96.png" sizes="96x96" />
+<link rel="icon" type="image/png" href="http://chuckdri.es/favicon-32x32.png" sizes="32x32" />
+<link rel="icon" type="image/png" href="http://chuckdri.es/favicon-16x16.png" sizes="16x16" />
+<link rel="icon" type="image/png" href="http://chuckdri.es/favicon-128.png" sizes="128x128" />
+<meta name="application-name" content="Chuck Dries"/>
+<meta name="msapplication-TileColor" content="#FFFFFF" />
+<meta name="msapplication-TileImage" content="http://chuckdri.es/mstile-144x144.png" />
+<meta name="msapplication-square70x70logo" content="http://chuckdri.es/mstile-70x70.png" />
+<meta name="msapplication-square150x150logo" content="http://chuckdri.es/mstile-150x150.png" />
+<meta name="msapplication-wide310x150logo" content="http://chuckdri.es/mstile-310x150.png" />
+<meta name="msapplication-square310x310logo" content="http://chuckdri.es/mstile-310x310.png" />

old website/index.html

@@ -0,0 +1,362 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <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">
+    <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" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        .jump {
+            margin-top: -130px;
+            /* height: 120px; */
+            position: absolute;
+            display: block;
+            visibility: hidden;
+        }
+    </style>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-34100225-1"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+        gtag('js', new Date());
+        gtag('config', 'UA-34100225-1');
+    </script>
+
+</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>Chuck Dries</h1>
+                    <!-- <img src="images/cd.png" alt="Chuck Dries"> -->
+                    <h2 class="tagline">Software Engineer in web & VR</h2>
+                    <p>
+                        <a href="#about">About Me</a> /
+                        <a href="#skills">Skills</a> /
+                        <a href="#projects">Projects</a>
+                    </p>
+                    <div class="hideable">
+                        <p>Software Developer,
+                            <span class="sub">Axosoft</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="https://devpost.com/chuckdries">Devpost</a> /
+                            <a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
+                            <a href="https://medium.com/@chuckdries">Blog</a> /
+                            <a href="https://pgp.mit.edu/pks/lookup?op=get&search=0x2BD9D0871DB5A518">Public Key</a>
+                        </p>
+                        <p id="scrollprompt">Scroll down ▼</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="spaceTakerUpper">
+    </div>
+    <div class="slide" style="margin-top:0px;">
+        <a name="about" class="jump"></a>
+        <div id="picOfMe"></div>
+        <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>
+        <p>I'm a software engineer 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,
+            where I had to learn about networking and bash to run a minecraft server. Today, I do most of my work in JavaScript
+            and I experiment with VR and game design in my free time.
+        </p>
+    </div>
+    <div class="slide">
+        <a name="skills" class="jump"></a>
+        <h2>Skills</h2>
+        <div id="skilltable" style="display:none;">
+            <table>
+                <tr>
+                    <td class="ld">The
+                        <span style="font-style:italic">Internet</span>
+                    </td>
+                    <td>
+                        <ul>
+                            <li>HTML5</li>
+                            <li>CSS3 &amp; Sass</li>
+                            <li>Javascript, TypeScript, VueJS, &amp; Node</li>
+                        </ul>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="ld">General Programming &amp; Scripting</td>
+                    <td>
+                        <ul>
+                            <li>Java</li>
+                            <li>C++</li>
+                            <li>C# with Unity</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, &amp; After Effects</li>
+                            <li>Microsoft Office</li>
+                            <li>MatLab and IPython/Anaconda Suite</li>
+                        </ul>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="ld">Life &amp; 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" onclick="toggleSkillTable()">Show skills table</a>
+        </div>
+    </div>
+    <div class="slide">
+        <a name="projects" class="jump"></a>
+        <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>
+        <div class="grid">
+            <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://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>
+                    <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 class="project">
+                <div class="cover" id="tb">
+                    <video autoplay loop src="images/tb.mp4"></video>
+                </div>
+                <div class="details">
+                    <h2>TechBuds Chat</h2>
+                    <p>A realtime chat app in Vue</p>
+                    <p> A penny stock trading community outgrew the size limit on their Slack team, so they hired us to replace
+                        it. Our back end relies on Mongo, Redis, Node, and Express; our front end uses Vue, Vue-router, and
+                        Materialize. Socket.io handles real time communication between the two, and every ounce of javascript
+                        we write is transpiled by Babel. I'm in charge of the front end and responsible for the visual and
+                        architectural design of most of the SPA.</p>
+                    <p>Unfortunately, this project is closed source, but it's not under NDA. I can't publish the code online,
+                        but I can show you if you ask.</p>
+                    <!--<span class="tag cat ">Tech</span>-->
+                    <!--<span class="tag cat ">Design</span>-->
+                    <span class="tag">Web</span>
+                    <span class="tag">NodeJS</span>
+                    <span class="tag">MongoDB</span>
+                    <span class="tag">ExpressJS</span>
+                    <span class="tag">VueJS</span>
+                    <span class="tag">BabelJS</span>
+                    <span class="tag">Socket.io</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>
+        </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();
+                if (!queueing) {
+                    window.requestAnimationFrame(function () { //"queue up" animation
+                        queueing = false;
+                        sc(last_known_scroll);
+                    });
+                    queueing = true;
+                }
+            });
+
+            window.addEventListener("resize", function () {
+                last_known_scroll = getScrollY();
+                sc(last_known_scroll);
+            });
+
+            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 < 310) {
+                    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
+
+            }
+
+            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 prompt() {
+
+            }
+        </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>

old website/max.py

@@ -0,0 +1 @@
+def max(input):

old website/oldstyle.css

@@ -0,0 +1,115 @@
+body {
+    max-width: 800px;
+    font-family: serif;
+    margin: auto;
+    padding: 0px;
+    font-size: 1em;
+    line-height: 1.6;
+}
+
+h1 {
+    font-size: 2em;
+    /*            color: #ff0076;*/
+    font-weight: normal;
+    font-style: italic;
+}
+
+h2 {
+    font-weight: normal;
+    font-style: italic;
+}
+
+p {
+    max-width: 600px;
+}
+
+.slide {
+    clear: both;
+}
+
+.slide-full {
+    height: 100vh;
+    margin: 0;
+}
+
+.vcwrapper {
+    display: table;
+}
+
+.under {
+    text-decoration: underline;
+}
+
+#mast {
+    color: white;
+    line-height: 1.2;
+}
+
+#mast a {
+    color: white;
+}
+
+.sub {
+    color: #ddd;
+    font-style: italic;
+}
+
+.arrow {
+    font-variant-position: sub;
+    font-size: .6em;
+}
+
+.arrow:before {
+    content: "\0025BC";
+}
+
+.copy .header {
+    float: left;
+    min-width: 150px;
+    color: black;
+    vertical-align: top;
+    margin: 0px 20px 20px 0px;
+    padding: 0px;
+    text-align: right;
+}
+
+.copy .right {
+    /*I used this and .header to achieve the left right hanging indent section thing */
+    overflow: hidden;
+    padding: 0px;
+    margin: 30px;
+}
+
+.copy h1 {
+    text-decoration: underline;
+}
+
+.right p {
+    margin: 2px;
+}
+
+.copy .header h2 {
+    padding: 0px;
+    margin: 0px;
+}
+
+
+/*gross vertical centering hack. I can't wait for FlexBox support to be more common!*/
+
+table {
+    border-spacing: 5px;
+    border-collapse: collapse;
+}
+
+tr:last-child td {
+    border: none;
+}
+
+td {
+    padding: 10px 10px 10px 0px;
+    /*            border-bottom: 1px solid black;*/
+}
+
+.ld {
+    text-align: right;
+}

old website/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "v3",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-connect": "^5.0.0",
+    "gulp-sass": "^3.1.0",
+    "lite-server": "^2.2.2"
+  }
+}

old website/readme.md

@@ -0,0 +1 @@
+This is my personal website. There are many like it, but this one is mine. 

old website/rocks.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Chuck Dries</title>
+    <style>
+        body {
+            max-width: 800px;
+            font-family: serif;
+            margin: auto;
+            background: #242427;
+        }
+        h1{
+            font-size: 3em;
+            color: #ff0076;
+            font-family: 'baskerville';
+            font-style: italic;
+        }
+        h2 {
+            font-weight: normal;
+            color: white;
+            font-style: italic;
+        }
+        p{
+            font-size: 1.2em;
+            color: white;
+        }
+        a {
+            color: white;
+        }
+        .sub {
+            color: #aaaaaa;
+        }
+        #disclaimer{
+            font-style: italic;
+            font-size: .8em;
+            color: #aaaaaa;
+        }
+    </style>
+</head>
+
+<body>
+    <div style="display:table;height:100vh">
+        <div style="display:table-cell;vertical-align:middle;">
+            <div>
+
+                <!--<h1>Chuck Dries</h1>-->
+                <img src="cd.png" alt="Chuck Dries" width="50%">
+                <h2>Tech / Design / Photography / Leadership</h2>                
+                <p>Graphics Editor, <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 id="disclaimer">*Chuck does not actually create music</p>
+            </div>
+        </div>
+    </div>
+
+</body>
+
+</html>

old website/sass/animations.scss

@@ -0,0 +1,66 @@
+$prefixes: ("-moz-", "-webkit-", "-o-", "");
+@mixin prefix($property, $value) {
+    @each $prefix in $prefixes {
+        #{$prefix +  $property}: $value;
+    }
+}
+
+// @mixin keyframePrefix($name) {
+//     @each $prefix in $prefixes {
+//         \@#{$prefix}keyframes #{$name} {
+//             @content;
+//         }
+//     }
+// }
+@mixin keyframePrefix($name) {
+    @-webkit-keyframes #{$name} {
+        @content;
+    }
+    @-moz-keyframes #{$name} {
+        @content;
+    }
+    @-o-keyframes #{$name} {
+        @content;
+    }
+    @keyframes #{$name} {
+        @content;
+    }
+}
+
+@include keyframePrefix(fadeIn) {
+    0% {
+        @include prefix(opacity, 0);
+        @include prefix(transform, translate(0, 10vh));
+    }
+    50% {
+        @include prefix(opacity, 0);
+        @include prefix(transform, translate(0, 10vh));
+    }
+    100% {
+        @include prefix(opacity, 1);
+        @include prefix(transform, none);
+    }
+}
+
+// @include keyframePrefix("prompt") {
+//     from,
+//     20%,
+//     53%,
+//     80%,
+//     to {
+//         @include prefix(animation-timing-function, cubic-bezier(0.215, 0.610, 0.355, 1.000));
+//         @include prefix(transform, translate(0, 0));
+//     }
+//     40%,
+//     43% {
+//         @include prefix(animation-timing-function, cubic-bezier(0.755, 0.050, 0.855, 0.060));
+//         @include prefix(transform, translate(0, -20px));
+//     }
+//     70% {
+//         @include prefix(animation-timing-function, cubic-bezier(0.755, 0.050, 0.855, 0.060));
+//         @include prefix(transform, translate(0, -10px));
+//     }
+//     90% {
+//         @include prefix(transform, translate(0, -2px));
+//     }
+// }

old website/sass/covers.scss

@@ -0,0 +1,14 @@
+// covers.scss
+// EDIT THIS
+#sierra {
+    background-image: url("../images/ChuckNew.jpg");
+}
+
+#virtualKeyality {
+    background-image: url("../images/keyality.jpg");
+}
+
+#ohack16 {
+    background-image: url("../images/ohackscreenshot.png");
+    background-size: contain;
+}

old website/sass/responsive.scss

@@ -0,0 +1,16 @@
+@mixin respond-to($breakpoint) {
+    @media (max-width: $breakpoint) {
+        @content;
+    }
+}
+
+@mixin textElements() {
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    {
+        @content;
+    }
+}

old website/sass/style.scss

@@ -0,0 +1,329 @@
+//setup
+@import "responsive";
+@import "animations";
+$width: 800px;
+$grey: #ccc;
+$pink: #ff429a;
+$blue: #91efff;
+$greybg: #202020;
+.reset {
+    padding: 0;
+    margin: 0;
+    text-indent: 0;
+}
+
+.widthCenter {
+    max-width: $width;
+    margin: auto;
+}
+/*
+ * Covers for projects section
+ */
+
+@import "covers";
+/*
+ * sections
+ */
+
+body {
+    @extend .reset; // font-family: 'Nota-serif', serif;
+    font-family: "Playfair Display", serif;
+    line-height: 2; // margin-bottom: 700px;
+}
+
+#top {
+    padding-top: 10px;
+    width: 100%;
+    position: fixed; // background: black;
+    z-index: 999;
+    div {
+        margin: auto;
+        max-width: $width;
+    }
+    h2 {
+        font-weight: normal;
+    }
+}
+
+#mast {
+    margin-top: 10px;
+    // margin-top:0;
+    background: none;
+    line-height: 1.2;
+    color: white;
+    a {
+        color: white;
+        font-style: inherit; // text-decoration: none;
+    }
+    a:hover {
+        color: $pink;
+    }
+    .sub {
+        font-style: italic;
+        color: $grey;
+    }
+    h1 {
+        font-size: 2.8em;
+        font-style: italic;
+        font-weight: normal;
+        color: $pink;
+        transition-property: size;
+        transition-duration: 0.2s;
+        margin: -18px 0 0 0;
+    }
+    h2 {
+        transition-property: size;
+        transition-duration: 0.2s;
+        color: #91efff;
+        margin: 0;
+    }
+}
+
+#spaceTakerUpper {
+    height: 100vh;
+    background: $greybg;
+} //small and large classes are applied to #top
+.small {
+    background: $greybg;
+    .hideable {
+        display: none;
+        opacity: 0;
+    }
+    img {
+        max-width: 200px;
+    }
+    h2 {
+        font-size: 1.2em;
+        margin: 5px;
+    }
+    p {
+        margin: 5px;
+    }
+}
+
+.large {
+    img {
+        width: 100%;
+        max-width: 380px;
+    }
+    .hideable {
+        opacity: 1;
+    }
+    h2 {
+        font-size: 1.3em;
+    }
+} //TODO: fix
+.nojs {
+    body {
+        background: white;
+    }
+    #mast {
+        background: $greybg;
+    }
+}
+/*
+ * standalone elements
+ */
+
+// the standard section element
+.slide {
+    @extend .reset;
+    padding: 0px;
+    width: 100%;
+    // max-width: $width;
+    margin-top: 50px;
+    // margin: auto;
+    @extend .widthCenter;
+    /* Project bits */
+    //TODO: un-nest this stuff
+    .project {
+        width: $width/2 - 10;
+        padding: 0 0 1em 0;
+        border: 1px solid #eee;
+        border-radius: 5px;
+        overflow: hidden;
+        box-shadow: 1px 1px 3px #ddd;
+        background: white;
+        margin-bottom: 20px;
+        .cover {
+            height: 14em;
+            background-position: center center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            margin: 0px;
+            padding: 1em;
+            video {
+                height: 100%;
+                width: 100%;
+            }
+            @include respond-to($width) {
+                height: 45vw;
+            }
+        }
+        .details {
+            padding: 1em 1em 0 1em;
+            h2 {
+                @extend .reset;
+                line-height: 1;
+                margin: 0 0 0.5em 0;
+            }
+            p {
+                @extend .reset;
+                margin: 0 0 0.5em 0;
+            }
+            .tag {
+                float: left;
+                padding: 0 0.3em 0 0.3em;
+                background: #f3f3f3;
+                border: 1px solid #ddd;
+                margin: 0.2em;
+                border-radius: 5px;
+            }
+            .cat {
+                background: #b7eeff;
+                border: 1px solid #8ac9dd;
+            }
+            .award {
+                float: right;
+                background: none;
+                border: none;
+                margin: 0 0 0.5em 0.5em;
+                div {
+                    display: inline-block;
+                    text-align: center;
+                    vertical-align: middle;
+                    padding: 0;
+                    h3 {
+                        margin: 0;
+                        padding: 0;
+                        font-size: 1.4em;
+                        line-height: 1;
+                        font-weight: normal;
+                        font-style: italic;
+                    }
+                    p {
+                        @extend .reset;
+                        font-size: 0.8em;
+                    }
+                }
+            }
+            .award::before,
+            .award::after {
+                vertical-align: middle;
+                background-image: url(../images/laurelleft.png);
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: center center;
+                display: inline-block;
+                content: "";
+                width: 1.6em;
+                height: 3em;
+                position: relative;
+            }
+            .award::before {
+                background-image: url(../images/laurelleft.png);
+                left: 0.09em;
+            }
+            .award::after {
+                background-image: url(../images/laurelright.png);
+                right: 0.11em;
+            }
+        }
+    }
+    table {
+        line-height: 1.3;
+        margin: 0;
+        padding: 2px;
+        border-spacing: 0;
+        border-collapse: collapse;
+        vertical-align: text-top;
+    }
+    ul {
+        margin: 5px;
+    }
+    p {
+        text-indent: 2em;
+    }
+    h1 {
+        font-size: 2em;
+        font-style: italic; // font-weight: 700;
+        // margin-top: 1.7em;
+    }
+    .grid {
+        // columns: 2 auto;
+    }
+    @include textElements() {
+        @extend .widthCenter;
+    }
+    @include respond-to($width) {
+        .widthCenter {
+            margin-left: 12px;
+            margin-right: 12px;
+        }
+        div {
+            // margin: auto;
+            // padding: 0;
+            .project {
+                width: 90%;
+                float: none;
+                display: block;
+                margin: 0 0 0.5em 5%;
+            }
+        }
+        @include textElements() {
+            // margin-right: .8em;
+            // margin-left: .8em;
+        }
+        .grid {
+            // columns: 1 auto;
+        }
+    }
+}
+
+#skilltablebutton {
+    text-decoration: underline;
+    font-size: 1.1em;
+    font-style: italic;
+    font-weight: normal;
+}
+
+#scrollprompt {
+    // @include prefix(animation, 1s 1.1s 1 prompt)
+    @include prefix(animation, 3s ease fadeIn);
+    color: $blue;
+    // font-style: italic;
+}
+
+@include respond-to($width) {
+    #mast {
+        padding-left: 1em;
+    }
+}
+
+h2 {
+    // font-weight: normal;
+    font-style: italic;
+}
+
+a {
+    transition-duration: 0.2s;
+}
+
+#picOfMe {
+    background-image: url('../images/ChuckNew.jpg');
+    width: 300px;
+    height: 300px;
+    float: right;
+    background-size: cover;
+    margin: 40px 10px;
+    border-radius: 150px;
+    background-position: center center;
+    @include respond-to(3*$width/4){
+        // float:left;
+        // margin: auto;
+        height: 150px;
+        width: 150px;
+        border-radius: 75px;
+        margin: 30px 8px 8px 8px;
+    }
+}

old website/scroll.js

@@ -0,0 +1,30 @@
+/* A super simple smooth scroller without all the baggage. Written by Chuck Dries in 2017*/
+//settings
+var speed = .0005; //speed multiplier
+//setup necissary stuff
+var target  = null;
+var targetHeight = null;
+var currentHeight = null;
+var startTime = null;
+/* does some basic checking then calls animate() to do the heavy lifting */
+function smoothScroll(targetId){
+    target = document.getElementById(targetId);//grab the element
+    targetHeight = target.offsetTop; //get its height
+    currentHeight = window.scrollY; //grab the current scroll position
+    startTime = null; //we have to reset the start time every time the animation runs
+    if(currentHeight != targetHeight){
+        window.requestAnimationFrame(animateScroll);//schedule the animation
+    }
+}
+function animateScroll(timeStamp){
+    if (startTime == null) startTime = timeStamp; //record the time the animation started if we're just starting
+    var deltaStep = (timeStamp - startTime) * speed; //timeStamp - startTime gives us miliseconds since the animation started, we scale this down because its usually in the hundreds.
+    currentHeight = window.scrollY; //record the current scroll position of the window
+    var offsetScroll = targetHeight - currentHeight; //calculate how far we still need to go
+    var deltaScroll = deltaStep  * offsetScroll; //decide how far to scroll this tick
+    window.scroll(0, currentHeight + deltaScroll); //scroll!
+    currentHeight = window.scrollY;//re-record the current height after scrolling for comparison
+    if(Math.floor(currentHeight) != Math.floor(targetHeight)){ //schedule another tick if we need to
+        window.requestAnimationFrame(animateScroll);
+    }
+}

old website/secretsnip.html

@@ -0,0 +1,82 @@
+<!-- We'll have tech, design, photography, and leadership sections, each a bit different-->
+<!-- perhaps these can all go under like an overview section, then I can have me, experience, projects, awards, instead of splitting projects between design and tech, for example -->
+<!-- that being said, I like the idea of a photography section, but also a projects section structured like a product features page would look nice-->
+<!-- maybe I have a projects section in tech and design, in tech I list like resume and in design I list like product features page -->
+<!-- maybe my sections are tech, design, photography, leadership, projects, experience, where I just link to projects or experience-->
+<!-- or maybe I have experience and split it up into tech experience and design experience incl. projects -->
+<!-- I think I like my original plan. There can be duplication between tech and design projects as they'll be presented differently. Design projects will look like a product page.-->
+<!-- tech will have overview, skills, work experience, project experience, academics-->
+<!-- design will have samples from previous projects, frontends, I'm the rare good at design and tech but my designs are still lightweight and many tech people ignore design -->
+<!-- photography will have sample portraits and SP work -->
+<!-- leadership will have maybe some text? -->
+
+<div class="slide copy">
+        <h1 class="under">About Me</h1>
+        <div class="header">
+            <h2>Overview</h2>
+        </div>
+        <div class="right">
+            <p>I'm currently studying Computer Science, and I have a wealth of experience through hackathons, odd jobs, and working with multiple tech support clients. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae quam ut felis blandit luctus. Suspendisse potenti. Vivamus a metus ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eget dapibus tortor, auctor dignissim metus. Aliquam at sollicitudin tortor. Donec finibus faucibus erat, vitae cursus urna maximus sed. Quisque tristique sit amet risus et tempus. Pellentesque sed metus nec nunc bibendum fringilla. Curabitur accumsan ultrices est ut dapibus.
+            </p>
+        </div>
+        <div class="header">
+            <h2>Skills</h2>
+        </div>
+
+        <div class="right">
+            <table>
+                <tr>
+                    <td class="ld">Web</td>
+                    <td>HTML5, CSS3, Javascript &amp; Node</td>
+                </tr>
+                <tr>
+                    <td class="ld">Programming</td>
+                    <td>Java, C, C# with Unity, C++, Python, Scheme, Bash</td>
+                </tr>
+                <tr>
+                    <td class="ld">Design</td>
+                    <td>Photoshop, InDesign, After Effects, Premiere Pro</td>
+                </tr>
+                <tr>
+                    <td class="ld">Etcetera</td>
+                    <td>Leadership experience, KVM/LibVirt/QEMU, ESXi</td>
+                </tr>
+            </table>
+        </div>
+        <div class="header">
+            <h2>Experience</h2>
+        </div>
+        <div class="right"></div>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+    </div>
+    <!--
+    <div class="slide slide-full vcwrapper">
+        <h1 class="under">Design</h1>
+        <div style="display:table-row;height:100%">
+            <div style="display:table-cell;vertical-align:middle;">
+                <div>
+                    Content
+                </div>
+            </div>
+        </div>
+        <h2>Photography <span id="design" class="arrow"></span></h2>
+    </div>
+-->

old website/spooky.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Spooky 16 redirect</title>
+    <style>
+        body{
+            text-align:center;
+            background: #eee;
+            color: #333;
+            padding-top:48vh;
+            font-family: helvetica;
+            line-height: 1.6;
+        }
+        #p{
+            border:none;
+            border-bottom: 2px solid black;
+            padding: 5px;
+            background: #eee;
+            width: 300px;
+        }
+        #p:focus{
+            outline:none;
+            border-bottom: 2px solid #2390e0;
+            color: 2390e0;
+        }
+    </style>
+</head>
+<body>
+    <form action="spookyredir.php" method="post">
+<!--        <label for="pass">What's the password? </label>-->
+        <input id="p" type="password" name="pass" placeholder="What's the password?" autofocus>
+    <input type="submit" value="Boo!">
+</form>
+</body>
+</html>    

old website/spookyno.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Spooky 16 redirect</title>
+    <style>
+        body{
+            text-align:center;
+            background: #eee;
+            color: #333;
+            padding-top:48vh;
+            font-family: helvetica;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body>
+    <p>That password was wrong.</p>
+</body>
+</html>    

old website/spookyredir.php

@@ -0,0 +1,11 @@
+<?php
+
+$pass = htmlspecialchars(stripslashes(trim($_POST["pass"])));
+
+if($pass == "pumpkinspice"){
+	echo("Sorry, I've stopped sharing this album. Contact me for photos");
+} else {
+    header('Location: http://chuckdries.rocks/spookyno.html');
+}
+
+?>

old website/test.py

@@ -0,0 +1 @@
+print("hello world")