diff --git a/index.html b/index.html
index eb91c68..cd6cce9 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,7 @@
<div>
<h1 style="display:none;">Chuck Dries</h1>
<img src="cd.png" alt="Chuck Dries">
- <h2 id="tagline">Tech / Design / Photography / Leadership</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>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>
@@ -59,9 +59,9 @@
<h2>Learn more <span id="db" class="arrow"></span></h2>
</div>
</div>
- <div class="slide">
+ <div id="tech" class="slide">
<div class="copy">
- <h1>Tech</h1>
+ <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,
@@ -95,25 +95,6 @@
<h2>Experience: Jobs</h2>
<!--we can do some product page like stuff with pictures and everything-->
<h2>Experience: Projects</h2>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
</div>
</div>
<div class="slide">
@@ -130,6 +111,21 @@
</div>
</div>
</div>
+ <div 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 class="slide slide-full vcwrapper">
<h1 class="under">Design</h1>
@@ -144,15 +140,16 @@
</div>
-->
<script>
- x = document.getElementById("db");
- 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);
- }
+ x = document.getElementById("db");
+ 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) {
@@ -170,6 +167,7 @@
ga('create', 'UA-34100225-1', 'auto');
ga('send', 'pageview');
</script>
+ <script src="scroll.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/scroll.js b/scroll.js
new file mode 100644
index 0000000..8d1c0ac
--- /dev/null
+++ b/scroll.js
@@ -0,0 +1,31 @@
+/* A super simple smooth scroller without all the baggage. Written by Chuck Dries in 2017*/
+//settings
+var speed = .002; //speed multiplier
+//setup necissary stuff
+var target = null;
+var targetHeight = 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 = window.scrollY; //grab the current scroll position
+ 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 = window.scrollY; //record the current scroll position of the window
+ 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 = window.scrollY;//re-record the current height after scrolling for comparison
+ if(currentHeight != targetHeight){ //schedule another tick if we need to
+ window.requestAnimationFrame(animateScroll);
+ }
+
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index d0871b6..986147b 100644
--- a/style.css
+++ b/style.css
@@ -2,15 +2,15 @@
padding: 0px;
margin: 0px;
clear: both; }
-*{
- transition-duration: .2s;
-}
+
+* {
+ transition-duration: .2s; }
+
body {
font-family: serif;
font-size: 1em;
line-height: 1.6;
- transition: none;
-}
+ transition: none; }
#mast {
background: none;
@@ -31,6 +31,8 @@ body {
.copy h1 {
text-decoration: underline;
font-style: italic; }
+ .copy h1 a {
+ color: black; }
.nojs body {
background: white; }
diff --git a/style.css.map b/style.css.map
index 5bc3ced..f66e5bd 100644
--- a/style.css.map
+++ b/style.css.map
@@ -1,6 +1,6 @@
{
"version": 3,
-"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,mBAAmB,EAAE,GAAG;;AAG5B,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,EAzBN,OAAO;EA2BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EA9BN,IAAI;EAgCP,SAAI;IACA,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;;AAKpB,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;;AAKtB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AASzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,UAAI;IACA,kBAAkB;IAClB,SAAS,EAjET,KAAK;IAkEL,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,EAAC,IAAI;;AAGnB,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"
diff --git a/style.scss b/style.scss
index b990cba..d6f53d3 100644
--- a/style.scss
+++ b/style.scss
@@ -7,6 +7,9 @@ $pink: #ed1a76;
margin: 0px;
clear: both;
}
+*{
+ transition-duration: .2s;
+}
//sections
body {
@@ -14,7 +17,7 @@ body {
font-family: serif;
font-size: 1em;
line-height: 1.6;
- transition-duration: .2s;
+ transition:none;
}
#mast {
@@ -42,6 +45,9 @@ body {
h1 {
text-decoration: underline;
font-style: italic;
+ a{
+ color: black;
+ }
}
}