Detailed Change Log: Scrollable Homepage

Date: 2026-04-21 Repository: YanWin/YanWin.github.io High-level entry: website-change-overview.md

Request

Turn the homepage into a scrollable page while keeping the fixed header bar. Header items should jump to sections on the homepage, and the active header item should highlight automatically as the user scrolls through the page.

Context Map

Files to Modify

File	Purpose	Planned Change
_pages/about.md	Homepage content at `/`	Replace the short landing page with sectioned one-page content
_data/navigation.yml	Header navigation	Change top-nav links from standalone pages to homepage anchors
_includes/masthead.html	Header rendering	Keep current structure but ensure it works with anchor-based section links
assets/js/_main.js	Global front-end behavior	Add scrollspy-style active section highlighting for homepage anchors
_sass/layout/_masthead.scss	Header state styling	Ensure active/selected nav items remain clickable and highlight correctly
assets/css/main.scss	Sass entrypoint	Import homepage-specific section styles
_sass/layout/_home_sections.scss	Homepage section styling	Add spacing, section anchors, cards, and responsive behavior for the long-form homepage

Risks

Fixed-header anchor offsets must land cleanly without hiding section headings.
Active-link highlighting should work both when clicking a header item and when free-scrolling.
Homepage changes should not break the existing standalone pages for publications, talks, teaching, or CV.

Task Steps

Create a homepage section structure for about, publications, talks, teaching, and CV.
Switch the header links to homepage anchors.
Add scroll-aware active header highlighting.
Style the new sections so the page remains readable and visually consistent with the current site.
Verify the homepage scroll behavior, anchor jumps, and header highlighting in the live preview.

Implementation Plan

Rebuild the homepage as a one-page narrative using anchored sections with stable IDs.
Reuse the existing publication/talk/teaching collection rendering logic so the homepage stays in sync with the standalone archive pages.
Use a lightweight JavaScript scrollspy approach in the existing global bundle instead of adding a new dependency.
Preserve the fixed masthead and current visual language, adding only the section-level styling needed for a clean long-scroll layout.

Progress Updates

New task opened after closing and committing the CV/content update work.
Relevant homepage, masthead, navigation, Sass, and JavaScript files mapped.
Homepage rebuilt as a single long-scroll page with anchored sections for about, publications, talks, teaching, and CV.
Header navigation switched to homepage anchor links and the old Guide entry was removed from the masthead.
Scroll-aware active-link behavior added to the main JavaScript bundle for homepage section tracking.
Homepage-specific styles added for section spacing, cards, and long-scroll layout consistency.

Final Implementation Results

The homepage at / now acts as a one-page landing page with anchored sections for #about, #publications, #talks, #teaching, and #cv.
Masthead links now point to homepage anchors instead of separate pages, while archive pages for publications, talks, teaching, and CV remain available through in-page call-to-action links.
Active header highlighting now updates as the user scrolls through the homepage sections.
The masthead active-state styling no longer disables pointer interaction, so active sections remain clickable.
New homepage section styling was added without changing the underlying archive-page layouts.

Verification Notes

npm run build:js completed successfully and regenerated assets/js/main.min.js.
Docker preview was rebuilt and refreshed after the known Windows auto-regeneration limitation surfaced again.
http://localhost:4000/ returned HTTP 200 after the rebuild.
Final homepage response confirmed the new markers href="/#about", href="/#publications", id="about", and id="publications".
The remaining /publications/ links on the homepage are expected archive-page links inside the page content, not stale masthead navigation.

Closure

Scrollable homepage feature implemented and validated at the rendered HTML level.
Remaining limitation: visual verification was completed through structure and rendered output checks, but not with a DOM-inspection browser tool because the integrated browser tooling did not expose page contents in this session.