William Oliveira — Portfolio

Live at https://thealphaengineercode.github.io/. Complete and deployed: six findings, bilingual pt-BR / English from one dictionary, a hand-written WebGL scene, and 159 assertions that run against the built page.

This is a personal site, not a template. The code is yours to reuse; the content — name, biography, work history, project claims, contact addresses — is not. See License, which is deliberately split.

What does not exist here, said plainly: no build step, no package manifest, no framework, no analytics, no backend, and no external request of any kind. That is not an omission to be fixed later — it is the design, and Why no framework explains the cost it buys.

A recruiter comparing candidates has perhaps forty seconds per portfolio and no way to separate a real system from a styled README. The category's answer — a dark grid of cards, each with a project name, a gradient and a stack of logos — makes every candidate look identical and asks the reader to trust an adjective. "Robust", "scalable", "production-ready" cost nothing to type.

The number that cannot be checked is worth less than no number at all.

The page is the artefact its subject produces at sea: an inspection record. Each project is a finding with an identifier (OFF-01, ENG-02), a channel, measured values, a stated status and a declared limit — what the system does not do, in its own words, opened in place. Every measurement is one that the linked repository can confirm, and a published colour key above the register means no colour on the page carries two meanings.

Scrolling is the inspection descent: the camera drops from an overflight at +40 m, through the waterline, to the seabed and the subsea manifold, while a depth gauge reads the camera's real height. The station label is derived from the depth, never from the scroll position, so the word and the number beside it cannot contradict each other.

The whole site is three files plus self-hosted font subsets. A build step would add a toolchain to maintain for a page that changes a few times a year, and every external request — a CDN, a font host, an analytics tag — is a third party that can break, slow down or track the reader. Fonts are subset to latin and latin-ext and served from this repository, so the page makes zero requests outside its own origin, which the verification pass asserts.

index.html    markup; content authored in Portuguese
style.css     the whole visual system
app.js        language switch, scan reveal, WebGL scene and the descent
fonts/        self-hosted woff2 subsets + @font-face declarations
cv/           the CV as a PDF, one per language; the switch moves the file
check.mjs     the verification pass (not served content; delete it and nothing breaks)
DESIGN.md     the visual system as built
PRODUCT.md    durable product truth this site must preserve

The 3D scene has no model file: the hull is generated in app.js as a loft over the transverse stations in STATIONS_HULL, so widening the vessel is a change to one table of numbers. Portuguese lives in the markup and English in the EN object at the top of app.js — one dictionary, never two copies of the page.

Any static file server works. With Node installed:

npx --yes http-server . -p 4173
# or: python -m http.server 4173

Then open http://127.0.0.1:4173/.

Opening index.html straight from the filesystem also works, except that the self-hosted fonts may be blocked by the browser's file:// origin rules.

node check.mjs

Node 24+ and an installed Chrome, nothing else — it drives the browser over CDP using the runtime's own WebSocket and fetch, so there is still no npm install. Set CHROME=/path/to/chrome if the binary is somewhere unusual.

159 assertions, over both viewports and both languages, aimed at the things that have actually broken here rather than at a screenshot diff:

The counter guard is proved in both directions: it samples ninety frames of a real count-up and checks that the unclamped formula still would fail, so the test cannot quietly stop proving anything.

Published from this repository, which is the TheAlphaEngineerCode user site — naming it thealphaengineercode.github.io is what puts it on the root URL rather than under a path. Pages serves the repository root as-is, and .nojekyll stops Jekyll from processing the files.

Pushing to main deploys. There is no build step and no workflow: the branch is the artefact.

• Text lives in index.html in Portuguese. Every translatable node carries a data-i18n key whose English string sits in the EN object in app.js. Adding a key on one side only leaves that node in Portuguese in English mode — the fallback is deliberate, never a blank, and check.mjs fails on the mismatch so it cannot go unnoticed.
• A new project is one <li class="record"> in the register: record--offshore or record--engineering sets the channel colour, and the ID (OFF-03, ENG-05) is also the anchor. Its <p class="record__status"> needs data-state="ok" when the work is shipped and in service or data-state="wip" while it is still declared as being built — that attribute is the only thing driving the green or amber lamp.
• A new colour means a new row in the colour key above the register, or it does not go in. The key is on the page precisely so that no colour can mean two things; DESIGN.md holds the table it has to match.
• Nothing in the top bar scrolls. Anything that would overflow it wraps. That rule exists because a scrolling strip left a focusable link outside the clip, and it is asserted.
• After changing style.css, app.js or fonts/fonts.css, update the ?v= stamp on all three tags in index.html. node check.mjs recomputes the hash, fails when it drifts and prints the value to paste in — so this is one you get told about rather than one you have to remember. It matters because Portuguese lives in the markup and English in the script: without the stamp, a reader on a ten-minute-old cache can get a fresh index.html with a stale app.js and see a page that is half-translated. fonts.css is stamped for the same reason — a wrong folder in its url() once meant no font loaded at all.
• The depth bands come from STATIONS, keyed by metres below the waterline. Change the camera range and the labels follow, because the label is derived from the depth rather than from the scroll position.

Read DESIGN.md before changing anything visual and PRODUCT.md before changing anything claimed. Neither is decoration: they are why the page is allowed to say what it says.

The site is finished for its purpose; what remains is upkeep rather than construction.

• Point the LinkedIn About section at this URL, replacing the dead thedevoffshore.github.io/profissional
• Add each new public system as a finding, with its numbers and its declared limit
• Decide on a custom domain (currently the github.io subdomain)
• Replace the placeholder avatar with a real photograph

This is a personal site, so pull requests changing its content are not accepted. Bug reports are genuinely welcome — if something renders wrong, breaks at a viewport size, misbehaves with a keyboard or a screen reader, or a number here disagrees with the repository it points at, please open an issue. The last of those is the most serious.

The code is under the MIT License — see LICENSE, which is the standard text kept unmodified so that tooling can recognise it. Reuse it, including commercially.

Two things sit outside that grant, and NOTICE.md says so in full: the content — name, biography, work history, project claims and contact addresses — is published to be checked, not republished; and the fonts in fonts/ are redistributed under the SIL Open Font License 1.1, detailed in fonts/LICENSE.md.

Strip the content and the fonts and what is left is MIT, owing nothing but the copyright notice.