wtf is tableofcontent?

tableofcontent is a small JavaScript component you can drop into a portfolio website to build a sticky table of contents along the left edge of the page. As a visitor scrolls, it tracks which project section is currently active and highlights the matching link. Hovering or focusing on a link opens a dark tooltip that shows the project name and a short description, plus a rotating preview of images pulled from that section, so visitors get a quick look at each project without leaving the page. The component is plain JavaScript and CSS, no framework required. You install it by linking the stylesheet, writing a nav element with anchor links that match your section IDs, and calling an initProjectToc function from the included script. Preview images are gathered automatically from any element matching .project-shot img inside the linked section. Several options let you customize behavior: the CSS selectors used for the table of contents, links, and section images, how sensitive the active-section detection is, how often preview images rotate, whether smooth scrolling is enabled when a link is clicked, and whether hover and click sound effects play, built with the Web Audio API. Visual styling is controlled through CSS custom properties, covering things like the position of the table of contents, the width and height of the marker line next to each link, and the tooltip background color, so it can be restyled to match a different site without editing the component's core CSS. The project also pays attention to accessibility. Links are real anchor elements rather than clickable divs, the active link is marked with aria-current, tooltips can be reached and triggered by keyboard focus, and both the sound effects and image slider motion respect the visitor's reduced-motion preference. A live demo is hosted on GitHub Pages, and the repository includes a local demo you can run with npm start. The project has 13 stars and is written in JavaScript.