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

Master from desktop!

Browse Source
This commit is contained in:
Chuck Dries 2017-02-16 00:06:34 -07:00
parent b6b7a21c76
commit 26cf76f9f2
18 changed files with 15781 additions and 855 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1 +1 @@
.sass-cache .sass-cache

142
.vscode/launch.json vendored
View File

@ -1,72 +1,72 @@
{ {
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{ {
"name": "Launch Chrome", "name": "Launch Chrome",
"type": "chrome", "type": "chrome",
"request": "launch", "request": "launch",
"url": "http://localhost:3000", "url": "http://localhost:3000",
"sourceMaps": true, "sourceMaps": true,
"webRoot": "${workspaceRoot}" "webRoot": "${workspaceRoot}"
}, },
{ {
"name": "Launch Unix", "name": "Launch Unix",
"type": "node", "type": "node",
"request": "launch", "request": "launch",
"program": "/usr/local/bin/lite-server", "program": "/usr/local/bin/lite-server",
"stopOnEntry": false, "stopOnEntry": false,
"args": [], "args": [],
"cwd": "${workspaceRoot}", "cwd": "${workspaceRoot}",
"preLaunchTask": null, "preLaunchTask": null,
"runtimeExecutable": null, "runtimeExecutable": null,
"runtimeArgs": [ "runtimeArgs": [
"--nolazy" "--nolazy"
], ],
"env": { "env": {
"NODE_ENV": "development" "NODE_ENV": "development"
}, },
"externalConsole": false, "externalConsole": false,
"sourceMaps": false, "sourceMaps": false,
"outDir": null "outDir": null
}, },
{ {
"name": "Launch on Windows", "name": "Launch on Windows",
"type": "node", "type": "node",
"request": "launch", "request": "launch",
"program": "C:\\Users\\chuckdries\\AppData\\Roaming\\npm\\node_modules\\lite-server\\index.js", "program": "C:\\Users\\chuckdries\\AppData\\Roaming\\npm\\node_modules\\lite-server\\index.js",
"stopOnEntry": false, "stopOnEntry": false,
"args": [], "args": [],
"cwd": "${workspaceRoot}", "cwd": "${workspaceRoot}",
"preLaunchTask": null, "preLaunchTask": null,
"runtimeExecutable": null, "runtimeExecutable": null,
"runtimeArgs": [ "runtimeArgs": [
"--nolazy" "--nolazy"
], ],
"env": { "env": {
"NODE_ENV": "development" "NODE_ENV": "development"
}, },
"console": "internalConsole", "console": "internalConsole",
"sourceMaps": true, "sourceMaps": true,
"outDir": null "outDir": null
}, },
{ {
"name": "Attach Chrome", "name": "Attach Chrome",
"type": "chrome", "type": "chrome",
"request": "attach", "request": "attach",
"port": 9222 "port": 9222
}, },
{ {
"name": "Attach", "name": "Attach",
"type": "node", "type": "node",
"request": "attach", "request": "attach",
"port": 3000, "port": 3000,
"address": "localhost", "address": "localhost",
"restart": false, "restart": false,
"sourceMaps": false, "sourceMaps": false,
"outDir": null, "outDir": null,
"localRoot": "${workspaceRoot}", "localRoot": "${workspaceRoot}",
"remoteRoot": null "remoteRoot": null
} }
] ]
} }

16
.vscode/tasks.json vendored
View File

@ -1,9 +1,9 @@
{ {
// See https://go.microsoft.com/fwlink/?LinkId=733558 // See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format // for the documentation about the tasks.json format
"version": "0.1.0", "version": "0.1.0",
"command": "sass", "command": "sass",
"isShellCommand": true, "isShellCommand": true,
"args": ["style.scss", "style.css"], "args": ["style.scss", "style.css"],
"showOutput": "always" "showOutput": "always"
} }

358
index.html
View File

