Skip to content

Project brief: building an agency portfolio

In this tutorial, we'll build a small design agency website from scratch using Silex. By the end, you'll have a live, professional site hosted on GitLab Pages.

What we're building

A three-page portfolio website for a fictional design agency:

Homepage (index) — Landing page introducing the agency. Features a hero section with a headline, short description, and call-to-action button. Below that, a portfolio showcase: three featured projects displayed as cards (using flexbox). At the bottom, a "Latest Blog" section showing the three most recent blog posts from a WordPress database.

About page — Tells the agency's story. Two columns: on the left, text about the team; on the right, an image. Uses CSS variables for consistent spacing and typography.

Contact page — Contact form with fields for name, email, message. Form submissions go to Formspree. Also includes contact details (address, phone, email).

All three pages share a header (logo + navigation) and footer (copyright, links) — implemented as Symbols so changes sync across all pages.

What we'll use along the way

Layout & Style: - Flexbox for all layout (rows, cards, columns) - CSS variables for colors (brand color, text color, backgrounds) and spacing (padding, gaps) - BEM class naming (e.g., agency-hero, agency-card, agency-header) - Responsive design with breakpoints (desktop, tablet, mobile)

Components & Reusability: - Symbols for shared header and footer (one change, all pages update) - A card component design system for consistency

CMS Integration: - WordPress as the data source with Pods for structured content (custom post types and custom fields) - WPGraphQL to expose blog posts and project data - Data bindings on the homepage to pull blog posts and loop over them - Expressions and filters to format dates and trim descriptions

Publishing: - GitLab as storage and hosting - Custom domain setup (optional, but we'll show it)

By the end of this tutorial, you will have learned

  • How to create and structure multiple pages with internal navigation
  • How to use Symbols for consistency across pages
  • How to design a system with CSS variables and consistent spacing
  • How to set up WordPress and connect it as a data source
  • How to bind data to components and loop over arrays
  • How to publish to GitLab Pages and (optionally) add a custom domain
  • Best practices for semantic HTML, responsive design, and accessibility

A note on time and complexity

This is a complete, production-ready site. If you're new to Silex or web design, budget 2-4 hours. If you're experienced, 45 minutes to an hour.

Each section is self-contained: you can do the layout and styling without CMS integration, or skip forms if you want to focus on layout.

Before you start

Make sure you have:

  • A Silex editor open (either the online instance at v3.silex.me or a self-hosted version)
  • A GitLab account (free at gitlab.com) for publishing
  • (Optional) A WordPress installation with Pods and WPGraphQL (see WordPress setup)
  • (Optional) A domain name if you want to use a custom domain in the final step

The pages we'll create

  1. Project brief (this page) — Overview of what we're building
  2. Structure — Create pages, layout, navigation, and Symbols
  3. Styling — Design system, typography, colors, responsive adjustments
  4. CMS integration — WordPress setup, data binding, loops
  5. Publish — Publish to GitLab Pages and optionally set up a custom domain

Next steps

Ready to start? Head to Structure to create your pages and build the layout.

Or, if you want to understand the broader context first, check these related pages:

Edit this page on GitLab