Browse any “Bricks portfolio examples” roundup, and you’ll notice a pattern: beautiful screenshots, a clean grid, and no context on how any of it was built. That’s fine for mood boards. It’s not fine if you’re actually trying to build something, especially when 48% of freelancers report finding clients via their online portfolio. The site isn’t a formality. It’s a sales channel.
Most portfolio sites (even the visually impressive ones) are built as static pages. Projects are added manually, one by one, as page sections. There’s no underlying data model. When the site owner wants to add a new project, they duplicate a section and update the text. And if they need to add a category filter, they just give up.
That approach works for three projects. It starts to become troublesome at ten. At 50, it’s unmaintainable.
The alternative is to treat portfolio projects as structured data from the start: a Custom Post Type (CPT) with defined fields, queried and rendered dynamically. Add a project to the CPT in your WordPress backend, and it appears in the grid automatically.
The difference in build effort upfront is modest. The difference in long-term maintainability is significant.
| Static page approach | CPT + dynamic listing | |
|---|---|---|
| Adding a new project | Edit page, copy section, update content | Create a new post, publish |
| Filtering by category | Requires JS library or manual duplication | Native taxonomy + JetSmartFilters or Bricks filter |
| Single project page | A separate page created each time | Single template applied to all posts automatically |
| Reordering projects | Manual drag in page builder | Sortable via query parameters or custom fields |
| Scale | Degrades past ~15 projects | Handles hundreds without template changes |
| Result | 🥲 | ☺️ |
Every site in this article uses the CPT approach. That’s no coincidence.
15 Examples of WordPress Bricks Portfolio 2026
Each example below covers several points, including what makes the portfolio interesting, how the output is structured (CPT name, query method, and grid layout), and one interaction or UX detail worth noting. I’ve also grouped them by site type: freelancers followed by full-service agencies.
Freelancer and solopreneur portfolios
A freelancer’s web design portfolio on Bricks solves a specific problem: how to present client work convincingly without the overhead of a full agency site? The examples below each approach that problem differently, using minimalism, filtering, or deliberate structural choices.
What they share is that all four store projects as a CPT, so none of them require a template edit to add new work.
Amine Sidi Moussa
At Amine Sidi Moussa’s website, the projects are stored as a CPT and displayed in a two-column grid. The layout is minimal: monochrome backgrounds, device mockups on stone or abstract surfaces, no decorative elements.
The grid features a Last updated timestamp in the header, indicating active maintenance and subtly enhancing credibility. One tile is designated as a Soon… placeholder, maintaining the grid’s structure while transparently showing the portfolio is evolving. This demonstrates how a freelancer can benefit from the CPT output to create a refined, clutter-free web design portfolio for Bricks that grows.
Alexey Malikov
Projects in Alexey Malikov’s portfolio are stored as a CPT and displayed in a two-column grid via a Query loop. The filter tabs on top let visitors self-select by project type without a page reload.
The hover interaction flips the visual logic: the thumbnail blurs, and a “View” button surfaces, keeping the grid clean at rest while making the action obvious on hover. The dark UI with high-contrast imagery gives the portfolio a tool-like feel rather than a typical agency brochure. The multilingual switcher in the header is a practical detail for a freelancer working across multiple markets.
Damien Justin
Projects are stored as a CPT called Réalisations and displayed via a Query loop. The layout pairs each item asymmetrically: a plain-text card on the left with the project title and taxonomy tags, and an image on the right. This deliberate split lets the visual work carry the weight without cropping it into a thumbnail.
Top filter buttons let visitors narrow by type without a page reload. Each item links to a single post with full project details. It’s a clean solution for a graphic designer whose work is image-first yet needs taxonomy structure to remain navigable as the archive grows.
Irinel Traista
Projects in Irinel Traista’s portfolio are stored as a CPT and displayed using a Query loop. Single posts are intentionally omitted; each card links directly to the client’s live website rather than to an internal case page.
That’s a deliberate trade-off: it removes the friction of an intermediate page, letting the work speak immediately, but it also leaves the portfolio without a context layer: no brief, no problem, no process. It works well for a freelancer whose clients are in the portfolio and whose audience already knows what to look for. The approach keeps the site minimal and easy to maintain.
Agency and studio portfolios
Agency portfolios have a different significance. Visitors aren’t judging individual preferences but are instead evaluating if the team can manage their project, budget, and timeline. The following examples illustrate how agencies utilize CPTs to demonstrate their achievements.
Webbedrijf
Cases at the Webbedrijf agency are stored in a CPT and displayed in a Splide carousel, a deliberate choice that keeps the above-the-fold area clean while signaling depth. The cards use device mockup imagery (laptop/phone renders) rather than flat screenshots, which elevates the perceived production value.
Each tile leads with a results-framed headline, not a project name, a copywriting decision that shifts the portfolio from “look what we built” to “look what we achieved.” The posts carousel also solves the awkward grid problem that arises when you have four or more cases with unequal visual weight.
ON-LION
ON-LION projects are pulled from a CPT called Werk and displayed in a three-column grid. The grid items show live website screenshots, and on hover, the screenshots scroll automatically, giving visitors a preview of the actual site without leaving the WordPress Bricks portfolio 2026 page.
That hover-scroll behavior is a small interaction that punches well above its weight in building client trust. Each card includes a project title and a one-line description. It’s a straightforward grid, but the hover mechanic makes it memorable.
gnarles media
Gnarles media stores their projects as a CPT and displays them in a two-column grid. The layout is asymmetric, with tiles varying in size and mixing full-bleed editorial photography with a text card, creating a magazine-style rhythm without custom CSS.
The hover interaction is a great detail: the cursor transforms into a branded “Click” circle, replacing the default pointer with something intentional. Each tile links to a full case study page. It’s a clean example of how CPT + Bricks grid can produce editorial-quality output without an additional page builder plugin.
Sityn
Sityn case studies are stored as CPTs and rendered as full-width tiles via a Query loop, with one case per row that spans the entire viewport.
Each tile combines a project title framed as a problem statement, a short excerpt, and structured meta fields: Client, Sector, Focus, and Site URL. This meta fields layer is the key detail here. It transforms what would otherwise be a standard project listing into something closer to a brief, so the visitor immediately understands the context, industry, and scope before clicking through. The headline “The kind of builds we’d happily ship again” sets a confident editorial tone that most agency portfolios avoid.
CheckWP
Each CheckWP project is presented in a two-column layout: a carousel slider with a lightbox on the left and a text block on the right that includes the project name, description, tech stack list, and a “Visit Site” button.
The carousel lets the agency showcase multiple device mockups per project without collapsing everything into a single thumbnail. The Built With stack list is a deliberate transparency signal: it tells technically minded visitors exactly which tools were used, filtering for the right kind of inquiries. It’s a good pattern for WordPress-specialist agencies whose clients care about the underlying stack, not just the visual output.
📚 Read also: Creating a Marketing Agency Dynamic Portfolio Website With Crocoblock
Melbourne Web Studio
Melbourne Web Studio projects are stored as a CPT and displayed in a grid using a Query loop. Each card includes a structured set of modules: project name, category label, technology tags, description, and a “Visit Project” button linking to the single post.
The single project template contains the full case narrative. The grid serves as a scannable index: enough detail to spark interest, not so much that it competes with the case page. The Technology and Industry fields visible on single project pages are stored as custom fields, allowing the studio to query and filter by stack or sector if they need to surface that data elsewhere on the site.
Knut
Knut projects are stored as a CPT called Projectes and displayed in a two-column grid via a Query loop. Two interaction details set this apart:
- the cursor transforms into a custom circle that expands on hover;
- the thumbnail scales up on hover (zoom effect).
Each tile displays the project title as a problem-framed headline, with taxonomy tags (Web, Digital Design, Copywriting, Branding) visible at the bottom of the card. Those tags also signal services; as the visitor browses the portfolio, they understand the agency’s scope.
Still not Scared
Still not Scared agency’s case studies are stored as a CPT and displayed via a Query loop. The hover interaction is the standout detail: a yellow rectangle anchored to the card stretches horizontally and shifts to blue on hover, a directional motion cue that signals a click to go further without a visible button.
The two-column grid uses real client photography rather than device mockups, giving the portfolio a grounded, human quality that contrasts with the loud brand colors. The interaction is built entirely in Bricks without a JS library, keeping the page weight low.
Impala Intech
Impala Intech projects are stored as a CPT called Portfolio and displayed in a three-column grid via a Query loop. Each card carries two taxonomy tags, industry vertical and geography, which makes the portfolio function as a market signal, not just a showcase.
A visitor from the automotive sector immediately sees relevant work without filtering. The card thumbnails are custom-designed app UI compositions rather than screenshots, which improves visual consistency across a diverse project range. The “Learn More” link leads to a single post with a full project narrative.
AVL Media Group
AVL Media Group uses a sticky sidebar with the “Case Studies” heading, intro text, and category filter list that stays fixed while the right column, displaying posts from the CPT Portfolio via Query loop, scrolls independently.
Each post tile combines a category label, a headline, location meta, and a “Read more” link. The sticky filter panel on the left means the visitor always has navigation context, no matter how far they scroll. It’s a strong pattern for agencies with a large and categorically diverse case library.
Lenz Vive
Lenz Vive’s projects are stored as a CPT called Works and displayed via a Query loop. Each card shows the project title, year, and thumbnail, deliberately minimal metadata that keeps the grid visually clean.
Filter tabs at the top sort by production type (CGI & VFX, Event, Interview, Motion Graphics, Reels, Teaser), making the portfolio navigable for clients coming in with a specific production need. The hover zoom effect on thumbnails adds depth without introducing a separate interaction layer. The dark background with high-contrast yellow typography gives the portfolio an immediate production-house identity that static screenshots rarely achieve.
Easiest Approaches to Building a Dynamic Portfolio in Bricks
Examples above share a common foundation: projects stored as a CPT, rendered via a query, but the implementation varies. In Bricks, you have several realistic paths to building a dynamic portfolio archive, and which one you choose depends on how much control you need over the listing template and whether you’re bringing JetEngine into the stack.
Bricks Query loop
Best for: Freelancer portfolios, small agency sites with no filtering requirements.
Bricks has a built-in Query loop that lets you query any CPT and render items using Bricks elements. First, let’s create a CPT for our portfolio items. I’ll use JetEngine for this. In your WordPress Dashboard, go to JetEngine > Post Types, and click “Add New.”
For your CPT, you can add as many meta fields to store project details. When done, click “Create/Update Post Type”.
Now, let’s build a query loop for our CPT.
Open the target page in the Bricks editor, then add a new Container element where you want to display this content block on your page.
First, I’ll add a Title element to display the section name, and then I’ll use another Container and enable the toggle Query loop.
In the Query field, you need to adjust some fields by selecting “Posts” in the Type field and your portfolio CPT in the Post type field.
The next thing I’ll need is a couple of DIV elements, which I’ll use as columns to hold elements that will display portfolio data. Inside those DIV elements, I’ll use the following set of elements with dynamic data enabled for the CPT Projects:
- Image — to display the featured image;
- Post title — to display the title;
- Basic text — to display the category;
- Basic text — to display the short description;
- Button — to add CPT single permalink.
For the DIV that holds the portfolio image, I’ll set the width to 450 px. For the container where the loop is enabled, I’ll add 30 px for all sides, and on the front end, this will look like this.
This is the lightest setup, and it’s used in several of the simpler examples above.
The limitation is the ceiling. The Bricks Query loop provides layout and dynamic field output without page reloads or custom code.
JetEngine Dynamic Fields + Listing Grid widget
Best for: Agencies with filterable portfolios, any site where the listing template will be reused in multiple contexts, or where you need AJAX filtering via JetSmartFilters.JetEngine’s Listing Grid is a dedicated widget for rendering CPT items in Bricks. You create a Listing Item by going to WordPress Dashboard > JetEngine > Listings.
In the Listing view field, don’t forget to select the “Bricks” builder. We have a very informative video tutorial on how to create Listing Items. Please check it out.
In my listing item, I’ve used a set of Dynamic Field widgets to display the project details. All dynamic fields are linked to the CPT meta fields via the CONTENT tab, General settings section, and the Source field.
Building a listing item is very simple. I’ve included some margins, a 1px border, and corner rounding as in the previous example. You can also do it by going to the STYLE tab.
Now we can go to the target page and use the Listing Grid widget.
To connect the Listing Item to the Listing Grid widget, go to the CONTENT tab, then to General settings, and find your listing in the Listing field.
I’ve also set the display to 3 columns so we can see the difference from the first example.
Now let’s see how it looks on the front end.
If you have many projects in your portfolio, you can add JetSmartFilters to your Listing Grid so your clients can narrow the display.
For a full walkthrough on adding CPTs to the Listing Grid in Bricks, feel free to refer to the following video manual.
FAQ
You’ll need a separate plugin for this, like JetEngine. Its Post Types module handles CPT registration directly from the WordPress dashboard, no code required.
This is one of the most common points of confusion. In Bricks, you make the entire card clickable by setting a dynamic link on the wrapping container element. In the container’s link settings, select “Dynamic data” and point it to the post permalink. If you’re using a JetEngine Listing Template, the same logic applies; use the Dynamic Link widget at the top-level container of the listing item template.
Both options are available, but they serve different needs. You can use JetEngine’s Query Builder as the data source for a Bricks Query loop, which gives you advanced query logic while keeping the native loop structure. For a simple portfolio without filtering, the Query Builder + native loop combination works well. For anything with live filtering or pagination, use the Listing Grid.
The core features, like CPT/CCT registration, custom fields, relations, Query Builder, Listing Grid, and Dynamic Fields, are fully available in Bricks. The main differences are in visual integration: some JetEngine widgets designed specifically for Elementor’s widget panel have Bricks-specific counterparts that may lag slightly behind in feature parity after major JetEngine updates.
In most real-world builds, Bricks produces leaner markup and loads fewer assets by default. The performance gap is most noticeable on listing pages with large CPT archives and AJAX filters, where Bricks’ lighter DOM structure reduces the JavaScript payload on initial load.
Yes, JetFormBuilder is compatible with Bricks. You can add the JetForm element to any Bricks page or template and select the form you’ve built in the JetFormBuilder form editor.
Conclusion
Fifteen web design portfolio Bricks that’s not inspiration. That’s data.
The pattern is consistent: CPT as the foundation, Query loop or Listing Grid as the render layer, interaction design as the only reliable way to differentiate visually when the technical base is identical.
- Amine Sidi Moussa and Lenz Vive work with the minimum;
- AVL Media Group and Sityn add metadata layers that turn a portfolio into a functional sales tool, not just a gallery.
Bricks is the hero here: clean markup, predictable behavior, and no special reason to use custom CSS. For portfolio sites where page weight matters, that’s worth more than a long feature list.
If you’re building from scratch, match the approach to scale: Use a Query loop for someone with more than five projects, and use Listing Grid + JetSmartFilters when you need filtering or plan to reuse the template across multiple contexts. If you’re migrating from Elementor, the rebuild makes sense when performance or markup control has become a real constraint, not just a talking point.