@ -1,180 +1,180 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Chuck Dries</title> <title>Chuck Dries</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script> <script>
//we're going to do a quick thing to measure how long it takes the page to load //we're going to do a quick thing to measure how long it takes the page to load
var timerStart = Date.now(); var timerStart = Date.now();
window.onload = function () { window.onload = function () {
var time = Date.now() - timerStart; var time = Date.now() - timerStart;
console.log(time); console.log(time);
if (time > 1000) { if (time > 1000) {
//browser is fast enough, run download and run animation scripts! //browser is fast enough, run download and run animation scripts!
} }
} }
var x; var x;
var mast; var mast;
function bgColor() { function bgColor() {
var p = ((window.innerHeight - getScrollY()) / window.innerHeight); //calulate ratio of scroll var p = ((window.innerHeight - getScrollY()) / window.innerHeight); //calulate ratio of scroll
x.innerHTML = " " + String(parseInt(p * 100)); //display it x.innerHTML = " " + String(parseInt(p * 100)); //display it
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")"; var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
document.body.style.backgroundColor = colorString; document.body.style.backgroundColor = colorString;
} }
function getScrollY(){ function getScrollY(){
//internet explorer does not have a window.scrollY property, so we need to make our own //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; return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
} }
</script> </script>
<style> <style>
/*fallback styles*/ /*fallback styles*/
</style> </style>
</head> </head>
<body id="jscanary" class="nojs"> <body id="jscanary" class="nojs">
<div class="slide slide-full " id="mast"> <div class="slide slide-full " id="mast">
<div class="vcwrapper full"> <div class="vcwrapper full">
<!--Gross markup to facilitate vertical centering--> <!--Gross markup to facilitate vertical centering-->
<div style="display:table-row;height:100%;"> <div style="display:table-row;height:100%;">
<!--ewwww tables--> <!--ewwww tables-->
<div style="display:table-cell;vertical-align:middle;"> <div style="display:table-cell;vertical-align:middle;">
<div> <div>
<h1 style="display:none;">Chuck Dries</h1> <h1 style="display:none;">Chuck Dries</h1>
<img src="cd.png" alt="Chuck Dries"> <img src="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> <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>
<p>Digital Developer, <span class="sub">The State Press</span></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>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="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> /
<a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> / <a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
<a href="https://medium.com/@chuckdries">Blog</a> <a href="https://medium.com/@chuckdries">Blog</a>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<h2>Learn more <span id="db" class="arrow"></span></h2> <h2>Learn more <span id="db" class="arrow"></span></h2>
</div> </div>
</div> </div>
<div id="tech" class="slide"> <div id="tech" class="slide">
<div class="copy"> <div class="copy">
<h1><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a></h1> <h1><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a></h1>
<h2>Overview</h2> <h2>Overview</h2>
<div class="right"> <div class="right">
<p>I'm currently studying Computer Science, and I have a wealth of experience through hackathons, odd jobs, <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. 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 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 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 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. sed. Quisque tristique sit amet risus et tempus. Pellentesque sed metus nec nunc bibendum fringilla.
Curabitur accumsan ultrices est ut dapibus. Curabitur accumsan ultrices est ut dapibus.
</p> </p>
</div> </div>
<h2>Skills</h2> <h2>Skills</h2>
<div> <div>
<table> <table>
<tr> <tr>
<td class="ld">Web</td> <td class="ld">Web</td>
<td>HTML5, CSS3, Javascript &amp; Node</td> <td>HTML5, CSS3, Javascript &amp; Node</td>
</tr> </tr>
<tr> <tr>
<td class="ld">Programming</td> <td class="ld">Programming</td>
<td>Java, C, C# with Unity, C++, Python, Scheme, Bash</td> <td>Java, C, C# with Unity, C++, Python, Scheme, Bash</td>
</tr> </tr>
<tr> <tr>
<td class="ld">Etcetera</td> <td class="ld">Etcetera</td>
<td>Leadership experience, KVM/LibVirt/QEMU, ESXi</td> <td>Leadership experience, KVM/LibVirt/QEMU, ESXi</td>
</tr> </tr>
</table> </table>
</div> </div>
<h2>Experience: Jobs</h2> <h2>Experience: Jobs</h2>
<!--we can do some product page like stuff with pictures and everything--> <!--we can do some product page like stuff with pictures and everything-->
<h2>Experience: Projects</h2> <h2>Experience: Projects</h2>
</div> </div>
</div> </div>
<div id="design" class="slide"> <div id="design" class="slide">
<div class="copy"> <div class="copy">
<h1>Design</h1> <h1>Design</h1>
<h2>Skills</h2> <h2>Skills</h2>
<div> <div>
<table> <table>
<tr> <tr>
<td class="ld">Design</td> <td class="ld">Design</td>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td> <td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</tr> </tr>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<div id="photography" class="slide"> <div id="photography" class="slide">
<div class="copy"> <div class="copy">
<h1>Photography</h1> <h1>Photography</h1>
<h2>Skills</h2> <h2>Skills</h2>
<p>Replace this with something better</p> <p>Replace this with something better</p>
<div> <div>
<table> <table>
<tr> <tr>
<td class="ld">Design</td> <td class="ld">Design</td>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td> <td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</tr> </tr>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<div id="leadership" class="slide"> <div id="leadership" class="slide">
<div class="copy"> <div class="copy">
<h1>Leadership</h1> <h1>Leadership</h1>
<h2>Skills</h2> <h2>Skills</h2>
<p>A skills list is definitely not relevant or helpful here!</p> <p>A skills list is definitely not relevant or helpful here!</p>
<div> <div>
<table> <table>
<tr> <tr>
<td class="ld">Design</td> <td class="ld">Design</td>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td> <td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</tr> </tr>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
/*why is this so indented?*/ /*why is this so indented?*/
x = document.getElementById("db"); //db is the scroll counter. Why is it called that? x = document.getElementById("db"); //db is the scroll counter. Why is it called that?
//mast = document.getElementById("mast"); //mast = document.getElementById("mast");
//style = window.getComputedStyle(mast); //style = window.getComputedStyle(mast);
//var color = style.getPropertyValue('color'); //var color = style.getPropertyValue('color');
//if (color == "rgb(255, 255, 255)") { //we should check that the stylesheet is being applied to avoid making the entire page unreadable //if (color == "rgb(255, 255, 255)") { //we should check that the stylesheet is being applied to avoid making the entire page unreadable
document.getElementById("jscanary").className = "js"; document.getElementById("jscanary").className = "js";
bgColor(); bgColor();
document.addEventListener("scroll", bgColor); document.addEventListener("scroll", bgColor);
window.addEventListener("resize", bgColor); window.addEventListener("resize", bgColor);
//} //}
</script> </script>
<script> <script>
(function (i, s, o, g, r, a, m) { (function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () { i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments) (i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); }, i[r].l = 1 * new Date();
a = s.createElement(o), a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; m = s.getElementsByTagName(o)[0];
a.async = 1; a.async = 1;
a.src = g; a.src = g;
m.parentNode.insertBefore(a, m) m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-34100225-1', 'auto'); ga('create', 'UA-34100225-1', 'auto');
ga('send', 'pageview'); ga('send', 'pageview');
</script> </script>
<script src="scroll.js"></script> <script src="scroll.js"></script>
</body> </body>
</html> </html>

36
learn.html
View File

@ -1,19 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="link/to/css"> <link rel="stylesheet" href="link/to/css">
</head> </head>
<body> <body>
<a href="">a tags are for links</a> <a href="">a tags are for links</a>
<p>p tags are for paragraphs</p> <p>p tags are for paragraphs</p>
<h1>h1 through h6 are for headers</h1> <h1>h1 through h6 are for headers</h1>
<img src="path/to/image.jpg" alt="imgs are for images"> <img src="path/to/image.jpg" alt="imgs are for images">
<div>divs are just boxes</div> <div>divs are just boxes</div>
</body> </body>
</html> </html>

14950
npm-debug.log
View File

File diff suppressed because it is too large Load Diff

228
oldstyle.css
View File

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

28
package.json
View File

@ -1,14 +1,14 @@
{ {
"name": "v3", "name": "v3",
"version": "1.0.0", "version": "1.0.0",
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"lite-server": "^2.2.2" "lite-server": "^2.2.2"
} }
} }

