ENGINEERING CASE STUDY · DWG PF-001 · PRODUCTION

Engineering This Portfolio

Zero-Framework Architecture · Terraform on AWS · Multi-Layer CI Gates

A portfolio should practice what it preaches: intentional simplicity, sub-second load times, declarative cloud infrastructure, and automated quality gates before every deploy.

System	laise-eduardo.com	Doc ID	PF-001
Stack	Plain HTML & CSS · ES Modules · Playwright · Terraform · AWS
Infra	S3 (OAC) · CloudFront · ACM · Cloudflare	Sheet	5 / 5
Links	Source Repository Case Study FG-001 (eleven11) Back to Portfolio

01 / Design & Rendering Architecture The Drawing Sheet

Instead of shipping a heavy client-side bundler for a content-driven site, this portfolio is built as an ISO-inspired engineering drawing sheet (The Drawing Sheet) using semantic HTML, custom CSS grid geometry, and a single structured data source (site/content.js).

To guarantee full accessibility for search crawlers, AI agents, and no-JavaScript readers while preserving dynamic runtime overrides for Playwright tests (window.__TEST_OVERRIDES__), the main sheet is pre-rendered directly into site/index.html from the same template module used in the browser.

Architectural Trade-offs

Zero runtime dependencies: No React, Next.js, or Tailwind build step required to serve static content; zero supply-chain churn in production assets.
Single source of truth: renderMain(content) in site/main.js powers both static HTML generation and in-browser test overrides.
Print & responsive readiness: Fluid CSS grid adapts from 320px mobile viewports to 2000px monitors and exports cleanly to PDF via @media print rules.

02 / Cloud Infrastructure & Delivery Terraform + AWS

Declarative AWS & Cloudflare Stack

Private S3 Origin (web.tf): Bucket blocks all public ACLs and policies; access is restricted strictly to the CloudFront distribution via Origin Access Control (SigV4).
Edge Routing (www-redirect.js): A CloudFront Function on viewer-request enforces 301 canonical redirects from www to the apex domain (preserving query strings) and resolves clean directory URLs (such as /projects/eleven11/) to nested index.html objects.
TLS & DNS (dns.tf): ACM certificate provisioned in us-east-1 with DNS validation and unproxied CNAME flattening managed via the Cloudflare Terraform provider.

Keyless CI/CD Deployment (`deploy.yml`)

OIDC Authentication: GitHub Actions assumes a least-privilege IAM role (laise-eduardo-com-github-actions-deploy) via OpenID Connect with zero long-lived AWS keys stored in secrets.
Gated Promotion: The deploy job declares a hard dependency (needs: test) on the verification workflow, enforced by a dedicated unit test.
Split Cache Headers: Static assets sync with max-age=3600, while HTML documents sync with no-cache followed by CloudFront invalidation.

03 / Multi-Layer Verification Pipeline Quality gates

Layer	Tooling	What It Verifies
01 · Static	html-validate	Strict HTML5 semantics, heading hierarchy, landmark roles, attribute quoting, and zero trailing whitespace across every HTML entry point.
02 · Unit	node:test	Tests the CloudFront Function (`www-redirect.js`) for 301 canonical redirects, query preservation, and directory index resolution, plus CI workflow invariants (`workflows.test.js`).
03 · E2E	Playwright	Runs across Desktop and Mobile viewports verifying section visibility, navigation parity, CV download reachability (HTTP 200), zero horizontal overflow at desktop/tablet/mobile widths, 404 root-relative asset styling, and case study navigation.

Navigation Drawing set

Review the Finder Group product case studies or return to Sheet 1.

Sheet 1: Executive Overview ← Sheet 4: Zelo App Sheet 2: eleven11 Finder