Whenever I attempt to navigate by clicking on the buttons labeled About, Experience, and others, the page does not redirect me accordingly. Oddly enough, if I manually input the endpoint for that specific page like http://localhost:3000/#about, it functions properly. So why is it that my button fails to take me there when the designated section exists? Below you'll find the relevant code snippet.
import { Cursor, useTypewriter } from 'react-simple-typewriter';
import Image from 'next/image';
import React from 'react'
import BackgroundCircles from './BackgroundCircles';
import imageofme from '../public/imageofme.png';
import Link from 'next/link';
type Props = {}
export default function Hero({}: Props) {
const [text,count] = useTypewriter({
words: ['Hello World', 'Welcome to my website', 'I am a web developer'],
loop: true,
delaySpeed: 2000,
})
return (
<div className='h-screen flex flex-col space-y-8 items-center justify-center
text-center overflow-hidden'>
<BackgroundCircles/>
<Image className='relative rounded-fill h32 w-32 mx-auto object-cover'
src={imageofme}
alt='image of me' />
<div className='z-20'>
<h2 className='text-sm uppercase text-gray-500 pb-2 tracking-[15px]'>
Junior Software Developer
</h2>
<h1 className='text-5xl lg:text-6xl font-semibold px-10'>
<span className='mr-3'>{text}</span>
<Cursor cursorColor='black'/>
</h1>
<div className='pt-5'>
<Link href='#about'>
<button className='heroButton'>About</button>
</Link>
<Link href='#experience'>
<button className='heroButton'>Experience</button>
</Link>
<Link href='#skills'>
<button className='heroButton'>Skills</button>
</Link>
<Link href='#projects'>
<button className='heroButton'>Projects</button>
</Link>
</div>
</div>
</div>
)
}
Page.tsx
'use client'
import About from "@/components/About";
import Experience from "@/components/Experience";
import Header from "@/components/Header";
import Hero from "@/components/Hero";
export default function Home() {
return (
< div className='bg-[rgb(55,64,104)] text-white h-screen snap-y snap-mandatory
overflow-scroll z-0' >
<Header/>
<section id='hero' className='snap-center'>
<Hero/>
</section>
<section id='about' className='snap-center'>
<About/>
</section>
{/*experience */}
<section id='experience' className="snap-center">
<Experience/>
</section>
{/*skills*/}
{/*projects */}
{/*Contact Me */}
</div>
)
}
Even after diligently following the documentation and inspecting the console for any errors, the issue persists. I've also experimented with using Next links that did not yield positive results, and modified the paths to be / instead of # without success.