Everything is now working

src/components/About.astro

@@ -3,7 +3,7 @@ import styles from "../styles/About.module.css"
 import Divider from "./Divider.astro"
 ---
 
-<section class={styles.about}>
+<section class={styles.about} id="about">
 	<h2>About Me</h2>
 	<Divider />
 	<article class={styles.textArticle}>

src/components/Nav.astro

@@ -9,7 +9,7 @@ import styles from "../styles/Nav.module.css"
 			<a href="/#">Home</a>
 		</li>
 		<li>
-			<a href="/#portfolio">My Projects</a>
+			<a href="/#portfolio">Projects</a>
 		</li>
 		<li>
 			<a href="/#about">About Me</a>

src/styles/Home.css

@@ -14,6 +14,7 @@ main {
 }
 
 main > section {
+	scroll-margin-top: 8rem;
 	display: flex;
 	flex-direction: column;
 	border-radius: 1rem;

src/styles/Nav.module.css

@@ -6,6 +6,9 @@
 	font-weight: bold;
 	background: hsl(0 0% 0% / 0.4);
 	font-size: 1.5em;
+	position: sticky;
+	top: 0;
+	z-index: 1;
 }
 
 .links svg {