Fix TOC and section sync in BlogDetail, closes #290

[AKSHEXXXX]

Fixes #290

Aligned TOC with article sections so labels always match content.
Added stable section ids and smooth scroll using scrollIntoView.
Replaced anchor links with button navigation for better Lenis behavior.
Updated styles to prevent sticky nav overlap.
Cleaned blog data and ensured consistent sections across posts.

[vercel]

@AKSHEXXXX is attempting to deploy a commit to the Karan Manickam's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull request overview

Fixes the BlogDetail table-of-contents (TOC) navigation by ensuring TOC items are generated from the rendered sections, adding programmatic smooth scrolling to section IDs, and adjusting styling/data so TOC labels consistently match on-page content.

Changes:

• Make sections the single source of truth for both TOC and article body in BlogDetail.
• Add click-to-scroll TOC buttons via scrollIntoView and section ids.
• Remove toc arrays from blog data and ensure the first posts have complete sections; update TOC/sticky spacing styles.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
src/data/blogData.js	Removes toc fields and expands content.sections to ensure section data exists for TOC/body alignment.
src/components/Sections/BlogDetail.jsx	Generates TOC from sections and adds button-based smooth scrolling to section elements.
src/components/Sections/Blog.css	Updates TOC item styling for button semantics and adds scroll offset to prevent sticky overlap.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Section IDs and React keys are derived from the array index (blog-section-${i} / key={i}). This isn’t stable if sections are inserted/reordered (and makes it harder to support deep-linking). Consider using a deterministic id per section (e.g., slugified heading or an explicit id field in blog.content.sections) and use that for both the DOM id and the list key/scroll target.

Suggested change

	const scrollToSection = (index) => {
	document
	.getElementById(`blog-section-${index}`)
	// Create a deterministic, heading-based id for each section
	const createSectionId = (heading) => {
	if (!heading || typeof heading !== "string") {
	return "blog-section";
	}
	const slug = heading
	.toLowerCase()
	.trim()
	.replace(/[^a-z0-9]+/g, "-")
	.replace(/^-+|-+$/g, "");
	return `blog-section-${slug || "section"}`;
	};
	const sectionIds = sections.map((section) => createSectionId(section.heading));
	const scrollToSection = (index) => {
	const sectionId = sectionIds[index];
	if (!sectionId) {
	return;
	}
	document
	.getElementById(sectionId)

[Copilot]

scroll-margin-top: 100px duplicates the top: 100px offset used for the sticky sidebar. To avoid these drifting out of sync when the header/sticky offset changes, consider extracting this value into a single CSS custom property and reusing it in both places.