Treating Your Portfolio Like a Product: Quality Engineering on a Personal Site

The temptation on a small site is to test by hand once and call it done. But quality is a property of the whole delivery system, not a moment at the end. The same principle scales down: build, lint, test, and deploy should form one continuous, automated loop even for a personal project.

In practice that meant a pipeline that runs on every push and a production site that only ever reflects what passed through it.

The site is bilingual, English and German. The naive approach stores the chosen language in a cookie and serves both languages from the same URL. It looks fine to a person and is invisible to a search engine: Google only ever indexes one version, with no signal that a translated equivalent exists.

The fix was to move the locale into the URL path, /en and /de, and emit hreflang alternates and per-locale canonical tags. Each language is now independently crawlable, and search engines understand the relationship between them.

I added an end-to-end suite running across Chromium, Firefox, and WebKit. The WebKit coverage paid for itself almost immediately.

After I introduced a Content-Security-Policy, the interactive features still worked in Chrome and Firefox, but a WebKit test failed. The cause was a single CSP directive, upgrade-insecure-requests, which WebKit applies even to localhost while Chromium and Firefox exempt it. Over the plain-HTTP test server, WebKit tried to load the page scripts over HTTPS, they failed, and nothing hydrated.

In production everything is served over HTTPS, so real Safari users were never affected. But the test surfaced a genuine engine difference I would otherwise have carried as a silent assumption, and the directive was redundant with HSTS, so removing it cost nothing.

Manual verification does not survive contact with a busy week. The continuous integration pipeline runs lint, a production build, and the full end-to-end suite across three browser engines on every change.

Performance, accessibility, and SEO are audited separately as a non-blocking report, so a score dip informs without halting a deploy. The hard gates stay deterministic; the softer signals stay visible.

Most of the work was unglamorous and cumulative. No single change is dramatic; together they are the difference between a page that merely renders and one that is engineered.

For a quality engineering practitioner, the most honest portfolio is one built the way you would have a team build a product: tested, measured, internationalized, and observable.

The point was never the website. It was that the discipline applies at any scale, and that the cheapest place to catch a defect is always before anyone else sees it.