New scroll mechanic

index.html

@@ -26,7 +26,7 @@
             var colorString = "rgb(" + rgb + "," + rgb + "," + rgb + ")";
             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
             return typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY;
         }
@@ -66,15 +66,9 @@
     <div id="tech" class="slide">
         <div class="copy">
             <h1><a href="#tech" onclick="smoothScroll('tech'); return false;">Tech</a></h1>
-            <h2>Overview</h2>
+            <!--<h2>Overview</h2>-->
             <div class="right">
-                <p>I'm currently studying Computer Science, and I have a wealth of experience through hackathons, odd jobs,
+                <p>I'm a motivated Computer Science student at ASU with a focus on the intersection of humanities and computers.
-                    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>
@@ -98,7 +92,29 @@
             </div>
             <h2>Experience: Jobs</h2>
             <!--we can do some product page like stuff with pictures and everything-->
+            <ul>
+                <li>
+                    <h3>The State Press</h3>
+                </li>
+                <li>
+                    <h3>Desert Community Robotics</h3>
+                </li>
+            </ul>
             <h2>Experience: Projects</h2>
+            <ul>
+                <li>
+                    <h3>Volunteer Management Portal</h3>
+                </li>
+                <li>
+                    <h3>PaperBoy</h3>
+                </li>
+                <li>
+                    <h3>Linker</h3>
+                </li>
+                <li>
+                    <h3>Sorting Algorithm Visualizer</h3>
+                </li>
+            </ul>
         </div>
     </div>
     <div id="design" class="slide">

style.css

@@ -3,15 +3,16 @@
   margin: 0px;
   clear: both; }
 
-* {
-  transition-duration: .2s; }
-
 body {
   font-family: serif;
   font-size: 1em;
   line-height: 1.6;
   transition: none; }
 
+#top {
+  position: fixed;
+  background: black; }
+
 #mast {
   background: none;
   line-height: 1.2;
@@ -25,8 +26,26 @@ body {
     font-style: italic;
     color: #ccc; }
   #mast img {
+    transition-duration: .2s; }
+  #mast .hideable {
+    transition-duration: .2s; }
+  #mast h2 {
+    transition-property: size;
+    transition-duration: .2s; }
+
+.small .hideable {
+  display: none;
+  opacity: 0; }
+.small img {
+  max-width: 200px; }
+.small h2 {
+  font-size: 1em; }
+
+.large img {
   width: 100%;
   max-width: 400px; }
