Business directories usually look like a cluttered mess of endless spreadsheets. For this project, I used CSS Grid to build a modern, multi-column layout that gives each business profile plenty of breathing room. The content scales naturally to fit any screen size perfectly, keeping the design clean, open, and easy to skim.
Instead of hardcoding hundreds of business listings directly into the HTML structure, I built a custom JSON data file from scratch using real regional business information. Using asynchronous JavaScript, the platform fetches and parses this local data dynamically when the page loads, keeping the codebase clean and modular.
Clicking away to a brand new page just to read a quick business bio ruins the user experience. To fix this, I engineered smooth popup modals using vanilla JS. Users can open and close detailed member overviews instantly without losing their place or ruining their scroll position on the main directory list.
To give users control over how they browse the directory, I built a real-time layout toggle. JavaScript event listeners track clicks on the view buttons and instantly swap the CSS classes on the container. This switches the interface between a visual card grid and a compact list view immediately without reloading the page.
