The blog loads its articles from a posts.json via fetch() and renders them in vanilla JS. No framework, no build. With 7 articles it works perfectly. At 50 articles, you want pagination — for readability, not performance (the JSON stays lightweight anyway). The main constraint: no hidden elements in the DOM.

The wrong way to do it: load everything then display: none what you don't show. The right way: only render the posts for the current page. The difference seems cosmetic on a personal blog. It reflects a working habit — don't put in the DOM what you don't display.

The existing architecture

The starting setup: fetch('posts.json') loads the manifest, articles are sorted by date, then render(allPosts) writes to #posts-container via innerHTML . The filterPosts() function filters the full array by category and text search.…