Built Portfolio Page - 5 (Link scroll)

2024-07-24

Word count: 158 | Reading time≈ 1 min

Steps:

Add id to different element
Add scroll-mt propriety to classman

Modify Intro.tsx:

export default function Intro() {
  return (
    <section 
      id = "home"
      className='mb-28 max-w-[50rem] text-center sm:mb-0
      scroll-mt-[100rem]'
    >
....

Modify About.tsx:

export default function About() {
  return (
    <motion.section className='mb-28 max-w-[45rem] text-center leading-8 sm:mb-40 scroll-mt-28'
      initial={{ opacity:0, y:100}}
      animate={{ opacity:1, y:0 }}
      transition={{ delay: 0.175 }}
      id="about"
    >
...

Modify Projects.tsx

export default function Projects() {
  return (
    <section id="projects" className='scroll-mt-28'>
...

Scroll smoothly

Modify layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className='!scroll-smooth'>
...