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

app.js

@@ -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);
+});

index.html

@@ -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>
+		<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 class="callout"><a href="#contact">Contact Me</a></div>
+		<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>