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

Direct scroll handler and move to SCSS for covers

Browse Source 
Scroll handler now attaches directly to scroll event rather than requestAnimationFrame
This commit is contained in:
Chuck Dries 2017-03-13 17:26:48 -07:00
parent c5eb1ca619
commit 1e941f284e
5 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
covers.css → covers.scss
View File

@ -1,3 +1,4 @@
#sierra{ // covers.scss
#sierra {
background-image: url("Sierra.jpg"); background-image: url("Sierra.jpg");
} }

19
index.html
View File

@ -5,7 +5,6 @@
<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">
<link rel="stylesheet" href="covers.css">
<style> <style>
#spaceTakerUpper { #spaceTakerUpper {
height: 105vh; height: 105vh;
@ -42,8 +41,8 @@
<h1>About Me</h1> <h1>About Me</h1>
<p>When I was a child I was obsessed with trains and vacuum cleaners. I spent many sleepless nights marveling at these incredible machines. Today, I spend my nights pulling my hair out over webkit paint timing graphs. In a way, these nights are not <p>When I was a child I was obsessed with trains and vacuum cleaners. I spent many sleepless nights marveling at these incredible machines. Today, I spend my nights pulling my hair out over webkit paint timing graphs. In a way, these nights are not
so different.</p> so different.</p>
<p>I'm a Computer Science student at Arizona State Univrsity interested in the intersection of technology and art. I pride myself in taking a diverse set of interests and my pixel perfect lovingly handcrafted 💯% good stuff 👍👌 HTML. These days, <p>I'm a Computer Science student and Hackathon winner at Arizona State University and I'm interested in the intersection of technology and art. I pride myself in taking a diverse set of interest and my pixel perfect lovingly handcrafted 💯% good
you can find me at The State Press working on ways to innovate the news during the week and winning hackathons on the weekends.</p> stuff 👍👌 HTML. These days, you can find me at The State Press working on ways to innovate the news during the week and winning hackathons on the weekends.</p>
<p>This website is still an active development project, pls don't judge too harshly.</p> <p>This website is still an active development project, pls don't judge too harshly.</p>
<h1>Skills <a id="skilltablebutton" style="text-decoration: underline; font-style: italic; font-weight: normal; font-size: 14px;" onclick="toggleSkillTable()">hide</a></h1> <h1>Skills <a id="skilltablebutton" style="text-decoration: underline; font-style: italic; font-weight: normal; font-size: 14px;" onclick="toggleSkillTable()">hide</a></h1>
<div id="skilltable"> <div id="skilltable">
@ -260,13 +259,15 @@
var stb = document.getElementById("skilltablebutton"); var stb = document.getElementById("skilltablebutton");
document.addEventListener("scroll", function() { document.addEventListener("scroll", function() {
last_known_scroll = getScrollY(); last_known_scroll = getScrollY();
if (!queueing) {
window.requestAnimationFrame(function() {
sc(last_known_scroll); sc(last_known_scroll);
queueing = false; // Usually an important performance consideration, this ends up significantly delaying the resizing of the top box, which is important to stay sized correctly
}); // if (!queueing) {
} // window.requestAnimationFrame(function() {
queueing = true; // sc(last_known_scroll);
// queueing = false;
// });
// }
// queueing = true;
}); });
sc(last_known_scroll); sc(last_known_scroll);

9
style.css
View File

