A project portfolio only works if people can find the right project quickly and the team can keep it current.

• Project work spans multiple cities and services, which is hard to browse on a static site
• Every new project would otherwise mean building a new page by hand
• Services and projects needed to connect, so a visitor can move from one to the other
• The site had to stay fast, with no recurring plugin or tool costs
• Project entries vary in detail, so empty fields could not leave gaps on the page

We treated the site as a content system, not a set of pages.

01 CMS Architecture

• Three Webflow CMS collections: Portfolio, Services, and Clients
• Service, clients, and project pages are generated from these collections
• Content updates never require layout changes

02 Connected Content

• Projects link to the services they belong to
• Dynamic collection lists power the Portfolio, Service, and Project pages
• Conditional visibility hides empty fields and sections automatically

03 Custom Portfolio Filtering

• A filter bar built in HTML and CSS, with All projects, By city, and By service tabs
• A city checkbox dropdown, a service dropdown, a sort menu, and a responsive grid
• A JavaScript filter that filters, groups, and sorts by city, service, or end year
• The project count updates as visitors filter

04 Lightweight by Design

• Plain HTML, CSS, and JavaScript with no external libraries or third-party services
• No added load time and no recurring cost
• The script reads existing CMS fields, so new or edited projects appear automatically

05 Built for Every Device

• Responsive layouts for desktop, tablet, and mobile
• Image optimization and lazy loading

Inside the build: the portfolio filter
A custom filter bar and script sit on top of the Portfolio collection. Visitors narrow the work by city or service, sort by end year, and watch the project count update.

Filter bar (HTML and CSS)

• All projects, By city, and By service tabs
• City checkbox dropdown and service dropdown
• Sort menu and responsive grid layout

Filter script (JavaScript)

• Added in the page settings
• Filters, groups, and sorts by city, service, or end year
• Updates the project count

How the CMS fits together
Two collections do the heavy lifting. Add an entry and every page that should show it updates on its own.

Portfolio

• Generates every Project page
• Feeds the Portfolio page grid and filter
• Filter reads the city, service, and end year fields

Services

• Generates every Service page
• Lists the projects that use each service
• Powers the service dropdown in the filter

Dynamic collection lists on the Portfolio, Service, and Project pages. Conditional visibility hides empty fields and sections.

SNG & Associates is a civil engineering firm based in Pleasanton, California. The firm provides civil engineering design along with construction management and inspection services, and works with public agencies in California.

• Webflow Design, Layout, and Hosting
• CMS Architecture (Portfolio and Services collections)
• Custom Portfolio Filter (HTML, CSS, JavaScript)
• Dynamic Collection Lists and Content Linking
• Responsive Design and Performance Optimization