← Back to portfolio
Corporate Website · Static Platform · Portmason Automation

Corporate Website & Portmason Platform Experience

A modern corporate website designed as a fast, modular, and data-driven experience that brings services, brands, thought leadership, promotions, and the Portmason Platform™ into one maintainable publishing system.

Static Website Architecture Portmason Platform Data-Driven Catalogs Containerized Development GitHub Pages Environment-Driven Configuration
www.etal.solutions
Portfolio note: This case study describes a corporate website and platform-engineering project that I designed and developed. It focuses on the architecture, operating model, and reusable patterns rather than presenting the site as a one-off visual build.

Building a website as a maintainable operating system

The Et al Solutions corporate website needed to do more than present static company information. It had to support multiple service areas, brands, promotions, thought-leadership content, legal material, and a growing software platform without becoming difficult to maintain.

I designed the site as a structured static application with reusable catalogs, modular content, environment-driven configuration, and repeatable Portmason workflows for local setup, rendering, verification, and deployment.

The result is a website that remains simple at runtime while retaining the operating discipline normally associated with a more complex application platform.

The site had to grow without turning into a collection of exceptions

A traditional page-by-page website would have been easy to start, but increasingly difficult to evolve. New services, brands, promotions, platform capabilities, and long-form content could quickly create inconsistent layouts, duplicated logic, and manual deployment steps.

  • Services, brands, promotions, and platform offerings needed a consistent catalog model.
  • Major sections needed distinct visual identities without making the overall site feel fragmented.
  • The primary experience needed to remain fast, accessible, and easy to navigate.
  • Local development and production publishing needed repeatable, environment-aware workflows.
  • Shared content such as headers, footers, tracking, and consent controls needed to stay synchronized.
  • Configuration values needed to be rendered safely without hard-coding environment-specific settings into source files.

Design principle

Keep the deployed website simple, but make the process that produces it disciplined, repeatable, and extensible.

I separated the public website from the tooling that prepares it. The browser receives static HTML, CSS, JavaScript, and generated configuration. Portmason handles the more complex work before deployment: environment initialization, partial rendering, configuration generation, validation, and runtime-specific publishing.

Content catalogs are represented as structured data rather than being duplicated across page markup. Shared sections are assembled through controlled partials, and environment tokens are resolved during the build process rather than left for the browser to interpret.

Project Configuration ↓ Portmason Setup ↓ Generated Public Configuration ↓ Partials + Catalog Data + Page Content ↓ Static Rendering and Validation ↓ Deployable HTML / CSS / JavaScript ↓ GitHub Pages ↓ www.etal.solutions

Core architecture patterns

Self-registering catalogs

Services, brands, promotions, and platform content are modeled as structured items so new entries can participate in the existing experience without rewriting navigation or layout logic.

Static-first delivery

The production site remains a static asset set, reducing runtime complexity while preserving strong performance, portability, and low operational maintenance.

Shared partial rendering

Headers, footers, analytics, consent controls, and other shared elements are maintained centrally and rendered into final pages through controlled Portmason markers.

Environment-driven configuration

Project configuration originates in the environment and is transformed into approved public values and rendered page tokens without making generated JSON the source of truth.

Containerized local development

Development runs in containers and uses repeatable setup workflows rather than depending on individually configured host runtimes or one-time manual preparation.

Runtime-specific deployment modules

Portmason selects optional setup, provisioning, and deployment behavior from the current runtime and adapter code, keeping platform-specific behavior independently replaceable.

Single-scroll primary experience

Core corporate content is organized into an intentional single-page experience, while long-form articles, case studies, legal pages, and other durable content retain their own URLs.

Build-time validation

Rendering detects missing partials, invalid markers, unresolved configuration tokens, and other incomplete output before the site is treated as deployable.

A simpler website supported by a stronger delivery system

The public result is a responsive static website, but the underlying system provides much more than static file hosting. It creates a repeatable path from project configuration and structured content to validated, deployable output.

The architecture also gave the Portmason Platform™ a practical proving ground. Website requirements exposed real operational needs around configuration, partial rendering, runtime selection, deployment adapters, logging, and replaceable modules.

Lower runtime complexity The production site remains static, portable, and inexpensive to operate.
More maintainable growth New catalog items and content areas fit established structures instead of creating isolated page logic.
Repeatable delivery Setup, rendering, validation, and deployment are handled through reusable Portmason workflows.

What this demonstrates

This case study shows how I approach a website as both a user experience and an operational system. The visual result matters, but so do the structures that make the site safe to change, straightforward to deploy, and capable of growing without accumulating unnecessary complexity.

  • Translating business and brand requirements into a coherent web architecture.
  • Designing structured catalogs instead of duplicating page-level content logic.
  • Applying static-site simplicity without sacrificing deployment discipline.
  • Separating project configuration, generated public configuration, and rendered output.
  • Building repeatable containerized development and deployment workflows.
  • Using a real website project to refine a broader platform and tooling model.
  • Balancing distinct visual sections with consistent site-wide behavior.

Technologies and concepts represented

HTML5 CSS JavaScript Static Site Architecture GitHub Pages Docker Portmason Environment Configuration Partial Rendering Dependency Injection Runtime Adapters Data-Driven Catalogs Consent Management Responsive Design Build Validation