+.large .hideable {
+  opacity: 1; }
 
 .copy h1 {
   text-decoration: underline;
@@ -40,7 +59,8 @@ body {
   background: black; }
 
 .slide {
-  padding: 0px; }
+  padding: 0px;
+  width: 100%; }
   .slide div {
     /*width wrapping*/
     max-width: 800px;
@@ -67,4 +87,7 @@ h2 {
   font-weight: normal;
   font-style: italic; }
 
+a {
+  transition-duration: .2s; }
+
 /*# sourceMappingURL=style.css.map */

style.css.map

@@ -1,6 +1,6 @@
 {
 "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;;AAIf,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAEpB,IAAI;EACA,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;;AAErB,KAAM;EACF,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,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAG;IACC,mBAAmB,EAAE,GAAG;EAE5B,eAAS;IACL,mBAAmB,EAAE,GAAG;EAE5B,QAAE;IACE,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAK5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAG;EACC,SAAS,EAAE,KAAK;AAEpB,SAAE;EACE,SAAS,EAAE,GAAG;;AAItB,UAAI;EACI,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAS;EACL,OAAO,EAAE,CAAC;;AAMd,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAE;IACE,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,kBAAkB;IAClB,SAAS,EAjGT,KAAK;IAkGL,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;;AAEtB,CAAC;EACG,mBAAmB,EAAE,GAAG",
 "sources": ["style.scss"],
 "names": [],
 "file": "style.css"

style.scss

@@ -7,9 +7,6 @@ $pink: #ed1a76;
     margin: 0px;
     clear: both;
 }
-*{
-    transition-duration: .2s;
-}
 
 //sections
 body {
@@ -19,7 +16,10 @@ body {
     line-height: 1.6;
     transition: none;
 }
-
+#top{
+    position: fixed;
+    background: black;
+}
 #mast {
     background: none;
     line-height: 1.2;
@@ -28,24 +28,53 @@ body {
         color: white;
         font-style: italic;
     }
-    a:hover{
+    a:hover {
         color: $pink;
     }
     .sub {
         font-style: italic;
         color: $grey;
     }
-    img {
+    img{
+        transition-duration: .2s;
+    }
+    .hideable{
+        transition-duration: .2s;
+    }
+    h2{
+        transition-property: size;
+        transition-duration: .2s;
+    }
+}
+
+.small {
+    .hideable {
+        display: none;
+        opacity: 0;
+    }
+    img{
+        max-width: 200px;
+    }
+    h2{
+        font-size: 1em;
+    }
+}
+.large{
+img {
         width: 100%;
         max-width: 400px;
     }
+    .hideable{
+        opacity: 1;
+
+    }
 }
 
 .copy {
     h1 {
         text-decoration: underline;
         font-style: italic;
-        a{
+        a {
             color: black;
         }
     }
@@ -61,13 +90,10 @@ body {
 }
 
 //standalone elements
-p {
-    // max-width: 600px;
-}
-
 .slide {
     @extend .reset;
     padding: 0px;
+    width: 100%;
     div {
         /*width wrapping*/
         max-width: $width;
@@ -101,3 +127,6 @@ h2 {
     font-weight: normal;
     font-style: italic;
 }
+a{
+    transition-duration: .2s;
+}

toptest.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <style>
+        #spaceTakerUpper {
+            height: 100vh;
+        }
+        
+    </style>
+</head>
+
+<body>
+    <div class="slide" id="top">
+        <div id="mast">
+            <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>
+            <div class="hideable">
+                <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>
+    <div id="spaceTakerUpper">
+
+    </div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus lorem, pretium non suscipit vel, dapibus non dolor.
+        Suspendisse potenti. Phasellus interdum tempus placerat. Vivamus nec interdum mauris. Integer eu neque lacus. Nulla
+        turpis turpis, fermentum in elementum nec, aliquam sed elit. Maecenas fringilla tristique leo quis mattis. In tempor
+        justo id vehicula porta. Ut metus tortor, laoreet quis iaculis ac, aliquet et metus. Suspendisse potenti. Nullam
+        at hendrerit neque. Vestibulum scelerisque turpis felis, et mollis risus suscipit eget. Donec condimentum ornare
+        dictum. Vivamus rhoncus felis nisl, suscipit imperdiet ante tempus sit amet. Nullam lobortis sem ultricies, tempus
+        felis a, hendrerit lacus. Suspendisse potenti. Suspendisse sollicitudin purus vitae felis molestie placerat. Vivamus
+        aliquam tincidunt velit, id cursus purus euismod vitae. Praesent a rhoncus quam, non scelerisque lorem. Aenean mollis
+        dapibus odio, ut bibendum arcu mattis vitae. Maecenas id faucibus arcu. Aenean ullamcorper urna id cursus semper.
+        Sed aliquet, est ut interdum ultrices, arcu libero venenatis lacus, ut viverra ante massa id elit. Mauris molestie
+        enim sit amet neque viverra, luctus laoreet dolor efficitur. Mauris non mi auctor, tincidunt odio in, ultricies sapien.
+        Sed mollis ligula vitae magna malesuada imperdiet. Aliquam quis felis urna. Morbi feugiat metus sed massa finibus
+        dapibus at sed augue. Curabitur in eleifend neque. Sed malesuada rutrum tellus, sit amet tempus enim pretium sed.
+        Mauris nisi eros, facilisis a ornare sit amet, efficitur vitae mauris. Aliquam in nibh placerat, mollis augue sit
+        amet, interdum felis. Morbi justo felis, semper ac lorem in, lobortis pharetra purus. Curabitur ut neque vitae magna
+        interdum pulvinar ac vitae dui. Donec consequat est ex, et tincidunt tellus rhoncus nec. Donec a dictum nisi, mollis
+        egestas lectus. Quisque vel fringilla justo, ultricies pharetra dui. Morbi egestas libero et turpis congue tincidunt.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et
+        ultrices posuere cubilia Curae; Aenean ullamcorper luctus dolor, nec consectetur erat placerat at. Phasellus a metus
+        sed lorem molestie euismod finibus id turpis. Integer iaculis dignissim eleifend. Ut enim risus, bibendum ac ultricies
+        tempus, blandit ut justo. Morbi id nulla tincidunt, aliquet quam et, consectetur purus. Quisque lobortis leo lorem,
+        sit amet pellentesque leo eleifend non. Fusce consectetur sapien risus, id sagittis velit ornare vitae. Duis ultricies,
+        sem sed facilisis lacinia, ex libero finibus ex, vel egestas ex lacus in dui. Quisque eros nulla, placerat a massa
+        et, fringilla feugiat purus. Proin ipsum neque, varius in turpis id, facilisis convallis justo. Donec vulputate sapien
+        pharetra erat blandit semper. Vestibulum mollis, ante sit amet tristique ullamcorper, leo dolor iaculis ligula, eget
+        dapibus nulla lorem viverra felis. Nulla eleifend fermentum ipsum a posuere. Curabitur sed placerat elit, ac molestie
+        metus. Pellentesque id eros volutpat, volutpat leo nec, finibus justo. Fusce euismod, mi bibendum ornare tincidunt,
+        lorem nisi interdum turpis, vulputate pretium lectus augue eget sem. Nam et nibh purus. Cras volutpat sagittis accumsan.
+        Vestibulum semper dui hendrerit, iaculis nunc at, imperdiet ligula. Cras fringilla nunc eros, non bibendum lorem
+        cursus non. Quisque scelerisque mauris accumsan risus ultrices maximus. Aenean tristique gravida suscipit. Mauris
+        sit amet varius tellus. Suspendisse interdum dolor sit amet lacinia consequat. Class aptent taciti sociosqu ad litora
+        torquent per conubia nostra, per inceptos himenaeos. Integer nec mattis nisi. Orci varius natoque penatibus et magnis
+        dis parturient montes, nascetur ridiculus mus. Sed quis enim at sapien scelerisque tristique non et libero.</p>
+    <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>
+    <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>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <script>
+        sc();
+        document.addEventListener("scroll", sc);
+        function sc() {
+            var ypos = getScrollY();
+            var wheight = window.innerHeight;
+            //top thing
+            var topDiv = document.getElementById("top");
+            var mast = document.getElementById("mast");
+            var topHeight = wheight - ypos;
+            var mastHeight = mast.clientHeight;
+            var halfHeight = Math.floor((topHeight / 2) - (mastHeight / 2));
+            if(topHeight < 300){
+                mast.className = "small";
+                console.log("boop!");
+            }else{
+                mast.className = "large";
+            }
+            if (topHeight > 100) {
+                topDiv.style.height = topHeight + "px";
+                mast.style.marginTop = halfHeight + "px";
+            }
+
+            //background thing
+            var p = ((wheight - ypos) / wheight); //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;
+            console.log("wheight = " + wheight);
+
+        }
+        function bgColor() {
+
+        }
+        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>
+</body>
+
+</html>