122
rocks.html
View File

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

66
scroll.js
View File

@ -1,34 +1,34 @@
/* A super simple smooth scroller without all the baggage. Written by Chuck Dries in 2017*/ /* A super simple smooth scroller without all the baggage. Written by Chuck Dries in 2017*/
//settings //settings
var speed = .0005; //speed multiplier var speed = .0005; //speed multiplier
//setup necissary stuff //setup necissary stuff
var target = null; var target = null;
var targetHeight = null; var targetHeight = null;
var prevHeight = null; var prevHeight = null;
var currentHeight = null; var currentHeight = null;
var startTime = null; var startTime = null;
/* does some basic checking then calls animate() to do the heavy lifting */ /* does some basic checking then calls animate() to do the heavy lifting */
function smoothScroll(targetId) { function smoothScroll(targetId) {
target = document.getElementById(targetId);//grab the element target = document.getElementById(targetId);//grab the element
targetHeight = target.offsetTop; //get its height targetHeight = target.offsetTop; //get its height
currentHeight = getScrollY(); //grab the current scroll position currentHeight = getScrollY(); //grab the current scroll position
prevHeight = null; prevHeight = null;
startTime = null; //we have to reset the start time every time the animation runs startTime = null; //we have to reset the start time every time the animation runs
if (currentHeight != targetHeight) { if (currentHeight != targetHeight) {
window.requestAnimationFrame(animateScroll);//schedule the animation window.requestAnimationFrame(animateScroll);//schedule the animation
} }
} }
function animateScroll(timeStamp) { function animateScroll(timeStamp) {
if (startTime == null) startTime = timeStamp; //record the time the animation started if we're just starting 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. 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 = getScrollY(); //record the current scroll position of the window currentHeight = getScrollY(); //record the current scroll position of the window
prevHeight = currentHeight;//store height before scroll action so we can compare it to the height after we try to scroll prevHeight = currentHeight;//store height before scroll action so we can compare it to the height after we try to scroll
var offsetScroll = targetHeight - currentHeight; //calculate how far we still need to go var offsetScroll = targetHeight - currentHeight; //calculate how far we still need to go
var deltaScroll = deltaStep * offsetScroll; //decide how far to scroll this tick var deltaScroll = deltaStep * offsetScroll; //decide how far to scroll this tick
window.scroll(0, currentHeight + deltaScroll); //scroll! window.scroll(0, currentHeight + deltaScroll); //scroll!
currentHeight = getScrollY();//re-record the current height after scrolling for comparison currentHeight = getScrollY();//re-record the current height after scrolling for comparison
if ((currentHeight != targetHeight) && ((currentHeight != prevHeight) || (deltaStep == 0))) { //schedule another tick until we get where we're going or we get as far as we can. deltastep will always be 0 on the first frame. if ((currentHeight != targetHeight) && ((currentHeight != prevHeight) || (deltaStep == 0))) { //schedule another tick until we get where we're going or we get as far as we can. deltastep will always be 0 on the first frame.
window.requestAnimationFrame(animateScroll); window.requestAnimationFrame(animateScroll);
} }
} }

