Master from desktop!
This commit is contained in:
Chuck Dries
parent
b6b7a21c76
commit
26cf76f9f2
2
.gitignore
vendored
2
.gitignore
vendored
@ -1 +1 @@
|
||||
.sass-cache
|
||||
.sass-cache
|
||||
|
||||
142
.vscode/launch.json
vendored
142
.vscode/launch.json
vendored
@ -1,72 +1,72 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Launch Chrome",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "http://localhost:3000",
|
||||
"sourceMaps": true,
|
||||
"webRoot": "${workspaceRoot}"
|
||||
},
|
||||
{
|
||||
"name": "Launch Unix",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"program": "/usr/local/bin/lite-server",
|
||||
"stopOnEntry": false,
|
||||
"args": [],
|
||||
"cwd": "${workspaceRoot}",
|
||||
"preLaunchTask": null,
|
||||
"runtimeExecutable": null,
|
||||
"runtimeArgs": [
|
||||
"--nolazy"
|
||||
],
|
||||
"env": {
|
||||
"NODE_ENV": "development"
|
||||
},
|
||||
"externalConsole": false,
|
||||
"sourceMaps": false,
|
||||
"outDir": null
|
||||
},
|
||||
{
|
||||
"name": "Launch on Windows",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"program": "C:\\Users\\chuckdries\\AppData\\Roaming\\npm\\node_modules\\lite-server\\index.js",
|
||||
"stopOnEntry": false,
|
||||
"args": [],
|
||||
"cwd": "${workspaceRoot}",
|
||||
"preLaunchTask": null,
|
||||
"runtimeExecutable": null,
|
||||
"runtimeArgs": [
|
||||
"--nolazy"
|
||||
],
|
||||
"env": {
|
||||
"NODE_ENV": "development"
|
||||
},
|
||||
"console": "internalConsole",
|
||||
"sourceMaps": true,
|
||||
"outDir": null
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Attach Chrome",
|
||||
"type": "chrome",
|
||||
"request": "attach",
|
||||
"port": 9222
|
||||
},
|
||||
{
|
||||
"name": "Attach",
|
||||
"type": "node",
|
||||
"request": "attach",
|
||||
"port": 3000,
|
||||
"address": "localhost",
|
||||
"restart": false,
|
||||
"sourceMaps": false,
|
||||
"outDir": null,
|
||||
"localRoot": "${workspaceRoot}",
|
||||
"remoteRoot": null
|
||||
}
|
||||
]
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Launch Chrome",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "http://localhost:3000",
|
||||
"sourceMaps": true,
|
||||
"webRoot": "${workspaceRoot}"
|
||||
},
|
||||
{
|
||||
"name": "Launch Unix",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"program": "/usr/local/bin/lite-server",
|
||||
"stopOnEntry": false,
|
||||
"args": [],
|
||||
"cwd": "${workspaceRoot}",
|
||||
"preLaunchTask": null,
|
||||
"runtimeExecutable": null,
|
||||
"runtimeArgs": [
|
||||
"--nolazy"
|
||||
],
|
||||
"env": {
|
||||
"NODE_ENV": "development"
|
||||
},
|
||||
"externalConsole": false,
|
||||
"sourceMaps": false,
|
||||
"outDir": null
|
||||
},
|
||||
{
|
||||
"name": "Launch on Windows",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"program": "C:\\Users\\chuckdries\\AppData\\Roaming\\npm\\node_modules\\lite-server\\index.js",
|
||||
"stopOnEntry": false,
|
||||
"args": [],
|
||||
"cwd": "${workspaceRoot}",
|
||||
"preLaunchTask": null,
|
||||
"runtimeExecutable": null,
|
||||
"runtimeArgs": [
|
||||
"--nolazy"
|
||||
],
|
||||
"env": {
|
||||
"NODE_ENV": "development"
|
||||
},
|
||||
"console": "internalConsole",
|
||||
"sourceMaps": true,
|
||||
"outDir": null
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Attach Chrome",
|
||||
"type": "chrome",
|
||||
"request": "attach",
|
||||
"port": 9222
|
||||
},
|
||||
{
|
||||
"name": "Attach",
|
||||
"type": "node",
|
||||
"request": "attach",
|
||||
"port": 3000,
|
||||
"address": "localhost",
|
||||
"restart": false,
|
||||
"sourceMaps": false,
|
||||
"outDir": null,
|
||||
"localRoot": "${workspaceRoot}",
|
||||
"remoteRoot": null
|
||||
}
|
||||
]
|
||||
}
|
||||
16
.vscode/tasks.json
vendored
16
.vscode/tasks.json
vendored
@ -1,9 +1,9 @@
|
||||
{
|
||||
// See https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
// for the documentation about the tasks.json format
|
||||
"version": "0.1.0",
|
||||
"command": "sass",
|
||||
"isShellCommand": true,
|
||||
"args": ["style.scss", "style.css"],
|
||||
"showOutput": "always"
|
||||
{
|
||||
// See https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
// for the documentation about the tasks.json format
|
||||
"version": "0.1.0",
|
||||
"command": "sass",
|
||||
"isShellCommand": true,
|
||||
"args": ["style.scss", "style.css"],
|
||||
"showOutput": "always"
|
||||
}
|
||||
358
index.html
358
index.html
@ -1,180 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Chuck Dries</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script>
|
||||
//we're going to do a quick thing to measure how long it takes the page to load
|
||||
var timerStart = Date.now();
|
||||
window.onload = function () {
|
||||
var time = Date.now() - timerStart;
|
||||
console.log(time);
|
||||
if (time > 1000) {
|
||||
//browser is fast enough, run download and run animation scripts!
|
||||
}
|
||||
}
|
||||
var x;
|
||||
var mast;
|
||||
|
||||
function bgColor() {
|
||||
var p = ((window.innerHeight - getScrollY()) / window.innerHeight); //calulate ratio of scroll
|
||||
x.innerHTML = " " + String(parseInt(p * 100)); //display it
|
||||
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
|
||||
var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
|
||||
document.body.style.backgroundColor = colorString;
|
||||
}
|
||||
function getScrollY(){
|
||||
//internet explorer does not have a window.scrollY property, so we need to make our own
|
||||
return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/*fallback styles*/
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body id="jscanary" class="nojs">
|
||||
<div class="slide slide-full " id="mast">
|
||||
<div class="vcwrapper full">
|
||||
<!--Gross markup to facilitate vertical centering-->
|
||||
<div style="display:table-row;height:100%;">
|
||||
<!--ewwww tables-->
|
||||
<div style="display:table-cell;vertical-align:middle;">
|
||||
<div>
|
||||
<h1 style="display:none;">Chuck Dries</h1>
|
||||
<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>
|
||||
<p>Digital Developer, <span class="sub">The State Press</span></p>
|
||||
<p>Computer Science Student, <span class="sub">Arizona State University</span></p>
|
||||
<p><a href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p>
|
||||
<p>
|
||||
<a href="http://github.com/chuckdries">Github</a> /
|
||||
<a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> /
|
||||
<a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
|
||||
<a href="https://medium.com/@chuckdries">Blog</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Learn more <span id="db" class="arrow"></span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tech" class="slide">
|
||||
<div class="copy">
|
||||
<h1><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a></h1>
|
||||
<h2>Overview</h2>
|
||||
<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>
|
||||
<h2>Skills</h2>
|
||||
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="ld">Web</td>
|
||||
<td>HTML5, CSS3, Javascript & 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">Etcetera</td>
|
||||
<td>Leadership experience, KVM/LibVirt/QEMU, ESXi</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<h2>Experience: Jobs</h2>
|
||||
<!--we can do some product page like stuff with pictures and everything-->
|
||||
<h2>Experience: Projects</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div id="design" class="slide">
|
||||
<div class="copy">
|
||||
<h1>Design</h1>
|
||||
<h2>Skills</h2>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="ld">Design</td>
|
||||
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="photography" class="slide">
|
||||
<div class="copy">
|
||||
<h1>Photography</h1>
|
||||
<h2>Skills</h2>
|
||||
<p>Replace this with something better</p>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="ld">Design</td>
|
||||
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leadership" class="slide">
|
||||
<div class="copy">
|
||||
<h1>Leadership</h1>
|
||||
<h2>Skills</h2>
|
||||
<p>A skills list is definitely not relevant or helpful here!</p>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="ld">Design</td>
|
||||
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/*why is this so indented?*/
|
||||
x = document.getElementById("db"); //db is the scroll counter. Why is it called that?
|
||||
//mast = document.getElementById("mast");
|
||||
//style = window.getComputedStyle(mast);
|
||||
//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
|
||||
document.getElementById("jscanary").className = "js";
|
||||
bgColor();
|
||||
document.addEventListener("scroll", bgColor);
|
||||
window.addEventListener("resize", bgColor);
|
||||
//}
|
||||
</script>
|
||||
<script>
|
||||
(function (i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function () {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
ga('create', 'UA-34100225-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script src="scroll.js"></script>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Chuck Dries</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script>
|
||||
//we're going to do a quick thing to measure how long it takes the page to load
|
||||
var timerStart = Date.now();
|
||||
window.onload = function () {
|
||||
var time = Date.now() - timerStart;
|
||||
console.log(time);
|
||||
if (time > 1000) {
|
||||
//browser is fast enough, run download and run animation scripts!
|
||||
}
|
||||
}
|
||||
var x;
|
||||
var mast;
|
||||
|
||||
function bgColor() {
|
||||
var p = ((window.innerHeight - getScrollY()) / window.innerHeight); //calulate ratio of scroll
|
||||
x.innerHTML = " " + String(parseInt(p * 100)); //display it
|
||||
var rgb = Math.floor(Math.abs(1 - p) * 255); //set the color
|
||||
var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
|
||||
document.body.style.backgroundColor = colorString;
|
||||
}
|
||||
function getScrollY(){
|
||||
//internet explorer does not have a window.scrollY property, so we need to make our own
|
||||
return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/*fallback styles*/
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body id="jscanary" class="nojs">
|
||||
<div class="slide slide-full " id="mast">
|
||||
<div class="vcwrapper full">
|
||||
<!--Gross markup to facilitate vertical centering-->
|
||||
<div style="display:table-row;height:100%;">
|
||||
<!--ewwww tables-->
|
||||
<div style="display:table-cell;vertical-align:middle;">
|
||||
<div>
|
||||
<h1 style="display:none;">Chuck Dries</h1>
|
||||
<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>
|
||||
<p>Digital Developer, <span class="sub">The State Press</span></p>
|
||||
<p>Computer Science Student, <span class="sub">Arizona State University</span></p>
|
||||
<p><a href="mailto:chuck@chuckdries.com">chuck@chuckdries.com</a> / 602.618.0414</p>
|
||||
<p>
|
||||
<a href="http://github.com/chuckdries">Github</a> /
|
||||
<a href="https://www.linkedin.com/in/chuckdries/">LinkedIn</a> /
|
||||
<a href="CharlesDriesResumeCurrent.pdf">Resume [pdf]</a> /
|
||||
<a href="https://medium.com/@chuckdries">Blog</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Learn more <span id="db" class="arrow"></span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tech" class="slide">
|
||||
<div class="copy">
|
||||
<h1><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a></h1>
|
||||
<h2>Overview</h2>
|
||||
<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>
|
||||
<h2>Skills</h2>
|
||||
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="ld">Web</td>
|
||||
<td>HTML5, CSS3, Javascript & 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">Etcetera</td>
|
||||
<td>Leadership experience, KVM/LibVirt/QEMU, ESXi</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<h2>Experience: Jobs</h2>
|
||||
<!--we can do some product page like stuff with pictures and everything-->
|
||||
<h2>Experience: Projects</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div id="design" class="slide">
|
||||
<div class="copy">
|
||||
<h1>Design</h1>
|
||||
<h2>Skills</h2>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="ld">Design</td>
|
||||
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="photography" class="slide">
|
||||
<div class="copy">
|
||||
<h1>Photography</h1>
|
||||
<h2>Skills</h2>
|
||||
<p>Replace this with something better</p>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="ld">Design</td>
|
||||
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leadership" class="slide">
|
||||
<div class="copy">
|
||||
<h1>Leadership</h1>
|
||||
<h2>Skills</h2>
|
||||
<p>A skills list is definitely not relevant or helpful here!</p>
|
||||
<div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="ld">Design</td>
|
||||
<td>Photoshop, InDesign, After Effects, Premiere Pro</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/*why is this so indented?*/
|
||||
x = document.getElementById("db"); //db is the scroll counter. Why is it called that?
|
||||
//mast = document.getElementById("mast");
|
||||
//style = window.getComputedStyle(mast);
|
||||
//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
|
||||
document.getElementById("jscanary").className = "js";
|
||||
bgColor();
|
||||
document.addEventListener("scroll", bgColor);
|
||||
window.addEventListener("resize", bgColor);
|
||||
//}
|
||||
</script>
|
||||
<script>
|
||||
(function (i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function () {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
|
||||
ga('create', 'UA-34100225-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script src="scroll.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
36
learn.html
36
learn.html
@ -1,19 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="link/to/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="">a tags are for links</a>
|
||||
<p>p tags are for paragraphs</p>
|
||||
<h1>h1 through h6 are for headers</h1>
|
||||
<img src="path/to/image.jpg" alt="imgs are for images">
|
||||
<div>divs are just boxes</div>
|
||||
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="link/to/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="">a tags are for links</a>
|
||||
<p>p tags are for paragraphs</p>
|
||||
<h1>h1 through h6 are for headers</h1>
|
||||
<img src="path/to/image.jpg" alt="imgs are for images">
|
||||
<div>divs are just boxes</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
14950
npm-debug.log
14950
npm-debug.log
File diff suppressed because it is too large
Load Diff
228
oldstyle.css
228
oldstyle.css
@ -1,115 +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;
|
||||
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;
|
||||
}
|
||||
28
package.json
28
package.json
@ -1,14 +1,14 @@
|
||||
{
|
||||
"name": "v3",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"lite-server": "^2.2.2"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "v3",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"lite-server": "^2.2.2"
|
||||
}
|
||||
}
|
||||
|
||||
122
rocks.html
122
rocks.html
@ -1,61 +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>
|
||||
<!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>
|
||||
|
||||
66
scroll.js
66
scroll.js
@ -1,34 +1,34 @@
|
||||
/* 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 prevHeight = 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 = getScrollY(); //grab the current scroll position
|
||||
prevHeight = null;
|
||||
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 = 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
|
||||
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 = 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.
|
||||
window.requestAnimationFrame(animateScroll);
|
||||
}
|
||||
|
||||
/* 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 prevHeight = 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 = getScrollY(); //grab the current scroll position
|
||||
prevHeight = null;
|
||||
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 = 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
|
||||
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 = 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.
|
||||
window.requestAnimationFrame(animateScroll);
|
||||
}
|
||||
|
||||
}
|
||||
162
secretsnip.html
162
secretsnip.html
@ -1,82 +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 & 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>
|
||||
<!-- 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 & 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>
|
||||
-->
|
||||
70
spooky.html
70
spooky.html
@ -1,36 +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>
|
||||
<!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>
|
||||
@ -1,20 +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>
|
||||
<!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>
|
||||
@ -1,11 +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');
|
||||
}
|
||||
|
||||
<?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');
|
||||
}
|
||||
|
||||
?>
|
||||
140
style.css
140
style.css
@ -1,70 +1,70 @@
|
||||
.reset, body, .slide {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
clear: both; }
|
||||
|
||||
* {
|
||||
transition-duration: .2s; }
|
||||
|
||||
body {
|
||||
font-family: serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.6;
|
||||
transition: none; }
|
||||
|
||||
#mast {
|
||||
background: none;
|
||||
line-height: 1.2;
|
||||
color: white; }
|
||||
#mast a {
|
||||
color: white;
|
||||
font-style: italic; }
|
||||
#mast a:hover {
|
||||
color: #ed1a76; }
|
||||
#mast .sub {
|
||||
font-style: italic;
|
||||
color: #ccc; }
|
||||
#mast img {
|
||||
width: 100%;
|
||||
max-width: 400px; }
|
||||
|
||||
.copy h1 {
|
||||
text-decoration: underline;
|
||||
font-style: italic; }
|
||||
.copy h1 a {
|
||||
color: black; }
|
||||
|
||||
.nojs body {
|
||||
background: white; }
|
||||
.nojs #mast {
|
||||
background: black; }
|
||||
|
||||
.slide {
|
||||
padding: 0px; }
|
||||
.slide div {
|
||||
/*width wrapping*/
|
||||
max-width: 800px;
|
||||
margin: auto; }
|
||||
|
||||
.full {
|
||||
height: 100vh;
|
||||
width: 100%; }
|
||||
|
||||
.vcwrapper {
|
||||
display: table; }
|
||||
|
||||
.arrow {
|
||||
font-variant-position: sub;
|
||||
font-size: .6em; }
|
||||
|
||||
.arrow:before {
|
||||
content: "\0025BC"; }
|
||||
|
||||
h1 {
|
||||
font-size: 2em; }
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-style: italic; }
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
.reset, body, .slide {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
clear: both; }
|
||||
|
||||
* {
|
||||
transition-duration: .2s; }
|
||||
|
||||
body {
|
||||
font-family: serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.6;
|
||||
transition: none; }
|
||||
|
||||
#mast {
|
||||
background: none;
|
||||
line-height: 1.2;
|
||||
color: white; }
|
||||
#mast a {
|
||||
color: white;
|
||||
font-style: italic; }
|
||||
#mast a:hover {
|
||||
color: #ed1a76; }
|
||||
#mast .sub {
|
||||
font-style: italic;
|
||||
color: #ccc; }
|
||||
#mast img {
|
||||
width: 100%;
|
||||
max-width: 400px; }
|
||||
|
||||
.copy h1 {
|
||||
text-decoration: underline;
|
||||
font-style: italic; }
|
||||
.copy h1 a {
|
||||
color: black; }
|
||||
|
||||
.nojs body {
|
||||
background: white; }
|
||||
.nojs #mast {
|
||||
background: black; }
|
||||
|
||||
.slide {
|
||||
padding: 0px; }
|
||||
.slide div {
|
||||
/*width wrapping*/
|
||||
max-width: 800px;
|
||||
margin: auto; }
|
||||
|
||||
.full {
|
||||
height: 100vh;
|
||||
width: 100%; }
|
||||
|
||||
.vcwrapper {
|
||||
display: table; }
|
||||
|
||||
.arrow {
|
||||
font-variant-position: sub;
|
||||
font-size: .6em; }
|
||||
|
||||
.arrow:before {
|
||||
content: "\0025BC"; }
|
||||
|
||||
h1 {
|
||||
font-size: 2em; }
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-style: italic; }
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"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",
|
||||
"sources": ["style.scss"],
|
||||
"names": [],
|
||||
"file": "style.css"
|
||||
}
|
||||
{
|
||||
"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",
|
||||
"sources": ["style.scss"],
|
||||
"names": [],
|
||||
"file": "style.css"
|
||||
}
|
||||
|
||||
204
style.scss
204
style.scss
@ -1,103 +1,103 @@
|
||||
//setup
|
||||
$width: 800px;
|
||||
$grey: #ccc;
|
||||
$pink: #ed1a76;
|
||||
.reset {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
clear: both;
|
||||
}
|
||||
*{
|
||||
transition-duration: .2s;
|
||||
}
|
||||
|
||||
//sections
|
||||
body {
|
||||
@extend .reset;
|
||||
font-family: serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.6;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#mast {
|
||||
background: none;
|
||||
line-height: 1.2;
|
||||
color: white;
|
||||
a {
|
||||
color: white;
|
||||
font-style: italic;
|
||||
}
|
||||
a:hover{
|
||||
color: $pink;
|
||||
}
|
||||
.sub {
|
||||
font-style: italic;
|
||||
color: $grey;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.copy {
|
||||
h1 {
|
||||
text-decoration: underline;
|
||||
font-style: italic;
|
||||
a{
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nojs {
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
#mast {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
//standalone elements
|
||||
p {
|
||||
// max-width: 600px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
@extend .reset;
|
||||
padding: 0px;
|
||||
div {
|
||||
/*width wrapping*/
|
||||
max-width: $width;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.full {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vcwrapper {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-variant-position: sub;
|
||||
font-size: .6em;
|
||||
}
|
||||
|
||||
.arrow:before {
|
||||
content: "\0025BC";
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
//setup
|
||||
$width: 800px;
|
||||
$grey: #ccc;
|
||||
$pink: #ed1a76;
|
||||
.reset {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
clear: both;
|
||||
}
|
||||
*{
|
||||
transition-duration: .2s;
|
||||
}
|
||||
|
||||
//sections
|
||||
body {
|
||||
@extend .reset;
|
||||
font-family: serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.6;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#mast {
|
||||
background: none;
|
||||
line-height: 1.2;
|
||||
color: white;
|
||||
a {
|
||||
color: white;
|
||||
font-style: italic;
|
||||
}
|
||||
a:hover{
|
||||
color: $pink;
|
||||
}
|
||||
.sub {
|
||||
font-style: italic;
|
||||
color: $grey;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.copy {
|
||||
h1 {
|
||||
text-decoration: underline;
|
||||
font-style: italic;
|
||||
a{
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nojs {
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
#mast {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
|
||||
//standalone elements
|
||||
p {
|
||||
// max-width: 600px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
@extend .reset;
|
||||
padding: 0px;
|
||||
div {
|
||||
/*width wrapping*/
|
||||
max-width: $width;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.full {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vcwrapper {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-variant-position: sub;
|
||||
font-size: .6em;
|
||||
}
|
||||
|
||||
.arrow:before {
|
||||
content: "\0025BC";
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
40
test.html
40
test.html
@ -1,10 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://medium.com/@chuckdries">Blog</a>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user