Frontend quality system

Context

A polished portfolio can regress quickly when content, layout, localization, and SEO are edited at the same time. The site needed a quality layer that catches structural issues without requiring a heavy application runtime.

The quality system had to support a static Astro architecture while validating the details that matter to recruiters and search engines: one H1, crawlable links, localized language attributes, accessible controls, stable responsive layouts, and working case-study routes.

Problem

Manual review is not enough for a multilingual portfolio. A small copy edit can break an Arabic layout, a route change can remove a case study from discovery, and a design tweak can create horizontal overflow on mobile.

The challenge was to create meaningful checks that protect production quality without turning the project into a slow, over-engineered test suite.

• Localized pages needed consistent shell, controls, and card styling.
• Dynamic case-study routes needed to remain reachable in every supported language.
• Accessibility rules needed automated coverage for core pages.
• Performance-sensitive architecture needed to avoid accidental Astro islands or client-side routing.

Approach

The system combines static typing, content-driven route generation, build-time checks, and focused browser tests. Each layer catches a different class of regression while keeping the runtime site simple.

Tests emphasize user-visible and crawler-visible behavior rather than implementation trivia: headings, links, language attributes, structured data, image loading hints, theme controls, and horizontal overflow.

• Typed case-study records make missing fields visible during development.
• Astro build checks validate pages before deployment.
• Playwright verifies crawlable routes, navigation behavior, localized controls, and responsive overflow.
• axe coverage catches accessibility violations on representative pages.

SEO and accessibility decisions

The same structure that helps accessibility also helps crawlers. Clear headings, real links, semantic lists, language attributes, and server-rendered content make the site easier for people, search engines, and AI agents to interpret.

The quality system therefore checks for discoverability and accessibility together instead of treating them as separate disciplines.

• Verified that important routes use localized `lang` and `dir` attributes.
• Checked structured data for localized article body, proof sections, and outcomes.
• Guarded against accidental client-side-only navigation in the static shell.
• Kept visual consistency checks focused on shared tokens such as radius, cards, and controls.

Performance decisions

The quality approach protects performance by preventing accidental complexity. The site can remain mostly static, images can be optimized through Astro, and dynamic behavior can stay limited to necessary controls.

Instead of adding more runtime monitoring code, the implementation prioritizes build confidence, stable HTML, and deterministic layouts that Lighthouse and real users can evaluate reliably.

• Kept automated checks focused enough to run during normal development.
• Validated that non-hero images keep lazy loading and async decoding.
• Protected the zero-island static homepage expectation in browser tests.
• Checked horizontal overflow so mobile and RTL layouts remain stable.