162
secretsnip.html
View File

@ -1,82 +1,82 @@
<!-- We'll have tech, design, photography, and leadership sections, each a bit different--> <!-- 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 --> <!-- 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--> <!-- 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 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--> <!-- 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 --> <!-- 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.--> <!-- 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--> <!-- 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 --> <!-- 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 --> <!-- photography will have sample portraits and SP work -->
<!-- leadership will have maybe some text? --> <!-- leadership will have maybe some text? -->
<div class="slide copy"> <div class="slide copy">
<h1 class="under">About Me</h1> <h1 class="under">About Me</h1>
<div class="header"> <div class="header">
<h2>Overview</h2> <h2>Overview</h2>
</div> </div>
<div class="right"> <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>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> </p>
</div> </div>
<div class="header"> <div class="header">
<h2>Skills</h2> <h2>Skills</h2>
</div> </div>
<div class="right"> <div class="right">
<table> <table>
<tr> <tr>
<td class="ld">Web</td> <td class="ld">Web</td>
<td>HTML5, CSS3, Javascript &amp; Node</td> <td>HTML5, CSS3, Javascript &amp; Node</td>
</tr> </tr>
<tr> <tr>
<td class="ld">Programming</td> <td class="ld">Programming</td>
<td>Java, C, C# with Unity, C++, Python, Scheme, Bash</td> <td>Java, C, C# with Unity, C++, Python, Scheme, Bash</td>
</tr> </tr>
<tr> <tr>
<td class="ld">Design</td> <td class="ld">Design</td>
<td>Photoshop, InDesign, After Effects, Premiere Pro</td> <td>Photoshop, InDesign, After Effects, Premiere Pro</td>
</tr> </tr>
<tr> <tr>
<td class="ld">Etcetera</td> <td class="ld">Etcetera</td>
<td>Leadership experience, KVM/LibVirt/QEMU, ESXi</td> <td>Leadership experience, KVM/LibVirt/QEMU, ESXi</td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="header"> <div class="header">
<h2>Experience</h2> <h2>Experience</h2>
</div> </div>
<div class="right"></div> <div class="right"></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>
</div> </div>
<!-- <!--
<div class="slide slide-full vcwrapper"> <div class="slide slide-full vcwrapper">
<h1 class="under">Design</h1> <h1 class="under">Design</h1>
<div style="display:table-row;height:100%"> <div style="display:table-row;height:100%">
<div style="display:table-cell;vertical-align:middle;"> <div style="display:table-cell;vertical-align:middle;">
<div> <div>
Content Content
</div> </div>
</div> </div>
</div> </div>
<h2>Photography <span id="design" class="arrow"></span></h2> <h2>Photography <span id="design" class="arrow"></span></h2>
</div> </div>
--> -->

