Component

Section Dots Nav

Fixed dot navigation on the left; highlights the active section with scroll-spy and aligns with a sticky navbar via the offset prop.

hero

Hero

The first section people see, usually an intro and large heading.

about

About

A short summary about you, your experience, and your approach.

projects

Projects

Your standout projects and case studies.

stack

Stack

Technologies, tools, and how you work.

contact

Contact

Forms or links to get in touch with you.

Usage Examples

Basic SectionDotsNav

import { SectionDotsNav } from "@/components/section-dots-nav";

const sections = [
  { id: "hero", label: "Hero" },
  { id: "about", label: "About" },
  { id: "contact", label: "Contact" }
];

<SectionDotsNav sections={sections} />

SectionDotsNav with Offset

<SectionDotsNav sections={sections} offset={72} />