Charlles.dev

Engineering notes

How this landing is built.

An editorial page about the decisions behind this experience: progressive media, contextual navigation, localized content and a quality routine before shipping.

Progressive enhancement in the hero

Video enriches the presentation without becoming the only way to understand the page.

Poster first

The composition starts with a stable, predictable poster. WebM is used when available, with an explicit MP4 fallback for browsers that cannot load the primary codec.

  • poster
  • WebM
  • MP4

Motion under control

Scrubbing follows scroll position, loops enter only when needed and reduced-motion preference stops media at runtime.

  • scroll
  • reduced motion
  • visibilitychange

An interface that makes state visible

Work, About and Contact behave as shareable, navigable and dismissible panels.

Predictable deep links

Each panel has its own hash. That keeps context in browser history and lets someone share the Work area without creating a parallel screen.

  • #work
  • #about
  • #contact

Focus and context

When a panel opens, focus enters its content, Tab stays inside the dialog, Escape closes it and the background becomes inert while the decision is in progress.

  • focus trap
  • inert
  • aria-modal

Localized and verifiable content

The experience keeps the same structure across three languages without turning translation into automated copy.

One contract, three voices

PT-BR, EN and ES dictionaries share one typed shape. A new label therefore cannot ship in one language and silently disappear in the others.

  • PT-BR
  • EN
  • ES

Evidence before adjectives

Cases and notes use public links and decisions that can be checked in the code. Metrics are not invented to fill editorial space.

  • public work
  • evidence
  • honest copy

Quality gate

Ship only after checking the essentials.

Every change follows the same local sequence before reaching the repository: types, rules, tests and a production build.

  1. 01Type-check
  2. 02Lint
  3. 03Vitest
  4. 04Next build

These notes describe decisions already present in the code. They are not performance metrics or a promise of availability.