70
spooky.html
View File

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

38
spookyno.html
View File

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

20
spookyredir.php
View File

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

140
style.css
View File

@ -1,70 +1,70 @@
.reset, body, .slide { .reset, body, .slide {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
clear: both; } clear: both; }
* { * {
transition-duration: .2s; } transition-duration: .2s; }
body { body {
font-family: serif; font-family: serif;
font-size: 1em; font-size: 1em;
line-height: 1.6; line-height: 1.6;
transition: none; } transition: none; }
#mast { #mast {
background: none; background: none;
line-height: 1.2; line-height: 1.2;
color: white; } color: white; }
#mast a { #mast a {
color: white; color: white;
font-style: italic; } font-style: italic; }
#mast a:hover { #mast a:hover {
color: #ed1a76; } color: #ed1a76; }
#mast .sub { #mast .sub {
font-style: italic; font-style: italic;
color: #ccc; } color: #ccc; }
#mast img { #mast img {
width: 100%; width: 100%;
max-width: 400px; } max-width: 400px; }
.copy h1 { .copy h1 {
text-decoration: underline; text-decoration: underline;
font-style: italic; } font-style: italic; }
.copy h1 a { .copy h1 a {
color: black; } color: black; }
.nojs body { .nojs body {
background: white; } background: white; }
.nojs #mast { .nojs #mast {
background: black; } background: black; }
.slide { .slide {
padding: 0px; } padding: 0px; }
.slide div { .slide div {
/*width wrapping*/ /*width wrapping*/
max-width: 800px; max-width: 800px;
margin: auto; } margin: auto; }
.full { .full {
height: 100vh; height: 100vh;
width: 100%; } width: 100%; }
.vcwrapper { .vcwrapper {
display: table; } display: table; }
.arrow { .arrow {
font-variant-position: sub; font-variant-position: sub;
font-size: .6em; } font-size: .6em; }
.arrow:before { .arrow:before {
content: "\0025BC"; } content: "\0025BC"; }
h1 { h1 {
font-size: 2em; } font-size: 2em; }
h2 { h2 {
font-weight: normal; font-weight: normal;
font-style: italic; } font-style: italic; }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

