mdrockwell/resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add smooth scrolling to different sections when associated link/button is clicked

Browse Source
This commit is contained in:
Mike Rockwell
2025-07-29 10:13:33 -04:00
parent 65d4dd2970
commit be36fcd6c5
2 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app.js Normal file
View File

@@ -0,0 +1,23 @@
// Smooth scroll to portfolio section when link is clicked
document.querySelector("#websites-link").addEventListener("click", function(event){
event.preventDefault()
setTimeout(() => {
document.querySelector("#portfolio").scrollIntoView({ behavior: "smooth" });
}, 150);
});
// Smooth scroll to contact form when button is clicked
document.querySelector("#contact-button").addEventListener("click", function(event){
event.preventDefault()
setTimeout(() => {
document.querySelector("#contact").scrollIntoView({ behavior: "smooth" });
}, 150);
});
// Smooth scroll to experience section when link is clicked
document.querySelector("#experience-link").addEventListener("click", function(event){
event.preventDefault()
setTimeout(() => {
document.querySelector("#experience").scrollIntoView({ behavior: "smooth" });
}, 150);
});

7
index.html
View File

@@ -13,15 +13,15 @@
<a href="/resume/"><img src="img/portrait.jpeg" alt="Mike Rockwell"></a>
<div class="title">
<h1>Hi, I'm <span class="bold">Mike</span></h1>
<h2>I make <a href="#portfolio">websites</a>.</h2>
<h2>I make <a id="websites-link" href="#portfolio">websites</a>.</h2>
</div>
</header>
<div class="divider">
</div>
<div class="bio">
<p>Based in Upstate New York, I'm a designer that builds clean, responsive websites to help businesses and individuals reach their audience online.</p>
<p>I have over seven years of <a href="#experience">experience</a> working in a distributed work environment, supporting software used by millions of monthly active users.</p>
<div class="callout"><a href="#contact">Contact Me</a></div>
<p>I have over seven years of <a id="experience-link" href="#experience">experience</a> working in a distributed work environment, supporting software used by millions of monthly active users.</p>
<div id="contact-button" class="callout"><a href="#contact">Contact Me</a></div>
</div>
<div class="divider">
</div>
@@ -90,5 +90,6 @@
<p>Copyright © 2018–2025 <a href="https://mdrockwell.net/">Mike Rockwell</a></p>
<p>View source on <a href="https://libertynode.dev/mdrockwell/resume" title="View source on Gitea">Gitea</a></p>
</footer>
<script src="app.js" type="text/javascript"></script>
</body>
</html>