Design Objective

The architecture of mohamedzaam.com was designed to prioritise information retrieval over browsing. The goal was to create a repository interface that is functional, scalable, and optimised for performance. This system is designed to last throughout my entire career with minimal maintenance overhead.

System Overview

The mohamedzaam.com domain operates as a three-domain architecture:

  • mohamedzaam.com (Navigation Hub): Acts as the canonical entry point and routing layer between professional and personal content. This landing page provides domain verification, contact information, and clear navigation to the appropriate subdomain.
  • dev.mohamedzaam.com (Professional): Technical portfolio, security research, engineering documentation, and CTF writeups.
  • me.mohamedzaam.com (Personal): Non-technical writing, personal interests, security awareness content for general audiences, and miscellaneous topics.

Both dev and me subdomains consume content from a centralised Git repository (mohamedzaam/posts) and are deployed via Cloudflare Pages. This shared content infrastructure enables consistent publishing workflows whilst maintaining logical separation of context. The root domain serves as the stable, verified entry point for all official content under the mohamedzaam.com namespace.

The Search-Based Interface

The decision to utilise a single-page, query-based interface is driven by three functional requirements:

  • Direct Access: The system enables immediate access to specific content through keyword-based queries. By removing feed-based navigation, users can retrieve content based on explicit search intent rather than sequential browsing. This design assumes users know what they are looking for and prioritises speed of retrieval.
  • Scalability: A search interface maintains consistent performance characteristics regardless of content volume. The user interaction model remains unchanged whether there are 10 articles or 1,000 articles. With appropriate indexing strategies, query performance can scale efficiently as the content repository grows.
  • Performance Optimisation: The absence of complex navigation structures, pagination logic, and media-heavy layouts reduces page weight and maintains sub-second response times. The lightweight architecture ensures fast load times even on constrained network conditions.

Visual System & Typography

The visual design follows a minimal approach to maximise readability and performance:

  • High-Contrast Palette: Monochrome greyscale styling provides maximum contrast ratios for optimal legibility across display types and lighting conditions. This ensures accessibility compliance and reduces visual cognitive load.
  • System Font Stack: The site uses a system font stack (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif) to ensure zero latency from font loading and consistent rendering across platforms. This eliminates the need for web font requests, reducing initial page load time and avoiding layout shift during font loading.
  • Reduced Visual Elements: The interface contains no hero images, icons, or decorative elements. This minimises DOM complexity and keeps the critical rendering path as concise as possible, resulting in faster time-to-interactive metrics.

Context Isolation

Content is partitioned across two subdomains to maintain logical separation:

  • dev.mohamedzaam.com (Professional): Security research, engineering documentation, technical projects, and offensive security work.
  • me.mohamedzaam.com (Personal): Non-technical writing, book recommendations, music interests, security awareness guides for non-technical audiences, and miscellaneous content.

This segmentation serves three purposes:

  1. Audience Clarity: Provides clear context boundaries for different audiences, ensuring technical visitors are not presented with personal content and vice versa.
  2. Independent Deployment: Allows for separate caching strategies, deployment schedules, and update cycles per subdomain.
  3. Content Isolation: Maintains professional identity separation, preventing algorithmic mixing of content types that would dilute the signal-to-noise ratio for each audience.

Content Infrastructure

The content layer is managed through a dedicated Git repository (mohamedzaam/posts) that acts as a content microservice:

  • Framework-Agnostic Design: Contains only structured Markdown files with YAML frontmatter. No site logic, UI components, or build pipelines exist in this repository.
  • Centralised Publishing: Both subdomains consume from the same repository via Git submodules, ensuring consistent content workflows and eliminating duplication.
  • Cloudflare Pages Integration: Automatic deployment triggers on repository updates, eliminating manual deployment steps and ensuring content synchronisation across subdomains.
  • Asset Management: Images, diagrams, and code snippets are stored in content/assets/ with a predictable directory structure, allowing for relative path references in Markdown.

This approach decouples content from presentation, enabling independent evolution of the content repository and site implementations. The repository can be consumed by any static site generator without modification.

Technical Stack & Deployment

This site is built with zero external dependencies:

  • Static Generation: All content is pre-rendered at build time to eliminate server-side processing overhead. Pages are served as static HTML, CSS, and JavaScript files.
  • Vanilla JavaScript: The search functionality uses vanilla JavaScript with no frameworks or libraries, keeping the total JavaScript payload minimal (under 5KB minified). This reduces parsing time and eliminates framework-specific vulnerabilities.
  • Edge Caching: Static assets are served via Cloudflare's CDN with aggressive cache headers, ensuring sub-100ms time-to-first-byte for repeat visitors. The CDN handles TLS termination and DDoS mitigation.
  • No External Dependencies: The architecture contains no npm packages, build tools, or third-party libraries beyond the static site generator itself. This minimises supply chain risks and ensures the site remains functional indefinitely.

This approach prioritises long-term maintainability and minimal operational overhead. The architecture can run indefinitely without framework deprecations, dependency updates, or breaking changes. The absence of dynamic server-side components and authentication systems eliminates entire classes of vulnerabilities (SQL injection, remote code execution, session management exploits).

Design Philosophy

This architecture reflects several core principles:

  • Longevity: By minimising framework dependencies and avoiding unnecessary abstractions, the site remains functional with minimal maintenance. The static nature ensures it can be served from any web server indefinitely.
  • Performance: Static generation and minimal JavaScript ensure fast load times and low latency, even on constrained devices or slow networks.
  • Security: The reduced attack surface eliminates most server-side vulnerabilities. Static hosting removes the need for continuous server hardening, patching, or monitoring.
  • Portability: Content stored as plain Markdown files can be migrated to any platform or framework without lock-in. The repository is the source of truth, independent of any specific implementation.
  • Sovereignty: Self-hosted infrastructure under the mohamedzaam.com domain ensures complete control over content, presentation, and availability, independent of third-party platforms.