14
style.css.map
View File

@ -1,7 +1,7 @@
{ {
"version": 3, "version": 3,
"mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAEf,CAAC;EACG,mBAAmB,EAAE,GAAG;;AAI5B,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAO;IACH,KAAK,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAI;IACA,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;;AAKpB,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAC;IACG,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AASzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,UAAI;IACA,kBAAkB;IAClB,SAAS,EAvET,KAAK;IAwEL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM", "mappings": "AAIA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAEf,CAAC;EACG,mBAAmB,EAAE,GAAG;;AAI5B,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAO;IACH,KAAK,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAI;IACA,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;;AAKpB,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAC;IACG,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AASzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,UAAI;IACA,kBAAkB;IAClB,SAAS,EAvET,KAAK;IAwEL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM",
"sources": ["style.scss"], "sources": ["style.scss"],
"names": [], "names": [],
"file": "style.css" "file": "style.css"
} }

204
style.scss
View File

@ -1,103 +1,103 @@
//setup //setup
$width: 800px; $width: 800px;
$grey: #ccc; $grey: #ccc;
$pink: #ed1a76; $pink: #ed1a76;
.reset { .reset {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
clear: both; clear: both;
} }
*{ *{
transition-duration: .2s; transition-duration: .2s;
} }
//sections //sections
body { body {
@extend .reset; @extend .reset;
font-family: serif; font-family: serif;
font-size: 1em; font-size: 1em;
line-height: 1.6; line-height: 1.6;
transition: none; transition: none;
} }
#mast { #mast {
background: none; background: none;
line-height: 1.2; line-height: 1.2;
color: white; color: white;
a { a {
color: white; color: white;
font-style: italic; font-style: italic;
} }
a:hover{ a:hover{
color: $pink; color: $pink;
} }
.sub { .sub {
font-style: italic; font-style: italic;
color: $grey; color: $grey;
} }
img { img {
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
} }
} }
.copy { .copy {
h1 { h1 {
text-decoration: underline; text-decoration: underline;
font-style: italic; font-style: italic;
a{ a{
color: black; color: black;
} }
} }
} }
.nojs { .nojs {
body { body {
background: white; background: white;
} }
#mast { #mast {
background: black; background: black;
} }
} }
//standalone elements //standalone elements
p { p {
// max-width: 600px; // max-width: 600px;
} }
.slide { .slide {
@extend .reset; @extend .reset;
padding: 0px; padding: 0px;
div { div {
/*width wrapping*/ /*width wrapping*/
max-width: $width; max-width: $width;
margin: auto; margin: auto;
} }
} }
.full { .full {
height: 100vh; height: 100vh;
width: 100%; width: 100%;
} }
.vcwrapper { .vcwrapper {
display: table; display: table;
} }
.arrow { .arrow {
font-variant-position: sub; font-variant-position: sub;
font-size: .6em; font-size: .6em;
} }
.arrow:before { .arrow:before {
content: "\0025BC"; content: "\0025BC";
} }
h1 { h1 {
font-size: 2em; font-size: 2em;
} }
h2 { h2 {
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }

40
test.html
View File

@ -1,10 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8"> <head>
<title>Document</title> <meta charset="UTF-8">
</head> <title>Document</title>
<body> <style>
<a href="https://medium.com/@chuckdries">Blog</a> body {
</body> background: black;
}
a {
transition-duration: .5s;
color: white;
font-style: italic;
text-decoration: underline;
display: block;
transform-origin: 15px 10px;
}
a:hover {
color: #ed1a76;
transform: scale(2) rotate(180deg) translate(-10px, -10px);
}
</style>
</head>
<body>
<a href="https://medium.com/@chuckdries">Blog</a>
</body>
</html> </html>