updated ids for sections to be more descriptive

index.html

@@ -21,10 +21,10 @@
                 <img src="images/mayflyLogo.png" alt="logo" width="50px" height="50px">
               </a></li>
 							<li><a href="#intro">Welcome</a></li>
-							<li><a href="#one">What is Mayfly?</a></li>
-							<li><a href="#two">Tech Talk</a></li>
-							<li><a href="#three">Team</a></li>
-							<li><a href="#four">Case Study</a></li>
+							<li><a href="#mayfly">What is Mayfly?</a></li>
+							<li><a href="#tech-talk">Tech Talk</a></li>
+							<li><a href="#team">Team</a></li>
+							<li><a href="#case-study">Case Study</a></li>
 						</ul>
 					</nav>
 				</div>
@@ -39,13 +39,13 @@
 							<h1>Mayfly</h1>
 							<p>An open-source tool for hosting high-compute, collaborative, and stateful apps in the browser.</p>
 							<ul class="actions">
-								<li><a href="#four" class="button scrolly">Case Study</a></li>
+								<li><a href="#case-study" class="button scrolly">Case Study</a></li>
 							</ul>
 						</div>
 					</section>
 
 				<!-- One -->
-          <section id="one" class="wrapper style2 fade-up">
+          <section id="mayfly" class="wrapper style2 fade-up">
             <div class="inner">
               <h2>What is Mayfly?</h2>
               <p>Mayfly uses a technology called session backends to overcome the low compute, low memory limitations of the browser.</p>
@@ -75,12 +75,11 @@ <h3>PaaS</h3>
           </section>
 
         <!-- Two -->
-          <section id="two" class="wrapper style3 fullscreen fade-up">
+          <section id="tech-talk" class="wrapper style3 fullscreen fade-up">
             <div class="inner">
               <h2>Tech Talk</h2>
               <div class="youtube">
                 <iframe 
-                  id="tech-talk"
                   src="https://www.youtube.com/embed/fjvILuvC2so?si=MhJOeCXKWrcJsAHC" 
                   title="YouTube video player" 
                   frameborder="0" 
@@ -89,13 +88,13 @@ <h2>Tech Talk</h2>
                   allowfullscreen=""></iframe>              
               </div>
               <ul class="actions">
-                <li><a href="#four" class="button">Learn more</a></li>
+                <li><a href="#case-study" class="button">Learn more</a></li>
               </ul>
             </div>
           </section>
 
 				<!-- Three -->
-					<section id="three" class="wrapper style2 spotlights">
+					<section id="team" class="wrapper style2 spotlights">
 						<section>
 							<a href="https://joshuawlindsay.dev" class="image main"><img src="images/joshuaHeadshot.jpg" alt="" data-position="top center" /></a>
 							<div class="content">
@@ -155,7 +154,7 @@ <h2>Zach Kerner</h2>
 					</section>
 
 				<!-- Four -->
-					<section id="four" class="four wrapper fade-up">
+					<section id="case-study" class="four wrapper fade-up">
 						<div class="inner">
 							<h1 class="four">Case Study</h1>
               <h2 class="four">1 Introduction</h2>