From 7ed9065ee92fd2e7732936b24ceab9122902dca5 Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Tue, 13 Jun 2017 18:54:13 -0700 Subject: [PATCH 1/5] Better handling of background color on #top container --- css/style.css | 19 +++++++++---------- index.html | 5 +++-- sass/style.scss | 3 ++- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index 0b25ad8..de876e6 100644 --- a/css/style.css +++ b/css/style.css @@ -152,7 +152,6 @@ body { padding-top: 10px; width: 100%; position: fixed; - background: black; z-index: 999; } #top div { margin: auto; @@ -179,15 +178,15 @@ body { transition-property: size; transition-duration: .2s; } -.small .hideable { - display: none; - opacity: 0; } - -.small img { - max-width: 200px; } - -.small h2 { - font-size: 1em; } +.small { + background: black; } + .small .hideable { + display: none; + opacity: 0; } + .small img { + max-width: 200px; } + .small h2 { + font-size: 1em; } .large img { width: 100%; diff --git a/index.html b/index.html index 1c26215..07ca52e 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,7 @@ @@ -220,9 +221,9 @@ // var mastHeight = mast.clientHeight; // var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2)); if (topHeight < 300) { - mast.className = "small"; + topDiv.className = "small"; } else { - mast.className = "large"; + topDiv.className = "large"; } topDiv.style.height = topHeight + "px"; // console.log("topheight is " + topHeight + " and topDiv.style.height = " + topDiv.style.height); diff --git a/sass/style.scss b/sass/style.scss index c52f330..2efb4be 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -38,7 +38,7 @@ body { padding-top: 10px; width: 100%; position: fixed; - background: black; + // background: black; z-index: 999; div { margin: auto; @@ -76,6 +76,7 @@ body { //small and large classes are applied to #top .small { + background: black; .hideable { display: none; opacity: 0; From cfa0a137affe7e49ba5c3c11acb969f1b7feae19 Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Tue, 13 Jun 2017 18:56:08 -0700 Subject: [PATCH 2/5] Wait for animation frame --- index.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 07ca52e..2b3378e 100644 --- a/index.html +++ b/index.html @@ -191,15 +191,15 @@ var sp = document.getElementById("scrollprompt"); document.addEventListener("scroll", function() { last_known_scroll = getScrollY(); - sc(last_known_scroll); + // sc(last_known_scroll); // Usually an important performance consideration, this ends up significantly delaying the resizing of the top box, which is important to stay sized correctly - // if (!queueing) { - // window.requestAnimationFrame(function() { - // sc(last_known_scroll); - // queueing = false; - // }); - // } - // queueing = true; + if (!queueing) { + window.requestAnimationFrame(function() { + sc(last_known_scroll); + queueing = false; + }); + } + queueing = true; }); sc(last_known_scroll); From 140c9c0b6f6e3ff091a12483b2767fe84cd94da3 Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Tue, 13 Jun 2017 18:57:48 -0700 Subject: [PATCH 3/5] Full height black background on top --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 2b3378e..d1a88dc 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ From b293620bc9f8c3ed0638f1cea73eb8ab6c964eb7 Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Tue, 13 Jun 2017 19:15:00 -0700 Subject: [PATCH 4/5] Better scroll targets --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index d1a88dc..5439fe2 100644 --- a/index.html +++ b/index.html @@ -207,11 +207,11 @@ //execute scroll style modifications function sc(ypos) { - var wheight = window.innerHeight; + var windowHeight = window.innerHeight; //top thing var topDiv = document.getElementById("top"); var mast = document.getElementById("mast"); - var hcalc = wheight - ypos; + var hcalc = windowHeight - ypos; var topHeight = 100; if (hcalc > 100) { topHeight = hcalc; @@ -220,17 +220,17 @@ } // var mastHeight = mast.clientHeight; // var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2)); - if (topHeight < 300) { + if (topHeight < 315) { topDiv.className = "small"; } else { topDiv.className = "large"; } - topDiv.style.height = topHeight + "px"; + topDiv.style.height = topHeight - 10 + "px"; //subtract 10 to account for padding-top on #top // console.log("topheight is " + topHeight + " and topDiv.style.height = " + topDiv.style.height); // mast.style.marginTop = halfHeight + "px"; //background thing - var p = ((wheight - ypos) / wheight); //calulate ratio of scroll + var p = ((windowHeight - ypos) / windowHeight); //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 + ")"; @@ -239,7 +239,7 @@ } 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, it has pageYOffset return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY; } From 9f1d806b3c1611e2e8c1511814d27b6cba050d64 Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Thu, 22 Jun 2017 14:21:43 -0700 Subject: [PATCH 5/5] add vuejs to skills table --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 5439fe2..bf66e86 100644 --- a/index.html +++ b/index.html @@ -75,7 +75,7 @@
  • HTML5
  • CSS3 & Sass
    • -
  • Javascript, TypeScript, & Node
    • +
  • Javascript, TypeScript, VueJS, & Node