v0.6.1 Fix anchor links bug, and add smooth scrolling behaviour

src/App.jsx

@@ -129,25 +129,20 @@ function App() {
 		<div className={styles.app}>
 			<Header />
 			<main className={styles.main}>
+				<section id="home">
 					<Hero />
-				<section className={styles.section} style={{ backgroundColor: "#333", color: "#fff" }}>
-					<div className={styles.content}>
-						<h1>Welcome to My Portfolio</h1>
-						<p>This is where you'll add your portfolio content.</p>
-					</div>
 				</section>
-				{/* <section className={styles.section} style={{backgroundColor: '#f0f0f0'}}>
+				<section id="experience">
-          <div className={styles.content}>
-            <h2>Another Section</h2>
-            <p>This section has a different background color.</p>
-          </div>
-        </section> */}
 					<InfoSection title="Experience" data={experienceData} isEducation={true} />
+				</section>
 				<Separator width="70%" thickness="3px" />
-				<InfoSection title="Education" data={educationData} isEducation={true} />
+				<section id="projects">
-				<Separator width="70%" thickness="3px" />
 					<Projects title="Projects" data={projectsData} />
-				{/* Add more sections as needed */}
+				</section>
+				<Separator width="70%" thickness="3px" />
+				<section id="education">
+					<InfoSection title="Education" data={educationData} isEducation={true} />
+				</section>
 			</main>
 			<Footer />
 		</div>

src/App.module.css

@@ -15,7 +15,8 @@
 	width: 100%;
 	display: flex;
 	justify-content: center;
-	padding: 40px 0;
+	padding: 1rem 0;
+	scroll-margin-top: 60px; /* This ensures the section doesn't get hidden behind the fixed header */
 }
 
 .content {
@@ -27,6 +28,7 @@
 body {
 	margin: 0;
 	padding: 0;
+	/* padding-top: 60px; */
 	font-family: Arial, sans-serif;
 	line-height: 1.6;
 	color: #333;
@@ -45,3 +47,7 @@ h6 {
 	--content-width: 75%;
 	--accent-color: #ff6b00;
 }
+
+html {
+	scroll-behavior: smooth;
+}

version.txt

@@ -1 +1 @@
-0.6.0
+0.6.1