@ -3,6 +3,9 @@
margin: 0px; margin: 0px;
clear: both; } clear: both; }
#sierra {
background-image: url("Sierra.jpg"); }
body { body {
font-family: serif; font-family: serif;
font-size: 1em; font-size: 1em;
@ -62,7 +65,8 @@ body {
.slide div { .slide div {
/* width wrapping */ /* width wrapping */
max-width: 800px; max-width: 800px;
margin: auto; } margin: auto;
text-align: center; }
.slide div div { .slide div div {
/* Project bits */ /* Project bits */
transition-duration: .2s; transition-duration: .2s;
@ -82,6 +86,9 @@ body {
color: white; } color: white; }
.slide div div .cover:hover { .slide div div .cover:hover {
box-shadow: 1px 1px 9px #444; } box-shadow: 1px 1px 9px #444; }
.slide div p,
.slide div table {
text-align: left; }
.slide table { .slide table {
line-height: 1.3; line-height: 1.3;
margin: 0; margin: 0;

4
style.css.map
View File

@ -1,7 +1,7 @@
{ {
"version": 3, "version": 3,
"mappings": "AAKA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAIf,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,IAAK;EACD,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,QAAI;IACA,MAAM,EAAE,IAAI;IACZ,SAAS,EA1BT,KAAK;;AA8Bb,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EAtCN,OAAO;EAwCV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EA3CN,IAAI;EA6CP,SAAI;IACA,mBAAmB,EAAE,GAAG;EAM5B,QAAG;IACC,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAM5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAI;EACA,SAAS,EAAE,KAAK;AAEpB,SAAG;EACC,SAAS,EAAE,GAAG;;AAKlB,UAAI;EACA,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAU;EACN,OAAO,EAAE,CAAC;;AAKd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,oBAAoB;IACpB,SAAS,EAnGT,KAAK;IAoGL,MAAM,EAAE,IAAI;IACZ,cAAI;MACA,kBAAkB;MAClB,mBAAmB,EAAE,GAAG;MACxB,KAAK,EAAE,KAAa;MACpB,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,GAAG;MACZ,OAAO,EAAE,YAAY;MACrB,MAAM,EAAE,GAAG;MACX,qBAAO;QACH,MAAM,EAAE,KAAK;QACb,mBAAmB,EAAE,aAAa;QAClC,eAAe,EAAE,KAAK;QACtB,MAAM,EAAE,GAAG;QACX,wBAAG;UACC,UAAU,EAAE,MAAM;UAClB,UAAU,EAjHrB,kBAAiB;UAkHN,KAAK,EAAE,KAAK;MAGpB,2BAAa;QACT,UAAU,EAAE,gBAAgB;EAIxC,YAAM;IACF,WAAW,EAAE,GAAG;IAChB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,GAAG;IACZ,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,QAAQ;IACzB,cAAc,EAAE,QAAQ;EAE5B,SAAG;IACC,MAAM,EAAE,GAAG;EAEf,QAAE;IACE,WAAW,EAAE,GAAG;IAChB,SAAS,EA1IT,KAAK;IA2IL,MAAM,EAAE,IAAI;EAEhB,SAAG;IACC,SAAS,EAAE,GAAG;IACd,UAAU,EAAE,MAAM;IAClB,SAAS,EAhJT,KAAK;IAiJL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK;;AAIzB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGtB,CAAE;EACE,mBAAmB,EAAE,GAAG", "mappings": "AAKA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;ACPf,OAAQ;EACJ,gBAAgB,EAAE,iBAAiB;;ADWvC,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,IAAK;EACD,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,QAAI;IACA,MAAM,EAAE,IAAI;IACZ,SAAS,EA3BT,KAAK;;AA+Bb,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EAvCN,OAAO;EAyCV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EA5CN,IAAI;EA8CP,SAAI;IACA,mBAAmB,EAAE,GAAG;EAM5B,QAAG;IACC,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAM5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAI;EACA,SAAS,EAAE,KAAK;AAEpB,SAAG;EACC,SAAS,EAAE,GAAG;;AAKlB,UAAI;EACA,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAU;EACN,OAAO,EAAE,CAAC;;AAKd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,oBAAoB;IACpB,SAAS,EApGT,KAAK;IAqGL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,cAAI;MACA,kBAAkB;MAClB,mBAAmB,EAAE,GAAG;MACxB,KAAK,EAAE,KAAa;MACpB,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,GAAG;MACZ,OAAO,EAAE,YAAY;MACrB,MAAM,EAAE,GAAG;MACX,qBAAO;QACH,MAAM,EAAE,KAAK;QACb,mBAAmB,EAAE,aAAa;QAClC,eAAe,EAAE,KAAK;QACtB,MAAM,EAAE,GAAG;QACX,wBAAG;UACC,UAAU,EAAE,MAAM;UAClB,UAAU,EAnHrB,kBAAiB;UAoHN,KAAK,EAAE,KAAK;MAGpB,2BAAa;QACT,UAAU,EAAE,gBAAgB;IAGpC;oBACM;MACF,UAAU,EAAE,IAAI;EAGxB,YAAM;IACF,WAAW,EAAE,GAAG;IAChB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,GAAG;IACZ,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,QAAQ;IACzB,cAAc,EAAE,QAAQ;EAE5B,SAAG;IACC,MAAM,EAAE,GAAG;EAEf,QAAE;IACE,WAAW,EAAE,GAAG;IAChB,SAAS,EAhJT,KAAK;IAiJL,MAAM,EAAE,IAAI;EAEhB,SAAG;IACC,SAAS,EAAE,GAAG;IACd,UAAU,EAAE,MAAM;IAClB,SAAS,EAtJT,KAAK;IAuJL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK;;AAIzB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGtB,CAAE;EACE,mBAAmB,EAAE,GAAG",
"sources": ["style.scss"], "sources": ["style.scss","covers.scss"],
"names": [], "names": [],
"file": "style.css" "file": "style.css"
} }

6
style.scss
View File

@ -9,6 +9,7 @@ $greybg: rgba(0, 0, 0, .5);
clear: both; clear: both;
} }
@import 'covers';
//sections //sections
body { body {
@extend .reset; @extend .reset;
@ -100,6 +101,7 @@ body {
/* width wrapping */ /* width wrapping */
max-width: $width; max-width: $width;
margin: auto; margin: auto;
text-align: center;
div { div {
/* Project bits */ /* Project bits */
transition-duration: .2s; transition-duration: .2s;
@ -123,6 +125,10 @@ body {
box-shadow: 1px 1px 9px #444; box-shadow: 1px 1px 9px #444;
} }
} }
p,
table {
text-align: left;
}
} }
table { table {
line-height: 1.3; line-height: 1.3;