Smooth scrolling and jump links

This commit is contained in:
2017-02-14 03:19:58 -07:00
parent 7dd70078c9
commit 9b5bec5161
5 changed files with 75 additions and 38 deletions

View File

@@ -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>